Jquery/php chatroom

Smackie · 2012-12-09, 06:02 PM

Hello everyone

This is a tutorial on creating a jquery/php chatroom (not secure but just a baseline for people to get started on jquery chatrooms. lets get started

you will need jquery 1.2.7

here we are going to set a connection to the database.

db.php

PHP Code:


<?  
/*  Database Information - Required!!  */ 
/* -- Configure the Variables Below --*/ 
$dbhost = 'localhost'; 
$dbuser = 'root'; 
$dbpasswd = ''; 
$database = 'chatroom'; 
 
/* Database Stuff, do not modify below this line */ 
 
$connection = mysql_pconnect("$dbhost","$dbuser","$dbpasswd")  
    or die ("Couldn't connect to server."); 
     
$db = mysql_select_db("$database", $connection) 
    or die("Couldn't select database."); 
?>

here we are going to create a database and insert some fields into it.
sql

Code:

CREATE TABLE `chat` (
  `id` int(11) NOT NULL auto_increment,
  `user` varchar(75) collate latin1_general_ci NOT NULL,
  `chat` varchar(255) collate latin1_general_ci NOT NULL,
  `time` varchar(10) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=0 ;


CREATE TABLE `chat_session` (
  `id` int(11) NOT NULL auto_increment,
  `user` varchar(75) collate latin1_general_ci NOT NULL,
  `time` varchar(10) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=0 ;


CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(75) collate latin1_general_ci NOT NULL,
  `password` varchar(32) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=0 ;

ok now lets get started on creating a index page.

index.php

HTML Code:

<html>
<head>
<title>Jquery/PHP Chatroom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="chat.js"></script>
</head>

<body>
	<div id="chat">	
		<div id="chat_initial">
			<div id="chat_login">
				<table width="100%">
					<tr>	
						<td><div id="user_label">Username:</div></td>
						<td><div id="user_name"><input id="username" name="user_name" type="text" size="25" maxlength="75"></div></td>
					</tr>
					<tr>	
						<td><div id="pass_label">Password:</div></td>
						<td><div id="pass_word"><input id="password" name="password" type="password" size="25" maxlength="75"></div></td>
					</tr>
					<tr>						
						<td><div id="login_center"><input name="login" type="button" value="Login" onClick="login();"></div></td>
						<td><div id="register_center"><input name="register" type="button" value="Register" onClick="register();"></div></td>
					</tr>
					</table>
			</div>
			<div id="chat_register">
				<table width="100%">
					<tr>
						<td><div id="reg_name_label">Username:</div></td>
						<td><div id="reg_name"><input id="username" name="user_name" type="text" value="" size="25" maxlength="75"></div></td>
					</tr>
						<td><div id="reg_pass_label">Password:</div></td>
						<td><div id="reg_pass"><input id="pass" name="password" type="password" value="" size="25" maxlength="75"></div></td>
					</tr>
						<td><div id="reg_pass_lbl_again">Password:</div></td>
						<td><div id="reg_pass_again"><input id="pass2" name="password2" type="password" value="" size="25" maxlength="75"></div></td>
					</tr>
						<td><div id="reg_cancel"><input name="submit" type="button" value="Cancel" onClick="cancel();"></div></td>
						<td><div id="reg_submit"><input name="submit" type="button" value="Register" onClick="reg_user();"></div></td>
					</tr>
				</table>
			</div>
		</div>
		<div id="chat_top">
			<div id="chat_window">testset</div>
			<div id="chat_users"></div>
		</div>
		<div id="chat_bottom">
			<div id="chat_form"><input id="sendchat" class="chat" name="chat" type="text" value="" size="111" maxlength="255"></div>
			<div id="chat_submit"><center><input class="submit" name="Submit" type="button" value="Submit" onClick="chat_send();"></center></div>
		</div>
	</div>
</body>
</html>

lets style up the index page to look stylish.

style.css

Code:

input.chat{
	border-bottom-left-radius: 1em;
}
input.submit{
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
}
#chat {
	width: 800px;
	height: 300px;
	background-color:#CCCCCC;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}

#chat #chat_top #chat_window{
	width: 600px;
	height: 275px;
	border-right: 1px solid black;
	float: left;
	display: none;
}

#chat #chat_top #chat_users{
	width: 199px;
	height: 275px;
	float: right;
	display: none;
}

#chat #chat_bottom #chat_form{
	width: 700px;
	height: 25px;
	border-top: 1px solid black;
	border-right: 1px solid black;
	vertical-align: top;
	float: left;
	display: none;
}

#chat #chat_bottom #chat_submit{
	width: 99px;
	height: 25px;
	border-top: 1px solid black;
	float: right;
	display: none;
}

#chat #chat_initial #chat_login{
	width: 255px;
	height: 88px;
	background-color: #999999;
	margin-top:100px;
	margin-left: auto;
	margin-right:auto;
	display: inherit;
	}
#chat #chat_initial #chat_login #user_label{
	float: left;
}
#chat #chat_initial #chat_login #user_name{
	float: right;
}
#chat #chat_initial #chat_login #pass_label{
	float: left;
}
#chat #chat_initial #chat_login #pass_word{
	float: right;
}
#chat #chat_initial #chat_login #login_center{
	width: 50%;
	text-align: right;
}
#chat #chat_initial #chat_login #register_center{
	width: 50%;
}
#chat #chat_initial #chat_register{
	width: 259px;
	height: 123px;
	background-color: #999999;
	margin-top:85px;
	margin-left: auto;
	margin-right:auto;
	display: none;
}
#chat #chat_initial #chat_register #reg_user_label{
	float: left;
}
#chat #chat_initial #chat_register #reg_name{
	float: right;
}
#chat #chat_initial #chat_register #reg_pass_label{
	float: left;
}
#chat #chat_initial #chat_register #reg_pass{
	float: right;
}
#chat #chat_initial #chat_register #reg_pass_lbl_again{
	float: left;
}
#chat #chat_initial #chat_register #reg_pass_again{
	float: right;
}
#chat #chat_initial #chat_register #reg_user{
	text-align: center;
}

