Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client

(2006-03-29) - Contributed by Alejandro Gervasio

In this article, the first of three parts, you will start creating a simple web-based POP 3 client using AJAX, which will use
"XMLHttpRequest" objects to retrieve messages from a mail server.

A downloadable file for this article is available here.

Introduction

Indeed, it isn't shocking news that AJAX has introduced considerable changes within the development of client-side Web
applications. This brand new way of conceiving web programs, which send http requests in the background without page
reloads, has brought a plethora of possible implementations for popular software that originally was designed and
developed for running as desktop applications.

Do you want to build web-based FTP clients, chatters, or full-fledged email applications, running all the stuff on the same
web page? Fine, pick up a good understanding of AJAX, learn about its properties and methods, then develop the
corresponding back and front-ends, and hopefully you'll end up with a http program that does its work at least decently.
Of course, it may not meet everyone's needs, but what's the rush? After all, you can boost it with little hard work and
effort, which can turn the program into a robust, reusable library.

Admittedly, I got caught for the moment, since not all applications can be developed with the same ease. But there
is enough room to write software that uses AJAX as the driving technology for doing all sorts of clever things, even when
this means having to rethink - and fix - some issues related to accessibility and navigation between application states.

As you may have guessed, in this article I'll make my contribution to the developing AJAX universe, by creating a simple
web-based POP 3 client, which will utilize "XMLHttpRequest" objects for retrieving messages from a given mail server.
The application I plan to develop will use a simple front-end for connecting to the mail host, displaying the messages and
navigating back and forth across them. On the server-side terrain, I'll use PHP for accessing the mail server,
pushing POP3 commands and reading messages from the inbox, which implies having the possibility of switching over to
your preferred language and using it to create the application.

With the formalities out of our way, it's time to begin building the web-based POP 3 client. Let's get started.

Controlling the look and feel: creating the application's user interface

The first step involved in the creation of the web-based POP 3 client rests on building the basic user interface. Stripped
down to its bare bones, the building blocks of this interface will consist of three simple DIV elements, which will house the
corresponding areas that comprise the mail client program. The first DIV box will contain the area for displaying the
appropriate data fields. This will allow users to enter the usual information for connecting to the mail server, by specifying
either its domain name or IP address, along with the name/password combination. For a better idea of how the overall
user interface looks, below I've included a screenshot, which basically depicts its appearance:

As the image above illustrates, the web-based POP 3 client shows the classic data fields for connecting to the mail
server, in addition to providing some basic controls for navigating back and forth between messages. Also, I've added a
little extra functionality to the program by including a "Clear" button, which will come in useful for clearing the area where
messages are conveniently displayed.

As you can appreciate, the user interface of my POP 3 client is very easy to use. Naturally, as you'll see later, both client
and server-side application layers seamlessly support the development and implementation of an improved interface.
However, for the educational purposes of this article, the functionality of the current one is more than enough.

Now, after providing you with an example of how the look and feel of the POP 3 client will be created, it's time to move on
http://www.devarticles.com - Dev Articles Powered by Mambo Open Source Generated: 5 February, 2007, 00:45
and see how the above image can be translated to a few CSS declarations and the corresponding structural (X)HTML
markup. So, let's no waste more time and learn how this is done.

{mospagebreak title=Styling the web-based POP 3 client: writing the CSS declarations}

As I explained before, writing the required CSS declarations for properly styling the POP 3 client is really a breeze. Since
its user interface is comprised of only three DIV elements, most of the CSS styles will be applied to them. In addition I
will declare some CSS classes to improve the look of the control buttons. In accordance with this, the CSS rules that
control the visual presentation of my web-based POP 3 client are as follows:

body {
margin: 10px 0 0 0;
}
#serverinfo {
width: 700px;
height: 22px;
padding: 2px 5px 2px 5px;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #9cf;
margin-left: auto;
margin-right: auto;
font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
color: #000;
}
#mailcontainer {
width: 700px;
height: 520px;
padding: 2px 5px 2px 5px;
border: 2px solid #000;
background: #eee;
margin-left: auto;
margin-right: auto;
font: 12px normal Arial, Helvetica, sans-serif;
color: #000;
overflow: auto;
}
#navbar {
width: 700px;
height: 22px;
padding: 2px 5px 2px 5px;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
background: #9cf;
margin-left: auto;
margin-right: auto;
}
form {
display: inline;
}
.inputbox {
width: 150px;
border: 1px solid #000;
background: #eee;
}
.formbutton {
width: 70px;
height: 20px;
font: bold 11px Verdana, Arial, Helvetica, sans-
http://www.devarticles.com - Dev Articles Powered by Mambo Open Source Generated: 5 February, 2007, 00:45
serif;
color: #000;
}

As shown above, I've used three different contextual selectors for styling each of the different sections that makes up the
client program, by including the "#serverinfo," "#mailcontainer," and "#navbar" selectors respectively. In a similar way,
I've added some styles to the user input fields and the control buttons together, so they look a little more appealing. You
can change their appearance by coding your own CSS rules, in accordance with your personal preferences.

All right, since the CSS code listed above isn't rocket science, let's get rid of these boring details, and jump to the next
section. There, we will write the (X)HTML markup in question, which conforms the actual building blocks for creating the
front-end of the POP3 client application.

