Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL,...

Lisensi Dokumen:Copyright © 2008-2014 ilmuti.orgSeluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiapdokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Tutorial Membuat Aplikasi Webchat dengan PHP,

MySQL, JQuery

Irfansyah

[email protected]

Abstrak

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat dimeebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chatterdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melaluihalaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannyatanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagianelemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefreshelemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser danmenghabiskan memori komputer.

Kata Kunci: Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery.

Pendahuluan

Bertujuan untuk menambah wawasan dan pengetahuan bahasa pemrograman. Semoga

bermanfaat di kemudian hari.

Pembahasan

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL danJQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluanpenyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untukpengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencobamerancang 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 dengantugasnya 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 500milisecond, jika terdapat chat baru maka akan ditampilkan chat baru tersebut, dengan caramenambahkan div(elemen) dibawah chat yang sudah ada sebelumnya, tanpa perlu merefreshhalaman utama webchat. Fungsi utama jquery yang digunakan oleh chat.js adalah : $.get()

Ketika user mengirimkan chat, maka chat.js akan mengirimkan kalimat beserta username yangdiambil dari session, dan membantu melakukan post ke sisi server, tanpa perlu merefreshhalaman utama chat.

Begitu juga dengan daftar user, chat.js akan selalu melakukan pengecekan setiap 500ms, danakan segera menampilkan perubahan setiap kali terdapat perubahan penambahan user ataulogout user.

Untuk masuk ke dalam script utama, tentu akan menggunakan fasilitas Login, dimana padafasilitas ini, login tidak menggunakan password, namun menggunakan username dan email.Sedangkan email tersebut nantinya akan digunakan untuk mengambil gambar avatar dari situsgravatar.com.

Saat dilakukan login, maka JIKA sudah terdapat username yang sama, akan dianggap gagal dandiminta mengulang login, sedangkan JIKA belum terdapat username yang sama, makaSESSION 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` (


ùsername` varchar(20) NOT NULL,

èmail` varchar(50) DEFAULT NULL,

`loginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATECURRENT_TIMESTAMP,

PRIMARY KEY (ùsername`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Tabel chat berisi field username, chat, chatTime dan id

CREATE TABLE `chat` (

ìd` int(23) NOT NULL AUTO_INCREMENT,

ùsername` varchar(255) DEFAULT NULL,

`chat` text,

`chatTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATECURRENT_TIMESTAMP,

PRIMARY KEY (ìd`)

) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;

Script login yang saya buat adalah demikian :

login.php

<?php

include “scripts/database.php”;

if( isset( $_POST['submit'] ) ){


$username = $_POST['username'];

$email = $_POST['email'];

$sql = “INSERT INTO ùser` (ùsername`,èmail`) 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

$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 userdan menghapus dari database. Selanjutnya akan diredirect ke login.php

login.php

<?php

session_start();


$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


session_start();

if(!isset( $_SESSION['bms_chat_user'] )){


}

?>

<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'];?> <ahref=”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 ketikahalaman 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 baruketika 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>

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



}

#form input[type="submit"]{

width:100px;

height:40px;

font-size:30px;


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;


margin-right:20px;

margin-bottom:10px;

border-radius:5px;



}

#form-login input[type="submit"]{

width:100px;

height:40px;

margin-bottom:10px;

font-size:30px;


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 listyang masih kosong. Sudah?

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

Selanjutnya kita membahas control utama dari sistem chat ini yaitu file chat.js beserta scriptserver 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();



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><divclass=”isi_time”>(‘+this.chatTime+’)</div><div class=”isi_isi”> – ‘+this.chat+’ </div><divstyle=”clear:both;”></div></div>’;

$(“#centerbox”).append(insideComment).children(‘:last’).hide().fadeIn(1000);

var lastBmsComment = document.getElementById(‘timecontainer’);

lastBmsComment.innerHTML = this.timeres;




$(“#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”> <imgsrc=”‘+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();



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(lihatform)

Sebelumnya form akan ditahan dengan fungsi preventDefault() untuk menjaga agar tidakmelakukan 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 dipostsaja)

Selanjutnya setelah data dipost, maka untuk menghindari karakter tertinggal di form, maka formharus direset agar kembali kosong dan siap digunakan untuk data baru. Fungsi yang menangkaphal ini adalah bagian : $(“form#chatForm”)[0].reset();

Script bagian :



berfungsi untuk selalu menempatkan chat terbaru yang terletak bagian bawah, agar selaluterscroll ke bawah. Jika tidak digunakan script ini maka scrollbar tidak akan dinamis dan chatterbaru tidak akan terlihat sebelum discroll. Semoga bisa dipahami.

Lantas seperti apa sih script postchat.php yang diarah oleh potongan script diatas tadi? Script inihanya 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'];

$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 tidakmelakukan login melakukan chat. Sampai posisi ini seharusnya ketika tombol submit chatditekan, maka pada database akan muncul satu record, namun belum muncul di chat_listhalaman webchat. Perhatikan, bahwa script PHP yang tidak diinclude oleh index.php, maka kitaharus 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(){


});


}

});

},1000);

