Ajax Autocompleter dengan PHP

Asynchronous JavaScript and XML, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:

• DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
• Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.
• XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM
• JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

Ajax Auto Completer??

Tentunya sudah pernah melihat si 'embah Google' khan! google menerapkan ajax auto completer pada textbox pencariannya! misalkan ketika kita mengetikkan kata ajax pada textbox pencarian maka secara otomatis google akan menampilkan kata yang terkait dengan ajax. Nah, kata ajax tutorial, ajax control toolkit, ajax examples,dsb merupakan ajax auto completer! paham khan?! ;)

Selain berfungsi sebagai pembantu atau pelengkap kata yang akan dicari, dapat berfungsi juga untuk meminimalisir terjadi kesalahan penulisan.

Pada tutorial kali ini saya mencoba akan sharing membuat ajax autocompleter dengan menggunakan bahasa pemrograman PHP (PHP versi 5).

Skenario :

• Suatu ketika universitas 'X' ingin melakukan pencarian mahasiswanya berdasarkan nama lengkapnya! misal. ingin mencari nama 'aditya nursyahbani'. Ketika diketikkan nama tsb dan klik tombol cari hasil pencarianpun muncul mahasiswa dengan nama tsb.
• Misal universitas 'X' tersebut melakukan query pencarian dengan "SELECT x FROM y WHERE x = '$katakunci' " pada aplikasinya. Artinya kita harus mengetikan nama yang lengkap dan benar2 sesuai dengan namanya. Permasalahan: pencarian spesifik, harus mengetikkan nama dengan benar dan tepat jika tidak, pencarian tidak ditemukan.
• Misal universitas 'X' tersebut melakukan query pencarian dengan "SELECT x FROM y WHERE x LIKE '$katakunci%' " pada aplikasinya. Artinya aplikasi mencari berdasarkan kata yang mengandung atau mirip dengan kata kunci dimana '%' dapat digantikan kata atau frasa dari a-z. Permasalahan yang timbul ketika nama yang akan dicari sangat banyak (pasaran, red) misal. 30 org. Mau ga mau harus mengetikkan nama lengkapnya juga! xixixi... ditambah lagi nama org yang mau dicari panjang gilaa... =).
• Ajax Autocompleter solusinya! kita buat ajax autocompleter dengan mengambil data dari database.

Persiapan :

• Webserver (apache)
• MySQL
• PHP5. (penulis menggunakan paket XAMPP yg sudah termasuk apache,php,MySQL,dll)
• Web browser yang mendukung AJAX. (penulis menggunakan mozilla firefox)
• IDE menggunakan Macromedia Dreamweaver

Langkah-Langkahnya :

• Pertama buat databasenya, gunakan phpmyadmin. Caranya jalankan XAMPP-nya, buka web browser (Mozilla Firefox) dan ketikkan https://localhost/phpmyadmin dan create database dengan nama ajax. Kemudian pilih tab menu import dan browse file hasil dumpingan dengan nama ajax.sql yang dapat didownload pada menu download dibawah.
• Langkah selanjutnya, buat folder autocomplete pada root directory atau jika menggunakan XAMPP yang diinstal di drive C, letakkan folder tsb pada 'C:\xampp\htdocs\buat folder autocomplete disini'.
• Buat file template dengan nama Index.html, letakkan pada folder autocomplete sbb:

Spoiler Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ditya's Life - Ajax Autocomplete Test</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript">

function cari(kataKunci)

{

if(kataKunci.length == 0) {

// Sembunyikan Box jika kata kunci kosong

$('#suggestions').hide();

} else {

// jika kata kunci ada isinya, kirim isi kata kunci ke halaman proses.php dan tampilkan isinya pada box

$.post("proses.php", {kataKunci: ""+kataKunci+""}, function(data){

if(data.length >0) {

$('#suggestions').show();

$('#autoSuggestionsList').html(data);

}

});

}

}



function isiTextbox(thisValue) {

$('#kataKunci').val(thisValue); //isi textbox dengan hasil query yang dipilih

setTimeout("$('#suggestions').hide();", 200); //Sembunyikan box selama 200 milisecond

}

