Laravel 12 CRUD
#10 Membuat Halaman Edit dan Hapus Siswa (Update & Delete)
🔄 Ubah data • ❌ Hapus data • ✅ Pesan sukses
🛠️ Sekarang kita lengkapi CRUD dengan Edit dan Hapus! Di artikel sebelumnya kita sudah bisa menambah dan melihat data siswa. Sekarang kita buat tombol Edit untuk mengubah data, dan tombol Hapus untuk menghapus data. Juga akan kita tambahkan pesan sukses agar pengguna tahu perubahan berhasil. Ayo mulai! 🚀
Langkah 1: Buat Halaman Edit (Form untuk Mengubah Data)
1 Buat file baru di resources/views/siswa/edit.blade.php. Ini adalah form edit yang mirip dengan form tambah, tapi data sudah terisi otomatis. Isi dengan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Siswa</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f9f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #059669;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
color: #333;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
button {
background: #10b981;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
width: 100%;
}
button:hover {
background: #059669;
}
.back {
display: inline-block;
margin-top: 15px;
text-decoration: none;
color: #10b981;
}
</style>
</head>
<body>
<div class="container">
<h1>Edit Data Siswa</h1>
<form action="{{ route('siswa.update', $siswa->id) }}" method="POST">
@csrf
@method('PUT')
<label for="nama">Nama Lengkap</label>
<input type="text" name="nama" id="nama" value="{{ old('nama', $siswa->nama) }}" required>
<label for="kelas">Kelas</label>
<input type="text" name="kelas" id="kelas" value="{{ old('kelas', $siswa->kelas) }}" required>
<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat" rows="3" required>{{ old('alamat', $siswa->alamat) }}</textarea>
<button type="submit">Update Data</button>
</form>
<a href="{{ route('siswa.index') }}" class="back">← Kembali ke Daftar Siswa</a>
</div>
</body>
</html>
Perbedaan dengan form tambah:
@method('PUT')→ Laravel membutuhkan method PUT untuk update (karena browser hanya support GET/POST).action="{{ route('siswa.update', $siswa->id) }}"→ mengirim ke rute update dengan ID siswa.value="{{ old('nama', $siswa->nama) }}"→ menampilkan data lama, dan jika ada error validasi akan menampilkan input sebelumnya.
Langkah 2: Isi Method edit() dan update() di Controller
2 Buka app/Http/Controllers/SiswaController.php. Kita perlu mengisi method edit() dan update().
Method edit() → menampilkan form edit dengan data siswa yang dipilih:
public function edit($id)
{
$siswa = Siswa::findOrFail($id); // cari siswa berdasarkan ID, jika tidak ada akan error 404
return view('siswa.edit', compact('siswa'));
}
Method update() → menerima data dari form, validasi, lalu update database:
public function update(Request $request, $id)
{
// Validasi input
$request->validate([
'nama' => 'required|string|max:255',
'kelas' => 'required|string|max:50',
'alamat' => 'required|string',
]);
// Cari data siswa
$siswa = Siswa::findOrFail($id);
// Update data
$siswa->update([
'nama' => $request->nama,
'kelas' => $request->kelas,
'alamat' => $request->alamat,
]);
// Redirect ke halaman daftar dengan pesan sukses
return redirect()->route('siswa.index')->with('success', 'Data siswa berhasil diperbarui!');
}
💡 Penjelasan:
findOrFail($id) akan mencari data. Jika tidak ditemukan, otomatis menampilkan halaman 404. Sangat berguna untuk keamanan.
Langkah 3: Isi Method destroy() untuk Menghapus Data
3 Di controller yang sama, isi method destroy():
public function destroy($id)
{
$siswa = Siswa::findOrFail($id);
$siswa->delete();
return redirect()->route('siswa.index')->with('success', 'Data siswa berhasil dihapus!');
}
Method ini akan menghapus data siswa berdasarkan ID, lalu redirect ke halaman index dengan pesan sukses.
⚠️ Catatan penting: Hapus data bersifat permanen. Untuk aplikasi nyata, biasanya menggunakan soft delete (menandai sebagai terhapus tanpa benar-benar menghapus). Tapi untuk belajar, ini sudah cukup.
Langkah 4: Tambahkan Tombol Edit dan Hapus di Halaman Index
4 Buka resources/views/siswa/index.blade.php. Di bagian kolom "Aksi", ganti tombol-tombol placeholder dengan link yang berfungsi. Juga tambahkan konfirmasi untuk hapus menggunakan JavaScript.
<td>
<a href="{{ route('siswa.edit', $s->id) }}" class="btn btn-warning">✏️ Edit</a>
<form action="{{ route('siswa.destroy', $s->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger" onclick="return confirm('Yakin ingin menghapus data {{ $s->nama }}?')">🗑️ Hapus</button>
</form>
</td>
Penjelasan:
route('siswa.edit', $s->id)→ link ke halaman edit dengan ID siswa.- Form dengan
@method('DELETE')→ karena browser hanya mendukung GET dan POST, kita gunakan method spoofing untuk DELETE. onclick="return confirm(...)"→ menampilkan kotak konfirmasi sebelum menghapus, agar tidak terlanjut hapus.
📌 Pastikan di bagian CSS sudah ada class
btn-warning dan btn-danger yang kita buat di artikel #8. Jika belum, tambahkan:
.btn-warning { background: #f59e0b; color: white; }
.btn-danger { background: #ef4444; color: white; }
Langkah 5: Uji Coba Edit dan Hapus
5 Sekarang kita uji semua fitur:
- Jalankan server:
php artisan serve - Buka http://localhost:8000/siswa
- Klik tombol ✏️ Edit pada salah satu data → ubah data, klik Update → akan kembali ke index dengan pesan "Data siswa berhasil diperbarui!".
- Klik tombol 🗑️ Hapus pada salah satu data → muncul konfirmasi, klik OK → data hilang dan muncul pesan "Data siswa berhasil dihapus!".
🎉 Selamat! CRUD (Create, Read, Update, Delete) sudah lengkap! Kamu sekarang bisa menambah, melihat, mengubah, dan menghapus data siswa. Hebat sekali! Selanjutnya kita akan menambahkan sistem login agar hanya pengguna terdaftar yang bisa mengakses halaman ini.
Ringkasan Langkah
- ✅ Buat view
edit.blade.phpdengan form dan @method('PUT'). - ✅ Isi method
edit()untuk menampilkan form dengan data yang dipilih. - ✅ Isi method
update()untuk validasi dan update data. - ✅ Isi method
destroy()untuk menghapus data. - ✅ Tambahkan tombol Edit (link) dan Hapus (form dengan DELETE) di halaman index.
- ✅ Tambahkan konfirmasi hapus dengan JavaScript.
- ✅ Uji coba semua fitur.
📌 Catatan: Rute untuk edit, update, dan destroy sudah otomatis disediakan oleh Route::resource(). Kita tinggal mengisi controllernya.
⬅️ Kembali ke #9: Halaman Tambah Siswa (Create)
➡️ Lanjut ke #11: Memasang Sistem Login dengan Laravel Breeze
(Link akan aktif saat artikel sebelumnya dan selanjutnya terbit)