Menginstal Livewire 3 di Proyek Laravel

Setelah mengetahui apa itu Livewire , sekarang kita akan mulai petualangan dengan Livewire dengan menginstalnya. Sebelum menginstal Livewire pastikan beberapa hal ini terpenuhi.

• Laravel 10 atau yang lebih baru
• PHP 8.1 atau yang lebih baru

Menginstal Livewire

Pada folder / direktori utama aplikasi Laravel kita, jalankan perintah Composer berikut ini:

composer require livewire/livewire

Jika pada aplikasi kita sudah terinstal AlpineJS, kita harus menghapusnya terlebih dahulu supaya Livewire bisa berfungsi dengan baik, jika tidak, Alpine akan dimuat dua kali dan Livewire tidak akan berfungsi. Contohnya, jika kita menginstal Laravel dengan Laravel Breeze dan memilih "Blade with Alpine" starter kit, kita harus menghapus Alpine dari resources/js/app.js

Membuat Komponen Livewire

Livewire menyediakan perintah Artisan untuk membuat komponen baru secara cepat. Untuk membuat sebuah komponen Counter jalankan perintah ini:

php artisan make:livewire counter

Perintah ini akan membuat dua buah file dalam proyek kita class dan view:

• app/Livewire/Counter.php
• resources/views/livewire/counter.blade.php

Sedikit penjelasan tentang dua file di atas, class adalah sebuah file yang digunakan untuk mendefinisikan property, function, logical operation layaknya controller di Laravel.

Sedangkan file view adalah file yang digunakan untuk implementasi tampilannya.

Ngoding File Class

Buka app/Livewire/Counter.php dan ganti isinya dengan kode di bawah ini:

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

Berikut sedikit penjelasan tentang kodenya:

• public $count = 1 - Mendeklarasikan public property dengan nama $count dengan nilai awalnya adalah 1.
• public function increment() - Mendeklarasikan sebuah public method dengan nama increment() yang akan menambahkan nilai pada property $count setiap kali dipanggil. Public method seperti ini bisa di trigger dari browser dengan berbagai cara, termasuk ketika user klik sebuah button.
• public function render() - Mendeklarasikan method render() yang mengembalikan sebuah file view Blade. File Blade ini akan berisi template HTML untuk komponen kita.

Ngoding File View

Buka resources/views/livewire/counter.blade.php dan ganti isinya dengan kode di bawah ini:

<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment">+</button>
 
    <button wire:click="decrement">-</button>
</div>

Kode tersebut akan menampilkan nilai dari poperty $count dan dua buah button yang akan menambah (increment) dan mengurangi (decrement) nilai dari property $count.

Komponen Livewire HANYA BOLEH memiliki satu elemen utama

Agar komponen Livewire bisa bekerja, komponen hanya boleh memiliki satu elemen sebagai root element. Jika terdeteksi ada beberapa root element, maka akan dilemparkan ke exception. Direkomendasikan untuk menggunakan elemen <div> untuk membungkusnya seperti pada contoh. Komentar HTML juga dihitung sebagai elemen terpisah dan seharusnya diletakkan di dalam root element. Ketika merender full-page component, named slot untuk layout harusnya diletakkan di luar root element.

Mendaftarkan route untuk komponen

Buka routes/web.php pada aplikasi Laravel kita dan tambahkan kode berikut ini:

use App\Livewire\Counter;
 
Route::get('/counter', Counter::class);

Sekarang komponen counter kita ditugaskan ke route /counter, jadi ketika user mengunjungi /counter pada aplikasi kita, komponen ini akan dirender oleh browser, ini yang juga disebut sebagai full-page component pada Livewire.