Tutorial Ajax Part 3 - Working with PHP and Database
Monday, July 7, 2008 6:07 | 684 views
Image via WikipediaTutorial Ajax ini melanjutkan tutorial ajax sebelumnya yang membahas tentang pengenalan Ajax dan penggunaan Ajax untuk membaca file TXT. Kali ini akan dibahas penggunaan Ajax untuk berkomunikasi dengan server. Intinya Ajax akan digunakan untuk meretrieve data dari database.
Sebelumnya saya akan menjelaskan bagaimana Ajax berkomunikasi dengan server. Ajax berkomunikasi dengan server dengan mengirimkan request ke suatu URL, dimana di url tersebut terdpat file server site scripting(PHP, ASP, dll) yang akan memproses request. Jika diperlukan melakukan query ke database maka file ini yang akaan melakukannyaa. Data yang diterima dari server berbentuk XML.Untuk lebih jelaskan silahkan lihat gambar berikut ini :
Berikut ini source code untuk sisi clientnya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Contoh Aplikasi Ajax </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Mara Mei" />
<meta name="keywords" content="www.ismartshare.com" />
<meta name="description" content="" />
<script type="text/javascript">
<!--
function getXmlHttpRequestObject() {
if (window.<a class="zem_slink" title="XMLHttpRequest" rel="wikipedia" href="http://en.wikipedia.org/wiki/XMLHttpRequest">XMLHttpRequest</a>) { //Jika Firefox, Opera 8.0+, Safari
return new XMLHttpRequest();
} else if(window.ActiveXObject) { //Jika IE
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.");
}
}
var request = getXmlHttpRequestObject();
function Baca() //Reading Data Function
{
if (request.readyState == 4 || request.readyState == 0)
{
request.open("POST", "index2.php", true); //Baca data.txt
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.onreadystatechange = Tampil; //Jalnkan fungsi Tampil()
var param = 'idku='+document.getElementById("idku2").value; //Parameter yang dikirimkan
request.send(param);
}
}
function Tampil() { //Get Slide Function
if (request.readyState == 4) {
var xmlDoc = request.responseXML; //Terima respon sebagai XML
var tag_nama = xmlDoc.getElementsByTagName("nama"); //indentifisikasi node nama
var get_nama = tag_nama[0].firstChild.nodeValue; //Mendapatkan nilai dari node nama
var tag_url = xmlDoc.getElementsByTagName("url");
var get_url = tag_url[0].firstChild.nodeValue;
var namaweb = document.getElementById('namaweb');//Identifikasi element namaweb, simpan dengan nama namaweb
var urlweb = document.getElementById('urlweb');//Identifikasi element urlweb, simpan dengan nama urlweb
namaweb.innerHTML = get_nama; //Tulis nama web
urlweb.innerHTML = get_url; //Tulis url web
request.send(null);
}
}
//-->
</script>
</head>
<body>
<input type="text" name="idku2" id="idku2" value="1" /> <!--id-->
<input type="submit" value="dispaly" onclick='Baca()' /> <!--panggil fungsi baca-->
<div id="namaweb"></div> <!--tempat untuk menulis nama web-->
<div id="urlweb"></div> <!--tempat untuk menulis urlweb-->
</body>
</html>
Berikut ini source code untuk sisi servernya :
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=utf-8");
$link = mysql_connect ("localhost", "admin", "admin");
$q=mysql_select_db("ajax", $link) or die (mysql_error());
$query=mysql_query("select * from webku where web_id='$_POST[idku]'", $link) or die (mysql_error());
echo '<?xml version="1.0" ?><web>';
while ($row=mysql_fetch_array($query))
{
echo "<webku>";
echo "<nama> $row[web_name] </nama>";
echo "<url> $row[web_url] </url>";
echo "</webku>";
}
echo '</web>';
?>
Diserver PHP melakukan query ke database kemudian hasilnya di kembalikan dalam bentuk XML. XML inilah yang nanti akan dibaca di client.
Jika Anda kurang mengerti tentang XML, anda bisa mempelajarinya di sini.
- Tutorial Ajax Part 2 (Working With File) 966 views
- Tutorial Ajax Part 1 (Pengenalan Ajax) 1101 views
- Tutorial Ajax Part 4 - Working With Web Services 192 views
- Akhirnya Mimpi Buruk Blog Ini Berakhir 442 views
- Awardspace - Hosting gratis mendukung PHP & MYSQL 6096 views
Tutorial Ajax Part 4 - Working With Web Services says:
11 September 2008 at 6:00 am
[...] yang membahas tentang pengenalan Ajax dan penggunaan Ajax untuk membaca file TXT serta penggunaan Ajax, PHP, dan Database. Kali ini akan dibahas penggunaan Ajax untuk berkomunikasi dengan server. Intinya Ajax akan [...]