Home arrow XML arrow Page 4 - Building an AJAX-Based Chat: Coding the Receiver Module
XML

Building an AJAX-Based Chat: Coding the Receiver Module


In this second part of a three part series of articles, you will learn a lot more material related to building the AJAX-based chat. You will discover how two requester objects fetch or add new messages to the database. Also, you will see the code for a simple login page for registering users that want to access the chat page.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 24
November 15, 2005
TABLE OF CONTENTS:
  1. · Building an AJAX-Based Chat: Coding the Receiver Module
  2. · Retrieving messages from the database: defining the “getChatData()” function
  3. · Building the chat layout: writing the “createMessageBoard()” and “createMessageBox()” functions
  4. · Registering chat users: defining a simple login page
  5. · Putting the pieces together: building the whole chat page

print this article
SEARCH DEVARTICLES

Building an AJAX-Based Chat: Coding the Receiver Module - Registering chat users: defining a simple login page
(Page 4 of 5 )

Before I begin defining the login page, which is useful for registering user nicknames, first allow me to show the corresponding screenshot, which is useful for illustrating how visitors log onto the application. Here is how this page looks:

In the simplest sense, the above image depicts a simple login page, where users are asked to enter a nickname, in order to gain access to the chat page. Although the login process is pretty straightforward and easy to understand, let’s have a look at the basic structure of the login page, so you can see how nicknames are registered by PHP session variables. Here is the appropriate (X)HTML markup, together with the PHP snippet that stores the nicknames:

<?php
// register nickname as session variable
// & redirect to chat page
if($_POST['enter']){
    session_start();
    $_SESSION['user']=$_POST['nickname'];
    header('location:ajaxchat.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd
">
<html>
<head>
<title>CHAT LOGIN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
     background: #eee;
     margin: 0px;
     padding: 0px;
}
h1 {
     font: bold 36px Arial, Helvetica, sans-
serif;
     text-align: center;
}
div {
    width: 50%;
    background: #99f;
    border: 1px solid #000;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}
p {
    font: normal 12px Verdana, Arial,
Helvetica, sans-serif;
    color: #000;
}
</style>
<script language="javascript">
window.onload=function(){
    var nick=document.getElementsByTagName
('form')[0].elements['nickname'];
    if(!nick){return};
    nick.focus();
}
</script>
</head>
<body>
<h1>AJAX-BASED CHAT SYSTEM</h1>
<div>
<form action="<?php echo $_SERVER['PHP_SELF']?
>" method="post">
<p>Enter your nickname <input type="text"
name="nickname" />
<input type="submit" name="enter"
value="Go!" /></p>
</form>
</div>
</body>
</html>

As shown above, the logic of the login page is extremely simple. It exposes a login form, which uses the “Observer” pattern for submitting the data to itself. After the user has submitted the form, the PHP snippet registers the entered nickname in a “user” session variable, and redirects the visitor to the “ajaxchat.php” file, where the chat page will be displayed. Of course, I haven’t included any data checking line within the PHP script, in order to keep the code as simple as possible, but usually a login page (even the simplest one) will require writing some kind of data checking code.

Having defined the corresponding login page for the chat application, it’s time to put some of the pieces together and show the complete source code for the chat page, including both the “sender” and “receiver” modules, as well as some basic (X)HTML markup and CSS rules. Want to know how the whole chat page is assembled? Just keep reading.


blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials