Cara menampilkan data dalam tabel di PHP dengan Ajax

Bagaimana cara menampilkan data dengan Ajax di PHP? Dalam pengembangan aplikasi web dinamis, sering kali kita ingin menampilkan data dari database secara otomatis tanpa harus me-reload halaman. Salah satu solusi yang paling umum dan efisien adalah menggunakan AJAX bersama PHP. Namun, perlu diingat bahwa jika tidak dioptimalkan, proses ini bisa membebani server, terutama jika dilakukan dalam frekuensi tinggi.

Artikel ini akan membahas:

• Cara menampilkan data dari database dengan AJAX dan PHP.
• Bagaimana menghindari beban berlebih pada server.
• Contoh kode yang sudah dioptimasi menggunakan caching dan pengaturan interval.

1. Buat File PHP untuk Mengambil Data dari Database

File ini akan menangani koneksi database dan mengeluarkan data dalam format JSON:

<?php
$conn = mysqli_connect("localhost", "username", "password", "nama_database");

$query = "SELECT * FROM tabel_nama";
$result = mysqli_query($conn, $query);

$data = [];

while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

echo json_encode($data);
mysqli_close($conn);
?>

💡 Tips:
Pastikan query SQL Anda efisien. Gunakan LIMIT jika tidak perlu mengambil semua data.

2. Buat Tabel HTML untuk Menampilkan Data

<table id="dataTable" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
  </thead>
  <tbody id="data">
    <!-- Data akan dimuat otomatis melalui AJAX -->
  </tbody>
</table>

3. Tambahkan JavaScript dengan AJAX dan Caching

Berikut adalah skrip JavaScript yang mengatur pemanggilan data secara berkala dengan cache untuk mengurangi beban server:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var cache = null;
  var cacheExpire = 0;
  var cacheDuration = 300000; // 5 menit dalam milidetik

  function loadData() {
    if (cache !== null && Date.now() < cacheExpire) {
      updateTable(cache);
    } else {
      $.ajax({
        url: "ambil_data.php",
        type: "GET",
        dataType: "json",
        success: function(data) {
          cache = data;
          cacheExpire = Date.now() + cacheDuration;
          updateTable(data);
        },
        error: function() {
          console.error("Gagal mengambil data dari server.");
        }
      });
    }
  }

  function updateTable(data) {
    var html = "";
    for (var i = 0; i < data.length; i++) {
      html += "<tr>";
      html += "<td>" + data[i].id + "</td>";
      html += "<td>" + data[i].nama + "</td>";
      html += "<td>" + data[i].usia + "</td>";
      html += "</tr>";
    }
    $("#data").html(html);
  }

  $(document).ready(function() {
    loadData(); // Panggil saat pertama kali halaman dimuat
    setInterval(loadData, 30000); // Panggil ulang setiap 30 detik
  });
</script>

4. Apakah Metode Ini Membebani Server?

Jawabannya: bisa iya, bisa tidak. Berikut penjelasannya:

Potensi beban tinggi jika:

• Query ke database besar dan tidak dioptimasi.
• Interval pembaruan terlalu sering (misalnya setiap 1–2 detik).
• Tidak ada caching.

Cara menghindarinya:

• Gunakan interval yang wajar, seperti 30 detik atau 1 menit.
• Tambahkan cache sisi klien agar tidak selalu mengambil data dari server.
• Gunakan filter atau pencarian spesifik jika data sangat besar (misalnya hanya menampilkan 10 data terbaru).
• Jika memungkinkan, gunakan pagination.

5. Bonus: Caching di Sisi Server (PHP)

Untuk aplikasi berskala besar, Anda juga bisa menambahkan server-side caching seperti menyimpan hasil query dalam file sementara atau menggunakan Redis/Memcached. Berikut contoh sederhana menggunakan file:

$cacheFile = 'cache/data.json';
$cacheTime = 300; // 5 menit

if (file_exists($cacheFile) && time() - filemtime($cacheFile) < $cacheTime) {
    echo file_get_contents($cacheFile);
    exit;
}

// Jalankan query jika cache kadaluarsa
$conn = mysqli_connect("localhost", "username", "password", "nama_database");
$query = "SELECT * FROM tabel_nama";
$result = mysqli_query($conn, $query);

$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

$json = json_encode($data);
file_put_contents($cacheFile, $json);
echo $json;
mysqli_close($conn);

Kesimpulan

Menggunakan AJAX dengan PHP adalah cara efektif untuk memperbarui data secara otomatis di halaman web tanpa perlu me-refresh. Namun, Anda harus mempertimbangkan beban server dengan cara:

• Mengatur interval permintaan data dengan bijak.
• Menggunakan caching di sisi klien maupun server.
• Mengoptimalkan query database.

Dengan pendekatan yang tepat, Anda bisa menampilkan data secara real-time tanpa membebani server, bahkan untuk aplikasi berskala menengah hingga besar.

Apa pendapatmu? Tulis di kolom komentar dengan sopan dan beretika. Jangan lupa bagikan agar semakin banyak yang tahu!