How to Easily Make a PHP Chat Application

Date: 07th May 2010 Author: admin 97 Comments
Posted in: HTML/CSS, MySQL, PHP |Tags: , , , , ,

How to Easily Make Chat application with PHP + SQL

Today I will tell you about creating simple Chat application using our existing login system. This will useful and most simple solution. We will able to chat with our logged members. We will use database to store messages.

Here is a sample and package:

Live Demo
download in package

Now please download the example files and lets start coding!


Step 1. HTML

As usual, we start with the HTML.

This main chat window.

index.html

<frameset rows="65%,35%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF0000">
    <frame src="messages.php" name="main_frame">
    <frame src="main.php" name="login_frame" scrolling="no" noresize target="middle">
</frameset>

This is login form code.

login_form.html

<link type="text/css" rel="stylesheet" href="styles.css" />

<form class="login_form" method="post" action="main.php">
 <div>Username: <input type="text" name="username" /></div>
 <div>Password: <input type="password" name="password" /></div>
 <div><input type="submit" value="Login" name="Login" /></div>
</form>
<div>You can use username "User1" or "User2" or "User3" and password "qwerty" to login in system</div>

Here are new 3 template files to chat (2 to messages box and 1 to send message form):

chat_begin.html

<link type="text/css" rel="stylesheet" href="styles.css" />

<div class="chat_main">
 <h3>Chat</h3>

chat_end.html

</div>

chat_input.html

<link type="text/css" rel="stylesheet" href="styles.css" />

<form class="submit_form" method="post" action="main.php">
 <div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div>
</form>
<div>You can type anything in chat</div>

Step 2. CSS

Here are used CSS styles.

styles.css

.login_form {
 border: 1px solid #AAA;
 padding:10px;
}

h3 {margin-top:3px;}

.chat_main {
 border:1px solid #AAA;
 -moz-box-shadow:0 0 10px #ccc;
 -webkit-box-shadow: 0 0 10px #ccc;
 width:350px;
 padding:10px;
 background:#f3f3f3;
}

.message {
 border:1px solid #AAA;
 margin:4px;
 padding:5px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 background:#ffffff;
}

.textf {
-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;
}

.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
 font-size:10px;
 color:#888;
 margin-left:10px;
}

.submit_form {
 margin:10px 0px;
}

Step 3. SQL

We will need to execute next SQL in our database.

CREATE TABLE `s_chat_messages` (
`id` INT(11) NOT NULL AUTO_INCREMENT ,
`user` VARCHAR(255) NOT NULL ,
`message` VARCHAR(255) NOT NULL ,
`when` INT(11) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 4. PHP

As you remember – we had ready easy authentication system. I moved it to external library file (inc/login.inc.php). This will useful for us – now code more structured and it comfortable to use in different places of code.

After I created new library to work with chat (inc/chat.inc.php). This class have next functions:

acceptMessages – function accept sent messages and store it in DB table

getMessages – return list of last 15 messages

After I created 2 last files: messages.php and main.php. First file used to draw list of messages. It have autoupdate each 5 second (I thing this is enough to our chat). Second draw login form and input field of chat. Where we due logged able to post text in chat.

Ok, here are all used PHP files:

main.php

<?php

// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
 error_reporting(E_ALL & ~E_NOTICE);

require_once('inc/login.inc.php');
require_once('inc/chat.inc.php');

// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();

$oSimpleChat = new SimpleChat();

// draw login box
echo $oSimpleLoginSystem->getLoginBox();

// draw chat application
$sChatResult = 'Need login before using';
if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
 if ($oSimpleLoginSystem->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
 $sChatResult = $oSimpleChat->acceptMessages();
 }
}
echo $sChatResult;

?>

messages.php

<meta http-equiv="refresh" content="5">
<?php

require_once('inc/chat.inc.php');
$oSimpleChat = new SimpleChat();
echo $oSimpleChat->getMessages();

?>

inc/chat.inc.php

<?php

// simple chat class
class SimpleChat {

    // DB variables
    var $sDbName;
    var $sDbUser;
    var $sDbPass;

    // constructor
    function SimpleChat() {
        //mysql_connect("localhost","username","password");
        $this->sDbName = 'database_name';
        $this->sDbUser = 'username';
        $this->sDbPass = 'password';
    }

