Kali ini saya akan sharing tutorial bagaimana menginstal Laravel dengan tambahan Laravel Livewire. Sebuah fitur ajaib dari Laravel dimana kalian bisa memodifikasi tampilkan interface web kalian tanpa meninggalkan Laravel kalian
Tanpa meninggalkan Laravel? Maksudnya bagaimana?
Secara tradisional dan sejauh cara yang saya gunakan selama ini. Saya membuat dulu tampilan HTML secara statis lalu memindahkannya ke dalam view menggunakan fitur Layout dan Partial yang sudah disediakan oleh Laravel
Namun dengan Livewire, kalian tidak perlu capek capek lagi melakukan hal demikian itu. Karena segala hal yang berkaitan dengan tampilan dalam view bisa kita ubah dan modifikasi menggunakan controller dari Laravelnya langsung
Seumpama kalian pernah menggunakan NextJS atau ReactJS. Nahhhh, cara kerjanya kurang lebih sama.Namun yang membedakan hanya syntax syntaxnya saja
Kalo kalian baru pertama kali menggunakan Livewire, plis baca postingan ini sampai bawah!
Langkah Langkah
Install Laravel seperti biasa
composer create-project laravel/laravel livewire-latihan
Masuk ke dalam folder project kalian dan pasang Laravel Livewire dengan perintah berikut
cd livewire-latihan
composer require livewire/livewire
Lalu buat component laravel livewire pertama kalian dengan memasukkan perintah berikut
php artisan make:livewire hello-world
kalian bisa juga menuliskannya seperti ini
php artisan make:livewire HelloWorld
Baca Juga: Laravel Kickstart. Hal Yang Harus Disiapkan Untuk Aplikasi Web Pertama Kamu
perintah ini akan membuat dua file baru secara otomatis.
- App\Livewire\HelloWorld.php
- views/livewire/hello-world.php
Ketika HelloWorld.php di buka maka akan muncul tampilan berikut ini
Kita akan bermain main di file ini
Selanjutnya, buka file welcome.blade.php dan bersihkan lalu isi dengan kode seperti ini
Ketika kita ubah file hello-world.blade.php maka tampilannya akan mengikuti isi hello-world.blade.php
Kita juga mengisikan value atau data ke dalam tampilan view ini dengan di Livewire HelloWorld dengan memasukkan public variabel
dan jalankan variabel $name di view menggunakan perintah {{ }}
Maka hasilnya akan muncul seperti ini
