Results 1 to 3 of 3
  1. #1
    Smackie
    Smackie is offline
    Guest
    Join Date
    2012 Dec
    Posts
    2
    Thanks Thanks Given 
    0
    Thanks Thanks Received 
    0
    Thanked in
    0 Posts
    Rep Power
    0

    Jquery/php chatroom

    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

  2. #2
    emoisback
    emoisback is offline
    Full member
    Join Date
    2011 Dec
    Location
    Indonesia there i'm
    Posts
    508
    Thanks Thanks Given 
    83
    Thanks Thanks Received 
    244
    Thanked in
    68 Posts
    Rep Power
    13
    to create a chat maybe u can used Node.JS...
    it can be like FB chat...live chat so doesnt need to jquery request / refresh..
    Learn from PGC for Share on PGC..


    For another Stuff i have make try to find it [Please, register to view links]
    If i have help you, please thanks and respect ..

  3. #3
    GodLesZ
    GodLesZ is offline
    New member GodLesZ's Avatar
    Join Date
    2012 Dec
    Location
    Germany, NRW
    Posts
    4
    Thanks Thanks Given 
    1
    Thanks Thanks Received 
    0
    Thanked in
    0 Posts
    Rep Power
    0
    Quote Originally Posted by Smackie View Post
    not secure but just a baseline for people to get started on jquery chatrooms
    Then dont post it!?
    People with some knowledge of HTML, JS and PHP will easyly create some AJAX-based chatting thing.
    But, and thats the problem, people without enough knowledge will copy & paste your example, which is crap. They arent able to edit the secure wholes and will be hacked by some script kiddies.
    And why? Because YOU need some posts and think you are good enough to show your skills. Bullshit.

    You are using jQuery as selector engine but also using inline javascript to apply events. This is realy bad style!
    Also you are using getElementById to catch the user input because you didnt know how to do it with jQuery?
    Also, using 4 times MD5 on the password is a waste of performance!

    You should learn more about the things you use and post tutorials like this if your realy KNOW what you are doing instead of copy & paste example from the world wide web.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •