19 April 2017

Membuat Live Search Database menggunakan AJAX dan PHP MySQL

Assalamualaikum
Artikel kali ini akan membahas tentang bagaimana caranya membuat Live Search data dari database menggunakan  Ajax dan PHP MySQL
Latar belakang penulisan artikel ini adalah, saat ini saya sedang mengerjakan pembuatan sebuah aplikasi tentang pencarian lokasi pelanggan salah satu ISP pada google map. Data lokasi pelanggan tersebut tersimpan di dalam database MySQL, nah untuk mempermudah pencarian data pelanggan maka saya harus membuat sebuah Input textbox yang fungsinya adalah untuk mencari nama pelanggan yang ada di dalam database berdasarkan beberapa karakter yang diinputkan pada textbox tersebut tanpa harus melewati proses submit form terlebih dahulu.

Untuk mensiasatinya makanya digunakanlah Ajax sebagai media Live Search data. karena saat ini saya tidak memiliki Hosting makanya saya tidak bisa memberikan Demonya, jadi untuk yang penasaran untuk mencoba silahkan download saja File yang ada di akhir artikel ini.

Sebagai Contoh pada kasus kali ini saya mempunya sebuah database dengan nama lamers dan didalamnya terdapat sebuah tabel dengan nama pelanggan yang field-fieldnya berupa id, nama, alamat dan koordinat
Membuat Live Search Database menggunakan Ajax

Selanjutnya kita hanya akan membuat file pertama dengan nama index.html dan isi kodenya adalah sebagai berikut


selanjutnya kita akan buat sebuah file php dengan nama cari.php yang fungsinya adalah untuk mencari kecococokan inputan dari textbox yang ada di file index.html dengan data yang ada di database dan selanjutnya dikirim kembali ke index.html untuk ditampilkan.


jangan lupa Download file javascript dibawah ini lalu tempatkan 1 folder dengan kedua file sebelumnya (index.html dan cari.php)
Oh ia untuk Jquery dan Bootstrap saya pakai yang CDN, jadi agar script ini bisa berjalan, harus ada koneksi internet ya, kalo penerapanya nanti akan di pakai offline maka ada baiknya Jquery dan CSS Bootstrap nya di download aja langsung dari situsnya biar ditaruh di server lokal.

Buat yang gak mau ribet langsung aja download seluruh filenya beserta dengan database melalui Link dibawah ini

Oke terima kasih dan sampai jumpa lagi
Wassalam





EmoticonEmoticon