Bekerja dengan Ajax, PHP dan MySQL
Kata pengantar
Dalam tutorial ini, kita akan melihat cara membuat Ajax bekerja dengan PHP dan MySQL. Kita akan membuat aplikasi web kecil. Dalam aplikasi ini, segera setelah Anda mulai mengetik alfabet di kolom input yang diberikan, sebuah permintaan akan dikirim ke berkas PHP melalui Ajax, lalu kueri akan dibuat ke tabel MySQL, yang akan mengembalikan beberapa hasil, lalu hasil tersebut akan diambil oleh Ajax dan ditampilkan.
Mari selami dan jelajahi cara kerjanya.
Tabel MySQL
Berikut ini adalah struktur tabel MySQL yang kami gunakan.
Antarmuka pengguna untuk memasok data
Kami memiliki antarmuka pengguna sederhana yang dibuat dengan HTML dan CSS di mana pengguna dapat memasukkan data di kolom input.
Kode HTML
Ini adalah kode HTML dasar. Namun, kita akan memodifikasinya dan menambahkan kode JavaScript nanti.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>User interface for Ajax, PHP, MySQL demo</title>
<meta name="description" content="HTML code for user interface for Ajax, PHP and MySQL demo.">
<link href="../includes/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {padding-top: 40px; padding-left: 25%}
li {list-style: none; margin:5px 0 5px 0; color:#FF0000}
</style>
</head>
<body>
<form class="well-home span6 form-horizontal" name="ajax-demo" id="ajax-demo">
<div class="control-group">
<label class="control-label" for="book">Book</label>
<div class="controls">
<input type="text" id="book">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</body>
</html>Berikut ini adalah tangkapan layar tampilannya
Kirim data ke server menggunakan Ajax
Sekarang kita akan membuat kode JavaScript untuk mengirimkan data ke server. Dan kita akan memanggil kode tersebut pada event onkeyup di kolom input yang diberikan.
function book_suggestion()
{
var book = document.getElementById("book").value;
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book;
xhr.open("POST", "book-suggestion.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
}Penjelasan kode di atas
var book = document.getElementById("book").value;Nilai bidang input, yang id-nya 'buku', dikumpulkan.
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
Variabel xhr dideklarasikan. Kemudian, objek XMLHttpRequest baru dibuat. Jika target audiens Anda menggunakan peramban yang lebih lama dari Internet Explorer 8, ActiveXObject digunakan untuk membuat XMLHttpRequest.
var data = "book_name=" + book;Data akan dikirim menggunakan 'data' yang valid dengan menggunakan string nama_buku dan variabel buku akan membawa data yang diberikan pengguna.
xhr.open("POST", "book-suggestion.php", true);Dengan menggunakan metode 'open' dari objek XMLHttpRequest, permintaan baru ke server diinisialisasi. Ada tiga parameter yang dilewatkan oleh metode ini. 'POST' menentukan jenis httprequest. 'book-suggestion.php' mengatur berkas sisi server, dan pengaturan parameter ketiga 'true' menyatakan bahwa permintaan harus ditangani secara asinkron.
Jika terjadi permintaan asinkron, Anda akan menerima panggilan balik setelah data diterima. Selanjutnya, selama permintaan Anda diproses, peramban dapat tetap berfungsi normal.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");Metode 'setRequestHeader' digunakan untuk menetapkan nilai header permintaan HTTP. Dua parameter disertakan dalam metode ini. 'Content-Type' menyatakan header string (DOMString menjelaskan secara tepat) dan 'application/x-www-form-urlencoded' menetapkan isi header.
xhr.send(data);Metode 'kirim' digunakan untuk mengirim data yang terdapat dalam variabel 'data' ke server.
Memproses data di sisi server
<?php
include('../includes/dbopen.php');
$book_name = $_POST['book_name'];
$sql = "select book_name from book_mast where book_name LIKE '$book_name%'";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "".$row['book_name']."";
}
?>Penjelasan kode
include('../includes/dbopen.php');Kode ini menyertakan file dbopen.php, yang membuka koneksi ke basis data MySQL.
$book_name = $_POST['book_name'];Dengan cara ini kami mengumpulkan data (yang disediakan pengguna) yang dikirim melalui Ajax ke PHP.
$sql = "select book_name from book_mast where book_name LIKE '$book_name%'";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<p>".$row['book_name']."</p>";
}
Kami menjalankan kueri MySQL untuk memilih semua buku yang dimulai dengan huruf yang diberikan pengguna dan menyiapkan data yang dikembalikan untuk ditampilkan.
Mengambil dan merender data menggunakan Ajax
Sekarang kita harus mengambil data yang dikembalikan oleh MYSQL dan menampilkannya menggunakan Ajax. Jadi, kita akan menulis kode tersebut di berkas HTML kita. Kita akan menambahkan kode berikut
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("suggestion").innerHTML = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
Kita harus menambahkan <div id="suggestion"></div> di bawah kolom input yang id-nya adalah buku.
Penjelasan kode Ajax
xhr.onreadystatechange = display_data;'onreadystatechange' adalah properti objek XMLHttpRequest yang dipanggil setiap kali atribut 'readyState' diubah. Kita tetapkan properti ini ke fungsi yang akan dideklarasikan selanjutnya.
if (xhr.readyState == 4)Kami memeriksa apakah nilai properti 'readyState' adalah 4, yang menunjukkan bahwa operasi telah selesai.
if (xhr.status == 200)Jika operasi selesai, status respons terhadap permintaan akan diperiksa. Perintah ini mengembalikan kode hasil HTTP. Kode hasil 200 menyatakan bahwa respons terhadap permintaan berhasil.
document.getElementById("suggestion").innerHTML = xhr.responseText;Sekarang kita tetapkan nilai string yang akan ditampilkan dalam div yang id-nya adalah 'saran' sebagai properti 'responseText' dari objek XMLHttpRequest. 'responseText' adalah respons terhadap permintaan sebagai teks.
Jadi, kode JavaScript akhir dari file HTML menjadi seperti berikut:
function book_suggestion()
{
var book = document.getElementById("book").value;
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book;
xhr.open("POST", "book-suggestion.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
document.getElementById("suggestion").innerHTML = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
}