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.
Next: Putting the pieces together: building the whole chat page >>
More XML Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
