Membuat Class Component untuk Create Data Laravel 12 Livewire

Pada materi kali ini, kita akan membuat komponen baru yang tugas utamanya adalah menangani proses pembuatan (create) data catatan. Jadi nanti, saat user mengisi form dan menekan tombol simpan, semua logika penyimpanan akan dikerjakan oleh komponen ini.

1. Jalankan Perintah Artisan

Silakan teman-teman buka terminal proyek Laravel kalian, lalu jalankan perintah berikut:

php artisan make:livewire Catatan/Create

Perintah ini akan secara otomatis membuat dua file utama:

app/Livewire/Catatan/Create.php
resources/views/livewire/catatan/create.blade.php

• Yang pertama (Create.php) adalah file class-nya, tempat kita menuliskan logic seperti validasi dan simpan data.
• Yang kedua adalah file Blade-nya, tempat kita menampilkan form input.

2. Buka dan Sesuaikan File Create.php

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

<?php

namespace App\Livewire\Catatan;

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

class Create extends Component
{
    public $judul;
    public $isi;

    protected $rules = [
        'judul' => 'required|string|max:255',
        'isi' => 'required|string',
    ];
    public function save()
    {
        $this->validate();
        Catatan::create([
            'judul' => $this->judul,
            'isi' => $this->isi,
        ]);
        $this->reset(['judul', 'isi']);
        $this->dispatch('catatanCreated');
        Flux::modal('create-catatan')->close();
        session()->flash('success', 'Catatan berhasil ditambahkan.');

        $this->redirectRoute('catatans', navigate: true);
    }
    public function render()
    {
        return view('livewire.catatan.create');
    }
}

1. Deklarasi Namespace dan Import

namespace App\Livewire\Catatan;

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

Kita mulai dari atas. Di sini kita deklarasikan bahwa class ini berada di folder App\Livewire\Catatan. Ini bagian dari struktur Laravel yang rapi — kita pisahkan komponen berdasarkan fitur, dalam hal ini fitur "Catatan".

Kemudian, kita import tiga hal:

• Catatan: ini model untuk berinteraksi dengan tabel catatan di database.
• Flux\Flux: ini adalah helper UI dari FLUX UI, khususnya untuk menangani modal (pop-up).
• Livewire\Component: ini adalah base class yang wajib dipakai oleh semua komponen Livewire.

2. Class Create dan Properti Publik

class Create extends Component
{
    public $judul;
    public $isi;

Nah, di sinilah kita mulai masuk ke isi class-nya. Kita punya dua properti publik: $judul dan $isi.

Karena ini Livewire, properti publik seperti ini akan secara otomatis terhubung ke form input yang kita buat di Blade nanti (data binding). Jadi, kalau user ketik sesuatu di field judul, isi dari $judul ini akan langsung ter-update di belakang layar.

3. Validasi Otomatis: protected $rules

    protected $rules = [
        'judul' => 'required|string|max:255',
        'isi' => 'required|string',
    ];

Bagian ini untuk validasi input. Artinya:

• judul wajib diisi, harus berupa string, dan maksimal 255 karakter.
• isi juga wajib diisi, dan harus berupa string.

Ketika nanti method save() dipanggil, validasi ini akan otomatis dijalankan.

4. Method save() – Simpan Data ke Database

public function save()
{
    $this->validate();

Pertama, kita panggil $this->validate() — ini akan mengecek input berdasarkan aturan yang sudah kita tulis tadi.

Kalau valid, lanjut ke penyimpanan:

    Catatan::create([
        'judul' => $this->judul,
        'isi' => $this->isi,
    ]);

Kita simpan ke database lewat model Catatan, dengan data dari properti publik $judul dan $isi.

5. Reset Form dan Kirim Event

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

Setelah berhasil simpan, kita kosongkan kembali inputnya dengan reset(), supaya form jadi bersih lagi.

Lalu kita kirim event catatanCreated — ini bisa digunakan untuk memberitahu komponen lain, misalnya daftar catatan (Index), agar me-refresh datanya.

6. Tutup Modal dan Tampilkan Notifikasi

    Flux::modal('create-catatan')->close();
    session()->flash('success', 'Catatan berhasil ditambahkan.');

• Flux::modal()->close() ini akan menutup modal input yang sebelumnya dibuka.
• session()->flash() akan menyimpan pesan sukses yang nanti bisa kita tampilkan ke user, misalnya pakai alert di layout utama.

7. Redirect ke Halaman Index Catatan

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

Ini artinya setelah semua proses selesai, user akan diarahkan kembali ke halaman daftar catatan (route('catatans')). Parameter navigate: true membuat redirect-nya dilakukan secara "full" — tidak hanya update komponen tapi benar-benar pindah halaman.

8. Method render()

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

Akhirnya, kita tampilkan tampilan form-nya lewat Blade livewire.catatan.create. Di sinilah nanti kita akan menempatkan form inputnya.

Kesimpulan

Jadi, komponen Create ini bertugas penuh untuk:

• Menangani input dari form
• Memvalidasi data
• Menyimpan ke database
• Menutup modal setelah sukses
• Memberi notifikasi dan redirect user

Semuanya dikerjakan hanya dengan PHP, tanpa perlu menulis JavaScript sama sekali. Inilah kekuatan utama Livewire — kita bisa bikin UI yang interaktif dan dinamis langsung dari Laravel.