Menampilkan Data Dengan Ajax
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". Struktur tabel tersebut seperti di bawah ini :
| Nama Field | Tipe Data |
| varchar(50) * | |
| name | varchar(100) |
| address | text |
dan tabel tersebut berisi data misalkan seperti di bawah :
| name | address | |
|---|---|---|
| elyxc@yahoo.com | Ellyx | Legian Kuta |
| ellyxking@yahoo.com | Christian | Jalan Padma |
| info@dewata-production | Dewata production | Jalan Padma Timur |
untuk menampilkan data tersebut menggunakan AJAX ikuti langkah - langkah berikut :
Langkah I
Buat 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 :
<?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 II
Buatlah file baru di dalam folder "ajax" dan beri nama ajax.js. Kemudian ketik script di bawah pada file ajax.js :
// 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);
}
}
Langkah III
Buatlah sebuah file di dalam folder "ajax" dan beri nama "index.php". Kemudian ketik script di bawah pada file "index.php" :
<!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>
Langkah IV
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:
jika tombol Load Data diklik maka akan tampil hasilnya seperti di bawah ini :
Sampai di sini adan sudah berhasil menampilkan data menggunakan AJAX. Keuntungan yang bisa diperoleh dengan menggunakan AJAX adalah untuk menghindari reload halaman yang sama berulang-ulang. Pada tutorial berikutnya saya akan menjelaskan cara untuk mengedit data yang ada dalam tabel tanpa melakukan reload halaman dan tentunya menggunakan ajax pula. Tutorial berikutnya merupakan kelanjutan dari tutorial ini.
Sebelum saya menyudahi tutorial ini tak lupa saya memohon maaf jika ada sesuatu yang salah. Jika ada yang tidak anda mengerti, silahkan bertanya di Sangkep