MySQL Journal

The recordset is displayed in the Bindings tab. It contains fields from both tables. After having retrieved all necessary information from the database, it is time to put it to use and display it in the page.

Displaying Profile Photos
Here is how you want to display the user information: user name followed by a thumbnail of the user's photo. Place your cursor in the left <div> container and remove the placeholder text User information. Drag the name_usr field from the Bindings tab and drop it where the deleted text was.

Now make some room for the image. Place the cursor after the dynamic text you've entered and press Shift+Enter. This inserts a line break after the user name. To display a thumbnail of the user's photo, you will use an ImpAKT server behavior called Show Thumbnail. This server behavior generates thumbnails of the selected images from your server. Select the Server Behaviors tab > Plus (+) > MX Kollection > File Upload, and then select Show Thumbnail.

Configure the user interface as follows:

• In the File folder text box, enter the path to where the user photos are stored. Click Browse and select the Profiles folder.
• Note: Make sure your database is populated with the sample data from the mm_forum.sql script and that the Profiles folder is inside your site root and contains the sample images that come with this tutorial.
• In the Recordset pop-up menu, select the rsMessages recordset you created earlier.
• In the Field pop-up menu, select the photo_usr recordset field that stores the photo names.
• In the Resize method pop-up menu, select Proportional - Fit to box. This way, the aspect ratio of the photos is preserved, while guaranteeing that images fit the specified space.
• For the box size, enter 80 for the Width and 80 for the Height, (these dimensions are specified in pixels).
• Click OK to apply the server behavior. An image placeholder is displayed in the Design view. You cannot see the actual photos, however, because they are retrieved dynamically from the database.

  Note: After you apply any of the ImpAKT server behaviors or wizards, a new folder will be created in your site root, called includes. This folder stores the files required for the server behaviors and wizards to work. You must upload the entire folder to your remote or testing server before previewing any pages in the browser.

Next, display the actual message information:

• Select and delete the message subject placeholder text. Drag and drop the subject_msg field from the Bindings tab in its place.
• Repeat the same procedure to replace the message body text with the content_msg recordset field.
• The last row displays the date and time when the message was posted to the forum. Remove the existing text and type Posted on (make sure to leave a trailing space so that the date will not appear right next to the text). From the Bindings tab, drag and drop the date_msg field after the entered text.
• At this point, all the necessary information is displayed on the page, but for one message only. To display all records, you must use a Repeated Region server behavior, just as you did for the topics list. From the tag selector, click the <div.content> tag to select it.
• Doing this selects the content within the white <div> tag.
• Go to the Application tab of the Insert bar and click the Repeated Region icon. Configure the dialog box that opens to use the rsMessages recordset and to show all records.

To test the page, save it and upload it to the testing server. Do not forget to upload the includes folder as well. Load the forum home page in the browser and click a topic title. If you use the sample data from the SQL script that came with this tutorial, select the topic called "Investment Opportunities" - this is the only topic that contains some sample messages.

In the next section, you will learn how to show or hide content using conditional regions.

Controlling Output with Conditional Regions
What happens if you click a topic that contains no messages?

To avoid having users see this type of page, you can use conditional regions to control what content is displayed and when. Dreamweaver 8 comes with a predefined set of conditional regions that help you hide or display content only when a condition is met - if a recordset is empty, if it is the first record in the recordset, and so on. In addition to this set, ImpAKT offers a set of conditional regions - if a user is logged in, if a file exists or a field has changed.

The message list elements must be displayed only when messages exist for the selected topic. To enforce this behavior, you will use the Show If Recordset Is Not Empty server behavior:

• Select the <div.content> tag from the tag selector.
• Apply the Show If Recordset Is Not Empty server behavior from the Server Behaviors tab > Plus (+) > Show Region.
• In the Show If Recordset Is Not Empty dialog box, configure the user interface to use the rsMessages recordset.
• Click OK to apply the server behavior. A gray border labeled "Show If..." appears around the message details.
• Now if a topic without messages is selected, the page will no longer look broken.
• Add a message that tells users the topic is empty. To do that, place the cursor inside the content <div> tag, on the very last blank space. Press Shift+Enter to create a new line and type the following text: There are no messages in this topic yet.
• Select the text you just entered and apply the Show If Recordset Is Empty conditional region (from the Application tab in the Insert bar).
• In the displayed dialog box, select the rsMessages recordset, as you did for the previous conditional region.
• Click OK to apply the conditional region.
• Now if you access a topic that has no messages, the text you entered above is displayed.

