Oke sekarag kita lihat contoh aplikasi ajax yang menggunakan JSON sebagai format ouput yang di berikan oleh server ke client. Pertama-tama mari kita buat tabel di database, sengan struktur tabel sebagai berikut :
Scroll untuk melihat konten
CREATE TABLE `drzchat` (
`nomor` int(3) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`pesan` varchar(200) NOT NULL,
`waktu` varchar(10) NOT NULL,
PRIMARY KEY (`nomor`)
);
Kemudian mari kita buat tampilan layout HTML nya dan program Ajax di sisi client. Ketikkan kode di bawah ini dan simpan dengan nama drzchat.html
<html>
<head>
<title>
DRZ Chat 1.0
</title>
<script>
var ajaxku = buatAjax();
var tnama = 0;
var pesanakhir = 0;
var timer;
function taruhNama(){
if(tnama==0){
document.getElementById(“nama”).disabled = “true”;
tnama = 1;
}else{
document.getElementById(“nama”).disabled = “”;
tnama = 0;
}
ambilPesan();
}
function buatAjax(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
function ambilPesan(){
namaku = document.getElementById(“nama”).value
if(ajaxku.readyState == 4 || ajaxku.readyState == 0){
ajaxku.open(“GET”,”ambilchat.php?akhir=”+pesanakhir+”&nama=”+namaku+”&sid
=”+Math.random(),true);
ajaxku.onreadystatechange = aturAmbilPesan;
ajaxku.send(null);
}
}
function aturAmbilPesan(){
if(ajaxku.readyState == 4){
var chat_div = document.getElementById(“div_chat”);
var data = eval(“(“+ajaxku.responseText+”)”);
for(i=0;i<data.messages.pesan.length;i++){
chat_div.innerHTML += “<font
color=red>”+data.messages.pesan[i].nama+”</font> “;
chat_div.innerHTML += “<font
size=1>(“+data.messages.pesan[i].waktu+”)</font> “;
chat_div.innerHTML += ” :
“+data.messages.pesan[i].teks+”<br>”;
chat_div.scrollTop = chat_div.scrollHeight;
pesanakhir = data.messages.pesan[i].id;
}
}
timer = setTimeout(“ambilPesan()”,1000);
}
function kirimPesan(){
pesannya = document.getElementById(“pesan”).value
namaku = document.getElementById(“nama”).value
if(pesannya != “” && document.getElementById(“nama”).value !=””){
ajaxku.open(“GET”,”ambilchat.php?akhir=”+pesanakhir+”&nama=”+namaku+”&pes
an=”+pesannya+”&sid=”+Math.random(),true);
ajaxku.onreadystatechange = aturAmbilPesan;
ajaxku.send(null);
document.getElementById(“pesan”).value = “”;
}else{
alert(“Nama atau pesan masih kosong”);
}
}
function aturKirimPesan(){
clearInterval(timer);
ambilPesan();
}
function blockSubmit() {
kirimPesan();
return false;
}
</script>
</head>
<body>
Nama : <input type=text name=nama id=nama>
<input type=button value=login id=tmbl_login onclick=taruhNama()><p>
<div id=”div_chat” style=”height: 300px; width: 500px; overflow: auto;
background-color: lightyellow; border: 1px solid #555555;”>
</div>
<form onSubmit=”return blockSubmit();”>
Pesan : <input type=text name=pesan id=pesan size=50>
<input type=button value=”kirim” onclick=”kirimPesan()”>
</form>
</body>
</html>
Pada program chat sisi client di atas, pertama-tama user harus memasukkan nama mereka di suatu teks input. Setelah kita menekan tombol login, maka segera dijalankan fungsi ambilPesan(). Di mana fungsi ini berfungsi untuk melakukan request ke server untuk mengambil data dari server, ambilchat.php.
Data yang diambil dari server berupa teks dengan format JSON sebagai berikut :
{“messages”:
{“pesan”:[
{“id”:”35″,
“nama”:”Batman”,
“teks”:”halo Nurmi”,
“waktu”:”16:31″ },
{“id”:”36″,
“nama”:”Nurmi”,
“teks”:”halo juga”,
“waktu”:”16:31″ },
{“id”:”37″,
“nama”:”desrizal”,
“teks”:”hai apa kabar”,
“waktu”:”16:47″ }
]
}
}
Format JSON tersebut diambil dari server, yang di masukkan ke dalam variable data, kemudian kita gunakan eval untuk mengubah JSON string menjadi objek javascript.
var data = eval(“(“+ajaxku.responseText+”)”);
Kemudian Objek JSON yang telah di-parse di atas kita masukkan ke dalam <div>
for(i=0;i<data.messages.pesan.length;i++){
chat_div.innerHTML += “<font color=red>”+data.messages.pesan[i].nama+”</font> “;
chat_div.innerHTML += “<font size=1>(“+data.messages.pesan[i].waktu+”)</font> “;
chat_div.innerHTML += ” : “+data.messages.pesan[i].teks+”<br>”;
chat_div.scrollTop = chat_div.scrollHeight;
pesanakhir = data.messages.pesan[i].id;
}
Supaya ajax hanya megambil data dari pesan yang terakhir maka kita juga mengirimkan nomor pesan id terakhir
pesanakhir = data.messages.pesan[i].id;
Supaya ajax mengambil data tiap satu detik maka kita gunakan fungsi setTimeout()
timer = setTimeout(“ambilPesan()”,1000);
Biasanya kalau kita chat, kita ketik pesannya di input teks lalu kita tekan ENTER, biasanya kalau form di tekan ENTER akan otomatis ter-submit dan halaman akan bertukar. Untuk mencegah halaman ter-submit ketika tekan enter, maka kita blok menggunakan fungsi berikut :
function aturKirimPesan(){
clearInterval(timer);
ambilPesan();
}
Fungsi di atas dipanggil ketika ada event onSubmit.
<form onSubmit=”return blockSubmit();”>
Sekarang mari kita lihat kode PHP di sisi server, di mana di program PHP ini kita membuat output data berformat JSON. Ketikkan kode di bawah ini dan beri nama ambilchat.php
<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”);
$nama = $_GET[‘nama’];
$pesan = $_GET[‘pesan’];
$waktu = date(“H:i”);
$akhir = $_GET[‘akhir’];
$json = ‘{“messages”: {‘;
if($akhir==0){
$nomor = mysql_query(“select nomor from drzchat order by nomor desc
limit 1″);
$n = mysql_fetch_array($nomor);
$no = $n[‘nomor’] + 1;
$json .= ‘”pesan”:[ {‘;
$json .= ‘”id”:”‘.$no.’”,
“nama”:”Admin”,
“teks”:”Selamat datang di chatting room”,
“waktu”:”‘.$waktu.’”
}]’;
$masuk = mysql_query(“insert into drzchat values(null,’Admin’,’$nama
bergabung dalam chat’,’$waktu’)”);
}else{
if($pesan){
$masuk = mysql_query(“insert into drzchat
values(null,’$nama’,’$pesan’,’$waktu’)”);
}
$query = mysql_query(“select * from drzchat where nomor > $akhir”);
$json .= ‘”pesan”:[ ‘;
while($x = mysql_fetch_array($query)){
$json .= ‘{‘;
$json .= ‘”id”:”‘.$x[‘nomor’].’”,
“nama”:”‘.htmlspecialchars($x[‘nama’]).’”,
“teks”:”‘.htmlspecialchars($x[‘pesan’]).’”,
“waktu”:”‘.$x[‘waktu’].’”
},’;
}
$json = substr($json,0,strlen($json)-1);
$json .= ‘]’;
}
$json .= ‘}}’;
echo $json;
?>
Logika dari program di atas adalah :
- Lakukan koneksi ke server MySQL
- Ambil nilai-nilai parameter yang di berikan oleh client dengan metode GET
- Cek apakah user pertama kali login dengan melihat nilai variable $akhir, jika bernilai 0 artinya adalah user chat pertama kali, lalu kita kirim data berupa string berformat JSON, ucapan selamat data dari admin, lalu kita masukkan ke dalam database untuk supaya user lain mengetahui ada user lain yang login.
- Apabila nilai $akhir besar dari 0, artinya user bukan masuk untuk pertama kalinya, berikan data-data dari database setelah yang terakhir dia dapat, yang kita dapat dari variable $akhir
$query = mysql_query(“select * from drzchat where nomor > $akhir”);
- Output yang kita buat dengan format json, untuk mengirim data ke client cukup
melakukan echo $json;.
Berikut adalah tampilan dari aplikasi chat kita.