    // adding to DB table posted message
    function acceptMessages() {
        if ($_COOKIE['member_name']) {
            if(isset($_POST['s_say']) && $_POST['s_message']) {
                $sUsername = $_COOKIE['member_name'];

                //the host, name, and password for your mysql
                $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

                //select the database
                mysql_select_db($this->sDbName);

                $sMessage = mysql_real_escape_string($_POST['s_message']);
                if ($sMessage != '') {
                    mysql_query("INSERT INTO `s_chat_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
                }

                mysql_close($vLink);
            }
        }

        ob_start();
        require_once('chat_input.html');
        $sShoutboxForm = ob_get_clean();

        return $sShoutboxForm;
    }

    function getMessages() {
        $vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);

        //select the database
        mysql_select_db($this->sDbName);

        //returning the last 15 messages
        $vRes = mysql_query("SELECT * FROM `s_chat_messages` ORDER BY `id` ASC LIMIT 15");

        $sMessages = '';

        // collecting list of messages
        if ($vRes) {
            while($aMessages = mysql_fetch_array($vRes)) {
                $sWhen = date("H:i:s", $aMessages['when']);
                $sMessages .= '<div class="message">' . $aMessages['user'] . ': ' . $aMessages['message'] . '<span>(' . $sWhen . ')</span></div>';
            }
        } else {
            $sMessages = 'DB error, create SQL table before';
        }

        mysql_close($vLink);

        ob_start();
        require_once('chat_begin.html');
        echo $sMessages;
        require_once('chat_end.html');
        return ob_get_clean();
    }
}

?>

inc/login.inc.php

<?

// class SimpleLoginSystem
class SimpleLoginSystem {

    // variables
    var $aExistedMembers; // Existed members array

    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
            'User3' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }

    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();

        $sLogoutForm = '<a href="'.$_SERVER['PHP_SELF'].'?logout=1">logout</a>';

        if ((int)$_REQUEST['logout'] == 1) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }

        if ($_REQUEST['username'] && $_REQUEST['password']) {
            if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
                $this->simple_login($_REQUEST['username'], $_REQUEST['password']);
                return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
            } else {
                return 'Username or Password is incorrect' . $sLoginForm;
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
                }
            }
            return $sLoginForm;
        }
    }

    function simple_login($sName, $sPass) {
        $this->simple_logout();

        $sMd5Password = MD5($sPass);

        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }

    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');

        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }

    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}

?>

View Live Demo of our sample


Conclusion

I described how to make easy chat application based on PHP and MySQL. You can use this material to create own scripts into your startups. Good luck!

Enjoyed this Post?

   
   
   
If you enjoyed this article, feel free to share our tutorial with your friends.

