All pages of the eCommerce site contain a section of links for finding information about software maintained in the Products table of the eCommerce.mdb database.

Visitors to the site can browse for software titles in two ways. Through a set of links to product categories the visitor can display all products that fall within that category; and through a keyword search the user can display all products having that search word appear in one of the fields in their database records. The result of either search produces a list of matching item numbers, titles and prices.

The menu.inc File

The search menu is made available on all pages by creating an INCLUDE file that can be imported and placed in the division appearing along the left margin of the page. This menu.inc file contains the coding to permit the visitor to choose a product category or to enter a keyword for searching. The actual search for and display of matching products, however, takes place on the search.asp page. Thus, the choice of category value or keyword value triggers a link to the search.asp page and the search value is passed to this page through a query string.

On this page we'll consider how to set up choices of product categories for searching; on the next page we'll consider keyword searches. Both of these methods appear in the menu.inc file that is imported onto all pages of the eCommerce site. After looking individually at the coding for these search methods, we'll present the entire menu.inc page.

Creating Category Links

The set of links to the search.php page, and through which the chosen category is passed, is based on the item types of the products. ItemType is one of the fields in the Products table. So, these types need to be extracted from the table and then formatted as links to the search.asp page. The following code, then, appears in the menu.inc file to make the choices available on all pages.

<?php

//Establish data connection
		
  $conn = odbc_connect
  ('Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\inetpub\wwwroot\PHPTutorial\Ecommerce\databases\ecommerce.mdb','','');
		
//Issue SQL SELECT Statement
		
  $sql = "SELECT DISTINCT ItemType FROM Products ORDER BY ItemType";
  
//Execute the SQL Statement and create a recordset
		
  $rs = odbc_exec($conn, $sql);
  
//Loop through the recordset and display the necessary records

 while($row = odbc_fetch_array($rs)) 
	
	{
echo "<tr style=\"color:seagreen; line-height:8pt; font-size:9pt\"
			onMouseOver=\"this.style.backgroundColor='lightgreen'; 
			this.style.color='darkgreen'; this.style.cursor='hand'\"
			onMouseOut=\"this.style.backgroundColor='white'; 
			this.style.color='seagreen'\"
			
			onClick=\"location.href='search.php?Category=$row[ItemType]'\">
			
			
			<td>$row[ItemType]</td>
		</tr>";

		
		}

//Close the DB connection

odbc_close($conn);

?>

Here, we are linking to the database and extracting a set of records from the Products table. This set of records contains the unique values that appear in the ItemType field resulting from using an SQL SELECT statement with the DISTINCT parameter. Each record in the $rs recordset contains a single value--one of the item types in the field. Now, we just need to iterate through this recordset, formatting links for the category values.

Table Row Highlighting and Linking

The ItemType values are displayed in a table to take advantage of stylesheet features that provide an interesting method of assigning links to table cells rather than to the values themselves. The ItemType values appear in the table as follows and are highlighted as the mouse is moved across the entries (a border is shown around this table to make the effect more clear):

Links are made from the table cells--actually from the table rows--not from the text strings appearing inside the cells. This permits us to assign highlighting and visual clues to the rows as the mouse is moved across them; and the links are activated by clicking on the rows containing the items rather than on the items themselves. This method of linking from table rows is more clearly illustrated by the list of products appearing on the search.asp page. The same technique is used here although the effect is not as dramatic as highlighting and linking from multiple cells across the row.

These effects and linking actions result from the following code for the table rows. Note especially that the coding appears inside the <tr> tag so that the effect occurs in all cells along the row (although there is just one cell per row in this particular table).

Stylesheet properties are used to establish the initial appearance of items within the cells. The color property sets the color of text appearing in the cells, the line-height property sets the height of the text (and, coincidentally, the height of the cell itself), and the font-size property sets the text size.

In addition to these static properties, we need to add properties that change as the visitor interacts with the cells. We want "things to happen" as the visitor moves the cursor over the cells and off the cells, and clicks on the cells. The events just described are, in fact, scriptable events, which in the JavaScript language are named onMouseOver, onmouseout, and onclick. We can use these events, then, to trigger changes in the styles applied to the table cells.

Scripting XHTML Tags

JavaScript routines are added to the <tr> tags to set different styles and to trigger links when the visitor performs one of the three actions mentioned above. These events and actions are listed in the following table.

When the mouse is moved on top of a table row--triggering an onmouseover event--three JavaScript statements are executed. The background color (backgroundColor property) of the row is set to lightgreen, the text color (color property) is set to darkgreen, and the shape of the cursor (cursor property) is set to the hand shape. When the mouse is moved off of a table row--triggering an onmouseout event--the properties are set back to their original values.

The general format for issuing JavaScript commands from within an HTML tag is

That is, onmouseover, onmouseout, onclick, and other such names of events to which actions are to be applied is followed by an equal sign and a quoted list of statements to be executed when the event takes place. Multiple statements are separated by semicolons.

The statements used to set properties are in the format,

where style is a reference to a stylesheet setting, property is the formal name of the property being set, and value (enclosed in quotes) is the particular value for this property setting. The special keyword this is a self reference to the XHTML object containing this property setting, in this case the <tr> tag.

When an onClick event occurs, a link is made to the search.php page. This linking takes place by setting the location.href property (not of the <tr> tag but of the current window) to the name of the page to which the link is made. This property setting has the effect of replacing the URL in the Address box of the browser with a different URL, in this case the address of the search.php page.

Passing Query Strings

When a link is made from a product category (a table row, really) to the search.asp page, the target page needs to know which category of products was clicked to be able to search that category to generate the list of matching products.This information is passed to the search.asp page through a query string attached to the link URL. For each category in the menu list (for each table row), the query string value is the same ItemType value that is displayed in the table cell:

When a table row is clicked, a URL in the format,

is issued. Each row of the table lists a different item type, and that particular ItemType value gets appended to the URL for that row. One of the name/value pairs,

is sent to the search.asp page, informing that page of the type of search to conduct to locate software products falling into that passed category.