back

Business Catalyst: Create password-protected pages with Dreamweaver

by Dani Beaumont

The Business Catalyst Platform is a hosted solution that enables you to create data-driven websites packed with features to deliver a successful online business. In this article, you'll learn how to configure a password-protected Members Only area. These secure site areas can be used for many purposes, such as providing user account management and order history, a secure location for sensitive client documents, or as a portal that displays premium content to paid subscribers. In this example, you'll build a fictitious site called Stitch Wizards that provides members with a secure area to share their project ideas (see Figure 1).

Home page of the Stitch Wizards online business.

Figure 1. Home page of the Stitch Wizards online business.

Requirements

Begin by installing the necessary software and registering your free Partner account:

  1. Install Dreamweaver CS5 (or Dreamweaver CS4).
  2. Download and install the Business Catalyst Extension for Dreamweaver.
  3. Download the sample files folder (ZIP, 123KB) and save it to your hard drive.
  4. Sign up for a free Partner account and trial site; choose the Full Solution with the Start from scratch option, as shown in Figure 2.
Select the Full Solution and Start from scratch options when registering your trial site.

Figure 2. Select the Full Solution and Start from scratch options when registering your trial site.

Setup

To follow along with these instructions, complete these initial tasks:

  1. Launch Dreamweaver (CS4 or CS5).
  2. Log in to your trial site with the Business Catalyst panel (Window > Business Catalyst).
  3. Define a site using the Quick Site Setup wizard; set the sample files folder provided above as the local root folder of your site.
  4. Use the Quick Site Setup wizard to download all of the site files locally.

Preparation for building site

To get started, access your remote site with Dreamweaver and the Admin Console.

  1. In Dreamweaver, review the existing site files listed in the Files panel (see Figure 3).
    The local root folder includes a CSS style sheet and a DWT template to define the site's design.

    Figure 3. The local root folder includes a CSS style sheet and a DWT template to define the site's design.

  2. Use a browser to log into the Admin Console for your site:
    mysite.businesscatalyst.com/admin

    Replace mysite in the address above with the name of your trial site. Choose Home > My Details to manage your account settings, including the delivery of weekly report notifications (which are enabled by default).

    These are the two development environments you'll use to build and populate the site.

  3. Open another browser window and visit the home page of your trial site:
    mysite.businesscatalyst.com

Replace mysite in the address above with the name of your trial site. The Coming Soon placeholder message is displayed. In the next section, you'll update the home page and populate it with content.

Updating the home page

In Dreamweaver, double-click the index.htm file listed in the Files panel to open it. While viewing the source in Code view, select all and click delete to remove the existing code. Follow these steps to create the new page:

  1. Choose Modify > Templates > Apply Template to Page. In the Select Template dialog box that appears, choose the main template (main.dwt). Click Select.
  2. In Design View, highlight the generic Header text and type the following text over it:
    Welcome to Stitch Wizards
  3. Skip over the next two paragraphs, and then highlight the last placeholder line and type the following text over it:
    Log into the secure area to share project ideas:
  4. Press Enter (Windows) or Return (Mac) once to create another line.
  5. In the Business Catalyst panel, choose Secure Zone > Secure Zone Login Box. In the Module Configure wizard that appears, select the Generic Secure Zone Login Box option. Click Next. On the next screen, click Insert to add the login form to the page.
  6. Save the page and upload it to the remote site (Site > Put). In the dialog box that appears, click Yes to upload the dependent files.

Refresh the browser window displaying your trial site to see the updated home page. Next, you'll create two more pages to build out the rest of the site.

Creating a page to display secure content

Return to Dreamweaver. In this part, you'll create a new page that will be password-protected inside a secure zone. Follow these steps:

  1. Choose File > New. In the New Dialog box that appears, choose Page from Template. Choose the name of your trial site, then select main.dwt from the list of templates and click Create (see Figure 4).
    Create a new HTML page based on the site's template file.

    Figure 4. Create a new HTML page based on the site's template file.

  2. Choose File > Save. Save the file as secure.html at the root level of your site.
  3. In Design View, highlight the generic Header text and type the following text over it:
    Members Only Area: Share projects
  4. Skip over the next two paragraphs, and then highlight the last placeholder line and type the following text over it:
    This area contains password-protected content
  5. Save the page and upload it to the remote site (Site > Put). In the dialog box that appears, click No when asked whether to upload the dependent files.

Return to the browser window that displays your trial site. Click the Members Only navigation item to access it. For now, the page appears normally. Later, you'll set up a secure zone and add this page, so that it requires a password to access.

Creating the registration form page

There's just one more page to create: the registration page with a form to register new members. This will enable visitors to sign up online and gain access to the Members Only area.

