5 May 2008
You'll need to know how to set up a dynamic site in Dreamweaver and also have PHP and MySQL set up on your development system. You'll also need to understand how to restore a SQL file to a MySQL database. For information on how to set up PhP development environment, see Set up a PHP application server (Windows) and Set up a PHP application server (Macintosh).
As companies and organizations become increasingly web-savvy, they seek to strengthen their customer outreach efforts. This desire often manifests itself as e-mail–based newsletters. As noted in an earlier Adobe Developer Center article, Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3, you can create all the code you need in Dreamweaver and PHP to handle individual subscriptions. In this article, you'll learn how to extend those capabilities so your client's visitors can manage multiple newsletter subscriptions. As a bonus, I'll show you how to incorporate an error message into a standard Dreamweaver login page.
Before you begin building the application, take a moment to examine the database table you'll be using and also make sure the database connection is properly set up in Dreamweaver.
Note: It's a good idea to have your dynamic PHP site already set up at this point and have unpacked the sample files into the local root folder.
The database that accompanies this article, subscriptions_multiple, consists of a single table called subs. The subs table has six data columns: ID, SubEmail, SubPassword, Sub1, Sub2, and Sub3 (see Figure 1). The ID column is the primary key and, as such, uses an integer format that is automatically incremented. The SubEmail column has a text format and is intended to hold the subscribers' e-mail addresses; this field serves double duty as the user name. The remaining three columns—Sub1, Sub2, and Sub 3—are all Boolean fields, designed to note whether or not a user is currently subscribed to that particular newsletter; a 1 indicates subscribed whereas a 0 means unsubscribed.
The SQL file for the subscriptions-multiple database is included in the sample files download. You can recreate it on your test server through any number of utilities, including phpMyAdmin, MySQL Control Center, or MySQL Administrator.
After you've established your database, it's time to create a connection to it in Dreamweaver. To do so, follow these steps:
With your PHP dynamic site, MySQL database, and Dreamweaver connection all established, you're ready to build the first page of the application.
The login page is straightforward, but I've added a new twist to keep it interesting. The page consists of a form with two text fields: one for the user name and the other for password (see Figure 3).
Setting up the server-side code for this page is equally direct and requires a single server behavior. The interesting part is how failed log-ons are handled: rather than send the user to another page—from which he or she would have to click the Back button—you'll display the error message on the same page for a quicker and smoother response.
In the sample file, the two fields are named appropriately: Email and Password. The Password field, additionally, is set to mask the entered values.
When activated by clicking the Log In button, the Log In User server behavior verifies that the supplied e-mail address and password match values found in the subs table. If a match is found, the subscription management page, cleverly called manage_subs.php, is displayed; if not, the login page is reshown and the Email and Password fields are cleared. Although some folks might think this is enough of a hint to site visitors that they need to try again, it's better to be as clear as possible when it comes to error messages. In the next step, you'll insert an error message that displays on the login page.
The basic Dreamweaver server behaviors—such as insert, update, and delete—all depend on the form being submitted to the same page in which the server-side code is inserted. The Log In server behavior works the same way. You can use this knowledge to create a same-page error message.
Although you could put the error message anywhere on the page, placing it below the form works well.
By selecting the form and then moving to one side of it, you're sure to insert your
<p> tag in the right place.
<?php echo (isset($_GET['failed']))?'<p class="error">Log In failed - Please try again.</p>':''; ?>
This code is a ternary (or conditional) statement. Translated into English, it reads, "If there is a URL parameter called 'failed', insert the error message; otherwise, don't insert anything." You'll recall that in the Log In dialog box, you entered the current page with the URL parameter string
failed=true as the page to display should the log-on not be successful, like this:
login.php?failed=true. The CSS class
.error will display the message in a noticeable red.
Now for the main event: the subscription management page.
The subscription management page displays the current subscriptions for whoever has just logged in. To accomplish this you'll need to set up a recordset that is restricted (or filtered) to the logged-in user. Dreamweaver's Log In server behavior stores the value of the username column—in this example, the e-mail address—in the session variable
MM_Username. In the following steps, you'll filter the recordset by that same session variable.
After you have the recordset defined, you'll need to bind the dynamic date to the various form field elements; this will display the subscriptions currently stored in the database. Then, you'll bring the Update Record server behavior in Dreamweaver into play to store any changes to the subscriptions.
Dreamweaver makes it easy to filter data based on a session variable; there's no need to write any SQL code at all.
The manage_subs page (shown in Figure 5) consists of a simple form that focuses on the available subscriptions. There is room for the user's e-mail address at the top of the form, which will be displayed as dynamic text to confirm that the proper subscriptions are shown. Check boxes enable the visitor to quickly turn subscriptions on or off. There is also a hidden field, named ID, which will contain the ID of the selected record—a necessary step for the Update Record server behavior.
SubE-mail = Session Variable MM_Username
The Filter setting looks at the value stored in the
MM_Username session variable and matches it to the same value stored in the SubEmail database field to get a single record.
Now that the recordset is defined, set the dynamic values for the various form fields and areas. In this situation, you'll drag and drop two entries, one for the the Email field and another for the hidden ID field, and assign the other values for the check boxes through Dreamweaver dialog boxes.
If your Property inspector is open, when you bind the database field ID to the hidden element, you see the PHP code be inserted into the Value field (see Figure 7).
You'll recall that the Sub1 data field (as well as those for Sub2 and Sub3) were Booleans for which 0 meant not subscribed and 1 meant subscribed. In this step, you're setting up the check boxes to display the proper state: checked if the value is 1 (subscribed) and unchecked if the value is anything else (0, or unsubscribed).
The final major step of the manage_subs.php page is to insert the Update Record server behavior.
Dreamweaver automatically assigns each to the proper data column because of the identically named form fields.
The bulk of the work is now done; there's just a little finishing up to do.
When Dreamweaver logs in a user, it creates a session variable that makes it possible for anyone using the machine at the current time to access restricted pages. A logout page is important because it eliminates that session variable and thus prevents any unauthorized access. Dreamweaver makes this easy to accomplish.
Although this page has a Log Out title and a bit of confirming text, in reality it will never be seen by the user. The server behavior executes when the page loads and immediately redirects the user to another page.
Since the user has already clicked Log out once to get to this page, you'll want to grant his or her wish immediately.
The final task is to protect your various pages from unauthorized access.
Let's add a little protection to your completed pages. The standard Dreamweaver Log In server behavior includes an option to restrict access based on username and password. To activate that protection, you'll need to apply Dreamweaver's Restrict Access to Page server behavior to the desired pages, starting with reg.php.
Dreamweaver does offer a more expansive authentication protocol that also looks at the user's access level. For the purposes of this tutorial, the Username and password option is good enough.
With this page protected, you're ready to move on to the other pages in the application.
Good work! Your subscription management system is now complete. To test your application, open login.php on your testing server and log in with the e-mail email@example.com and password jaylow. On the subscription management page, modify the current settings and submit the change. The next time you log in, your changes will be on screen.
This article covers the development of a subscription management system. To make this usable from the administrative side, you'd need to create the ability to add and remove subscriptions to the subs table. Another enhancement would be to add e-mail confirmations to your changes; you can find detailed instructions to accomplish this in the companion Adobe Developer Connection article, Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3.
Tutorials and samples