{mospagebreak title=Defining the POP3 client's structure: coding the (X)HTML markup}

At this time, you should hopefully have a clear idea of how the application's (X)HTML markup will be defined. Obviously,
the top DIV container will house all the corresponding form fields used for entering mail server connection data, together
with the button that triggers http requests to the Web server. This sounds really simple and understandable, so it bears
no further discussion.

Similarly, the second containing DIV will be responsible for displaying the list of messages pulled from the server, along
with all the possible responses that eventually the host might send back to the client. The only thing worth nothing with
reference to this element is that the CSS selector tied to it includes the "overflow: auto;" declaration, which means that, in
case the length of the message being displayed would be longer than the height of the pertinent DIV, a scroll bar will be
added to it automatically.

Finally, the third DIV element will be used as a simple wrapper for the navigational buttons that you saw in the
screenshot I showed previously.

After having schematized the visual structure of the web-based POP3 client, let's turn the theory into concrete code.
Therefore, here's the corresponding (X)HTML markup, which gives consistency to the program's front-end:

<div id="serverinfo">
<form>
HOST <input name="host" type="text" class="inputbox" title="Enter
mail hostname/IP address" />
USER <input name="user" type="text" class="inputbox" title="Enter
username" />
PASSWORD <input name="pass" type="password" class="inputbox"
title="Enter password" />
<input name="connect" type="button" value="Connect"
class="formbutton" />
</form>
</div>
<div id="mailcontainer">
</div>
<div id="navbar">
<form>
<input name="prev" type="button" value="<&lt Prev" class="formbutton" title="Previous message" />
<input name="next" type="button" value="Next >>" class="formbutton" title="Next message" />
<input name="clear" type="button" value="Clear" class="formbutton" title="Clear all messages" />
</form>
</div>

Here, I've defined the DIVs I mentioned before, in order to build the structure for the user interface. As described above,
the upper DIV houses the form fields that will allow the user to enter mail server connection values, while the bottom DIV
http://www.devarticles.com - Dev Articles Powered by Mambo Open Source Generated: 5 February, 2007, 00:45
wraps up the fancy buttons for navigating back and forth across email messages. The last piece of structural markup
rests on the "mailcontainer" DIV element, which, as you may have figured out, will show each of the messages retrieved
from the specified server, and incidentally display its respective responses, whether or not the connection process or the
retrieval of messages has been successful.

Considering the fact that I've defined the CSS declarations and the (X)HTML markup responsible for rendering the user
interface of the mail client, the question is: what's coming up now? Well, over the next few lines I'll define the generic
signature for each JavaScript function that integrates the whole web-based mail application, so you can understand its
programming logic. Click the link below and keep on reading.

{mospagebreak title=Creating the skeleton of the client-side application layer: defining generic JavaScript functions}

Now that you have the CSS code and the (X)HTML markup that will render the application's user interface, all that
remains is to define the structure of the JavaScript functions that will integrate the whole POP3 client application. For this
reason, here's the list of the relevant functions:

// requests the PHP file that fetches messages from mail server
function sendHttpRequest(){
// code for fetching PHP file goes here
}

// displays email messages on the web page

function fetchMessages(){
// code for displaying email messages goes here
}

// get form data in the format

'variable1=value1&variable2=value2&....variableN=valueN;
function getFormValues(){
// code for getting form values goes here
}

// performs initialization tasks, assigns event handlers and

resets page contents
function initializeUserPanel(){
// code for setting up user panel goes here
}

There we go! With only four JavaScript functions, this small POP3 client will be capable of fetching messages straight
from the mail server and displaying them right on the web-based user interface that I just created. Now, let's quickly go
over the tasks assigned to each function, so you can easily understand what they do.

The first function, "sendHttpRequest()," is responsible for fetching the PHP file that will push raw POP3 commands into
the mail server. For obvious reasons, this process will be triggered once the user has entered the name of the server (or
its IP address), in conjunction with his/her credentials, that is, the username/password combination.

Naturally, the "fetchMessages()" function is tasked with displaying email messages on the web page, including eventually
all the responses generated on the server, while the "getFormValues()" function is used for getting all the form data
entered by the user, prior to establishing a connection to the mail server.

Finally, the "initializeUserPanel()" function performs some useful initialization tasks, such as assigning "onclick" event
handlers to control buttons, and resetting the content of the message containing DIV, each time a new connection to the
mail server is established. After briefly describing the tasks of each JavaScript function that integrates the POP client,
you'll probably agree with me that the logic of the application is very easy to follow, so at the time of coding the complete
http://www.devarticles.com - Dev Articles Powered by Mambo Open Source Generated: 5 February, 2007, 00:45
client-side application layer, you shouldn't have any problems grasping its core functionality.

A final note: If you're not inclined to wait for the next article of the series to see how the POP3 client works, you can
download the sample files here or at the beginning of this article.

Bottom line

All right, I have finished defining the generic structure of this simple web-based POP3 client program. Hopefully, this first
tutorial has been instructive enough for creating the look and feel of the application, as well as for defining the skeleton of
each client-side function.

However, this is only a short goodbye. In the next article, I'll show you the complete source code for all the JavaScript
functions that comprise the application layer. So, see you there!

http://www.devarticles.com - Dev Articles Powered by Mambo Open Source Generated: 5 February, 2007, 00:45