Bikin Web Chat Sederhana dengan MySQL, PHP, JQuery dan AJAX

Assalammualaikum, sudah lama sekali saya tidak membuat postingan karena kesibukan di dunia nyata yang membuat saya susah untuk menjalankan blog ini lagi. Nah, kebetulan kali ini saya dapat tugas untun memposting suatu tutorial tentang Jquery. Sudah tau belum apa itu JQuery? JQuery itu adalah library javascript yang bisa menyederhanakan document, event handling, animasi, dan juga AJAX sehingga halaman web yang kita buat dapat lebih dinamis lagi. Untuk mengunduh JQuery, kita bisa mengunduhnya langsung di jquery.com. Versi dari JQuery terbaru saat ini adalah JQuery versi 3.1.1.

Cukup sekilas mengenai JQuery, sekarang kita langsung saja masuk ke bagian tutorial. Sesuai dengan judul postingan saya di atas, kali ini kita akan coba membuat aplikasi web chat dengan menggunakan php, mysql, jquery dan AJAX. Di sini saya mendesain aplikasi web chatnya sedikit mirip dengan fitur chat pada facebook.

Langsung saja ke langkah – langkahnya :

Langkah yang pertama adalah buatlah terlebih dulu sebuah database pada MySQL, di sini saya memberikan nama databasenya dengan nama ”chatting”, lalu buat 2 buah tabel dengan nama “chatters” dan “messages”. Untuk isi tabelnya kurang lebih seperti di bawah ini :

Setelah membuat database-nya seperti di atas, selanjutnya kita membuat file config.php. Di dalam file ini kita buat konfigurasi terhadap database yang telah kita buat sebelumnya.

Selesai membuat file config.php, kita buat lagi index.php yang merupakan bagian utama dari halaman web yang kita buat. file ini akan secara otomatis di load oleh sistem, jika saat file ini di load user belum login, file ini akan memuat file login.php sedangkan bila user sudah dalam keadaan login yang di load adalah file chatbox.php. Bagian users.php pada bagian bawah baris program index.php ini berfugnsi untuk menampilkan user yang sedang online.

Lanjut ke pembuatan file login.php yang sebelumnya kita masukan pada index.php. File login ini berguna untuk menampilkan form login. Di sini saya hanya menggunakan nama sebagai otentikasi login nya, jadi user hanya perlu memasukan nama.

Lanjut lagi membuat file chatbox.php, pada file ini tidak terlalu banyak koding dan hanya berisi perintah untuk menampilkan balon text pada file msgs.php yang akan kita buat setelah ini, serta perintah untuk membuat textbox tempat kita akan menulis pesan.

Setelah membuat file chatbox.php, selanjutnya kita membuat file msgs.php yang berguna untuk menampilkan pesan yang dikirim dan juga pesan dari user lain.

Ketika kita mengirimkan pesan, pesan yang kita kirim tersebut akan dikirm ke file send.php. File send.php akan menangani pesan, memfilter dan memasukan memasukannya ke dalam database. Berikut ini script dari send.php :

Untuk menampilkan pengguna atau user yang sedang online, kita bisa menggunakan file users.php seperti di bawah ini :

File yang selanjutnya kita buat adalah user_online.php. File ini digunakan untuk mengecek apakah waktu pada tabel di database sama dengan waktu pada php server.

Jika sebelumnya ada file login.php, sekarang kita buat juga file logout.php nya, berikut scpritnya :

Koding - koding di atas masih bersifat polosannya, untuk memperindah hasil akhirnya nanti pada sisi client kita perlu membuat file css dan javascriptnya. Untuk file css nya saya beri nama chat.css, script css yang saya gunakan adalah sebagai berikut :

Untuk file javascriptnya saya beri nama dengan chat.js, berikut scriptnya :

Nah itu saja tutorial untuk membuat aplikasi webchat sederhana dari saya.

DEMO : Di sini
DOWNLOAD PROJECT : Di sini

Jika mau menjalankan project hasil download, buat lebih dulu database pada MySQL dengan nama yang sama seperti pada file "db", kemudian import.