Ajax adalah cara atau tehnik pembuatan web dinamis yang cepat. Kenapa dikatakan cepat, karena AJAX ini dalam mengupdate data tidak memerlukan reload satu halaman web penuh melainkan hanya pada bagian yang di update saja.
Sebagai contoh yang sering bisa kita temui adalah posting comment pada facebook. Kalau kita perhatikan ketika kita memposting komentar di facebook, maka facebook tidak me-reload satu halaman penuh facebook, tapi hanya bagian komen itu saja.
Atau contoh lainnya ketika kita akan menge-tag/menandai seseorang dalam foto kita, maka nama-nama teman otomatis akan keluar sendiri. Itu juga menggunakan tehnik ajax.
Mari kita praktek… :D
Kali ini kita akan membuat sebuah form input nama kota menggunakan tehnik ajax sehingga form lebih komunikatif.
HASIL AKHIR
Tampilan Form Default :
Tampilan Form ketika kita input data :
Keterangan : saran nama kota Bogor, Bandung di atas akan muncul sendiri ketika kita mengetik huruf b di form input yang ada. Lantas dari mana saran nama kota Bandung, Bogor itu berasal / diambil? Nama tersebut diambil dari “sumbernamakota.php” yang telah kita buat.
LOGIKA PEMBUATANNYA
- Membuat form input kota
- Membuat file “sumbernamakota.php”
KETENTUAN
- Buat folder dengan nama latihan di c:xampp/htdocs/
- Simpan hasil coding kita di folder tersebut
- Jangan lupa jalankan xampp
1. Membuat form input kota
- Buka notepad
- Ketik :
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// kode untuk IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// kode untuk IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sumbernamakota.php?b="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Ketikkan huruf depan nama kota kamu </b></p>
<form>
Kota : <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p><b>Saran : [ <font color="blue"> <span id="txtHint"></span></font> ]</b></p>
</body>
</html>
- Simpan dengan nama ajax1.html di c:xampp/htdocs/latihan
- hasilnya adalah seperti tampilan form default di atas
2. Membuat file “sumbernamakota.php”
- Buka notepad
- Ketik :
<?php
//daftar nama kota yg telah kita punya
$a[]="Aceh";
$a[]="Bandung";
$a[]="Cirebon";
$a[]="Depok";
$a[]="E (tidak ada saran)";
$a[]="F (tidak ada saran)";
$a[]="Gorontalo";
$a[]="H (tidak ada saran)";
$a[]="Irian";
$a[]="Jember";
$a[]="Kendal";
$a[]="Lunto";
$a[]="Ngawi";
$a[]="O (tidak ada saran)";
$a[]="Pati";
$a[]="Q (tidak ada saran)";
$a[]="Rembang";
$a[]="Semarang";
$a[]="Tegal";
$a[]="Ungaran";
$a[]="V (tidak ada saran)";
$a[]="W (tidak ada saran)";
$a[]="X (tidak ada saran)";
$a[]="Y (tidak ada saran)";
$a[]="Z (tidak ada saran)";
$a[]="Bogor";
$a[]="Cikampek";
$a[]="Jakarta";
$a[]="Kutai";
$a[]="Madiun";
$b=$_GET["b"];
if (strlen($b) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($b)==strtolower(substr($a[$i],0,strlen($b))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
if ($hint == "")
{
$respon="tidak ada saran";
}
else
{
$respon=$hint;
}
echo $respon;
?>
- Simpan dengan nama sumbernamakota.php di c:xampp/htdocs/latihan
Selesaiiii…
Untuk melihat hasilnya silakan buka browser, ketikkan pada addres bar :
Localhost.latihan/ajax1.html
Selamat belajar..
Salam dari cah sinus solo.. :p
Posting Komentar