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

25 Sep 2025 | 20:03