Membuat Aplikasi Chatting Dengan Ajax jQuery dan PHP Part 1

Posted on Posted in Pencerdasan

Selain mengisi liburan saya dengan menyelesaikan tantangan 30 Days of Code dari Hackerrank, saya memutuskan untuk mempelajari Ajax dengan metode project based (belajar sesuatu dengan cara membuat sesuatu), dan project yang saya lakukan adalah : Membuat Aplikasi Chatting Sederhana dengan AJAX dan PHP.

membuat aplikasi chatting sederhana dengan ajax dan php
Asynchronous Javascript and XML

Kenapa AJAX?

Karena (bedasarkan yang saya baca), AJAX dapat digunakan untuk mengurangi beban server dalam menghandle request dari user karena proses yang dilakukan secara asynchronous.

Ribet? Sedikit…. (hehe).

Lebih lengkapnya bisa teman – teman baca di W3Schools.

AJAX memungkinkan sebuah aplikasi web untuk melakukan perubahan konten tanpa melakukan refresh halaman secara keseluruhan. Sehingga, server cukup mengirim data yang diminta saja tanpa harus mengirim ulang keseluruhan halaman web.

 

Kenapa aplikasi web chatting?

Simpel, karena orang Indonesia suka ngerumpi 🙂

Selain itu, aplikasi yang fungsinya kelihatan jelas dan paling gampang (di otak saya) adalah aplikasi web chatting.

Jujur saja saya mengambil ide ini dari aplikasi Socket.io, dimana tiap user terlibat dalam chat public. Walaupun saya hanya menggunakan AJAX dan PHP tanpa pemrograman socket apapun, aplikasi web chatting sederhana buatan saya sudah 11 – 12 dengan punyanya socket.io (hehe).

Ada beberapa fitur sederhana yang saya terapkan disini:

  • User memilih nickname dulu sebelum bergabung, setelah itu barulah bisa bergabung di chat room dengan nickname yang telah dipilih.
  • Fitur Admin : Admin bisa mengclear semua chat yang ada di chat room dan memiliki warna nickname yang berbeda (sedikit tidak penting, tapi yasudahlah).

Berikut adalah tampilannya:

membuat aplikasi chatting sederhana dengan ajax dan php
Halaman Login Awal
membuat aplikasi chatting sederhana dengan ajax dan php
Halaman Chatroom

 

Requirements:

  • XAMPP – Sebagai web server
  • Browser – Saya pakai Google Chrome
  • Text Editor – Saya pakai Sublime text, teman – teman boleh menggunakan yang lain sesuai selera
  • Pengetahuan dasar HTML, JavaScript dan PHP
  • Saya menggunakan front-end framework Bootstrap supaya mobile-friendly dan bisa dijalankan di HP, kalau teman – teman prefer framework yang lain, monggo.
  • Niat dan ketekunan

Membuat Aplikasi Chatting Sederhana dengan AJAX dan PHP

1. Membuat Include Asset

“Jangan mengulang – ulang penulisan asset yang selalu dibutuhkan di semua halaman”

– Dosen Pweb

Itulah wejangan sakti dari dosen Pemrograman Web saya. Jadi, disini kita akan menerapkan fungsi include pada bahasa PHP untuk mempermudah kita mengimport asset – asset yang dibutuhkan. Maka, buatlah sebuah file baru bernama assets.php

 

 

Nah, di setiap halaman yang kita buat nanti, cukup menginclude si assets.php ini

 

2. Membuat File CSS

CSS ini adalah desain yang saya buat sendiri dan tidak harus diikuti oleh teman – teman. Silahkan teman – teman sesuaikan dengan selera masing – masing. File ini saya namakan custom.css

 

 

3. Membuat Halaman Login

Well, halaman ini bukan literally login, sih. Karena cuma untuk memilih username saja. Halaman ini kita namakan login.php

 

Penjelasan dari kode diatas

  • Line 1 : Dilakukan pengecekan apakah user sudah melakukan login atau belum. Bila user sudah melakukan login, maka halaman ini tidak bisa diakses.
  • Line 6 : Memasukkan potongan kode assets.php kedalam halaman HTML kita, sehingga kita tidak perlu lagi menuliskan manual asset – asset yang dibutuhkan.
  • Line 15 – 34 : Membuat tampilan form login.
  • Line 25 : Digunakan untuk memunculkan form validasi password apabila admin melakukan login. Penjelasan lengkapnya akan diberikan di Part 2.

 

4. Membuat Tampilan Chat Room

Ini adalah halaman chat utama, dimana semua pesan yang dikirim tiap user ditampilkan disini. Halaman ini saya namakan index.php

 

Ada beberapa detil yang harus kita perhatikan pada halaman index.php ini

  1. Pada line 1 – 7, dilakukan pengecekan session. Jadi user yang belum melakukan login, tidak bisa mengakses halaman chat room ini.
  2. Pada line 22 – 27, terdapat sebuah script PHP yang berfungsi untuk membedakan menu navigasi antara user biasa dan admin. Bila yang sedang login adalah admin, maka menu navigasi menampilkan command khusus admin seperti delete chat.
  3. Pada line 38 – 45, terdapat sebuah script PHP yang menampilkan semua histori chat yang tersimpan dalam file log dengan fitur file read milik PHP.

 

5. Buat File log.html

Buatlah sebuah file log.html yang diletakkan di folder yang sama dengan direktori kerja teman – teman. File ini tidak usah diisi apa – apa ya, cukup dibuat dan dikosong kan saja. Karena log.html ini berfungsi untuk menyimpan semua chat yang dikirimkan di chat room.

Nah, kita sudah membuat semua tampilan utama dari aplikasi chatting yang akan kita buat. Pada part selanjutnya kita akan sama – sama belajar penggunaan AJAX untuk mengirimkan data.

Oh iya, bila ada teman – teman yang mengalami kendala, jangan sungkan untuk bertanya di kolom komentar ya.

 

Part 2 – Coming Soon

 

Leave a Reply

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