11 million installations can't be wrong

MySQL Journal

Subscribe to MySQL Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get MySQL Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


MySQL Journal Authors: Greg Schulz, Cloud Best Practices Network, Jayaram Krishnaswamy, Elizabeth White, Jnan Dash

Related Topics: Apache Web Server Journal, MySQL Journal

Apache Web Server: Article

Building a Forum with Macromedia Dreamweaver From Adobe

A forum can really help you build up a community around your website

Select the database connection (connForum) and the table that stores user information (user_usr). The primary key is automatically detected and set to id_usr.

From the Username pop-up menu, select the name_usr column.

From the Password pop-up menu, select the password_usr column.

From the E-mail pop-up menu, select the email_usr column.

From the Active pop-up menu, select the active_usr column. If you specify a column that stores the account status (active/inactive), account activation will be available. When a user registers an account, an e-mail message will be sent containing an activation link. Unless the user clicks that link, the account cannot be used.

In the Random key pop-up menu, select the randomkey_usr column.

A random key consists of a randomly generated set of alphanumeric characters used for improving website security. A random key is commonly used in user account activation, online purchases, or other activities that use URLs that ought to be difficult to guess. This prevents potentially malevolent users from accessing the URLs by directly entering them in the browser window in order to activate accounts for other users. ImpAKT automatically generates unique random keys for each user and stores them in the specified column.

  • In the Session tab, you can define which session variables to create upon login and what information to store in them. By default, two variables will be created: kt_login_id (stores the user's unique ID) and kt_login_user (stores the user name). You don't need additional session variables for this tutorial, so leave this tab as is.
  • Because the forum does not use access levels, you need to define on the User Levels tab only those pages to redirect the user to. You have to set the login page and the pages to be redirected to when authentication succeeds or fails. Use the login.php page from the site root for the Login Page and Default Redirect on Fail text boxes. When the login is successful, the user must be redirected to the forum home page.
  • Click OK to apply the changes and then click Close to exit the InterAKT Control Panel.
Because sending e-mail notifications for account activation is part of the user registration process, you will also need to configure the e-mail settings as explained in the following section.

Configuring E-mail Settings
Forum users will receive several automatic e-mail messages:

  • Account activation e-mail
  • Welcome message after activation
  • Password reminder e-mail
  • Topic reply notifications
This is why you need to set an outgoing e-mail server. You can configure e-mail settings from the InterAKT Control Panel by clicking the E-mail Settings section.

In the dialog box that opens, you can configure the following:

  • Outgoing server's name or IP address; if you are not sure about this, consult your network administrator
  • Port number (25 by default)
  • Username and password used to log in to the mail server (if required)
  • Default sender's e-mail address; this will appear in the From field in all message headers sent from the forum
Click OK to save the configuration, then click Close to exit the control panel. You have finished configuring user authentication for your site.

In the next section, you will build the user registration form.

Building the User Registration Page
To post messages, a user must have an active account. In this section, you will build the page that enables users to register to the forum by filling in a user name, password, and valid e-mail address, and by uploading a profile photo - all without writing a single line of code.

The page you will work on is register.php. The page layout is already created and is similar to the other forum pages.

You will build the registration form with the User Registration Wizard and then add a file upload feature with the Upload and Resize Image server behavior from ImpAKT.

Using the User Registration Wizard
To build the registration form, follow these steps:

  • Delete the placeholder text ("Register form here") from the main <div> tag.
  • Go to the MX Kollection tab of the Insert bar and click the User Registration Wizard icon to open the wizard.
  • Step 1 of the wizard displays the connection and table settings you made in the InterAKT Control Panel.
  • Click Next to proceed to Step 2, where you can define the form fields to display. The Form fields grid displays all the table columns that can be displayed as form elements. You can add or remove fields from the grid by clicking the Plus (+) and Minus (­) buttons on top of the grid.
  • Remove the active_usr and randomkey_usr fields from the grid. Select each of them and click the Minus (­) button.

    Now do the following:

  • The name_usr field is already configured. It will be displayed as a text box labeled "Name".
  • Select the email_usr field, and change its label from Email to E-mail.
  • From the Display As pop-up menu, select the photo_usr field and change it to a File Field control to allow users to upload their avatar image.
  • The password_usr field is already configured to be displayed as a password field, so you can move on to the next step of the wizard by clicking Next.
  • In Step 3, you will define the validation rules for each form field. Because you configured the login settings in the InterAKT Control Panel, the validation rules for the user name, e-mail, and password fields are already in place. All three fields are required. The validity of the e-mail address is verified (which means users can't type bogus text that is not an e-mail address). You do not need to change any settings in this step.
  • In Step 4, you can define extra features for the registration:

    To send a welcome message to a new user, check the Send Welcome E-mail option.

    To enable account activation, check the Use Account Activation option. The wizard will handle all the necessary details such as generating random keys, creating the activation page, and sending the activation e-mail message.

  • Click Finish to complete the wizard and apply the changes.
The wizard generates the registration form with two password fields, creates the activate.php page that handles account activations, and adds the server behaviors that verify whether the user name is unique, the e-mail address is valid, and the two passwords match.

Save your page and upload all files to your testing server. If you preview the page in a browser.

Notice that required fields are marked with an asterisk (*) and the E-mail field has a hint indicating the correct format. Put your form to the test to see how it works. Try to register an account using an incorrect e-mail address. An error message will be displayed next to the e-mail field, but the data you entered is not lost.

You can also test the form to see what happens if you type two different passwords or if you try to register an account using a user name that already exists in the database.

Adding a File Upload Feature
Although you can choose a file in the Photo field, the image is not uploaded to the server. To build a functional file upload, you will use the Upload and Resize Image server behavior:

  • Open the register.php page in Dreamweaver, go to Server Behaviors tab, and select Plus (+) > MX Kollection > File Upload > Upload and Resize Image.
  • In the Basic tab, define where to get the images from and what to do with them:
  • From the Form Field pop-up menu, select the form control for uploading files. You can only select form1.photo_usr because this is the only file field on your page.
  • From the Table Column pop-up menu, select the column that will store the filename: photo_usr
  • From the Upload Folder pop-up menu, enter the path where the uploaded images will be saved. Click Browse and select the profiles folder.
  • In order to save space on your server, resize the photos while keeping their aspect ratios. Choose Proportional ­ Fit to Box and make them 80 pixels wide by 80 pixels high..
  • In the File tab, you can specify various security settings: the maximum file size allowed and the list of permitted file extensions. Use the default values for these options. You can also specify the preferred overwriting conflict resolution. Leave the default Automatic Renaming method. (If a user uploads a file having the same name as another photo on the server, say angel.gif, it will be automatically renamed to angel_1.gif.)
You don't need to configure anything in the Advanced tab (this is where you can register the file upload action to more transactions and assign it a priority). Click OK to apply the changes.

The image upload feature now works. Try registering a new account and uploading a photo. The photo is displayed when the user posts a message. After registration, you will also receive two e-mail messages - one asking to activate your account and a welcome message.

You can edit the contents of the two e-mail messages by editing the corresponding HTML files located in the includes\mailtemplates\ folder.

In the next section, you will create the login form.

Building the Login Page
The layout of the login page is already created. You only have to apply the Login Form Wizard:

  • Open the login.php page in Dreamweaver.
  • Select and remove the placeholder text ("Login form here").
  • Go to the MX Kollection tab of the Insert bar and click the Login Form Wizard icon.
  • This wizard consists of two steps. The first one is purely informative, displaying the settings you made in the Control Panel. Click Next to continue.
  • In Step 2 configure specific login options:
  • To enable users to remain logged in, select the Create "Remember Me" Checkbox option.
  • To build a page that automatically generates a new password for a user and sends it by e-mail, select the Create "Forgot Password" Page option.
  • Click Finish to complete the wizard and apply the changes.
The wizard automatically generates the application logic to verify whether the user and the password are correct and whether the account is active. It also generates the forgot_password.php file and a link to it in the login form.

Save the page and upload it to the server. Make sure you also upload the forgot_password.php file. You can test the login form in your browser to see how it works. If you log in as an inactive user (user name: Angel, password: root), you will receive a warning message.

In the next section, you will create a logout link that safely destroys all session variables.

Creating the Logout Link
Although an automatic logout takes place when the session expires or the browser window is closed, you must add an explicit logout link which enables users to clear the session information safely. You must add this link to the following forum pages:

  • reply_message.php
  • view_message.php
  • post_message.php
  • index.php

    The following steps explain how to create the link on the forum home page. You will need to repeat the steps for the other pages as well:

  • Open index.php in the Code view.
  • Place the cursor after the Login link in the top-right <div> container (the one with the white links inside).
  • Apply the Logout User server behavior from the Server Behaviors tab by selecting Plus (+) > MX Kollection > User Login.
  • Configure the dialog box:

    - Select the first option button; the the logout operation will be triggered by a link. From the pop-up menu, select Create New Link: "Logout".

    - After users log out, they will be redirected to the forum home page. Click the Browse button and select the index.php page.

  • Click OK to apply the server behavior.
Notice that the Logout link is created.

Repeat these steps for the reply_message.php, view_message.php, and post_message.php pages.

Not all links must be visible all the time. Logged-in users have no need to see the Login and Register links, just as the Logout link means nothing for the user who hasn't logged in or doesn't have an account. In the next section, you will use conditional regions to control which links are displayed and when.

Hiding Content with Conditional Regions
To control what links are displayed when users are logged in and what to display when they are not, you will use a conditional region added by ImpAKT: Show If User Is Logged In. You can access it from the Server Behaviors tab by selecting Plus (+) > MX Kollection > Conditional Regions.

Follow these steps to display the logout link for logged-in users and the others for the rest:

  • Open the index.php page.
  • Select the Logout link in the top-right corner.
  • Apply the Show If User Is Logged In server behavior.
    For the restriction type, select the Username and Password option. Check the Has ELSE option. Text in the ELSE region will be displayed if the condition is not met (the user is not logged in).
  • Click OK to apply the server behavior. In Dreamweaver, a gray border appears around the Logout link, along with some placeholder text (Else text: Replace this).
  • Select the Register | Login text and cut it from the page.
  • Select the placeholder text (Else text: Replace this) and remove it. Then paste the Register and Login links from the Clipboard.
  • Save the page and preview it in a browser. Because you are not logged in.
Try to log in using one of the sample user accounts. Notice that only the Logout link is visible. Repeat the previous steps for the view_message.php, post_message.php, and reply_message.php pages.

That's it! You have successfully built a user authentication system for your forum.

The next part of this article can be found at www.macromedia.com/devnet.

More Stories By Marius Zaharia

Marius Zaharia is the documentation manager at InterAKT Online, a developer of professional tools for dynamic web development. When he's not writing articles and tutorials to guide web developers, he enjoys learning new things and exploring new technologies. His interests range from web development to politics and avantgarde electronic music.

More Stories By Cristian Ivascu

Cristian Ivascu is a technical writer with InterAKT Online. He is a strong supporter of open-source software and a fan of Japanese culture and rock music.

Comments (2)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.