Membikin Live Search Menggunakan Livewire

Halo sobat developer, pada postingan sebelumnya kita sudah belajar Membikin live search menggunakan Alpine.js. Nah pada kesempatan kali ini kita akan Membikin live search menggunakan livewire. Livewire sendiri merupakan fullstack framework yang dibuat Tertentu Kepada laravel. Livewire membantu developer laravel Kepada Membikin antarmuka yang Bergerak dan simple.
Mari kita mulai.

Menyiapkan Project Laravel

Pada tutorial ini saya anggap Anda sudah mengerti dan familiar menggunakan laravel (minimal pernah mencoba) ya.
Siapkan project laravel Hampa di komputer Anda, hapus file welcome.blade.php dalam folder resources/views dan buat file baru bernama index.blade.php di situ.

Isi file index.blade.php

html lang="en">
  head>
    meta charset="utf-8" />
    meta name="viewport" content="width=device-width, initial-scale=1" />
    title>Livewire Live Searchtitle>
    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 Userh1>
      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 Kepada styling halaman kita.

Setelah Membikin views, kita lanjut Kepada Membikin laravel menampilkan halaman yang sudah kita buat. Silahkan buka file web.php dan ganti route Kepada root path menjadi seperti berikut:

Route::get('/', function () {
    return view('index');
});

Sangat sederhana bukan? pada proyek ini kita hanya akan Konsentrasi 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. Kepada menginstallnya, kita Pandai menggunakan composer sebagai berikut

composer require livewire/livewire

setelah livewire selesai diinstall, sertakan javascript Punya livewire pada file view kita

... kode lainnya
    @livewireStyles
head>
body>
    ... kode lainnya

    @livewireScripts
body>
html>

Membikin Livewire Component

Kita akan Membikin sebuah livewire component dengan nama Search. Kepada Membikin livewire component kita Kagak perlu membuatnya secara manual, kita cukup menggunakan artisan command sebagai berikut:

php artisan livewire:make Search

Demi pertama kali dijalankan biasanya setelah selesai dijalankan maka akan muncul pertanyaan apakah Ingin memberikan bintang pada repository livewire. Anda memilih yes atau no.

Setelah menjalankan artisan command, maka livewire secara Mekanis 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 Eksis 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 Normal 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 Demi pertama kali dibuat hanya Eksis kalimat Secara acak yang ditampilkan sebagai komentar.

Menyiapkan Data

Di project ini kita akan Membikin pencarian data user github berdasarkan username. Oleh karena itu, kita akan memanfaatkan API dari github Kepada melakukan pencarian. Perlu Anda ketahui, API pencarian github Mempunyai rate limit yang kecil, sehingga kita Kagak Pandai terlalu sering melakukan request. Kepada mengatasi hal ini, kita Pandai meningkatkan rate limit dengan Metode mengirimkan personal access di header Demi melakukan request. Kepada Metode Membikin personal access token, Anda Pandai mengikuti langkahnya di sini.

Setelah menyiapkan personal access token, kita akan Membikin 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 '
    ])->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 Demi melakukan request, kita juga mengirimkan Accept header yang direkomendasikan oleh github dan Authentication header yang berisi personal access token.

*Minta 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 Kepada menentukan jumlah data yang tampil.

Setelah Membikin method searc, tambahkan dua buah public property Yakni $query yang akan digunakan Kepada menampung kata kunci pencarian dan $results yang digunakan Kepada menampung hasil pencarian.

class Search extends Component
{
    public $query = '';
    public $results = [];

    ...kode lainnya
}

Setelah itu kita akan Membikin method baru bernama updated() Kepada menimpa method updated() Punya 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 Kepada 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 Membikin sebuah text input dan template Kepada menampilkan data hasil pencarian pada file search.blade.php. Selain itu, kita juga akan menambahkan beberapa fungsionalitas dasar livewire pada component search. Kepada 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:Sasaran="query"
      class="alert alert-warning"
      role="alert"
    >
      Sedang mencari data...
    div>
    div wire:loading.remove wire:Sasaran="query">
      @if (sizeof($results) == 0)
      div class="alert alert-info" role="alert">Belum Eksis 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'] }}"
                  Sasaran="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 Punya livewire Yakni wire:model.debounce.300ms=”query”. Secara sederhana atribut ini berfungsi Kepada menghubungkan element input dengan property query yang Eksis pada class Search. Dengan Metode seperti ini, maka property query pada class Search akan diperbarui setiap kali text input mengalami perubahan value.

Berikutnya, atribut wire:loading.block wire:Sasaran=”query” pada element div digunakan Kepada menampilkan element tersebut Demi terjadi network request dan menghilangkannya ketika request selesai, ini sama seperti menampilkan proses loading.

Sebaliknya, atribut wire:loading.remove wire:Sasaran=”query” pada element div digunakan Kepada menyembunyikan element tersebut Demi 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 Normal, Yakni memeriksa jumlah data dan melakukan looping Kepada 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

html lang="en">
  head>
    meta charset="utf-8" />
    meta name="viewport" content="width=device-width, initial-scale=1" />
    title>Livewire Live Searchtitle>
    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 Userh1>
        
        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>