ShoutBox Development process

Index

In the Beginning

When deciding to learn PHP I needed a target, a program to aim for; though its true that a ShoutBox is a relatively simple program it seemed a good place to start.

After I developed my first ShoutBox, I noticed from my site statistics that I was getting a sizable number of hits through various search engines, Google for one, from people looking for a PHP implementation of a ShoutBox. This inspired me to improve the existing code and to release it under the open source GPL licence rather than the Creative Commons (which it was originally under)

Currently this is still a work in progress, but you are quite welcome to have the code for your own purposes. If you do; it would be really nice if you could link to me (or this page) from somewhere near your ShoutBox, and e-mail me telling me you have used it, that way I can know if the code is useful or not, and send you any fixes I may come up with.

If you do make any changes to my code I would be really interested to see what you have done, so drop me a line. Thanks :)

The original ShoutBox code version 1.0

The ShoutBox code uses the following html form to take the name, address and message, then to post them as strings called $name, $address, and $shout respectively, to a PHP script 'send.PHP'


    
The send script then takes this string variables $shout and $address then for security, strips all the html tags from it. The beginning and end spaces are then striped from each variable. After this, there is logic to determine whether the length of the string $shout is greater than 100 characters. If $shout is less than 100 characters, the string is posted as it is. If however the string contains more than 100 characters only the first 100 are taken and "..." is appended to the end of the string.

    
The second 'if' statement is logic top determine what should happen if one or more of the form boxes are left blank. This ensures that the string $shout is only posted if it is not null. The code within the second 'if' statement opens the text file 'shouts.txt' and sets the pointer to the end of the file. Where, using the function fwrite(), writes today's date, (defined in the function above) and the Day and the time in 24hr clock; then displays the name as a link to their url (if not null) and then the given message with a line break at the end. The file is then closed.

    
= 200) {
    $shout = substr($shout, 0, 200);
    $shout = $shout."...";
}

// If the user has entered a shout, open the 'shouts.txt' file,
// and execute the following conditionals.
if ($shout != "") {
    $fp = fopen("shouts.txt", "a");
    $today = date("D, H:i");
    // If the user has not entered a name or a address,
    // print today's date and the shout.
    if ($name == "" && $address == "") {
        fwrite($fp, "$today: $shout\n");
    }
    // If the user has entered a name but not an address,
    // print today's date, the name, a hyphen and then the shout.
    else if ($name != "" && $address == "") {
        fwrite($fp, "$today: $name - $shout\n");
    }
    // If the user has entered an address but not a name,
    // print today's date, then 'Anon' as a link to the address, a hyphen and then the shout.
    else if ($name == "" && $address != "") {
        fwrite($fp, ''.$today.': Anon - '.$shout."\n");
    }
    // If the user has entered both name and address,
    // Print their name as a link to their address (with the appropriate title), a hyphen and then their shout.
    else if ($name != "" && $address != "") {
        fwrite($fp, ''.$today.': '.$name.' - '.$shout."\n");
    }
    // All situations are covered by the above code,
    // so the following code should never be executed.
    else {
        die("you should never see this ... if you are, something has gone horribly horribly wrong!");
    }
    
    // Close the 'shouts.txt' file
    fclose($fp);
}
?>

    
Finally, the display of the messages is done on the same page as the form, the array of strings $shouts is taken from the file 'shouts.txt', reversed - so the most recent is at the top, and then sliced so that the array only contains the 10 most recent messages. For every item in the remaining array, the code makes it into an unordered list item with a line break at the end.

    



    
The option to view all the shouts is done in much the same way, except the list is not trimmed down to any length of shouts:

    



    
The display of the shouts was done using the following CSS code:

    
ul#boxList {
  border: 1px dashed #4A7BA6;
  padding: 5px;
  color: #4A7BA6;
  background-color: white; 
}

    
Improved Requirements - (A sort of to-do list)


    
So I have code that works, but it's not perfect. I have decided to rethink the concept of the ShoutBox from the level of requirements:

    
    
Possible customisable features:

    
    
