Pop3 Ajax
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Pop3 Ajax as PDF for free.
More details
- Words: 2,084
- Pages: 5
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, sansserif; 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, sanshttp://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:
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
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, sansserif; 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, sanshttp://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:
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
