Cara menampilkan data di PHP dengan Ajax

Bagaimana cara menampilkan data dengan Ajax di PHP? Untuk menampilkan data dalam tabel menggunakan AJAX di PHP, Anda bisa melakukan beberapa langkah sebagai berikut:

Buat file PHP untuk mengambil data dari database:

<?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);
?>

Buat file HTML untuk menampilkan data dalam tabel:

<table id="dataTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
  </thead>
  <tbody id="data">
  </tbody>
</table>

Tambahkan skrip JavaScript untuk mengambil data dari file PHP dan memperbarui tabel secara otomatis:

<script>
function loadData() {
  $.ajax({
    url: "ambil_data.php",
    type: "GET",
    dataType: "json",
    success: function(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();
  setInterval(function() {
    loadData();
  }, 5000);
});
</script>

Pada skrip ini, kita menggunakan fungsi loadData() untuk mengambil data dari file PHP menggunakan AJAX. Kemudian kita memanggil fungsi loadData() saat halaman sudah selesai dimuat menggunakan $(document).ready(). Fungsi setInterval() digunakan untuk memanggil loadData() secara berkala setiap 5000 milisecond (5 detik), sehingga tabel akan diperbarui secara otomatis setiap 5 detik.

Dengan mengikuti langkah-langkah ini, Anda dapat menampilkan data dalam tabel menggunakan AJAX di PHP dan memperbarui tabel secara otomatis saat ada data baru.

Apakah menggunakan metode ini tidak akan membebani server?

Tergantung pada jumlah data yang diambil dan frekuensi pembaruan, menggunakan metode ini bisa membebani server. Namun, jika Anda mengatur frekuensi pembaruan yang tepat dan membuat query database yang efisien, Anda bisa mengurangi beban pada server.

Sebagai contoh, pada skrip JavaScript yang diberikan dalam jawaban sebelumnya, frekuensi pembaruan data adalah setiap 5 detik. Jika jumlah data yang diambil sedikit, beban pada server akan minimal. Namun, jika jumlah data sangat besar, beban pada server akan lebih besar dan mungkin mempengaruhi kinerja aplikasi.

Oleh karena itu, penting untuk melakukan pengujian dan optimasi pada skrip dan konfigurasi server untuk memastikan bahwa beban pada server tidak terlalu berat. Anda juga bisa menggunakan teknik caching untuk menyimpan hasil query dalam cache dan membatasi jumlah pemanggilan query ke database, sehingga memperbaiki efisiensi dan mengurangi beban pada server.

Bagaimana caranya biar tidak membebani server?

Untuk mengurangi beban pada server, Anda bisa melakukan beberapa hal sebagai berikut:

1. Batasi frekuensi pembaruan data: Anda bisa mengatur frekuensi pembaruan data sehingga tidak terlalu sering, misalnya setiap 30 detik atau 1 menit. Ini akan membantu mengurangi jumlah pemanggilan query ke database dan mengurangi beban pada server.
2. Gunakan teknik caching: Anda bisa menyimpan hasil query dalam cache selama periode waktu tertentu, misalnya selama 5 menit atau 10 menit. Saat aplikasi meminta data, Anda bisa mengecek cache terlebih dahulu sebelum melakukan query ke database. Ini akan membantu mengurangi jumlah pemanggilan query ke database dan mengurangi beban pada server.

Berikut adalah contoh skrip yang menggabungkan kedua teknik di atas:

<table id="dataTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
  </thead>
  <tbody id="data">
  </tbody>
</table>

<script>
var cacheExpireTime = 300000; // 5 menit dalam milisecond
var cache = null;
var cacheExpire = 0;

function loadData() {
  if (cache !== null && cacheExpire > Date.now()) {
    updateTable(cache);
  } else {
    $.ajax({
      url: "ambil_data.php",
      type: "GET",
      dataType: "json",
      success: function(data) {
        cache = data;
        cacheExpire = Date.now() + cacheExpireTime;
        updateTable(data);
      }
    });
  }
}

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();
  setInterval(function() {
    loadData();
  }, 30000);
});
</script>

Pada skrip ini, kita menyimpan hasil query dalam variabel cache dan menetapkan waktu kadaluarsa cache. Saat aplikasi meminta data, kita memeriksa cache terlebih dahulu. Jika cache masih valid, kita mempergunakan data dalam cache.

Jika cache sudah kadaluarsa, kita melakukan pemanggilan query ke database dan menyimpan hasil query dalam cache untuk digunakan di waktu yang akan datang. Kita juga mengatur interval pembaruan data sehingga tidak terlalu sering, misalnya setiap 30 detik. Ini akan membantu mengurangi beban pada server.