Free as Freedom, not Free as Free Pizza!” />

-

Udruženje Informatičara BiH - Cross-platform and Portable Development With PHP, LAMP/WAMP development, AJAX and Javascript, ASP, dot NET, C sharp, C++, C, VB, Oracle, tutorials and tips...
Free as Freedom, not Free as Free Pizza!


 
Web http://www.uibih.co.nr

Add to Google

Tuesday, October 31, 2006

How To Make Your Own Chat Application part 1

"Chat applications are usually very interactive. Users exchange many messages,
often very frequently. Some Web based chat applications are a bit annoying,
as they require frequent page reloading to update and display the messages that
the users exchange. Nowadays, using AJAX is an obvious approach to avoid unwanted
page reloads. This class implements a AJAX based chat system precisely to take
advantage of that possibility."
- Manuel Lemos

In this tutorial I will explain how to make your own chat application using
PHP, MySQL and AJAX. This class can be used to implement a simple Web-based
chat system that uses AJAX to update the chat dialog display area without reloading
the whole page. The class generates a page with a Web form to submit what each
chat line that the users type. The chat lines are sent to the server using a
XMLHttpRequest object. The chat lines are received by a server side script that
uses the class to store what each user entered in a MySQL database table. In
response, the class outputs the chat list already formatted to by displayed
in the user browser pages.


We suppose you know PHP, HTML, Javascript and MySQL ...

Now let us first make our index page :

// We start the file with session destroying, so we make sure we have a clear session.

<?php 
session_start();
session_destroy();
?>
// Start HTML Design
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chat Sistem</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2"><div align="center">
<strong><font
color="#0000CC" size="3">CHAT System</font></strong>
</div></td>

</tr>
<tr>
// We define our form elements,
// the name and the color and post it to our php file window.php
<td width="37%">Name</td>
<td width="63%"><form name="main" method="post" action="window.php">
<input name="user" type="text" id="user">
</td>
</tr>
<tr>
<td>Color</td>
<td>
<?php
// We generate a table of random colors, this is a good trick to generate 1000 color
for($i=0;$i<1000;$i++){
$color_set[$i] = "#".dechex(rand(0,255)).dechex(rand(0,255)).dechex(rand(0,255));
}
print "<table width=20px>";
for($i=1;$i<21;$i++){
print "<tr>";
for($j=1;$j<51;$j++){
print "<td bgcolor='".$color_set[$j*$i-1]."'
onclick=
\"document.main.color.value='".$color_set[$j*$i-1]."';\n
document.main.color_view.value='"
.$color_set[$j*$i-1]."'\">
<font size=1> </font></td>"
;
}
print "</tr>";
}
print "</table><br>
<input type=
\"text\" name=\"color_view\" value=\"\" disabled>
<input type=
\"hidden\" name=\"color\" value=\"\">
<input type=
\"button\" value=\"OK\"
onclick=\"if(document.main.user.value!=''&&document.main.color.value!='')
{
\n document.main.submit(); \n}\">";
?>
</form></td>
</tr>
</table>
</body>
</html>

This is our index file, we save it as index.php ...