Create the navigation menu and e-card gallery

Build the navigation menu

The site's navigation menu will display the names of the categories in the database, as links. To create the application menu you have to:

  • Add a recordset to retrieve category information.
  • Display the category names as links.
  • Include the menu in the site's main page.

Retrieve database information

To populate the menu in a dynamic manner you need to retrieve the category names from the database. In Dreamweaver, this is done with a recordset:

  1. Open the menu page in Dreamweaver.
  2. Go to the Bindings tab > Plus (+) > Recordset(Query). Configure the new recordset window as follows:


    Illustration 5: Recordset to retrieve the categories
    • In the Name text box enter the name for the new recordset: rsMenu.
    • In the Connection drop-down select the database connection you've created for this site: connCards.
    • In the Table drop-down menu select the category_ctg database table.
    • In the Sort drop-down menu select the name_ctg column, and for the method select Ascending. This will cause the entries to be retrieved alphabetically.
    • Click OK to close the window and create the recordset.
  4. The new recordset is displayed in the Bindings tab. If you click on the Plus (+) sign next to it, the fields it retrieves will be displayed:


    Illustration 6: Recordset fields

Display dynamic data

The menu entries are in fact the category names, as retrieved from the database. To display them:

  1. Drag and drop the name_ctg field from the Bindings tab onto the page. Press SHIFT+ENTER to create a line break.
    Tip: Adding line breaks after elements in a repeated region will place each of them on a separate line.


    Illustration 7: Category name dynamic field
                                     
  2. Press CTRL+A to select the dynamic text and the line break. Go to the Application tab of the Insert bar and click on the Repeat Region icon.
  3. Configure the dialog box to use the rsMenu recordset, and display all records:


    Illustration 8: Display all entries in the rsMenu recordset
                                                
  4. Click OK to apply the server behavior. A gray thin line will be displayed around the dynamic text.

Next you have to turn the dynamic text into a link. Because of the site structure – one page dynamically loads the needed ones – the links will point to the container (the index page), passing along some parameters . One of the parameters tells the container what page to load:

  1. Select the dynamic text inside the gray border and click the folder icon in the Property Inspector:


    Illustration 9: Create a new link
                                             
  2. In the new window select the index file in the site root, and press the Parameters button to define the URL parameters to pass:
    • Click the Plus (+) button to add a new URL parameter.
      • In the Name field enter mod.
      • In the Value field enter view_cards.
    • Click Plus (+) to add the second parameter.
      • For the Name enter id_ctg.
      • For the Value, click on the Dynamic Data icon and select the id_ctg field from the rsMenu recordset:


        Illustration 10: Select a dynamic value for the URL parameter
                                   
    • The last parameter will pass the category name, so you can display it on top of the card gallery. Click Plus (+) to add a new entry.
      • For the Name use name_ctg.
      • For the Value use the Dynamic Data icon. From the rsMenu recordset pick the name_ctg field.
  4. In the Parameters window, code that retrieves the value of the selected field is inserted into the page:


    Illustration 11: URL parameters passed by the menu links
           
  5. Click OK twice to close the dialog boxes and create the link.

You can now save the page and test it by pressing F12 in Dreamweaver. The list of categories will be displayed, as links to the index page. If you have used the database dump provided with this tutorial, a few categories already exist, and will be displayed.


Illustration 12: Navigation menu

In the next section you will alter the application homepage to display the menu on all pages, providing an easy way for users to move around the site.

Display the menu on the application front-page

After creating the navigation menu, you must place it at user's reach – on the homepage. To achieve this you will use a Server-Side Include server behavior, which allows you to load a file within another:

  1. First open the index page in Dreamweaver.
  2. From the left div select the default text - Content for id "left" Goes Here – and remove it by pressing the Delete key.
  3. Go to the Server Behaviors tab > Plus (+) > MX Kollection > Server-Side Includes and select the Server-Side Include server behavior. This allows you to define a file that will be statically included in the home-page.
  4. In the user interface that opens, click the Browse button and select the menu page in the site root:


    Illustration 13: Define the file to include in the main page
                                 
  5. To apply the change and close the user interface, click OK.
    Hint: Notice that the includes folder has been created in your site root. To correctly view your pages, you must upload it to the remote/testing server.
  6. The included file's content (the menu dynamic text) will be displayed:


    Illustration 14: The included file content is displayed

Save the page. To test the results press the F12 key (make sure you have uploaded the includes folder first), and the preview must display the menu neatly incorporated in the page layout:


Illustration 15: Home page with included menu

If you click on the links you will notice that the same page content is displayed, with a different value for the id_ctg and name_ctg URL parameters.

In the next section you will create the page that displays card images for the selected menu category in the main page center.

Build the e-card gallery

After making a selection in the navigation menu, you must retrieve all e-cards in the respective category, display their thumbnails and allow selecting one to create the greeting. The e-card gallery will be displayed in the main page center.

To create this page you must:

  • Add a filtered recordset to retrieve e-card information.
  • Display the card thumbnails and links.
  • Load the gallery in the main page based on the URL parameter.

Retrieve dynamic data

First you need to create the gallery recordset, to extract card information from the database:

  1. Open the view_cards page from the site root in Dreamweaver.
  2. Go to the Bindings tab > Plus (+) and select the Recordset (Query) option.
  3. Configure the new recordset dialog box as follows:


    Illustration 16: Recordset to retrieve the e-cards
                                            
    • In the Name text field enter the recordset name – rsCards.
    • In the Connection drop-down menu select the Dreamweaver database connection you've created: connCards.
    • In the Table drop-down menu select the ecard_crd table.
    • In the Filter drop-down menu select the column to filter the records by – idctg_crd.
    • For the condition select the equal sign (=). The value is passed as URL parameter – so use this option – and for the parameter name enter id_ctg.
    • Click OK to close the dialog box and create the recordset.

  5. The new recordset is displayed in the Bindings tab.

Next you must add a new entry in the Bindings tab that will retrieve the category name which is passed as an URL parameter:

  1. Go to the Bindings tab > Plus (+) and select the URL Variable option.
  2. In the user interface enter the URL parameter name, as specified when creating the menu links – name_ctg:


    Illustration 17: Add a new URL parameter binding
                                        
  3. Click OK to add the new dynamic data.

The recordset fields and the URL parameter will be displayed in the Bindings tab:


Illustration 18: Bindings tab

Display e-cards gallery

After retrieving all the information you need to create the page, you can move on and display it on page.

To allow an easier page orientation, the category name will be displayed on top of the thumbnails:

  1. Open the view_cards page in Dreamweaver if necessary.
  2. Right-click on the page and select CSS Style > Attach Style Sheet. The file name is remembered from the main page, so just click OK.
    Note: If using the sample files provided, you can skip this step.
  3. From the Bindings tab drag and drop the name_ctg URL dynamic field onto the page. Place the cursor next to it, press the space key, then enter cards.
  4. Select both the dynamic and static text entered previously and select the Heading 4 option in the Format drop-down menu of the Property Inspector:


    Illustration 19: Display category name
                                 
  5. From the HTML tab of the Insert bar add a horizontal rule – the first icon. With the newly inserted horizontal line selected change its style to categoryline – just select this option in the Class drop-down menu of the Property Inspector:


    Illustration 20: Set the HR class
                            
  6. Create a new paragraph after the horizontal line: place the mouse cursor right after it and press the Enter / Return key.

Next you have to display the thumbnails for each of the images in the gallery. You will achieve this with the Show thumbnail server behavior:

  1. Go to the Server Behaviors tab > Plus (+) >MX Kollection > File Upload and select the Show Thumbnail server behavior.
  2. Configure the user interface to retrieve the card file names from the recordset, and resize them proportionally:


    Illustration 21: Configure the Show Thumbnail server behavior
                                   
    • In the File folder text field enter the path to the folder where the card images are stored on disk. You can either enter the path, or click Browse and select it.
    • In the Recordset drop-down menu select the rsCards recordset.
    • In the Field drop-down menu select the recordset field storing the image filename – filename_crd.
    • In the Resize method drop-down menu select Proportional – Fit to box.
    • In the Width and Height text boxes enter the maximum width and height for the thumbnails. Enter 100 in both fields.
  4. When you are done configuring the interface options, click OK to close the interface and apply the changes. A dynamic image placeholder will be displayed on page:


    Illustration 22: The server behavior adds a dynamic image placeholder
                                
  5. To display all thumbnails in an ordered fashion you will use the Looper Wizard. Select the dynamic image placeholder and access the wizard from the MX Kollection tab of the Insert bar. Configure it as shown below:


    Illustration 23: Configure the Looper Wizard to display thumbnails
                                    
    • In the Looper type drop-down menu select Horizontal.
    • In the Recordset drop-down menu select rsCards.
    • In the Specify the display settings section check the Show all records radio button, then enter the number of columns to display – 5.
  7. Click OK when done setting the options to close the user interface and apply the changes.
  8. The dynamic image placeholder has been enclosed in a table, and a gray line labeled Horiz Looper. You will display the card description below the actual thumbnail:
    • Click on the dynamic image placeholder.
    • Press the left arrow to place the cursor next to it, then Shift + Enter to create a new line.
    • From the Bindings tab drag and drop the description_crd field on the new line.
  10. You still need to customize the table added by the wizard:
    • Click on the image placeholder inside the table, then, from the Tag Inspector select the <td> tag:
                                   

      Illustration 24: Use the Tag Inspector to select elements
                                  
    • Set the vertical alignment of the table cell to top. Select this option in the Vert drop-down menu of the Property Inspector:
                             

      Illustration 25: Set the vertical alignment
                             
    • Next select the <table> tag in the Tag Inspector and in the Border text field of the Property Inspector enter 0.
  12. The last thing to do is turn the card description and thumbnails into links to the greeting creation page:
    • Click on the image placeholder to select it.
    • Click on the folder icon in the Property Inspector next to the Link text box.
    • In the new window that loads select the index page in the site root, and click the Parameters button to define the URL parameters to pass.
    • In the Parameters dialog box you can add URL parameters by clicking on the Plus (+) button. The link will have to pass two URL parameters: the ID of the card to use and the mod parameter, to “tell” the index what page to load:
      • For the first parameter Name enter mod. For the Value use create_card.
      • The second parameter's Name is id_crd. To use the card ID value click the Dynamic Data icon and select the id_crd field of the rsCards recordset. Click OK to add the parameter value:
                              

        Illustration 26: URL parameters for the greeting creation page
                                
      • Click OK twice to create the link.
    • Click on the dynamic text to select it, then repeat the steps above to create the link.

Before trying the page, you must add it to the main page, so that the menu will accurately pass the card category ID to it. Save the view_cards page before moving to the next section.

Include the card gallery into the main page

The last step to take to complete the e-card gallery is to integrate it with the main page. Because the main page center div will have to display more than one page, using a static Server-Side Include with only one file is no longer possible. Instead, you will have to use the Server-Side Includes from List sever behavior. This server behavior allows you to define a list of URL parameter values and pages to load. When the main page is loaded, the URL parameters are checked and matched against the list. If a corresponding entry is found, the page is included and displayed.

To add the dynamic include, follow the instructions below:

  1. Open the index page in Dreamweaver.
  2. Select the default text added by Dreamweaver for the center div - Content for id "center" Goes Here - and remove it.
  3. Go to the Server Behaviors tab > Plus (+) >MX Kollection > Server-Side Includes and select the Server-Side Includes from List server behavior.
  4. The user interface contains a grid displaying the value – page pairs already entered, and a set of controls to change their properties, or define new ones. Configure this user interface as follows:


    Illustration 27: Configure the files to include in the index
    • Click the Plus (+) button to add a new included file.
    • Leave the URL parameter value text field empty. This means that the page you specify will be loaded when no URL parameters are passed.
    • For the Filename field click the Browse button and select the default.htm file in the site root.
    • For the Page Title enter Welcome to the InterAKT e-cards application.
    • Click the Plus (+) button again to add one more file.
    • In the URL parameter value field enter view_cards – the name used in the menu links.
      Note: you must enter the exact same name as used for the links, or it will not work.
    • For the Filename field click the Browse button and select the view_cards file in the site root.
    • For the Page title enter View e-cards.
  6. In the Parameter tab of the user interface you can define the name for the URL parameter to use. The default name is mod, and it is used in this application.


    Illustration 28: Specify the URL parameter name
                             
  7. After you finish configuring the user interface click OK to apply the server behavior.

  8. A generic text will be displayed on the page, where the pages will be included.

To test the changes you have made, save the page and press F12 to preview it in the browser. Because no URL parameter is sent by default, the homepage will be displayed:


Illustration 29: The default page is loaded when no URL parameter is provided

To display the e-card thumbnails, click on one of the menu entries:


Illustration 30: Selecting one category displays the images

By clicking on one of the thumbnails or on the description, the e-card is selected for use in the greeting.

In the next section you will build the pages that allow sending a greeting based on the selected e-card image.
Adobe acquired InterAKT
InterAKT has been acquired by Adobe.
Learn more
 
© Adobe Systems Romania. All rights reserved.