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:
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 ;
`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.
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?
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.
