:: Script PHP Membuat Aplikasi Chatting
sederhana ::
Selamat Pagi sahabat Toko Koding?? ketemu lagi nih sama saya, gak perlu basa-basi deh, sekarang mari kita membuat aplikasi chatting dengan
menggunakan php ajax dan mysql sebagai databasenya.
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 script-scriptnya
Berikut adah struktur tabel chat di database :
CREATE TABLE `chat` (
`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. chat.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>
<?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 chat 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 chat
values(null,'Admin','$nama bergabung dalam chat','$waktu')");
}else{
if($pesan){
$masuk = mysql_query("insert into
chat values(null,'$nama','$pesan','$waktu')");
}
$query = mysql_query("select * from
chat 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;
?>
Gampang bukan???
Demikian .:: Script PHP Membuat Aplikasi Chatting
sederhana ::. yang bisa kamu coba dikomputermu. Jika ada
masalah, silahkan tinggalkan komentar pada kotak komentar yang sudah saya sediakan
agar bisa kita bahas secara bersama-sama.
