1.      

Introduction

Live Search adalah teknik pencarian data secara langsung (real-time) ketika user mengetikkan kata kunci di kolom pencarian. Hasil pencarian akan otomatis ditampilkan tanpa perlu menekan tombol submit atau me-refresh halaman.

Fitur ini sangat berguna ketika jumlah data yang ditampilkan cukup banyak, misalnya ratusan customer. Jika harus menampilkan semua data sekaligus, proses pencarian akan lambat dan tidak efisien. Dengan live search, hanya data yang sesuai dengan kata kunci yang akan ditampilkan, sehingga lebih cepat dan memudahkan user.

Laravel mendukung pembuatan live search dengan sederhana, cukup menggunakan route untuk menampung request, controller untuk menjalankan query pencarian ke database, lalu mengembalikan hasil dalam bentuk JSON. Hasil JSON ini kemudian ditangani oleh JavaScript (misalnya jQuery) pada view, sehingga data bisa langsung muncul tanpa reload halaman.

Pertama ”Klik kanan” lalu klik ”Quick app” dan klik ”Laravel”

Isi nama projek yang ingin dibuat lalu klik ok

Berikut tampilan ketika sudah selesai membuat projek, ketik ”php artisan serve” ketika http nya muncul tahan ctrl dan klik link http nya untuk melihat apakah projek nya sudah terbuat dengan benar

Berikut Adalah tampilan yang akan muncul ketika berhaasil membuat projek laravel nya

2.  Tempat menyimpan projek

Untuk mencari projek cukup tekan tombol “Root”

1.      3. membuat database

Buka projeknya lalu buat terminal baru

Setelah itu buat migrasinya dengan mengetik ” php artisan make:migration create_customers_tabel”

Selanjutnya buka folder migration nya yang berada di dalam folder database dan definisikan tabelnya seperti ini

Jika sudah, bisa di migrasi dengan mengetik ”php artisan migrate” di terminal

1.     4. Melakukan pengecekan apakah table sudah terbuat

Untuk mengecek apa nama database anda anda bisa pergi ”.env”

Setelah itu ketik ”mysql -u root” untuk login sebagai user root setelah itu ketik ”show databases;” untuk melihat apakah database yang dibuat ada disana

Jika ada selanjutnya ketik ”use database_anda;” untuk menggunakan database tersebut dan untuk memeriksa apakah tabel dari migrasi yang dibuat tadi ada atau tidak ketik ”show tables;”

Selanjutnya untuk mengecek yang di dalam customers apakah sesuai dengan yang di migrate tadi ketik ”desc customers”

1.      5. Mengisi data

Pertama kita buat dulu file “CustomerSeeder.php” di dalam folder database lalu seeder setelah itu ketik kodenya seperti ini

Kode ini berfungsi data generator otomatis sebanyak 100 data untuk mengisi database dengan customer dummy

tapi sebelum menjalankannya harus membuat file ”Customer.php” di folder app lalu Models dan ketik kode ini

kode ini berfungsi untuk menentukan field apa saja yang boleh diisi (name, email, phone, address) pastikan nama datanya sama dengan yang di database jika tidak maka akan terjadi eror

Untuk menjalankankannya kita perlu ke terminal dan ketik ”php artisan db:seed --class=CustomerSeeder”

untuk mengeceknya kita bisa Kembali ke Terminal laragon dan ketik ”select * from customers;”

1.      6. Membuat live search

Buat “web.php” di routes lalu diisi dengan kode di bawah ini

kode ini berfungsi untuk mengatur ke mana request akan diarahkan. Pada contoh ini, route / digunakan untuk menampilkan halaman utama yang berisi form pencarian, sedangkan route /search digunakan untuk menangani proses pencarian data customer. Jadi ketika user mengetik sesuatu di form, data akan dikirim ke /search untuk diproses.

Buat “CustomerController.php” di app/Http/Controllers lalu diisi dengan kode di bawah ini

kode ini akan memiliki dua fungsi utama. Fungsi index() dipakai hanya untuk menampilkan halaman view index.blade.php, sedangkan fungsi search() bertugas menerima input pencarian dari user, melakukan query ke tabel customers untuk mencari nama atau email yang sesuai, lalu mengembalikan hasilnya dalam bentuk JSON. JSON dipakai karena lebih mudah diolah oleh JavaScript di sisi browser.

Buat “index.blade.php” di folder resource lalu view lalu diisi dengan kode di bawah ini

Kode ini menampilkan input text untuk mengetik kata kunci pencarian dan sebuah elemen <ul> untuk menampilkan hasil pencarian. Pada bagian bawah view, kita menambahkan kode JavaScript dengan bantuan jQuery. Fungsi JavaScript ini akan berjalan setiap kali user mengetik sesuatu (event keyup). Teks yang diketik akan dikirim ke route /search menggunakan AJAX, lalu hasil yang dikembalikan berupa data JSON akan ditampilkan di dalam elemen <ul>. Jika tidak ada hasil yang cocok, maka akan muncul tulisan “Tidak ditemukan”.

1.      7. Cek apakah berfungsi

Buka terminal lalu ketik ”php artisan serve” lalu tahan Ctrl dan klik http nya

Jika berhasil akan muncul seperti ini

Selanjutnya kita ambil 1 nama dari databaase untuk mencoba apakah live search nya bekerja atau tidak

25 Sep 2025 | 20:02