An Email Newsletter Using ASP Smart Mailer and Advanced HTML Editor

An Email Newsletter Using ASP Smart Mailer and Advanced HTML Editor This tutorial is going to take you through creating a mailing list application to send out a newsletter for your site. We'll be using the basic ASP Server behaviors from Dreamweaver MX 2004 along with the DMXZone ASP Smart Mailer and Advanced HTML Editor extensions. You'll also need some ASP web hosting with one of the mail components supported by ASP Smart Mailer installed (CDO, CDONTS, ASPMail, ASPEmail and Jmail). How the Application works Our application is split into two parts, the part the users see and the part the administrator sees. Our users see a form where they submit their name and email to be added to the newsletter subscription list. When they submit this they get a confirmation. On receiving a newsletter, they'll also get a unsubscribe notice allowing them to remove their address from the database. Our admin person gets a restricted access area to design the newsletter (using the Advanced HTML Editor), preview the result, make any alterations and then send it (using ASP Smart Mailer). They also get a confirmation when the send is finished. Basic Design First of all define a site, if you've been following the last few tutorials, then use the DMX Jazz site and basic database connection that we used before. You can find more information in the first article in the series. Our application will use 8 ASP files split across the two areas. The users will be: Signing Up (mailshot_signup.asp) Receiving a confirmation of their sign up (mailshot_confirm.asp) And if they wish to leave the scheme: Unsubscribing (mailshot_remove.asp) Receiving a confirmation of unsubscription (mailshot_unsub_confirm.asp) The sending area for the administrator is split across four pages, and follows the following process: Login (mailshot_login.asp) Create Newsletter (mailshot_admin.asp) Preview/Send (mailshot_send.asp) Confirm Send (mailshot_done.asp) We'll be looking at the users pages and the admin pages in turn, but firstly we have to set up a back end. Page 1 of 20

Database Setup We'll use two tables for this application cms_newsletter and cms_users. cms_newsletter contains three fields: Column Type Features Id bigint Primary Key, Identity, Seed 1, Increment 1 name email varchar(60) varchar(120) cms_users is identical to the table used in previous applications. It contains columns of the type varchar, which means they contain text that will hold up to their length, but only what is needed. I added a basic user called admin with a password of 6868 as test data. Column Type Features id Bigint Primary Key, identity, Seed 1, Increment 1 cms_user cms_pass varchar(20) varchar(20) I used SQL server, but you could equally use MS Access if you made the following alterations: Change the connection string you'd use to set up the database connection Set the id column to autonumber Use text instead of varchar for the various text containing fields Building the Users Pages Here we need to look at the sign up (mailshot_signup.asp) and unsubscription (mailshot_remove.asp) pages and the two confirmation pages (mailshot_confirm.asp and mailshot_unsub_confirm.asp). The Sign Up Page Users sign up to our newsletter via mailshot_signup.asp. Open up the file and add a basic form with two fields (name and email) and a submit button: Page 2 of 20

In the Bindings panel, add bindings to request.form and name, and request.form and email. Moving to the Server Behaviors area of the application panel, click + > Insert Record. A dialog like the one below should open up: Select the connection you are using, and the cms_newsletter table. Set the behavior to use the values from our form. If you use different column names to textfield names, make sure they match to the correct ones. When you browse for the After inserting go to: page, select mailshot_confirm.asp, and click the Parameters button. In the Parameters box add one called name, with a value of the binding request.form name. Do the same for one called email and request.form email. Click OK and go back to the page. With the first page complete, we move on to the mailshot_confirm.asp page. Page 3 of 20

The Confirmation Page Create a basic page with a confirmation message: "Thankyou for signing up to our newsletter" Using the bindings panel, bind two request variables name and email, using Bindings > + > Request Variables and using the Request.Form option: Drag these bindings onto the page so that we can create a more personal message: The sign up area is now finished. At this stage, you'll want to test the pages and add a few dummy email addresses to the database for test purposes by submitting the sign up form. Something like dummy@yoursite.com, so you can track if it arrived okay and what the result looks like. The Removal Page In our email we give our users the option to unsubscribe, by clicking on a link containing their address. Open up mailshot_remove.asp and move to the Bindings panel. Add a binding for a request.querysting variable called email, as provided in our link. Page 4 of 20

Next, add a title and some suitable text to the page, and then drag the binding you just created into the text. It should look something like this: Now create another binding of the type Request.Form to email, since we need to keep track of it when we post back to the page. Again in the Bindings panel create a new Recordset called todelete. Set the dialog to select the id of the subscriber from the database with the same email address. We only need the ID as this is used by the Delete server behavior. With the recordset created, add a form below the text, containing a single button labelled "Delete Me" and containing a hidden element called email with a dynamic value set to the Binding Request.Querystring of the same name. Page 5 of 20

