Cara Membuat aplikasi chatting / live chat seperti facebook


Membuat aplikasi chatting / chat seperti facebook dengan php,sql,jquery,ajax,css Lengkap sampai tuntas


Selamat pagi/siang/sore/malam buat bapak,ibu,bro,agan dan adik2 kali ini saya akan membuat postingan tentang sesuatu yang banyak di cari oleh para penggemar pembuat design website khususnya bagi pemula website.
Aplikasi web chating atau biasanya kita dengar dengan web chat ,banyak blogger yang mencari bahan referensi di google tentang bagaimana membuat aplikasi chat seperti facebook berbasis web / website dengan php,sql,jquery,css,ajax dan xampp. Untuk membuat web chat seperti media sosial banyak hal yang harus di persiapkan seperti Xampp,editor,dan pemahaman logika pemograman.
Dalam pembuatan aplikasi web chat ini ,saya menyediakan fitur seperti login,registrasi/sign up,logout dan halaman chating .
Fitur tersebut di buat secara modern dengan teckhnik jquery,slide,tanpa harus merefress sebuah halaman. Dalam membuat chating sederhana seperti facebook ini di buat dengan beberapa file seperti index.php,css,chat ,javascript dan gambar.

Cara Membuat Aplikasi Live Chat


Hal pertama yang harus anda kerjakan ialah dengan membuat database terlebih dahulu. Karena database merupakan media yang berfungsi menyimpan semua data baik itu data user maupun suatu pesan tertentu. Okeh langsung ke TKP ,simak dan praktekan

Buat database dengan nama up huruf kecil semua


Buat tabel database dengan nama shout_box huruf kecil semua


-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 20 Jul 2017 pada 10.06
-- Versi Server: 5.5.27
-- Versi PHP: 5.4.7

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `up`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `shout_box`
--