This page requires a three-step process. First, you'll create the page that will display the registration form to access the Members Only area. Later, you'll use the Admin Console to build the registration form that will be inserted. And finally, you'll insert the registration form on the page. Create the registration form page by following these steps:

  1. Choose File > New. In the New Dialog box that appears, choose New Page from Template. Choose the name of your trial site, and then select main.dwt from the list of templates. Click OK.
  2. Choose File > Save. Save the file as register.html at the root level of your site.
  3. In Design View, highlight the generic Header text and type the following text over it:
    Register to become a member
  4. Skip over the next two paragraphs, then highlight the last placeholder line and type the following text over it:
    Sign up to access the Members Only area
  5. Press Enter (Windows) or Return (Mac) once to create a new line. This is the location where you'll insert the registration form later.
  6. Save the page and upload it to the remote site (Site > Put). In the dialog box that appears, click No when asked about uploading the dependent files.

Return to the browser window that displays your trial site. Click the Register navigation item. The page appears, but you haven't added the registration form yet. In the next section, you'll create the secure zone and the registration form for this page using the Admin Console, the Business Catalyst online interface.

Configuring functionality with the Admin Console

Business Catalyst makes it easy to maintain multiple sites simultaneously because you use the same user name (your e-mail address) and password to access all your sites in Dreamweaver and the Admin Console. Follow these steps to set up a secure zone:

  1. Access the browser window that displays your trial site's Admin Console. If necessary, log back in using the same e-mail address and password you used to register the trial site.
  2. Choose Website > Secure Zones. In the sidebar, click Create a new Secure Zone.
  3. Enter the name of the secure zone: Stitch Wizards. Click Next.
  4. Select the page named secure in the left pane and click the top arrow button pointing to the right to move it to the right pane. This operation sets secure.html inside the secure zone and makes it password-protected (see Figure 5).
    Select the secure page and move it to the right pane.

    Figure 5. Select the secure page and move it to the right pane.

Return to the browser window displaying your trial site. Click the Members Only navigation item and notice that the page now requires a password to log in.

You've successfully created the secure area, but how will users gain access to the secure zone content? In the next section, you'll build a registration form so that they can sign up as a member and access the Members Only area. The Webform Builder is an Ajax-based form generator that makes it easy to create forms dynamically. You can use this interface to add the remaining fields; you can also drag and drop the form elements to reposition them, as desired.

  1. Return to the browser window that displays the Admin Console for your site. Choose Modules > Web Forms to see the list of web forms. Click the button to try the Webform Builder.
  2. Enter the name for the form: Register for Members Only area (see Figure 6).
    Type the name of the form in the provided field.

    Figure 6. Type the name of the form in the provided field.

  3. Set the Secure Zone menu to Stitch Wizards. Leave all other default settings, and click Save to create the form. The first few contact fields are added by default and the interactive form preview is displayed to the right.
  4. In the Contacts tab, click Username to add a User Name field.
  5. Also in the Contacts tab, click Password to add a password field.
  6. Click the eCommerce tab to see the available payment field options. Although adding online payment functionality is outside of the scope of this article, notice that you could set up the form to gather credit card information and process payment transactions online to charge for site services (including paid access to secure zones). This option is presented in the Admin Console when you set up the secure zone.
  7. In the Miscellaneous tab, click Image Verification to add CAPTCHA functionality to the form. This feature generates an image with a random set of characters that visitors enter in the provided field to prevent spam bots from submitting the form.
  8. The form is now complete and there's no need to save it (see Figure 7).
    The form elements are displayed in the preview area.

    Figure 7. The form elements are displayed in the preview area.

Click and drag the fields to see how they can be rearranged in the form's preview area. Take a few moments to interact with the form. If desired, try adding additional fields to experiment with the Webform Builder and see the options.

Notice that the right sidebar includes related actions. You could click Get Web Form HTML Code to access the form's source code, to copy or customize it. You could also use the interface to add the registration form to a web page. Many of these features are available in both the Admin Console and in Dreamweaver, using the Business Catalyst panel. In the next section, you'll return to Dreamweaver to insert the registration form.

Adding the registration form to the page

At this point, all of the site's pages are live and the secure zone has been configured to set secure.html as a password-protected page. The Members Only registration form is ready to go; the only remaining task is to insert it on the page. Follow these steps:

  1. In Dreamweaver, double-click to open the register.html page (if it is not already open).
  2. Place your cursor in the line below the text Sign up to access the Members Only area. If necessary, you can press the down Arrow key to position the cursor in the right location.
  3. In the Business Catalyst panel, choose WebForms > Web Forms. The Module Configure wizard appears. Select the radio button next to the form named Register for Members Only area and click Next. In the screen that appears, click Next again.
  4. In the last screen of the wizard, click Insert. The form is inserted on the registration page.
  5. Save the page and upload it to the remote site (Site > Put). In the dialog box that appears, click No when asked about uploading the dependent files.

