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 A database refers to data organized and stored on a computer that can be searched and retrieved by a computer program. Most industrial-strength and many smaller database applications can be addressed using SQL (Structured Query Language). 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 A primary key is one or more table columns whose values uniquely identify each record in a table. In general, a primary key is defined on a single column, but it is not uncommon to have it defined on two columns. 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 A foreign key is a field from a database table that refers to (or targets) a specific key, usually the primary key, in another table. This is a convenient way of logically linking information from related tables in the same database. For instance, a table that stores information about products can contain a foreign key that references the primary key field in a table that stores manufacturers. This way, each product has an associated manufacturer – its associated foreign key points to the unique identifier of the manufacturer. Please note that the foreign key is not unique, but the referenced field (the primary key in the referenced table) usually is., 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: