DANNY:
Pada tutorials ini akan dijelaskan cara untuk menampilkan data sebuah tabel dari database MySql menggunakan AJAX dan PHP.
Misalkan anda memiliki seebuah tabel dengan nama "customer_tb" dalam sebuah database dengan nama "customer_db".
Langkah IBuat sebuah folder baru dalam folder htdocs anda dan beri nama "ajax". Kemudian buat sebuah file di dalam folder "ajax" dengan nama get_data.php, dan ketik script di bawah pada file get_data.php :
Quote
Code:
<?php
//file get_data.php
//-- melakukan koneksi ke database --\\
$conn=mysql_connect("localhost", "root" ,"root"); // dbhost, dbuser, dbpsw
mysql_select_db("customer_db");
//--- membaca data ----\\
$sql="select * from customer_tb";
$hs=mysql_query($sql);
echo '<div style=" background-color:#eeeeee;"><table width="100%" border="0" cellpadding="0">
<tr>
<td bgcolor="#0099CC">email</td>
<td bgcolor="#0099CC">name</td>
<td bgcolor="#0099CC">address</td>
<td bgcolor="#0099CC">Action</td>
</tr>';
while($rs=mysql_fetch_array($hs)){
echo'<tr>
<td bgcolor="white">'.$rs['email'].'</td>
<td bgcolor="white">'.$rs['name'].'</td>
<td bgcolor="white">'.$rs['address'].'</td>
<td bgcolor="white"><button>Edit</button></td>
</tr>';
}
echo'</table></div>';
?>
Saya yakin jika anda sudah memilki dasar PHP anda pasti mengerti script di atas, jadi saya tidak akan menjelakannya.
Langkah IIBuatlah file baru di dalam folder "ajax" dan beri nama ajax.js. Kemudian ketik script di bawah pada file ajax.js :
Quote
Code:
// file ajax.js
var recReq = getXmlHttpRequestObject();
var _documentid='content';
//-- membentuk instant XMLHttpRequest ---\\
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');
}
}
function LoadData(){
document.getElementById(_documentid).innerHTML = 'Loading.... Please wait';
if (recReq.readyState == 4 || recReq.readyState == 0) {
recReq.open("GET", 'get_data.php', true);
recReq.onreadystatechange = function() {
if (recReq.readyState == 4 && recReq.status == 200) {
document.getElementById(_documentid).innerHTML = recReq.responseText;
}
}
recReq.send(null);
}
}
Buatlah sebuah file di dalam folder "ajax" dan beri nama "index.php". Kemudian ketik script di bawah pada file "index.php" :
Quote
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Data Customer</title>
</head>
<body>
<script type="text/javascript" src="ajax.js"></script>
<div>
<button onclick="LoadData(); return false;">Load Data</button>
</div>
<div id="content" style="border:1px solid black; width:95%; margin:0 auto;"> Tekan tombol load data untuk menampilkan data </div>
</body>
</html>
Buka browser anda dan browsing ke "
http://localhost/ajax/", ingat anda harus mengenablekan javascript pada browser anda. Jika tidak terjadi kesalahan maka hasilnya akan tampil seperti dibawah ini:
sumber