Halo teman-teman semuanya! Kembali lagi di seri lanjutan "Tutorial Laravel 11 untuk Pemula".
Kalau kamu sudah mengikuti tutorial sebelumnya, di Part 7 kita telah berhasil menampilkan detail data berdasarkan ID. Nah, kali ini di Part 8, kita akan melangkah lagi—yaitu belajar bagaimana mengedit dan memperbarui data yang sudah ada di database.
Fitur edit dan update ini sangat penting dalam aplikasi CRUD (Create, Read, Update, Delete). Hampir semua aplikasi web modern memungkinkan pengguna untuk memperbarui data yang sebelumnya sudah disimpan, seperti memperbarui nama produk, mengganti gambar, atau menyesuaikan harga.
Apa yang Akan Kita Lakukan?
Di part ini, kita akan:
Membuat route baru untuk menampilkan form edit.
Menambahkan method edit dan update di controller.
Membuat view form edit dengan Blade.
Menangani proses validasi dan update data ke database.
1. Tambahkan Route untuk Edit dan Update
Buka file routes/web.php lalu tambahkan 2 route baru:
Route::get('/products/{id}/edit', [ProductController::class, 'edit'])->name('products.edit'); Route::put('/products/{id}', [ProductController::class, 'update'])->name('products.update');Penjelasan:
products.edit: untuk menampilkan form edit data.products.update: untuk memproses data yang dikirim dari form edit.
2. Tambahkan Method edit dan update di Controller
Buka ProductController.php lalu tambahkan method berikut:
public function edit($id) { $product = Product::findOrFail($id); return view('products.edit', compact('product')); } public function update(Request $request, $id) { $product = Product::findOrFail($id); $validated = $request->validate([ 'name' => 'required|string|max:255', 'description' => 'nullable|string', 'price' => 'required|numeric', 'image' => 'nullable|image|mimes:jpeg,png,jpg|max:2048', ]); if ($request->hasFile('image')) { $imagePath = $request->file('image')->store('products', 'public'); $validated['image'] = $imagePath; } $product->update($validated); return redirect()->route('products.index')->with('success', 'Produk berhasil diperbarui.'); }Penjelasan:
edit(): mengambil data berdasarkan ID lalu menampilkan ke view.update(): memvalidasi data dan mengupdate ke database. Jika gambar baru diunggah, maka akan disimpan dan diganti.
3. Buat File View Form Edit
Buat file baru resources/views/products/edit.blade.php:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit Produk - {{ $product->name }}</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="background-color: #f3f4f6;"> <div class="container mt-5 p-4 bg-white rounded shadow"> <h1 class="mb-4">Edit Produk</h1> @if ($errors->any()) <div class="alert alert-danger"> <ul class="mb-0"> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data"> @csrf @method('PUT') <div class="mb-3"> <label for="name" class="form-label">Nama Produk</label> <input type="text" class="form-control" name="name" id="name" value="{{ old('name', $product->name) }}" required> </div> <div class="mb-3"> <label for="description" class="form-label">Deskripsi</label> <textarea class="form-control" name="description" id="description">{{ old('description', $product->description) }}</textarea> </div> <div class="mb-3"> <label for="price" class="form-label">Harga</label> <input type="number" class="form-control" name="price" id="price" value="{{ old('price', $product->price) }}" required> </div> <div class="mb-3"> <label for="image" class="form-label">Gambar Produk</label><br> @if ($product->image) <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" width="150" class="mb-2 rounded"> @endif <input type="file" class="form-control" name="image" id="image"> </div> <button type="submit" class="btn btn-primary">Update Produk</button> <a href="{{ route('products.index') }}" class="btn btn-secondary">Kembali</a> </form> </div> </body> </html>4. Tambahkan Tombol Edit di Halaman Index
Sekarang buka kembali resources/views/products/index.blade.php dan tambahkan tombol Edit di kolom action:
<td> <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-info">Show</a> <a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-warning">Edit</a> </td>Sekarang coba jalankan server Laravel nya, lalu buka halaman daftar produk. Nanti akan tampil tombol edit pada kolom action seperti gambar di bawah ini:
Sekarang, coba klik tombol Edit pada salah satu produk (kalau kamu udah buat lebih dari 1 produk), maka kita akan diarahkan ke halaman form edit. Setelah melakukan perubahan dan klik tombol Update, data akan langsung diperbarui di database.
Kesimpulan
Di part kedelapan ini, kita telah berhasil membuat fitur edit dan update data di Laravel 11. Ini adalah salah satu fitur penting dalam siklus CRUD sebuah aplikasi.
Kita sudah mempelajari bagaimana membuat route edit & update, membuat tampilan form, dan memproses datanya di controller. Tentu saja, validasi dan handling file upload juga tak ketinggalan kita buat.