Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, …ilmuti.org/.../2014/04/irfansyah-Tutorial-membuat-Aplikasi-Webchat.pdf... kita bisa merefreshkan beberapa bagian ... penyederhanaan
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.
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
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();
include “scripts/database.php”;
$sql = “DELETE FROM user WHERE username=’$_SESSION[bms_chat_user]‘”;
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:
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 :
var objDiv = document.getElementById(“centerbox”);
objDiv.scrollTop = objDiv.scrollHeight;
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:
$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.
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'])){
header(“Location:login.php”);
}
include “database.php”;
$sql2 = “SELECT *, CONCAT(‘http://gravatar.com/avatar/’,MD5(email),’?s=25') AS gravatarFROM user ORDER BY loginDate DESC”;
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.
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.
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 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
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
Lantas kembali menepatkan scroll pada bagian bawah saat chat terbaru datang, sekaligusmelakukan 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?
<?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”;
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