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