The Stitch Wizard site is complete. In the next section, you'll interact with the site as a visitor to test the registration process and access the Members Only area. You'll also log into the Admin Console as the site owner to see how the site's activity is recorded in the backend database.

Registering to gain access to a secure zone

In this part, you'll visit the site in a browser to see how it works with the functionality you just set up. Register as a member to gain access the Members Only area by following these steps:

  1. Return to the browser window that displays your trial site. Click Register to visit the registration page with the sign up form.
  2. The register.html page appears. Enter data into the form fields, using a valid e-mail address. (Your e-mail will not be distributed or used for any purpose other than testing your trial site's features). Click Submit to submit the form.
  3. Check your e-mail to receive the auto-reply generated by the form that confirms your registration. These features are included right out of the box, but you can completely customize (or disable) the messages the system generates.
  4. Although outside the scope of this project, you can choose Admin > Customize system emails in the Admin Console and click the Secure Zone Login Details link to update the contents of the e-mail message that is sent to new members.
  5. Click the link in the e-mail message or return to the browser to visit your trial site. Now that you've registered as a member, you just need to log in. On the home page, enter the user name and password that you created in the registration form to log into the secure area. Click Log in.
  6. Click the Members Only navigation item and notice that the Members Only area content is now displayed. You've successfully accessed the secure content as a new member (Figure 8).
    The Members Only area is displayed.

    Figure 8. The Members Only area is displayed.

Using this registration form to subscribe users to secure zones, you can automate a site and enable new members to sign up online. However, the Admin Console also provides the ability for site owners and administrators to sign up new members. For example, your clients could gather e-mail addresses at a trade event, and then sign up interested customers behind the scenes, so that they can skip the online registration process. Even better, you can create custom e-mail campaigns to target existing customers that include links to access secure zones with discounted products and special promotions. And as you'll see in the next section, all of the customer's activity (from the links clicked in the e-mail campaign, data entered in form submissions and other site interactions) is tracked and can be leveraged to support your client's business model.

Signing up members with the Admin Console

In this section you'll look under the hood at your trial site's statistics to see how visitors interact with the online features. Although this is a simple example using a sample project, you can imagine how a business could use the data gathered from customer interactions to evaluate how the site is performing, communicate with visitors and follow up on sales opportunities.

In a browser window, access the site's Admin Console by adding /admin to the end of the trial site's URL in the address field. Log in using your Business Catalyst user name (e-mail address) and password, if you are not already logged in.

The Dashboard on the home page displays a Live Feed with all of the recent activity. Scroll down to see the list of form submissions to register and log into secure and non-secure areas of the site (see Figure 9).

The recent site activity is displayed in the Live Feed.

Figure 9. The recent site activity is displayed in the Live Feed.

The Live Feed items are links. You can click these links to jump directly to the contact record for the corresponding visitor. Use the Customer Summary area to keep notes, manage customer service cases, and subscribe visitors to e-mail campaigns and secure zones. In this case, the user has already registered as a member and can access the secure zone using the authentication details that they submitted. However, as an administrator, you can also sign up brand new users as members to encourage them to visit the site. Follow these steps:

  1. In the Admin Console, choose Customers > Customers.
  2. In the right sidebar, click the option to Create a new contact.
  3. The Contact Details page appears. Enter placeholder data in the form fields. You don't need to fill out all of the fields, but be sure to enter a valid e-mail address, last name, first name, user name and password. Click Save.
  4. In the right sidebar, click Manage customer subscriptions.
  5. In the page that appears, click the Edit button below the header: Secure Zone Subscriptions.
  6. Select the check box next to Stitch Wizards. By default, the subscription is set indefinitely (until January 9999) but you can constrain the access by setting an earlier expiration date with the calendar widget (see Figure 10).
    Enable access to an existing secure zone.

    Figure 10. Enable access to an existing secure zone.

  7. Click Save and Finish to save your changes. The confirmation message indicates that the item has been updated successfully.

As you can see from this sample project, the Business Catalyst Platform provides complex functionality that you can integrate with a few mouse clicks — in the online interface and the Dreamweaver authoring environment. These interactive features encourage traffic and increase revenue for online businesses. You can set up payment gateways and charge visitors to access secure zones (on a flat fee or monthly basis). Or set up a 30-day trial membership to promote the content of a paid area. You can gather visitor's contact information with web forms and offer targeted discounts via e-mail, based on their preferences. Or publish premium content via e-mail newsletters and charge a fee for subscriptions.

And of course, you can set up an online store to sell products and configure forms to capture the specific data that matters to your client's business. You can even provide a 24/7 contact form that sends the crew a text message when a customer requests emergency services. Everything you build is completely customizable and hosted, making it easy for you to add new features to online businesses as they grow over time.

‹ Back


Dani Beaumont has been managing innovative applications in the web and print production space for over 20 years. She is currently working as a Group Product Manager integrating Adobe Business Catalyst into the broader Adobe web solutions portfolio.