Membuat Class Component untuk Edit Data Catatan Laravel 12 Livewire

Pada materi kali ini, kita akan membuat komponen baru yang khusus bertugas untuk mengedit atau meng-update data catatan.

Jadi nanti, ketika user mengklik tombol edit di salah satu baris daftar catatan, kita akan buka modal, tampilkan form isian, dan pre-fill form tersebut dengan data dari catatan yang dipilih. Nah, komponen inilah yang akan menangani semua logikanya.

Jalankan Perintah Artisan

Pertama-tama, kita buat dulu class component-nya. Buka terminal dan jalankan:

php artisan make:livewire Catatan/Edit

Perintah ini akan membuat dua file penting:

app/Livewire/Catatan/Edit.php
resources/views/livewire/catatan/edit.blade.php

• File pertama (Edit.php) akan berisi seluruh logic dari proses edit.
• File kedua (edit.blade.php) akan berisi tampilan form-nya.

Buka dan Sesuaikan File Edit.php

Sekarang, silakan buka file app/Livewire/Catatan/Edit.php. Lalu ubah isinya menjadi seperti berikut:

<?php

namespace App\Livewire\Catatan;

use App\Models\Catatan;
use Flux\Flux;
use Illuminate\Validation\Rule;
use Livewire\Component;
use Livewire\Attributes\On;

class Edit extends Component
{
    public $catatanId;
    public $judul;
    public $isi;

    #[On('edit-catatan')]
    public function edit($id)
    {
        $catatan = Catatan::findOrFail($id);

        $this->catatanId = $catatan->id;
        $this->judul = $catatan->judul;
        $this->isi = $catatan->isi;

        Flux::modal('edit-catatan')->show();
    }

    public function update()
    {
        $this->validate([
            'judul' => [
                'required',
                'string',
                'max:255',
                Rule::unique('catatans', 'judul')->ignore($this->catatanId),
            ],
            'isi' => 'required|string',
        ]);

        Catatan::where('id', $this->catatanId)->update([
            'judul' => $this->judul,
            'isi' => $this->isi,
        ]);

        session()->flash('success', 'Catatan berhasil diperbarui.');

        Flux::modal('edit-catatan')->close();

        $this->reset(['catatanId', 'judul', 'isi']);

        $this->redirectRoute('catatans', navigate: true);
    }

    

    public function render()
    {
        return view('livewire.catatan.edit');
    }
}

Struktur Awal File

namespace App\Livewire\Catatan;

File ini berada di namespace App\Livewire\Catatan, artinya file-nya terletak di folder app/Livewire/Catatan.

Import Dependensi

use App\Models\Catatan;
use Flux\Flux;
use Illuminate\Validation\Rule;
use Livewire\Component;
use Livewire\Attributes\On;

Apa saja yang kita impor?

• Catatan: model utama kita untuk berinteraksi dengan tabel catatans.
• Flux: package modal FLUX UI.
• Rule: ini digunakan untuk validasi unik saat update.
• Component: class dasar dari semua komponen Livewire.
• On: ini atribut baru di Livewire 3 untuk mendengarkan event (pengganti $listeners di Livewire versi sebelumnya).

Properti Komponen

public $catatanId;
public $judul;
public $isi;

Tiga properti ini akan menyimpan data dari catatan yang sedang diedit:

• catatanId: ID data yang akan diubah
• judul dan isi: nilai form yang diisi user

Menangani Event: edit-catatan

#[On('edit-catatan')]
public function edit($id)
{
    $catatan = Catatan::findOrFail($id);

    $this->catatanId = $catatan->id;
    $this->judul = $catatan->judul;
    $this->isi = $catatan->isi;

    Flux::modal('edit-catatan')->show();
}

Mari kita bahas pelan-pelan:

• #[On('edit-catatan')] artinya method ini akan dijalankan ketika Livewire menerima event edit-catatan.
• Method ini menerima parameter $id, lalu mengambil data catatan dari database.
• Setelah datanya diambil, nilai-nilai properti judul dan isi langsung diisi agar muncul di form.
• Terakhir, kita buka modal edit dengan Flux::modal()->show()

Jadi, ketika user klik tombol edit, kita hanya perlu dispatch('edit-catatan', $id) dari komponen lain, maka modal akan muncul dengan data lama siap diedit.

Method update(): Menyimpan Perubahan

public function update()
{
    $this->validate([
        'judul' => [
            'required',
            'string',
            'max:255',
            Rule::unique('catatans', 'judul')->ignore($this->catatanId),
        ],
        'isi' => 'required|string',
    ]);

Bagian ini penting. Di sini kita melakukan validasi input form. Perhatikan bagian validasi judul:

• Dia wajib diisi
• Harus berupa string maksimal 255 karakter
• Harus unik di tabel catatans, kecuali untuk data yang sedang diedit (kita abaikan ID yang sedang aktif agar tidak bentrok dengan dirinya sendiri)

    Catatan::where('id', $this->catatanId)->update([
        'judul' => $this->judul,
        'isi' => $this->isi,
    ]);

Setelah validasi, kita update data di database berdasarkan ID-nya.

Feedback ke User

session()->flash('success', 'Catatan berhasil diperbarui.');

Kita kirim pesan flash ke session untuk memberi notifikasi ke user bahwa proses update berhasil.

Menutup Modal dan Reset State

    Flux::modal('edit-catatan')->close();
    $this->reset(['catatanId', 'judul', 'isi']);

Kita tutup modal menggunakan Flux dan membersihkan state agar data lama tidak tertinggal di form.

Redirect

$this->redirectRoute('catatans', navigate: true);

Terakhir, kita redirect user ke halaman daftar catatan. Parameter navigate: true memastikan redirect ini dilakukan dengan cara penuh (bukan sekadar partial update).

Method render()

public function render()
{
    return view('livewire.catatan.edit');
}

Seperti biasa, ini mengembalikan view untuk form edit.

Kesimpulan

Jadi komponen ini adalah otak dari fitur edit catatan:

• Menerima ID catatan dari event
• Mengambil data dan menampilkannya di modal
• Melakukan validasi unik
• Menyimpan perubahan
• Memberi umpan balik ke user
• Dan terakhir, membersihkan semua state agar siap untuk interaksi selanjutnya

Semua proses ini bisa dilakukan tanpa menulis JavaScript, cukup dengan Livewire dan PHP. Inilah yang membuat Livewire sangat menyenangkan untuk digunakan dalam pengembangan aplikasi Laravel modern. Pada materi berikutnya, kita akan melakukan konfigurasi view untuk class component index, create dan edit kita.