alright now lets get to the jquery scripting.

chat.js

Code:

    window.onload = startInterval;
    function startInterval()
    {
        setInterval("startTime();",500);
    }

    function startTime()
    {
        users();
		chats();
		//clear_messages();
		//session_detect();
    }
	
	function register(){
		$('#chat #chat_initial #chat_login').css('display', 'none');
		$('#chat #chat_initial #chat_register').css('display', 'inherit');
	}
	
	function cancel(){
		$('#chat #chat_initial #chat_register').css('display', 'none');
		$('#chat #chat_initial #chat_login').css('display', 'inherit');
	}
	
	function reg_user(){
		var user = document.getElementById("username").value;
		var pass = document.getElementById("pass").value;
		var pass2 = document.getElementById("pass2").value;
			if (user == ""){
				alert('Please enter a username');
			}
			if (pass == ""){
				alert('Please enter a password');
			}
			if (pass2 == ""){
				alert('Please enger a password in the second password field');
			}
			if (pass != pass2){
				alert('Passwords don\'t match');
			}
			else
			
			$.post('chat.php', {stage:"reg",user:user,pass:pass}, function(data){
				if (data == "Useable"){
					$('#chat #chat_initial #chat_register').css('display', 'none');
					$('#chat #chat_initial #chat_login').css('display', 'inherit');		
					alert('You are registered');
				}
			else
				alert(data);
			});
			
	}
	
	function login(){
		var user = document.getElementById("username").value;
		var pass = document.getElementById("password").value;
		$.post('chat.php', {stage:"login",user:user,pass:pass}, function(data){
				if(data == "logged"){
					$('#chat #chat_initial #chat_login').css('display', 'none');
					$('#chat #chat_top #chat_window').css('display', 'inline');
					$('#chat #chat_top #chat_users').css('display', 'inline');
					$('#chat #chat_bottom #chat_form').css('display', 'inline');
					$('#chat #chat_bottom #chat_submit').css('display', 'inline');
				}
				else
				alert(data);
		});
	}
	
	function users(){
		$.post('chat.php', {stage:"cusers"}, function(data){
			$('#chat #chat_top #chat_users').html( data );
	});
	}
	
	function chats(){
		$.post('chat.php', {stage:"getchat"}, function(data){
			$('#chat #chat_top #chat_window').html( data );
	});
	}
	
	function chat_send(){		
		var chats = document.getElementById("sendchat").value;
			$.post('chat.php', {stage:"sendchat",chat:chats}, function(data){
				document.getElementById("sendchat").value = "";
			});		
	}

now we can finally get to the php part of the scripting to get the chat and to send the chat and so forth.

chat.php

PHP Code:


<?php 
ob_start(); 
session_start(); 
include 'db.php'; 
    $stage = $_POST['stage']; 
     
    if ($stage == "reg"){ 
        $user = $_POST['user']; 
        $pass2 = $_POST['pass']; 
        $pass = md5(md5(md5(md5($pass2)))); 
         
        $check_user = mysql_query("SELECT * FROM users WHERE username='$user'") or die(mysql_error()); 
        if (mysql_num_rows($check_user) == 1){ 
            echo "That username is already taken try another one!"; 
        }else{ 
            $insert_user = mysql_query("INSERT INTO users (username, password) VALUES ('$user','$pass')") or die(mysql_query()); 
            echo "Useable"; 
        } 
    }elseif ($stage == "login"){ 
        $user = $_POST['user']; 
        $pass2 = $_POST['pass']; 
        $pass = md5(md5(md5(md5($pass2)))); 
         
        $check_login = mysql_query("SELECT * FROM users WHERE username='$user'") or die(mysql_error()); 
        if(mysql_num_rows($check_login) == 1) { 
            $user = $_POST['user']; 
            $time = date("H:i:s"); 
            mysql_query("INSERT INTO chat_session (user, time) VALUES ('$user', '$time')") or die(mysql_error()); 
             
                $_SESSION['user'] = $user; 
                echo 'logged';         
        }else{ 
            echo "Check your username and password and try again!"; 
        } 
    }elseif ($stage == "cusers"){ 
        $get_users = mysql_query("SELECT * FROM chat_session") or die(mysql_error()); 
        while ($rows = mysql_fetch_array($get_users)){ 
            $users = $rows['user']; 
            if ($users == $_SESSION['user']){ 
                echo "&nbsp;<b>".$users."<br>"; 
            }else{ 
                echo "&nbsp;".$users."<br>"; 
            } 
        } 
    }elseif($stage == "getchat"){ 
        $get_chats = mysql_query("SELECT * FROM chat") or die(mysql_error()); 
        while ($row = mysql_fetch_array($get_chats)){ 
            $users = $row['user']; 
            $chat = $row['chat']; 
                echo "&nbsp;&lt;".$users."&gt;&nbsp;".$chat."<bR>";  
        } 
    }elseif($stage == "sendchat"){ 
        $user = $_SESSION['user']; 
        $chat = $_POST['chat']; 
        $time = date("H:i:s"); 
        mysql_query("INSERT INTO chat (user, chat, time) VALUES ('$user', '$chat', '$time')") or die(mysql_query()); 
    } 
?>

Well there ya have it a basic Jquery/php chat room.

hope ya like it and hopefully I'll come up with more tutorials soon.

Thank you
Smackie

Thread: Jquery/php chatroom

Thread Tools

Display

Threaded View

Jquery/php chatroom

Posting Permissions