Cara Membuat Autocomplete di PHP dan MySQL

Ditulis Oleh:

Cara membuat autocomplete di PHP dan MySQL – Aplikasi yang baik mempunyai fitur untuk membantu pengguna dalam menggunakan aplikasi tersebut. Ketika pengguna menginput data pada suatu inputan, maka sebaiknya aplikasi kita dapat membantu dengan memberikan saran berdasarkan kata kunci yang pengguna tersebut inputkan. Kita bisa melakukan hal tersebut dengan membuat fitur autocompelte.

Dengan membuat fitur auto complete user experience pengguna aplikasi akan meningkat. Pengguna hanya tinggal mengetik beberapa kata maka sistem langsung memberikan saran list data berdasarkan kata kunci yang diketik.

Jika kalian perhatikan mesin pencari seperti Google maupun Youtube menggunakan fitur tersebut.

Fitur autocomplete di google dan youtube

Bagaimana cara membuat autocomplete seperti google dan youtube tersebut ? Pada tutorial kali ini saya akan membagikan kepada teman-teman semua bagaimana membuat autocomplete pada form isian dan data saran akan diambil melalui database mysql dan ketika di klik tombol cari maka sistem akan menampilkan data berdasarkan kata kunci yang dicari tersebut.

Untuk membuat fitur tersebut kita memerlukan library JQuery dan JQuery UI. Saya menggunakan metode CDN (content delivery network). Jadi saya ambil library-nya langsung dari internet tanpa perlu mendownload di local driver saya.

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.12.1/jquery-ui.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Jika kalian tidak ingin menggunakan metode CDN silahkan langsung ke situs resmi JQuery dan JQuery UI serta Bootstrap untuk mendownloadnya.

Versi yang saya gunakan :

  • JQuery-1.10.2
  • JQuery UI Versi 1.12.1
  • JQuery UI CSS versi 1.12.1
  • Bootstrap versi ke 4

Agar supaya fitur autocomplete yang kalian buat sama seperti yang saya bahas, sebaiknya gunakan versi yang sama, karena perbedaan versi bisa jadi akan berbeda.

Konfigurasi Database

Pada tahap ini kita membuat database dengan nama ‘akademik‘.

create database akademik;

Buat tabel dengan nama mahasiswa pada database akademik.

create table mahasiswa (
    nik char(10) not null primary key,
    nama varchar(50) not null,
    jk char(1),
    tanggal_lhr date,
    jurusan char(2),
    umur int
    );

Selanjutnya masukan beberapa contoh data mahasiswa kedalam tabel tersebut.

INSERT INTO mahasiswa
VALUES ('135410156','Ahmad Riko','1','1995-02-23','TI',22),
('135610157','Dahlan Iskan','1','1998-03-26','SI',20),
('135410189','Wawan Setiawan','1','1993-02-13','TI',23),
('135310156','Safitri Ayu','2','1995-09-01','TK',22),
('135310150','Rian Hidayat','1','1997-08-05','TK',20),
('135510920','Dani Hermawan','1','1996-05-05','SI',23),
('135518322','Nita Daniyatun','2','1994-09-05','TI',23),
('135518900','Mili Wilian','2','1995-10-08','SI',22),
('135510190','Marshel Saraun','1','1993-10-23','MI',23),
('135510191','Nacha Saraun','2','1995-01-13','MI',20),
('135558944','Bayu Mandalika','1','1997-01-15','SI',19),
('158984545','Juan Burnama','1','1993-01-20','SI',24),
('158549583','Candra Sidauruk','1','1994-10-22','TK',23),
('136349343','Kory Ubi','2','1992-10-29','MI',25),
('147343998','Chika Lestari','2','1996-11-12','MI',21);

Data yang diinputkan diatas hanyalah contoh saja, kalian bisa kurang atau bahkan lebih dari data-data diatas.

Buat File Koneksi Database

Buat sebuah file dengan nama koneksi.php.

<?php
$host="localhost";
$user="root";
$password="";
$db="akademik";

$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
	  die("Koneksi gagal:".mysqli_connect_error());
}
?>

Harap diperhatikan pada fungsi mysqli_connect untuk setiap parameternya, karena kita membuat pad web server local maka kita gunakan localhost, user database saya pakai yang default yaitu root dan tidak menggunakan pasword sehingga pada variabel password saya kosongkan. Terakhir nama database pada variabel db.

