Cara Membuat Komponen di Laravel 12 dengan Livewire

Sebelum kita mulai membuat komponen Livewire secara langsung, ada baiknya kita pahami dulu apa sih bedanya antara pendekatan Laravel biasa (yang konvensional) dengan Livewire? Karena pemahaman ini akan sangat membantu teman-teman dalam menyesuaikan pola pikir saat membangun aplikasi.

Perbedaan Laravel Tradisional vs. Livewire

Di Laravel Livewire, teman-teman tidak perlu lagi membuat file Controller secara eksplisit hanya untuk menangani form atau logic sederhana.

Sebagai gantinya, komponen Livewire sudah mencakup keduanya:

• File Class untuk menampung logika (mirip controller),
• dan file Blade untuk tampilannya (mirip view).

Jadi, komponen Livewire itu ibarat Controller + View dalam satu paket, tapi dengan kemampuan reaktif — bisa berinteraksi langsung dengan pengguna tanpa perlu reload halaman.

Contohnya, nanti teman-teman akan punya struktur seperti ini ketika membuat komponen bernama Komponenku:

app/
└── Livewire/
    └── Komponenku.php      ← class logic (mirip controller)

resources/
└── views/
    └── livewire/
        └── komponenku.blade.php ← file tampilan (view)

Dengan pendekatan ini, proses pengembangan aplikasi jadi lebih cepat, lebih ringan, dan lebih menyenangkan, karena teman-teman nggak perlu berpindah-pindah file untuk urusan logic dan tampilan. Semuanya sudah menyatu dalam satu komponen.

Buat Komponen

Silakan jalankan perintah berikut di terminal:

php artisan make:livewire Catatan/Index

Perintah di atas akan menghasilkan dua file baru, yaitu:

Edit COMPONENT CREATED

CLASS: app/Livewire/Catatan/Index.php  
VIEW:  resources/views/livewire/catatan/index.blade.php

File Kelas Komponen (Class)

app/Livewire/Catatan/Index.php

File ini adalah file PHP yang berisi logika komponen Livewire. Bisa kita anggap sebagai "controller-nya", namun khusus untuk Livewire. Di dalamnya kita bisa menuliskan:

• Variabel yang akan digunakan di tampilan (view)
• Method atau fungsi yang merespons aksi dari pengguna
• Validasi form
• Query ke database, dan lain-lain

Jadi, semua logika yang biasanya kita tulis di Controller, sekarang kita tulis langsung di kelas ini.

File Tampilan (View)

resources/views/livewire/catatan/index.blade.php

File ini adalah file Blade (HTML yang bisa disisipi PHP), yang menjadi tampilan dari komponen kita. Di sinilah kita mendesain antarmuka pengguna: tabel, form input, tombol, dan lainnya. File ini akan otomatis terkoneksi dengan file Index.php tadi.

Keduanya saling melengkapi:

• Index.php mengatur data dan logika
• index.blade.php menampilkan data dan menerima interaksi dari pengguna

Jadi, cukup dengan satu perintah tadi, kita sudah mendapatkan satu pasang file komponen Livewire yang siap digunakan untuk membuat fitur dinamis tanpa perlu banyak JavaScript. Sangat membantu dalam pengembangan aplikasi berbasis Laravel yang reaktif dan modern.

Pada materi berikutnya, kita akan melakukan konfigurasi pada kedua file diatas.