Finally, think of the following situation: Not all users might want to include a photo next to their name. If you display the messages from the Investment Opportunities topic, you'll notice that Angel has not uploaded a profile photo.

In this case, a default image is displayed. To display no image at all, you have to apply another conditional region:

• In Design view, select the image placeholder.
• Select the Server Behaviors tab from the Application panel and click Plus (+) > MX Kollection > Conditional Regions > Show If File Exists. This will hide the default image ("Image not found") for users who haven't uploaded an avatar (see Image).
• Configure the conditional region dialog box as follows:

  Select the folder that stores profile photos: profiles/

• Select the recordset that displays the message information: rsMessages
• In the Field pop-up menu, select the field that stores the filename: photo_usr (see Image)
• Click OK when done.
• Save your page, upload it to the testing server, and preview it in the browser.

Congratulations! The pages for displaying forum topics and messages are now completed.

Where to Go from Here
In this tutorial, you have learned how to connect to a database, pull data from your tables, and style it with CSS using Dreamweaver 8 and ImpAKT.

In Part 2 you will learn how to use the ImpAKT wizards and server behaviors to implement a user authentication system, create forms to post new messages or reply to existing ones, and notify subscribers of replies by e-mail.

Setting Up User Authentication
In the following sections of this tutorial, you will use ImpAKT to build a user authentication system for your forum. You need authentication to prevent pranksters from posting a load of garbage to your forum and getting away with it. If users want to post messages to the forum, they must register an account, activate it, and then log in. Only then will they be able to post messages to the forum.

To build the user authentication system, you will do the following:

• Configure user login settings from the InterAKT Control Panel.
• Create a user registration page.
• Create the user login page.
• Create a logout link.
• Use conditional regions to control which content is public and which is private.

Configuring Login Settings
The InterAKT Control Panel comes with your ImpAKT installation and is a central place for all configuration options for your site. The InterAKT Control Panel can be accessed from the MX Kollection tab of the Insert bar.

Alternatively, you can access the InterAKT Control Panel by clicking the Server Behaviors tab > MX Kollection submenu.

The InterAKT Control Panel offers a quick and convenient way to configure the most common settings for your development environment and for your site. Once configured, the settings will be remembered, thus saving you a lot of time.

Here are just a few of the settings you can configure with the InterAKT Control Panel:

• Date formats: Change the date and time formats for the pages built with ImpAKT to match your specific regional settings (American, German, and so on).
• Language settings: Change the language for form buttons, error messages, labels, and hints generated by ImpAKT. You can choose one of the predefined 11 languages.
• Debugging mode: Configure the level of detail of error messages or set the error reporting method (errors can be sent by e-mail to the webmaster or logged to a file on the server).
• Login settings: Configure the user authentication options.
• E-mail settings: Configure the outgoing e-mail server, port, user name, and password.
• CSS skins: Change the look of the entire site by selecting a different CSS skin.
• User interface persistence and database caching: Enable these settings to speed up your work. If user interface persistence is enabled, all ImpAKT interfaces will remember the settings you entered the last time.

All ImpAKT interfaces feature contextual help - short instructions that guide you through configuring each setting.

In addition to these settings, you can also configure an image processing library, perform product upgrades, or update your site.

The Login Settings section is the place where you configure all user authentication options, including database information, password encryption, user levels, and redirect pages. Follow these steps to configure the login settings:

• In the InterAKT Control Panel, click the Login Settings icon. This opens a dialog box showing four tabs: Options, Database, Session, and User Levels.
• Configure the Options tab:
  For increased security, passwords will be encrypted in the database
  For this example, the forum will not use access levels, so set the restriction to use user name and password only
• Leave the Auto Login Validity value at its default setting. Users will be able to automatically log in to the forum. They will be asked to authenticate again only if 30 days have passed since the last time they visited the forum.
• In the Database tab, define which table stores the user information and what columns to use for authentication:

Related Stories

• Hadoop + esProc Help You Replace IOE

Related Links

• Image 1
• Image 2
• Image 3
• Image 4
• Image 5
• Image 6
• Image 7
• Image 8
• Image 9