Javan Cipta Solusi
Published in

Javan Cipta Solusi

Belajar Laravel x Livewire | Introduction

untuk mengawali perkenalan kita dengan Livewire, ada sebuah quote dari Caleb Porzie yaitu

Building modern web apps is hard. Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer’s workflow is insane. It doesn’t have to be this way…”

Image source : https://www.krishaweb.com/laravel-livewire

Livewire itu sendiri adalah full-stack framework untuk laravel, yang memungkinkan kita untuk membuat antar muka yang dinamis secara mudah, tanpa meninggalkan Laravel.

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

Livewire memiliki cara kerja yaitu:

  • Livewire merender component
  • Livewire akan membuat AJAX request dengan data baru ketika terjadi interaksi (event)
  • Server akan merender ulang component dan akan mengirimkan respons 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 project root Laravel kita dan menjalankan command

composer require livewire/livewire

setelah di install kita perlu menambahkan Blade directives @livewireStyles di tag head dan @livewireScripts di tag body pada di template kita :

Membuat Inline Components di Livewire

untuk membuat inline component maka hanya di butuhkan 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, edit menjadi seperti berikut :

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

lalu untuk merender component kita bisa menggunakan blade directive seperti berikut

@livewire(‘some-component’)

ada beberapa command yang terdapat di Livewire, di antaranya adalah :

  • 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>

--

--

Business Process Optimization Partner. Contact us to help you optimize your business using technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store