Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

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.

webchat

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)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.

webchat1

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.

webchat2

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

 

Tabel chat berisi field username, chat, chatTime dan id

 

Script login yang saya buat adalah demikian :

login.php

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

database.php

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

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

index.php

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

File CSS yang saya bangun adalah sebagai berikut:

STYLES.CSS

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

Mari kita bahas satu-satu:

PENGIRIM CHAT

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 :

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

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

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.

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

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

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

Wujud JSON ini akan seperti berikut

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

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

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

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:

Kemudian data insideComment tersebut akan kita pasok ke dalam div #centerbox, dengan fungsi append dan animasi kombinasi hide dan fadeIn

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

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

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

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.

60 thoughts on “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

  1. ijin copy ya mas mudah mudahan bermanfaat ilmunya
    o.. iya stlh sy coba di kmptr sy, pesan yg diketik akan muncul dan berulang ulang
    tetapi yg di demokan gak berulang kok bisa ya mas
    terima kasih mohon pencerahan

    1. Silakan mas, dengan senang hati semoga ilmu berguna. Oh ya pesan yang diketik bisa muncul berulang karena kesalahan saya menempatkan pengubah waktu.

      Pengubah waktu ada di :

      Pada script di atasnya terjadi looping, dan ketika belum menemukan bahwa waktu berubah, masih akan di loop. Sementara terjadi masalah koneksi internet, yang memungkinkan sebelum waktu berubah, looping telah terjadi beberapa kali karena dianggap waktunya belum lebih besar daripada di #timecontainer.

      Solusinya adalah Pengubah waktu diletakkan pada looping bagian atas, atau setInterval ditambah waktunya :)

      misal:

      ATAU

      Nah selamat mencoba, dan terimakasih sekali koreksinya :)

    2. Telah saya cek ulang, permasalahan lainnya adalah pada bagian
      .hide().fadeIn(1000);
      dihilangkan saja. Karena fadeIn nya lebih besar daripada nilai setInterval 500 ::)

      Terimakasih koreksinya ya

  2. mas, sy uda download n ekstrak filenya, sy da config database.phpnya sesuai keinginan sy, tp saat sy jalankan di browser selalu aja login gagal..kira2 masalahnya dmn ya mas

    1. maaf sdr/sdri ocha, saya agak terlambat menjawab karena on project luar kota. pada konfigurasi database, setelah jelas, coba ketika login, apakah di dalam tabel user muncul satu record tertentu?
      Rancangan sistem kita adalah: ketika seseorang login, maka akan memasukkan satu user ke dalamnya. Ketika logout akan menghapusnya. Jika tidak bisa memasukkan record tertentu, cobalah gunakan chrome , dan ketika login, lihatlah pada Inspect Element dan lihat bagian error, apakah ada error? Jika error, berarti jquery gagal memasukkan variabel PHP. Sampai itu dulu, mari kita mitigasi bersama sama :)

  3. kenapa ketika saya jlankan muncul tulisan kayak gini di index gan,,,
    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\wamp\www\chat\scripts\chat_list.php on line 5

  4. artikel yang sangat bagus dan bermanfaat sekali mas. oh iya mas saya numpang tanya, saya udah coba, tapi ko satu user cuma bisa 1 kali ngechat ya mas ? ketika membalas chat maka chat yang barunya gak tampak, yang tampak cuma chat yang lamanya, atau yang pertama kali. terimakasih

  5. terimakasih gan atas tutorialnya
    sekarang dengan bantuan turorial dari anda website pertemanan saya jadi lengkap kayak facebook

    makasih gan mohon pencerahanya

  6. Bro gw ada masalah di sini nih…

    $last”;
    $query = mysql_query($sql);
    //echo $sql;
    while( $result = mysql_fetch_assoc( $query ) ){
    $arr[] = $result;
    }
    echo json_encode($arr);

    ?>

    SELECT *, (SELECT REPLACE(REPLACE(REPLACE(chatTime,’-',”),’ ‘,”),’:',”)) as timeres FROM chat WHERE (SELECT REPLACE(REPLACE(REPLACE(chatTime,’-',”),’ ‘,”),’:',”)) > $last
    Itu apa engga kaya gini SELECT FROM chat ??

    TOlong pencerahannya

    Warning: mysql_fetch_array() expects parameter 1 to be resource, string given in /home/u658181265/public_html/scripts/getchat.php on line 10 null

  7. Bro, saya udah berhasil login dan chat, tapi permasalahannya, kenapa setiap saya menuliskan chat tidak langsung muncul chat nya, musti di refresh dulu browsernya.

    1. Artinya adalah masih ada masalah di proses .post() JQUERY nya atau .get() nya

      .post() berfungsi untuk mengepostkan. Jika belum tampil namun di database sudah ada, berarti proses post sudah sukses, berarti masalah di .get() nya

  8. gan…ane download n ane coba kok pas login kok gak bisa yah…..malah user already taken?? kenapa ya gan?? mohon pencerahannya..makasih

  9. Trims pak,, saya ada tiga pertanyaan,,
    1. nama database2 yang diperlukan ada berapa dan apa saja?
    2. apa nama tabel2 dari masing2 database nya?
    3. bisa nggak pake xampp?
    Trims,, mohon maaf saya masih Newbie^^

  10. ijin download ya, lagi bikin web koperasi tapi diminta ada fasilitas chatingnya sama dosen (aneh bgt ya -_- ) ,,, sukses selalu :)

  11. gan…ane download n ane coba kok pas login kok gak bisa yah…..malah user already taken?? kenapa ya gan?? mohon pencerahannya..makasih.. ohiyaa saya juga udah cek di databasenya tapi empty atau kosong knapa itu bang??

  12. Demo-nya selalu menanyakan :
    This user is already taken

    padahal udah buat nama user yg unik dan susah, selalu katanya, user udah dipakai

  13. Makasih tutorialnya mas, saya ingin menanyakan kenapa saat pertama kali mengetik chat (kondisi tabel chat adalah kosong) chat tidak muncul di form chat melainkan harus direfresh terlebih dahulu. terimakasih.

  14. cara menambahkan emoticon gimana ya mas,,saya sudah bisa menampilkan di form chat,,tetapi belum bisa menginsert kan ke dalam chat nya..dimna kah tata letak dan query yg benar ? terima kasih

  15. Slamat siang mas, saya sudah buat file phpnya masing. tapi saya bingung untuk menggabungkannya untuk diimplementasikan kedalam web. Mohon pencerahannya mas. Trimakasih :)

  16. maaf mau tanya mas agar loginnya bisa private bagaimana ya?jadi admin dan user1 trus bila ada user 2 makan chat nya hanya admin dan user2 aja ???mohon pencerahannya

  17. kang ada file untuk database mysqlnya ga. biar saya langsung import. soalnya saya ga bisa2 di run. mungkin karna databasenya salah

  18. gan.. kenapa ya pas dibagian login selalu gagal terus???
    ada tulisan “This user is already taken ” terus..
    apa yg harus saya lakukan??
    mohon pencerahannya, Terima kasih~

  19. gan.. di bagian login.. gagal terus.. itu kenapa ya??
    ada tulisan “This user is already taken” itu terus,
    mohon pencerahannya gan.. Makasih ~

  20. gan, ini kenapa setiap saya nulis chat di form(text), itu tidak muncul di chat list .tetapi setiap di refresh manual, chat tadi muncul di chat list, apa ada code yg kurang?mohon bantuannya

  21. kereeen mas. ijin copas ya mas. ane mau ngembangin buat UKM kampus…
    tenang mas nanti dibawah nya ane kasih keterangan support by bimosaurus.
    paling ane mau edit tampilan mobile nya gan biar enak dilihat via mobile hhehe
    matur suwooon..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">