Simple Shoutbox

friiks

Feb 26 2007, 08:24 PM

Ok, so I'm going to show you how to create a very basic shoutbox which is driven with PHP and a MySQL database.

So, lets start - open a database management program like PHPMyAdmin and run these queries.

SQL

CREATE TABLE `shoutbox` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 255 ) NOT NULL ,
`mail` VARCHAR( 255 ) NOT NULL ,
`time` VARCHAR( 255 ) NOT NULL ,
`message` TEXT NOT NULL ,
`ip` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) TYPE = MYISAM ;

CREATE TABLE `shoutbox_admin` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 255 ) NOT NULL ,
`password` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) TYPE = MYISAM ;

INSERT INTO `shoutbox_admin` (`id`,`name`,`password`) VALUES ('NULL', 'your_username', 'your_md5_hashed_password')

replace your_username with your username [for administration]
and your_md5_hashed_password with a password that has been md5 hashed. You can google for md5 hasher or just create a php file which contains this

CODE

<?php
$mypass='your_password';
$mypass=md5($mypass);
echo $mypass;
?>

Congratulations, your database is ready to be used

Next we will create a form.
Make a file called form.htm or any name you want it to be called.
Put this code in it.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Shoutbox</title>
</head>
<body>
<iframe src='shouts.php' width='150px' height='250px'></iframe>
<form method="post" action="doit.php">
<input type='text' name='name' value='Name' onfocus='this.value=""'><br>
<input type='text' name='mail' value='E-mail' onfocus='this.value=""'><br>
<textarea name='message' onfocus='this.value=""' rows='3' cols='15'>Your text</textarea><br>
<input type='submit' value='submit' name='submit'>
</form>
</body>
</html>

Here we create a form which will send data to a file that will insert the data into the database

And I'm using an iframe to view the shoutbox as I couldn't find a code to refresh only one <div>.

Ok, now for the file that will read the data sent from our form and will insert it into database.
Create a file called doit.php and put this code in it.

CODE

<?php
//including the database connection
include('config.php');
//getting everything that has been submitted
$name=mysql_real_escape_string(strip_tags($_POST['name']));
$mail=mysql_real_escape_string(strip_tags($_POST['mail']));
$message=mysql_real_escape_string(strip_tags($_POST['message']));
$submit=$_POST['submit'];
//get the current time with php date() function
//note that the server time will be recorded
//more info about all functions - http://php.net
$time=date("m/d/y");
//get the ip. Note that this wont see through proxies
$ip=$_SERVER['REMOTE_ADDR'];

//just some basic error checking which
//checks if name,e-mail and message
//hasnt been left blank or with default text
if (($name!=="") || ($name!=="Name") || ($mail!=="") || ($mail!=="E-mail") || ($message!=="") || ($message!=="Your text"))
{
//inserts data into the database
$sql = "INSERT INTO shoutbox (id, name, mail, message, time, ip) VALUES ('NULL', '$name', '$mail', '$message', '$time', '$ip')";
mysql_query($sql) or die(mysql_error());
//sends the user back to the form
header("Location:".$_SERVER['HTTP_REFERER']);
}
else{
header("Location:".$_SERVER['HTTP_REFERER']);
}
?>

Ah, config.php, forgot about it!
Create a file named like that and put this in it.

CODE

<?php

    $dbhost   = 'database host';
    $dbname   = 'database name';
    $dbusername   = 'database username';
    $dbuserpass = 'database password';

mysql_connect ($dbhost, $dbusername, $dbuserpass);
mysql_select_db($dbname) or die('Cannot select database');
?>

I guess you understand which parts you have to edit here.

Ok, now for the final part - file that will output the shouts.
Create a file named shouts.php and this is the code to put in it.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

</style>
<title>Shoutbox</title>
</head>
<body onLoad=window.setTimeout("location.href='shouts.php'",10000)>
<?php
include('config.php');
$result = mysql_query("select * from shoutbox order by id desc limit 5");

//the while loop
while($r=mysql_fetch_array($result))
{
   //getting each variable from the table
   $time=$r["time"];
   $id=$r["id"];
   $message=$r["message"];
   $name=$r["name"];
     $mail=$r['mail'];

echo "<div class='shout'>
    Shouted on: <i>".$time."</i><br>
    By <b><a href='mailto:".$mail."'>".$name."</b></a><br>
    ".$message."<br>
   </div><br>";
} ?>
</body>
</html>

The final code just gets all data from database and is outputted with a while loop. note that you can add pagination, limit...anything to this. This is a very simple shoutbox example.

If you have any questions please ask as I may have forgotten something...

I will add the administration later as my headache is killing me. Here's my files if someone wants to see.
[attachment=570:shoutbox.zip]

Edit:
Oh yea, wanted to include the preview :$
clickie^^

Edit No.2:

The Administration Panel!

CODE

<?php 
//Start the session so you would stay logged in..
//must be ABOVE ANY output
session_start(); 
//Get the cmd variable
$cmd=$_GET['cmd'];
$idg=$_GET['id'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>ACP</title>
</head>
<body>
<?php
//include config.php
include 'config.php';
//get the username from the form and add some security
//so you cant get hacked so easy 
$username = mysql_real_escape_string(strip_tags(htmlspecialchars($_POST['username'])));
$password = md5($_POST['password']);

//if login button is pressed
if ($_POST['login']){
//check if username and password are inserted
if((!$username) || (!$password)){
//if not tell them to...do insert all of info
echo "Please enter both values<br>";}
//when they have we check if the username and the password exists
$sql = mysql_query("SELECT * FROM `shoutbox_admin` WHERE `name` = '$username' AND `password`= '$password'") OR die(mysql_error());
//so we need to check it for real 
//mysql_num_rows() counts the rows which are returned as true
$login_check = mysql_num_rows($sql);
//if the check is true....true = 1 and $login check is set as $login_check=1
if($login_check > 0){
//so if it is larger than 1 we set some session variables -
//username and id
$r=mysql_fetch_array($sql);
$_SESSION['id'] = $r['id'];
$_SESSION['username'] = $r['name'];
//if it's not let's make him suffer...moahahahaa...
//reload the page I mean.. 
}else {
header("Refresh:2;admin.php");
echo 'Go and login <-<';
}
}
//so if session username isn't set show user the login form
if(!isset($_SESSION['username'])){
?>
<center>
<form action='<?=$_SERVER['PHP_SELF']?>' method='POST'>
Username: <input type='text' size='15' name='username'><br>
Password: <input type='password' size='15' name='password'><br>
<input name="login" type="submit" value="Submit">
</form></center>
<? }
//if not - show him the contents and stuff...
else{
//welcome message and logout link...
echo "<center>Welcome, ". $_SESSION['username'] ."! <a href='logout.php'>Log Out</a></center>";
echo "<br><br><center>";
//see my ?id= browsing tutorial to understand switch()
switch($cmd){
default:
//getting all of the shouts and adding `delete me` link...
$result = mysql_query("select * from shoutbox order by id desc"); 
while($r=mysql_fetch_array($result)) 
{ 
$name=$r["name"];
$message=$r["message"];
$time=$r["time"];
$id=$r["id"];
echo "Shout by: ".$name." <strong>@</strong> ".$time."<br>".$message."<br><a href='?cmd=delete&id=".$id."'>Delete me</a><br><br>";
}
break;
case 'delete':
$sql = "DELETE FROM shoutbox WHERE id=".$idg."";
$result = mysql_query($sql);
header('Refresh:2;admin.php');
echo "deleted";
}
;} 											
?>

logout.php

CODE

<?
session_start();
$_SESSION = array();
header("Location: index.php");
?>

[attachment=581:admin.php] - admin.php
[attachment=582:logout.php] - logout.php

Simple Shoutbox - PHP, MySQL driven..

Simple Shoutbox - PHP, MySQL driven..

Latest Entries