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

The sample SQL script also contains some dummy data, which you will use when building the forum front end. Now you're ready to connect to your newly created database.

Connecting to the Database
To connect to the database in Dreamweaver, follow these steps:

  • Start Dreamweaver.
  • Open the index.php page from the forum site.
  • Choose Application panel > Databases tab, click Plus (+), and select MySQL Connection.
  • Configure your connection to your newly created database.
If you are not sure how to connect to the database server, ask your system administrator for the proper access information. Click the Select button to locate the forum database. You can test the connection using the Test button.

In the next section you will learn how to build the forum home page, which displays a list of topic titles and descriptions.

Displaying the Forum Topics
The forum home page displays all topic titles and descriptions. Beside these values, which are extracted from the database, you will have to display links to enable users to set up an account or log in.

All the information will be displayed in the index.php page. The page layout is already designed with CSS, and has areas (<div>containers) for displaying various information from the database.

To see the <div> containers better, activate the CSS Layout Backgrounds and CSS Layout Outlines options by choosing View > Visual Aids and then selecting the option in the submenu.

Notice that the <div> tags now appear more visible. The CSS Layout Backgrounds option adds a different color to every <div> tag to make them easier to distinguish from one another.

Turning on the CSS Layout Backgrounds option does not display the real color of the <div> containers but it can help you sort out which element belongs into which container.

Note: CSS stands for Cascading Style Sheets - a standard that enables you to separate content from presentation. You can create styles that define the font characteristics, colors, and even positioning of your content. You can then apply these styles to the desired elements. The CSS styles are already defined in the forum.css style sheet that comes with the tutorial sample files.

The topic is a link to the page displaying the corresponding messages. To create the topic list, you have to do the following:

  • Open the index.php page in Dreamweaver.
  • Create the recordset that retrieves topic information, the ID, title, and description.
  • Display the recordset contents on the page.
To create the recordset that retrieves the forum topics, follow these steps:
  • Click the Plus (+) button on the Bindings tab in the Application panel. From the pop-up menu select Recordset (Query).
Configure the recordset dialog box options:
  • For the recordset name enter rsTopics.
  • In the Connection pop-up menu, select connForum.
  • Select the topic_top table in the Table pop-up menu.
  • To sort the topics alphabetically, select the title_top column in the Sort pop-up menu; for the method (the next pop-up menu), select Ascending.
  • Click OK to close the dialog box and add the recordset The recordset appears in the Bindings tab.
  • After having created the recordset, you must use its fields to build the home page:
  • With the index.php page open, expand the rsTopics recordset in the Bindings tab.
  • Clear all content from the second <div> container (the white one).
  • Drag and drop the title_top field on the Bindings tab in the second <div> container.
  • Place the cursor after the added topic title and press Enter (Return) to create a new paragraph.
  • To distinguish the topic title from its description better, format it as Heading 3 by selecting the dynamic text and then choosing Heading 3 from the Format pop-up menu in the Property inspector.
  • The topic title must be linked to the messages page. This page displays all messages from the selected topic. The messages are filtered by the topic ID, which is passed from the home page as a URL parameter. With the topic title selected, click the Folder icon in the Property inspector to define the link.
  • In the dialog box that opens, select the view_message.php page, and then click the Parameters button to define the URL variable that will filter the messages:
  • In the Parameters dialog box, click the Plus (+) button to add a new URL parameter.
  • In the Name field enter id_top.
  • For the Value, click the Dynamic Data icon (the yellow lightning bolt), and then select the id_top field of the rsTopics recordset.
  • Click OK to define the parameter value.
  • Click OK twice to create the link.
  • Drag and drop the description_top recordset field in the Bindings tab in the paragraph below the link.
At this point, if you try to preview your page in the browser, you'll notice that only the first topic is displayed. You need to loop through all records in order to display all the topics:
  • Select the topic title and description and apply a Repeated Region server behavior. You can access it from the Application tab of the Insert bar.
  • Note: Make sure you select just the dynamic text, not the <div> container.
  • In the Repeat Region dialog box, configure the repeat region to use the rsTopics recordset and click All Records to display all records.
  • Click the OK button to close the dialog box and apply the server behavior. You'll notice that a gray border labeled Repeat is displayed around the topic information.
  • Save the page and upload it to the testing server. Press F12 (Windows) or Option+F12 (Macintosh) to load the page in your web browser.
  • www.macromedia.com/devnet/dreamweaver/ articles/forum_pt1/fig24_lg.html
