As a PHP developer, I sometimes get asked to make a shoutbox. If the same should happen to you, here's a quick tutorial. Obviously you'll want to add your own CSS to this, but here's the basic idea.
We need a MySQL database table and three PHP files.
First, we need a file to hold our database information.
--- File #1: mysql.inc.php ---
<?php
# Simply Shouting - a shoutbox example
# File name: mysql.inc.php
# Description: A file to hold database info.
$host = 'localhost';
$user = 'database_user_name';
$password = 'database_user_password';
$name = 'database_name';
?>
We also need a database table with four fields. I'm naming mine shouts. Since you may not be SQL inclined, create a php file called install.php. After you use this file once, delete it!
-- File #2: install.php --
<?php
# Simply Shouting - a shoutbox example
# File name: install.php
# Description: Creates the database table.
// include the database info file
include("mysql.inc.php");
//connect to database
$connection = @mysql_connect($host, $user, $password) or die(mysql_error());
$db = @mysql_select_db($name,$connection) or die(mysql_error());
//if we already have a table named shouts, we need to delete it.
$sql = 'DROP TABLE IF EXISTS `shouts`';
$result = @mysql_query($sql,$connection) or die(mysql_error());
// now that we're sure we don't have one, create the table
$sql = 'CREATE TABLE `shouts` (
`id` int(11) NOT NULL auto_increment,
`timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
`shoutby` varchar(50) default NULL,
`shout` varchar(50) default NULL,
PRIMARY KEY `id` (`id`)
) TYPE=MyISAM AUTO_INCREMENT=1' ;
echo 'Creating table: \'shouts\'....';
// close connection
$result = @mysql_query($sql,$connection) or die(mysql_error()); ?>
<html>
<head>
<title>Simply Shouting - Installation Script</title>
</head>
<body>
<br />
Your installation process has finished. Please delete all of the installation files off of your server immediately. The install files for this application are:<br />
<br />
1) install.php <br />
<br />
<br />
<!-- I could just send them to index.php automatically, but then they'd wonder if it created correctly or not. -->
Click <a href="index.php">here</a> to start shouting.</html>
Here's our main page:
--- File #3: index.php ---
<?
# Simply Shouting - a shoutbox example
# File name: index.php
# Description: Main page to display our shouts.
//include the database info page
include_once("mysql.inc.php");
//connect to the database
$connection = @mysql_connect($host, $user, $password) or die(mysql_error());
$db = @mysql_select_db($name,$connection) or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style><body>
<div style="width:500px;height 400px; border:thin groove #519554;">
<?
// let's display the last 10 shouts. First, initialize a counter
$counting = 0;
// we need a counter because I want to show our shouts in ASC order
// (like a chat room)
$sql = mysql_query("SELECT * FROM `shouts`");
while($data = mysql_fetch_array($sql)){
//counts every row
$counting = $counting + 1;
} //end while
// if the count comes back greater than 10, then we select the last
// 10 shouts for display.
if($counting > 10){
$countlessten = $counting - 9;
$sql = mysql_query("SELECT * FROM `shouts` ORDER BY `shouts`.`id` ASC LIMIT $countlessten,10");
}else{
//else it doesn't matter, there's less than 10!
$sql = mysql_query("SELECT * FROM `shouts` ORDER BY `shouts`.`id` ASC LIMIT 10");
}
while($data = mysql_fetch_array($sql)){
//my timestamp field in the database is basically useless to me unless
//I parse it. The following code parses the timestamp into things I
//can use.
$timestamp = $data['timestamp'];
$postedyear=substr($timestamp,0,4);
$postedmonth=substr($timestamp,5,2);
$postedday=substr($timestamp,8,2);
$postedtime=substr($timestamp,11,5);
$newpostedtime = "";
$nomilitary=substr($postedtime,0,2);
// the hour is greater than 12, so we need to switch back to 1-12 and
// add a "pm"
if($nomilitary >= 13){
$nomilitary = $nomilitary - 12 ;
$newpostedtime = $nomilitary ;
$newpostedtime .= ":" ;
$newpostedtime .= substr($postedtime,3,2) ;
$newpostedtime .= " pm";
}
if($newpostedtime != ""){
$postedtime = $newpostedtime;
}else{
$postedtime .= " am";
}
//now that we have the time, let's get the shout and the shouter
echo $postedmonth . "/" . $postedday . "/" . $postedyear . " at " . $postedtime ." - <strong>" . $shoutby . " said: </strong>" . $shout . "<br><br>";
// looks like: 12/1/2008 at 5:02pm - Josh said: Yo Yo Yo!
}
//below is the HTML form for creating the shouts
?>
<form id="newshout" name="newshout" action="newshout.php" method="post"><input name="shoutby" type="text" id="shoutby" onClick="javascript:this.value=''" value="Enter your name here" size="24" maxlength="50" />
<br><br><input name="shout" type="text" id="shout" onClick="javascript:this.value=''" value="Click & Shout!" size="24" maxlength="50" />
<br><br><input id="submit" name="submit" type="submit" value="Shout!" /></form>
</div>
</body>
</html>
and last, we need a PHP file to process the HTML form.
-- File #4: newshout.php --
<?
# Simply Shouting - a shoutbox example
# File name: newshout.php
# Description: Process the HTML form on index.php and redirect.
//catch the name of the shouter
$shoutby = $_POST['shoutby'];
if($shoutby == "Enter your name here"||$shoutby == ""){
//this means the shouter didn't enter their name
$shoutby = "Visitor";
}
if($_POST['shout']){
// they shouted something
if($_POST['shout'] != "Click & Shout!"){
//they didn't shout the default, so continue processing
$shout = $_POST['shout'];
//security: replacing < & > will keep out hackers
$shout = str_replace("<", " ", $shout);
$shout = str_replace(">", " ", $shout);
// include the database info page
include_once("dbaccess.php");
// connect to the database
$connection = @mysql_connect($host, $user, $password) or die(mysql_error());
$db = @mysql_select_db($name,$connection) or die(mysql_error());
// insert the shout into the database
$sql = "INSERT INTO `shouts`(`shoutby`,`shout`) VALUES('$shoutby','$shout')";
//close connection
$result = @mysql_query($sql,$connection);
}
}
?>
<html>
<head>
</head>
<body onLoad="window.open('index.php','_self')">
</body>
</html>
Joshua Walcher wrote :1769
I put up a working example at http://www.pkob.info/shout/
Joshua Walcher wrote :1770
I also made some inline CSS changes to the shoutbox. They are viewable at http://www.pkob.info/shout/
Joshua Walcher wrote :1771
Spark brought up a interesting point of view at the
example location by saying it would be better with an AJAX
refresh so that the page doesn't stutter and he felt he
should be able to add more text than 50 characters
including spaces. My thoughts? I don't feel like the
tutorial would be easy to understand if I threw in the
AJAX code. AJAX, for all of its beauty, is still a long,
ugly beast to a new developer. Also, I intentionally kept
the shout output short as a security precaution. It's your
decision to change it if you want. I think a "shout"
should be kept shorter than a book, though.