CREATE TABLE IF NOT EXISTS `shout_box` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(60) NOT NULL,
  `message` varchar(100) NOT NULL,
  `date_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `ip_address` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data untuk tabel `shout_box`
--

INSERT INTO `shout_box` (`id`, `user`, `message`, `date_time`, `ip_address`) VALUES
(2, 'bae', 'hgtt', '2017-07-20 07:11:51', '127.0.0.1');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Buat database dengan nama user


-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 20 Jul 2017 pada 10.07
-- Versi Server: 5.5.27
-- Versi PHP: 5.4.7

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `up`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id_user` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `pass` varchar(50) NOT NULL,
  PRIMARY KEY (`id_user`),
  UNIQUE KEY `id_user` (`id_user`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data untuk tabel `user`
--

INSERT INTO `user` (`id_user`, `nama`, `email`, `pass`) VALUES
(1, 'ade', 'ade@gmail.com', 'satu'),
(2, 'bae', 'bae@yahoo.com', 'dua');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Kemudian buat sebuah folder dengan nama fbterserah mau beri nama folder apa saja ,dan simpan di dalam htdoch


Lalu buat sebuah file dengan nama index.php didalam folder fb. Dan didalam file index.php simpan dengan script berikut

<?php
session_start();
require"chat.php";
$ct=new Chat();
 if(isset($_POST["daftar"])){
  $nama=$_POST["nama"];
  $email=$_POST["email"];
  $pass=$_POST["pass"];
  $daftar=$ct->daftar($nama,$email,$pass);
  if($daftar){
   header("location:index.php");
     }else { echo "<span id='gagal' class='alert alert-danger' role='alert'>gagal</span>";}
 }else {}
 if(isset($_POST["login"])){
 $eemail=$_POST["eemail"];
 $epass=$_POST["epass"];
 $login=$ct->login($eemail,$epass);
 if($login->rowCount() > 0){
  foreach($login as $lgi);
  $_SESSION["user"]=$eemail;
  header("location:index.php");}
  else{}}else {"";}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<link href="css.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>

<body bgcolor="#996600">
<?php
if(empty($_SESSION['user'])){?>
<center>
<div id="induk">
<h1>Aplikasi Live Chat<i> www.deblenk.xyz</i></h1>
<div class="loda"><button type="button" class="b_log">Login</button><br>Atau<br>
<button type="button" class="b_daf">Daftar</button></div>
<form class="login" method="post" action="">
<input type="email" name="eemail" placeholder="email"><br>
<input type="password" name="epass" placeholder="password"><br>
<button type="submit" class="klog" name="login">Login</button><br><h2>Belum punya akun ?</h2><br>
<button type="button" class="b_daf">Daftar</button>
</form>
<form class="daftar" method="post" action="">
<input type="text" name="nama" placeholder="Nama"><br>
<input type="email" name="email" placeholder="email"><br>
<input type="password" name="pass" placeholder="password"><br>
<button type="submit" class="kdaf" name="daftar">Daftar</button><br><h2>Sudah Punya akun silahkan</h2><br>
<button type="button" class="b_log">Login</button></div>
</form>
</div>
</center>
<center><h1 style="color:#fff;font-size:80px;">MEMBUAT APLIKASI LIVE CHAT SEPERTI FACEBOOK www.deblenk.xyz</h1></center>
<?php } else {
 $gty=$_SESSION["user"];
 $tmpl=$ct->reg($gty);
 foreach($tmpl as $hdr);
 ?>
    <center><h1 style="color:#fff;font-size:80px;">MEMBUAT APLIKASI LIVE CHAT SEPERTI FACEBOOK www.deblenk.xyz</h1></center>
<div class="shout_box">
<div class="header"><?php echo $hdr["nama"] ?>   <a href="keluar.php">keluar</a><div class="close_btn"> </div></div>
  <div class="toggle_chat">
  <div class="message_box">
    </div>
    <div class="user_info">
    <input name="shout_username" id="shout_username" type="hidden" value="<?php echo $hdr["nama"] ?>" />
   <input name="shout_message" id="shout_message" type="text" placeholder="enter untuk kirim pesan" maxlength="100" /> 
    </div>
    </div>
</div>
<?php }?>
</body>
</html>

Lalu buat file dengan nama chat.php masih di dalam folder yang sama dan masukan script berikut.

<?php
class Chat {
public function __construct(){
$this->db = new PDO('mysql:host=localhost;dbname=up','root','');
} 
public function masuk_cat($username,$message,$user_ip){
 $sql="INSERT INTO shout_box(user, message, ip_address) values('$username','$message','$user_ip')";
 $cat=$this->db->query($sql);
 if($cat){
return true;
return $cat;
}
else{
return false;
}
}
public function pesan_cat(){
 $sql="SELECT * FROM  shout_box ORDER BY id ASC";
  $row=$this->db->query($sql);
  return $row;
}
public function login($eemail,$epass){
 $sql="SELECT * from user where email='$eemail' AND pass='$epass'";
  $lgi=$this->db->query($sql);
  if($lgi){
 return $lgi;}else { return false;}

}
public function daftar($nama,$email,$pass){
  $sql = "INSERT INTO user ( nama, email,pass) VALUES('$nama', '$email', '$pass')";
$dft = $this->db->query($sql);

if($dft){
 
 $_SESSION["user"]=$email;
 return true;
 return $dft;
}else { return false;}}
public function reg($gty){
 $sql="select * from user where email='$gty'";
 $hdr = $this->db->query($sql);
 return $hdr;
}
}
?>

buat file shout.php dan isikan script berikut


<?php
require'chat.php';
$ct=new Chat();


if($_POST)
{
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die();
    } 
 
 if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)
 {
  //sanitize user name and message received from chat box
  //You can replace username with registerd username, if only registered users are allowed.
  $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
  $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
  $user_ip = $_SERVER['REMOTE_ADDR'];
  
        $insert=$ct->masuk_cat($username,$message,$user_ip);
  //insert new message in db
  if($insert)
  {
   $msg_time = date('h:i A M d',time()); // current time
   echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
  }
  
 }
 elseif($_POST["fetch"]==1)
 {
  $result = $ct->pesan_cat();
  foreach($result as $row)
  {
   $msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time
   echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
  }
 }
 else
 {
  header('HTTP/1.1 500 Are you kiddin me?');
     exit();
 }
}

Buat file css dengan nama css.css dan masukan script berikut

@charset "utf-8";
center{padding:5px;}
#induk{width:800px; border:2px solid#9CF; margin-top:50px; padding:8px; color:#FFF; background:url(images/gt.png); background-attachment:fixed; height:auto; padding-bottom:100px;}
#induk h1{color:#FFF;}
#induk h1 i{color:#CFF; font-family:"Comic Sans MS", cursive; font-size:18px; padding:4px;}
#induk button{width:50%; height:40px; background-color:#09C;color:#FFF;font-size:24px;font-weight:bold; padding:3px;}
#induk button:hover{background:#090; cursor:pointer;}
#induk input{width:50%; height:40px;padding:3px; margin:5px;}
<!--
.shout_box {
 background: #627BAE;
 width: 280px;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 right: 1%;
 z-index:9;
}
.shout_box .header .close_btn {
 background: url(images/close_btn.png) no-repeat 0px 0px;
 float: right;
 width: 15px;
 height: 15px;
}
.shout_box .header .close_btn:hover {
 background: url(images/close_btn.png) no-repeat 0px -16px;
}

