A send-a-friend application with ASP Smart Mailer

Transcription

1 A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick about your site. In this tutorial we're going to build a quick and easy, but fully functional version of this application using the DMXZone ASP Smart Mailer Extension. What you'll need You'll need a web server that supports ASP. The server will also need one of the many mailing programs supported by ASP installed on it. This is the default for most hosting companies, but may not be the case on your own test rig. ASP Smart Mailer will work with CDO, CDONTS, ASPMail, ASP and Jmail. You'll also need Dreamweaver MX 2004 (it works with MX too) and the DMXZone ASP Smart Mailer extension installed. Starting off As with any dynamic page, you'll need to define a site before you can use server behaviors. I'll assume you can set one up, but if not then why not check out Molly Holzschlag's tutorial on the subject. You'll need to use the ASP VBScript server model. First off we'll need 3 files: sendafriend.asp sendafriendconfirm.asp sendafriendstyles.css What the application does When a user visits our site, they view our pages, and on each of them is a link to sendafriend.asp. In addition to the basic link, the link also contains an url parameter which is the page's address. So, for example, on a page called myfaq.html the link would be: sendafriend.asp?url= Note that we'll need to include the entire url with the full path, as a relative url would be no use to somebody receiving the link via . When the browser clicks on the link, they are taken to our sendafriend.asp page. They fill in their name and , and their friend's details, and a brief message, and then they click submit. Our server does some work and creates an based on the user input and sends the mail. The user is then forwarded to a confirmation page, which contains a link back to the original page they were browsing. Their friend receives a message with the URL in question. Creating sendafriend.css This CSS file contains the basic formatting information for our application. Again, I advise developing the logic first with minimal styling, and then enhancing the pages to your required standard of breathtaking aesthetic loveliness once you've got the nuts and bolts all working. Page 1 of 11

2 So this CSS is deliberately nothing fancy, just some basic font styles for the whole page, an id called #message that will be used to highlight the default message and some form styling. body { font-family: Arial, Helvetica, sans-serif; font-size: smaller; #message { border: 1px solid #000000; padding: 4px; form { border: 1px solid #003399; padding: 4px; background-color: #CAF2FF; Save and close the file. Creating sendafriend.asp Our basic page looks as follows: Page 2 of 11

3 The layout comes from our stylesheet, so start by adding that to the page. You can do this with the attach stylesheet button in the CSS Styles pane of the design panel (highlighted in red on the screenshot below). Once the stylesheet is added you just need to put the relevant paragraphs and form fields in place. The form fields are named message, name, , fname and f . The paragraphs containing the sample message are wrapped in a div with id attribute of message. <div id="message"> <p> Your friend <em>yourname</em> visited page: Page</p> <p>they also left the following message:</p> </div> Right, now it's time to start adding our dynamic data. Go to the Bindings pane of the application panel. We're going to add a number of request variables, using + > Request Variable: Most of these are just simple request variables (message, , f , fname and url). The last is a server variable called REMOTE_ADDR. This is a piece of information that the server has received from the user's browser, telling it where the request came from as an IP address. We'll use this later in our precautions against abuse of the script. Page 3 of 11

4 Now that the bindings are added, go back to the main page and add a hidden field to the form. This field should be named url and have a dynamic value from our Request variable url. Why do this? Well, the url the user is interested in gets sent to the page first from the link they click on. //6However, when the submit button on the next page is clicked, we're requesting a new URL, so the URL that you want to send to your friend will be lost, so we need to resend the url as part of the form. (Of course, if you've only got plans to use this for one page, you can hard-code the URL into the form, but good practice is to make the forms as re-usable as possible.) Again on the main page, we're going to add the url after our "your friend visited the page:" text. In the bindings panel, we'll select the url request variable and use the insert button at the bottom of the Bindings panel (shown in the screenshot below). This is so the user can check the url is correct before proceeding. Adding the Smart Mailer So, with the basic page layout finished we move on to adding the behavior that actually does the mailing. In the Server Behaviors panel, click + > DMXZone > Smart Mailer. The dialog that pops up should look like this: Page 4 of 11

5 Smart Mailer's Main Tab For the From fields we'll use the dynamic data lightning flash to add our previously created bindings: name and . The To fields we'll use the fname and f bindings. We'll set the when Send field to On Form Submit (this is the default) and make sure it submits when we use the sendafriend form. That's all we need for that tab. Now move on to the Content tab. Page 5 of 11