In the next section, you'll change the way links look using CSS styles.

In this section you will use the unified CSS panel in Dreamweaver 8 to style the links in your forum. (Julie Hallstrom takes you through all the new CSS features in Dreamweaver 8 in her article, An Overview of CSS in Dreamweaver 8.) Here you will make the forum links orange and then apply a mouseover effect, so that they become underlined when users hover their mouse cursors over them:

  • With the index.php page open in Dreamweaver, select the dynamic text that displays the topic title. Then, in the tag selector, click the <a> tag.
  • The CSS panel displays the existing styles. If you cannot see the CSS panel, select Window > CSS Styles.
  • Notice that the a:link and a:visited styles are already defined for you, but they have no properties. To define a new property, click the Add Property link.
  • Select Text-Decoration from the first pop-up menu and None from the second one. This removes the default underlining of links.
  • Now make the links orange. Click the Add Property text to define a new rule. From the properties pop-up menu, select the Color option.
  • Select the color by clicking the button displayed in the value field. Pick an orange shade from the color picker.
  • Add a mouse-over effect for links. To do that, you need to define a new CSS rule by clicking the corresponding button from the CSS panel.
  • In the displayed dialog box, select the Advanced option button and then choose the a:hover selector and make sure you define it in the forum.css style sheet.
  • Click OK to create the rule. A new dialog box is displayed, where you can define the CSS properties for the new rule. The only property you need, for now, is to make the text underlined. Click the Underline option in the Decoration section and then click OK.
Notice how easy it is to edit the existing properties, add new properties, or define a new CSS rule from scratch in Dreamweaver 8 - you can do it all from one panel. The topic title links have now changed their color.

Notice that the CSS file attached to the page is opened. Save the CSS file and the page and upload both of them to the server. Preview the forum home page in the browser to see the changes.

In the next section, you will learn how to display messages in a particular topic.

The topic messages will be displayed in the view_message.php page. The page layout is already created using <div> tags. You can change the existing styles and layout on the CSS panel. The page displays the following for each message:

  • User name and avatar (profile photo) in the left section
  • Message subject, body, and date of posting in the center <div> tags
  • Link to reply to the message
To create the message list, do the following:
  • Create an advanced recordset that retrieves information from two tables and filters it by the topic ID received as a URL parameter.
  • Display the user name and a thumbnail of the profile photo.
  • Display the message details.
  • Use conditional regions to control the output.
First, you must create the advanced recordset. This recordset will have to perform a join between the message_msg and user_usr tables. Note: The SQL join is an operation that enables you to retrieve information from two or more tables that are related through a foreign key. You can learn more about joins by reading the Relations Between Tables tutorial on the InterAKT site.

To create the recordset, follow these steps:

  • In the Bindings tab, click the Plus (+) button. Select Recordset (Query) from the pop-up menu.
  • In the simple recordset configuration dialog box, enter rsMessages as the recordset name.
  • From the Connection pop-up menu, select the connForum database connection.
  • In the Table pop-up menu, select the message_msg table.
  • To retrieve messages in a particular topic, you must add a filter condition. In the Filter pop-up menu, select the foreign key to the topic table: idtop_msg. For the value to match, select URL Parameter from the pop-up menu. For the parameter name, enter id_top (the name specified when you created the topic link).
  • Define the join between the message_msg and user_usr tables. Because you cannot define it in the simple recordset window, click the Advanced button in the Recordset dialog box.
  • Enter the SQL code in the SQL text area. When switching from the simple dialog box to the advanced one, your settings will be preserved in the SQL code.
  • You have to change this code in order to perform the join. Place the cursor after the message_msg table name and enter the following code:
  • LEFT JOIN user_usr ON idusr_msg = id_usr
  • This is all it takes to create the query.
  • Review the completed dialog box and click OK to close it.

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.