4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

Blog Ridwan, SST

Tutorial Membuat Aplikasi Webchat dengan PHP,

MySQL, JQuery
Like 2peoplelikethis.Bethefirstofyourfriends.

Webchat adalah sebuah media obrol interaktif memalui

web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat.
Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan
ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan
menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa
bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh
elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan
memori komputer.
Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery
sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan
optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk
keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem
chat berbasis web.
Di sini saya merancang menggunakan tiga (3) le script server utama yaitu :
index.php
login.php
logout.php
Script Server tersebut dikunci tampilan oleh le: styles.css. Sedangkan script sisi-client (diletakkan di
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

1/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

direktori js) yang digunakan adalah:

library jquery
chat.js
Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya
antara lain:
database.php (penghubung dengan database)
datetime.php (pengambil value waktu terakhir chat)
postchat.php (pengirim kalimat chat)
getchat.php (pengambil kalimat chat secara real-time)
chatlist.php (pengambil chat yang sudah ada sebelumnya)
chatuserlist.php (pengambil data user yang aktif)
Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.

Ketika user membaca chat, maka chat.js akan selalu melakukan pengecekan waktu setiap 500 milisecond,
jika terdapat chat baru maka akan ditampilkan chat baru tersebut, dengan cara menambahkan
div(elemen) dibawah chat yang sudah ada sebelumnya, tanpa perlu merefresh halaman utama webchat.
Fungsi utama jquery yang digunakan oleh chat.js adalah : $.get()
Ketika user mengirimkan chat, maka chat.js akan mengirimkan kalimat beserta username yang diambil
dari session, dan membantu melakukan post ke sisi server, tanpa perlu merefresh halaman utama chat.
Begitu juga dengan daftar user, chat.js akan selalu melakukan pengecekan setiap 500ms, dan akan segera
menampilkan perubahan setiap kali terdapat perubahan penambahan user atau logout user.
Untuk masuk ke dalam script utama, tentu akan menggunakan fasilitas Login, dimana pada fasilitas ini,
login tidak menggunakan password, namun menggunakan username dan email. Sedangkan email
tersebut nantinya akan digunakan untuk mengambil gambar avatar dari situs gravatar.com.

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

2/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

