Create the topics menu

The first thing an application must have is a way to let visitors access content. In this particular case, content is represented by articles that have been submitted, reviewed and approved, organized by topics. The simplest way to let visitors pick what to read is to present them with a navigation menu made up of the existing topics.

To create the dynamic menu you need to:

• Create a recordset that retrieves the topic titles.

• Display the dynamic values on page as links.

• Add the menu to the main page layout.

Create the topic recordset

The steps you must take in order to retrieve all topics information from the database are:

1. Open the menu page in Dreamweaver.

2. Go to the Bindings tab > Plus (+) > Recordset (Query).

3. Configure the Recordset interface as shown below:
   
   
                  

• In the Name text box enter the new recordset's name: rsTopicMenu.

• In the Connection drop-down select the Dreamweaver database connection created earlier: connCMS.

• In the Table drop-down menu select the topic_top table.

• In the Sort drop-down menu select the column to order records by: name_top. Set the method to Ascending.

4. When done setting the options, click OK to close the user interface and create the recordset.

Display the dynamic information

After retrieving information from the database, you must put it to use. More specifically, the topic names will be displayed, and the ID's used as link parameters:

1. After having created the topic recordset, its fields are displayed in the Bindings tab:
   
   
              

2. You can drag & drop fields from the recordset onto the page. To display the dynamic topic title, drag the name_top field from the Bindings tab on the page. A representation of the field will be displayed:
   
   
                   

3. At this point, the first value from the recordset is displayed on the page. To get it to show all others you must use a repeat region (this is a Dreamweaver server behavior that loops through recordset entries). In order to format the output right (each title on its own line), place the cursor after the dynamic text and hit Shift+Enter. Then press Ctrl+A to select the entire page content and go to the Application tab of the Insert bar. Click on the Repeated Region icon to open its interface:
   
   
                  

• In the Recordset drop-down menu select the rsTopicMenu recordset created earlier.

• In the Show radio group select the All records radio button.

• Click OK when done setting the options to apply the changes and close the user interface.

4. To mark the changes, a gray thin border is displayed around the selection.
5. Now you have to turn the topic titles into navigation elements. And you can do that by turning them into links. Before you start creating the links, remember the intended application layout: all pages are included in the main one, either statically (the menu) or dynamically (the content), based on URL parameters. Also, when a visitor clicks on a topic title, a list of article titles is displayed, and not entire articles.
6. To create the link first, click the dynamic field dragged from the recordset to select it. Then click the Folder icon next to the Link text box in the Property Inspector:
   
   
                              
7. In the new dialog box select the index file, then click the Parameters button. A window will pop-up where you can enter pairs of parameter names and values.
• To define a parameter click the Plus (+) button. Then you can enter the name and value. You will have to do this step twice, for the two parameters to be added.
• For the first URL parameter, in the Name text box enter mod. For the Value type article_list. This URL parameter is used to "tell" the main page what application part to load and display.
• The second parameter must be the topic ID. It will be used to decide which articles to display. For the Name enter id_top. The value must be dynamic, and to select it, click the Dynamic Data icon next to the Value field. In the new window select the id_top recordset field, and click OK.
  
  
                   
• Now that the two URL parameters have been added, you can close the dialog box by clicking OK:
  
  
                              
8. Click OK once more to confirm the changes and create the link. On the page, the text appearance will change, because the CSS file contains rules for the <a> tag that has been created.

Add the menu to the home page

To allow visitors to quickly change the topic, the menu will be displayed next to all other content. To achieve this, you must include it into the main page layout, in the reserved layout spot - on the left:

1. Open the index page in Dreamweaver.

2. Select the default text - Content for id "navbar" Goes Here and delete it.

3. With the mouse cursor inside the <div>, go to the Server Behaviors tab > Plus (+) > MX Kollection > Server Side Includes and select the Server-Side Include option.

4. The dialog box that is displayed only contains one field that allows selecting the file to include. Click on the Browse button and select the menu page from the site root.
   
   
                 

5. Click OK when done setting up the options.

6. Now save the page and press F12 to preview it . The topic list will be displayed in the correct place:
   
   

Next you have to build the page that retrieves and displays the list of articles from the selected topic, to work with the menu.