Pada bagian ini kita memanfaatkan banyak hal dari Javascript/JQuery. Antara lain, kitamelakukan 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. Mengapaselalu harus dilakukan setInterval? Karena kebutuhan kita memantau setiap saat user yangmasuk atau keluar.

Fungsi setInterval tadi kita gunakan untuk memanggil script chat_userlist.php dengan fungsiJQuery $.get(). $.get() bertugas melakukan HIT ke sebuah url, dan mengambil valuenya dalambentuk 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 objectJSON (Javascript Object Notation) yang dihasilkan oleh script chat_userlist.php dengan fungsijson_encode(). Data tadi kita namai bmsJsonUserList. Karena masih berwujud format JSONobject, maka data tersebut akan diparse oleh fungsi JSON.parse hingga menjadi data JSON textyang dapat dipisahkan lagi. Untuk lebih memahami JSON, dapat dibaca file scriptchat_userlist.php ini

<?php

session_start();

if(!isset($_SESSION['bms_chat_user'])){


}


$sql2 = “SELECT *, CONCAT(‘http://gravatar.com/avatar/’,MD5(email),’?s=25') AS gravatarFROM 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":"[email protected]","loginDate":"2013-07-0900:17:28","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"},{"username":"bimo","email":"[email protected]","loginDate":"2013-07-0806:57:35","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"}]

Yaitu tiap record database yang diselect akan ditampilkan dalam baris berbeda lengkap denganfield-fieldnya.

Untuk memisahkan recordnya, selanjutnya file chat.js akan menggunakan fungsi JQuery$.each(), dimana tiap record akan dipisahkan, dan diolah. Pengambilan data dapat dilakukandengan : this.{namafield}, misal : this.username, this.email, this.loginDate dan lain sebagainya.

Pada bagian

.

.



});


.

.

Kita membuat sebuah susunan div dari tiap daftar user dan disusun berjajar sesuai dengandivnya. Variabel javascript userlist yang semula kosong akan berisi sejumlah data user lengkapdengan segala propertinya. Kemudian setelah lengkap userlist tersebut akan dimasukkan kedalam 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 untukmengambil gambar berdasar email. Dalam hal ini saya menggunakan fungsi SQL yang terdapatpada query. Jika kita memiliki sebuah akun gravatar, maka gambar kita dapat diakses padahalaman:

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(){

var insideComment = ‘<div id=”isi”><div class=”isi_username”>’+this.username+’</div><divclass=”isi_time”>(‘+this.chatTime+’)</div><div class=”isi_isi”> – ‘+this.chat+’ </div><divstyle=”clear:both;”></div></div>’;







});

};

});

},500);

Konsep sederhana dari script ini adalah : merefresh fungsi setiap 500ms, menanyakan padagetchat.php apakah ada data chat yang LEBIH BARU ketimbang waktu yang telah ada dielemen timecontainer? Jika ada, maka akan diambil dalam wujud JSON, ditampilkan pada


halaman chat list, dan selanjutnya isi yang ada pada timecontainer diubah dengan data yangterbaru. Simpel ya? Hehehe

Fungsi utama tetaplah setInterval(). setInterval akan mengecek isi div timecontainer, danselanjutnya akan membaca getchat.php menggunakan fitur JQuery $.get(). Perhatikan padabagian

$.get(‘scripts/getchat.php?last=’+last, function(bmsJsonComment) {….})

Variabel Javascrit last diambil dari timecontainer, dan dimasukkan sebagai parameter GET padagetchat.php, selanjutnya get() akan dilanjutkan dengan data JSON. Ikutilah proses parsingobject JSON hingga pemilahan data chat. Seluruh data chat yang belum terangkut akandimasukkan dalam variabel javascript berikut ini:

var insideComment = ‘<divid=”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, denganfungsi append dan animasi kombinasi hide dan fadeIn


Tugas selanjutnya dalam chat.js ini adalah mengubah timecontainer, agar selalu update, danchat yang lama tidak akan muncul dua kali.




Lantas kembali menepatkan scroll pada bagian bawah saat chat terbaru datang, sekaligusmelakukan penempatan KURSOR chat, agar selalu terletak di kolom input chat




Oh ya, apakah isi file getchat.php yang ada pada directory scripts?

<?php

session_start();

if(!isset($_SESSION['bms_chat_user'])){

header(“Location:../login.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;

}


FOTO

echo json_encode($arr);

?>

Saya melakukan replacing tanda “:” dan “-” untuk fungsi waktu agar bisa dibandingkan dengandi timecontainer.

Sebenarnya ada cara lain membuat webchat yang tidak serumit ini, yaitu dengan cara merefreshhalaman dengan javascript. Namun pengalaman, melakukan refresh langsung dengan javascriptuntuk seluruh elemen, akan segera membuat beban browser naik dan akan menaikkan usageCPU.

Penutup

Sekian Pembahasan Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery.Semoga Artikel ini bermanfaat untuk para programmer.

Referensi

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

http://ciqwan.blog.unigha.ac.id/2013/08/16/tutorial-membuat-aplikasi-webchat-dengan-php-mysql-jquery/

Biografi

Irfansyah

Mahasiswa jurusan Teknik Informatika dengan konsentrasi Software

Engineering

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL,...

Documents

Transcript of Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL,...