Web development tutorial

Tutorial created by Ray Borduin, WebAssist

6 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

In this tutorial, we're going to help you make a simple page that allows people on your site to give you their names and email addresses, and a simple page that you can link them to in the emails you send, that will allow them to remove themselves from your mailing list.

This tutorial is for people who want to set up a small newsletter or mailing list. If you are trying to set up a larger mailing list, you will want a more powerful mailing list solution that handles the sending of the emails for you, such as our email solution, PowerMessenger.

next section

What you need to start

A dynamic site set up within Dreamweaver
A blank database
Dreamweaver CS4 or later
Data Bridge installed and activated in Dreamweaver
DataAssist Newsletter Preset, which can be downloaded here
data-bridge-newsletter-subscribe-unsubscribe.zip

next section

Import the preset

In Dreamweaver, click WebAssist > Preset Manager
From the Product drop down, select Data Bridge - Preset
Click the Import button
Browse to the data-bridge-newsletter-subscribe-unsubscribe.zip preset file you downloaded earlier
Click Open

next section

Create Your Subscribe Page

Create a blank PHP page in the root of your site
Open the blank PHP page
This is to make sure DataAssist creates the pages in the correct directory level
Click WebAssist > Database > DataAssist Pages
Change the Application Type to Newsletter
Make sure the Create the database table for me is checked
This is going to let Data Bridge create the correct database setup for this specific tutorial. It'll be awesome
Change the connection to the one pointing to your blank database
Edit the Page Design to exactly how you wish it to be
For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away
Click the Manage Pages tab
Ensure the page is named using the following naming convention:
Insert > newsletter_subscribe.php

This is done by following these steps:
1. Click on the pages under the Define Features section
2. Change the names under the Page Name & Location field
Click Finish
Uncheck the Save as preset checkbox
Click OK

next section

Update Subscribe Page

Now that we have the database set up, and the subscribe page created, we should customize the text on the subscribe page to be a little more specific to the application we're creating.

In Design view, highlight the text Insert
This should be within <legend> tags as follows:
```
<legend class="groupHeader">Insert</legend>
```
Change the text to say Subscribe to our newsletter
This will look as follows:
```
<legend class="groupHeader">Subscribe to our newsletter</legend>
```
In Design view, click on the Insert button
In the Properties Inspector, change the Value to Subscribe
This will change the text on the button. Don't change any other values in the button, or the subscribe form might stop working
In Design view, highlight the text Please enter a value.
This will be right after the Email Address field. This will be within a <span> tag as follows:
```
<span class="serverInvalidState" id="emailaddress_ServerError">Please enter a value.</span>
```

Change the text to say This email address is already in our system, or it is invalid. Please use another one.
This will look as follows:

<span class="serverInvalidState" id="emailaddress_ServerError">
This email address is already in our system, or it is invalid. Please use another one.

</span>

Save the page!

Now that we've made the page all fancy fresh, you should try to add a few email addresses, making sure they are added correctly into your database, and that the validation on the page works as expected.</span></legend>

next section

The Unsubscribe Page

Next up, we're going to create an unsubscribe page. This is where it gets a little complicated. The page will either take an email address as a URL variable, then populate it into an Unsubscribe Email field, or allow users to enter their own email address to unsubscribe. They will then have to click submit to drop the email address from the database.

Step 1: Create the page and get it started

Create a new page called newsletter_unsubscribe.php
Open the page
Click Window > Bindings to open the Bindings panel
Click the Add Binding ( ) button
Click URL Variable
Name the variable email and click enter
Click the Add Binding ( ) button
Click URL Variable
Name the variable unsubscribed and click enter
Save!

The URL variables will be used later to prepopulate the email address in a field we'll make, and to check if the unsubscribe form has been submitted or not.

Step 2: Set up Show If rule

Click WebAssist > SecurityAssist > Manage Site Access > Access Rules Manager%u2026
Click the Add Rule ( ) button
Name the Rule unsubscribed
Click the Add Condition ( ) button
Leave the type as Allow
Click the dynamic lightning bolt for the Value field
Expand the URL variable list
Click the unsubscribed URL variable
Click OK
Leave Criterial as =
Enter 1 in the Compare to field
Click OK to create the rule
Click OK to close the rule manager

This rule checks for the URL variable unsubscribed, and if it exists, and if it's also = 1, then it will trigger. The opposite of this is that when ?unsubscribed=1 isn't in the URL, it won't trigger.

Step 3: Create Unsubscribe form

Next up is creating a simple unsubscribe form and showing it when an email hasn't been removed yet.

