[Reblog from bimosaurus.com] Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

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

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.

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

Karena terbatasnya fasilitas di wordpress.com untuk keperluan coding program, maka saya sarankan membaca selengkapnya di http://bimosaurus.com/2013/07/09/tutorial-membuat-aplikasi-webchat-dengan-php-mysql-jquery/

DEMO

Download