Membuat Shoutbox / Chat system dengan PHP - Ajax - Mysql

Saat ini banyak sekali software messaging atau chat yang ada, yang dapat memudahkan kita untuk dapat berkomunikasi. Salah satu software yang ada dapat di jumpai dengan berbasis web, misalnya online customer care, shoutbox, dan lain-lain. Dengan memasang aplikasi chat di website memudahkan pengunjung untuk berinteraksi dengan pengembang web atau sesama user.

Berikut sedikit tutorial dalam membuat contoh sederhana aplikasi chat berbasis web menggunakan PHP, AJAX dan MySQL.



Pertama-tama siapakan 2 tabel dalam database MySQL, yaitu : webchat_users, webchat_lines yang masing-masing mempunyai struktur sebagai berikut :

webchat_users :

CREATE TABLE IF NOT EXISTS `webchat_users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(16) NOT NULL,
  `gravatar` varchar(32) NOT NULL,
  `last_activity` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `name` (`name`),
  KEY `last_activity` (`last_activity`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=14 ;

webchat_lines :

CREATE TABLE IF NOT EXISTS `webchat_lines` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `author` varchar(16) NOT NULL,
  `gravatar` varchar(32) NOT NULL,
  `text` varchar(255) NOT NULL,
  `ts` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `ts` (`ts`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=23 ;

Kemudian dibuat beberapa class untuk menangani chat, yaitu : DB.class.php, ChatBase.class.php, ChatLine.class.php, ChatUser.class.php, Chat.class.php.
DB.class.php :

<?php

class DB {
 private static $instance;
 private $MySQLi;
 
 private function __construct(array $dbOptions){

  $this->MySQLi = @ new mysqli( $dbOptions['db_host'],
          $dbOptions['db_user'],
          $dbOptions['db_pass'],
          $dbOptions['db_name'] );

  if (mysqli_connect_errno()) {
   throw new Exception('Database error.');
  }

  $this->MySQLi->set_charset("utf8");
 }
 
 public static function init(array $dbOptions){
  if(self::$instance instanceof self){
   return false;
  }
  
  self::$instance = new self($dbOptions);
 }
 
 public static function getMySQLiObject(){
  return self::$instance->MySQLi;
 }
 
 public static function query($q){
  return self::$instance->MySQLi->query($q);
 }
 
 public static function esc($str){
  return self::$instance->MySQLi->real_escape_string(htmlspecialchars($str));
 }
}

?>

ChatBase.class.php :

<?php

/* class yang digunakan oleh class ChatUser dan class ChatLine */

class ChatBase{

 public function __construct(array $options){
  
  foreach($options as $k=>$v){
   if(isset($this->$k)){
    $this->$k = $v;
   }
  }
 }
}

?>

ChatLine.class.php :

<?php

/* Digunakan untuk menambahkan baris chat ke dalam database */

class ChatLine extends ChatBase{
 
 protected $text = '', $author = '', $gravatar = '';
 
 public function save(){
  DB::query("
   INSERT INTO webchat_lines (author, gravatar, text)
   VALUES (
    '".DB::esc($this->author)."',
    '".DB::esc($this->gravatar)."',
    '".DB::esc($this->text)."'
  )");
  
  return DB::getMySQLiObject();
 }
}

?>

ChatUser.class.php :

<?php

class ChatUser extends ChatBase{
 
 protected $name = '', $gravatar = '';
 
 public function save(){
  
  DB::query("
   INSERT INTO webchat_users (name, gravatar)
   VALUES (
    '".DB::esc($this->name)."',
    '".DB::esc($this->gravatar)."'
  )");
  
  return DB::getMySQLiObject();
 }
 
 public function update(){
  DB::query("
   INSERT INTO webchat_users (name, gravatar)
   VALUES (
    '".DB::esc($this->name)."',
    '".DB::esc($this->gravatar)."'
   ) ON DUPLICATE KEY UPDATE last_activity = NOW()");
 }
}

?>

Chat.class.php :

<?php

class Chat{
 
 public static function login($name,$email){
     // Cek isian login
  if(!$name || !$email){
   throw new Exception('Isi semua field yang ada.');
  }
  
  if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
   throw new Exception('Email anda tidak valid.');
  }
  
  // Menyiapkan kode gravatar
  $gravatar = md5(strtolower(trim($email)));
  
  $user = new ChatUser(array(
   'name'  => $name,
   'gravatar' => $gravatar
  ));
  
  // Cek nickname apakah sudah dipakai atau belum
  if($user->save()->affected_rows != 1){
   throw new Exception('Nickname anda telah digunakan.');
  }
  
  $_SESSION['user'] = array(
   'name'  => $name,
   'gravatar' => $gravatar
  );
  
  return array(
   'status' => 1,
   'name'  => $name,
   'gravatar' => Chat::gravatarFromHash($gravatar)
  );
 }
 
 public static function checkLogged(){
  $response = array('logged' => false);
  //cek apakah sudah lgin atau belum 
  if($_SESSION['user']['name']){
   $response['logged'] = true;
   $response['loggedAs'] = array(
    'name'  => $_SESSION['user']['name'],
    'gravatar' => Chat::gravatarFromHash($_SESSION['user']['gravatar'])
   );
  }
  
  return $response;
 }
 
 public static function logout(){
     //fungsi logout
  DB::query("DELETE FROM webchat_users WHERE name = '".DB::esc($_SESSION['user']['name'])."'");
  
  $_SESSION = array();
  unset($_SESSION);

  return array('status' => 1);
 }
 
 public static function submitChat($chatText){
     //cek apakah sudah login belum
  if(!$_SESSION['user']){
   throw new Exception('Anda tidak Login');
  }
  
  if(!$chatText){
  //cek apakah sudah mengisi pesan
   throw new Exception('Anda belum mengisi pesan.');
  }
     //deklarasikan variabel chat
  $chat = new ChatLine(array(
   'author' => $_SESSION['user']['name'],
   'gravatar' => $_SESSION['user']['gravatar'],
   'text'  => $chatText
  ));
 
  // siapkan variabel untuk menyimpan di mysql
  $insertID = $chat->save()->insert_id;
 
  return array(
   'status' => 1,
   'insertID' => $insertID
  );
 }
 
 public static function getUsers(){
  if($_SESSION['user']['name']){
   $user = new ChatUser(array('name' => $_SESSION['user']['name']));
   $user->update();
  }
  
  // Hapus chat lebih dari 5 menit dan user yang tidak aktif 30 detik
  
  DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),'0:5:0')");
  DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),'0:0:30')");
  
  $result = DB::query('SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18');
  
  $users = array();
  while($user = $result->fetch_object()){
   $user->gravatar = Chat::gravatarFromHash($user->gravatar,30);
   $users[] = $user;
  }
 
  return array(
   'users' => $users,
   'total' => DB::query('SELECT COUNT(*) as cnt FROM webchat_users')->fetch_object()->cnt
  );
 }
 
 public static function getChats($lastID){
  $lastID = (int)$lastID;
 
  $result = DB::query('SELECT * FROM webchat_lines WHERE id > '.$lastID.' ORDER BY id ASC');
 
  $chats = array();
  while($chat = $result->fetch_object()){
   
   
   $chat->time = array(
    'hours'  => gmdate('H',strtotime($chat->ts)),
    'minutes' => gmdate('i',strtotime($chat->ts))
   );
   
   $chat->gravatar = Chat::gravatarFromHash($chat->gravatar);
   
   $chats[] = $chat;
  }
 
  return array('chats' => $chats);
 }
 
 public static function gravatarFromHash($hash, $size=23){
  return 'http://www.gravatar.com/avatar/'.$hash.'?size='.$size.'&amp;default='.
    urlencode('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size='.$size);
 }
}


?>

Kemdian buat script php yang diberi nama ajax.php untuk menghubungkan class-class tadi dengan javascript (AJAX).
ajax.php :

<?php

/* Konfigurasikan database seusuai dengan kebutuhan */

$dbOptions = array(
 'db_host' => '', //host mysql
 'db_user' => '', //user mysql
 'db_pass' => '', // password mysql
 'db_name' => '' //nama database
);

/* Akhir dari database konfigurasi */


error_reporting(E_ALL ^ E_NOTICE);

require "classes/DB.class.php";
require "classes/Chat.class.php";
require "classes/ChatBase.class.php";
require "classes/ChatLine.class.php";
require "classes/ChatUser.class.php";

session_name('webchat');
session_start();

if(get_magic_quotes_gpc()){
 
 // Jika magic quotes pada setting php.ini aktif maka tambahkan slashes
 array_walk_recursive($_GET,create_function('&$v,$k','$v = stripslashes($v);'));
 array_walk_recursive($_POST,create_function('&$v,$k','$v = stripslashes($v);'));
}

try{
 
 // Koneksi ke database
 DB::init($dbOptions);
 
 $response = array();
 
 // menangani variabel "action"
 
 switch($_GET['action']){
  
  case 'login':
   $response = Chat::login($_POST['name'],$_POST['email']);
  break;
  
  case 'checkLogged':
   $response = Chat::checkLogged();
  break;
  
  case 'logout':
   $response = Chat::logout();
  break;
  
  case 'submitChat':
   $response = Chat::submitChat($_POST['chatText']);
  break;
  
  case 'getUsers':
   $response = Chat::getUsers();
  break;
  
  case 'getChats':
   $response = Chat::getChats($_GET['lastID']);
  break;
  
  default:
   throw new Exception('Wrong action');
 }
 
 echo json_encode($response);
}
catch(Exception $e){
 die(json_encode(array('error' => $e->getMessage())));
}

?>

Untuk menghubungkan PHP request dengan AJAX plugin dibuat javascript, yang diberi nama script.js.

script.js. 

Demikian beberapa script penting dalam aplikasi chat. Untuk melihat demo dari aplikasi ini dapat dilihat dan di download di bawah ini :

(getCard) #type=(custom) #title=(Demo) #info=(antefer.web.id) #button=(Demo) #icon=(travel_explore)

(getCard) #type=(download) #title=(chat.zip) #info=(22.54kb) #button=(Download)

Dalam aplikasi chat ini dapat dilakukan beberapa modifikasi sesuai kebutuhan (menggunakan login, penyimpanan percakapan secara permanen dan lain-lain). Untuk contoh ini percakapan tidak akan di simpan secara permanen. 

Berjalan di PHP versi 5, untuk PHP 7 dan 8, silahkan dimodifikasi scriptnya ya.

Semoga bermanfaat.

---