Menampilkan Data ke Tabel dengan PHP dan AJAX

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Kemampuan AJAX untuk membantu kita dalam membangun aplikasi website memang tidak dapat kita pungkiri. Seperti yang banyak dijelaskan di website dan blog-blog tentang pemrograman website, AJAX memungkinkan komunikan dua arah antara client side scripting dengan Server Side scripting. Selain itu, Implementasinya didunia web programming saat ini bisa dikatakan menjadi sebuah kebutuhan tersendiri.

Berikut saya sharing tentang cara menampilkan data dari database kedalam sebuah tabel. Mungkin ini terlihat biasa tapi yang membuatnya berbeda adalah data akan ditampilkan tanpa refresh halaman karena menggunakan teknologi AJAX. Hal ini bisa menjadi solusi untuk masalah koneksi internet di indonesia yang lemot. haha

1. Saya anggap anda sudah memiliki beberapa data dalam tabel database anda untuk ditampilkan dihalaman website nantinya. Lakukan koneksi ke database dengan script berikut. simpan dengan nama koneksi.php sesuaikan dengan milik anda
<?php
$con = mysql_connect('localhost', 'root', 'root');
if (!$con){
  die('Koneksi GAGAL : ' . mysql_error());
} else {
mysql_select_db("biodata");
}
?>
2. Berikutnya adalah membuat sebuah file php yang nantinya akan bertugas untuk menampilkan data yang ada ditabel database. Contoh script yang saya gunakan adalah sebagai berikut. Jangan Lupa untuk menyisipkan file koneksi anda
<?php include "koneksi.php"; ?>
<html>
<head>
 <title>Menampilkan Data kedalam Tabel dengan PHP dan AJAX</title>
<script>
function tampilData(data) {
if (data==""){
  document.getElementById("tampildisini").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest){
  xmlhttp=new XMLHttpRequest();
  } else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
    document.getElementById("tampildisini").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ambildata.php?kirim="+data,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="tampilData(this.value)">
<option value="">-- Pilih Data --</option>
<option value="semua">Semua Data</option>
<?php
$getdata=mysql_query("select * from data");
  if($getdata){
    while($result=mysql_fetch_array($getdata)){
      ?>
      <option value="<?php echo $result['id'];?>"><?php echo $result['nama'];?></option>
      <?php 
    }
  }
?>
</select>
</form>
<br>
<div id="tampildisini"></div>
</body>
</html>
3. Langkah Selanjutnya adalah membuat script yang akan menghandel aksi pilihan data yang akan ditampilkan. Contoh script yang saya gunakan adalah sebagai berikut. Simpan dengan nama ambildata.php
<?php 
include "koneksi.php";

$ambil=$_GET["kirim"];

if ($ambil=='semua'){
 $sql="SELECT * FROM data";
 } else {
 $sql="SELECT * FROM data WHERE id = '".$ambil."'"; 
 }
 
$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Alamat</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['nama'] . "</td>";
  echo "<td>" . $row['jenis_kelamin'] . "</td>";
  echo "<td>" . $row['agama'] . "</td>";
  echo "<td>" . $row['alamat'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

Adapun Hasilnya dapat anda lihat pada gambar dibawah ini. Cobalah untuk memilih data yang akan ditampilkan berdasarkan pilihan yang ada dicombobox saya berani jamin halamannya tidak akan reload/refresh. haha

Menampilkan Data ke Tabel dengan PHP dan Ajax
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.