Shoutbox Tutorial
Creating a simple shoutbox

In this tutorial we will create a simple shoutbox where a user can post easily, with some error checking in forms and protecting special characters like HTML tags. Please note that your web host must have PHP and MySQL, also this tutorial will be much easier if you're somewhat familiar with PHP and MySQL.

Create the table

First of all lets create the table so run the SQL query below.

CREATE TABLE shoutbox (
    id INT(10) not null AUTO_INCREMENT,
    name VARCHAR(20),
    message TEXT,
    date VARCHAR(15),
    ip VARCHAR(15),
Query Explanation
name VARCHAR(20) - This is where the user name will be store, it has a limit of 20 characters.
message TEXT - This is where the user message will be store, we're setting the message limit in the form (see below later) so no there's no limit on this field.
date VARCHAR(15) - Store the date of the post, we're using date("M jS Y") format (ex. ) so 15 characters should be enough.
ip VARCHAR(15) - Store user IP address, this would be useful just in case someone try to abuse your shoutbox.

Database Connection

Now that the table is all set up, lets set up your MySQL database! Make sure you edit the variables below to match your MySQL database configuration.

  $dbhost = "localhost"; 
  $dbname = "DATABASE_NAME";
  $dbuser = "USERNAME"; 
  $dbpass = "PASSWORD"; 

Save the code above as config.php, we will be needing this to connect to your MySQL database.

The Shoutbox!

Ok, now that you have the MySQL configuration all set up lets create the heart of the shoutbox!


  $name = $_POST['name'];
  $message = $_POST['message'];
  $ip = $_POST['ip'];
  $mlen = strlen($message);
  $maxlength = 150;
  $date = date("M jS Y");

  if ($_POST['submit'])  {
    if ($name == "") { 
      echo "<strong>Error: Please enter your nickname.</strong>"; 
    else if ($message == "") { 
      echo "<strong>Error: No message to be sent.</strong>"; 
    else if ($mlen > $maxlength) { 
      echo "<strong>Error: Message too long.</strong>"; 
    else {
      $db = mysql_connect($dbhost,$dbuser,$dbpass); 
      mysql_select_db($dbname) or die(mysql_error());
      mysql_query("INSERT INTO shoutbox(name,message,date,ip) VALUES('$name','$message','$date','$ip')"); 

  $db = mysql_connect($dbhost,$dbuser,$dbpass);
  mysql_select_db($dbname) or die(mysql_error());
  $query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 20"; 
  $result = mysql_query($query);

  echo "<div id=\"contentbox\">\n";
  echo "<ul id=\"shoutboxmessage\">\n";
  while($r = mysql_fetch_array($result)) {
    $name = $r['name'];
    $name = strip_tags($name);
    $message = $r['message'];
    $message = strip_tags($message);
    echo "<li><strong>>$name</strong>: $message</li>\n";
  echo "</ul>\n";
  echo "</div>\n";


  <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="text" name="name" maxlength="20"><<br/>
    <textarea name="message"></textarea><br/>
    <input type="submit" name="submit" value="Shout It!">
    <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">

Save the code above as shoutbox.php. That was probably a lot of code for you but we'll break in down on the next page. Click here to continue.

Print this page | Discuss this tutorial

Next »

Home | Site Map | Privacy Policy | Advertising | Contact Us
Copyright © 2006-2014 - All Rights Reserved.
eXTReMe Tracker