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
here we are going to create a database and insert some fields into it.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.");
?>
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
lets style up the index page to look stylish.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>
style.css
alright now lets get to the jquery scripting.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;
}
chat.js
now we can finally get to the php part of the scripting to get the chat and to send the chat and so forth.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 = "";
});
}
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 " <b>".$users."<br>";
}else{
echo " ".$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 " <".$users."> ".$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
