Print this pageOk pada artikel ini saya akan membahas Tutorial Membuat Fitur Search dengan PHP dan Ajax , sebelumnya saya pernah membuat tutorial yang serupa, yaitu Tutorial Membuat Datalist dengan HTML5 dan CSS, lalu bedanya apa dengan tutorial ini?
Silahkan bisa dilihat atau dicoba sendiri, karena seperti biasa source codenya saya share di akhir tutorial.
Menurut saya Ajax digunakan untuk berkomunikasi dengan halaman web dan server web. Ya contohnya kolom pencarian menggunakan dengan Ajax ini.
Ok kalo gitu apa yang kita butuhkan untuk membuat Fitur ini
Pertama, Buat script HTML untuk membuat formnya, beri saja nama index.php
<html>
<head>
<style>
span{
color: green;
}
</style>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
else
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "php_ajax.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Search your favourite tutorials:</b></p>
<form>
<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Entered Course name: <span id="txtHint"></span></p>
</body>
</html>
Script di atas membuka file dengan nama yang disebut sebagai php_ajax.php dengan menggunakan dengan metode GET, sehingga kamu perlu membuat sebuah file dengan nama php_ajax.php di direktori yang sama dan out put akan melekat pada txtHint.
Kedua, buat file berisi script php dan ajax, seperti keterengan di atas, filenya harus diberi nama php_ajax.php
<?php
// Array with names
$a[] = "Android";
$a[] = "Arena";
$a[] = "B programming language";
$a[] = "C programming language";
$a[] = "D programming language";
$a[] = "euphoria";
$a[] = "F#";
$a[] = "GWT";
$a[] = "HTML5";
$a[] = "ibatis";
$a[] = "Java";
$a[] = "K programming language";
$a[] = "Lisp";
$a[] = "Microsoft technologies";
$a[] = "Networking";
$a[] = "Open Source";
$a[] = "Prototype";
$a[] = "QC";
$a[] = "Restful web services";
$a[] = "Scrum";
$a[] = "Testing";
$a[] = "UML";
$a[] = "VB Script";
$a[] = "Web Technologies";
$a[] = "Xerox Technology";
$a[] = "YQL";
$a[] = "ZOPL";
$q = $_REQUEST["q"];
$hint = "";
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
}
else
{
$hint .= ", $name";
}
}
}
}
echo $hint === "" ? "Please enter a valid course name" : $hint;
?>
Script di atas berisi array yang sudah diberi nilai, jadi saat kita memasukan huruf pada form, maka akan muncul nilai dari array tersebut
gambar di atas adalah script yang sudah saya jalankan di localhost, pada Form saat saya memasukan huruf a , maka akan terjadi auto complete Android dan Arena karena sesuai dengan nilai Array dari Script di sebelumnya.
Bagaimana mudah dan menarik kan? Fitur simple ini sebenarnya sangat penting jika digunakan pada aplikasi seperti inventori barang atau data karyawan.
Ok sekian tutorial ini, semoga bermanfaat
0 comments:
Post a Comment