PHP

PHP AJAX : Contoh AJAX dan MySQL

AJAX dapat digunakan untuk komunikasi interaktif dengan database.

Contoh Database AJAX

Contoh berikut akan menunjukkan bagaimana halaman web dapat mengambil informasi dari database dengan AJAX:

Contoh :

Penjelasan Contoh – Database MySQL

Tabel database yang digunakan pada contoh di atas terlihat seperti ini :

idFirstNameLastNameAgeHometownJob
1PeterGriffin41QuahogBrewery
2LoisGriffin40NewportPiano Teacher
3JosephSwanson39QuahogPolice Officer
4GlennQuagmire41QuahogPilot

Penjelasan Contoh

Dalam contoh di atas, saat pengguna memilih seseorang di daftar tarik-turun di atas, fungsi yang disebut “showUser()” dijalankan.

Fungsi ini dipicu oleh peristiwa onchange.

Ini kode HTML-nya:

Contoh :

<html>
<head>
<script>
function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

Penjelasan kode:

Pertama, periksa apakah orang dipilih. Jika tidak ada orang yang dipilih (str == “”), hapus konten dari txtHint dan keluar dari fungsi. Jika seseorang dipilih, lakukan hal berikut:

  • Buat objek XMLHttp
  • RequestBuat fungsi untuk dijalankan saat respons server siap
  • Kirim permintaan ke file di server
  • Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten daftar dropdown)

File PHP

Halaman di server yang disebut dengan JavaScript di atas adalah file PHP yang disebut “getuser.php”.

Kode sumber di “getuser.php” menjalankan kueri terhadap database MySQL, dan mengembalikan hasilnya dalam tabel HTML :

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
  padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

Penjelasan: Ketika kueri dikirim dari JavaScript ke file PHP, hal berikut akan terjadi:

  1. PHP membuka koneksi ke server MySQL
  2. Orang yang tepat ditemukan
  3. Tabel HTML dibuat, diisi dengan data, dan dikirim kembali ke placeholder “txtHint”

Hanifah Nurbaeti

Share
Tags: AJAXmysqlphp