Tanggal :15 Juli 2020
Membuat Pencarian Realtime

Belajar Laravel Livewire : Membuat Pencarian Realtime

Artikel ini bagian ke 8 dari 8 seri dalam artikel berseri "Belajar Laravel Livewire"

Assalamualaikum Warohmatulloh Wabarokatuh, setelah membuat pagination tanpa reload sekarang mari kita membuat pencarian realtime dengan menggunakan Laravel Livewire.

Nah seperti fitur-fitur yang kita buat sebelumnya menggunakan Livewire pembuatan fitur pencarian realtime dengan Laravel Livewire ini juga bisa dilakukan dengan sangat mudah.

Membuat Tampilan Pencarian

Pertama, tambahkan kolom pencarian pada view student-index.blade.php untuk memasukkan kata kunci pencarian tentunya. Letakkan di atas perulangan data students.

<div>
    <input wire:model="search" type="text" class="form-control my-3" placeholder="Search student name">
   @foreach ($students as $student)
       <livewire:student-single :student="$student" :key="$student->id"/>
   @endforeach

   {{ $students->links() }}
</div>

Okelah, mungkin ini tampilannya akan jelek, tapi tujuan artikel ini untuk memahami cara membuat pencarian realtime dengan Laravel Livewire jadi abaikan tampilan sementara ya.

Membuat Fungsi Pencarian Realtime

Kedua buat properti $updatesQueryString pada Class Component StudentIndex yang nilainya berisi dari query string yang kita kirimkan. Misalnya saya buat query string search untuk menampung pencarian dari pengguna.

Membuat Pencarian Realtime
Tampilan kolom pencarian.
protected $updatesQueryString = ['search'];

Tentunya kita juga harus buat properti public untuk bisa data binding dengan view.

public $search;

Setelah itu kita ubah data yang kita kirimkan ke view student-index dengan memanfaatkan query string yang didapatkan untuk mengolah query pada Eloquent.

public function render()
{
    return view('livewire.student-index',  [
        'students' => $this->search === null ? 
                    Student::latest()->paginate(5) : 
                    Student::where('name', 'like', '%' . $this->search . '%')->latest()->paginate(5),
    ]);
}

Maksud dari kode di atas adalah kita melakukan pengecekan pada properti search ($this-&gt;search) menggunakan tenary operator. Jika properti search bernilai null atau tidak memiliki nilai maka kita akan beri data semua students. Jika query string / properti search ada perubahan maka dia akan mengekseskusi query Eloquent setelah tanda : yang akan mengambil data students berdasarkan nama yang diketik.

Jika merasa bingung menggunakan ternary operator, bisa gunakan statemen if untuk menanganinya karena mungkin lebih mudah dipahami atau mudah dibaca.

public function render()
{
    $students = Student::latest()->paginate(5);

    if ($this->search !== null) {
        $students = Student::where('name', 'like', '%' . $this->search . '%')
                        ->latest()
                        ->paginate(5);
    }

    return view('livewire.student-index',  [
        'students' => $students,
    ]);
}

Sekarang mari kita coba lakukan uji coba pada fitur pencarian yang sudah kita buat, TARAA!!!

Demo pencarian realtime Laravel Livewire.

Biar Query Stringnya Bersih

Dan kode di atas meninggalkan sesuatu yang mengganjal, karena ketika properti search kosong maka akan muncul ?search= mungkin ini membuat kurang nyaman? Nah kita akan hilangkan query string tersebut dengan mengubah properti updatesQueryString.

protected $updatesQueryString = [
    ['search' => ['except' => '']],
];

Berikutnya, mungkin kita juga ingin menghilangkan query string untuk pagination jika berada di halaman pertama karena merasa tidak perlu menampilkan ?page= ketika itu adalah halaman pertama, tambahkan saja hal yang serupa untuk query string page di properti updatesQueryString.

protected $updatesQueryString = [
    ['page' => ['except' => 1]],
    ['search' => ['except' => '']],
];

Maka query string page hanya akan muncul ketika tidak di halaman pertama saja.

Kode Lengkap Component Class Student Index

Mungkin ada yang kebingungan kode untuk Component Class StudentIndex ini adalah kode lengkapnya.

<?php

namespace App\Http\Livewire;

use App\Student;
use Livewire\Component;
use Livewire\WithPagination;

class StudentIndex extends Component
{
    use WithPagination;

    public $search;
    public $page = 1;

    protected $updatesQueryString = [
        ['page' => ['except' => 1]],
        ['search' => ['except' => '']],
    ];

    protected $listeners = [
        'studentAdded',
    ];

    public function studentAdded()
    {
        # code...
    }

    public function render()
    {
        $students = Student::latest()->paginate(5);

        if ($this->search !== null) {
            $students = Student::where('name', 'like', '%' . $this->search . '%')
                            ->latest()
                            ->paginate(5);
        }

        return view('livewire.student-index',  [
            'students' => $students,
        ]);
    }
}

Wassalamualaikum Warohmatulloh Wabarokatuh.

Hi Saya Amirul, Saya mengajarkan koding melalui screencast di Kawan Koding, saya juga menulis Artikel di Kawan Koding.

9 Comments

  1. riyan permadi Reply

    Mas Amirul buat auto complate dengan Livewire , artikel nya bagus , tetep semangat mas aminrul dan sehat selalu

      1. riyan permadi Reply

        Auto complate layaknya google sreach dalam kata kata sugestion yg akan di cari, misal saya ketik di form input nama lalu muncul box kata2 ke bawah sesuai proerti yg uda d set , layak nya auto complate jQuery eheheh

  2. Vava Heirro Reply

    Mas amirul, gimana car menampilkan statis page tanpa reload? Kaya kaya ajax gitu, apakah di livewire ini ada kegunaan atau di laravel 7 nya aja sudah ada, mungkin ada refrensi?

    Statis page sesuai template blade. Tapi ingin bagaimana saat klik link page statis, tanpa reload.

    Terim kasih mas.

  3. Abdul Reply

    Sungkem mas Amirul, terima kasih mas sharing ilmunya, semoga sehat selalu biar terus bisa berbagi ilmunya ,
    Ini di networknya kebacanya xhr bukan ya mas? Yg live bgni kerjaannya js biasanya.. nanya lg mas, ini bisa dikasih kaya semacem timeout, jd onKeyup nya nunggu 1 detik misalnya baru jalan requestnya, jd biar ga perhuruf request ke servernya

  4. Fullname Reply

    “Pencarian realtime”

    Ku membayangkan skenario : ada orang sedang mencari sesuatu di sebuah web, ternyata yang dicari ga ada, dan dia menunggu hingga yang dicari itu muncul.

    Ternyata salah.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *