How to Easily Make a PHP Shoutbox Application

How to Easily Make a PHP Shoutbox Application

13 50095

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.

Here is sample:

Live Demo

So download the example files and lets start coding!


Step 1. HTML

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

login_form.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

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

shoutbox_end.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

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

shoutbox.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.

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

// 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 !


13 COMMENTS

  1. I tried to create this Shoutbox application. I followed all of your steps but it showed me error. Can you explain a little more about your code?

  2. Love your tutorial, but one problem. The login is great, but how do people sign up to use the shoutbox? Registration? Thanks.

    • Signup (join process) should be part of your website. So you can or create some integration to pickup users`s details of your website, or create own join process to your website.

  3. How to deal with changing passwords?

    I can create different users but the password stays qwerty, How come?

    • 2 stephan
      Easy, this is not necessity to keep info about details only here, you always can use database (as example), own way of members storing.
      As you can see – I just using MD5 hashing for passwords, so you can MD5 your custom passwords and put it here.

  4. And another question: The shoutbox is working good but i have on error:

    Warning: mysql_close(): supplied argument is not a valid MySQL-Link resource in (url) on line 116

    It looks like there is something missing but i can’t figure out what. On line 116 stands mysql_close($vLink);

    • About SQL link warning, make sure that you using your own mysql database:
      $vLink = mysql_connect("localhost","username","password");
      (correct db name, username and pass)

  5. Can to setup a date in the messages? The time is registred with every message but i also wan’t to have a date on that line. Such as this of your last post: May 3, 2011 at 11:12 am

    • 2 stephan

      Very easy, make attention to:
      $sWhen = date(“H:i:s”, $aMessages['when']);
      this is format of output date/time. H:i:s mean Hour:minute:second
      You can read manual for this function, but here are necessary format to ‘May 3, 2011 at 11:12 am’ = ‘F d, Y – H:i a’

  6. Hello Admin
    I need some help if you would like to help me
    I need a shoutbox where I can see the Logged in Users
    Give me your IP , MSN , Facebook or something like that, I would appreciate your help :)

Leave a Reply