Permata Web | Membuat Aplikasi Chatting Dengan PHP Ajax

• Internet (8)
• Linux (1)
• Motivasi (4)
• Pemrograman PHP (11)
• Server (1)
• Teknologi (1)

Permata Web hadir Fokus Sistem Berbasis Web (259)

Kisah Ketulusan Seorang Anak Penderita Leukimia Ganas! (258)

Membuat Login dengan PHP dan Mysql (251)

Membuat Blog dengan Wordpress.com (243)

Kondisi waktu tertentu dengan PHP (206)

Permata pada Membuat Blog dengan Wordpress.com

ol pada Cara Membuat Email

tommymuhamadpulungan pada Membuat Blog dengan Wordpress.com

Rizal Nurdin pada Penghianatan by MT

busana muslim pada Kata - Kata Indah Untuk Yang Terindah

April 2012 (2)

February 2012 (1)

January 2012 (1)

December 2011 (3)

November 2011 (10)

October 2011 (14)

Pengunjung hari ini : 21

Total pengunjung : 3914

Hits hari ini : 48

Total Hits : 14449

Pengunjung Online: 5

Beranda » Pemrograman PHP » Membuat Aplikasi Chatting Dengan PHP Ajax

Jumat, 25 November 2011 - 18:26:11 WIB
Membuat Aplikasi Chatting Dengan PHP Ajax
Diposting oleh : Anjar Pinem | Yaspis Web
Kategori: Pemrograman PHP - Dibaca: 110 kali

Sekarang mari kita membuat aplikasi chatting dengan menggunakan php ajax dan mysql sebagai database. Di sini kita memanfaatkan ajax untuk komunikasi client (browser) ke server. Ajax setiap detik akan melakukan request ke server (tanpa harus refresh). Di sini kita bisa memanfaat fungsi setTimeout() pada javascript. Fungsi setTimeout() berguna untuk me-set timer setiap berapa per milisecond javascript mengeksekusi suatu fungsi, contoh :

setTimeout("ambilPesan()",1000);

Kode di atas berarti, eksekusi fungsi ambilPesan() setiap 1000 milisecond. Mari kita lihat konsep untuk membuat aplikasi chatting:

Kita buat objek ajax yang nantiya bertugas melakukan komunikasi ke server
User memasukkan nama, yang nantinya kita simpan dalam suatu variabel
Ketika user selesai mengetik pesan, masukkan ke dalam database melalui ajax
User, baik kita sendiri atau orang lain, setiap 1 detik akan mengecek ke server, apakah ada pesan baru, jika ada tampilkan.

Sekarang mari kita mulai membuat kode-kodenya

Berikut adah struktur tabel drzchat di database :

--
-- Table structure for table `drzchat`
--
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`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Pertama-tama mari kita buat halaman untuk chat di browser. 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+"&pesan="+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 kode drzchat.html di atas, setelah user mengisi nama, lalu klik tombol login, maka kita menjalankan fungsitaruhNama(), yang berguna untuk mengunci nama yang sudah diketik sebagai user name di chatting. Setelah itu kita manjalankan fungsi ambilPesan(), yang berfungsi melakukan request ke server apakah ada pesan yang terbaru dari database. Jika ada pesan terbaru maka kita ambil dan taruh di browser dengan menggunakan fungsi aturAmbilPesan().

Apabila kita sudah mengetik pesan, javascript akan menjalankan fungsi kirimPesan().

Pada kode di atas objek ajax melakukan request atau komunikasi dengan file php server, yaitu fileambilchat.php. Berikut kodenya :

<?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;
?>

File ambilchat.php mempunya fungsi utama memasukkan pesan ke database dan sekaligus mengecek apakah ada pesan terbaru dengan cara melakukan query "select * from drzchat where nomor > $akhir". Variabel$akhir kita dapat dari variabel yang dikirim oleh objek ajax, yang sebenarnya juga berasal field nomor pada tabel drzchat.