DEVELOPMENT

You must have certainly visited the websites giving facility of group chat, where any user can take a entry in the open chat room. In this type of chatting system, the messages post by a specific user can be read by all the members present in the chat-room.

If you ever wonder how such type of chat room works, then definitely you are lucky today. As today, i'll show you how to create a chat application using php, ajax and Jquery.

THE SITUATION


chat screenshot

Before any one can enter the chat-room, he must have a valid display name. For this to happen, we will obviously deal with sessions. A database must also be used to store messages post by different user with timestamp. Things get hairy when we will use beautiful combination of ajax and Jquery, so that loading or reloading of page not occur – a essential step for making healthy chatting application.

INDEX.PHP
<?php 
session_start(); 
session_destroy(); 
?>
<!DOCTYPE html>
<html> 
<head>
</head>
<body> 
<div align="center"
>Enter Your username to enter chatroom<br> 
<form action="chatroom.php" method="post">
<input type="text" name="user" />
<input type="submit" value="Enter chat-room" /> 
</form> </body>
</html>
    

chatroom screenshot


CHATROOM.PHP
<?php 
session_start(); 
$id=rand(0,999);
$_SESSION['id']=$id; 
$_SESSION['user']=$_POST['user']; 
if(!isset($_SESSION['user']))
{ header("Location:index.php"); 
} 
?>
<!DOCTYPE html> 
<html>
<head>
<script>
function getdata(str) 
{ 
var xmlhttp; if (window.XMLHttpRequest) 
{ 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if 
(xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("ajaxDiv").innerHTML=xmlhttp.responseText; } }
var mess = document.getElementById('mess').value;
var qstring = "?mess=" + mess ; 
xmlhttp.open("GET","getdata.php" + qstring,true); xmlhttp.send(null); }
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script> 
<script> 
$(document).ready(function() { 
$("#chatarea").load("showdata.php");
var refreshId = setInterval(function() { 
$("#chatarea").load('showdata.php?randval='+ Math.random()); }, 100);
$.ajaxSetup({ cache: false }); }); 
</script> 
</head>
<body>
<div align="center">

<?php echo"Welcome "."<b>". $_POST['user']."</b>";
echo "<br><br>"; ?>

</div>
<div id="chatarea"></div>
<div align="center"> <div id='ajaxDiv'></div>
<br> <form id="form"> <textarea cols="40" rows="3" id="mess" placeholder="Start chatting..."></textarea> </form> 
<input type="button" value="Send Message" onclick="getdata()"> </div>
<div align="center"> <a href="index.php">Leave the chatroom</a> 
</div>
</body> 
</html>


THE DATABASE

sql database screenshot


Detail of coloumns. GETDATA.PHP
<!DOCTYPE html> 
<html>
<body> 
<div align="center"> 
<?php 
session_start(); 
if(isset($_SESSION['id'])){ 
$mess = $_GET['mess']; 
$user=$_SESSION['user']; 
$time=time(); 
$conn=@mysql_connect("localhost","root","")or die("could not connect to database");
$db=@mysql_select_db("site_4db",$conn) or die("could not select database"); 
$sql="insert into chat(user,mess,time) values (\"$user\",\"$mess\",\"$time\")";
$res=@mysql_query($sql,$conn) or die("could not execute ");
if($res) { } 
else 
{ echo "error"; 
}
}?>
</div> 
</body>
</html>
        
    
GETTING BACK TO CHATROOM.PHP


    .
    .
    .
    

SHOWDATA.PHP
   

<?php $conn=@mysql_connect("localhost","root","") or die("could not connect to database"); $db=@mysql_select_db("site_4db",$conn) or die("could not select database"); $query="SELECT * FROM `chat` ORDER BY `time` DESC"; $result=mysql_query($query); $num=mysql_numrows($result); $t=15; if($num<=15) $t=$num; mysql_close(); $i=0; echo ""; for($i=$t;$i>=0;$i--) { $mess=mysql_result($result,$i,"mess"); $time=mysql_result($result,$i,"time"); $user=mysql_result($result,$i,"user"); echo ""; echo ""; echo ""; echo ""; } echo "
"; echo "$mess".":$user"."".date('H:i d-m-y ',$time)."
"; ?>


Leave a Comment  
Download Code(43)





All rights reserved, the content is copyrighted to the author.

RELATED POST