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.

Program Reporting C# Menggunakan Report Viewer

Sebenarnya ini salah satu program dari tugas kuliah saya yang diharuskan untuk diposting ke blog. Yah, walaupun tanpa disuruh pun tetap bakal saya posting sih, hehehe. Langsung saja, program yang akan kita buat kali ini menggunakan dua buah form, dan sesuai dengan judul postingan kali ini, tools reporting yang akan digunakan adalah report viewer yang pada Visual Studio 2013 Comunity sudah terinstal secara bawaan.

Saya anggap kalian sudah mengkoneksikan database yang kalian buat pada form1, jadi kita langsung ke proses pembuatan reportingnya saja. Tampilan dari form 1 yang sudah saya koneksikan dengan database, kurang lebih seperti gambar di bawah : 

 

Sebelum masuk ke langkah pertama, lebih dulu tambahkan button print pada form 1. Setelah itu lanjutkan ke langkah - langkah di bawah :

#Step1 : Buat form kedua (form baru).

 

#Step2 : Cari tools report viewer dan drag ke dalam form 2, kemudian atur tampilannya seperti di bawah.

 

#Step3 : Pilih design a new report.

 

#Step4 : Pilih data source, jika belum ada klik new kemudian cari database yang ingin kalian tampilkan.

#Step4 : drag semua tabel pada database ke dalam value, kemudian tingal klik next 2x dan finish.

 

 #Step5 : kembali ke form 2, kemudian ganti choose reportnya dengan yang kalian buat sebelumnya.

#Step6 : pada button kembali tambahkan sintaks berikut :

 

#Step7 : selesai dengan form 2, kita kembali ke form 1dan berikan sintaks berikut pada event formClosed dan button print.

 

Sekarang program kita sudah selesai, selanjutnya silakan untuk coba menjalankan programmnya. Sekian postingan saya kali ini, semoga tutorial yang saya buat ini dapat membantu dan bermanfaat.