Saat dilakukan login, maka JIKA sudah terdapat username yang sama, akan dianggap gagal dan diminta
mengulang login, sedangkan JIKA belum terdapat username yang sama, maka SESSION akan dibuka dan
data username dan email akan disimpan dalam tabel user.
Tabel-tabel yang saya buat adalah sebagai berikut :
Tabel user berisi Field : username, email, loginDate
CREATE TABLE `user` (
`username` varchar(20) NOT NULL,
`email` varchar(50) DEFAULT NULL,
`loginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Tabel chat berisi eld username, chat, chatTime dan id
CREATE TABLE `chat` (
`id` int(23) NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`chat` text,
`chatTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;
Script login yang saya buat adalah demikian :
login.php
<?php
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

3/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

include scripts/database.php;
if( isset( $_POST[submit] ) ){
$username = $_POST[username];
$email = $_POST[email];
$sql = INSERT INTO `user` (`username`,`email`) VALUES ($username,$email);
if(!mysql_query( $sql )){
header( Location:login.php?err=1 );
}else{
session_start();
$_SESSION[bms_chat_user]=$username;
header( Location:index.php );
}
}
?>
<html>
<head><title>JQuery BMS Chat System</title><link rel=stylesheet type=text/css href=styles.css>
</head>
<div id=wrapper>
<div id=navbar></div>
<div id=centerbox>
<form method=post action= id=form-login>
<input type=text id=username name=username value=username onclick=this.value=;><br />
<input type=text name=email id=email value=email onclick=this.value=;><br />
<input type=submit name=submit id=submit_login value=Login>
</form>
<?php if(isset($_GET[err])){
echo This user is already taken;
}?>
</div>
<div style=clear:both;></div>
</div>
</div>
</body>
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

4/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

</html>
Script database yang saya buat, saya letakkan di direktori scripts, dan berisi cukup simpel:
database.php
<?php
$dbhost = localhost';
$dbuser = root';
$dbpass = ;
$dbname = bmschat';
if(mysql_connect($dbhost,$dbuser,$dbpass)){
mysql_select_db($dbname);
}else{
echo Error when access data;
}
?>
Script utama lainnya adalah logout.php. Logout ini hanya berfungsi untuk menghapus sessi user dan
menghapus dari database. Selanjutnya akan diredirect ke login.php
login.php
<?php
session_start();
include scripts/database.php;
$sql = DELETE FROM user WHERE username=$_SESSION[bms_chat_user]';
mysql_query($sql);
unset($_SESSION[bms_chat_user]);
header(Location:login.php);
?>
File tampilan utama adalah index.php yang saya rancang demikian:
index.php
<?php
include scripts/database.php;
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

5/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

session_start();
if(!isset( $_SESSION[bms_chat_user] )){
header(Location:login.php);
}
?>
<html>
<head><title>JQuery BMS Chat System</title><link rel=stylesheet type=text/css href=styles.css>
</head>
<body onload=scrollbawah();>
<script>
function scrollbawah(){
//fungsi untuk menempatkan scroll chat pada posisi paling bawah ketika halaman chat dibuka
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
<div id=wrapper>
<div id=timecontainer><?php include scripts/datetime.php;?></div>
<!Pengambil waktu menjadi penting untuk menandai chat terakhir>
<div id=navbar><?php echo You logged in as . $_SESSION[bms_chat_user];?>&nbsp;&nbsp;&nbsp;<a
href=logout.php>Logout</a></div>
<div id=centerbox>
<?php include scripts/chat_list.php;
//mengambil baris chat pertama sebelum diisi
?>
</div>
<div id=chat_userlist></div><!untuk menempatkan data user>
<div style=clear:both;></div><!menetralkan posisi>
<!form-chat>
<div id=form>
<form method=post action= id=chatform>
<input type=hidden id=chatuser name=chatuser value=<?php echo $_SESSION[bms_chat_user];?>>
<input type=text name=chat id=chat>
<input type=submit name=submit id=submit_chat value=Chat>
</form>
</div>
<!form-chat>
</div>
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

6/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

<script type=text/javascript src=jquery-1.9.1.min.js></script>

<script type=text/javascript src=chat.js></script>
</body>
</html>
Script scripts/datetime.php hanya bertugas melakukan parsing waktu terakhir chat ketika halaman
dibuka user seperti berikut:
datetime.php
<?php
$sql = SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,-,), ,),':,)) as timeres FROM chat
ORDER BY id DESC LIMIT 1;
$q = mysql_query( $sql );
$r = mysql_fetch_array( $q );
echo $r[timeres];
?>
Segala isi pada elemen div #timecontainer akan segera direplace oleh data waktu yang baru ketika terjadi
input chat yang baru.
Sedangkan chat_list.php akan berisi seperti berikut:
chat_list.php
<?php
$sql1 = SELECT * FROM chat;
$q1 = mysql_query( $sql1 );
while( $r1 = mysql_fetch_array( $q1 ) ){
?>
<div id=isi>
<div class=isi_username><?php echo $r1[username];?></div>
<div class=isi_time> (<?php echo $r1[chatTime];?>) </div>
<div class=isi_isi> <?php echo $r1[chat];?></div>
<div style=clear:both;></div>
</div>
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

7/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

<?php
}
?>
File CSS yang saya bangun adalah sebagai berikut:
STYLES.CSS
body{
background:#a6a8f4;
margin:auto;
font-size:20px;
font-family:Arial;
line-height:25px;
}
#centerbox{
margin-top:100px;
margin-left:20%;
height:300px;
width:500px;
background:#14178f;
color:# f;
padding-left:50px;
padding-top:20px;
padding-right:50px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
border:10px solid # f;
over ow:auto;
oat:left;
}
#chat_userlist{
oat:left;
margin-top:100px;
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

