To start off, open up mysql in the command line, or phpmyadmin, and create a database called shoutbox.
Next, enter the following sql into the command line, or the phpmyadmin sql box, while using the shoutbox database:
CODE
create table messages(author varchar(30), message text, time timestamp, mid int auto_increment, primary key(mid));
This creates the table we need to store the messages, note the "mid" column, this gives each message a seperate id number, we'll see why that's useful later.
Next, create a new PHP page on your server, lets call it shoutbox.php. Copy this code into it:
CODE
<html>
<head>
<title>My Shoutbox</title>
</head>
<body>
<center><b>My Shoutbox</b></center>
<center><table width="80%">
<!-- Shoutbox update -->
<!-- Shoutbox update -->
<!-- Shoutbox posts -->
<!-- Shoutbox posts -->
<!-- Shoutbox form -->
<!-- Shoutbox form -->
</table></center>
</body>
</html>
<head>
<title>My Shoutbox</title>
</head>
<body>
<center><b>My Shoutbox</b></center>
<center><table width="80%">
<!-- Shoutbox update -->
<!-- Shoutbox update -->
<!-- Shoutbox posts -->
<!-- Shoutbox posts -->
<!-- Shoutbox form -->
<!-- Shoutbox form -->
</table></center>
</body>
</html>
Ok, now we start on the actual shoutbox.
In between the "<!-- Shoutbox form -->" lines, type the following text, we're going to make the shoutbox form.
CODE
<tr><td><form name="shoutbox" action="?action=shout" method="POST"><label for="name">Name:</label><input type="text" name="name"><br>
<textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr>
<textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr>
Ok, this gives us a place to write a name, and a message. Note that in the "action" attribute of the form, I've put "?action=shout", if the page is called shoutbox.php, it will take us to shoutbox.php?action=shout. This uses a GET variable, which we will talk about below.
Now, we're going to make the section that updates the shoutbox. This is where we get into some actual PHP coding! Between the "<!-- Shoutbox update -->" lines, type the following text:
CODE
<?php
mysql_connect("hostname","username","password");
mysql_select_db("shoutbox");
if ($_GET["action"]=="shout")
{
$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";
mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());
}
?>
mysql_connect("hostname","username","password");
mysql_select_db("shoutbox");
if ($_GET["action"]=="shout")
{
$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";
mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());
}
?>
Not much, is it? But it does what we need. First, it connects to mysql. Change the text in bold to your own mysql hostname, username and password. Then, it selects the database. If your database isn't called shoutbox, change this bit.
Then, it checks to see if the GET variable action is set to "shout." Get variables are those things you sometimes see in urls, you know, when there's a ?something=something&hello=whatever after the address. These are get variables. In this example, submitting the form takes you to shoutbox.php?action=submit, so the action GET variable is set to "shout."
Next, it performs the MySQL query, which inserts the data from the form into the shoutouts table. There's also a bit of code to show us whet the problem is if it doesn't work.
Ok, now for the final bit, the posts. In between the "<!-- Shoutbox posts -->" lines, write the following text:
CODE
<?php
$query = "select * from messages order my mid desc";
$result = mysql_query($query);
while ($array=mysql_fetch_array($result))
{
echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";
}
?>
$query = "select * from messages order my mid desc";
$result = mysql_query($query);
while ($array=mysql_fetch_array($result))
{
echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";
}
?>
Ok, what this does, is it starts off by getting the data from the database, and ordering it by it's unique id, descending. It then writes the information into a table cell once for every entry in the table. The date function makes a readable date out of the time from the database.
By now, the page should look like this:
CODE
<html>
<head>
<title>My Shoutbox</title>
</head>
<body>
<center><b>My Shoutbox</b></center>
<!-- Shoutbox update -->
<?php
mysql_connect("hostname","username","password");
mysql_select_db("shoutbox");
if ($_GET["action"]=="shout")
{
$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";
mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());
}
?>
<!-- Shoutbox update -->
<center><table width="80%">
<!-- Shoutbox posts -->
<?php
$query = "select * from messages order my mid desc";
$result = mysql_query($query);
while ($array=mysql_fetch_array($result))
{
echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";
}
?>
<!-- Shoutbox posts -->
<!-- Shoutbox form -->
<tr><td><form name="shoutbox" action="?action=shout" method="POST"><label for="name">Name:</label><input type="text" name="name"><br>
<textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr>
<!-- Shoutbox form -->
</table></center>
</body>
</html>
<head>
<title>My Shoutbox</title>
</head>
<body>
<center><b>My Shoutbox</b></center>
<!-- Shoutbox update -->
<?php
mysql_connect("hostname","username","password");
mysql_select_db("shoutbox");
if ($_GET["action"]=="shout")
{
$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";
mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());
}
?>
<!-- Shoutbox update -->
<center><table width="80%">
<!-- Shoutbox posts -->
<?php
$query = "select * from messages order my mid desc";
$result = mysql_query($query);
while ($array=mysql_fetch_array($result))
{
echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";
}
?>
<!-- Shoutbox posts -->
<!-- Shoutbox form -->
<tr><td><form name="shoutbox" action="?action=shout" method="POST"><label for="name">Name:</label><input type="text" name="name"><br>
<textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr>
<!-- Shoutbox form -->
</table></center>
</body>
</html>
And there you have it! Your very own shoutbox! Feel free to style is, and modify it anyway you want. You can add validation code, and functions to delete posts!
- Jay
.
. As for a self-refreshing shoutbox, you can include a meta-refresh or an AJAX script that looks for changes in the database when it's submitted and then it refreshes... sorta like the Digg Spy utility.
it doesn't show only html anymore like it did in the old days 