Pada pengembangan aplikasi web, seringkali kita memerlukan fitur untuk menampilkan data dari database dalam bentuk tabel secara dinamis. Salah satu pendekatan yang umum digunakan adalah dengan menggunakan AJAX untuk mengambil data dari server tanpa harus me-refresh halaman. Artikel ini akan membahas langkah-langkah untuk menampilkan data dalam tabel menggunakan AJAX di PHP.
1. Membuat Skrip PHP untuk Mengambil Data dari Database
Langkah pertama adalah membuat skrip PHP yang akan digunakan untuk mengambil data dari database. Skrip ini akan melakukan koneksi ke database dan mengeksekusi query SQL untuk mengambil data yang diperlukan.
<?php
$conn = mysqli_connect("host", "username", "password", "database");
$query = "SELECT * FROM tabel_nama";
$result = mysqli_query($conn, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
mysqli_close($conn);
?>
2. Membuat Halaman HTML untuk Menampilkan Data dalam Tabel
Selanjutnya, kita perlu membuat halaman HTML yang akan menampilkan data dalam tabel. Halaman ini akan menggunakan AJAX untuk mengambil data dari skrip PHP yang telah kita buat sebelumnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Tabel</title>
</head>
<body>
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'get_data.php', // Skrip PHP untuk mengambil data
type: 'GET',
dataType: 'json',
success: function(data){
var html = '';
$.each(data, function(index, value){
html += '<tr>';
html += '<td>' + value.id + '</td>';
html += '<td>' + value.nama + '</td>';
html += '<td>' + value.usia + '</td>';
html += '</tr>';
});
$('#data').html(html);
}
});
});
</script>
</body>
</html>
Dalam halaman HTML di atas, kita menggunakan jQuery untuk melakukan AJAX request ke skrip PHP get_data.php. Setelah mendapatkan respons dari server, kita menggunakan JavaScript untuk menampilkan data dalam tabel dengan memanipulasi elemen HTML.
Dengan langkah-langkah di atas, kita dapat menampilkan data dalam tabel menggunakan AJAX di PHP dengan mudah dan efisien. Hal ini memungkinkan pengembang untuk membuat aplikasi web yang lebih responsif dan interaktif bagi pengguna.