</script>

<style type="text/css">

body {

font-family: Helvetica;

font-size: 11px;

color: #000;

}



h3 {

margin: 0px;

padding: 0px;

}



.suggestionsBox {

position: relative;

left: 30px;

margin: 10px 0px 0px 0px;

width: 200px;

background-color: #212427;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

border: 2px solid #000;

color: #fff;

}



.suggestionList {

margin: 0px;

padding: 0px;

}



.suggestionList li {



margin: 0px 0px 3px 0px;

padding: 3px;

cursor: pointer;

}



.suggestionList li:hover {

background-color: #659CD8;

}

</style>

</head>

<body>

<div>

<form>

<div>Cari Nama Mahasiswa :<br />

<input type="text" size="30" value="" id="kataKunci" onkeyup="cari(this.value);" onblur="isiTextbox();" />

</div>

<div class="suggestionsBox" id="suggestions" style="display: none;">

<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

<div class="suggestionList" id="autoSuggestionsList">

&nbsp;

</div>

</div>

</form>

</div>

</body>

</html>

Note: jquery-1.2.1.pack.js dan upArrow.png dapat didownload pada menu download dibawah

• Buat file PHP dengan nama Proses.php, letakkan pada folder autocomplete sbb:

Spoiler Proses.php

<?php



// Implementasi PHP5 - koneksi database menggunakan MySQLi.

// mysqli('SERVER_ANDA', 'USERNAME_MYSQL ANDA', 'PASSWORD_MYSQL ANDA', 'NAMA_DATABASE');

// buat instance koneksi dan tampung pada variabel db

$db = new mysqli('localhost', 'root' ,'', 'ajax');



if(!$db)

{

// Tampilkan error jika koneksi ke db gagal.

echo 'ERROR: Gagal Koneksi ke database.';

}

else

{

// Cek apakah ada isinya variabel kata kunci(method=post)?

if(isset($_POST['kataKunci']))

{

$kataKunci = $db->real_escape_string($_POST['kataKunci']);



// strlen = fungsi untuk menghitung panjang karakter/string

// Cek apakah panjang karakter variabel kata kunci lebih besar dari 0 atau isi variabel tidak kosong?

if(strlen($kataKunci) >0)

{

// jika Ya atau variabel kata kunci ada isinya

// tampilkan nama dari tabel mahasiswa dengan kondisi nama mirip/seperti katakunci dengan batasan record 10                            dan tampung pada variabel perintah



$perintah = $db->query("SELECT nama FROM mahasiswa WHERE nama LIKE '$kataKunci%' LIMIT 10");

if($perintah)

{

// Selama ada record yg sesuai dengan perintah, tampung record sebagai object pada variabel hasil

while ($hasil = $perintah ->fetch_object())

{

// Atur Output, tampilkan hasil perintah dengan menggunakan tag list <li></li>

// jika diklik ke fungsi isiTextbox() dengan parameter hasil query



// $hasil->nama_kolom atau nama_field

echo '<li onClick="isiTextbox(\''.$hasil->nama.'\');">'.$hasil->nama.'</li>';

}

}

else

{

echo 'ERROR: Perintah Error.';

}

}

else

{

// jika kata kunci kosong

}

}

else

{

echo 'Akses script langsung dilarang!';

}

}

?>

• Finally, Testing aplikasi dengan mengetikkan URL pada web browser : http//localhost/autocomplete .
• --end of file--

Download Source Code :

• Ajax.sql
• jquery-1.2.1.pack.js
• upArrow.png

Hasil :

Spoiler hasil

• Database Ajax dan Recordnya
  
  
• Output(https://localhost/autocompleter)
  
  Dari gambar disamping terlihat jelas bahwa ketika user mengetikkan huruf 'a', maka ajax.autocompleter menampilkan 2 nama yang berawalan huruf 'a' hasil query database ajax yaitu 'Aditya Keren' dan 'Aditya Nursyahbani', dan ketika di-klik maka textbox akan terganti oleh apa yang kita pilih!