8/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

margin-left:10px;
background:#14178f;
color:# f;
padding-left:10px;
padding-top:10px;
padding-right:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
border:1px solid # f;
over ow:auto;
height:330px;
}
#form{
margin-left:20%;
margin-top:20px;
}
#form input[type=text]{
width:500px;
height:40px;
font-size:30px;
border:1px solid #ccc;
margin-right:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#form input[type=submit]{
width:100px;
height:40px;
font-size:30px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color: #E6E6E6;
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

9/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
background-image: linear-gradient(white, white 25%, #E6E6E6);
lter: progid:DXImageTransform.Microsoft.gradient(startColorstr=white, endColorstr=#E6E6E6,
GradientType=0);
}
#isi{
border-bottom:1px solid #999;
margin-top:5px;
}
.isi_username{
font-size:12px;
color:#f30;
}
.isi_time{
oat:left;
font-size:10px;
margin-right:10px;
color:#bed;
}
.isi_isi{
oat:left;
font-size:12px;
}
#timecontainer{
display:none;
visibility:hidden;
}
#navbar{
height:25px;
background:#000;
color:#fea;
font-size:14px;
text-align:right;
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

10/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

padding-right:40px;
}
#form-login input[type=text]{
width:500px;
height:40px;
font-size:30px;
border:1px solid #ccc;
margin-right:20px;
margin-bottom:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#form-login input[type=submit]{
width:100px;
height:40px;
margin-bottom:10px;
font-size:30px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
background-image: linear-gradient(white, white 25%, #E6E6E6);
lter: progid:DXImageTransform.Microsoft.gradient(startColorstr=white, endColorstr=#E6E6E6,
GradientType=0);
}
Hingga disini, seharusnya tampilan Web Chat sudah muncul, lengkap dengan form dan user list yang
masih kosong.

Sudah?

=================================================

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

11/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