Silahkan kalian sesuaikan dengan konfigurasi database kalian masing-masing.

Buat Form untuk Autocomplete

Pada tahap ini kita buat sebuah file PHP dengan nama index.php fungsi file ini adalah untuk membuat form input autocomplete-nya.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container">
    <br>
    <h4>Autocomplete dengan PHP dan MYSQL</h4>
        <script>
            $(function() {
                $("#nama").autocomplete({
                    source: 'autocomplete.php'
                });
            });
        </script>
        <div class="form-group">
            <label for="sel1">Nama Mahasiswa:</label>
            <input type="text" id="nama" name="nama" value="" class="form-control"  required/>
        </div>
    <div class="form-group">
        <input type="submit" class="btn btn-info" value="Cari">
    </div>
</div>
</body>
</html>

Penjelasan:

Saya akan sediikit menjelaskan beberapa bagian penting pada program diatas.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Perhatikan pada bagian <head> kita include beberapa library seperti CSS Bootstrap, JQuery, JQuery UI dan CSS Jquery UI. Semua library tersebut kita gunakan melalui CDN. Karena menggunakan CDN maka pastikan komputer kalian ada koneksi internetnya ya 😀

<script>
    $(function() {
        $("#nama").autocomplete({
            source: 'autocomplete.php'
         });
    });
</script>

Pada sintak diatas merupakan bagian sintak javascript dengan menggunakan fungsi autocomplete dari JQuery pada selector ID nama. Artinya bahwa fungsi autocomplete akan dijalankan pada elemen dengan ID=’nama’ dalam hal ini adalah tag input nama.

<input type="text" id="nama" name="nama" value="" class="form-control"  required/>

Data yang diterima melalui sumber (source) dari file autocomplete.php yang akan kita buat selanjutnya.

Buat Sumber Data Autocomplete

Selanjutnya kita membuat file PHP kembali dengan nama autocomplete.php file ini berfungsi sebagai sumber data yang diambil dari database. dan akan ditampilkan pada form inputan saat pengguna mengetik kata kunci tertentu.

<?php
include "koneksi.php"; //Include file koneksi
$searchTerm = $_GET['term']; // Menerima kiriman data dari inputan pengguna

$sql="SELECT * FROM mahasiswa WHERE nama LIKE '%".$searchTerm."%' ORDER BY nama ASC"; // query sql untuk menampilkan data mahasiswa dengan operator LIKE

$hasil=mysqli_query($kon,$sql); //Query dieksekusi

//Disajikan dengan menggunakan perulangan
while ($row = mysqli_fetch_array($hasil)) {
    $data[] = $row['nama'];
}
//Nilainya disimpan dalam bentuk json
echo json_encode($data);
?>

Penjelasan:

Pada sintak diatas berfungsi sebagai sumber data dari fitur autocomplete-nya dengan menerima nilai inputan pengguna yang dikirim melalaui variabel global $_GET[‘term’]. Kemudian dilakukan query pada tabel mahasiswa berdasarkan nilai pada variabel tersebut. Dengan menggunakan operator LIKE yang berfungsi untuk menfilter data berdasarkan pola pada field nama.

Baca : Penggunaan Operator LIKE di MySQL

while ($row = mysqli_fetch_array($hasil)) {
    $data[] = $row['nama'];
}

Selanjutnya hasil query akan dipecah dan disimpan menggunakan array. disini data yang diambil adalah kolom/field nama pada tabel mahasiswa.

echo json_encode($data);

Terakhir data yang telah disimpan dalam bentuk array tersebut akan diubah kedalam bentuk JSON.

Uji Coba

Sekarang kita lakukan uji coba dengan menjalankan aplikasi autocomplete dengan php tersebut melalui browser.

Kalian bisa lihat hasilnya seperti pada gambar dibawah. Ketika saya mengetik kata ‘an’ maka sistem akan menampilkan nama mahasiswa yang mengandung kata tersebut.

Kalo kalian lihat fungsi tombol cari belum berfungsi. Pada Tutorial selanjutnya saya akan membahas seri lanjutan autocomplete untuk menampilkan data berdasarkan hasil autocomplete pada tutorial ini. Kita akan belajar bagaimna mengimplementasikan fitur ini, Jadi pantau terus situs ini ya 😀 . Sampai jumpa pada artikel berikutnya.