Jump to content
xisto Community
iGuest

Php Tutorial: Making A Shoutbox Requirements: PHP, MySQL

Recommended Posts

Hi everyone, I'm going to tell you how to make a simple shoutbox using PHP and MySQL.

To start off, open up mysql in the command line, or phpmyadmin, and create a database called shoutbox.
Next, enter the following sql into the command line, or the phpmyadmin sql box, while using the shoutbox database:

create table messages(author varchar(30), message text, time timestamp, mid int auto_increment, primary key(mid));
This creates the table we need to store the messages, note the "mid" column, this gives each message a seperate id number, we'll see why that's useful later.
Next, create a new PHP page on your server, lets call it shoutbox.php. Copy this code into it:
<html><head><title>My Shoutbox</title></head><body><center><b>My Shoutbox</b></center><center><table width="80%"><!-- Shoutbox update --><!-- Shoutbox update --><!-- Shoutbox posts --><!-- Shoutbox posts --><!-- Shoutbox form --><!-- Shoutbox form --></table></center></body></html>
Ok, now we start on the actual shoutbox.
In between the "<!-- Shoutbox form -->" lines, type the following text, we're going to make the shoutbox form.
<tr><td><form name="shoutbox" action="?action=shout" method="POST"><label for="name">Name:</label><input type="text" name="name"><br><textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr>
Ok, this gives us a place to write a name, and a message. Note that in the "action" attribute of the form, I've put "?action=shout", if the page is called shoutbox.php, it will take us to shoutbox.php?action=shout. This uses a GET variable, which we will talk about below.
Now, we're going to make the section that updates the shoutbox. This is where we get into some actual PHP coding! Between the "<!-- Shoutbox update -->" lines, type the following text:
<?phpmysql_connect("hostname","username","password");mysql_select_db("shoutbox");if ($_GET["action"]=="shout"){$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());}?>
Not much, is it? But it does what we need. First, it connects to mysql. Change the text in bold to your own mysql hostname, username and password. Then, it selects the database. If your database isn't called shoutbox, change this bit.
Then, it checks to see if the GET variable action is set to "shout." Get variables are those things you sometimes see in urls, you know, when there's a ?something=something&hello=whatever after the address. These are get variables. In this example, submitting the form takes you to shoutbox.php?action=submit, so the action GET variable is set to "shout."
Next, it performs the MySQL query, which inserts the data from the form into the shoutouts table. There's also a bit of code to show us whet the problem is if it doesn't work.
Ok, now for the final bit, the posts. In between the "<!-- Shoutbox posts -->" lines, write the following text:
<?php$query = "select * from messages order my mid desc";$result = mysql_query($query);while ($array=mysql_fetch_array($result)){echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";}?>
Ok, what this does, is it starts off by getting the data from the database, and ordering it by it's unique id, descending. It then writes the information into a table cell once for every entry in the table. The date function makes a readable date out of the time from the database.
By now, the page should look like this:
<html><head><title>My Shoutbox</title></head><body><center><b>My Shoutbox</b></center><!-- Shoutbox update --><?phpmysql_connect("hostname","username","password");mysql_select_db("shoutbox");if ($_GET["action"]=="shout"){$update = "insert into messages values('".$_POST["name"]."','".$_POST["message"]."',NULL,NULL);";mysql_query($update) or die("Failed to update database. The error returned was:<br>".mysql_error());}?><!-- Shoutbox update --><center><table width="80%"><!-- Shoutbox posts --><?php$query = "select * from messages order my mid desc";$result = mysql_query($query);while ($array=mysql_fetch_array($result)){echo "<tr><td>".$array["message"]."<br><font size=\"small\">Posted on ".date("D j/n/Y g:i:s a",$array["time"])." by ".$array["name"]."</font></td></tr>";}?><!-- Shoutbox posts --><!-- Shoutbox form --><tr><td><form name="shoutbox" action="?action=shout" method="POST"><label for="name">Name:</label><input type="text" name="name"><br><textarea name="message" cols="20" rows="2"><br><input type="submit" value="Shout!"></form></td></tr><!-- Shoutbox form --></table></center></body></html>
And there you have it! Your very own shoutbox! Feel free to style is, and modify it anyway you want. You can add validation code, and functions to delete posts!
- Jay

Share this post


Link to post
Share on other sites

Thankx a lot. But i have a doubt, i have seen many free shoutbox script available on the web, but while shouting the iframe containing the shoutbox is refreshed. While on some forums like here there is no refreshing done, rather it gets shouted in a cool way and instantly. Is there any free script for such a cool shoutbox?

Share this post


Link to post
Share on other sites

It would be good if you added an alternate explanation of how you would build the database/tables(s) through the interface method of phpMyAdmin (rather than executing a direct mySQL query). Just a thought <_<.Ummm self refreshing shoutboxes, I think mine does that, or maybe it refreshes the page, I can't remember exactly but it updates pretty much on the fly.

Share this post


Link to post
Share on other sites

It would be good if you added an alternate explanation of how you would build the database/tables(s) through the interface method of phpMyAdmin (rather than executing a direct mySQL query). Just a thought :P .
Ummm self refreshing shoutboxes, I think mine does that, or maybe it refreshes the page, I can't remember exactly but it updates pretty much on the fly.

Yeah, those are very good points. Maybe even just setting up the tables in a text file <_<. As for a self-refreshing shoutbox, you can include a meta-refresh or an AJAX script that looks for changes in the database when it's submitted and then it refreshes... sorta like the Digg Spy utility.

[N]F

Share this post


Link to post
Share on other sites

Yeah, I use JavaScript for mine, I'll dig it out of the code for you
Ok, place this anywhere on the page.

<script language="JavaScript">var refreshinterval=120 var displaycountdown="yes"var starttimevar nowtimevar reloadseconds=0var secondssinceloaded=0 function starttime(){starttime=new Date()starttime=starttime.getTime()countdown() }function countdown(){nowtime= new Date()nowtime=nowtime.getTime()secondssinceloaded=(nowtime-starttime)/1000 reloadseconds=Math.round(refreshinterval-secondssinceloaded)if (refreshinterval>=secondssinceloaded) {var timer=setTimeout("countdown()",1000)if (displaycountdown=="yes") {window.status="Page refreshing in "+reloadseconds+ " seconds" }}else{clearTimeout(timer)window.location.reload(true)}}window.onload=starttime </script>
Change refreshinterval to however many seconds you want it to wait before it reloads, also, it tells you how many seconds left until it reloads in the status bar, so it doesnt catch you by surprise and make you write the message all over again.
Also, I'll have a fiddle with PHPMyAdmin tonight, and write up something on how to create the tables in it, but for the meantime, you can just go to the "SQL" tab in phpmyadmin (It's there in every version I've used) and copy and paste the SQL code.
Edited by Habble (see edit history)

Share this post


Link to post
Share on other sites

Thankx for the "self-refreshing" one. But can anyone provide me the script for a shoutbox like the one here. When we make a shout, it gets shouted like an im and the page(or iframe) don't need to get refreshed. The shoutbox in Xisto is very cool. I want the script for a shoutbox for my site, which i expect, that will soon be hosted here <_<.

Share this post


Link to post
Share on other sites

Self refreshing is the really the only way to go I think?It usually works out well because the content of the page will be cached anyway, so it's quick, I'm not sure exactly how I do it but it seems to be an immediate on screen update (I'll have to check when I have time), but if things like queries on pages are a problem, try using a form of caching pages to help that across the board if it's feasible.

Share this post


Link to post
Share on other sites

This one here I think is fully made with AJAX technology, I mean the shoutbox on Xisto forums.. and it is really a bit more advanced than this simple shoutbox.. I never really liked iframes or any frames, it is really better to use something else these days, especially than using AJAX you can do really a lot of good stuff, a lot can be done using a browser these days :P it doesn't show only html anymore like it did in the old days <_<

Share this post


Link to post
Share on other sites

Shoutboxes are like chat-rooms. you can put it on a website, and people can chat with them. Like the one at the top of the forum.

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

×
×
  • 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.