Konfigurasi Index Class Component Laravel 12 Livewire

Silakan teman-teman buka file Index.php yang terletak didalam folder:

app/Livewire/Catatan

Silakan ubah menjadi seperti berikut ini:

<?php

namespace App\Livewire\Catatan;

use Livewire\Component;
use App\Models\Catatan ;
use Flux\Flux;
use Livewire\WithPagination;

class Index extends Component
{
    use WithPagination;
    public $catatanId;

    public function edit($id)
    {
        $this->dispatch('edit-catatan', $id);
    }

    public function render()
    {
        $catatans = Catatan::orderBy('created_at', 'desc')->paginate(5);

        return view('livewire.catatan.index', [
            'catatans' => $catatans,
        ]);
    }
    public function delete($id)
    {
        $this->catatanId = $id;
        Flux::modal('delete-catatan')->show();
    }
    public function deleteCatatan()
    {
        Catatan::findOrFail($this->catatanId)->delete();
        Flux::modal('delete-catatan')->close();
        session()->flash('success', 'Catatan berhasil dihapus.');
    }
}

1. Struktur Umum File

namespace App\Livewire\Catatan;

Kita mulai dari deklarasi namespace. Ini menunjukkan bahwa file ini berada di folder App/Livewire/Catatan. Dengan struktur seperti ini, kita sudah menerapkan best practice Laravel agar kode kita lebih rapi dan terorganisir berdasarkan fitur.

2. Import Dependensi

use Livewire\Component;
use App\Models\Catatan;
use Flux\Flux;
use Livewire\WithPagination;

Nah, di sini kita impor beberapa hal penting:

• Livewire\Component: ini adalah base class semua komponen Livewire. Semua class kita harus extend ini supaya fungsionalitas Livewire bisa berjalan.
• App\Models\Catatan: ini model kita, digunakan untuk mengambil data catatan dari database.
• Flux\Flux: ini kayaknya package UI tambahan (mungkin milikmu sendiri), digunakan untuk handle modal misalnya.
• WithPagination: trait dari Livewire untuk mempermudah pagination.

3. Pendefinisian Class Component

class Index extends Component

Class ini bernama Index, dan mewarisi (extends) dari Component. Nah ini yang disebut Livewire Class Component. Di dalamnya, kita akan menuliskan logic yang biasanya ada di controller, langsung di sini. Jadi, route → Livewire Component → Blade.

4. Trait WithPagination

use WithPagination;

Dengan trait ini, kita bisa langsung pakai method paginate() tanpa konfigurasi tambahan. Cocok kalau kita mau ambil data sedikit demi sedikit (per halaman), seperti 5 catatan per halaman.

5. Properti Publik

public $catatanId;

Properti ini menyimpan ID dari catatan yang akan dihapus. Karena bersifat public, Livewire akan otomatis track dan sync nilai ini dengan frontend jika dibutuhkan.

6. Method edit

public function edit($id)
{
    $this->dispatch('edit-catatan', $id);
}

Method ini akan mengirim event Livewire bernama edit-catatan dengan parameter ID. Event ini bisa ditangkap oleh komponen lain (misalnya modal form edit), untuk mengisi data yang mau diedit.

7. Method render

public function render()
{
    $catatans = Catatan::orderBy('created_at', 'desc')->paginate(5);

    return view('livewire.catatan.index', [
        'catatans' => $catatans,
    ]);
}

Nah, ini bagian paling penting di komponen Livewire. Fungsi render() dipanggil setiap kali komponen ini akan ditampilkan (atau dirender ulang setelah interaksi).

• Kita ambil data Catatan terbaru, urut dari yang terbaru ke lama.
• Kita paginate 5 data per halaman.
• Lalu kita lempar ke Blade livewire.catatan.index.

8. Method delete

public function delete($id)
{
    $this->catatanId = $id;
    Flux::modal('delete-catatan')->show();
}

Method ini dipanggil ketika user ingin menghapus catatan. Kita simpan ID-nya dulu, lalu panggil modal konfirmasi dengan Flux::modal()->show(). Jadi proses hapusnya dua tahap: konfirmasi dulu, baru eksekusi.

9. Method deleteCatatan

public function deleteCatatan()
{
    Catatan::findOrFail($this->catatanId)->delete();
    Flux::modal('delete-catatan')->close();
    session()->flash('success', 'Catatan berhasil dihapus.');
}

Kalau user udah konfirmasi, method ini akan dijalankan:

• Ambil data catatan berdasarkan ID, lalu hapus.
• Tutup modal.
• Tampilkan pesan sukses.

Kesimpulan

Jadi intinya, file ini adalah Livewire Class Component, yaitu gabungan antara logic dan presentasi dalam satu class. Ini membuat kita bisa membangun UI dinamis tanpa perlu banyak JavaScript, cukup dengan PHP saja.

Komponen ini bisa:

• Menampilkan daftar catatan (dengan pagination)
• Mengedit dan menghapus catatan (dengan konfirmasi modal)
• Mengirim event ke komponen lain (untuk misalnya, form edit)

Pada materi berikutnya, kita akan membuat class component untuk create dan edit data catatan.