Add breadcrumbs navigation trail

One way to improve navigation in a dynamic content web site is to always allow the visitor retrace his steps. This is accomplished by placing at the top of the page a breadcrumb navigation trail. This is possible for this site, as it displays the ads in different categories on the same page, by using the category ID as URL parameter.

To be able to follow this section of the tutorial, you need to have downloaded and installed MX Breadcrumbs. This is a free Dreamweaver extension, which you can download here.

Once you've got the extension installed, and you've restarted Dreamweaver, you can begin enhancing the site's main page. To do so, follow the next steps:

  1. Open the index.php file from the site's root folder in Dreamweaver. As you've seen when the page was created, it contains a table where all data is stored.

  2. The breadcrumb navigation trail should be placed above all other elements, welcome message included. So the simplest way of doing it is to add a new row at top of the existing table.

  3. To add a new row, simply right-click in the first row and select Table -> Add rows and columns from the pop-up menu. In the user interface that opens, select to add a new row, above the current selection.

  4. Now click in the newly created row, and apply the Create Breadcrumbs command from the InterAKT tab of the Insert panel.

  5. Configure the dialog box that opens as follows:
    · In the Connection drop-down menu, select the database connection you've created at the beginning of this tutorial: connAds.
    · In the Table drop-down menu, select the database table storing the data used to create the breadcrumbs. This should be the same as the one providing the URL parameter, so that navigation will really work. In this case, the table is category_cat (the URL parameter is the category id, after all).
    · In the Primary key drop-down menu, select the table's field containing the primary key. By default, the first field found in the table is selected, but you can change it easily.
    · In the Parent ID drop-down menu, select the table field containing the self foreign key, which points to the upper category: idcat_cat.
    · In the Display name drop-down menu, select the table field storing the labels that each breadcrumb element will display. For the categories, it is name_cat.
    · In the GET Parameter text field you must enter the name of the URL parameter that must be transmitted to the page, so that it will load the appropriate information. Enter id_cat, as this is used in the index page to select the ads to display.
    · In the Page text field, enter the page that receives the URL parameter and shows the ads. You can use the Browse... button to search for the index.php file.
    · The completed dialog box looks like in the image below:



    · Once you've completely configured the user interface, click the OK button to apply the command, and insert all the elements into the page.

  6. Some page elements are added by the command in the first row, as well as some server behaviors. In Dreamweaver, the first row now contains:

 
This is all that you have to do in order to add a breadcrumb navigation trail to your site. Just save the page, and preview it in the browser by pressing the F12 key, and you will notice on top of the page the trail that allows moving through the site in an easier manner:


 
Now that you have an improved version of the classified ads site, you can move on and implement new ways to browse the ads (sorted by different criteria), an administrative section (where you can control what ads are to be shown) or an expire date for each ad.