PHP - AJAX dan MySQL
AJAX dapat digunakan untuk komunikasi interaktif dengan database.
Contoh Basis Data AJAX
Contoh berikut akan menunjukkan bagaimana halaman web dapat mengambil informasi dari database dengan AJAX:
Contoh
Contoh Dijelaskan - Database MySQL
Tabel database yang kita gunakan pada contoh di atas terlihat seperti ini:
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
Contoh Dijelaskan
Pada contoh di atas, ketika pengguna memilih seseorang dalam daftar dropdown di atas, fungsi yang disebut "showUser()" dijalankan.
Fungsi dipicu oleh peristiwa onchange.
Berikut kode HTMLnya:
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 txtHint dan keluar dari fungsinya. Jika seseorang dipilih, lakukan hal berikut:
- Buat objek XMLHttpRequest
- Buat fungsi yang akan dieksekusi ketika respons server sudah 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 oleh 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 terjadi:
- PHP membuka koneksi ke server MySQL
- Orang yang tepat ditemukan
- Tabel HTML dibuat, diisi dengan data, dan dikirim kembali ke placeholder "txtHint"