Media Berbagi & Catatan Online

Membuat Autocomplete dengan PHP dan MySQLi

Kategori: PHP  |  30 Desember 2017

Dalam sebuah aplikasi berbasis web pasti ada yang namanya input data, yaitu suatu kegiatan memasukkan data ke dalam sistem aplikasi sehingga data tersebut tersimpan dan menjadi data digital yang siap diolah.

Untuk mempermudah user dalam menginputkan data ke dalam sistem salah satunya yaitu dengan membuat autocomplete.

Autocomplete merupakan suatu fitur untuk memberikan sugesti/saran data yang akan diinputkan ke dalam sistem. Data berupa sugesti /saran ini diambil dari data lain yang telah tersedia atau data yang sudah ditetapkan.

Dengan memanfaatkan fitur ini user tinggal mengetikkan kata kunci tertentu dan akan muncul sugesti/saran data sehingga lebih praktis.

Contoh autocomplete ini seperti ketika kita mengetikkan sesuatu di Google akan muncul saran kata sesuai yang kita tulis.

Cara Membuat Autocomplete

Pada tulisan kali ini saya akan memberikan tutorial cara membuat autocomplete dengan PHP dan MySQLi menggunakan plugin jQuery Autocomplete.

jQuery Autocomplete adalah sebuah plugin untuk membuat autocomplete input yang dikembangkan oleh Devbridge Group, sebuah konsultan teknologi yang berbasis di Chicago. Plugin jQuery Autocomplete ini gratis dan open source.

Sebelum membuat autocomplete, ada 2 hal yang harus disiapkan terlebih dahulu yaitu library jQuery dan jQuery.Autocomplete, jika belum punya silakan download terlebih dahulu.

  • Download library jQuery¬†di sini.
  • Download library jQuery.Autocomplete¬†di sini.

Tutorial Membuat Autocomplete

Dalam membuat autocomplete input kita bisa menggunakan database MySQLi yang diproses dengan PHP atau tanpa database sama sekali.

Pada autocomplete tanpa database, data sugesti/saran yang ditampilkan diambil langsung dari halaman web karena berupa data statis. Artinya data tersebut telah diatur oleh programmer sehingga data tersebut tidak dapat diubah (data statis).

Sedangkan pada autocomplete dinamis, data sugesti/saran kata yang ditampilkan akan selalu berubah-ubah sesuai dengan preferensi user (data dinamis).

Membuat Autocomplete Tanpa Database

Tahap 1

Buat folder baru dengan nama "latihan" dalam htdocs lalu copy paste library jQuery dan jQuery.Autocomplete yang telah kita download tadi ke dalam folder tersebut.

Silakan buka kode editor yang Anda gunakan lalu copy paste kode di bawah ini dan simpan ke dalam folder latihan yang kita buat tadi dengan nama autocomplete-statis.html.

Hasilnya seperti ini

Tahap 2

Untuk mempercantik form input ini, tambahkan kode css di bawah ini tepat di atas tag </head> lalu simpan.

Hasilnya akan jadi seperti ini

Pada tahap ini kita sudah berhasil membuat sebuah input form namun belum memiliki fitur autocomplete.

Tahap 3

Untuk membuat autocomplete, lanjutkan dengan menambahkan kode di bawah ini tepat di atas tag </body>.

Kode di atas berfungsi untuk memanggil library jquery-3.2.1.min.js dan jquery.autocomplete.min.js yang digunakan untuk membuat autocomplete.

Tahap 4

Kemudian tambahkan kode di bawah ini tepat di atas tag </body>.

Kode di atas berfungsi untuk memproses autocomplete.

Tahap 5

Dengan melakukan semua tahapan di atas, maka kode tersebut akan menjadi seperti ini

Dengan mengikuti semua tahan di atas secara urut kita sudah berhasil membuat fitur autocomplete input tanpa database.

Untuk mencobanya silakan buka browser dan ketikkan http://localhost/latihan/autocomplete-statis.html pada address bar.

Setelah kita berhasil membuat autocomplete tanpa database, sekarang kita akan membuat autocomplete dengan PHP dan database MySQLi.

Membuat Autocomplete dengan Database

Pertama silakan buat terlebih dahulu database pada phpMyAdmin dengan nama autocomplete. Lalu buat table baru bernama table_buah dengan struktur table berikut.

table_buah
FieldTipe DataPanjang DataEkstra
idint5auto increment
buahvarchar30

Kemudian insert data buah di bawah ini ke dalam database yang baru yang telah kita buat tadi. Silakan pilih database autocomplete lalu pilih table table_buah klik menu SQL kemudian copy paste script SQL ini dan klik GO.

Pada tahap ini kita sudah berhasil membuat database lengkap dengan isinya.

Lanjut ke tahap berikutnya.

Untuk membuat autocomplete dengan database caranya hampir sama dengan autocomplete tanpa database, perbedaannya hanya kode yang digunakan pada Tahap 4.

Copy file autocomplete-statis.html dan rename menjadi autocomplete-dinamis.html.

Ganti kode tahap 4 dengan kode di bawah ini untuk membuat autocomplete dengan database.

Sehingga hasilnya akan menjadi seperti ini

Kita sudah berhasil membuat autocomplete, akan tetapi masih belum berfungsi.

Mengapa hal ini terjadi?

Hal ini karena data sugesti/saran autocomplete diambil dari database yang diproses dengan PHP dan belum kita buat.

Buat file baru dengan nama source.php sesuai dengan serviceUrl (perhatikan baris ke 77 pada kode di atas) yang telah kita buat tadi dan isi dengan kode di bawah ini

Selesai. Kita telah berhasil membuat autocomplete dengan database.

Buka browser dan ketikkan http://localhost/latihan/autocomplete-statis.html pada address bar untuk mencoba autocomplete yang kita buat.

Demo Autocomplete Input

Bagaimana, sangat mudah bukan?

Silakan download contoh autocomplete yang sudah saya buat untuk memudahkan Anda dalam membuat autocomplete, disana ada 2 versi yaitu tanpa database dan dengan database.

Download Contoh Autocomplete

Jika masih bingung dalam memahami tutorial tersebut, silakan tulis kendala yang dihadapi ke kolom komentar atau hubungi saya langsung. Selamat mencoba.

Jangan lupa simak juga Tutorial Versioning CSS Menggunakan PHP

Disqus Comments