> For the complete documentation index, see [llms.txt](https://learn.devlabss.my.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.devlabss.my.id/laravel/bab-8-fitur-update-and-delete/8.2-membuat-fitur-edit-and-update-data.md).

# 8.2 Membuat Fitur Edit & Update Data

## Membuat fitur edit & update data

Setelah bisa menambah data, sekarang saatnya belajar mengubah data yang sudah ada.

Di proyek E-Library, ini berguna saat ada judul yang salah, penulis yang typo, atau tahun terbit yang perlu diperbaiki.

Fitur ini biasanya terdiri dari dua bagian:

* menampilkan form edit
* menyimpan hasil perubahan

### Teori awal dan analogi

Bayangkan petugas perpustakaan menemukan kesalahan pada data buku.

Bukunya tidak diganti dengan buku baru.

Petugas cukup membuka kartu data lama, lalu memperbaiki bagian yang salah.

Itulah konsep **edit** dan **update**.

Data lama dipanggil dulu.

Lalu nilainya diperbarui.

### Target praktik subbab ini

Setelah menyelesaikan subbab ini, Anda seharusnya bisa:

* menambahkan tombol edit di daftar buku
* membuat method `edit()` dan `update()`
* menampilkan data lama ke form
* memperbarui data dengan validasi
* menampilkan pesan sukses setelah update

### Langkah praktik step-by-step

Ikuti langkah berikut dengan urut.

{% stepper %}
{% step %}

### Tambahkan tombol edit di halaman daftar buku

Buka file:

`resources/views/buku/index.blade.php`

Tambahkan kolom aksi dan tombol edit seperti ini:

```blade
<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>No</th>
            <th>Judul</th>
            <th>Penulis</th>
            <th>Penerbit</th>
            <th>Tahun Terbit</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($bukus as $buku)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $buku->judul }}</td>
                <td>{{ $buku->penulis }}</td>
                <td>{{ $buku->penerbit }}</td>
                <td>{{ $buku->tahun_terbit }}</td>
                <td>
                    <a href="{{ route('buku.edit', $buku->id) }}">Edit</a>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6">Data buku belum tersedia.</td>
            </tr>
        @endforelse
    </tbody>
</table>
```

Sekarang setiap baris buku punya tautan edit masing-masing.
{% endstep %}

{% step %}

### Tambahkan method `edit()` dan `update()` di controller

Buka file:

`app/Http/Controllers/BukuController.php`

Lalu tambahkan atau lengkapi method berikut:

```php
public function edit($id)
{
    $buku = Buku::findOrFail($id);

    return view('buku.edit', compact('buku'));
}

public function update(Request $request, $id)
{
    $validated = $request->validate([
        'judul' => 'required|string|max:255',
        'penulis' => 'required|string|max:255',
        'penerbit' => 'required|string|max:255',
        'tahun_terbit' => 'required|digits:4',
    ]);

    $buku = Buku::findOrFail($id);
    $buku->update($validated);

    return redirect()->route('buku.index')
        ->with('success', 'Data buku berhasil diperbarui.');
}
```

Method `edit()` menampilkan data lama.

Method `update()` menyimpan perubahan yang baru.
{% endstep %}

{% step %}

### Buat halaman form edit

Buka atau buat file:

`resources/views/buku/edit.blade.php`

Lalu isi dengan kode berikut:

```blade
<h1>Edit Buku</h1>

<form action="{{ route('buku.update', $buku->id) }}" method="POST">
    @csrf
    @method('PUT')

    <div>
        <label>Judul Buku</label>
        <input type="text" name="judul" value="{{ old('judul', $buku->judul) }}">
        @error('judul')
            <small>{{ $message }}</small>
        @enderror
    </div>

    <div>
        <label>Penulis</label>
        <input type="text" name="penulis" value="{{ old('penulis', $buku->penulis) }}">
        @error('penulis')
            <small>{{ $message }}</small>
        @enderror
    </div>

    <div>
        <label>Penerbit</label>
        <input type="text" name="penerbit" value="{{ old('penerbit', $buku->penerbit) }}">
        @error('penerbit')
            <small>{{ $message }}</small>
        @enderror
    </div>

    <div>
        <label>Tahun Terbit</label>
        <input type="number" name="tahun_terbit" value="{{ old('tahun_terbit', $buku->tahun_terbit) }}">
        @error('tahun_terbit')
            <small>{{ $message }}</small>
        @enderror
    </div>

    <button type="submit">Update</button>
</form>
```

Perhatikan bagian `old('judul', $buku->judul)`.

Kalau validasi gagal, input lama tetap muncul.

Kalau belum ada error, form akan menampilkan data lama dari database.
{% endstep %}

{% step %}

### Uji fitur edit di browser

Sebelum mengetes, pastikan server Laravel hidup.

Silakan pilih salah satu:

* buka **Laragon** lalu klik **Start All**
* atau jalankan `php artisan serve`

Setelah itu, buka:

```
http://127.0.0.1:8000/buku
```

Klik tombol **Edit** pada salah satu data.

Kalau berhasil, Anda akan masuk ke halaman edit dengan form yang sudah terisi data lama.
{% endstep %}

{% step %}

### Uji proses update

Ubah salah satu field.

Misalnya judul atau penerbit.

Lalu klik tombol **Update**.

Kalau berhasil:

* Anda akan kembali ke halaman daftar buku
* pesan sukses akan muncul
* data pada tabel berubah sesuai isi terbaru
  {% endstep %}
  {% endstepper %}

### Penjelasan pasca-praktik

Sekarang mari kita bedah bagian yang paling penting.

#### 1. `route('buku.edit', $buku->id)`

Bagian ini mengirim pengguna ke halaman edit untuk satu buku tertentu.

ID pada buku itulah yang menjadi penanda datanya.

#### 2. `Buku::findOrFail($id)`

Baris ini mencari satu data buku berdasarkan ID.

Kalau datanya tidak ditemukan, Laravel akan menampilkan error 404.

Itu jauh lebih aman daripada memproses data yang tidak ada.

#### 3. `@method('PUT')`

HTML form hanya mengenal `GET` dan `POST`.

Karena itu, Laravel memakai bantuan `@method('PUT')` untuk menandai bahwa request ini adalah update.

Bagian ini akan dibahas lebih dalam di subbab 8.4.

#### 4. `$buku->update($validated)`

Baris ini memperbarui data lama dengan nilai baru yang sudah lolos validasi.

Jadi, data tidak ditambah sebagai baris baru.

Yang diubah adalah record yang sama.

#### 5. `old('judul', $buku->judul)`

Bagian ini punya dua tugas:

* menampilkan input lama jika validasi gagal
* menampilkan data dari database jika form baru dibuka

Inilah kenapa form edit terasa lebih nyaman dipakai.

### Alur data teknis

Saat tombol **Edit** ditekan, alurnya seperti ini:

1. browser membuka route edit sambil membawa ID buku
2. method `edit()` mencari data berdasarkan ID
3. controller mengirim data buku ke view edit
4. form edit menampilkan nilai lama
5. pengguna mengubah data lalu klik **Update**
6. method `update()` menerima request
7. Laravel menjalankan validasi
8. jika lolos, data lama diperbarui
9. browser kembali ke halaman daftar buku

### Output yang harus terlihat

Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat:

* tabel daftar buku menampilkan tautan **Edit** di setiap baris
* halaman edit menampilkan data lama di dalam form
* setelah update berhasil, data di tabel berubah sesuai input baru
* pesan sukses muncul setelah kembali ke halaman daftar buku

### Troubleshooting yang paling sering

Masalah yang paling sering muncul:

* **`404 Not Found` saat edit** — ID tidak ditemukan atau route bermasalah
* **form edit kosong** — data `$buku` tidak terkirim ke view
* **data tidak berubah** — method `update()` belum benar atau request gagal validasi
* **error method tidak dikenali** — `@method('PUT')` belum ditulis

{% hint style="warning" %}
Kalau form edit tidak memakai `@method('PUT')`, route update dari resource controller bisa gagal dikenali dengan benar.
{% endhint %}

{% hint style="info" %}
Jangan panik kalau validasi gagal saat update. Mekanismenya sama seperti saat create di BAB 7.
{% endhint %}

### Poin evaluasi bab 8.2

Pastikan Anda sudah memahami poin berikut:

* Saya bisa menambahkan tombol edit di tabel.
* Saya paham ID dipakai untuk memilih data yang akan diedit.
* Saya bisa membuat method `edit()` dan `update()`.
* Saya bisa menampilkan data lama ke form edit.
* Saya bisa memperbarui data dengan validasi.

Jika semuanya sudah jelas, lanjut ke [8.3 Membuat Fitur Hapus Data Buku](/laravel/bab-8-fitur-update-and-delete/8.3-membuat-fitur-hapus-data-buku.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.devlabss.my.id/laravel/bab-8-fitur-update-and-delete/8.2-membuat-fitur-edit-and-update-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.