Contoh Database MySQL AJAX dan PHP

AJAX dapat digunakan untuk berkomunikasi interaktif dengan database.

Contoh Database AJAX

Dalam contoh AJAX di bawah ini, kita akan menunjukkan bagaimana halaman web menggunakan teknologi AJAX untuk membaca informasi dari database MySQL.

Pilih pelanggan di daftar pilih


Informasi pelanggan akan disiarkan di sini.

Aplikasi ini terdiri dari empat elemen:

  • Database MySQL
  • Formulir HTML sederhana
  • JavaScript
  • Halaman PHP

Database

Database yang digunakan dalam contoh ini tampak seperti ini:

id ID Pelanggan Nama Perusahaan Nama Penghubung Alamat Kota Kode Pos Negara
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 China
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 China
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 USA

Penjelasan Contoh

Dalam contoh di atas, saat pengguna memilih pelanggan di daftar pilihan di atas, fungsi yang dinamai 'showUser()' akan dijalankan.

Fungsi ini diaktifkan oleh peristiwa onchange.

Ini adalah kode HTML:

Contoh

<!doctype html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // kode untuk IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // kode untuk IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Silahkan pilih pelanggan:</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>Informasi pelanggan akan disini ditampilkan.</b></div>
</body>
</html>

Jalankan contoh

Pengertian kode:

Pertama, periksa apakah pelanggan telah dipilih. Jika tidak ada pelanggan yang dipilih (str == ""), kosongkan konten txtHint dan keluar dari fungsi. Jika terpilih pelanggan yang satu, lakukan operasi berikut:

  • Buat objek XMLHttpRequest
  • Buat fungsi yang akan dijalankan saat server siap untuk merespon
  • Kirim permintaan ke berkas di server
  • Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten daftar yang turun)

Berkas PHP

Halaman server yang di panggil oleh JavaScript adalah berkas PHP dengan nama "getuser.php".

Kode sumber di file "getuser.php" melaksanakan queri ke database MySQL dan menampilkan hasil di tabel HTML:

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th nama perusahaan</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th nama kontak</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th alamat</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th kota</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th kode pos</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th negara</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Penjelasan: Ketika permintaan dari JavaScript dikirim ke berkas PHP, terjadi hal berikut:

  • PHP membuka koneksi ke server MySQL
  • Menemukan pelanggan yang benar
  • Buat tabel HTML, isikan data, dan kirim kembali penanda tempat "txtHint"