How To Make A Simple File Based Shoutbox Using Php And Html

shadowx · February 24, 2007

A simple tut to make a simple shoutbox.

Let me jump right in. First of all you need the standard equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7.

Were going to make a simple guestbook using three files, webpage.php, shout.php and shout.txt.

Webpage.php can be changed to whatver you want, it will be the page on which the guestbok is shown, you could even use this code and add it to another php page n your site. Shout.php is the proccessing page and shout.txt is where the shouts are stored.

Firstly we need to make the visual design of the box. Mine is very simple, like the one here at T17 just a big box for the text and two more boxes for your name and message. I wont go into the HTML code for this form as im concentrating on the PHP so here is the HTML code for the form:

<?echo<HTML><center><BR><BR><BR><form action=shout.php method=post><textarea name=shouts rows=7 cols=65></textarea><BR><input type=text name=name value=name> -- <input type=text name=shout value=Message><BR><input type=submit value=submit></form>;?>

We will go back to this code later but for now just use ECHO or PRINT to show this text to the user in the first PHP file, the one you want the shoutbox to appear on. Now were going to look at the shout.php processing page.

The first thing to do is to get the variables from the form, as we used the POST method we will need to use this array when getting the values in php.

As you might know to get a value from the POST variable into another variable the code looks like this:

$shoutname = strip_tags($_POST['name']);$shouttxt = strip_tags($_POST['shout']);

So now whatever the user put into the boxes is now contained in the two variables called SHOUTNAME and SHOUTTXT to use later on. Note i used STRIP_TAGS to make the data more safe. As were storing the data as a text file any code wont get run anyway but this is just a precaution, i had someone try to inject code into my shoutbox and it didn't work even without the strip_tags so its fairly safe anyway.

Now we have the data we need to play with it meaning we need to store it somewhere, we could use a database but why bother? I think that's only useful in you need to hide the contents of the shoutbox or if you plan on getting thousands of shouts because the file would get very large with thousands of messages in it. I didnt plan n getting this many shouts so a file based one was fine for me and that is the route this tutorial will follow!

To write to a file we need three functions, FOPEN, FWRITE and FCLOSE, fairly easy to understand, they open, write to, and close files respectively. But before we write everything to a file we need to reverse the text, this is so that the latest shouts end up at the top of the shoutbox, otherwise it would be very annoying to scroll down to see the last shout. And before we reverse the string we first need to make it. We want the messages to look like this:

--------------------------------Name: my name
Message: my message
--------------------------------

to arrange this using PHP we can do something like this:

$shoutn = "$shoutname : \n $shouttxt \n --------------------------------------------------------------- \n";

So now we have arranged the text we need to reverse it using STRREV:

$shout = strrev($shoutn);

Now you might have realised by now that all the text is also back to front and unreadable, but thats not a problem as we will be reversing it again shortly which is when it will become readable again.

Now we can get back to the file functions of opening, writing and closing. First we use FOPEN to open the file, FOPEN returns what is called a handle which is sort of a reference to the file and to use this handle we need to assign it to a variable:

$handle = fopen(shout.txt, "ab");

This code opens the fileshout.txt in APPEND mode which means we can write to the file and it will be written at the end of the file.

Now we need to write to the file using FWRITE, this is where we use the $handle variable to reference the file we want to write to, in this case shout.txt:

fwrite( $handle, $shout );

See how the handle comes first to let PHP know where we want to write and then the variable $shout, which we said earlier is the reversed version of the user's input, which is what must be written. So now the data is saved in the file and we have to close the file or we wont be able to open it again the next time they leave a message. We use FCLOSE for this, and again we use the $handle variable to let it know what to close:

fclose($handle);

Now that is pretty much the end of the PHP file except the user can only see a blank screen by now so we need to redirect them, After friiks replied with some useful code i have edited this line and came up with this:

header("Location: ".$_SERVER['HTTP_REFERER']);?>

The header function in php can be used so long as it is the first line of outputted text, this means that if there is an ECHO or PRINT command above it anywhere it will not work but in this script we dont have any ECHOs or PRINTs so we can use a header as friiks said. The "location: ".$_SERVER['HTTP_referer'] simply means "go back to the last page" and so we are taken back to whichever page we entered out shout.

Now for the final additions to the first page we wrote because otherwise we will never see the shouts made already.

Again we will be using FOPEN and FCLOSE but this time we will also be using FREAD to read the file and get its contents. So open the first file which i called webpage.php it should already have the starting tag for php <? On the line under this tag, above the ECHO and html parts we need to use FOPEN, FREAD and FCLOSE. First of course FOPEN in the same way as before:

$handle = fopen(shout.txt, "rb");

