Membuat script AUTO SUGGEST dengan php mysql dan jQuery ajax

Salam kreatif, selamat berjumpa kembali dengan tutorial Media Kreatif. Masih seputar pemrograman PHP, MySQL dan jQuery, kali ini kita akan membahas sebuah aplikasi AUTO SUGGEST, yang seringkali kita temukan di pada banyak website pada saat proses pengisian form. Contoh yang mungkin kita lihat adalah pada saat kita akan mengisi pada form pencarian Google, maka Google akan menjalankan auto suggest sehingga memudahkan pengguna untuk mengira - ngira apa yang akan mereka tulis disana.

 

Seperti biasa, pada contoh kali ini kami akan membahas auto suggest dengan konsep yang sangat sederhana, yaitu ( Bagaimana prinsip kerja Auto Suggest ? )

Secara garis besar, Prinsip auto suggest dijalankan ketika ada aktivitas user pada form yang bersangkutan. Aktivitas yang dimaksud adalah user mengetikkan sesuatu pada sebuah form, kemudian jQuery AJAX akan membaca text yang sudah diketikkan user pada form tersebut, kemudian jQuery AJAX akan mengirimkan text yang sudah didapatkan pada sebuah script PHP dimana script PHP ini nantinya akan melakukan pencarian / QUERY ke database MySQL. Selanjutnya PHP akan memberikan respon hasil pencariannya yang kemudian respon tersebut akan ditampilkan oleh jQuery AJAX pada sebuah TAG DIV sebagai AUTO SUGGEST


Mengapa AUTO SUGGEST harus menggunakan Javascript, apakah auto suggest tidak cukup hanya dengan HTML,PHP dan MySQL? Jawabannya jelas tidak cukup, karena AUTO SUGGEST memerlukan sebuah proses tanpa harus melakukan Refresh browser. Karenanya kita butuh Javascript dalam hal ini jQuery untuk kemudian ditanamkan pada event - event seperti onclick, onkeypress, onmouseover dan lain - lain.

Dari konsep dasar diatas, mudah - mudahan sudah dapat dipahami bagaimana prinsip dasar sebuah AUTO SUGGEST, selanjutnya mari kita buat contoh scriptnya satu persatu

Karena kuta menggunakan jQuery AJAX, maka kita juga harus memasukkan jQuery pada script HTML seperti terlihat pada script index.php dibawah ini. Pada contoh kali ini, kami menggunakan jquery-1.7.2.min.js, versi yang tersedia sekarang mungkin sudah lebih tinggi dari yang kami gunakan, dan hal tersebut tidak akan menjadi masalah dalam menjalankan contoh script kita

