Pencarian Data Contact

Pencarian Data Contact

Laravel

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.

tampilan-search

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.

hasil-pencarian

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

Muhammad Amirul Ihsan
Muhammad Amirul Ihsan Fullstack Developer, Content Creator, suka berbagi pengalaman / pengetahuan lewat tulisan maupun video di kawankoding.com

Artikel Lainnya

Mempersiapkan Proyek Aplikasi Daftar Kontak

Mempersiapkan Proyek Aplikasi Daftar Kontak

Pada serial tulisan ini kita akan membuat sebuah aplikasi untuk membuat daftar kontak teman mengguna...

Mengedit Data Contact

Mengedit Data Contact

Seperti yang sudah tertulis di tulisan sebelumnya, kita akan buat fungsi edit data kali ini. Oke kit...

Mempercepat Membuka VSCode di Windows

Mempercepat Membuka VSCode di Windows

Mengatasi Startup VS Code Yang Lambat di Windows

Beberapa hari terakhir ini saya mengalami masala...