 Create Your Own Shout Box, All you need is just PHP |
|
|
|
|
  |
 May 11 2005, 09:42 AM
Post
#1
|
|
|
Member - Active Contributor  Group: Members Posts: 93 Joined: 21-March 05 Member No.: 3,136  |
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------------------------------------------ CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -----------------------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 <? -----------------------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); } 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; 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"; 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; } ?> Step 8: End of the file -----------------------START COPY FROM HERE------------------------------------------ CODE </body> </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; } 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
This post has been edited by szupie: May 11 2005, 08:40 PM |
 |
 
|
|
May 12 2005, 02:06 AM
Post
#2
|
|
|
Member - Active Contributor Group: Members Posts: 93 Joined: 21-March 05 Member No.: 3,136 |
Thanks szupie, just remove all the color tags in the code comments. I did try bbcode but it doesnt highlight the comments. Hihi, thanks anyway
|
|
|
|
|
May 12 2005, 11:43 AM
Post
#3
|
|
|
Pretty please? Group: Members Posts: 733 Joined: 28-November 04 From: Holland Member No.: 1,552 |
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. CODE <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 CODE $data = "$author | $date | $time | $ipaddr | $shout\n"; fwrite($handle,"$data"); fclose($handle); |
|
|
|
|
May 12 2005, 01:46 PM
Post
#4
|
|
|
Premium Member Group: Members Posts: 208 Joined: 6-September 04 From: England Member No.: 315 |
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.
|
|
|
|
|
May 13 2005, 12:33 PM
Post
#5
|
|
|
Member - Active Contributor Group: Members Posts: 93 Joined: 21-March 05 Member No.: 3,136 |
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!!! |
|
|
|
|
May 13 2005, 01:37 PM
Post
#6
|
|
|
Premium Member Group: Members Posts: 208 Joined: 6-September 04 From: England Member No.: 315 |
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.
|
|
|
|
|
May 14 2005, 12:30 PM
Post
#7
|
|
|
Member - Active Contributor Group: Members Posts: 93 Joined: 21-March 05 Member No.: 3,136 |
Thank you for your constructive feedback overture
 . I'm quite more than happy to receive suggestions like that.QUOTE 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 astahost to share and fix others' mistakes. Hope you understand, 
|
|
|
|
|
May 14 2005, 12:46 PM
Post
#8
|
|
|
Premium Member Group: Members Posts: 208 Joined: 6-September 04 From: England Member No.: 315 |
I understand and that is cool.
QUOTE why you use the strftime(); function instead of the just the date() or the gmdate() function QUOTE 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
|
|
|
|
|
Jun 6 2005, 06:14 AM
Post
#9
|
|
|
Member - Active Contributor Group: Members Posts: 93 Joined: 21-March 05 Member No.: 3,136 |
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://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://coolersport.info. Your suggestions and ideas for this shoutbox as well as my website are really appreciated. Thanks |
|
|
|
|
Jan 10 2008, 01:59 AM
Post
#10
|
|
|
Member - Active Contributor Group: Members Posts: 87 Joined: 9-January 08 Member No.: 27,482 |
thanks for the tutorial. I will try to make it.
|
|
|
|
|
Similar Topics