97 Comments

    • Hermitbiker's Gravatar
    • …. so if you want your blog subscribers to contact you about something or anything…. put in your very own “Chat Room”…. a great tutorial for adding one to your own blog, very cool !! :)

    • Ameneh's Gravatar
    • Hi thanks for your help, I used the code and every thing seems ok except that in this way two users can have a same user_name or name in your s_members table because the primary key is id. also we cannot have primary key (id, name) because the id differes for every user but they may have same names. I am doing this for my project and I am really in hurry, I do not know what to do. please help me. Thanks.

    • Ameneh's Gravatar
    • I found that we can use unique keys, they work almost like primary keys. if you add the below code at the end of the code for your s_members table :
      UNIQUE name (name)
      the users cannot have same user names.

    • ambig's Gravatar
    • sammi's Gravatar
    • HI,i get this error yet I have the class SimpleLoginSystem in login.inc.php

      Fatal error: Class ‘SimpleLoginSystem’ not found in D:\wamp\www\source\main.php on line 17

      What do i do

    • no name's Gravatar
    • i only skimmed, and new at coding as everyone here is…

      however, im wondering about custom colors etc… is this possible with this example?

      thank you for your tutorial :-)

    • sairam's Gravatar
    • That was nice application ………
      But I need something that looks like Facebook chat….
      Please send the code to my mail
      Thanks in advance

    • alexander's Gravatar
    • Hypertargeting's Gravatar
    • Awesome stuff.
      I had a question is this chat application works on word press . Because i had a word press site for my friends. Please replay me. Am bit worry to work with database.

    • Obizzie's Gravatar
    • Hey man this is very impressive id like to refference this in a current academic project iam working on hope thats okay. thanks

    • Biggy's Gravatar
    • How are you. I created all these files and tried to run them. Am using a xampp database. Am having a problem such that when I try to run the main.php file, after login in with the username and password, am getting these error messages:
      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:9) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 125

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:9) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 127

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:9) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 111

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:9) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 115. he t
      When I check in my database, am seeing nothing in the table s_chat_messages. Where did I go wrong. Will appreciate very much if i get a response from you. Thank you.

    • Biggy's Gravatar
    • Thanks Admin for the effort you made trying to solve my problem. I deleted all the empty lines in my php and html documents, but the following errors are still coming out.

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:8) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 56

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:8) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 57

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:8) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 50

      Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\My Site\Web Page\Another\main.php:8) in C:\xampp\htdocs\My Site\Web Page\Another\login.inc.php on line 52.

      Am currently working on a project that is due very soon. Will be happy to receive ideas on how to deal with this. Thank you

    • moses's Gravatar
    • rithi's Gravatar
    • Saleem Memon's Gravatar
    • Nice source of information………………

      But there is a problem in script……….it is XSS-able.

      Anyone can easy XSS attack on this script.

    • Darren's Gravatar
    • gorki's Gravatar
    • Fatal error: Class ‘SimpleLoginSystem’ not found in C:\wamp\www\source\main.php on line 17 …..What do i do

      I CANT THE CODE..PLS SOMEONE HELP ME…I AM NEW WEB DEVELOPER…..PLS MAIL ME COMPLETE CODE

    • patel chirag's Gravatar
    • bert-coder's Gravatar
    • hi. thanks for this. can i ask something? what code make you chat refresh every second. it is needed to show the new messages from other people and i would like to know how.. Thanks in advance..

    • bert-coder's Gravatar
    • bert-coder's Gravatar
    • hi again another question coz im new to this one.. what is the use of ob_start and flush?? right now i just modified the chat by adding who’s online and making the user fetch from database and putting them into session. thanks alot for this one ..

    • jeff's Gravatar
    • Hi admin,

      I’m getting the error messages below. Can you tell me how to setup mysql-server. Step 3. SQL is not clear to me. Any help is greatly appreciated.

      Thanks,
      jeff

      =================================================
      Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘username’@'localhost’ (using password: YES) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 48

      Warning: mysql_select_db() [function.mysql-select-db]: Access denied for user ‘ODBC’@'localhost’ (using password: NO) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 51

      Warning: mysql_select_db() [function.mysql-select-db]: A link to the server could not be established in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 51

      Warning: mysql_query() [function.mysql-query]: Access denied for user ‘ODBC’@'localhost’ (using password: NO) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 54

      Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 54

      Warning: mysql_close(): supplied argument is not a valid MySQL-Link resource in C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php on line 68
      Chat
      DB error, create SQL table before
      =================================================

    • jeff's Gravatar
    • Hi admin,

      Do I need to change anything in the code, ie: to match the name of my database?

      Thanx.

    • jeff's Gravatar
    • Hi admin,

      I modified the code and I got this messages. Looked like it was the same problem reported by ‘Biggy’ but I couldn’t find your response/answer to his question above.

      Pls advise. Thanx,

      ==============================================
      Warning: Cannot modify header information – headers already sent by (output started at C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php:1) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\login.inc.php on line 60

      Warning: Cannot modify header information – headers already sent by (output started at C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php:1) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\login.inc.php on line 61

      Warning: Cannot modify header information – headers already sent by (output started at C:\Domains\estechs.com\estechs.com\wwwroot\inc\chat.inc.php:1) in C:\Domains\estechs.com\estechs.com\wwwroot\inc\login.inc.php on line 53
      ==============================================

    • alok0077's Gravatar
    • can we change the code to accept the other user name like “john,rock” and password ?????????

    • Manish's Gravatar
    • i m using wamp server as my localhost.. but still cannot run.. the error displayed is “The requested URL /LiveChat/’.$_SERVER['PHP_SELF'].’” was not found on this server.”…..wht i hv done r changed the name of
      $this->sDbName = ‘database_name’;
      $this->sDbUser = ‘root’;
      $this->sDbPass = ”;

    • raven's Gravatar
    • Hi admin this would really help our thesis i just wanna ask if can i implement this chat without internet? coz are thesis would be like online and lan chat..

    • raven's Gravatar
    • @admin thanks for your answer could you give me instruction on how to do that? coz im not good at php my knowledge is more on VB.. just nid help just emal me or add me to facebook khimira11@yahoo.com thanks a lot..

    • zack1995's Gravatar
    • Hi admin. I am a new web dev going into my senior year, and am trying to make a small chat room for my private school. I used the documents from the sample and am working on all necessary corrections, but I am in need of more knowledge in terms of how i can create:
      1. User privilege settings (i.e. admin, mod, user)
      2. A ranking system
      3. Private messages
      4. Avatars
      5. Profiles
      6. Banning system
      7. Registration
      8. How to log an ip address into a system so that only the allowed ip addresses could access the website.

    • Patel Sunil's Gravatar
    • Hi this code is not running

      it gives error

      error is SimpleLoginSystem give error at line 13 in main.php ifle

      file code is this

      =”) == 1)
      error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
      else
      error_reporting(E_ALL & ~E_NOTICE);

      require_once(‘inc/login.inc.php’);
      require_once(‘inc/chat.inc.php’);

      // initialization of login system and generation code
      $oSimpleLoginSystem = new SimpleLoginSystem();

      $oSimpleChat = new SimpleChat();

      // draw login box
      echo $oSimpleLoginSystem->getLoginBox();

      // draw chat application
      $sChatResult = ‘Need login before using’;
      if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
      if ($oSimpleLoginSystem->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
      $sChatResult = $oSimpleChat->acceptMessages();
      }
      }
      echo $sChatResult;

      ?>

    • black's Gravatar
    • i have a table. how do i connect this source code into my table. my table have username and password. please help me

    • Vinoth's Gravatar
    • Hello SIr,
      Your coding is very useful but your text content exceeded from out of the textarea,How to avoid this,Please reply to my mail id sir.

      Thanks&regards,
      Vinoth

    • Arjun's Gravatar
    • CZKA's Gravatar
    • Chat
      DB error, create SQL table before
      i create sql but i still have this problem
      i cant write anything on chat

    • reka's Gravatar
    • i have one doubt…..i need chat app coding in php ….no need group chat…..if i chat 2nd person dnt c the 3rd person

    • Sumee's Gravatar
    • dear admin,

      I used this. it is working untill loging page..but i cant log in using user names given….pls help me…and how i put user names which i want.

      thanks

    • Sumee's Gravatar
    • this is working..but cannot log..given usernames ar not working…..pls help.how i can use uernames which i want…

    • Sumesh's Gravatar
    • Hi,

      I’m getting an error while running the code…

      Fatal error: Class ‘SimpleLoginSystem’ not found in E:\files\wamp\www\Chat\main.php on line 13

      The line 13 is $oSimpleLoginSystem = new SimpleLoginSystem();

      I put the file “login.inc.php” in the folder named “inc”…

      Regards
      Sumesh

    • milli's Gravatar
    • hello
      i am unable to run this code .
      because it having some problem like chat box not shows the msg on the screen and i am unable to reset the cookies..
      please help me….

    • catmanol's Gravatar
    • Your ideea is ingenious but is a mechanism problem: if I write a message longer than 5 sec my page is refreshing and I have to focus again on form. So is not very functionally with http.

    • Rushit's Gravatar
    • Hey admin,
      I am new to this chat thing. Can you help me from where to start. ??
      I will highly appreciate your help. Thanks in advance.

    • Manish's Gravatar
    • hii admin, my name is maddy0101 and i want to try bulid a chat application and i follow your giving code and its not runing. i have some problem like when i want to run folder of application when i put all the files and .inc folder but its not displayed any thing and when i run the main.php file its giving error like:-
      Warning: require_once(inc-login.inc.php) [function.require-once]: failed to open stream: No such file or directory in C:\wamp\www\Chat\main.php on line 9
      and so many more plz give me a proper response and code so that i can create this application. Please give me reply as soon as posible. and if posible please send your response at my email magarwal0101@gmail.com. i have download your pakage but its not runing . and i want to ask to that you have mention database_name,user_name, can i use another database name like ”xyx”.
      Regards:-
      Maddy0101

    • Bakeca Incontri Udine's Gravatar
    • SnowPatch's Gravatar
    • Hey i need a little help…
      i have done all of it and it workes fine, but i have the following 2 problems:
      1: The messages is posted UNDER the other messages instead of OVER the other messages.
      2: When it hits the max ammount of messages, new messages will not be shown… (i think it is because of my first problem)
      please help…. For a demonstration, visit ….

    • Stian's Gravatar
    • Hi,

      Brilliant idea. I have tried to get the code to work, and it almost works expcept for one thing:
      I can’t display any of the messages i write in the application. The things i write appear in the database, when i check that manually, but it will not display on the website. Any ideas?

      PS: There is also no error messages.

      Thank you in advance.

    • Mark's Gravatar
    • Hi Admin!
      ( I’m very new to web development.) the thing I did was, extracted all files of the package into C:\xampp\htdocs and run http://localhost/index.html on Firefox. It says an error like this,

      Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘username’@'localhost’ (using password: YES) in C:\xampp\htdocs\inc\chat.inc.php on line 48

      Warning: mysql_close() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\inc\chat.inc.php on line 68

      Chat
      DB error, create SQL table before

      Please explain me the error and how to solve it.
      Thanks,

    • bram's Gravatar
    • Raven's Gravatar
    • tabrez's Gravatar
    • hie admin..when ever i refresh my page..the same message is again inseritng into database..how can i avoid this

    • Michael's Gravatar
    • Hi admin,

      I first logged in using User1/qwerty, and this appears on all the time. I tried to type something else, and hit “say”, but see nothing updated. Even logged in with User2/qwerty, and typed hello then “say’ button, but nothing happened (nothing updated!).
      What is wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>