🎯 Tujuan

Mampu menampilkan form edit data produk dan memperbarui data di database menggunakan Laravel secara benar.

🧩 Materi & Langkah Praktik

Pada bagian ini akan dijelaskan langkah lengkap untuk membuat fitur Edit Produk, mulai dari menambahkan route, membuat method edit & update pada controller, hingga membuat form edit.

1. Tambahkan Route untuk Edit dan Update

Tambahkan 2 route baru di file routes/web.php:

use App\Http\Controllers\ProductController;

Route::get('/products/{id}/edit', [ProductController::class, 'edit'])->name('products.edit');
Route::put('/products/{id}', [ProductController::class, 'update'])->name('products.update');

Penjelasan:

• GET /products/{id}/edit → digunakan untuk menampilkan form edit berdasarkan ID produk.
• PUT /products/{id} → digunakan untuk mengirim dan menyimpan perubahan data ke database.
• name('products.edit') dan name('products.update') memudahkan pemanggilan route menggunakan helper route(...).

Dengan adanya 2 route ini, aplikasi sekarang memiliki jalur resmi untuk proses edit dan update data produk.

2. Tambahkan Method edit dan update di ProductController

Catatan: Method index, create, dan store yang sudah ada sebelumnya tidak boleh dihapus.

Tambahkan method berikut ke dalam file app/Http/Controllers/ProductController.php:

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function edit($id)
    {
        $product = Product::findOrFail($id);
        return view('products.edit', compact('product'));
    }

    public function update(Request $request, $id)
    {
        $product = Product::findOrFail($id);

        $product->update([
            'name' => $request->name,
            'price' => $request->price,
            'stock' => $request->stock,
            'description' => $request->description,
        ]);

        return redirect()->route('products.index')->with('success', 'Produk berhasil diperbarui!');
    }
}

Penjelasan:

• findOrFail($id) akan mencari produk berdasarkan ID. Jika ID tidak ditemukan, Laravel otomatis menampilkan halaman 404.
• Method edit() berfungsi mengambil data lama → lalu mengirimkannya ke view.
• Method update() menerima data dari form, kemudian melakukan update ke database menggunakan $product->update().
• Setelah update, pengguna diarahkan kembali ke /products dengan pesan sukses.

Dengan cara ini, alur edit produk menjadi jelas dan aman.

3. Buat File View resources/views/products/edit.blade.php

@extends('layouts.main')

@section('title', 'Edit Produk')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>Edit Produk</h2>
    <a href="{{ route('products.index') }}" class="btn btn-secondary btn-sm">← Kembali</a>
</div>

<form action="{{ route('products.update', $product->id) }}" method="POST" class="card p-4 shadow-sm">
    @csrf
    @method('PUT')
    <div class="mb-3">
        <label>Nama Produk</label>
        <input type="text" name="name" value="{{ $product->name }}" class="form-control" required>
    </div>

    <div class="mb-3">
        <label>Harga</label>
        <input type="number" name="price" value="{{ $product->price }}" class="form-control" required>
    </div>

    <div class="mb-3">
        <label>Stok</label>
        <input type="number" name="stock" value="{{ $product->stock }}" class="form-control" required>
    </div>

    <div class="mb-3">
        <label>Deskripsi</label>
        <textarea name="description" rows="3" class="form-control">{{ $product->description }}</textarea>
    </div>

    <button type="submit" class="btn btn-success">Update</button>
</form>
@endsection

Penjelasan:

• Form menggunakan metode POST, namun disertai @method('PUT') agar Laravel mengenalinya sebagai request PUT.
• Field input otomatis terisi nilai lama (value="{{ $product->name }}") agar memudahkan proses pengeditan.
• Menggunakan komponen Bootstrap supaya tampilan rapi dan mudah dipahami.

4. Tambahkan Tombol Edit di Halaman Daftar Produk

Edit file resources/views/products/index.blade.php:

Tambahkan kolom Aksi di bagian <thead>:

<th>Aksi</th>

Tambahkan tombol edit di bagian <tbody>:

<td>
    <a href="{{ route('products.edit', $product->id) }}" class="btn btn-warning btn-sm">Edit</a>
</td>

Penjelasan:

• Tombol ini menjadi pintu masuk untuk mengedit produk.
• Penggunaan route('products.edit', $product->id) memastikan URL selalu benar walaupun struktur routing berubah.
• Class btn-warning memberi kesan "aksi perubahan" yang mudah dikenali pengguna.

5. Jalankan Aplikasi

1. Buka halaman daftar produk: http://127.0.0.1:8000/products
2. Klik tombol Edit pada salah satu produk.
3. Ubah data sesuai kebutuhan.
4. Klik tombol Update.
5. Anda akan diarahkan kembali dan melihat pesan "Produk berhasil diperbarui!".

Penjelasan:

• Semua perubahan disimpan ke database secara otomatis melalui method update().
• Pesan sukses akan muncul di halaman index jika template Anda sudah menampilkan session alert.

✅ Struktur Folder Penting

project-laravel/
├── 📁 app/
│   └── 📁 Http/
│       └── 📁 Controllers/
│           └──  ProductController.php         <-- Controller produk (edit & update)
├── 📁 resources/
│   └── 📁 views/
│       └── 📁 products/
│           ├── index.blade.php               <-- Tampilan daftar produk
│           ├── create.blade.php              <-- Form tambah produk
│           └── edit.blade.php                <-- Form edit produk
├── 📁 routes/
│   └── web.php                              <-- Definisi routing aplikasi