Pencarian Data Contact

Setelah semua fitur CRUD terbuat, ada satu fitur yang biasanya juga ada pada umunya, yaitu fitur pencarian data, yang sangat berguna ketika data sudah banyak dan ingin melakukan perubahan atau menghapus sebuah data.

Untuk fitur pencarian ini tampilannya akan kita buat sejajar dengan tombol Create Contact, sesuaikan menjadi seperti ini.

<div class="flex justify-between items-center">
    <form action="" method="get">
        <input type="text" name="search" class="border border-gray-300 shadow  rounded p-3" placeholder="Cari data..." value="{{ request('search') }}">
    </form>
    <a href="{{ route('contacts.create') }}"
       class="px-4 py-3 bg-indigo-500 rounded hover:bg-indigo-700 my-2 ring-indigo-300 border border-indigo-200 text-white">Create
        Contact</a>
</div>

Tampilannya kurang lebih seperti ini ya kawan.

Untuk fungsi pencariannya kita buat pada ContactController method index() ubah menjadi seperti ini.

public function index(Request $request)
{
    $contact = Contact::query(); // mendefinisikan variabel $contact

    if ($request->filled('search')) { // jika inputan search ada isinya maka akan dieksekusi
        $contact->where('name', 'like', '%' . $request->search . '%'); // query pencarian data sesuai nama
    }

    return view('contacts.index', [
        'contacts' => $contact->latest()->get(),
    ]);
}

Sekarang coba lakukan pencarian, isi kolom pencarian dan tekan Enter dan seharusnya data yang muncul sesuai dengan kata kunci yang sudah dimasukkan, contoh.

Yess, berhasil sudah kita implementasikan fitur pencariannya, berikutnya kita akan perbaiki beberapa hal yang berhubungan dengan User Experience (UX).