Move to the Server Behaviors panel and Click + > Delete Record. The dialog shown below will appear, and you will need to add the details shown: Again we use our Jazz connection and the cms_newsletter table. The record to delete comes from our todelete Recordset and the unique key is our id field. The page the users see after deletion is mailshot_unsub_confirm.asp. When you browse for this in the file dialog, hit the parameters button to add the details below. This way, even when we forward to the confirmation page we keep track of the email that was deleted as part of the URL. The Unsubscribe Confirmation Open up mailshot_unsub_confirm.asp and add a new Binding of the Request type, with the type of Request.Querysting and the name of email. The unsubscribe confirmation page contains a brief message into which we put the email address that was forwarded as part of the URL. Page 6 of 20

You'll probably also want to add a link back to your main site beneath this. The Sending Area The sending area is split across four pages, and follows the following process: Login (mailshot_login.asp) Create Newsletter (mailshot_admin.asp) Preview/Send (mailshot_send.asp) Confirm Send (mailshot_done.asp) Logging In First off we want to create our login page. Open up mailshot_login.asp and create a basic layout including a form, two text fields and a submit button. Add two appropriate labels. Set the text fields to be called username and password. Page 7 of 20

In the Server Behaviors area of the Application panel hit, + > User Authentication > Log In User. The dialog above will open up. If you named the form fields correctly, then the username and password fields should be correct. In the Validate using connection dropdown, select your database connection (I used the Jazz connection we created in a previous article). Select the Table dbo.cms_users and for the columns for user information to be matched against select cms_user for username and cms_pass for password. If login succeeds should be set to mailshot_admin.asp and for simplicity If login fails should just redirect back to the login page. Page 8 of 20

With all your details filled in, click OK. We now have a page that will log our administrator into the newsletter area if given the correct password, and act as a default page for anybody trying to access restricted pages. Mailshot Admin Page Our first page is a simple welcome page. Before adding any content go to the Bindings Panel, and Recordset. Go to advanced view and select the Jazz connection. Add the following SQL: SELECT count(id) as subscribers FROM dbo.cms_newsletter This SQL will tell us how many records are in the cms_newsletter table, and thus how many subscribers we have. Add a basic welcome message to the page: "Welcome to newsletter admin, we have X subscribers" Page 9 of 20

Highlight the X and go to the bindings panel, highlight the subscribers column of our subcount recordset and click the Insert button: You should have a basic page something like this: Now we get to the meat of the application. Add a brief explanatory note "use the form below to compose your newsletter" and then a new Form I've called this newsletter. Set the form to submit to mailshot_send.asp and set it to use the GET method (this is important, since the Smart Mailer behavior, we'll add later, detects any POST action as a signal to send). Add a text input field with the label "newsletter subject", with a form element name of subject. Next add an Advanced HTML Editor element (in the Forms area of the Insert panel, see screenshot): If this is the first time you've used an HTML Editor in making this site, you'll get a warning saying that files will be added to the site, and not to forget to upload them. Page 10 of 20

