Belajar Laravel Livewire Untuk Pemula

Livewire tersebut ialah full-stack frame-work untuk laravel, yang memungkinkan kita untuk membuat antara muka yang dinamis secara mudah, tanpa tinggalkan Laravel.

Berbeda dengan Vue dan React yang membutuhkan API untuk ambil data dan atau menampilkan data, di Livewire kita akan membuat 2 file yaitu Class PHP yang sepintas serupa dengan Controller pada Laravel dan file view.

Livewire memiliki langkah kerja yaitu:

Livewire merender component
Livewire akan membuat AJAX request dengan data baru saat terjadi interaksi (event)
Server akan merender ulang component dan akan mengirimkan respon dengan HTML data yang baru.
Livewire akan memutasi DOM sesuai hal-hal yang berubah.

“For the frontend, I often used Vue.js. If you asked a 6 months younger version of mine, I would count vue.js here instead of Livewire. But Livewire is killing it in speed points, syntax, and easiness. With Livewire, you don’t have to care about so many things. It’s directly serverside, so you don’t have to stress with double validations and all the annoying stuff.” — Vittorio Emmermann

untuk menggunakan Livewire kita cukup masuk ke proyek root Laravel kita dan menjalankan command

composer require livewire/livewire

sesudah di-install kita perlu menambah Blade directives @livewireStyles di tag head dan @livewireScripts di tag bodi pada di template kita :

Membuat Inline Components di Livewire

untuk membuat inline component karena itu cuma di perlukan 1 file (tanpa blade) yaitu sebuah Class PHP.

Membuat component HelloWorld

kita akan membuat iniline component HelloWorld, pertama jalankan command berikut untuk membuat component

php artisan make:livewire HelloWorld --inline

akan terbentuk file di app/Http/Livewire/HelloWorld.php, ubah jadi sebagai berikut :

class HelloWorld extends Component
{
   public function render()
   {
      return <<<'blade'             
          <div>Hello World</div>         
      blade;
   }
}

lalu untuk merender component kita dapat memakai blade directive sebagai berikut

@livewire(‘some-component’)

ada beberapa command yang ada di Livewire, dan diantaranya ialah :

Publish Livewire configuration
```
php artisan livewire:publish
```

Create a new Livewire component
```
php artisan livewire:make <name>
```

Copy a Livewire Component

php artisan livewire:copy <name <new_name>

Move a Livewire Component

php artisan livewire:move <name> <new_name>

Delete a Livewire Component
```
php artisan livewire:delete <name>
```

Belajar Laravel Livewire Untuk Pemula

Membuat Inline Components di Livewire

Membuat component HelloWorld

Artikel Terkait Lainnya :