Komponen merupakan inti dari Laravel Livewire, karena melalui komponen inilah kita membangun antarmuka interaktif tanpa harus menulis JavaScript secara langsung. Jika kamu sedang belajar Livewire, memahami konsep komponen adalah langkah pertama yang wajib dikuasai.
Artikel ini akan membahas secara lengkap tentang cara membuat komponen, mengatur properti, memanggil aksi, hingga merender komponen Livewire dengan contoh dan penjelasan yang mudah dipahami.
Apa itu Komponen Livewire?
Komponen di Livewire bisa dianggap sebagai potongan kecil dari aplikasi yang dapat berdiri sendiri. Setiap komponen terdiri dari dua bagian utama:
- Class PHP yang berisi logika backend.
- Blade View yang berisi tampilan frontend.
Saat komponen dirender di browser, Livewire akan menghubungkan antara tampilan dan logika dengan AJAX secara otomatis. Jadi, setiap kali pengguna berinteraksi, Livewire mengirimkan data ke server dan memperbarui tampilan tanpa memuat ulang halaman.
Cara kerja komponen
Ketika sebuah komponen Livewire dirender:
- Class komponen dipanggil di server.
- Data dari properti di class dikirim ke view.
- Livewire menyimpan “state” komponen di browser dan terus menyinkronkan perubahan antar keduanya.
Keunggulan Komponen Livewire
- Tidak perlu menulis JavaScript manual.
- Mudah diintegrasikan ke dalam proyek Laravel yang sudah ada.
- Reactive dan cepat, karena hanya bagian kecil yang diperbarui.
- Memanfaatkan Blade template yang sudah familiar bagi developer Laravel.
Cara Membuat Komponen Livewire
Membuat komponen Livewire sangat mudah. Kamu cukup menjalankan perintah artisan berikut:
php artisan make:livewire Counter
Perintah ini akan membuat dua file:
- app/Livewire/Counter.php → berisi logika komponen
- resources/views/livewire/counter.blade.php → berisi tampilan komponen
Dengan begitu, setiap komponen punya tempat terpisah untuk mengelola data dan tampilannya.
Jenis-jenis Komponen Livewire
Secara umum, Livewire mengenal dua tipe komponen:
- Inline Component – Komponen yang dibuat langsung dalam satu file Blade menggunakan sintaks @livewire.
- Class-based Component – Komponen yang menggunakan file class dan file Blade terpisah (ini adalah pendekatan yang paling umum).
Contoh Kode Membuat Livewire Komponen
Berikut contoh sederhana dari komponen Counter:
File: app/Livewire/Counter.php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
File: resources/views/livewire/counter.blade.php
<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">Tambah</button>
</div>
Penjelasan:
- $count adalah properti publik yang otomatis bisa diakses dari view.
- wire:click=”increment” akan memanggil method increment() di class saat tombol diklik.
- Livewire akan memperbarui nilai $count di tampilan tanpa reload halaman.
Cara Setting Properti di Komponen Livewire
Properti di Livewire adalah cara untuk menyimpan dan mengirim data antara backend (PHP) dan frontend (Blade). Setiap properti public otomatis dapat diakses dari view.
Misalnya:
public $name = 'jhon doe';
Kamu bisa langsung memanggilnya di file Blade dengan:
<h2>Halo, {{ $name }}</h2>Cara Akses Properti di View
Semua properti publik dari komponen dapat langsung digunakan dalam tampilan dengan sintaks Blade biasa ({{$nama_properti }}) / mustache.
Cara Sharing Data Properti ke View
Jika kamu ingin menambahkan data tambahan dari method render(), kamu bisa melakukannya seperti ini:
public function render()
{
return view('livewire.counter', [
'title' => 'Komponen Counter'
]);
}
Lalu gunakan di Blade:
<h3>{{ $title }}</h3>Menambahkan wire:key untuk Perulangan
Saat kamu menampilkan daftar data dengan perulangan, gunakan wire:key agar Livewire bisa melacak setiap elemen dengan benar.
<ul>
@foreach ($tasks as $task)
<li wire:key="task-{{ $task->id }}">{{ $task->name }}</li>
@endforeach
</ul>
wire:key membantu Livewire menjaga sinkronisasi DOM ketika data berubah.
Binding Input ke Properti (wire:model)
Binding dua arah (two-way data binding) di Livewire sangat mudah. Gunakan wire:model pada input field agar nilainya selalu terhubung dengan properti di class.
<input type="text" wire:model="name">
<h3>Halo, {{ $name }}</h3>
Setiap kali pengguna mengetik di input, nilai $name akan otomatis diperbarui di class, dan sebaliknya.
Cara Memanggil Aksi di Komponen Livewire
Aksi di Livewire adalah method dalam class yang dipanggil dari view menggunakan atribut seperti:
- wire:click
- wire:submit
- wire:change
- wire:keydown.enter, dan lain-lain.
Contoh:
<button wire:click="increment">Tambah</button>
Saat tombol diklik, Livewire akan memanggil method increment() di class PHP tanpa memuat ulang halaman.
Kamu juga bisa mengirim parameter:
<button wire:click="delete({{ $id }})">Hapus</button>
Dan method-nya bisa seperti ini:
public function delete($id)
{
Task::find($id)->delete();
}
Dengan cara ini, kamu dapat menjalankan aksi kompleks seperti menyimpan data, validasi, atau bahkan interaksi dengan database secara reaktif.
Kesimpulan
Komponen Livewire adalah pondasi utama untuk membangun aplikasi web modern tanpa JavaScript manual.
Kamu telah mempelajari:
- Konsep dasar komponen Livewire
- Cara membuat dan mengatur properti
- Cara memanggil aksi dan menghubungkannya dengan tampilan
Dengan memahami konsep ini, kamu bisa mulai membangun komponen interaktif di Laravel secara cepat dan efisien.
Eksplorasi lebih lanjut dokumentasi resmi Livewire agar kamu semakin mahir mengembangkan aplikasi real-time berbasis Laravel.