Halo sobat developer, pada postingan sebelumnya kita sudah belajar membuat live search menggunakan Alpine.js. Nah pada kesempatan kali ini kita akan membuat live search menggunakan livewire. Livewire sendiri merupakan fullstack framework yang dibuat khusus untuk laravel. Livewire membantu developer laravel untuk membuat antarmuka yang dinamis dan simple. Mari kita mulai.
Menyiapkan Project Laravel
Pada tutorial ini saya anggap kamu sudah mengerti dan familiar menggunakan laravel (minimal pernah mencoba) ya. Siapkan project laravel kosong di komputer kamu, hapus file welcome.blade.php dalam folder resources/views dan buat file baru bernama index.blade.php di situ.
Isi file index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Livewire Live Search</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<main class="py-5">
<div class="container">
<h1 class="display-6">Search Github User</h1>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
Pada kode html tersebut kita menggunakan bootsrap untuk styling halaman kita.
Setelah membuat views, kita lanjut untuk membuat laravel menampilkan halaman yang sudah kita buat. Silahkan buka file web.php dan ganti route untuk root path menjadi seperti berikut:
Route::get('/', function () {
return view('index');
});
Sangat sederhana bukan? pada proyek ini kita hanya akan fokus menggunakan livewire component sehingga route kita langsung menampilkan view tanpa menggunakan controller.
Bekerja Dengan Livewire
Menginstall Livewire
Secara default livewire belum terinstall pada project laravel yang baru kita buat. Untuk menginstallnya, kita bisa menggunakan composer sebagai berikut
composer require livewire/livewire
setelah livewire selesai diinstall, sertakan javascript milik livewire pada file view kita
... kode lainnya
@livewireStyles
</head>
<body>
... kode lainnya
@livewireScripts
</body>
</html>
Membuat Livewire Component
Kita akan membuat sebuah livewire component dengan nama Search. Untuk membuat livewire component kita tidak perlu membuatnya secara manual, kita cukup menggunakan artisan command sebagai berikut:
php artisan livewire:make Search
Saat pertama kali dijalankan biasanya setelah selesai dijalankan maka akan muncul pertanyaan apakah ingin memberikan bintang pada repository livewire. Kamu memilih yes atau no.
Setelah menjalankan artisan command, maka livewire secara otomatis akan membuatkan dua buah file pada project laravel kita.
File pertama terdapat di folder app/Http/Livewire/Search.php. Ini merupakan sebuah class php yang meng-extend kelas Component yang ada dalam namespace Livewire/Component. Di dalam class ini kita akan menghandle logic dan data yang akan ditampilkan di halaman website kita. Berikut ini adalah isi filenya.
namespace App\Http\Livewire;
use Livewire\Component;
class Search extends Component
{
public function render()
{
return view('livewire.search');
}
}
File kedua terdapat di folder resources/views/livewire/search.blade.php. Ini merupakan file view laravel seperti biasa yang akan dirender oleh livewire, di dalam file ini kita menampilkan data yang dikirimkan dari class Search component. Berikut ini adalah isi file search.blade.php
<div>{{-- Stop trying to control. --}}</div>
Loh kok isinya gitu? Hehehe, sebenarnya ini hanyalah file view yang isinya terserah kita ingin seperti apa, oleh karena itu saat pertama kali dibuat hanya ada kalimat random yang ditampilkan sebagai komentar.
Menyiapkan Data
Di project ini kita akan membuat pencarian data user github berdasarkan username. Oleh karena itu, kita akan memanfaatkan API dari github untuk melakukan pencarian. Perlu kamu ketahui, API pencarian github memiliki rate limit yang kecil, sehingga kita tidak bisa terlalu sering melakukan request. Untuk mengatasi hal ini, kita bisa meningkatkan rate limit dengan cara mengirimkan personal access di header saat melakukan request. Untuk cara membuat personal access token, kamu bisa mengikuti langkahnya di sini.
Setelah menyiapkan personal access token, kita akan membuat sebuah private method bernama search dalam class Search sebagai berikut:
private function search($query)
{
if ($query == '') return [];
$response = Http::withHeaders([
'Accept' => 'application/vnd.github.v3+json',
'Authentication' => 'token <ganti dengan personal access token>'
])->get('https://api.github.com/search/users', [
'q' => $query,
'per_page' => 100
]);
return $response->json()['items'];
}
Dalam method tersebut, kita memanfaatkan HTTP Client yang disediakan laravel melalui Facade Http yang berada di namespace Illuminate\Support\Facades\Http. Pada saat melakukan request, kita juga mengirimkan Accept header yang direkomendasikan oleh github dan Authentication header yang berisi personal access token.
*Mohon diperhatikan, jangan hapus kata “token” dalam Authentication header karena memang seperti itu formatnya.
Selain header, kita juga mengirimkan query string bernama q yang berisi kata kunci pencarian dari parameter, dan query string bernama per_page yang digunakan untuk menentukan jumlah data yang tampil.
Setelah membuat method searc, tambahkan dua buah public property yaitu $query yang akan digunakan untuk menampung kata kunci pencarian dan $results yang digunakan untuk menampung hasil pencarian.
class Search extends Component
{
public $query = '';
public $results = [];
...kode lainnya
}
Setelah itu kita akan membuat method baru bernama updated() untuk menimpa method updated() milik livewire menjadi seperti ini.
public function updated()
{
$this->results = $this->search($this->query);
}
Method ini akan dijalankan setiap kali terjadi perubahan data pada livewire component, kita memanfaatkan perilaku ini untuk melakukan pencarian setiap terjadi perubahan pada kata kunci pencarian dan menyimpan hasilnya pada property results.
Ini adalah hasil akhir dari class Search dalam file Search.php
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Facades\Http;
use Livewire\Component;
class Search extends Component
{
public $query = '';
public $results = [];
private function search($query)
{
if ($query == '') return [];
$response = Http::withHeaders([
'Accept' => 'application/vnd.github.v3+json',
'Authentication' => 'token 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'
])->get('https://api.github.com/search/users', [
'q' => $query,
'per_page' => 100
]);
return $response->json()['items'];
}
public function updated()
{
$this->results = $this->search($this->query);
}
public function render()
{
return view('livewire.search');
}
}
Menampilkan Data
Setelah berurusan dengan pengambilan data, kini saatnya kita akan menampilkan data yang telah kita dapatkan. Mari kita mulai.
Kita akan membuat sebuah text input dan template untuk menampilkan data hasil pencarian pada file search.blade.php. Selain itu, kita juga akan menambahkan beberapa fungsionalitas dasar livewire pada component search. Untuk lebih jelasnya perhatikan kode berikut:
<div>
<div class="d-flex justify-content-start mt-5">
<div>
<input
wire:model.debounce.300ms="query"
type="search"
class="form-control"
placeholder="Github username..."
/>
</div>
</div>
<div class="mt-4">
<div
wire:loading.block
wire:target="query"
class="alert alert-warning"
role="alert"
>
Sedang mencari data...
</div>
<div wire:loading.remove wire:target="query">
@if (sizeof($results) == 0)
<div class="alert alert-info" role="alert">Belum ada hasil...</div>
@else
<div class="row">
@foreach ($results as $result)
<div class="col-lg-3 mb-3">
<div class="card">
<div class="card-body">
<img
src="{{ $result['avatar_url'] }}"
alt=""
class="img-fluid w-100 rounded-circle mb-3"
/>
<h5 class="text-center">
<a
href="{{ $result['html_url'] }}"
target="blank"
class="text-decoration-none"
>{{ $result['login'] }}</a
>
</h5>
<div class="text-center">
<small class="text-secondary">{{ $result['type'] }}</small>
</div>
</div>
</div>
</div>
@endforeach
</div>
@endif
</div>
</div>
</div>
Perhatikan element input pada kode tersebut. Kita menambahkan sebuah atribut milik livewire yaitu wire:model.debounce.300ms=”query”. Secara sederhana atribut ini berfungsi untuk menghubungkan element input dengan property query yang ada pada class Search. Dengan cara seperti ini, maka property query pada class Search akan diperbarui setiap kali text input mengalami perubahan value.
Berikutnya, atribut wire:loading.block wire:target=”query” pada element div digunakan untuk menampilkan element tersebut saat terjadi network request dan menghilangkannya ketika request selesai, ini sama seperti menampilkan proses loading.
Sebaliknya, atribut wire:loading.remove wire:target=”query” pada element div digunakan untuk menyembunyikan element tersebut saat terjadi network request dan menampilkannya kembali ketika request selesai.
Sisanya sangat sederhana, kita mengambil data $results sesuai dengan nama property results di class Search. Kemudian, kita gunakan data seperti biasa, yaitu memeriksa jumlah data dan melakukan looping untuk menampilkan data.
Merender Livewire Component di Halaman
Livewire component yang telah selesai kita buat belum dapat ditampilkan pada halaman website kita. Kita perlu menambahkannnya dalam file index.blade.php. Caranya sangat sederhana sekali, kita hanya perlu menambahkan tag <livewire:search/> pada bagian dimana component tersebut akan ditampilkan. Berikut ini adalah hasil akhir dari file index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Livewire Live Search</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
@livewireStyles
</head>
<body>
<main class="py-5">
<div class="container">
<h1 class="display-6">Search Github User</h1>
<!-- tambahkan tag seperti di bawah ini -->
<livewire:search />
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
@livewireScripts
</body>
</html>
Alur Kerja
- Kata kunci dimasukkan pada text input
- Perubahan value text input akan memperbarui nilai property query di class Search
- Pembaruan nilai property query selesai dan method updated di class Search tereksekusi
- Method updated akan mengeksekusi method search untuk mencari data via API
- Property results di class Search diperbarui nilainya dengan hasil pencarian yang baru
- Perubahan nilai property results di class Search juga akan mempengaruhi data yang ditampilkan dalam file search.blade.php karena disitu kita memanggil variable $results.
- Akhirnya data hasil pencarian ditampilkan dengan cara di looping.
Ujicoba Livewire Live Search
Setelah semuanya selesai, kamu dapat menguji project dengan menjalankan laravel server seperti biasa (php artisan serve), kemudian buka aplikasi di browser dan coba ketikkan sesuatu pada text input.
Penutup
Selesai sudah project tentang membuat live search menggunakan livewire. Kalau kamu masih belum mengerti, kamu dapat meninggalkan komentar pada postingan ini.