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
email	varchar(50) *
name	varchar(100)
address	text

dan tabel tersebut berisi data misalkan seperti di bawah :

email	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:

Menampilkan data denga ajax

jika tombol Load Data diklik maka akan tampil hasilnya seperti di bawah ini :

Hasil Membaca Data dengan ajax

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