Home
Web Programming
PHP
Advanced Shoutbox
Level: Experienced Software:
PHP Editors
Ok, You're kind of new to PHP programming and you deeply want to have a place where people browsing your site can leave some comments on your site... isn't that cute. Well, you've surely seen it before, the Shoutbox.
First things first, what to we need to get this working?!
A host that supports PHP, the access to a mySQL database, a text editor and some coffee to stay awake of my boring speeches.
Step 1 - Creating the mySQL table
Before we get to the codes of the shoutbox, let's create a mySQL database:
| CREATE TABLE 'shoutbox' (
'id' INT(12) NOT NULL AUTO_INCREMENT, 'username' VARCHAR(25) NOT NULL, 'email' VARCHAR(25) NOT NULL, 'message' TEXT NOT NULL, 'date' VARCHAR(15) NOT NULL, 'ip' VARCHAR(25) NOT NULL , PRIMARY KEY ('id')) |
Here, we created a table called "shoutbox", with the id, username, email, date, message and ip rows. If you don't know how to create a mysql database, ask your host administrator.
Ok basically, a shoutbox is made this way:
1. Show the latest posts
2. Show some forms for the users to add their comments.
This is really simple in my opinion, let's code this.
Step 2 - Create a new file, connect.php
We need to create a connection to the database. We could type the code in our shoutbox.php but it could be dangerous if we enter the private informations directly in it. So we create a basic connect.php page that we can protect with a .htaccess file later. So open your text editor, and save it as connect.php, insert this code in it:
| <?php
$co_host = "localhost"; // sql database host $co_name = "username"; // username $co_pw = "password"; // password $co_db = "database name"; // database name you got access to mysql_connect($co_host,$co_name,$co_pw) or die(mysql_error()); mysql_select_db($co_db) or die(mysql_error()); ?> |
| <?php
$co_host = "localhost"; // sql database host $co_name = "username"; // username $co_pw = "password"; // password $co_db = "database name"; // database name you got access to mysql_connect($co_host,$co_name,$co_pw) or die(mysql_error()); mysql_select_db($co_db) or die(mysql_error()); ?> |
Step 3 - Create a new file, shoutbox.php
Create a new page called shoutbox.php and enter this:
| <html>
<head> <title>Shoutbox!</title> <style type="text/css"> <!-- .message { color: #000000; font-family: Verdana; font-size: 10px;} .username { color: #FF9900 font-family: Verdana; font-size: 10px; font-weight: bold} .date { color: #707070; font-family: Verdana; font-size: 9px;} .forms { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10 px; color: #6CA05A; text-decoration: none; background-color: #CCCCCC; border-color: #6CA05A; border-style: solid; border: 1px} .submit { background-color: #CCCCCC; border-color: #6CA05A; color: #2A343C; font-family: Verdana; font-size: 10px; border-style: solid; border 1 px;} --> </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding: 2px"> <?php // If submitted if($_POST['submit']) { // Verify if the fields were filled. if(!$_POST['username']) { echo 'Error, You need to post your Username!'; die; } if(!$_POST['email']) { echo 'Error, You need to post your Email!'; die; } if(!$_POST['message']) { echo 'Error, You need to post a Message!'; die; } // Date format $date = date("d/m/y"); // http://www.php.net/date // Assign variables of the forms $username = $_POST['username']; $email = $_POST['email']; $message = $_POST['message']; $ip = $_SERVER['REMOTE_ADDR']; // Connect to the database include('connect.php'); // Insert the info in the shoutbox table. $query = "INSERT INTO shoutbox (username, email, message, date, ip) VALUES ('$username','$email','$message','$date','$ip')"; mysql_query($query); // close connection mysql_close(); // Show message to let them return to the shoutbox ?> <div align="center">Thank you for submitting.<br> Return to the <a href="shoutbox.php">shoutbox</a>! <?php // If NOT submitted } else { // connect to the database include('connect.php'); $query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 10"; $result = mysql_query($query); // Create a table ?> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <? // Run a While loop for the rows while($c = mysql_fetch_array($result)) { ?> <tr> <td><a href="mailto:<? echo $c[email] ?>"> <? echo $c[author] ?></a> says: <div align="justify"><? echo $c[message] ?></div> </td> </tr> <tr><td>on <? echo $c[date] ?> <hr noshade="noshade" size="1" style="border-style: dashed" color="#000000" /></td></tr> <? } ?> </table> <form method="post" action="shoutbox.php"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Username :</td> <td><input type="text" name="username" class="forms"></td> </tr> <tr> <td>Email :</td> <td><input type="text" name="email" class="forms"></td> </tr> <tr> <td>Message :</td> <td><input type="text" name="message" class="forms"></td> </tr> <tr> <td colspan="2"><input type="submit" name="submit" value="Speak!" class="subtmit"></td> </tr> </table> </form> <? } mysql_close(); ?> </body> </html> |
Ok, we created a page that said: If someone posts, add it to the database, if not, show the messages and the form inputs. Isn't that simple? Yes it is and it's logical. Now it's your turn to modify it all you want. Switch some codes, values and stuff to learn the few commands we threw out there.
In conclusion, a shoutbox is a nice way of letting the visitors express themselves about your website. It is clear, easy to code (I hope), and easy to customize.
If I was not clear in some points, feel free to contact us, we'll be glad to help you.
More Web Programming: Most Popular Materials | Fresh Materials
| More PHP Tutorials at LearnPHP.org