Setting up the login page

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).

Figure 3. The login page

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.

1. Choose File > Open. Navigate to the folder with the uncompressed sample files and select login.php. Click OK.

2. From the Server Behaviors panel, click Add (+) and choose User Authentication > Log In User.

   In the sample file, the two fields are named appropriately: Email and Password. The Password field, additionally, is set to mask the entered values.

3. When the Log In User dialog box opens (see Figure 4), leave the selected form in place and make sure the Username field is set to email and the Password field to password.

   • In the Validate using connection list, choose connSubMultiple.
   • From the Table list, choose subs.
   • From the Username column list, choose SubEmail and from Password column list, SubPassword.
   • In the If login succeeds, go to field, enter manage_subs.php.
   • In the If login fails, go to field, enter login.php?failed=true.

   • Set the Restrict access based on option to Username and password and click OK.

     

     Figure 4. The Log In User server behavior

4. Choose File > Save to store your changes.

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.

Add code for an error message

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.

1. Place your cursor anywhere in the form and, from the Tag Selector, choose <form>.

   Although you could put the error message anywhere on the page, placing it below the form works well.

2. Press the right arrow key once.

   By selecting the form and then moving to one side of it, you're sure to insert your <p> tag in the right place.

3. Switch to Code view and insert the following:

   <?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.

4. Return to Design view and save your page.

Now for the main event: the subscription management page.

Page 3 of 6

Previous Page

Next Page