Set the Editor element to be called content, and set it to width 400 (we want it pretty small, since it's creating email content and most email clients use fairly small windows) If you highlight the Editor (click on it), then in the Properties panel you can alter which options are available for the newsletter, see the following screenshot: Which options you use are up to you, but remember that if you enable styles, then those styles must be stored in the body of the HTML for the newsletter, since email clients often don't support external stylesheets. With the Editor set up, add a Submit button at the base of the form with a label of Preview. The page is almost complete. The last thing to add is a behavior to stop just anybody sending a mailshot to everybody in our mailing list. In the Server Behavior's dialog hit + > User Authentication > Restrict Access to Page. A dialog like the one below will appear: We'll just restrict on Username and password, set the access denied page to be mailshot_login.asp. Click OK and save the page. Page 11 of 20

Mailshot Preview Page mailshot_send.asp is designed to give a preview of your page, so your users can be sure they haven't got any spelling mistakes. Open up the page and add a title, some explanatory text and two horizontal rules. We'll use these to show where the newsletter content begins and ends. Next go to the Bindings area of the Application panel and add two request.querystring variables, content and subject: With these added, drag them into the area between the two horizontal rules and put a break between them (<br /> tag). Add a form underneath the rules this form is essentially a duplicate of the previous page's form, so that the user can correct any mistakes they notice in the preview. The only difference is that this form uses POST, and that we've used the dynamic bindings subject and content as default values (you can set these up using the lightning bolt icon in the Properties panel, when either of the form elements is selected). Why go to this extra trouble of previewing? Well, it's better than having a newsletter full of spelling mistakes going out, and the preview will allow you to see the entire thing rather than just the editor window. It also allows you to wrap any default formatting you add to your email (see later) around the dynamic sections. The page will now look like the one below in Dreamweaver: Page 12 of 20

Now that we have our newsletter preview, it's time to gather the information used to actually send the newsletter. The newsletter is sent by posting back to the same page, so we have to get the relevant information here. We're going to add a recordset. Go to the Server Behaviors area of the Application panel. Hit + > Recordset (Query), and the dialog below will open up, we'll use the simple mode since all we want is the details: Page 13 of 20

We've called the recordset mailinglist and simply grabbed everything from the table. If you hit Test you should get all the email addresses you added when testing the sign up part of the application. Hit OK to close the dialog. Still in the Server Behaviors panel Hit + > DMXZone > Smartmailer. Page 14 of 20

The first panel of the Smart Mailer extension should look like this: The From section will need to be filled out with something appropriate to your site. Set the To area to be Multiple Receivers and use the mailinglist recordset. Make sure the database columns for name and email are matched correctly. Set the mailer to go off On Form Submit. Page 15 of 20

Moving on to the content panel of the Smart Mailer extension: Set the subject to take its value from the hidden form element subject. You could use a binding, or just type in the ##Request.Form("subject")##. We've set content-type to HTML. If you plan on using images in your newsletter, you may wish to set Embed images, so that people can view the newsletter without being online. However, bear in mind that this will increase the size of the email quite drastically with a corresponding increase in time taken to send to every recipient. Generally linked images are a better choice if sending large amounts of mail. I've used a very simple piece of HTML for the email, but you can include a much more elaborate template depending on your tastes. If you do, remember to include this template information on your preview page. I've also added a link to our unsubscribe page. Page 16 of 20

<html> <head> </head> <body>##request.form("content")## <p>you are subscribed to the DMXJazz Newsletter unsubscribe at: <a href="http://www.dmxjazz.com/mailshot_remove.asp?email=##server.urlencode(mailinglist.f ields.item("email").value)##"> http://www.dmxjazz.com/mailshot_remove.asp?email=##server.urlencode(mailinglist.fields. Item("email").Value)## </a> </p> </body> </html> Again, you could create a binding for our request variables, but it's just as easy to type in the Request variable for the content. Remember to put everything on one line, or Smart Mailer will add extra <br> tags. Before we leave this code, consider the unsubscribe link: http://www.dmxjazz.com/mailshot_remove.asp?email=##server.urlencode(mailinglist.fields. Item("email").Value) We've included this as both an URL and as text, so that anybody who has their email client set to plain text can still have a link to copy and paste. We've also used the ASP Server.URLEncode method to turn any special characters in the email into appropriate URL code (@ becomes %40, dots become %2E). Page 17 of 20

Finally, move to the setup dialog: The Server Settings area will need to be configured, since installations of ASP Server's vary in what email services they provide. Path Type lets the extension know how to include the dependent file that actually runs the emailing procedure. You should be okay with Related, unless your server has parent directories disabled (you can't use../). The Component box is the most important as it tells the script which one is present on your server if you're using a web hosting company, check with them which email service is provided. Typically, NT and older Windows 2000 hosting uses CDONTs (Collaboration Data Objects for Windows NT Server) and newer Windows 2000/2003/XP servers will use CDO (Collaboration Data Objects). Some providers use Jmail, ASPMail and ASPEmail, for whatever reasons. Once you know which type of email service is installed, it's simply a matter of filling in the boxes correctly. For most this is just a case of adding in the mail server you wish to use (which will likely be something like mail.yoursite.com). Some will have a different name, others will be secure and require an email account, username and password before they'll send anything. Page 18 of 20

You'll also want to set up whether to ignore errors or report them to the user when sending mail. For this application I've set it to ignore. For sending bulk email you'll also want to increase the script Timeout so that the script doesn't stop running automatically (a failsafe built into ASP pages to stop infinite loops and other nastiness clogging up server time). How much you increase it by will depend on how many subscribers you have and the capacity of your server. For a few hundred subscribers between 300-600 is probably okay. As a good rule of thumb, every time your subscriber base doubles, double the script timeout. For large number of subscribers, it's also useful to have a progress bar, so that the user (if they're not you) knows how far through the mailing they are. Smart Mailer provides some nice Flash based progress bars that appear in a popup when you click submit and stay until the confirmation page appears. Remember to upload the HTML and SWF with your other files. Finally choose a redirect page. In this case it's mailshot_done.asp. And close the dialog. Before moving on, we need to secure this page. In the Server Behaviors dialog hit + > User Authentication > Restrict Access to Page. A dialog like the one below will appear: We'll just restrict on Username and password, set the access denied page to be mailshot_login.asp. Click OK and save the page. The Send Confirmation Page The confirmation page (mailshot_done.asp) is pretty simple, and since it doesn't allow any data alteration, you don't even need to restrict user access. It's simply got a link to the main admin page (which is protected) Page 19 of 20

Newsletters So, the application is finished, if you upload the files to your test server you should be able to login and create your own newsletter. The only thing left is to create your newsletter, filled with new content to entice your users back to the site. There are a couple of things I'd recommend here: Don't send out too regularly Nobody likes their inbox deluged with updates. Once a week is a good amount. Only send out when you have enough content Make sure you have enough content in the newsletter for it to be worthwhile. You get more unsubscribers if the newsletter contains little relevant content. Track your stats Check to see which areas of your site need a boost, and advertise these in the newsletter. Page 20 of 20