Mengenal Laravel Livewire

Mungkin kamu berpikir.. Apa itu Livewire? Bukankah kita sudah memiliki cukup banyak stak teknologi?

Walaupun hal tersebut benar adanya bahwa kita memiliki cukup banyak framework baru dan stak teknologi, namun alat yang satu ini mungkin sangat cocok bagi kamu yang tidak punya cukup waktu untuk belajar stak teknologi popular. Hanya dengan PHP dan Laravel kamu sudah bisa membangun aplikasi web yang modern.

Laravel Livewire memungkinkanmu membuat aplikasi dinamis tanpa perlu menyentuh kompleksivitas JavaScript, Vue.js, React ataupun Angular.

PHP, Laravel, Livewire dan sedikit Alpine.js lah yang kamu perlukan.

Apa contoh singkat dari penggunaan Livewire?

Bayangkan kamu sedang membuat website komunitas yang mana terdapat fitur komentar dan balasan pada thread yang diterbitkan.

Biasanya pada aplikasi website modern, saat pengguna mengirimkan sebuah komentar, seketika itu juga halaman tidak perlu melakukan muat-ulang (reload) hanya untuk menampilkan komentar baru di bawah thread tersebut.

Mirip seperti apa yang Facebook dan Twitter lakukan, ketika kamu membalas postingan seseorang, halaman tersebut tidak melakukan muat-ulang.

Hal ini membuat website menjadi ramah terhadap pengguna, dinamis dan juga interaktif. Kamu bisa membuat website seperti ini hanya dengan menggunakan Komponen Livewire di dalam view Blade.

Tanpa jQuery, tanpa React, tanpa Angular, tanpa overthinking.

Ya, Livewire melakukan AJAX untuk kamu, sehingga kamu tidak perlu melakukannya

AJAX membuat interaksi langsung antara pengguna dan aplikasi. Di belakang layar, Livewire sudah mengurus AJAX untuk kamu.

Gambar GIF oleh Tony Lea.

Apa yang terjadi di belakang layar?

Mari melihat ulasan singkat dari website resmi Livewire:

• Livewire melakukan render awal terhadap output komponen (seperti Blade, berupa HTML). Cara ini kemudian membuatnya ramah SEO.
• Ketika interaksi terjadi, Livewire membuat request AJAX ke server dengan data yang diperbarui.
• Server kemudian melakukan pe-renderan ulang terhadap komponen dan mengirimkan HTML baru yang merupakan data yang telah diperbarui.
• Livewire secara pintar memutasi DOM sesuai dengan apa yang diminta atau apa yang diubah.

Ooh It's magic, you know... can you believe it's magic, you know.... never believe it so it's magic

Baiklah, segitu aja nyanyinya dan tampilkan kodenya sekarang?

Apakah kamu berkenan memberiku $5 via PayPal yang kemudian aku berikan contoh kodenya? Tidaklah, aku cuma bercanda dan ini contoh kodenya..

Ngomong-ngomong, biasanya kamu perlu mengurs dua file. Yang pertama adalah komponen Livewire dan yang kedua adalah Livewire view (file blade).

Mari panggil komponen kita dengan sebutan 'SearchCustomer', untuk membuat komponen Livewire yang baru, di terminal kamu jalankan perintah berikut:

php artisan make:livewire SearchCustomer

Perintah tersebut akan membuat file SearchCustomer.php di dalam direktori App\Http\Livewire,

dan file blade search-customer.blade.php di dalam direktori resources/views/livewire.

Komponen Livewire SearchCustomer kamu

<?php
use Livewire\Component;
 
class SearchCustomer extends Component
{
    public $search = '';
 
    public function render()
    {
        return view('livewire.search-customers', [
            'users' => User::where('name', $this->search)->get(),
        ]);
    }
}

Komponen Livewire SearchCustomer mu akan berisi satu model Livewire, yakni properti $search.

Properti $search akan digunakan di dalam view Livewire: livewire.search-customers yang mana akan mendeteksi setiap perubahan nilai daripada input yang diberikan oleh pengguna.

Kapanpun nilai pada properti ini berubah, Livewire akan melakukan pe-renderan ulang bersamaan dengan query builder Eloquent yang disuplai ke view tersebut.

View Livewire SearchCustomer kamu

<div>
    <input wire:model="search" type="text" placeholder="Search users..."/>
 
    <ul>
        @foreach($users as $user)
            <li>{{ $user->username }}</li>
        @endforeach
    </ul>
</div>

Livewire search-customer.blade.php memiliki wire:model yakni "search", yang mana properti ini telah dibuat di dalam file komponen Livewire tadi.

Setiap kali pengguna mengetikkan nama pada kolom kustomer, maka Livewire akan mengurus AJAX untuk menerima daftar-daftar kustomer berdasarkan nama yang dicari.

Tidak lupa juga... Kamu harus memanggil Livewire tersebut di dalam suatu file Laravel Blade yang kamu gunakan.

Panggil Livewire kamu di dalam file Laravel Blade

<body>
    ...
    @livewire('search-customer')
    ...
</body>

Sebagai contoh, file Blade kamu adalah customers.blade.php dan disinilah kamu ingin memiliki fitur pencarian kustomer berdasarkan nama, maka di dalam file inilah kamu harus memanggil Livewire SearchCustomer.

<body>
    ...
    <livewire:search-customer/>
    ...
</body>

Alternatifnya, kamu bisa memanggil komponen Livewire tersebut dengan cara di atas.