How To Create A Chat Box Using Ajax, php, Jquery, Html5

Live chat using php ajax, php ajax chatbox, Facebook like live chat, Live chat using php and ajax, Online chatting application, Login and Registration using php, facebook like chat application, Group chat, Chatbox using php ajax

Index.php

<!DOCTYPE html>
<html>
<title>Login Form</title>
<head>
<?php
include(‘config.php’);
?>
<style>
body {
background: url(‘1.jpg’) no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
}

.login-block {
width: 320px;
padding: 20px;
border-radius: 5px;
margin: 110px auto;
background:#fff;
border-top: 5px solid #ff656c;
}

.fullname,.username,.password{
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Montserrat;
padding: 0 20px 0 50px;
outline: none;
}

.fullname {
background: #fff url(‘5.png’) 20px top no-repeat;
background-size: 16px 80px;
}
.fullname:focus {
background: #fff url(‘5.png’) 20px bottom no-repeat;
background-size: 16px 80px;
}

.username {
background: #fff url(‘4.png’) 20px top no-repeat;
background-size: 16px 80px;
}
.username:focus {
background: #fff url(‘4.png’) 20px bottom no-repeat;
background-size: 16px 80px;
}

.password {
background: #fff url(‘3.png’) 20px top no-repeat;
background-size: 16px 80px;
}
.password:focus {
background: #fff url(‘3.png’) 20px bottom no-repeat;
background-size: 16px 80px;
}

.login-block input:active, .login-block input:focus {
border: 1px solid #ff656c;
}

.login {
width: 100%;
height: 40px;
background: #ff656c;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: Montserrat;
outline: none;
cursor: pointer;
}
.login:hover {
background: #ff7b81;
}

.logo{width:120px; height:120px; margin:auto; border:5px solid #fff; border-radius:50%; margin-bottom:20px;}
.logo img{width:100%; height:100%; border-radius:50%}
#hide,#show{cursor:pointer}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“.register-box”).hide();
$(“#show”).click(function(){
$(“.login-box”).hide();
$(“.register-box”).fadeIn(200);
});
$(“#hide”).click(function(){
$(“.login-box”).fadeIn(200);
$(“.register-box”).hide();
});
});
</script>
</head>
<body>
<link href=’http://fonts.googleapis.com/css?family=Montserrat:400,700′ rel=’stylesheet’ type=’text/css’>
<div class=”login-block login-box”>
<div class=”logo”>
<img src=”22.png”/>
</div>
<form action=”check-login.php” method=”post”>
<input type=”text” placeholder=”Username” id=”username” name=”username” class=”username”/>
<input type=”password” placeholder=”Password” id=”password” name=”password” class=”password”/>
<input type=”submit” value=”Log In” id=”loginbutton” name=”loginbutton” class=”login”/>
</form>
<p style=”text-align:center; font-size:14px”>Not registered ? <strong style=”color:#ff656c” id=”show” >Create an account</strong></p>
</div>
<div class=”login-block register-box”>
<div class=”logo”>
<img src=”21.png”/>
</div>
<form action=”” method=”post”>
<input type=”text” placeholder=”Full Name” id=”reg_fullname” name=”reg_fullname” class=”fullname”/>
<input type=”text” placeholder=”Username” id=”reg_username” name=”reg_username” class=”username” />
<input type=”password” placeholder=”Password” id=”reg_password” name=”reg_password” class=”password” />
<input type=”submit” value=”Register” id=”newreg” name=”newreg” class=”login”/>
</form>
<p style=”text-align:center; font-size:14px”>Have an account ? <strong style=”color:#08C400″ id=”hide”>Sign In</strong></p>
<?php
if (isset($_REQUEST[“newreg”]))
{
$rf=$_POST[“reg_fullname”];
$ru=$_POST[“reg_username”];
$rp=$_POST[“reg_password”];

$q=”insert into user (regfullname,regusername,regpassword) values (‘$rf’,’$ru’,’$rp’)”;
header(‘location:chat.php’);
mysql_query($q);
}
?>

</div>
</body>
</html>

Logout.php

<?php
session_start(); //to ensure you are using same session
session_destroy(); //destroy the session
header(“location:http://localhost/YouTube-Tutorials/Chat”); //to redirect back to “http://localhost/Shop” after logging out
exit();
?>

Config.php

<?php
$db_host=’localhost’;
$db_user=’root’;
$db_pwd=”;
$database=’mychat’;

if(!mysql_connect($db_host,$db_user,$db_pwd))
die(“can’t Connect to Database”);

if(!mysql_select_db($database))
die(“can’t Select Database”);
?>

Mychat.sql

—
— Database: `mychat`
—
CREATE DATABASE IF NOT EXISTS `mychat` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `mychat`;

— ——————————————————–

—
— Table structure for table `comments`
—

CREATE TABLE IF NOT EXISTS `comments` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`comment` text NOT NULL,
`post_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

— ——————————————————–

—
— Table structure for table `user`
—

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`regfullname` varchar(200) NOT NULL,
`regusername` varchar(200) NOT NULL,
`regpassword` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Comment.ajax

<?php
$host=”localhost”;
$username=”root”;
$password=””;
$databasename=”mychat”;

$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

if(isset($_POST[‘user_comm’]) && isset($_POST[‘user_name’]))
{
$comment=$_POST[‘user_comm’];
$name=$_POST[‘user_name’];
$insert=mysql_query(“insert into comments (name,comment,post_time) values(‘$name’,’$comment’,CURRENT_TIMESTAMP)”);
}

Check-login.php

<?php
include(“config.php”);
session_start();

$uName = $_POST[‘username’];
$pWord = $_POST[‘password’];

$qry = “SELECT * FROM user WHERE regusername='”.$uName.”‘ and regpassword='”.$pWord.”‘”;
$res = mysql_query($qry);
$num_row = mysql_num_rows($res);
$row=mysql_fetch_assoc($res);

if( $num_row == 1 ) {
echo ‘true’;
$_SESSION[‘uname’]=$row[‘regusername’];
header(‘location:chat.php’);
}
else {
echo ‘false’;
}
?>

Download Project: https://drive.google.com/open?id=1nCsnjI9tuE9JCZZQtuCOGKg2ZYEDUQsM

Watch Tutorial: https://youtu.be/qaUYyEbN-58

Search This Blog

php