Version 2.0 Bug Fixing

    
This section contains a list of the bug fixes and alterations between versions 1.0 and 2.0.

    
Someone recently [12th Mar 2003] tried (and unfortunately succeeded!) in breaking the design of my site by entering in one very long word, this did not word-wrap and looked awful. This inspired me to fix the bug using PHP's 'word-wrap' function (http://www.php.net/manual/en/function.wordwrap.php) to enter the following line of code: $item = wordwrap($item, 50, ' ', 1);

    
This takes the string $item, and when displaying it, inserts a space ' ' every 50 characters, making sure not to insert one in the middle of the word unless that word is more than 50 characters long. In displaying the string, it doesn't matter if there are extra spaces (i.e. between words) because HTML renders only the one. The argument '1' at the end of the line of code ensures that if the word is more than 50 characters long it will force a break.

    
So the code for displaying the shouts now looks like:

    



    
this is on my index page, so the code for displaying all the shouts won't include the array_slice line

    
The restriction on entry for the length of the 'shout' was extended from 200 to 300 characters, the 'name' field has been trimmed to 30 characters, and the 'url' to 255 characters.

    
The code now also adds an 'http://' to the address if it is not there already, and the 'url' field is not null. This is done using the following code:

    
if (substr($address, 0, 4) != 'http' && $address != "") {
    $address = 'http://'.$address;
}


    
This checks if the 1st four characters contain 'http', if it is not; then it concatenates 'http://' on the front of existing 'url'.

    
Andy suggested I should perform some additional client side check to the above field trimming... so here it is, (the code for the form):

    



    
The current code! 'ShoutBox 2.0'

    
The code in the send.php file looks as follows:

    
= 300) {
    $shout = substr($shout, 0, 300);
    $shout = $shout."...";
}

// name also needs trimming
if (strlen($name) >= 30) {
    $name = substr($name, 0, 30);
    $name = $name."...";
}

// url's should not be more than 255 characters long anyway
if (strlen($address) >= 255) {
    $address = substr($address, 0, 255);
    $address = $address."...";
}

// Adds an 'http://' to the address if it is not there already and is not null.
if (substr($address, 0, 4) != 'http' && $address != "") {
    $address = 'http://'.$address;
}

// If the user has entered a shout, open the 'shouts.txt' file,
// and execute the following conditionals.
if ($shout != "") {
    $fp = fopen("shouts.txt", "a");
    $today = date("D, H:i");
    // If the user has not entered a name or a address,
    // print today's date and the shout.
    if ($name == "" && $address == "") {
        fwrite($fp, "$today: $shout\n");
    }
    // If the user has entered a name but not an address,
    // print today's date, the name, a hyphen and then the shout.
    else if ($name != "" && $address == "") {
        fwrite($fp, "$today: $name - $shout\n");
    }
    // If the user has entered an address but not a name,
    // print today's date, then 'Anon' as a link to the address, a hyphen and then the shout.
    else if ($name == "" && $address != "") {
        fwrite($fp, ''.$today.': Anon - '.$shout."\n");
    }
    // If the user has entered both name and address,
    // Print their name as a link to their address (with the appropriate title), a hyphen and then their shout.
    else if ($name != "" && $address != "") {
        fwrite($fp, ''.$today.': '.$name.' - '.$shout."\n");
    }
    // All situations are covered by the above code,
    // so the following code should never be executed.
    else {
        die("you should never see this ... if you are, something has gone horribly horribly wrong!");
    }
    
    // Close the 'shouts.txt' file
    fclose($fp);
}
?>




 
Redirecting...





Please wait...






    
The code to display the shouts on the index page (or wherever you only want a selection of the most recent quotes to appear - I used 10) Looks like:

    



    
To display all the quotes on one page, just remove the whole "$shouts = array_slice ($shouts, 0, 10);" line.

    
Sites using my code

    
(Click here to view this section with screenshots)

    
Below is a list of sites (that I know of) which use my code, or a variant of my code:

    
    
Sites inspired by this ShoutBox:

    
    
I would love to add more sites here, so mail me if you have used a variant of my code, and I'll add you to this list.

    
And finally ... Happy Developing :)