(mostly) Php Chatbox

[peroim 0]

Hi everybody,

 

I made a HTML, JavaScript, PHP and MySQL chatbox

For a working example: click here

I'll put the code here (you can use it for free as long as you keep the message in the help that it is made by Marshian007) and explain it, so you can learn from it.

 

I'm only 15 years old, so please tell me when you see something wrong. I can't be perfect... Yet...

 

These are the special functions of the box:

• Customable stylesheet
• On page pop-up with the smilies (JavaScript on a DIV)
• Auto-deletion of the oldest messages (Stores 500 messages)
• Only 2 files required: chatbox.php and chatbox.css
• BB Code
• Automatic check for new messages in background (JavaScript)
• Works without JavaScript, but with less functions
• Older messages spread on a few pages
• Add-free!
• Block annoying ip's, with blocked-message
• Unable-to-connect-to-database-message

If you wish to use this chatbox, download following file: the smilies. (14.6 kB)

Unzip it in a subdirectory /smilies

 

The box uses a MySQL-database with table `chatbox`.

Fields: `id` int(11), `name` varchar(12), `time` int(11), `ip` varchar(15), `message` text.

Here's a query to insert this table:

CREATE TABLE `chatbox` (`id` int(11) NOT NULL auto_increment,
`name` varchar(12) NOT NULL default '',
`time` int(11) NOT NULL default '0',
`ip` varchar(15) NOT NULL default '',
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Your database won't be like 10 mB in 5 minutes, I've got about 300 messages in mine and it's only 40 kB.

 

This is the code for the whole chatbox:

(This is chatbox.php)

(This forum has changed some stuff about it, download it here.)

And here's the chatbox.css:

you can edit it as you want to.

LMAO, I'm typing this first in notepad, and I have already 600 lines!

 

Here's some info about the code of the chatbox:

 

[hide]

$blocked_ips are the ip's that you wish to ban from your chatbox.

$mysqlHost, User, Pass, Db are your mysql host, username, password and database you wish to connect to.

Next is the code that will compare the ip of the client with the blocked ip's, and this will exit the script and print a message.

 

The function bbcode(string message) will process the (new) message.

First a few variables for later use.

After that, all < and > will be changed to the unicode versions, so HTML, PHP ao are blocked in an easy but efficient way.

Arrays $aListB and $aListA are before and after-strings. (BBCode into HTML)

Preg_replace will change all elements it recognices from listB to the according element in array listA.

It returns the processed message, which is ready to store in the database, and showing to a client later.

 

Fist piece: if $_POST["name"] is set, store it in a cookie. (Valid for 604800 seconds = 1 week.)

Second piece: there's a function in the help to allow users to try out the bbcode, this piece is called as output.

 

We enter a switch() now with $_GET["info"].

3 possible values: "true", "help" and default.

 

Case: $_GET["info"] == "true".

This is called by the JavaScript, and will tell it wether there are new messages or not.

How do we know? An argument passed into the JavaScript is the last update. If there is a newer message, this code will echo true and the JavaScript will refresh the page. If not, this script echoes false, and the JavaScript will take the first piece of the echo: the new last update-time.

 

Very clear, this is just an HTML-page with the help on it.

It also contains the form for the test-script.

 

We are now in the default part of the switch, this contains almost everything of the box.

 

Clear as usual: this piece checks or the user entered a new message, and if so, processes it:

if $name is set, $msg is set, $msg not empty is and $msg not "Message" is, the message will be processed with bbcode() and stored in the datebase.

Next: if there are more then 500 messages, calculate how many messages there are too much. (Usually 1, but to be sure...)

Delete that amout of messages, starting with the oldest message.

 

In the default page, html, head.

 

Fist of all: $new is the variable that 'knows' or the user requested older messages, or the newest.

If the user wants the new messages: echo the script to refresh the page. (I won't explain the JavaScripts here, since this is the PHP-forum.)

Always import the other functions:

Onclick for the textboxes, popup the smilies, insert a smilie, hide the smilies.

 

In the body

 

This is the easy part: viewing the messages.

Nothing hard here, so I'll hop to the next part.

 

Fist piece: the form. Not hard or so...

Second: nothing hard (again...). This code makes sure you get the right links: you want a link newer messages when you're watching the older, but this is useless if you're watching the new messages.

 

Why did I put this here? This is without doubt the easyest part...

 

 

 

Well, I think that's all you wouldn't want to know about this chatbox.

I'm aware that nobody will ever read this, but explaining things to somebody else is a good exercise for you.

 

 

 

Maybe somebody will use the code, if so, I wish you a lot of luck.

 

 

Peroim

 

PS: Marshian007 is me, I didn't copy it from him.

PPS: I don't know how to stop it, but this forum changes some things in my code... (There's BBCode in it!!)

[Mystixs 0]

SWEET!Thanks for the tutorial. I will probably be using this in the future.The Example doesn't exactly have that great of a look but other than that its great looking.

[Imtay22 0]

this is exactly what I was looking for thans for the tut. im going to need to use it on my next site, which I am working on right now! Great Tut!~Tay

[peroim 0]

as i said, there is a bug (or more then one )

it might be fixed, but the fixed code isn't here yet..

 

Problem:

This is how the example looks for somebody:

While it should look like this:

 

I've already tried to make the stylesheet better (jup, found some small mistakes) but if you encounter a problem, please tell me!