Membuat chat dengan dengan ajax

Membuat chat dengan dengan ajax

1157
2
SHARE

Haloo..kawan.. kali ini saya akan menulis tentang bagaimana membuat chat (lebih tepatnya shoutbox) dengan dengan ajax.

Dalam shoutbox yang akan kita buat ini, skenarionya adalah pengguna harus login dengan memasukkan username. Selanjutnya user dapat berkirim pesan dalam shoutbox. Nama username dan waktu kirim pesan akan masuk ke dalam shoutbox. User juga akan melihat pesan yang dikirim oleh pengguna lain.

Alur prosesnya kurang lebih adalah sebagai berikut :
1. Kita buat form input pesan dengan div untuk hasil chat di atasnya. Kita juga menambahkan smilies yang pernah kita bahas pada artikel sebelumnya.
2. Kita tambahkan session, sehingga user yg belum login akan dimunculkan halaman login.
3. Tambahkan fungsi javascript untuk mengirimkan pesan, menghapus isi chat dan scroll otomatis div ke bawah bila ada chat baru.
4. Buat file PHP untuk menghandle simpan dan hapus pesan.

Sebagai catatan, untuk kali ini saya hanya menggunakan file txt untuk menyimpan hasil chat. Pada kesempatan lain, bila sempat saya akan menulis dengan menggunakan database. Atau anda bisa memodifikasinya sendiri sehingga bisa menggunakan database.

Baik langsung saja kita mulai membuatnya.
Step 1 : Donwload gambar untuk smilies (anda bisa mendownloadnya di akhir artikel ini). Download juga jquery.
Step 2 : Buatlah index.php dengan kode sbb :

Step 3 : Buatlah fungsi untuk menuliskan dan menghapus text pada file txt.

Step 4 : Buatlah file simpan untuk menghandle perintah simpan dan clear

Step 5 : Buatlah file txt kosong bernama log.txt

Jalankan file index.php melalui browser dan lihatlah hasilnya. Dibawah ini adalah link demo dan download tutorial ini.

DEMO | DOWNLOAD

Terima kasih telah berkunjung ke harviacode.com. Semoga bermanfaat. Jangan lupa di share ya.

Bagikan artikel ini ya.. terima kasih

2 COMMENTS

LEAVE A REPLY