Shoutbox Tutorial
Lets break it down

The first few lines of our code is just to include our MySQL database configuration and putting all $_POST value into a variable for easier access.

<?php
  //Include config.php once
  require_once("config.php");
  //Name of user
  $name = $_POST['name'];
  //User Message
  $message = $_POST['message'];
  //User Ip
  $ip = $_POST['ip'];
  //Length of message in characters
  $mlen = strlen($message);
  //Maximum length of characters you want
  $maxlength = 150;
  //Date format
  $date = date("M jS Y");
?>
Error Checking

Next we're going to check for errors. If there is a blank field and the message length is higher than our limit an error message will be display.

<?php
  //If the user hit the "Submit" button
  if ($_POST['submit'])  {
    //Check for name value
    if ($name == "") { 
      echo "<strong>Error: Please enter your nickname.</strong>"; 
    }
    //Check for message value
    else if ($message == "") { 
      echo "<strong>Error: No message to be sent.</strong>"; 
    }
    //Message length must be lower than our maximum length
    else if ($mlen > $maxlength) { 
      echo "<strong>Error: Message too long.</strong>"; 
    }
    else {
      //If everything is right insert it on our database
      $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')"); 
    }
  }
?>

Notice that we have if ($_POST['submit']) { on the third line, this is to make sure that the script is only executed when the user hit the submit button.

Retrieving Information

The code below will retrieve all our information into our database so we can display it on our website.

<?php
   //Connect to our MySQL database
  $db = mysql_connect($dbhost,$dbuser,$dbpass);
  //Select database
  mysql_select_db($dbname) or die(mysql_error());
  //Select all fields into our table
  $query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 20"; 
  //Retrieve all information
  $result = mysql_query($query);
?>

We set the limit to 20 rows, again you can change this to whatever you want but setting this too high will make your shoutbox harder to read and maybe load slower.

Displaying Information

Now we're ready to display our information! We're almost there!

<?php
  //Some CSS styling
  echo "<div id=\"contentbox\">\n";
  echo "<ul id=\"shoutboxmessage\">\n";
  while($r = mysql_fetch_array($result)) {
    //Strip unwanted HTML tag from nickname
    $name = $r['name'];
    $name = strip_tags($name);
    //Strip unwanted HTML tag from message
    $message = $r['message'];
    $message = strip_tags($message);
    //Display shouts!
    echo "<li><strong>$name</strong>: $message</li>\n";
  }
  echo "</ul>\n";
  echo "</div>\n";
  //Close connection
  mysql_close($db);
?>

We're using PHP's strip_tags() function to strip HTML tags, this could result in removal of some messages, if you dont want your browser to interpret them as HTML tags (displaying them "as is") you could use htmlentities() function in replace of strip_tags() function. It's really up to you.

Our form

Below is the form we're going to use so user can post in our shoutbox!

<?php
  <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <strong>Nickname:</strong><br/>
  <input type="text" name="name" maxlength="20"><<br/>
  <strong>Message:</strong><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']; ?>">
  </form>
</div>
?>

It is important not to have the same input name with your other forms or it may result in a conflict, if you're going to change the input name make sure you also change the $_POST value. On the next page I will show you how to display your shoutbox correctly. Click here to continue.


Print this page | Discuss this tutorial

Next »

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