Selamat malam karena saya posting artikel ini pada saat malam hari :), pada postingan kali ini saya akan sedikit menjelaskan cara membuat koneksi ajax dengan server database. untuk mempersingkat waktu mari kita lihat contoh berikut, bagaimana cara membuat objek ajax dan bagaimana caranya berkomunikasi dengan server. Ketika Ajax melakukan komunikasi dan transaksi data dengan server, berarti anda harus mempunya suatu program web yang berjalan di sisi server. Ada banyak bahasa pemograman yang berjalan di sisi server, seperti PHP, ASP dan sebagainya. Pada contoh berikut kita akan menggunakan bahasa PHP.
Pada contoh berikut kita akan membuat suatu program yang mengambil data yang kita letakkan di dalam database MySQL. Jadi misal kita punya tabelDatakaryawan di database MySQL.
— Table structure for table `tabelDataKaryawan`
—
CREATE TABLE `tabeldatakaryawan`
( `NIP` int(10) NOT NULL,
`Nama` varchar(50) NOT NULL,
`Email` varchar(50) NOT NULL,
`Alamat` tinytext NOT NULL, PRIMARY KEY (`NIP`)
)
Berikut adalah isi dari tabelDataKaryawan tersebut
| NIP | Nama | Alamat | |
| 889456 | Desrizal | drz@fmi.com | Street 11C no. 332, Tembagapura, Papua |
| 889457 | Nurmi Yulita | nurmi@fmi.com | Teras Estate No. 234, Tembagapura, Papua |
| 896543 | Budi Hartono | budi@fmi.com | Barak Q Ridge camp |
Lalu kita membuat halaman HTML untuk menampilkan data tersebut, menggunakan semacam drop-down box, yang kalau diklik maka akan mengambil data di MySQL dan menampilkannya di halaman karyawan.html tanpa harus me-reloading keseluruhan halaman.
<html>
<head>
<script>
var ajaxku;
function ambildata(nip){
ajaxku = buatajax();
var url=”ambildata.php”;
url=url+”?q=”+nip;
url=url+”&sid=”+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open(“GET”,url,true);
ajaxku.send(null);
}
function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
if(data.length>0){
document.getElementById(“alamat”).value = data
}else{
document.getElementById(“alamat”).value = “”;
}
}
}
</script>
</head>
<body>
Nama :
<select size=”1″ name=”karyawan” id=”karyawan”
onchange=ambildata(this.value)>
<option selected>–Pilih Karyawan–</option>
<option value=”889456″>Desrizal</option>
<option value=”889457″>Nurmi Yulita</option>
<option value=”896543″>Budi Hartono</option>
</select>
</p>
<p>
Alamat : <textarea rows=”4″ id=”alamat” name=”alamat” cols=”42″></textarea>
</p>
Pada contoh berikut anda akan memilih nama dan mengambil data alamat di database
<br>berdasarkan nama tersebut dan menampilkannya di halaman ini tanpa harus me-reload
<br>
keseluruhan halaman
</body>
</html>
Pada kode di atas, pada baris kode berikut :
var url=”ambildata.php”;
Anda akan melakukan transaksi data dengan server dengan bantuan program PHP yang bernama ambildata.php, untuk itu mari kita buat kode untuk file ambildata.php.
<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”);
$nip = $_GET[‘q’];
if($nip){
$query = mysql_query(“select alamat from tabelDataKaryawan where
nip=$nip”);
while($d = mysql_fetch_array($query)){
echo $d[‘alamat’];
}
}
?>
Coba anda pilih pada drop-down box nama, maka otomatis akan tampil alamat sesuai nama yang teradapat di database.
Berikut penjelasan untuk kode pada datakaryawan.html
<body>
Nama :
<select size=”1″ name=”karyawan” id=”karyawan”
onchange=ambildata(this.value)>
<option selected>–Pilih Karyawan–</option>
<option value=”889456″>Desrizal</option>
<option value=”889457″>Nurmi Yulita</option>
<option value=”896543″>Budi Hartono</option>
</select>
</p>
<p>
Alamat : <textarea rows=”4″ id=”alamat” name=”alamat” cols=”42″></textarea>
Kode di atas kita membuat form HTML biasa, di mana kita akan membuat drop-down box nama-nama karyawan. Pada elemen <select> terdapat kode onchange=ambildata(this.value), yang artinya apabila ada event perubahan terhadap
combo box, dengan cara memilih salah satu option, maka segera eksekusi fungsi ambildata(nip) yang terdapat di javascript, dan kode this.value berfungsi untuk mengambil nilai dari option yang dipilih. Kemudian, mari kita lihat kode javascript.
function ambildata(nip){
ajaxku = buatajax();
var url=”ambildata.php”;
url=url+”?q=”+nip;
url=url+”&sid=”+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open(“GET”,url,true);
ajaxku.send(null);
}
Fungsi ambildata(nip) akan dieksekusi setiap user memilih nama karyawan pada combox.
ajaxku = buatajax(), kita membuat objek XMLHttpRequest dengan cara menjalankan fungsi buatajax(), di mana pada fungsi tersebut terdapat kode untuk membuat objek XMLHttpRequest.
- var url=”ambildata.php”, Kita meng-set file PHP yang akan bekerja di sisi server.
- url=url+”?q=”+nip, kita memasukkan nilai nip, yang diambil dari drop-down box ke dalam variabel q
- url=url+”&sid=”+Math.random(), kita memasukan angka random ke dalam variabel sid, hal ini berguna untuk mencegah server menggunakan chached file atau mencegah data yang diberikan adalah data yang lama.
- ajaxku.onreadystatechange=stateChanged, setiap terjadi perubahan terhadap properti readyState, akan segera menjalankan fungsi stateChanged().
- ajaxku.open(“GET”,url,true), membuka objek XMLHttpRequest dengan metode GET dan URL yang akan melakukan action di sisi server.
- ajaxku.send(null), mengirim HTTP request ke server.
Fungsi buatajax() berguna untuk membuat XMLHttpRequest, penjelasannya bisa anda lihat pada Kode di bawah ini. Membuat objek XMLHttpRequest untuk beberapa browser.
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
if(data.length>0){
document.getElementById(“alamat”).value = data
}else{
document.getElementById(“alamat”).value = “”;
}
}
}
- Fungsi stateChanged() berguna untuk menangani jika terjadi perubahan properti readyState, coba lihat kode ajaxku.onreadystatechange=stateChanged.
- ajaxku.readyState==4, Jika nilai properti readyState adalah sama dengan 4 (4 artinya adalah respon dari server sudah komplet), maka kita mengambil teks/output yang dihasilkan oleh program PHP (ambildata.php) Jika kita lihat output yang dihasilkan program PHP ambildata.php adalah pada baris kode echo $d[‘alamat’];
- document.getElementById(“alamat”).value = data, Lalu nilai atau output yang dihasilkan dari ambildata.php tersebut, kita masukkan ke dalam elemen textarea yang mempunyai id “alamat”.
Penjelasan untuk kode ambildata.php :
- Melakukan koneksi ke database MySQL
- Mengambil nilai variabel q dengan metode GET, karena ajax mengirim variabel q dengan metode GET, lalu memasukkannya ke dalam variabel $nip.
- Melakukan query untuk mengambil alamat yang sesuai nip.
- Lalu memberikan output alamat yang didapat dengan menggunakan echo.
Demikian sedikit penjelasan tentang koneksi ajax dengan server pada postingan selanjutnya akan saya bahas mengenai XMLHttpRequest Object jika ada waktu akan saya postingkan besok. Semoga Bermanfaat
