stmikbg-dot-com

Informasi Seputar IT

Archive for the ‘Java Programing’


belajar ajax

Kali ini kita akan coba belajar ajax dengan jalan menggabungkan php dengan ajax. Skenario yang akan dilakukan pada sesi belajar ajax saat ini seperti berikut, kita akan menampilkan data detail dari nama user yang dipilih seperti dibawah ini

Data yang akan ditampilkan ini berupa

Langkah yang dilakukan untuk membuat php+ajax ini antara lain :

  • Buat script index.html dan isikan kode dibawah ini
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>
</body>
</html>

Penjelasan : Form html diatas berisi drop down box yang diberi nama “users” dan “id” dari database sebagai nilainya. Paragrap dengan tag <div> dengan id “txtHint” digunakan untuk menampung hasil record retrieved dari server. Ketika user memilih data pada box list fungsi yang bernama “ShowUser()” akan dieksekusi, eksekusi ini dipicu oleh event “onchange”. Jadi jika user akan memberi nilai baru pada box list fungsi ShowUser()” akan dieksekusi kembali

  • Setelah anda membuat kode html diatas, buat file java script dengan nama “selecteduser.js” dan isikan kode dibawah ini
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
  • Setelah anda membuat file “selecteduser.js” sekarang anda buat file “getuser.php” dan isikan kode php dibawah ini
<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";

echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

Untuk mendownload contoh file ini anda bisa mendownload file contoh php+ajax

July 9th, 2008 in Java Programing, Web Programing |