ToDo App lagi, Tapi dengan Livewire
Kembali dari lanjutan kenalan dengan laravel lagi, sebelum masuk ke laravelnya sebenarnya yang membuat saya tertarik banget untuk mencoba lagi laravel adalahh package bernama Livewire. Dari demo yang saya lihat saya langsung suka karena paket ini seperti memberi kemampuan interaktif setara saat menggunakan javascript, bedanya ini “pure” php+html (blade komponen tepatnya).
Agar tidak terlalu kemana-mana tulisan ini dibagi ke dalam dua bagian, pertama sekilas mencoba-coba fitur dasar, dan yang kedua mari buat simple todo app, yah saya gak tahu mau bikin apa dan yang paling gampang ya todo app, jadi tanpa fafifu lebih banyak langsung saja.
Install Livewire
Memasang livewire sama dengan memasang package php pada umumnya dengan composer
composer require livewire/livewire
Gak perlu dulu yang aneh-aneh saya siapkan dulu satu url untuk menjadi playground, buka routes/web.php dan buat seperti berikut
Route::get('demo', function () {
return view('demo');
});
Lalu di views, buat berkas dengan nama demo.blade.php, isikan standar html template, saya sedikit menambahkan cdn bootstrap aja biar sedikit lebih rapi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
@livewireStyles()
</head>
<body>
<div class="container">
<div class="col-12 col-md-10 col-lg-8">
<div class="card-body row no-gutters align-items-center">
<h1>Demo Livewire</h1>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
@livewireScripts()
</body>
</html>
Jika diperhatikan di html ada bagian terkait livewire, itu helper untuk load asset yang dibutuhkan agar livewire bisa bekerja.
First Component
Untuk membuat komponen livewire gunakan cli artisan seperti berikut
php artisan make:livewire demo # demo di sini nama komponen yang saya buat, bisa diganti dengan nama yang dimau
Perintah ini akan membentuk 2 berkas, satu di app/Http/Livewire/Demo.php dan satu lagi di resources/views/livewire/demo.blade.php
Untuk berkas pertama isinya seperti berikut
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Demo extends Component
{
public function render()
{
return view('livewire.demo');
}
}
sedangkan berkas kedua murni html blade biasa
<div> // html komponen </div>
Berkas pertama, class Demo itu bisa dianggap sebagai controller, sehingga semua logic akan bermain di sini, dan yang kedua adalah berkas blade yang nantinya akan berkomunikasi secara langsung dengan class Demo ini.
Model Binding
Tambahkan public properti di berkas Livewire/Demo.php seperti berikut
class Demo extends Component
{
public $title = 'Demo Livewire';
public function render()
{
return view('livewire.demo');
}
}
Lalu di komponen blade livewire panggil variable $title
<h1>{{ $title}}</h1>
Lalu yang paling menarik adalah ini, bindingnya. Mirip dengan v-model di Vue namun sekali lagi ini “pure” html php, tambahkan textbox di komponen blade tadi menjadi seperti berikut
<div>
<input type="text" class="form-control form-control-lg form-control-borderless" wire:model="title">
<h1>{{ $title}}</h1>
</div>
hasilnya?
Membuat Todo App
Segitu aja dulu, dari sedikit tentang model binding, sekaran mari iseng buat todo app yang menurut saya cukup lumayan dan interaktif walau saya tidak menulis satu baris javascript apapun.
Buat livewire todo dan task, todo sebagai parent dan task sebagai child
php artisan make:livewire todo php artisan make:livewire task
Seperti biasa, tambahkan saja langsung route baru untuk fokus terkait todo app ini.
Route::get('todo', function () {
return view('todo');
});
jangan lupa berkas resources/views/todo.blade.php dan isikan seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
@livewireStyles()
</head>
<body>
<div class="container">
<br/>
<div class="row justify-content-center">
@livewire('todo')
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
@livewireScripts()
</body>
</html>
gak pake database-database cukup mainin array, buka berkas livewire/Todo.php buat seperti ini
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Todo extends Component
{
public $task = '';
public $tasks = [];
public function submit()
{
array_push($this->tasks, $this->task);
$this->tasks = $this->tasks;
$this->task = '';
}
public function render()
{
return view('livewire.todo');
}
}
Buka berkas livewire\todo.blade.php, ubah menjadi seperti ini
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm" wire:submit.prevent="submit">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<!--end of col-->
<div class="col">
<input wire:model="task" class="form-control form-control-lg form-control-borderless" type="text" placeholder="Add task">
</div>
<!--end of col-->
<div class="col-auto">
<button class="btn btn-lg btn-success">Add</button>
</div>
<!--end of col-->
</div>
</form>
<br>
<div class="row justify-content-center">
<ul class="list-group">
@foreach ($tasks as $name)
@livewire('task', ['task' => $name], key($name))
@endforeach
</ul>
</div>
</div>
Sekarang childnya untuk menampung task, ubah livewire\task.blade.php buat seperti ini
@if ($done)
<li class="list-group-item d-flex justify-content-between align-items-center"><s>{{ $task }}</s></li>
@else
<li class="list-group-item d-flex justify-content-between align-items-center">{{ $task }} <input type="checkbox" wire:model="done"></li>
@endif
sedangkan pada berkas livewire\Task.php Buat sepert ini untuk menambahkan fungsi menyelesaikan tugas.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Task extends Component
{
public $task;
public $done = false;
public function render()
{
return view('livewire.task');
}
}
Sehingga hasil akhir seperti berikut
Referensi
https://laravel-livewire.com/docs/2.x/quickstart