6 Smart Mailer's Content Tab In the subject box, we'll put "sent by a friend from yoursite.com", but you should insert whatever your own site is called here. To keep things simple we'll use the text content Type, although if you wanted to make it a snazzier you could use the HTML option combined with the Advanced HTML Editor extension instead of a normal text area (read on for more details in sending HTML mails). The body of our message is created in the Static text/html area. If you want to insert data from a dynamic source, use the lightning bolt icon. This will add the binding between ## marks at your current cursor position. For our message I used the following: Your friend ##Request("name")## visited page: ##Request("url")## They also left the following message: ##Request("message")## Page 6 of 11

7 This message sent via the sendafriend script at oursite.com. Report abuse of the script to: The sender's IP address was ##Request.ServerVariables("REMOTE_ADDR")## Our is made up of a variety of bits of dynamic data and plain text. We take the form values name and url and insert them into the basic text, then add the custom message from the user. Finally we add a bit of security to protect people from abusive messages via our send-a-friend system. We give an address for people to report abuse of the script to us, and log the IP address of the person who used the script. This is important if you allow a custom message, as people could literally write anything! If you're using a script like this on a commercial site, it's sensible to take legal advice on if you could be held liable for any use of the application. Since we're not sending attachments, move on to the setup tab: Smart Mailer's Set-up Tab This tab gives you options for how your is sent, since installations of ASP vary in what services they provide. Path Type lets the extension know how to include the dependent file that actually runs the ing procedure. You'll be okay with related, unless your server has parent directories disabled (you can't use../). Page 7 of 11

8 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 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 ASP , for whatever reasons. Once you know which type of 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 account username and password before they'll send anything. 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. The redirect URL tells our application where to forward the user to after mailing is complete. We're using sendafriendconfirm.asp. Using the file browser we'll also add two parameters to the url so that we can do some reporting. These are fname and url, which are the same as our Bindings. With smart mailer added, we can close that page. Building sendafriendconfirm.asp Our confirmation page is a simple piece of text letting the user know their was sent, and then giving them a link back to the page they were originally on. Again we've used the Bindings panel to add the Request.fname and our url to the Return to Site link. Finishing Off Your remaining task is to add the correct link to sendafriend.asp to your other pages. Your users will be happily letting each other know of interesting content in no time. HTML Content As I mentioned earlier, you can also use ASP Smart Mailer to send HTML s. If we combine this with the Advanced HTML Editor extension, we can allow our users to send messages with their own formatting. Page 8 of 11

9 Open up sendafriend.asp and delete the textarea called message from the form. Insert an Advanced HTML editor element instead and give it the name message, You'll get a warning box saying that files have been added to the ScriptLibrary directory, and not to forget to upload them to your server. Now we have the editor, we'll restrict what formatting the user can add using the buttons in the properties panel: We'll limit it to fontsize and some basic text formatting. With the form altered, let's create the basic HTML for our . You can simply copy and paste from a dreamweaver page source if you wish. Be careful of including images, as they should be to full paths ( I used a fairly basic piece of code: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sent by a friend from Yoursite.com</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; Page 9 of 11

10 .small{ font-size: 8pt; --> </style></head> <body> </body> </html> go to the Server Behaviors panel and open up the SmartMailer behavior. Insert your HTML for the before the current content and then put the current code between the <body> tags with a bit of HTML formatting. Alter the content-type setting to HTML. This is what the content for my looked like after formatting: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sent by a friend from Yoursite.com</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif.small{font-size: 8pt; --> </style> </head> <body> <p>your friend ##Request("name")## visisted page: ##Request("url")##</p> <p>they also left the following message:</p> ##Request("message")## <p class="small">this message sent via the sendafriend script at oursite.com. Report abuse of the script to: abuse@oursite.com. The sender's IP address was ##Request.ServerVariables("REMOTE_ADDR")##</p> </body> </html> Next, we need to get rid of the linebreaks, since if we don't Smartmailer adds <br> tags at every line change, which interferes with the HTML. Page 10 of 11

11 Click OK and close the dialog. Now your sendafriend script sends nicely formatted HTML! There's far more that can be achieved with the Smart Mailer extension. Don't forget that, once you own Smart Mailer, you can use it in any number of pages on any number of sites you don't need to buy it for each site you create. Next time, we're going to take a look at sending out a newsletter to a list of subscribed users! Page 11 of 11