How to Easily Make a PHP Chat Application

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 be useful and most simple solution. We will able to chat with our logged members. We will use database to store messages.

Step 1. HTML

As usual, we start with the HTML.

This main chat window.

index.html

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

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

HTML

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

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

chat_end.html

HTML

</div>

chat_input.html

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

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.

SQL

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 already 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 accepts sent messages and saves them in database table

getMessages – returns list of recent 15 messages

Then I created two php files: messages.php and main.php. First file generates list of recent messages. It refreshes the list each 5 seconds (it is enough to our chat). Second file generates a login form and one text input field for the chat. After we login, we can use this field to post messages in the chat.

Ok, here are all used PHP files:

main.php

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

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

<?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();
    }
}

?>

<?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

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);
    }
}

?>

<?

// 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);
    }
}

?>

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!

Step 1. HTML

index.html

login_form.html

chat_begin.html

chat_end.html

chat_input.html

Step 2. CSS

styles.css

Step 3. SQL

Step 4. PHP

main.php

messages.php

inc/chat.inc.php

inc/login.inc.php

Conclusion

You Might Also Like

sha1, md5, other cryptography and How to

How to Translate your Site in Runtime using jQuery

How to parse web pages using XPath