I would assume that you guys have some knowledge of PHP and it is no need for me to explain every line of code. If you don’t know much about CSS, you make one as I suggest below.
What you need:
- A hosting service that allows you to host php pages
- Any HTML editor (notepad, EditPlus, … or even Dreamweaver)
At the first try, just copy and paste what I post here in the right order. What you have after all steps is just one file call shout.php (could be whatever name ends with .php) and a CSS file.
PART 0: PREPARATION
If you want to have smilies in your shoutbox, you should create a folder named images under the folder in which you will save the shout.php and common.css. Put all smilies images in that folder and define them in Part I - Step 3.
PART I: CREATE SHOUTBOX
Note: Please follow all steps. Read the explanation if any, then copy and paste following code. The code of next step should be pasted next to the previous one
Step 1: Making file shout.php
Open your HTML editor and create a new file then save as shout.php. Remember: if you use notepad, please type "shout.php" (including double quote) when it prompts for file name in Save As dialog.
Step 2: Shoutbox header
Copy the code below into the file you have just saved.
-----------------------START COPY FROM HERE------------------------------------------
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" href="common.css" type="text/css">
<base target="_self">
<title>Tran Tien Dung - Shoutbox</title>
</head>
<body class="shoutboxbody" style="overflow-x: hidden;">
-----------------------STOP COPY HERE---------------------------------------------------<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" href="common.css" type="text/css">
<base target="_self">
<title>Tran Tien Dung - Shoutbox</title>
</head>
<body class="shoutboxbody" style="overflow-x: hidden;">
Step 3: Shoutbox Configuration
In the code below, it is where you configure your shoutbox. The comment will tell you what they are for.
-----------------------START COPY FROM HERE------------------------------------------
CODE
<?
[color=green]/************* CONFIGURATION *****************/
// your database file, it will be created automatically if it doesnt exist[/color]
$filename = "./shoutdb.txt";
[color=green]// use mask for link and email (yes/no). If yes, every link and email in your shoutbox will be displayed as [link] or [email] respectively (defined as below).[/color]
$usemask = "yes";
$link_mask = "[link]";
$email_mask = "[email]";
[color=green]// the smiley directory. This is where you place all images for smilies.[/color]
$smileydir = './images/';
[color=green]// define your own smilies
// the shout containing characters like they are defined on the left hand side will be replaced by an image on the right.
// you could add more or change them to whatever you'd like[/color]
$smileys = array (
"[:)]" => "smile.gif",
"[:))]" => "lol.gif",
"[:(]" => "sad.gif",
);
-----------------------STOP COPY HERE---------------------------------------------------[color=green]/************* CONFIGURATION *****************/
// your database file, it will be created automatically if it doesnt exist[/color]
$filename = "./shoutdb.txt";
[color=green]// use mask for link and email (yes/no). If yes, every link and email in your shoutbox will be displayed as [link] or [email] respectively (defined as below).[/color]
$usemask = "yes";
$link_mask = "[link]";
$email_mask = "[email]";
[color=green]// the smiley directory. This is where you place all images for smilies.[/color]
$smileydir = './images/';
[color=green]// define your own smilies
// the shout containing characters like they are defined on the left hand side will be replaced by an image on the right.
// you could add more or change them to whatever you'd like[/color]
$smileys = array (
"[:)]" => "smile.gif",
"[:))]" => "lol.gif",
"[:(]" => "sad.gif",
);
Step 4: Adding some functions
They are useful and essential to your shoutbox
-----------------------START COPY FROM HERE------------------------------------------
CODE
[color=green]/************* FUNCTIONS *****************/
// this will prepare all smilies[/color]
function alter_smiley(&$item1, $key, $prefix) {
$item1 = " <img alt=\"\" src=\"$prefix$item1\" align=\"middle\" border=\"0\" />";
}
[color=green]// bad words filter, you should add your own ones here[/color]
function removeBadWords(&$text) {
$badwords = array(
"/fu[color=gray].[/color]ck/",
"/sh[color=gray].[/color]it/"
);
for ($i=0;$i<count($badwords);$i++)
$text = preg_replace($badwords[$i], "[:)]", $text);
}
-----------------------STOP COPY HERE---------------------------------------------------// this will prepare all smilies[/color]
function alter_smiley(&$item1, $key, $prefix) {
$item1 = " <img alt=\"\" src=\"$prefix$item1\" align=\"middle\" border=\"0\" />";
}
[color=green]// bad words filter, you should add your own ones here[/color]
function removeBadWords(&$text) {
$badwords = array(
"/fu[color=gray].[/color]ck/",
"/sh[color=gray].[/color]it/"
);
for ($i=0;$i<count($badwords);$i++)
$text = preg_replace($badwords[$i], "[:)]", $text);
}
Step 5: Saving new shout procedures
This will check if there is a new shout submitted, it will then save them to the database file. That new shout will be ready to show up.
-----------------------START COPY FROM HERE------------------------------------------
CODE
[color=green]/************* SAVE SHOUT *****************/
// This takes the post vars[/color]
extract($_POST);
[color=green]// This will store any error message[/color]
$errorMsg = "";
[color=green]// This executes the script once submit is clicked.[/color]
if($submit) {
if(!$name) $errorMsg.="You need to input a name!<br>";
elseif(!$shout) $errorMsg.="You need to make a shout!<br>";
elseif(($name=="Name") || ($shout=="Message")) $errorMsg.="Slacker! Say something mate.<br>";
[color=green]// Good, now the essentials are taken care of! "
// Let's make the name display a link if there is a site specified.[/color]
else {
if($site) $author = "<a href='$site'>$name</a>";
else $author = $name;
[color=green]// Now we should open the file, or make it if it's not there![/color]
$handle = fopen($filename,"a");
[color=green]// Date...[/color]
$date = strftime("%D");
$time = strftime("%T");
$ipaddr = $REMOTE_ADDR;
removeBadWords($shout);
[color=green]// this is how a shout will be stored in your database file[/color]
[color=green]// you can change this to your taste but do remember to change the code reading the file[/color]
$data = "$author | $date | $time | $ipaddr | $shout\n";
fwrite($handle,"$data");
fclose($handle);
}
}
echo $errorMsg;
-----------------------STOP COPY HERE---------------------------------------------------// This takes the post vars[/color]
extract($_POST);
[color=green]// This will store any error message[/color]
$errorMsg = "";
[color=green]// This executes the script once submit is clicked.[/color]
if($submit) {
if(!$name) $errorMsg.="You need to input a name!<br>";
elseif(!$shout) $errorMsg.="You need to make a shout!<br>";
elseif(($name=="Name") || ($shout=="Message")) $errorMsg.="Slacker! Say something mate.<br>";
[color=green]// Good, now the essentials are taken care of! "
// Let's make the name display a link if there is a site specified.[/color]
else {
if($site) $author = "<a href='$site'>$name</a>";
else $author = $name;
[color=green]// Now we should open the file, or make it if it's not there![/color]
$handle = fopen($filename,"a");
[color=green]// Date...[/color]
$date = strftime("%D");
$time = strftime("%T");
$ipaddr = $REMOTE_ADDR;
removeBadWords($shout);
[color=green]// this is how a shout will be stored in your database file[/color]
[color=green]// you can change this to your taste but do remember to change the code reading the file[/color]
$data = "$author | $date | $time | $ipaddr | $shout\n";
fwrite($handle,"$data");
fclose($handle);
}
}
echo $errorMsg;
Step 6: Display HTML form
This will display the HTML form on top of the shout box. You could move them to after step 7 to make it appear at the bottom of the page.
-----------------------START COPY FROM HERE------------------------------------------
CODE
[color=green]/************* SHOW FORM *****************/[/color]
echo "<table class=\"SB_formarea\" width=\"100%\" border=\"0\">\n";
echo "<tr><td>\n";
echo "<form method=\"post\" action=\"shout.php\">\n";
echo "<div align=\"center\"><input type=\"text\" name=\"name\" size=\"16\" value=\"Name\" maxlength=\"14\" title=\"Name\" class=\"SB_input\"><br>\n";
echo "<input type=\"text\" name=\"shout\" size=\"16\" value=\"Message\" maxlength=\"1024\" title=\"Message\" class=\"SB_input\"><br>\n";
echo "<input type=\"submit\" name=\"submit\" value=\":: send ::\" class=\"SB_button\">\n";
echo "<input type=\"button\" name=\"refresh_it\" value=\"::\" class='SB_button' onclick=\"window.open('shout.php','_self');\">\n";
echo "</div></td></tr></form></table>\n";
-----------------------STOP COPY HERE---------------------------------------------------echo "<table class=\"SB_formarea\" width=\"100%\" border=\"0\">\n";
echo "<tr><td>\n";
echo "<form method=\"post\" action=\"shout.php\">\n";
echo "<div align=\"center\"><input type=\"text\" name=\"name\" size=\"16\" value=\"Name\" maxlength=\"14\" title=\"Name\" class=\"SB_input\"><br>\n";
echo "<input type=\"text\" name=\"shout\" size=\"16\" value=\"Message\" maxlength=\"1024\" title=\"Message\" class=\"SB_input\"><br>\n";
echo "<input type=\"submit\" name=\"submit\" value=\":: send ::\" class=\"SB_button\">\n";
echo "<input type=\"button\" name=\"refresh_it\" value=\"::\" class='SB_button' onclick=\"window.open('shout.php','_self');\">\n";
echo "</div></td></tr></form></table>\n";
Step 7: Display old shouts
-----------------------START COPY FROM HERE------------------------------------------
CODE
[color=green]/************* DISPLAY SHOUT *****************/
// This makes an array with each line in the file [/color]
$shouts = file($filename);
$rowColor = 0;
$count = 0;
array_walk ($smileys, 'alter_smiley', $smileydir);
[color=green]// We'll add krsort right here! [/color]
krsort($shouts);
[color=green]// This does the same thing to each part...[/color]
$link_search = array("/\</",
"/\>/",
"/\]/",
"/\[/",
"#([\n ])([a-z0-9\-_.]+?)@([^, \n\r]+)#i",
"#([\n ])www\.([a-z0-9\-]+)\.([a-z0-9\-.\~]+)((?:/[^, \n\r]*)?)#i",
"/(?<!<a href=\")((http|ftp)+(s)?:\/\/[^<>\s]+)/i");
if ($usemask=='yes')
$link_replace = array("<",
">",
">",
"<",
"\\1<a href=\"mailto:\\2@\\3\">".$email_mask."</a>",
"\\1<a href=\"http://www.\\2.\\3\\4\" target=\"_blank\">".$link_mask."</a>",
"<a href=\"\\0\" target=\"_blank\">".$link_mask."</a>");
else
$link_replace = array("<",
">",
">",
"<",
"\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>",
"\\1<a href=\"http://www.\\2.\\3\\4\" target=\"_blank\">www.\\2.\\3\\4</a>",
"<a href=\"\\0\" target=\"_blank\">\\0</a>");
foreach($shouts as $sbox) {
$count++;
[color=green]// We'll split it into another array with list and explode.[/color]
[color=green]// If you have changed the way data stored, please modify the following line too[/color]
list($auth,$date,$time,$ipaddr,$shout) = explode(" | ", $sbox);
$shout = " ".$shout;
$shout = preg_replace($link_search, $link_replace, $shout);
$shout = strtr($shout, $smileys);
$shout = chop($shout);
[color=green]// Now, we have to output it![/color]
echo "<table cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"SB_table$rowColor\"><tr><td class=\"SB_shoutbox\" title='$time $date $ipaddr'><b>$auth</b>: $shout</td></tr></table>\n";
if ($rowColor==0) $rowColor = 1;
else $rowColor = 0;
}
?>
-----------------------STOP COPY HERE---------------------------------------------------// This makes an array with each line in the file [/color]
$shouts = file($filename);
$rowColor = 0;
$count = 0;
array_walk ($smileys, 'alter_smiley', $smileydir);
[color=green]// We'll add krsort right here! [/color]
krsort($shouts);
[color=green]// This does the same thing to each part...[/color]
$link_search = array("/\</",
"/\>/",
"/\]/",
"/\[/",
"#([\n ])([a-z0-9\-_.]+?)@([^, \n\r]+)#i",
"#([\n ])www\.([a-z0-9\-]+)\.([a-z0-9\-.\~]+)((?:/[^, \n\r]*)?)#i",
"/(?<!<a href=\")((http|ftp)+(s)?:\/\/[^<>\s]+)/i");
if ($usemask=='yes')
$link_replace = array("<",
">",
">",
"<",
"\\1<a href=\"mailto:\\2@\\3\">".$email_mask."</a>",
"\\1<a href=\"http://www.\\2.\\3\\4\" target=\"_blank\">".$link_mask."</a>",
"<a href=\"\\0\" target=\"_blank\">".$link_mask."</a>");
else
$link_replace = array("<",
">",
">",
"<",
"\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>",
"\\1<a href=\"http://www.\\2.\\3\\4\" target=\"_blank\">www.\\2.\\3\\4</a>",
"<a href=\"\\0\" target=\"_blank\">\\0</a>");
foreach($shouts as $sbox) {
$count++;
[color=green]// We'll split it into another array with list and explode.[/color]
[color=green]// If you have changed the way data stored, please modify the following line too[/color]
list($auth,$date,$time,$ipaddr,$shout) = explode(" | ", $sbox);
$shout = " ".$shout;
$shout = preg_replace($link_search, $link_replace, $shout);
$shout = strtr($shout, $smileys);
$shout = chop($shout);
[color=green]// Now, we have to output it![/color]
echo "<table cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"SB_table$rowColor\"><tr><td class=\"SB_shoutbox\" title='$time $date $ipaddr'><b>$auth</b>: $shout</td></tr></table>\n";
if ($rowColor==0) $rowColor = 1;
else $rowColor = 0;
}
?>
Step 8: End of the file
-----------------------START COPY FROM HERE------------------------------------------
CODE
</body>
</html>
-----------------------STOP COPY HERE---------------------------------------------------</html>
PART II: CREATE CSS FILE
Just copy the content below into a file called common.css (should be in the same folder of shout.php). You can modify it if you'd like and make sure you do it properly.
-----------------------START COPY FROM HERE------------------------------------------
CODE
[color=green]/* SHOUTBOX coding */[/color]
.shoutboxbody {
background-color : #F6FAF9;
font: 8pt;
scrollbar-face-color: #F5F5F5;
scrollbar-highlight-color: #74612A;
scrollbar-shadow-color: White;
scrollbar-3d-light-color: #D1D7DC;
scrollbar-arrow-color: #756023;
scrollbar-track-color: #F8F8FF;
scrollbar-dark-shadow-color: #98AAB1;
font-family: Tahoma, Arial, Verdana, Times;
color: #2A7400;
margin: 0;
}
a:link,a:active,a:visited {
font-size : 8pt;
color : #164000;
text-decoration : none;
}
a:hover {
font-size : 8pt;
text-decoration: underline;
}
td {
font-size : 8pt;
font-family: Verdana, Arial, Tahoma, Times, sans-serif;
}
.SB_button {
background : #DDDDDD;
border : 1px solid #C0C0C0;
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
font-weight : bold;
}
.SB_input {
background : #F6FAF9;
border : 1px solid #DDDDDD;
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
}
.SB_formarea {
background-color : #F6FAF9;
border-bottom-color : #FFFFFF;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #FFFFFF;
border-left-style : none;
border-left-width : 1px;
border-right-style : solid;
border-right-width : 1px;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
.SB_shoutbox {
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
text-align : left;
}
.SB_table0 {
background-color : #F6FAF9;
border-bottom-color : #CBE2DD;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #CBE2DD;
border-left-style : none;
border-left-width : 1px;
border-right-color : #CBE2DD;
border-right-style : none;
border-right-width : 1px;
border-top-color : #CBE2DD;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
.SB_table1 {
background-color : #F6FAF9;
border-bottom-color : #CBE2DD;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #CBE2DD;
border-left-style : none;
border-left-width : 1px;
border-right-color : #CBE2DD;
border-right-style : none;
border-right-width : 1px;
border-top-color : #CBE2DD;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
-----------------------STOP COPY HERE---------------------------------------------------.shoutboxbody {
background-color : #F6FAF9;
font: 8pt;
scrollbar-face-color: #F5F5F5;
scrollbar-highlight-color: #74612A;
scrollbar-shadow-color: White;
scrollbar-3d-light-color: #D1D7DC;
scrollbar-arrow-color: #756023;
scrollbar-track-color: #F8F8FF;
scrollbar-dark-shadow-color: #98AAB1;
font-family: Tahoma, Arial, Verdana, Times;
color: #2A7400;
margin: 0;
}
a:link,a:active,a:visited {
font-size : 8pt;
color : #164000;
text-decoration : none;
}
a:hover {
font-size : 8pt;
text-decoration: underline;
}
td {
font-size : 8pt;
font-family: Verdana, Arial, Tahoma, Times, sans-serif;
}
.SB_button {
background : #DDDDDD;
border : 1px solid #C0C0C0;
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
font-weight : bold;
}
.SB_input {
background : #F6FAF9;
border : 1px solid #DDDDDD;
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
}
.SB_formarea {
background-color : #F6FAF9;
border-bottom-color : #FFFFFF;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #FFFFFF;
border-left-style : none;
border-left-width : 1px;
border-right-style : solid;
border-right-width : 1px;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
.SB_shoutbox {
color : #2A7400;
font-family: Tahoma, Arial, Verdana, Times, sans-serif;
font-size : 8pt;
text-align : left;
}
.SB_table0 {
background-color : #F6FAF9;
border-bottom-color : #CBE2DD;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #CBE2DD;
border-left-style : none;
border-left-width : 1px;
border-right-color : #CBE2DD;
border-right-style : none;
border-right-width : 1px;
border-top-color : #CBE2DD;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
.SB_table1 {
background-color : #F6FAF9;
border-bottom-color : #CBE2DD;
border-bottom-style : none;
border-bottom-width : 1px;
border-left-color : #CBE2DD;
border-left-style : none;
border-left-width : 1px;
border-right-color : #CBE2DD;
border-right-style : none;
border-right-width : 1px;
border-top-color : #CBE2DD;
border-top-style : solid;
border-top-width : 1px;
color : #2A7400;
font-size : 8pt;
}
CONCLUSION
I have not explained the database format. However, it is not hard to find out since you have some shouts in it.
You can see the demo on my website (http://coolersport.info)
If anything's unclear, feel free to ask
Good luck everyone
-----When you have codes in your post, put them in code bbcodes so that the system gives you the proper amount of hosting credits. I edited them for you, if you want any changes (for better appearance/copying/etc.), just ask me to do so.
-----szupie
. I'm quite more than happy to receive suggestions like that.