Now we need to use FREAD, its another simple tag that uses the $handle variable again but it also needs another variable which is the size of the file, this is so it knows how much data it needs to read, of course WE dont know the size but PHP does and by using the function FILESIZE we can find out the size of our file and give that value to FREAD:

$contents = fread($handle, filesize(shout.txt));

Not how we used another variable, $contents, this variable now contains all the data from our shout.txt file which is of course, all the shouts made by our users. Now we need to close the file, easy enough:

fclose($handle);

if you remember back a bit we reversed the contents of that file so now in the $contents variable we have a load of back to front text that is useless, unless of course we reverse it again, which is what we are going to do:

$text = strrev($contents);

so now the text should be the right way round and with the last shout at the top. Hopefully!

So now we just need to get this text into the textbox we made on the first page. As its a TEXTAREA this is really easy!!! WE just need to put $text inside the textarea, so edit the textarea code so it looks like this:

<textarea name=shouts rows=7 cols=65>$text</textarea>

And bingo!! We are done! An important note is that PHP does not like empty files so the file shout.txt will always need something in it, a normal SPACE is enough, or even just a newline. Also you might need to refresh the first page to see your shout in the shoutbox, i suspect this can be solved with JavaScript but im not very good with JS so if you are then reply and let us all know how to solve that problem!

Otherwise, enjoy this tut. Ive attached my versions of what i wrote just so you can check if you went wrong! You might have trouble if you just copy and paste my code as i wrote it in open office and i had a problem with the quote marks myself so if it doesnt work try copying by hand and if it still doesn't work then drop me a line

NOTE my version of "webpage.php" is "index.php" in the attachments and i didn't attach the shout.txt file as its simply a text file with one space in it.

EDIT** minor edit to solve a problem in IE, added an extra "\n" to the string which is saved to the file. Also edited thanks to Friiks as below

index.php

shout.php

Edited February 24, 2007 by shadowx (see edit history)

friiks · February 24, 2007

Hm..
Wouldn't it be more effective to use a header() instead of

echo "<HTML><BODY OnMouseOver=\"java script:history.go(-1)\"></HTML> ";

Well that's what I would certainly do...

shadowx · February 24, 2007

It definitely would! the reason i didn't do it is because in php the header function must be the first line of outputted text so i tend never to use header unless i have to but after testing it myself it works perfectly so i shall edit the above post.kudos to you!

friiks · February 24, 2007

Well..header has to be set before any output but that file doesn't output anything..so you do that

shadowx · February 24, 2007

The post and files have been edited Im currently adapting this script to work with a database that will automatically cut out a certain number of post to keep only the most recent so i will also add the header code to that one, and if i complete it i might post a tutorial for that too. Thanks for letting me know about that! I just realised im spending a saturday evening writing website code...whats wrong with me?!

friiks · February 24, 2007

Don't know..Im spening my saturday evening here and waiting when my girlfriend will get out of the shower...she's sloooow...

Anyways, this is off topic so I'm try to write a tutorial or two tomorrow evening. Converting this to database driven wouldn't be hard at all.. well at least for me as I never use flatfile databases. They are unsafe =/

Edit:

Ok wait, I reread your code aand.. You're putting the shouts in a textbox?

I mean everyone can edit them as they want..

I'll make a shoutbox tutorial how would I do it tomorrow

Edited February 24, 2007 by friiks (see edit history)

shadowx · February 24, 2007

The textarea thing was something else that was, ill admit, very low on my list of things to do, ive concentrated a lot on php and less on HTML for a while so i wouldn't think of any other object except a frame which could have a scrollbar. And i figured they could change the textarea content and that way change the shouts but those changes wouldn't be saved as the only data taken to the form is that from the two input boxes for name and their shout, the textarea is only a container.

Im working on the conversion now but its 11pm so i gave up now! I have a very odd thing going on, i have a database which stores the shouts and im using numbers for the moment as the name and shout so i can track them easily in the database and its fine for numbers between 1 and 3, eg:

name		  shout1				12				23				3

but at number four i get this in the database:

name		  shout1				12				24				43				3

So that will need a closer look

either way its about time i got some sleep for an early start tomorrow! Im interesting in seeing your version of the shoutbox though, i think the best way to develop yourself as a coder is to see how other people would solve the same problem

Without direct copying though! that's just cheating! And by the way, welcome to Xisto!

friiks · February 24, 2007

Thanks, and yeah, I completely agree with you.And sorry bout the textarea, I just didn't notice you don't submit it xP*blames its 00:35*Well,I'm off to bed anyways...have to get it warm for her xD

jlhaslip · February 26, 2007

For a sample of a shoutbox using a mysql database, check this link.

Sign In

How To Make A Simple File Based Shoutbox Using Php And Html

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information