1. Membuat Form utama untuk menjalankan AUTO SUGGEST » index.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Script Auto Suggest Sederhana dengan jQuery - Media Kreatif</title>
<style>
fieldset{margin-bottom: 1em;width:300px;}
input{display: block;margin-bottom: .25em;}
#suggest{position:absolute;z-index:5;border-left:silver 1px solid;padding:0 0 0 10px;}
span.pilihan{display:block;cursor:pointer;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="prmajax.js"></script>
</head>
<body>
<form>
<fieldset>
<table>
	<tr>
		<td>Kota Kelahiran</td>
		<td><input id="src" type="text" onkeypress="suggest(this.value);" placeholder="Tulis nama kota"><div id="suggest"></div></td>
	</tr>
</table>
</fieldset>
</form>

</body>
</html>

Form diatas merupakan form HTML biasa, point utama yang harus kita perhatikan paa script diatas adalah :

  • Kita harus memanggil script jQuery dan Javascript function untuk auto suggest seperti terlihat pada script index.php baris ke 12 dan 13
  • Form Kota Kelahiran yang mempunya event onkeypress, yang kemudian memanggil fungsi suggest pada script prmajax
    <input id="src" type="text" onkeypress="suggest(this.value);" placeholder="Tulis nama kota">
  • TAG DIV dengan id suggest yang nantinya akan mencul sebagai media AUTO SUGGEST
    <div id="suggest"></div>


2. Javascript function dengan jQuery AJAX » prmajax.js

//Fungsi untuk autosuggest
function suggest(src)
{
	var page    = 'suggest.php';
	if(src.length>=2){
		var loading = '<p align="center">Loading ...</p>';
		showStuff('suggest');
		$('#suggest').html(loading);
		$.ajax({
			url: page,
			data : 'src='+src,
			type: "post", 
			dataType: "html",
			timeout: 10000,
			success: function(response){
				$('#suggest').html(response);
			}
		});
	}
}

//Fungsi untuk memilih kota dan memasukkannya pada input text
function pilih_kota(kota)
{
	$('#src').val(kota);
}

//menyembunyikan form
function hideStuff(id) {
	document.getElementById(id).style.display = 'none';
}

Pada script diatas terdapat beberapa function yang nantinya akan digunakan dalam proses autosuggest. Antara lain :

  • Function suggest » merupakan function yang dipanggil oleh form Kota Kelahiran, function ini selanjutnya akan mengirimkan text pada script PHP, selanjutnya respon dari script suggest.php akan dimasukkan pada TAG DIV dengan id suggest pada script index.php. Sehingga TAG DIV akan muncul dan menampilkan daftar kota yang sesuai dengan kata yang ditulis oleh user. Function ini akan mengirinkan text yang dituliskan oleh user secara POST pada script suggest.php
  • Function pilih_kota » merupakan function yang akan memasukkan nama kota yang di click oleh user pada form kelola kota.
  • Function hideStuff » merupakan function yang digunakan untuk menyembunyikan TAG DIV AUTO SUGGEST pada saat salah satu nama kota di click oleh user

3. Membuat script PHP untuk melakukan pencarian ke Database MySQL » suggest.php

<?php
$con = mysql_connect('localhost','root','kutukupret');
$db  = mysql_select_db('tutorial',$con);

$src = addslashes($_POST['src']);
$query = mysql_query('select * from kota where Kota like "'.$src.'td_persen" ');
while($data=mysql_fetch_array($query)){
	echo '<span class="pilihan" onclick="pilih_kota(\''.$data['Kota'].'\');hideStuff(\'suggest\');">'.$data['Kota'].'</span>';
}
?>

Script diatas merupakan script PHP biasa yang akan menjalankan Query pencarian nama kota yang mirip dengan yang ditulisakan oleh user pada form Kota Kelahiran. Script ini akan menerima data POST yang dikirimkan oleh function suggest yang terdapat pada script prmajax.js dan selanjutnya menjalankan query pencarian. Data hasil pencarian selanjutnya akan ditampilkan dalam bentuk pilihan dimana user dapat memilih data mana yang dianggap sesuai dengan Kota Kelahirannya. Masing - masing pilihan akan memanggil function pilih_kota dan function hideStuff yang ditanamkan pada event onclick, sehingga ketika user click pada salah satu nama kota, maka function pilih_kota dan function hideStuff tersebut akan dijalankan oleh browser

Pada contoh script diatas, kami juga sertakan contoh script yang sudah kami buat beserta struktur databasenya, silahkan Download contoh script AUTO SUGGEST yang sudah kami buat pada link download di bagian bawah.

Sekian dulu tutorial auto suggest kali ini, semoga uraian penjelasan script diatas dapat dipahami oleh pembaca Media Kreatif.

Salam Kreatif

Download dan pelajari script diatas pada link download dibawah ini:

Download script AUTO SUGGEST


Komentar pembaca

Pen AlQuranizin share gan untuk dibagikan, makasih atas informasinya, sangat bermanfaat artikel yang bagus dan bermanfaat gan okelah kalau begitu,posting pada :2014-12-05 11:23:26
atiqterima kasih atas informasinya. sangat bermanfaat, terutama untuk para pemula.posting pada :2015-01-11 20:56:19
Rahmatullahmantap ganposting pada :2017-10-04 10:47:38
Rahmatullahmantap ganposting pada :2017-10-04 10:47:41
         
     
         
 
         
   
         
   
 

Tulis komentar