Click WebAssist > Forms > Insert New Form
Leave the form type as New from Blank
Click the edit button
Change the Submit value to Unsubscribe
Click the Add Fieldset ( ) button
Click on the newly create Fieldset: 1
Change the Label to Unsubscribe from our newsletter
Click on Group: 1
Change the Category to Form elements
Change the Type to Text: Medium
Change the header to Email Address
Click Finish to finish the form editing
Click Finish to close the Save dialog
Click Finish one last time to add the form to the page
Click on the text field in the form
In the Properties Inspector, click the dynamic lightning bolt next to the Init value field
Expand the URL variables
Click the email variable
Click OK to insert it as the default value
This way, if there is an "?email=emailaddress" in the URL, the field will automatically populate to that email address
Highlight the entirety of the <div> created around the form
Click Window > Server Behaviors to open the Server Behaviors panel
Click the Add Server Behavior ( ) button
Click WebAssist > SecurityAssist > Show Region
Select Not unsubscribed as the rule
Click OK to apply the server behavior
Save EVERYTHING!

Now this form will show whenever the unsubscribed URL variable is absent from the URL (when it's not equal to 1 to be more precise). This will show the form as long as the dropping of the email address from the database hasn't gone through

Step 4: Delete entered email

Now we need to add a nice little server behavior that will take the entered email address, and remove it from the database.

Click Window > Server Behaviors to open the Server Behaviors panel
Click the Add Server Behavior ( ) button
Click WebAssist > Data Assist > Delete > Single Record Delete
Make sure the Connection and Table are set to the correct values
Set the Key column as the emailaddress column
Click the dynamic lightning bolt for the Value field
Expand the form
In this case it is Default_NewFromBlank_Default, but this can differ depending on the form
Click the Unsubscribe_from_our_newsletter_Email_Address_Text variable
Click OK to insert it as the Value
Click the Browse button for the Go to field
Select the current page, which in our case is newsletter_unsubscribe.php
Click the Parameters button next to URL
If there isn't a parameter, add one
Enter unsubscribed as the Name
Enter 1 as the value
Click OK to add the parameter
Click Choose to add the Go to page
Click OK to add the Delete Record server behavior
Save the page!

Step 5: Create Success message

Now we're going to create a success message, and hide it until the email has successfully been unsubscribed.

In the body of the page, enter the text; Your email has successfully been removed
Highlight the text
Click Window > Server Behaviors to open the Server Behaviors panel
Click the Add Server Behavior ( ) button
Click WebAssist > SecurityAssist > Show Region
Select unsubscribed as the rule
Click OK to apply the server behavior
SAVE IT ALL!!
Now the success message will only show when the URL variable "unsubscribed" has a value of 1.

What to do next...

You did beautifully, and I'm so darn proud of you. I feel like a parent.

The next step is using this database of emails for good; not evil. Send awesome newsletters, and when you send out your newsletter, you can send a link that goes to your unsubscribe page with the ?email= parameter and the email address the newsletter is being sent to as the value. This will let them click a fancy unsubscribe link and their email address will be populated in the field to unsubscribe.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

6 ratings | Sign in to rate this tutorial

mmichals347710: 10 Years, 7 Months, 3 Weeks, 3 Days, 41 Minutes ago

How do you make this all work with power messenger?

Team WebAssist: 10 Years, 7 Months, 3 Weeks, 2 Days, 23 Hours, 45 Minutes ago

PowerMessenger is a full email marketing solution with a pre-built form already included for users to subscribe to your emails. It includes the database and all the admin tools to manage your subscribers and design / send emails to them. With PowerMessenger, you would not need this tutorial.

mmnpinto361034: 10 Years, 1 Month, 1 Week, 5 Days, 16 Hours, 54 Minutes ago

On Step 4: Delete entered email i can't see the parameters button. I can't see and i'm not able to insert one. I've got the dreameaver CC 2014.1. Everything is ok until this step. Any help please

Team WebAssist: 10 Years, 1 Month, 1 Week, 5 Days, 14 Hours, 11 Minutes ago

mmnpinto361034, I added a screenshot on that step. The parameters button should be next to the URL field. If you don't see that, please get assistance via technical support. (Click on help in the main website menu.) We'll be able to go back and forth with you much more quickly there.

Jeff Napadow: 10 Years, 2 Weeks, 1 Day, 19 Hours, 13 Minutes ago

In Dreamweaver CC there isn't a "Parameters" button to add a value to the delete record portion of the tutorial.

Team WebAssist: 10 Years, 1 Week, 2 Days, 17 Hours, 46 Minutes ago

Jeff Napadow, Adobe removed the parameters button on Windows. :(
Add the parameter manually to the end of the delete page name by changing:
delete.php
Or whatever the delete page name is to:
delete.php?unsubscribed=1

Add a subscribe / unsubscribe feature