Jump to content
xisto Community
Sign in to follow this  
dungsport

Create Your Own Shout Box All you need is just PHP

Recommended Posts

I believe that people who are looking for a free shoutbox would find this useful. And it is even more valuable to them since it uses merely php code. All shoutbox data will be stored in text file in whatever way of format you would like.

 

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------------------------------------------

<!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---------------------------------------------------

 

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------------------------------------------

<?[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---------------------------------------------------

 

Step 4: Adding some functions

They are useful and essential to your shoutbox

-----------------------START COPY FROM HERE------------------------------------------

[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---------------------------------------------------

 

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------------------------------------------

[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---------------------------------------------------

 

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------------------------------------------

[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---------------------------------------------------

 

Step 7: Display old shouts

-----------------------START COPY FROM HERE------------------------------------------

[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://; 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://; target=\"_blank\">;,   	 "<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---------------------------------------------------

 

Step 8: End of the file

-----------------------START COPY FROM HERE------------------------------------------

</body></html>
-----------------------STOP COPY HERE---------------------------------------------------

 

 

 

 

 

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------------------------------------------

[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---------------------------------------------------

 

 

 

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://blog.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

Edited by szupie (see edit history)

Share this post


Link to post
Share on other sites

I would not use this code if i were any of you.

Since the input to the database file is not checked, I could also just input something like this.

<body onload="javascript:open('http://jipman.astahost.com','_self')">

And yes, even if there is already a body tag, most browser will do what it says here, immediatly opening up jipman.astahost.com.

This is just one very small example what you could do with this security hole, using javascript.

you have to check the file for any html characters and strip them out. Lookup php.net on howto do that since i am too lazy at the moment to explain how.

this is the problem area
$data = "$author | $date | $time | $ipaddr | $shout\n"; fwrite($handle,"$data"); fclose($handle);

Share this post


Link to post
Share on other sites

exactly jipman. you (dungsport) should use the strip_tags() function or the htmlentities() function. the first one obviously removes all html tags (<script><style>...) thus preventing any execution of code. htmlentities() lets the code be shown but it removes the ability for it to function. :(

Share this post


Link to post
Share on other sites

sorry guys, if you'd like to criticise anyone's job, please take some times to investigate their works. Your suggestion is appriciated and helpful but it would not help much.Please at least try the code first, not justlook at it. Or try to hack my shoutbox mates.Enjoy!!!

Share this post


Link to post
Share on other sites

well by looking at it we CAN tell that there is an issue or two. i have just tested it and there are a couple of things you can do to improve it. The only reason that the html/javascript code does not work is because of the link replacement that has been put in place as it replaces the < with < or > or whatever. thus resulting in the code not being executed. if that the link replacement code was not in place then it would work like what Jipman said about the Javascript. this could be solved using the str_replace() function or just using the htmlentities or strip_tags() function.you also have no wordwrapping feature which means that it could break the layout if something doesn't want to put it into an i-frame.to all:however if you still want to use the htmlentities() function with the wordwrapping and Link Conversion you WILL most likely have alot of issues and would have to re-code the link replacement code to ignore word breaks and html code with wordwrapping and so on.you could also think about using the trim() function to remove all white space from the beginning and end of a string. this could be good if you had a feature to check if the Name and Message field are left BLANK instead of just checking if they equal (name & message) respectivly. if the user does not want the shoutbox in an I-frame then you or whoever should think about creating a new file to house the bulk of the code for storing the text so there is shoutbox.php which shows the shouts and shows the form and another seperate one which keeps the code which is processed when the shout is submitted instead of having it process itself. this also eliminates the ability for some stupid person who keeps pressing F5 which would keep re-submitting the form data so it would be harder to flood the shoutbox. If you have a non-embedded version you should think about using the HTTP_REFERER to return them to whatever page they shouted from so they don't have to keep searching the site to find the page they were on.may i ask why you use the strftime(); function instead of the just the date() or the gmdate() function as your not using the setlocale() function to go with it?:( nice little shoutbox though. :D

Share this post


Link to post
Share on other sites

Thank you for your constructive feedback overture :) . I'm quite more than happy to receive suggestions like that.

why you use the strftime(); function instead of the just the date() or the gmdate() function

Just used it as it works, simple isn't it? I will improve it.

We human being always make mistakes and rarely do the best. So do I. That's why we have open-source software and such forums like Xisto to share and fix others' mistakes.

Hope you understand, :)

Share this post


Link to post
Share on other sites

I understand and that is cool.

why you use the strftime(); function instead of the just the date() or the gmdate() function

Just used it as it works, simple isn't it?

Hey if it works use it!

:) good luck on other ventures into the world PHP programming :)

Share this post


Link to post
Share on other sites

Ok guys, the shout box has been improved a lot and ready for you to download as whole package. Please visit my portfolio at http://blog.coolersport.info/ and download this light-weight shoutbox.

It is now more customisable and ready to use. Install with no hassle. Moreover, new features have been added into it like timezone adjustment, flooding control, bad words filter, toggle smiley panel and paging navigations. Check it out at http://blog.coolersport.info/.

Your suggestions and ideas for this shoutbox as well as my website are really appreciated.

Thanks

Share this post


Link to post
Share on other sites

Hi,I am new in here. Was browsing the web to look for a good shout script, and came to this page. I have tried it, but I get this message. Can somebody help me out with this error message?Parse error: syntax error, unexpected '[' in /home/liekwie/public_html/samfoek/schreeuwen.php on line 12Thank you in advanced!Ojnoka

Share this post


Link to post
Share on other sites

First - I like the shoutbox a lot...I might use a similar thing instead of starting a fowum on my web site...thats why I'll make it accessible only for registered users. I appreciate the work on formatting - I ain't good in that. To parse the input for mallicious entries ain't a problem.At the end - A NEAT WORK!

Share this post


Link to post
Share on other sites
$shout = " ".$shout;$shout = str_replace(chr(60), chr(58), $shout);$shout = str_replace(chr(62), chr(58), $shout);$shout = preg_replace($link_search, $link_replace, $shout);
Can you see what I've added in there?
It changes all < to : but the problem is people cant submit links anymore... It's either exploitable or people can send links...
Doesn't matter on the name box because its too small anyway.
Nice shoutbox script though, I couldn't of done that.
By the way I made an account just to say this lol.
I'll introduce myself now Ben, 14, England.
Edited by chappill (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.