Membuat aplikasi chatting / chat seperti facebook dengan php,sql,jquery,ajax,css Lengkap sampai tuntas
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.
No comments:
Post a Comment