#10: Mengubah Data yang Salah (Edit & Update) – Belajar Mengedit Kategori
Halo, Editor Handal!
Kadang kita salah mengetik nama kategori, atau ingin mengganti "Olahraga" menjadi "Sports". Di sinilah fitur Edit & Update berguna. Di tutorial ini, kita akan membuat halaman form edit yang sudah terisi data lama, lalu menyimpan perubahannya ke database. Ini adalah bagian Update dari CRUD. Siap? Ayo!
- Membuat method
edit()diCategoryControlleruntuk menampilkan form edit. - Membuat method
update()untuk menyimpan perubahan ke database. - Membuat file view
kategori-edit.blade.phpuntuk form edit. - Menambahkan rute untuk edit dan update.
- Menambahkan tombol "Edit" di halaman daftar kategori.
Langkah 1: Menambahkan Method Edit dan Update di Controller
Buka app/Http/Controllers/CategoryController.php. Kita akan tambahkan dua method baru: edit() dan update().
use App\Models\Category;
use Illuminate\Http\Request;
// ... method index, create, store sudah ada ...
// Menampilkan form edit kategori
public function edit($id)
{
// Cari kategori berdasarkan ID
$category = Category::findOrFail($id);
// Tampilkan view edit dengan data kategori
return view('kategori-edit', compact('category'));
}
// Memperbarui data kategori di database
public function update(Request $request, $id)
{
// Validasi input
$request->validate([
'name' => 'required|min:3|max:255|unique:categories,name,' . $id,
]);
// Cari kategori
$category = Category::findOrFail($id);
// Generate slug dari nama baru
$slug = strtolower(str_replace(' ', '-', $request->name));
// Update data
$category->update([
'name' => $request->name,
'slug' => $slug,
]);
// Redirect ke halaman daftar kategori dengan pesan sukses
return redirect()->route('kategori.index')->with('success', 'Kategori berhasil diperbarui!');
}Penjelasan penting:
findOrFail($id)→ mencari data berdasarkan ID. Jika tidak ditemukan, otomatis menampilkan halaman error 404.- Validasi
unique:categories,name,' . $id→ memastikan nama unik, tetapi mengecualikan kategori yang sedang diedit (agar tidak bentrok dengan dirinya sendiri). $category->update([...])→ menyimpan perubahan ke database.
Langkah 2: Menambahkan Rute untuk Edit dan Update
Buka routes/web.php. Tambahkan dua rute baru di bawah rute yang sudah ada:
use App\Http\Controllers\CategoryController;
Route::get('/kategori', [CategoryController::class, 'index'])->name('kategori.index');
Route::get('/kategori/create', [CategoryController::class, 'create'])->name('kategori.create');
Route::post('/kategori', [CategoryController::class, 'store'])->name('kategori.store');
// Rute untuk edit dan update
Route::get('/kategori/{id}/edit', [CategoryController::class, 'edit'])->name('kategori.edit');
Route::put('/kategori/{id}', [CategoryController::class, 'update'])->name('kategori.update');Penjelasan:
/kategori/{id}/edit→ menampilkan form edit untuk kategori dengan ID tertentu.Route::put→ method HTTP PUT digunakan untuk mengirim data pembaruan. Di form nanti kita akan menggunakan@method('PUT')karena HTML form hanya mendukung GET dan POST.
Langkah 3: Membuat View Form Edit Kategori
Di folder resources/views, buat file baru bernama kategori-edit.blade.php. Isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Edit Kategori</title>
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 20px; background: #f0f2f5; }
.container { max-width: 500px; margin: auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #e67e22; }
label { font-weight: bold; display: block; margin-top: 10px; }
input, button { padding: 8px; margin: 5px 0; width: 100%; box-sizing: border-box; border-radius: 5px; }
input { border: 1px solid #ddd; }
button { background: #007bff; color: white; border: none; cursor: pointer; }
button:hover { background: #0056b3; }
.error { color: red; font-size: 0.9em; }
.back { margin-top: 15px; display: inline-block; color: #e67e22; }
</style>
</head>
<body>
<div class="container">
<h1>Edit Kategori</h1>
@if ($errors->any())
<div class="error">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('kategori.update', $category->id) }}" method="POST">
@csrf
@method('PUT')
<label for="name">Nama Kategori:</label>
<input type="text" name="name" id="name" value="{{ old('name', $category->name) }}" required>
<button type="submit">Simpan Perubahan</button>
</form>
<a href="{{ route('kategori.index') }}" class="back">← Kembali ke Daftar Kategori</a>
</div>
</body>
</html>Penjelasan kode:
@method('PUT')→ memberi tahu Laravel bahwa form ini sebenarnya mengirim request PUT (meskipun method form POST).old('name', $category->name)→ menampilkan nilai lama jika ada error validasi, atau menampilkan data dari database jika pertama kali dibuka.- Action form mengarah ke
route('kategori.update', $category->id).
Langkah 4: Menambahkan Tombol Edit di Halaman Daftar Kategori
Buka resources/views/kategori.blade.php. Di kolom "Aksi", ganti placeholder dengan tombol edit (dan tombol hapus nanti). Cari bagian <td>...</td> untuk aksi, dan ubah menjadi:
<td>
<a href="{{ route('kategori.edit', $category->id) }}" style="background: #ffc107; color: #333; padding: 4px 10px; text-decoration: none; border-radius: 4px; margin-right: 5px;">Edit</a>
<!-- Tombol hapus akan ditambahkan nanti -->
</td>Pastikan tombol edit muncul di setiap baris. Jika sudah, simpan file.
Langkah 5: Uji Coba Edit dan Update
Pastikan server Laravel berjalan (php artisan serve). Buka http://localhost:8000/kategori. Sekarang setiap baris kategori memiliki tombol Edit. Klik tombol Edit pada salah satu kategori (misal "Teknologi"). Kamu akan diarahkan ke halaman form edit dengan input yang sudah terisi.
Ubah nama kategori, misal "Teknologi" menjadi "Techno". Klik Simpan Perubahan. Jika berhasil, kamu akan diarahkan kembali ke halaman daftar kategori dan melihat pesan sukses. Nama kategori pun berubah, dan slug otomatis diperbarui menjadi "techno".
Penjelasan Tambahan: Method PUT dan Pengecualian Validasi
- Mengapa pakai PUT? PUT adalah metode HTTP yang tepat untuk update data. Karena HTML form hanya mendukung GET dan POST, kita menggunakan
@method('PUT')yang akan membuat_methodhidden field, dan Laravel akan memperlakukannya sebagai PUT. - Validasi unik dengan pengecualian:
unique:categories,name,' . $idberarti "nama harus unik di tabel categories, kecuali untuk record dengan ID yang sedang diedit". Ini memungkinkan kita menyimpan nama yang sama (tidak berubah) tanpa error.
Ringkasan Hari Ini
- ✅ Kita membuat method
edit()untuk menampilkan form edit dengan data lama. - ✅ Kita membuat method
update()untuk memproses perubahan dan menyimpan ke database. - ✅ Kita membuat view
kategori-edit.blade.phpdengan form yang menggunakan@method('PUT'). - ✅ Kita menambahkan rute
getuntuk edit danputuntuk update. - ✅ Kita menambahkan tombol Edit di halaman daftar kategori.
- ✅ Sekarang fitur Update pada CRUD kategori sudah selesai!
Apa Selanjutnya?
Kita sudah punya Create, Read, Update. Satu lagi untuk melengkapi CRUD kategori: Delete (Hapus). Di tutorial berikutnya, kita akan membuat tombol hapus dengan konfirmasi, dan method destroy() di controller. Setelah kategori selesai, kita akan mulai mengerjakan fitur utama: mengelola berita (news). Terus semangat!
Seri Tutorial Laravel 13 Pemula – Proyek Web Berita
✨ Selanjutnya: #11: Menghapus yang Tidak Perlu (Delete) – Tombol Hapus dengan Peringatan