How to Easily Make a PHP Shoutbox Application

  • Post category:HTML/CSS / PHP
  • Reading time:179 mins read

Today I will tell you about creating easy Shoutbox application using our existed login system. This will useful and simple solution. We will able to shout something with our logged members. We will use database to store messages.

Step 1. HTML

As usual, we start with the HTML. This is login form code.

login_form.html

HTML
<form class="login_form" method="post" action="index.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" of "User2" and password "qwerty" to login in system</div>

Here are new 2 template files to shoutbox:

shoutbox_begin.html

HTML
<hr />
<link type="text/css" rel="stylesheet" href="shoutbox.css" />
<div class="shoutbox_main">
    <h3>Shoutbox</h3>

shoutbox_end.html

HTML
    <form class="s_form" method="post" action="index.php">
        <div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div>
    </form>
    <div>You can shout anything in this chat</div>
</div>

Step 2. CSS

Here are used CSS styles.

styles.css

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

shoutbox.css

CSS
.shoutbox_main {
    border:1px solid #AAA;
    width:350px;
    padding:10px;
}

.message {
    border-bottom:1px solid #AAA;
    padding:2px;
}

.message span {
    font-size:10px;
    color:#888;
    margin-left:10px;
}

.s_form {
    margin:0px;
    padding:10px 0;
}

Step 3. SQL

We will need to execute next SQL in our database.

SQL
CREATE TABLE `s_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

Now that we followed all the code on the front-end, it is now time for the last part of this tutorial – the PHP back-end.

As we can see – this is just pure class with functions for login system.

I used next functions:

getLoginBox – function return login form. In case if member logged – it will return Hello member record and possibility for logout

simple_login – perform login to system (storing necessary information in cookies)

simple_logout – perform logout (clearing used cookies)

check_login – return true in case if username and password exists in system

getShoutbox – function return shoutbox form.

index.php

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

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

// draw shoutbox application
echo $oSimpleLoginSystem->getShoutbox();

// class SimpleLoginSystem
class SimpleLoginSystem {

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

    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
            'User2' => '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);
    }

    // shoutbox functions addon
    function getShoutbox() {
        //the host, name, and password for your mysql
        $vLink = mysql_connect("localhost","username","password");

        //select the database
        mysql_select_db("database_name");

        // adding to DB table posted message
        if ($_COOKIE['member_name']) {
            if(isset($_POST['s_say']) && $_POST['s_message']) {
                $sUsername = $_COOKIE['member_name'];
                $sMessage = mysql_real_escape_string($_POST['s_message']);
                mysql_query("INSERT INTO `s_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
            }
        }

        //returning the last 5 messages
        $vRes = mysql_query("SELECT * FROM `s_messages` ORDER BY `id` DESC LIMIT 5");

        $sMessages = '';

        // collecting list of messages
        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>';
        }

        mysql_close($vLink);

        ob_start();
        require_once('shoutbox_begin.html');
        echo $sMessages;
        require_once('shoutbox_end.html');
        $sShoutboxForm = ob_get_clean();

        return $sShoutboxForm;
    }
}

Conclusion

I described one of easy and useful shoutbox application based on PHP and MySQL. You can use this material to create own scripts into your startups. Good luck !