Selamat malam minna hehe ini adalah sebuah postingan lanjutan dari postingan sebelumnya yang berjudul Pengertian PHP dan HTML jika postingan sebelumnya hanya memberikan sekedar pengertian dan sebuah pemahaman memdasar tentang PHP dan html disini kita akan membahas lebih tentang sintak dasar yang sering digunakan dalam rumus dasar PHP. Seperti yang kita ketahui bahwasanya sintaq dasar php itu di awali dengan menggunakan <?php dan di akhiri dengan ?> Contoh simpel adalah <?php echo "hallo dunia" ?> Sintaq dasar ini digunakan untuk menampilkan tulisan hallo dunia dan ini hanya contoh Php tanpa database. Dan jika kita ingin menggabungkan HTML dengan php ( jika lupa dengan html klik disini ) makam sintaq akan seperti ini : <html> <head><title>Belajar HTML Dan PHP</title><head> <body> <?php echo "hallo janda" ?> </body> </html> Cukup simpel kan nah... Skrip php ini
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) file script server utama yaitu :
- index.php
- login.php
- logout.php
Script
Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script
sisi-client (diletakkan di 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)
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.
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
PgSQL
|
1
2
3
4
5
6
|
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 field username, chat, chatTime dan id
PgSQL
|
1
2
3
4
5
6
7
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?php
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>
</html>
|
Script
database yang saya buat, saya letakkan di direktori scripts, dan berisi cukup
simpel:
database.php
PHP
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?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
|
1
2
3
4
5
6
7
8
9
|
<?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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<?php
include "scripts/database.php";
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'];?> <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>
<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
|
1
2
3
4
5
6
|
<?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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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>
<?php
}
?>
|
File CSS
yang saya bangun adalah sebagai berikut:
STYLES.CSS
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
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:#fff;
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 #fff;
overflow:auto;
float:left;
}
#chat_userlist{
float:left;
margin-top:100px;
margin-left:10px;
background:#14178f;
color:#fff;
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 #fff;
overflow: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;
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);
filter: 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{
float:left;
font-size:10px;
margin-right:10px;
color:#bed;
}
.isi_isi{
float:left;
font-size:12px;
}
#timecontainer{
display:none;
visibility:hidden;
}
#navbar{
height:25px;
background:#000;
color:#fea;
font-size:14px;
text-align:right;
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);
filter:
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?
Sudah?
=================================================
Selanjutnya
kita membahas control utama dari sistem chat ini yaitu file chat.js beserta
script server pendukungnya. Chat.js akan berisi sebagai berikut:
CHAT.JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
//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();
});
};
});
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"> <img
src="'+this.gravatar+'"> - '+this.username+'</div><div
style="clear:both;"></div>';
});
$("#chat_userlist").html(userList);
}
});
},3000);
|
Mari kita
bahas satu-satu:
PENGIRIM
CHAT
JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
|
$("#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;
});
|
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)
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 file 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 dengan fasilitas fungsi $.post(), JQuery memasok data ke file 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 :
JavaScript
|
1
2
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
include
"database.php";
session_start();
if(isset($_SESSION['bms_chat_user'])){
if(isset($_POST['submit'])){
$chat
= $_POST['chat'];
$chatuser
= $_POST['chatuser'];
$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.
JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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"> <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
JavaScript
|
1
|
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.
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
JavaScript
|
1
2
3
4
|
$.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 file script chat_userlist.php ini
PHP
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?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
|
1
|
[{"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 field-fieldnya.
Untuk
memisahkan recordnya, selanjutnya file chat.js akan menggunakan fungsi JQuery
$.each(), dimana tiap record akan dipisahkan, dan diolah. Pengambilan data
dapat dilakukan dengan : this.{namafield}, misal : this.username, this.email,
this.loginDate dan lain sebagainya.
Pada bagian
JavaScript
|
1
2
3
4
5
6
7
|
.
.
userList =
userList + '<div
class="user_username"> <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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
setInterval(
function(){
last
= $('#timecontainer').text();
$.get('scripts/getchat.php?last='+last,
function(bmsJsonComment) {
var
bmsCommentData = JSON.parse(bmsJsonComment);
if(bmsCommentData!==null){
$.each(bmsCommentData, function(){
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 fitur JQuery $.get().
Perhatikan pada bagian
JavaScript
|
1
|
$.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:
JavaScript
|
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>';
|
Kemudian
data insideComment tersebut akan kita pasok ke dalam div #centerbox, dengan
fungsi append dan animasi kombinasi hide dan fadeIn
JavaScript
|
1
|
$("#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.
JavaScript
|
1
2
|
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
JavaScript
|
1
2
3
|
var objDiv
= document.getElementById("centerbox");
objDiv.scrollTop
= objDiv.scrollHeight;
$("#chat").focus();
|
Oh ya,
apakah isi file getchat.php yang ada pada directory scripts?
PHP
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?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.
Nah, selamat
mencoba, mohon koreksi jika ada kesalahan, dan harapannya selalu : umpan balik.
Comments
Post a Comment