Selanjutnya kita membahas control utama dari sistem chat ini yaitu le chat.js beserta script server
pendukungnya. Chat.js akan berisi sebagai berikut:
CHAT.JS
//submit-a-login
//submit-a-line
$(#submit_chat).click(function(anu){
anu.preventDefault();
var chat = $(#chat).val();
var chatuser = $(#chatuser).val();
$.post(scripts/postchat.php, { chat: chat, chatuser:chatuser, submit:submit });
$(form#chatForm)[0].reset();
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
return false;
});

var i=0;
setInterval(
function(){
last = $(#timecontainer).text();
$.get(scripts/getchat.php?last=+last, function(bmsJsonComment) {
var bmsCommentData = JSON.parse(bmsJsonComment);
if(bmsCommentData!==null){
$.each(bmsCommentData, function(){
i=i+1;
var insideComment = <div id=isi><div class=isi_username>+this.username+'</div><div class=isi_time>
(+this.chatTime+)</div><div class=isi_isi> +this.chat+ </div><div style=clear:both;></div></div>';
$(#centerbox).append(insideComment).children(:last).hide().fadeIn(1000);
var lastBmsComment = document.getElementById(timecontainer);
lastBmsComment.innerHTML = this.timeres;
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
$(#chat).focus();
});
};
});
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

12/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

var ts = document.getElementById(timecontainer);
s = ts.innerHTML;
},500);
//get-user
setInterval(
function(){
$.get(scripts/chat_userlist.php, function(bmsJsonUserList) {
var bmsJsonUserData = JSON.parse(bmsJsonUserList);
if(bmsJsonUserData!==null){
var userList=;
$.each(bmsJsonUserData,function(){
userList = userList + <div class=user_username>&nbsp;&nbsp;<img src=+this.gravatar+'>
+this.username+'</div><div style=clear:both;></div>';
});
$(#chat_userlist).html(userList);
}
});
},3000);
Mari kita bahas satu-satu:
PENGIRIM CHAT
$(#submit_chat).click(function(anu){
anu.preventDefault();
var chat = $(#chat).val();
var chatuser = $(#chatuser).val();
$.post(scripts/postchat.php, { chat: chat, chatuser:chatuser, submit:submit });
$(form#chatForm)[0].reset();
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
return false;
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

13/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

});
Jika TOMBOL FORM chat yang ber-ID : submit_chat diklik, maka JQuery akan menangkap
variabel chat yang diambil dari input-text ber-ID: chat
variabel chatuser yang diambil dari input-hidden ber-ID: chatuser, diambil dari session(lihat form)
Sebelumnya form akan ditahan dengan fungsi preventDefault() untuk menjaga agar tidak melakukan
refresh halaman
Selanjutnya dengan fasilitas fungsi $.post(), JQuery memasok data ke le scripts/postchat.php, dengan
isian FORM
name:chat -> value:chat (diambil dari value yang telah diambil dari ID masing2)
name:chatuser -> value:chatuser (diambil dari value yang telah diambil dari ID masing2)
name:submit -> value: (tidak harus bervalue, digunakan untuk menanda bahwa data telah dipost saja)
Selanjutnya setelah data dipost, maka untuk menghindari karakter tertinggal di form, maka form harus
direset agar kembali kosong dan siap digunakan untuk data baru. Fungsi yang menangkap hal ini adalah
bagian : $(form#chatForm)[0].reset();
Script bagian :
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
berfungsi untuk selalu menempatkan chat terbaru yang terletak bagian bawah, agar selalu terscroll ke
bawah. Jika tidak digunakan script ini maka scrollbar tidak akan dinamis dan chat terbaru tidak akan
terlihat sebelum discroll. Semoga bisa dipahami.
Lantas seperti apa sih script postchat.php yang diarah oleh potongan script diatas tadi? Script ini hanya
berisi penerima data post sebagai berikut:
postchat.php
<?php
include database.php;
session_start();
if(isset($_SESSION[bms_chat_user])){
if(isset($_POST[submit])){
$chat = $_POST[chat];
$chatuser = $_POST[chatuser];
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

14/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

$sql = INSERT INTO `chat` (`username`,`chat`) VALUES ($chatuser,$chat);

mysql_query($sql);
}
}else{
header(Location:../login.php);
}
?>
Di dalam script postchat.php juga dilengkapi fungsi untuk menghindari user yang tidak melakukan login
melakukan chat. Sampai posisi ini seharusnya ketika tombol submit chat ditekan, maka pada database
akan muncul satu record, namun belum muncul di chat_list halaman webchat. Perhatikan, bahwa script
PHP yang tidak diinclude oleh index.php, maka kita harus memasang include database tersendiri.
Potongan script yang saya bahas adalah melompat ke userlist.
setInterval(
function(){
$.get(scripts/chat_userlist.php, function(bmsJsonUserList) {
var bmsJsonUserData = JSON.parse(bmsJsonUserList);
if(bmsJsonUserData!==null){
var userList=;
$.each(bmsJsonUserData,function(){
userList = userList + <div class=user_username>&nbsp;&nbsp;<img src=+this.gravatar+'>
+this.username+'</div><div style=clear:both;></div>';
});
$(#chat_userlist).html(userList);
}
});
},1000);
Pada bagian ini kita memanfaatkan banyak hal dari Javascript/JQuery. Antara lain, kita melakukan
pemanggilan fungsi dengan menggunakan setInterval() setiap 1000 ms;
Sintaks umum setInterval adalah
setInterval(function(){/*diisi suatu fungsi*/},1000)
Fungsi pada setInterval di atas, kita isi dengan kebutuhan kita menampilkan userlist. Mengapa selalu
harus dilakukan setInterval? Karena kebutuhan kita memantau setiap saat user yang masuk atau keluar.

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

15/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

Fungsi setInterval tadi kita gunakan untuk memanggil script chat_userlist.php dengan fungsi JQuery
$.get(). $.get() bertugas melakukan HIT ke sebuah url, dan mengambil valuenya dalam bentuk sebuah
fungsi. Susunan umum $.get() adalah
$.get(url, function(tangkapan) {
alert(tangkapan);
/*fungsilain*/
})
Pada script chat.js kita mengambil value hasil pengambilan GET dengan format data object JSON
(Javascript Object Notation) yang dihasilkan oleh script chat_userlist.php dengan fungsi json_encode().
Data tadi kita namai bmsJsonUserList. Karena masih berwujud format JSON object, maka data tersebut
akan diparse oleh fungsi JSON.parse hingga menjadi data JSON text yang dapat dipisahkan lagi. Untuk
lebih memahami JSON, dapat dibaca le script chat_userlist.php ini
<?php
session_start();
if(!isset($_SESSION[bms_chat_user])){
header(Location:login.php);
}
include database.php;
$sql2 = SELECT *, CONCAT(http://gravatar.com/avatar/,MD5(email),?s=25) AS gravatar FROM user
ORDER BY loginDate DESC;
$q2 = mysql_query( $sql2 );
while( $r2 = mysql_fetch_assoc( $q2 ) ){
$arr[] = $r2;
}
echo json_encode( $arr );
?>
Wujud JSON ini akan seperti berikut
[{username:bimosaurus,email:bimosaurus@gmail.com,loginDate:2013-07-09
00:17:28,gravatar:http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25},
{username:bimo,email:bimosaurus@gmail.com,loginDate:2013-07-08
06:57:35,gravatar:http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25}]
Yaitu tiap record database yang diselect akan ditampilkan dalam baris berbeda lengkap dengan eldeldnya.
Untuk memisahkan recordnya, selanjutnya le chat.js akan menggunakan fungsi JQuery $.each(), dimana
http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

16/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

tiap record akan dipisahkan, dan diolah. Pengambilan data dapat dilakukan dengan : this.{namaeld},
misal : this.username, this.email, this.loginDate dan lain sebagainya.
Pada bagian
.
.
userList = userList + <div class=user_username>&nbsp;&nbsp;<img src=+this.gravatar+'>
+this.username+'</div><div style=clear:both;></div>';
});
$(#chat_userlist).html(userList);
.
.
Kita membuat sebuah susunan div dari tiap daftar user dan disusun berjajar sesuai dengan divnya.
Variabel javascript userlist yang semula kosong akan berisi sejumlah data user lengkap dengan segala
propertinya. Kemudian setelah lengkap userlist tersebut akan dimasukkan ke dalam elemen div
#chat_userlist.
Div chat_userlist yang semula kosong, akan berubah berisi sejumlah data jumlah user online. Sebagai
tambahan, kita menggunakan gravatar, sebuah fungsi global di dunia maya untuk mengambil gambar
berdasar email. Dalam hal ini saya menggunakan fungsi SQL yang terdapat pada query. Jika kita memiliki
sebuah akun gravatar, maka gambar kita dapat diakses pada halaman:
http://gravatar.com/avatar/{md5(email)}?s=ukuran
Untuk jelasnya bisa dilihat pada SQL di chat_userlist.php.
============================================================
Kita masuk bagian paling utama dari sebuah fungsi Chat.js
setInterval(
function(){
last = $(#timecontainer).text();
$.get(scripts/getchat.php?last=+last, function(bmsJsonComment) {
var bmsCommentData = JSON.parse(bmsJsonComment);
if(bmsCommentData!==null){
$.each(bmsCommentData, function(){

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

17/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

var insideComment = <div id=isi><div class=isi_username>+this.username+'</div><div class=isi_time>

(+this.chatTime+)</div><div class=isi_isi> +this.chat+ </div><div style=clear:both;></div></div>';
$(#centerbox).append(insideComment).children(:last).hide().fadeIn(1000);
var lastBmsComment = document.getElementById(timecontainer);
lastBmsComment.innerHTML = this.timeres;
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
$(#chat).focus();
});
};
});
},500);
Konsep sederhana dari script ini adalah : merefresh fungsi setiap 500ms, menanyakan pada getchat.php
apakah ada data chat yang LEBIH BARU ketimbang waktu yang telah ada di elemen timecontainer? Jika
ada, maka akan diambil dalam wujud JSON, ditampilkan pada halaman chat list, dan selanjutnya isi yang
ada pada timecontainer diubah dengan data yang terbaru. Simpel ya? Hehehe
Fungsi utama tetaplah setInterval(). setInterval akan mengecek isi div timecontainer, dan selanjutnya akan
membaca getchat.php menggunakan tur JQuery $.get(). Perhatikan pada bagian
$.get(scripts/getchat.php?last=+last, function(bmsJsonComment) {.})
Variabel Javascrit last diambil dari timecontainer, dan dimasukkan sebagai parameter GET pada
getchat.php, selanjutnya get() akan dilanjutkan dengan data JSON. Ikutilah proses parsing object JSON
hingga pemilahan data chat. Seluruh data chat yang belum terangkut akan dimasukkan dalam variabel
javascript berikut ini:
var insideComment = <div id=isi><div>+this.username+'</div><div>(+this.chatTime+)</div><div>
+this.chat+ </div><div style=clear:both;></div></div>';
Kemudian data insideComment tersebut akan kita pasok ke dalam div #centerbox, dengan fungsi append
dan animasi kombinasi hide dan fadeIn
$(#centerbox).append(insideComment).children(:last).hide().fadeIn(1000);
Tugas selanjutnya dalam chat.js ini adalah mengubah timecontainer, agar selalu update, dan chat yang
lama tidak akan muncul dua kali.

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

18/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

var lastBmsComment = document.getElementById(timecontainer);

lastBmsComment.innerHTML = this.timeres;
Lantas kembali menepatkan scroll pada bagian bawah saat chat terbaru datang, sekaligus melakukan
penempatan KURSOR chat, agar selalu terletak di kolom input chat
var objDiv = document.getElementById(centerbox);
objDiv.scrollTop = objDiv.scrollHeight;
$(#chat).focus();
Oh ya, apakah isi le getchat.php yang ada pada directory scripts?
<?php
session_start();
if(!isset($_SESSION[bms_chat_user])){
header(Location:../login.php);
}
include database.php;
$last = $_GET[last];
$sql = SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,-,), ,),':,)) as timeres FROM chat
WHERE (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,-,), ,),':,)) > $last;
$query = mysql_query($sql);
//echo $sql;
while( $result = mysql_fetch_assoc( $query ) ){
$arr[] = $result;
}
echo json_encode($arr);
?>
Saya melakukan replacing tanda : dan - untuk fungsi waktu agar bisa dibandingkan dengan di
timecontainer.
Sebenarnya ada cara lain membuat webchat yang tidak serumit ini, yaitu dengan cara merefresh halaman
dengan javascript. Namun pengalaman, melakukan refresh langsung dengan javascript untuk seluruh
elemen, akan segera membuat beban browser naik dan akan menaikkan usage CPU.

Sumber : Buku PHP, JavaScript, MYSQL dan J-Query Aplikasi interaktif

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

19/20

4/10/2015

TutorialMembuatAplikasiWebchatdenganPHP,MySQL,JQueryBlogRidwan,SST

Like 2peoplelikethis.Bethefirstofyourfriends.

This entry was posted in Belajar j-Query, PHP Programming on August 16, 2013
[http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorial-membuat-aplikasi-webchat-dengan-php-mysqljquery/] .

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorialmembuataplikasiwebchatdenganphpmysqljquery/

20/20