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"); ?>
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.
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.
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.
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.