Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

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 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.

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 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.

Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh 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 setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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) 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.

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 ùser` ( Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh 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 setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

ùsername` varchar(20) NOT NULL, èmail` varchar(50) DEFAULT NULL, `loginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_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 UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (ìd`) ) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;

Script login yang saya buat adalah demikian :

login.php

$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” ); }

} ?> JQuery BMS href=”styles.css”></head><br /> <br /> Chat<br /> <br /> System
rel=”stylesheet”

type=”text/css”

name=”username”

value=”username”


Script database yang saya buat, saya letakkan di direktori scripts, dan berisi cukup simpel:

database.php


$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

header(“Location:login.php”); ?>


File tampilan utama adalah index.php yang saya rancang demikian:

index.php

JQuery BMS href=”styles.css”></head><br /> <br /> Chat<br /> <br /> System
rel=”stylesheet”

type=”text/css”

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


Logout

in

as

”

.

”>

name=”chatuser”

value=”
echo


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

Script “scripts/datetime.php” hanya bertugas melakukan parsing waktu terakhir chat ketika halaman dibuka user seperti berikut:

datetime.php

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

$sql1 = “SELECT * FROM chat”; $q1 = mysql_query( $sql1 ); while( $r1 = mysql_fetch_array( $q1 ) ){ ?>

()

–

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-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; Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh 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 setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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?

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

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

//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 = ‘
’+this.username+’
(‘+this.chatTime+’)
– ‘+this.chat+’
’;

$(“#centerbox”).append(insideComment).children(‘:last’).hide().fadeIn(1000); var lastBmsComment = document.getElementById(‘timecontainer’); lastBmsComment.innerHTML = this.timeres; var objDiv = document.getElementById(“centerbox”); Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh 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 setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

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 + ‘
– ‘+this.username+’
’;


}); $(“#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; });

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 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 :

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: Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh 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 setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

postchat.php

if(isset($_POST['submit'])){ $chat = $_POST['chat']; $chatuser = $_POST['chatuser'];

$sql = “INSERT INTO `chat` (ùsername`,`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 + ‘
’; }); $(“#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.

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 file script chat_userlist.php ini


$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-09 00:17:28","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25 "},{"username":"bimo","email":"[email protected]","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

. .


userList = userList + ‘
’; }); $(“#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(){

var insideComment = ‘
’;

$(“#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

$.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 = ‘
’;

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.

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 file getchat.php yang ada pada directory scripts?

$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.

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-phpmysql-jquery/

Biografi Irfansyah Mahasiswa jurusan Teknik Informatika dengan konsentrasi Software Engineering FOTO


Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Recommend Documents