Belajar Laravel Livewire : Membuat Pencarian Realtime

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.

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

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.