Home arrow JavaScript arrow Page 2 - Sending Email with an SMTP Client Built with Prototype and PHP
JAVASCRIPT

Sending Email with an SMTP Client Built with Prototype and PHP


If you're a web developer who wants to acquire a solid background in building applications with the popular Prototype JavaScript library, then this set of articles may be what you're looking for. Welcome to the last installment of the series that began with "Building an SMTP Client with Prototype." Made up of three friendly tutorials, this series teaches you how to use this powerful software package to create a highly expansible email application that works with most modern browsers.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
October 02, 2007
TABLE OF CONTENTS:
  1. · Sending Email with an SMTP Client Built with Prototype and PHP
  2. · The complete client-side code of the SMTP application
  3. · Sending email with PHP
  4. · Full source code of the SMTP client application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Sending Email with an SMTP Client Built with Prototype and PHP - The complete client-side code of the SMTP application
(Page 2 of 4 )

Before I show you the signature of the PHP script that sends email using the data entered in the web form included in the corresponding user interface, first I'd like to list the full client-side code that belongs to the SMTP client, so you can quickly recall how it looked originally.

Given that, here is the pertinent code listing. Have a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />

<title>Prototype-based SMTP Client</title>

<style type="text/css">

   body{

     padding: 0;

     margin: 0;

   background: #fff;

 }

  h1{

   font: bold 24px Arial, Helvetica, sans-serif;

    color: #000;

   text-align: center;

 }

 p{

  font: bold 12px Arial, Helvetica, sans-serif;

   color: #000;

   padding-right: 100px;

  text-align: right;

 }

 textarea{

   width: 400px;

     height: 300px;

     padding: 2px;

     font: normal 12px Arial, Helvetica, sans-serif;

      color: #000;

 }

 #maincontainer{

   width: 600px;

     height: 550px;

     margin-left: auto;

     margin-right: auto;

   background: #f5ebb1;

   border: 1px solid #000;

 }

 #state{

   font: bold 12px Arial, Helvetica, sans-serif;

    color: #00f;

    padding: 10px 0 10px 10px;

 }

 .textbox{

   width: 400px;

    padding: 2px;

    font: normal 12px Arial, Helvetica, sans-serif;

   color: #000;

 }

 .formbutton{

   font: normal 12px Arial, Helvetica, sans-serif;

    color: #000;

 }

</style>

<script language="javascript" src="prototype-1.4.0.js"></script>

<script language="javascript">

 // attach handler to window object

  Event.observe(window,'load',initializeEmailClient,false);

 // initialize email application

   function initializeEmailClient(){

  Event.observe
($('resetbutton'),'click',clearMessageField,false);

  Event.observe('mailform','submit',sendEmail);

 }

 // reset 'message' field to send email

   function clearMessageField(){

  Field.clear($('message'));

 }

 // send http request

 function sendEmail(e){

 var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));

 var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});

 // prevent form from submitting

     Event.stop(e);

 }

</script>

</head>

<body>

<h1>Prototype-based SMTP Client</h1>

<div id="maincontainer">

<div id="state">STATUS: COMPOSING MESSAGE...</div>

<form id="mailform">

<p>To: <input type="text" id="to" title="enter email address of
recipient" class="textbox" /></p>

<p>Subject: <input type="text" id="subject" title="enter the
subject of your message" class="textbox" /></p>

<p>Cc: <input type="text" id="cc" class="textbox" /></p>

<p>Bcc: <input type="text" id="bcc" class="textbox" /></p>

<p><textarea name="message" title="Type here the text of your
message" id="message"></textarea></p>

<p><input type="submit" value="Send Message" class="formbutton"
title="Send Message"/>

<input type="reset" value="Clear All Fields" class="formbutton"
title="Clear All Fields" />

<input type="button" value="Clear Message" class="formbutton"
title="Clear Message" id="resetbutton"/></p>

</form>

</div>

</body>

</html>

So far, so good. Having listed the complete client-side code that corresponds to the SMTP client, it's time to move forward and take the next step involved in the development of this Prototype-based application.

As I mentioned before, we now need to create a simple PHP script which will be capable of sending email messages using the data provided by the user, that is the respective recipients, subject and text of the message in question, and so forth.

Therefore, in the section to come I'm going to build the aforementioned PHP script, in this way completing the development of this SMTP client.

Want to see how this step will be taken? Click on the link that appears below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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