A Shoutbox is nothing but a chat program, where anyone can chat with any anonymous user.
You can read more about shoutbox at this link : http://en.wikipedia.org/wiki/Shoutbox
So lets make a shoutbox.
We will make this shoutbox in basic php and mysql.
First you need to make a database where you will store this chats, so from phpmyadmin you can create a databse.
Next we will add a table, so in sql query window, just paste the below code:
[php]
CREATE TABLE `shoutbox` (
`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`name` VARCHAR(45) NOT NULL,
`email` VARCHAR(60) NOT NULL,
`post` TEXT NOT NULL,
`ipaddress` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`)
);
[/php]
Here we made a table with name, email, id and ipaddress fields, where all values is must, id is set to auto increement and we are using IP address to track the user.
Next we will create a file named as db.php, where we make our MYSQL Connection, so just paste the below code in your file db.php
[php][/php]
<?php
$host = 'localhost'; //Normally localhost
$username = 'root'; //Username which is added to your database, root is default
$password = ''; //Password for your user, for root password is null
$database = 'shoutbox'; //your database name
?>
[php][/php]
Now we will create our actual shoutbox code file, make a file and name it to index.php, and add following code in it
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shoutbox From WebsTutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<h1>Shoutbox</h1>
<h5><a href="http://www.webstutorial.com" title="WebsTutorial">WebsTutorial</a></h5>
<div id="boxtop"></div>
<div id="content">
<?php
$self = $_SERVER['PHP_SELF']; //the $self variable equals this file
$ipaddress = ("$_SERVER[REMOTE_ADDR]"); //the $ipaddress var equals users IP
include ('db.php'); // for db details
// defines a $connect variable, which when used
// will attempt to connect to the databse using
// details provided in config.php
// if it fails, will display error - or die();
$connect = mysql_connect($host,$username,$password) or die('<p>Unable to connect to the database server at this time.</p>');
// connect to database using details provided
// and uses the $connect variable above
// if it fails, will return error - or die();
mysql_select_db($database,$connect) or die('<p>Unable to connect to the database at this time.</p>');
// checks the POST to see if something has been submitted
if(isset($_POST['send'])) {
// are any of the fields empty? the || means 'or'
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['post'])) {
echo('<p>You did not fill in a required field.</p>');
} else {
// if there are no empty fields, insert into the database:
// escape special characters to stop xss and sql injecting
// we take the 'name' and 'post' parts from the POST
// and run it through htmlspecialchars()
// this stops users sending HTML code, as it could be malicious
//
// also runs through mysql_real_escape_string()
// stops users sending SQL code, which could be used to access the db
$name = htmlspecialchars(mysql_real_escape_string($_POST['name']));
$email = htmlspecialchars(mysql_real_escape_string($_POST['email']));
$post = htmlspecialchars(mysql_real_escape_string($_POST['post']));
// this is our SQL string to insert shouts into db
$sql = "INSERT INTO shouts SET name='$name', email='$email', post='$post', ipaddress='$ipaddress';";
// we run the SQL string now
// if it succeeds, display message
if (@mysql_query($sql)) {
echo('<p>Thanks for shouting!</p>');
} else {
// if it errors, send message
echo('<p>There was an unexpected error when posting your shout.</p>');
}
}
}
// now we retrieve the 8 latest shouts from the db
$query = "SELECT * FROM shouts ORDER BY `id` DESC LIMIT 8;";
// run the query. if it fails, display error
$result = @mysql_query("$query") or die('<p>There was an unexpected error grabbing shouts from the database.</p>');
?><ul><?php
// while we still have rows from the db, display them
while ($row = mysql_fetch_array($result)) {
$ename = stripslashes($row['name']);
$eemail = stripslashes($row['email']);
$epost = stripslashes($row['post']);
// Woop! We can use Gravatars aswell!!
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail))."&size=70";
echo('<li><div><p>'.$ename.'</p><img src="'.$grav_url.'" alt="Gravatar" /></div><div><p style="padding:20px 0 0 0;">'.$epost.'</p></div></li>');
}
?></ul>
<!-- at the bottom of the page, we display our comment form -->
<form action="<?php $self ?>" method="post">
<h2>Shout!</h2>
<div><label for="name"><p>Name:</p></label><input name="name" type="text" cols="20" /></div>
<div><label for="email"><p>Email:</p></label><input name="email" type="text" cols="20" /></div>
<textarea name="post" rows="5" cols="40"></textarea>
<input name="send" type="hidden" />
<p><input type="submit" value="send" /></p>
</form>
</div><!--/content-->
<div id="boxbot"></div>
</div><!--/container-->
</body>
</html>
[/html]
Explanation:
OK, in this file first we get the IP address of the person and open the db connection by including our first created db.php file.
Then we pass a check condition to check the emptiness in the textboxes. And we also store the values in respective variables, here while storing them we are using php functions htmlspecialchars, to avoid html characters and mysql_real_escape_string to avoid sql statements, this two are very important in terms of security else anyone will pass html and sql codes and pamper the database or server.
After storing them, we finally code the insert query and echoes a custom message of successful execution.
Wait a minute, this is not the end, now we will also have to display the recently 8 shouts, so we fire a select query and store the array in a variable.
And finally in a while loop we echo the email, name and the shout message.
Woila, done, but arghhhhhhhhhhh without CSS, its like image without color, so make a file style.css and add the following css code in it.
[css]
/* Shoutbox PHP tutorial from WebsTutorial */
* {
margin: 0;
padding: 0;
}
body {
background: #323f66 top center url("images/back.png") no-repeat;
color: #ffffff;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
h1 {
font-size: 3.5em;
letter-spacing: -1px;
background: url("images/shoutbox.png") no-repeat;
width: 303px;
margin: 0 auto;
text-indent: -9999em;
color: #33ccff;
}
h2 {
font-size: 2em;
letter-spacing: -1px;
background: url("images/shout.png") no-repeat;
width: 119px;
text-indent: -9999em;
color: #33ccff;
clear: both;
margin: 15px 0;
}
h5 a:link, h5 a:visited {
color: #ffffff;
text-decoration: none;
}
h5 a:hover, h5 a:active, h5 a:focus {
border-bottom: 1px solid #fff;
}
p {
font-size: 0.9em;
line-height: 1.3em;
font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
}
p.error {
background-color: #603131;
border: 1px solid #5c2d2d;
width: 260px;
padding: 10px;
margin-bottom: 15px;
}
p.success {
background-color: #313d60;
border: 1px solid #2d395c;
width: 260px;
padding: 10px;
margin-bottom: 15px;
}
#container {
width: 664px;
margin: 20px auto;
text-align: center;
}
#boxtop {
margin: 30px auto 0px;
background: url("images/top.png") no-repeat;
width: 663px;
height: 23px;
}
#boxbot {
margin: 0px auto 30px;
background: url("images/bot.png") no-repeat;
width: 664px;
height: 25px;
}
#content {
margin: 0 auto;
width: 664px;
text-align: left;
background: url("images/bg.png") repeat-y;
padding: 15px 35px;
}
#content ul {
margin-left: 0;
margin-bottom: 15px;
}
#content ul li {
list-style: none;
clear: both;
padding-top: 30px;
}
#content ul li:first-child {
padding-top:0;
}
.meta {
width: 85px;
text-align: left;
float: left;
min-height: 110px;
font-weight: bold;
}
.meta img {
padding: 5px;
background-color: #313d60;
}
.meta p {
font-size: 0.8em;
}
.shout {
width: 500px;
float: left;
margin-left: 15px;
min-height: 110px;
padding-top: 5px;
}
form {
clear: both;
margin-top: 135px !important;
}
.fname, .femail {
width: 222px;
float: left;
}
form p {
font-weight: bold;
margin-bottom: 3px;
}
form textarea {
width: 365px;
overflow: hidden; /* removes vertical scrollbar in IE */
}
form input, form textarea {
background-color: #313d60;
border: 1px solid #2d395c;
color: #ffffff;
padding: 5px;
font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
margin-bottom: 10px;
}
ul li{
border: 1px solid #2A3556;
float: left;
margin-right: 10px;
padding: 10px;
position: relative;
right: 12px;
margin-bottom:5px;
}
[/css]
This was your last step by styling the shoutbox.
Feel free to ask any questions if you didn't understand any point or if I missed something
Final Layout:
