Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> (mostly) Php Chatbox
peroim
post Jan 26 2007, 09:06 PM
Post #1


Newbie [Level 2]
**

Group: Members
Posts: 33
Joined: 9-July 06
From: Belgium
Member No.: 26,367
Hi everybody,

I made a HTML, JavaScript, PHP and MySQL chatbox wink.gif
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. smile.gif I can't be perfect... Yet... wink.gif

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:
SQL
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.)
CODE

<?php
$blocked_ips = "70.174.135.232"; //Separaded by ";"
$mysqlHost = "localhost";
$mysqlUser = "user";
$mysqlPass = "pass";
$mysqlDb = "database";

if(stristr($blocked_ips, $_SERVER["REMOTE_ADDR"])){
echo "You were blocked by the admins. You cannot longer view this page.";
exit;
}
function bbcode($message){
//THIS PIECE OF CODE CANNOT BE SHOWED ON THIS FORUM, PLEASE DOWNLOAD THE FULL CODE BY CLICKING THE LINK ABOVE THIS BOX
$message = preg_replace($aListB, $aListA, $message);
return $message;
}
$name = $_POST["name"];
if(isset($name)){
$name = preg_replace(array("@<@","@>@"), array("<",">"), $name);
setcookie("name", $name, time()+604800);
}

if($_POST["test"] == "true"){
?>
<html>
<head>
<title>Test BBCode</title>
<link href="chatbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="c1"><?php
echo bbcode($_POST["msg"]);
?></div>
</body>
</html>
<?php
exit;
}


switch($_GET["info"]){
case "true":
if($_GET["info"] == "true"){
$lu = $_GET["lu"];
$thedra_db = mysql_connect(mysqlHost, mysqlUser, mysqlPass);
mysql_select_db(mysqlDb, $thedra_db);

$qry = mysql_query("SELECT * FROM `chatbox` WHERE `time`>".$lu." ORDER BY `time` DESC, `id` DESC LIMIT 0,20");
echo time()."-";
if(mysql_num_rows($qry)){
echo "true";
}
else{
echo "false";
}
}
break;
case "help":
?>
<html>
<head>
<title>Chatbox help</title>
<link href="chatbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
<a href="#qs">Quick start</a><br />
<a href="#bbcode">BBCode</a><br />
<a href="#bbtest">Test BBCode</a><br />
<a href="#privacy">Privacy</a><br />
<a href="#about">About</a><br />
</p>
<p>
<h1><a name="qs">Quick start</a></h1>
Click in the first textbox ("Nickname") and type in a name. Then click in the second textbox ("Message") and enter your message. Press OK to post your message.
</p>
<p>
<h1><a name="bbcode">BBCode</a></h1>
This chatbox can process some BBCode. The following tags are supported:
<ul>
<li />B <b>(Bold text)</b>
<li />I <i>(Italic text)</i>
<li />U <u>(Underlined text)</u>
<li />S <s>(Text with a line trough it)</s>
<li />BR (New line)
<li />SCROLL (Scrolling text, marquee)
<li />URL (Hyperlink)
<li />COLOR (Change text color)
</ul>
<h2>Use:</h2>
<!-- ANOTHER BLACK HOLE IN THE CODE, DOWNLOAD THE FULL VERSION!! //-->
</p>
<p>
<h1><a name="bbtest">Test BBCode</a></h1>
Enter a message to test.
<form action="chatbox.php" method="post" target="_new">
<input type="hidden" id="test" name="test" value="true" />
<input type="text" id="msg" name="msg" /><input type="submit" value="OK">
</form>
</p>
<p>
<h1><a name="privacy">Privacy</a></h1>
Your IP-adress is logged with your message(s), and availeble to the administrator(s) of this chatbox.<br />
Your nickname is stored in a cookie, so you don't have to type it always again.
</p>
<p>
<h1><a name="about">About</a></h1>
This chatbox was created by Marshian007, and is completely free to use. No adds will come, since you have to host this file yourself.
</p>
</body>
</html>
<?php
break;
default:
$msg = $_POST["msg"];
$new = $_GET["new"];

if(isset($name) && isset($msg) && ($msg != "") && ($msg != "Message")){
$thedra_db = mysql_connect(mysqlHost, mysqlUser, mysqlPass);
mysql_select_db(mysqlDb, $thedra_db);

$name = preg_replace(array("@<@","@>@"), array("<",">"), $name);
$time = time();
$ip = $_SERVER["REMOTE_ADDR"];
$message = bbcode($msg);
mysql_query("INSERT INTO `chatbox` (`id`, `name`, `time`, `ip`, `message`) VALUES ('', '".$name."', '".$time."', '".$ip."', '".$message."') ");
$num_posts = mysql_num_rows(mysql_query("SELECT * FROM `chatbox`"));
if($num_posts > 500){
$nr_to_del = $num_posts - 500;
mysql_query("DELETE FROM `chatbox` ORDER BY `time` ASC LIMIT ".$nr_to_del);
}
}
?>
<html>
<head>
<title>The Slayers of Chaos - Chatbox</title>
<link href="chatbox.css" rel="stylesheet" type="text/css" />
<?php
if(!isset($new)){
?>
<script language="JavaScript">
var req;
var last_update = <?php
echo time();
?>;

function getXML() {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
req.onreadystatechange = update;
req.open("GET", "chatbox.php?info=true&lu="+last_update, true);
req.send("");
}

function update(){
if(req.readyState == 4){
if(req.status == 200){
var response = req.responseText;
response = response.split("-");
last_update = eval(response[0]);
if(eval(response[1])){
document.location = "chatbox.php";
}
else{
setTimeout(getXML, 10000);
}
}
else {
getXML();
}
}
}
</script>
<?php
}
?>
<script language="javascript">
function empty(object){
if((object.value == "Nickname") || (object.value == "Message")){
object.value = "";
}
}
function popsmil(){
smilies().style.visibility = "visible";
smilies().style.top = (400 - smilies().style.height)/2;
smilies().style.left = (700 - smilies().style.width)/2;
document.getElementById("boxcontain").onclick = hidesmil;
}
function smilies(){
if(document.getElementById())
return document.getElementById("smilies");
if(document.all)
return document.all.smilies;
if(document.layers)
return document.layers.smilies;
if(window.opera)
return window.opera.smilies;
}
function inssmil(sstring){
if(document.forms["msg"].msg.value == "Message"){
document.forms["msg"].msg.value = sstring + " ";
return;
}
document.forms["msg"].msg.value = document.forms["msg"].msg.value + " " + sstring + " ";
}
function hidesmil(){
smilies().style.visibility = "hidden";
document.getElementById("boxcontain").onclick = "";
document.forms["msg"].msg.focus();
}

getXML();
</script>
</head>
<body>
<div name="boxcontain" id="boxcontain">
<div id="chat">
<?php
if(@$thedra_db = mysql_connect("mysql2.freehostia.com", "thedra_db", "pass")){;
mysql_select_db("thedra_db", $thedra_db);

switch($new){
case "old1":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 20,120";
break;
case "old2":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 120,220";
break;
case "old3":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 220,320";
break;
default:
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 0,20";
}
$qry = mysql_query($qry_str);
$i = 0;
while($qry_res = mysql_fetch_array($qry)){
$i++;
echo "<div class=c".is_int($i/2)."><div class=cname>".$qry_res["name"].":</div><div class=cdate>".gmdate("j M y, H:i", $qry_res["time"])." (GMT)</div><div class=cmsg>".$qry_res["message"]."</div></div>\n";
}
}
else{
echo "Connecting to database... Failed<br />";
echo "Unable to connect to database, please try again in 15 minutes.";
}
?>
</div>
<form name="msg" action="http://www.slayersofchaos.uni.cc/chatbox.php" method="post" class="msgform">
<input type="text" name="name" maxlength="12" value="<?php
if(isset($name)){
echo $name;
}
else {
if(isset($_COOKIE["name"])){
echo $_COOKIE["name"];
}
else {
echo "Nickname";
}
}
?>" onfocus="java script:empty(this)" id="name" /><input type="submit" id="submit" value="OK" /><br />
<input type="text" id="msg" name="msg" value="Message" onfocus="java script:empty(this)" /><br />
</form>
<?php
switch($new){
case "old1":
echo "<div class=\"40right\"><a href=\"chatbox.php\">Newer messages</a> <a href=\"chatbox.php?new=old2\">Older messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
case "old2":
echo "<div class=\"40right\"><a href=\"chatbox.php?new=old1\">Newer messages</a> <a href=\"chatbox.php?new=old3\">Older messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
case "old3":
echo "<div class=\"40right\"><a href=\"chatbox.php?new=old2\">Newer messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
default:
echo "<div class=\"40left\"><a href=\"java script:getXML()\">Check</a><br />\n<a href=\"chatbox.php\">Force reload</a> (not recommended)</div><div class=\"40right\"><a href=\"chatbox.php?new=old1\">Older messages</a><br /><a href=\"java script:popsmil()\">Smilies</a> ~ <a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>\n";
}
?>

<div id="smilies">
<img src="smilies/mellow.gif" class="smil" onclick="java script:inssmil(':mellow:')" alt=":mellow:" />
<img src="smilies/huh.gif" class="smil" onclick="java script:inssmil(':huh')" alt=":huh:" />
<img src="smilies/happy.gif" class="smil" onclick="java script:inssmil('^_^')" alt="^_^" />
<img src="smilies/ohmy.gif" class="smil" onclick="java script:inssmil(':o')" alt=":o" /><br />
<img src="smilies/wink.gif" class="smil" onclick="java script:inssmil(';)')" alt=";)" />
<img src="smilies/tongue.gif" class="smil" onclick="java script:inssmil(':P')" alt=":P" />
<img src="smilies/biggrin.gif" class="smil" onclick="java script:inssmil(':D')" alt=":D" />
<img src="smilies/laugh.gif" class="smil" onclick="java script:inssmil(':lol:')" alt=":lol:" /><br />
<img src="smilies/cool.gif" class="smil" onclick="java script:inssmil('B)')" alt="B)" />
<img src="smilies/rolleyes.gif" class="smil" onclick="java script:inssmil(':rolleyes:')" alt=":rolleyes:" />
<img src="smilies/sleep.gif" class="smil" onclick="java script:inssmil('-_-')" alt="-_-" />
<img src="smilies/dry.gif" class="smil" onclick="java script:inssmil('<_<')" alt="<_<" /><br />
<img src="smilies/smile.gif" class="smil" onclick="java script:inssmil(':)')" alt=":)" />
<img src="smilies/angry.gif" class="smil" onclick="java script:inssmil(':angry:')" alt=":angry:" />
<img src="smilies/sad.gif" class="smil" onclick="java script:inssmil(':(')" alt=":(" />
<img src="smilies/unsure.gif" class="smil" onclick="java script:inssmil(':unsure:')" alt=":unsure:" /><br />
<img src="smilies/wacko.gif" class="smil" onclick="java script:inssmil(':wacko:')" alt=":wacko:" />
<img src="smilies/blink.gif" class="smil" onclick="java script:inssmil(':blink:')" alt=":blink:" />
<img src="smilies/ninja.gif" class="smil" onclick="java script:inssmil(':ninja:')" alt=":ninja:" />
</div>
</div>
</body>
</html>
<?php
}
?>


And here's the chatbox.css:
you can edit it as you want to.
CODE

BODY{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
color: #C70000;
background-color:#000000;
margin: 5px;
scrollbar-base-color: #330000;
scrollbar-face-color: #B80300;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-Shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
}
INPUT {
font-size: 11px;
color:#C70000;
font-family: verdana, helvetica, sans-serif;
vertical-align: middle;
background-color: #000000;
border: 1px solid #C70000;
}
H1 {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 20px;
color: #C70000;
text-align: center;
width: 100%;
background-color: #330000;
font-weight: normal;
}
H2 {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 16px;
color: #C70000;
font-weight: bold;
font-style: italic;
}
UL {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20 px;
padding: 1px;
list-style-type: circle;
}
CODE {
width: 100%;
font-family: courier, system, arial;
font-size: 15 px;
font-weight: normal;
font-style: normal;
color: silver;
margin: 3 px;
margin-left: 20px;
}
a:link, a:visited, a:active , a:visited:active{
text-decoration: underline;
color: #C70000;
}
a:hover {
color: #FF0000;
text-decoration:underline;
}

#chat {
width: 700px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
padding: 0px;
border: 1px solid #C70000;
background-color: white;
margin: 0 px;
}
#msg {
width: 700px;
float: left;
}
#name{
width: 200px;
float: left;
}
#submit{
width: 50px;
float: right;
}
#boxcontain {
width: 700 px;
}
#smilies {
border: 1px solid #C70000;
position: absolute;
left: 0px;
top: 0px;
background-color: #000000;
padding: 5px;
letter-spacing: 3px;
visibility: hidden;
}
.c {
background-color: #000000;
padding: 1px;
width: 681 px;
height: auto;
margin: 0 px;
padding-left: 5 px;
padding-right: 5 px;
}
.c1 {
background-color: #330000;
padding: 1px;
width: 681 px;
height: auto;
margin: 0 px;
padding-left: 5 px;
padding-right: 5 px;
}
.cname {
float: left;
width: 100 px;
font-style: italic;
color: #3D2E8E;
}
.cdate {
float: right;
width: 140 px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 9px;
color: #606060;
}
.cmsg {
width: 630px;
overflow-x: hidden;
float: right;
}
.40left {
width: 40%;
float: left;
}
.40right {
width: 40%;
float: right;
text-align: right;
}
.msgform {
line-height: 20 px;
}
.smil {
width: 20px;
height: 20px;
}


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

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


CODE

$blocked_ips = "70.174.135.232"; //Separaded by ";"
$mysqlHost = "localhost";
$mysqlUser = "user";
$mysqlPass = "pass";
$mysqlDb = "database";

if(stristr($blocked_ips, $_SERVER["REMOTE_ADDR"])){
echo "You were blocked by the admins. You cannot longer view this page.";
exit;
}

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

CODE

function bbcode($message){
$img_s = "<img src=\"smilies/";
$img_e = ".gif\" class=\"smil\" alt=\"\$0\">";
$message = preg_replace(array("@<@","@>@"), array("<",">"), $message);
//THIS PIECE OF CODE CANNOT BE SHOWED ON THIS FORUM, PLEASE DOWNLOAD THE FULL CODE BY CLICKING THE LINK ABOVE THIS BOX
return $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.

CODE

$name = $_POST["name"];
if(isset($name)){
$name = preg_replace(array("@<@","@>@"), array("<",">"), $name);
setcookie("name", $name, time()+604800);
}

if($_POST["test"] == "true"){
?>
<html>
<head>
<title>Test BBCode</title>
<link href="chatbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="c1"><?php
echo bbcode($_POST["msg"]);
?></div>
</body>
</html>
<?php
exit;
}

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.

CODE

case "true":
if($_GET["info"] == "true"){
$lu = $_GET["lu"];
$thedra_db = mysql_connect(mysqlHost, mysqlUser, mysqlPass);
mysql_select_db(mysqlDb, $thedra_db);

$qry = mysql_query("SELECT * FROM `chatbox` WHERE `time`>".$lu." ORDER BY `time` DESC, `id` DESC LIMIT 0,20");
echo time()."-";
if(mysql_num_rows($qry)){
echo "true";
}
else{
echo "false";
}
}
break;

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.

CODE

case "help":
?>
<html>
<head>
<title>Chatbox help</title>
<link href="chatbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
<a href="#qs">Quick start</a><br />
<a href="#bbcode">BBCode</a><br />
<a href="#bbtest">Test BBCode</a><br />
<a href="#privacy">Privacy</a><br />
<a href="#about">About</a><br />
</p>
<p>
<h1><a name="qs">Quick start</a></h1>
Click in the first textbox ("Nickname") and type in a name. Then click in the second textbox ("Message") and enter your message. Press OK to post your message.
</p>
<p>
<h1><a name="bbcode">BBCode</a></h1>
This chatbox can process some BBCode. The following tags are supported:
<ul>
<li />B <b>(Bold text)</b>
<li />I <i>(Italic text)</i>
<li />U <u>(Underlined text)</u>
<li />S <s>(Text with a line trough it)</s>
<li />BR (New line)
<li />SCROLL (Scrolling text, marquee)
<li />URL (Hyperlink)
<li />COLOR (Change text color)
</ul>
<h2>Use:</h2>
<!-- ANOTHER BLACK HOLE IN THE CODE, DOWNLOAD THE FULL VERSION!! //-->
</p>
<p>
<h1><a name="bbtest">Test BBCode</a></h1>
Enter a message to test.
<form action="chatbox.php" method="post" target="_new">
<input type="hidden" id="test" name="test" value="true" />
<input type="text" id="msg" name="msg" /><input type="submit" value="OK">
</form>
</p>
<p>
<h1><a name="privacy">Privacy</a></h1>
Your IP-adress is logged with your message(s), and availeble to the administrator(s) of this chatbox.<br />
Your nickname is stored in a cookie, so you don't have to type it always again.
</p>
<p>
<h1><a name="about">About</a></h1>
This chatbox was created by Marshian007, and is completely free to use. No adds will come, since you have to host this file yourself.
</p>
</body>
</html>
<?php
break;

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.

CODE

$msg = $_POST["msg"];
$new = $_GET["new"];

if(isset($name) && isset($msg) && ($msg != "") && ($msg != "Message")){
$thedra_db = mysql_connect(mysqlHost, mysqlUser, mysqlPass);
mysql_select_db(mysqlDb, $thedra_db);

$name = preg_replace(array("@<@","@>@"), array("<",">"), $name);
$time = time();
$ip = $_SERVER["REMOTE_ADDR"];
$message = bbcode($msg);
mysql_query("INSERT INTO `chatbox` (`id`, `name`, `time`, `ip`, `message`) VALUES ('', '".$name."', '".$time."', '".$ip."', '".$message."') ");
$num_posts = mysql_num_rows(mysql_query("SELECT * FROM `chatbox`"));
if($num_posts > 500){
$nr_to_del = $num_posts - 500;
mysql_query("DELETE FROM `chatbox` ORDER BY `time` ASC LIMIT ".$nr_to_del);
}
}

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.

CODE

<?php
if(!isset($new)){
?>
<script language="JavaScript">
var req;
var last_update = <?php
echo time();
?>;

function getXML() {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
req.onreadystatechange = update;
req.open("GET", "chatbox.php?info=true&lu="+last_update, true);
req.send("");
}

function update(){
if(req.readyState == 4){
if(req.status == 200){
var response = req.responseText;
response = response.split("-");
last_update = eval(response[0]);
if(eval(response[1])){
document.location = "chatbox.php";
}
else{
setTimeout(getXML, 10000);
}
}
else {
getXML();
}
}
}
</script>
<?php
}
?>
<script language="javascript">
function empty(object){
if((object.value == "Nickname") || (object.value == "Message")){
object.value = "";
}
}
function popsmil(){
smilies().style.visibility = "visible";
smilies().style.top = (400 - smilies().style.height)/2;
smilies().style.left = (700 - smilies().style.width)/2;
document.getElementById("boxcontain").onclick = hidesmil;
}
function smilies(){
if(document.getElementById())
return document.getElementById("smilies");
if(document.all)
return document.all.smilies;
if(document.layers)
return document.layers.smilies;
if(window.opera)
return window.opera.smilies;
}
function inssmil(sstring){
if(document.forms["msg"].msg.value == "Message"){
document.forms["msg"].msg.value = sstring + " ";
return;
}
document.forms["msg"].msg.value = document.forms["msg"].msg.value + " " + sstring + " ";
}
function hidesmil(){
smilies().style.visibility = "hidden";
document.getElementById("boxcontain").onclick = "";
document.forms["msg"].msg.focus();
}

getXML();
</script>

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

CODE

<?php
if(@$thedra_db = mysql_connect("mysql2.freehostia.com", "thedra_db", "pass")){;
mysql_select_db("thedra_db", $thedra_db);

switch($new){
case "old1":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 20,120";
break;
case "old2":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 120,220";
break;
case "old3":
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 220,320";
break;
default:
$qry_str = "SELECT `name`, `message`, `time` FROM `chatbox` ORDER BY `time` DESC, `id` DESC LIMIT 0,20";
}
$qry = mysql_query($qry_str);
$i = 0;
while($qry_res = mysql_fetch_array($qry)){
$i++;
echo "<div class=c".is_int($i/2)."><div class=cname>".$qry_res["name"].":</div><div class=cdate>".gmdate("j M y, H:i", $qry_res["time"])." (GMT)</div><div class=cmsg>".$qry_res["message"]."</div></div>\n";
}
}
else{
echo "Connecting to database... Failed<br />";
echo "Unable to connect to database, please try again in 15 minutes.";
}
?>

This is the easy part: viewing the messages. smile.gif
Nothing hard here, so I'll hop to the next part.

CODE

<form name="msg" action="http://www.slayersofchaos.uni.cc/chatbox.php" method="post" class="msgform">
<input type="text" name="name" maxlength="12" value="<?php
if(isset($name)){
echo $name;
}
else {
if(isset($_COOKIE["name"])){
echo $_COOKIE["name"];
}
else {
echo "Nickname";
}
}
?>" onfocus="java script:empty(this)" id="name" /><input type="submit" id="submit" value="OK" /><br />
<input type="text" id="msg" name="msg" value="Message" onfocus="java script:empty(this)" /><br />
</form>
<?php
switch($new){
case "old1":
echo "<div class=\"40right\"><a href=\"chatbox.php\">Newer messages</a> <a href=\"chatbox.php?new=old2\">Older messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
case "old2":
echo "<div class=\"40right\"><a href=\"chatbox.php?new=old1\">Newer messages</a> <a href=\"chatbox.php?new=old3\">Older messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
case "old3":
echo "<div class=\"40right\"><a href=\"chatbox.php?new=old2\">Newer messages</a><br /><a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>";
break;
default:
echo "<div class=\"40left\"><a href=\"java script:getXML()\">Check</a><br />\n<a href=\"chatbox.php\">Force reload</a> (not recommended)</div><div class=\"40right\"><a href=\"chatbox.php?new=old1\">Older messages</a><br /><a href=\"java script:popsmil()\">Smilies</a> ~ <a href=\"chatbox.php?info=help\" target=\"_new\">Help</a></div>\n";
}
?>

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.

CODE

<div id="smilies">
<img src="smilies/mellow.gif" class="smil" onclick="java script:inssmil(':mellow:')" alt=":mellow:" />
<img src="smilies/huh.gif" class="smil" onclick="java script:inssmil(':huh')" alt=":huh:" />
<img src="smilies/happy.gif" class="smil" onclick="java script:inssmil('^_^')" alt="^_^" />
<img src="smilies/ohmy.gif" class="smil" onclick="java script:inssmil(':o')" alt=":o" /><br />
<img src="smilies/wink.gif" class="smil" onclick="java script:inssmil(';)')" alt=";)" />
<img src="smilies/tongue.gif" class="smil" onclick="java script:inssmil(':P')" alt=":P" />
<img src="smilies/biggrin.gif" class="smil" onclick="java script:inssmil(':D')" alt=":D" />
<img src="smilies/laugh.gif" class="smil" onclick="java script:inssmil(':lol:')" alt=":lol:" /><br />
<img src="smilies/cool.gif" class="smil" onclick="java script:inssmil('B)')" alt="B)" />
<img src="smilies/rolleyes.gif" class="smil" onclick="java script:inssmil(':rolleyes:')" alt=":rolleyes:" />
<img src="smilies/sleep.gif" class="smil" onclick="java script:inssmil('-_-')" alt="-_-" />
<img src="smilies/dry.gif" class="smil" onclick="java script:inssmil('<_<')" alt="<_<" /><br />
<img src="smilies/smile.gif" class="smil" onclick="java script:inssmil(':)')" alt=":)" />
<img src="smilies/angry.gif" class="smil" onclick="java script:inssmil(':angry:')" alt=":angry:" />
<img src="smilies/sad.gif" class="smil" onclick="java script:inssmil(':(')" alt=":(" />
<img src="smilies/unsure.gif" class="smil" onclick="java script:inssmil(':unsure:')" alt=":unsure:" /><br />
<img src="smilies/wacko.gif" class="smil" onclick="java script:inssmil(':wacko:')" alt=":wacko:" />
<img src="smilies/blink.gif" class="smil" onclick="java script:inssmil(':blink:')" alt=":blink:" />
<img src="smilies/ninja.gif" class="smil" onclick="java script:inssmil(':ninja:')" alt=":ninja:" />
</div>

Why did I put this here? tongue.gif 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. wink.gif



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. tongue.gif
PPS: I don't know how to stop it, but this forum changes some things in my code... (There's BBCode in it!!)

(list)

Go to the top of the page
 
+Quote Post
Mystixs
post Jan 27 2007, 12:08 AM
Post #2


Member [Level 1]
****

Group: Members
Posts: 57
Joined: 23-January 07
Member No.: 37,683
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.

(list)

Go to the top of the page
 
+Quote Post
Imtay22
post Jan 27 2007, 10:14 PM
Post #3


Super Member
*********

Group: [HOSTED]
Posts: 299
Joined: 27-January 07
From: Winter is cold here.
Member No.: 37,984
Spam Patrol
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

(list)

Go to the top of the page
 
+Quote Post
peroim
post Feb 2 2007, 08:23 PM
Post #4


Newbie [Level 2]
**

Group: Members
Posts: 33
Joined: 9-July 06
From: Belgium
Member No.: 26,367
as i said, there is a bug smile.gif (or more then one wink.gif)
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!