Welcome Guest ( Log In | Register )




                Web Hosting Guide

2 Pages V   1 2 >  
 Reply to this topicNew Topic
Create Your Own Shout Box, All you need is just PHP
dungsport
post May 11 2005, 09:42 AM
Post #1


Member - Active Contributor
Group Icon

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

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

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

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

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("&lt;",
       "&gt;",
       ">",
       "<",
       "\\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("&lt;",
       "&gt;",
       ">",
       "<",
       "\\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---------------------------------------------------

Step 8: End of the file
-----------------------START COPY FROM HERE------------------------------------------
CODE
</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------------------------------------------
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---------------------------------------------------



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. wink.gif -----szupie

This post has been edited by szupie: May 11 2005, 08:40 PM
Go to the top of the page
 
+Quote Post
dungsport
post May 12 2005, 02:06 AM
Post #2


Member - Active Contributor
Group Icon

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
Go to the top of the page
 
+Quote Post
jipman
post May 12 2005, 11:43 AM
Post #3


Pretty please?
Group Icon

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);
Go to the top of the page
 
+Quote Post
overture
post May 12 2005, 01:46 PM
Post #4


Premium Member
Group Icon

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. biggrin.gif
Go to the top of the page
 
+Quote Post
dungsport
post May 13 2005, 12:33 PM
Post #5


Member - Active Contributor
Group Icon

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!!!
Go to the top of the page
 
+Quote Post
overture
post May 13 2005, 01:37 PM
Post #6


Premium Member
Group Icon

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 &lt; or &gt; 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?

biggrin.gif nice little shoutbox though. wink.gif
Go to the top of the page
 
+Quote Post
dungsport
post May 14 2005, 12:30 PM
Post #7


Member - Active Contributor
Group Icon

Group: Members
Posts: 93
Joined: 21-March 05
Member No.: 3,136
Thank you for your constructive feedback overture smile.gif . 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, cool.gif
Go to the top of the page
 
+Quote Post
overture
post May 14 2005, 12:46 PM
Post #8


Premium Member
Group Icon

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!

biggrin.gif good luck on other ventures into the world PHP programming wink.gif
Go to the top of the page
 
+Quote Post
dungsport
post Jun 6 2005, 06:14 AM
Post #9


Member - Active Contributor
Group Icon

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
Go to the top of the page
 
+Quote Post
kxrain
post Jan 10 2008, 01:59 AM
Post #10


Member - Active Contributor
Group Icon

Group: Members
Posts: 87
Joined: 9-January 08
Member No.: 27,482
thanks for the tutorial. I will try to make it.
Go to the top of the page
 
+Quote Post
 

2 Pages V   1 2 >
Reply to this topicNew Topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts 5 Niru 3,728 5th November 2009 - 08:04 AM
Last post by: iG-balajee
No new   22 Feelay 2,777 3rd November 2009 - 08:13 PM
Last post by: starscream
No new 26 signatureimage 6,912 1st November 2009 - 12:13 PM
Last post by: iG-tib
No New Posts   15 whistle 4,554 31st October 2009 - 08:43 PM
Last post by: iG- ringku2k
No New Posts   14 soleimanian 4,201 28th October 2009 - 07:38 AM
Last post by: starscream
No New Posts   10 yordan 2,183 27th October 2009 - 11:31 PM
Last post by: HannahI
No New Posts   15 gamerchick39 7,915 27th October 2009 - 11:27 PM
Last post by: HannahI
No New Posts   10 mimi_m 8,773 18th October 2009 - 08:53 AM
Last post by: iG-Eru
No New Posts   17 vicky99 6,267 17th October 2009 - 11:51 AM
Last post by: surfermac
No New Posts   3 dungsport 2,543 14th October 2009 - 01:04 AM
Last post by: iG-Vadim
No new   22 J.C. 13,767 8th October 2009 - 08:16 PM
Last post by: HannahI
No new   37 darkfox 10,324 8th October 2009 - 08:02 PM
Last post by: HannahI
No New Posts   8 kc8ual 2,556 5th October 2009 - 08:56 PM
Last post by: HannahI
No New Posts   5 Spencer 785 5th October 2009 - 01:08 PM
Last post by: iGuest
No New Posts   5 soleimanian 1,199 30th September 2009 - 02:01 PM
Last post by: iGuest

© 2009  AstaHost: Free Web Hosting & Technical Discussion, Free Web Hosting. a member of xisto. Powered by Invision Board. Skin: IPB Forum Skins

Web Hosting Powered by ComputingHost.com.