MasRud.com ☕️
The Official Blog of M. Rudianto 👨‍💻

Tulisan  /  Kategori  /  Kontak

Membuat Autocomplete dengan PHP dan MySQLi

Dalam sebuah aplikasi pasti ada proses 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.

Tutorial 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.

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 disini
  • Download library jQuery.Autocomplete disini

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).

A. 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 kamu 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.

B. Autocomplete dengan Database

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

tabel_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.

Lanjutkan dengan 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 76 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 kamu dalam membuat autocomplete, disana ada 2 versi yaitu tanpa database dan dengan database.

Download source code

Jika masih bingung dalam memahami tutorial tersebut, silakan tulis kendala yang dihadapi ke kolom komentar.

Kategori: PHP
Diposting: 30 Desember 2017

Disqus Comments