.shout_box .header .open_btn {
 background: url(images/close_btn.png) no-repeat 0px -32px;
 float: right;
 width: 15px;
 height: 15px;
}
.shout_box .header .open_btn:hover {
 background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
 padding: 5px 3px 5px 5px;
 font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
 font-weight: bold;
 color:#fff;
 border: 1px solid rgba(0, 39, 121, .76);
 border-bottom:none;
 cursor: pointer;
 background-color: #F36;
}
.shout_box .header:hover{
 background-color: #F36;
}
.shout_box .message_box {
 background: #FFFFFF;
 height: 200px;
 overflow:auto;
 border: 1px solid #CCC;
}
.shout_msg{
 margin-bottom: 10px;
 display: block;
 border-bottom: 1px solid #F3F3F3;
 padding: 0px 5px 5px 5px;
 font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
 color:#7C7C7C;
}
.message_box:last-child {
 border-bottom:none;
}
time{
 font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
 font-weight: normal;
 float:right;
 color: #C33;
}
.shout_msg .username{
 margin-bottom: 10px;
 margin-top: 10px;
}
.user_info input {
 width: 98%;
 height: 50px;
 border: 1px solid #CCC;
 border-top: none;
 padding: 3px 0px 0px 3px;
 font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
 font-weight: bold;
 display: block;
}
.

buat file keluar.php masukan script berikut

<?php
session_start();
require"chat.php";
session_destroy($_SESSION["user"]=$eemail);
header("location:index.php");
?>

Lalu buat folder di dalam folder fb dengan nama js dan didalam folder js buat javascript dengan nama js.js

$(document).ready(function() {
$(".login").hide();
$(".daftar").hide();
$(".b_log").click(function(e) {
    $(".login").fadeIn(500);
 $(".loda").fadeOut(100);
 $(".daftar").fadeOut(100);
});
$(".b_daf").click(function(e) {
    $(".daftar").fadeIn(500);
 $(".loda").fadeOut(100);
 $(".login").fadeOut(100);
});
 // load messages every 1000 milliseconds from server.
 load_data = {'fetch':1};
 window.setInterval(function(){
  $.post('shout.php', load_data,  function(data) {
  $('.message_box').html(data);
  var scrolltoh = $('.message_box')[0].scrollHeight;
  $('.message_box').scrollTop(scrolltoh);
  });
 }, 1000);
 
 //method to trigger when user hits enter key
 $("#shout_message").keypress(function(evt) {
  if(evt.which == 13) {
    var iusername = $('#shout_username').val();
    var imessage = $('#shout_message').val();
    post_data = {'username':iusername, 'message':imessage};
     
    //send data to "shout.php" using jQuery $.post()
    $.post('shout.php', post_data, function(data) {
     
     //append data into messagebox with jQuery fade effect!
     $(data).hide().appendTo('.message_box').fadeIn();
 
     //keep scrolled to bottom of chat!
     var scrolltoh = $('.message_box')[0].scrollHeight;
     $('.message_box').scrollTop(scrolltoh);
     
     //reset value of message box
     $('#shout_message').val('');
     
    }).fail(function(err) { 
    
    //alert HTTP server error
    alert(err.statusText); 
    });
   }
 });
 
 //toggle hide/show shout box
 $(".close_btn").click(function (e) {
  //get CSS display state of .toggle_chat element
  var toggleState = $('.toggle_chat').css('display');
  
  //toggle show/hide chat box
  $('.toggle_chat').slideToggle();
  
  //use toggleState var to change close/open icon image
  if(toggleState == 'block')
  {
   $(".header div").attr('class', 'open_btn');
  }else{
   $(".header div").attr('class', 'close_btn');
  }
   
   
 });
});

silahkan kalian download jquery-1.9.0.min.js dan simpan didalam folder js

buatlah folder dengan nama images dan simpan didalam folder fb dan didalam folder images download gambar dibawah ini dan simpan didalam folder images ,sebelum disimpan rename gambar tersebut dengan nama gt.png



Nah sampai disini sudah selesailah anda membuat aplikasi chating berbasis web seperti facebook,semoga bermanfaat.

Selanjutnya

Related Post