Creating the Navigation Menu

Creating the Navigation Menu

In this section, you create the navigation menu of the blog template. This contains all the topics, which are dynamically extracted from the database. For that, you need:

• A database connection
• A recordset of all the topics

Defining a Data 424v2111e base Connection

1. In the Application panel, select the Databases tab.
2. Click the Plus (+) button and select MySQL Connection.

Fill in the MySQL connection dialog box as shown in Figure 8. You must provide your own MySQL server, username, and password.

Figure 8. Entering the MySQL database connection information

Note: In a production environment, do not use the root password for your web applications.

If you are not sure how to connect to the database server or are getting error messages when testing the connection, ask the system administrator or your web host for the proper access information. Use the Select button to quickly locate the blog database. You can test the connection using the Test button.

4. Click OK when finished.

The connection displays in the Databases panel. Click the plus (+) icon to expand it. As shown in Figure 9, you can see the table organization of the blg_blog database.

Figure 9. Viewing the database information using the Databases tab of the Application panel group

Note: Dreamweaver automatically generates the PHP/MySQL code for connecting to the database and stores this information in a special file (connBlog.php) in the Connections folder, which is automatically created inside the site root folder.

Creating a Recordset

Next, you need to extract the information you want to use from the database. For this, you create a recordset:

1. In the Application panel, select the Bindings tab.
2. Click the Plus (+) button and select Recordset from the displayed menu.

Fill in the Recordset dialog box as shown in Figure 10.

Figure 10. Creating the rsTopics recordset

• In the table pop-up menu, select the table you want to extract information from: blg_topic_top.
• You can also sort the records alphabetically (Ascending), by their title (title_top).
3. Click OK when finished.

Dreamweaver displays a message window, warning you that subsequent changes to the code that was generated will not copy to documents based on the template. That is why it is important to generate the recordset correctly the first time. Click OK to dismiss the warning dialog box.

Figure 11. Template recordset warning message

(+) View larger

The recordset displays in the Bindings panel. Click the plus (+) icon to expand it. it.

Figure 12. The rsTopics recordset within the Bindings tab of the Application panel group

The point-and-click approach of Dreamweaver makes it very easy to connect to a database and generate a recordset. You do not have to write any PHP or MySQL code, just fill in two dialog boxes and you're done.

Getting back to the navigation menu, you will learn how to display the data from the recordset you have created.

1. Click inside the left cell of the layout table.
2. Click the Application tab from the Insert bar.
3. Select Dynamic Table from the Dynamic Data button menu.

Fill in the Dynamic Table dialog box as shown in Figure 13.

Figure 13. The Dynamic Table dialog box using the rsTopics recordset

Display all the topics, because users must be able to navigate through all of them.

5. Click OK when you're done.

Insert the table in the left cell. However, you only need the name of each topic for the menu, so you should delete the id_top and the description_top columns; just select the table colums and press the Delete key. Next, change the title_top column heading with a human-readable one, such as Topics.

Currently, the menu entries have no links associated to them. Each menu entry should lead to the topic.php page and pass it an URL parameter, which takes corresponding id of the topic as the value. To create the link:

1. Select the dynamic text labeled
2. In the Property inspector, click the folder icon next to the Link text box.
3. Browse to the site root folder on the local machine and select the topic.php file.
4. In the URL text box, delete the preceding character, because you need to use the relative path to the file. The URL should be topic.php.

Click the Parameters button next to the URL text box. Dreamweaver opens a dialog box, where you should define the URL parameter associated to this link.

• Click the plus (+) button to add a new parameter.
• Enter its name: id_top
• Enter its value, by clicking in the Value field, clicking the lightning bolt icon next to the Value field and selecting the id_top field from the rsTopics recordset.
• Click OK, and then OK again.
5. After defining the URL parameter, click OK.

Before finishing the template, define which regions can be further edited and which can not. Your blog template will have only one editable region: the main area where the articles display. To make this region editable:

1. Select the right table cell in the middle row.
2. Click the Common tab from the Insert bar.
3. Select Editable Region from the Templates button menu.
4. Dreamweaver opens a dialog box that asks you for the name of the editable region. Name it main.
5. Click OK.
6. Select the main text that Dreamweaver inserted in the editable region and delete it.

Save the template file. Figure 14 shows how the template page looks so far in Dreamweaver Design view.

Figure 14. The template in Design view