PHP Tutorial

In addition to choosing product categories for locating software titles, visitors to the eCommerce site can perform general keyword searches.

Visitors can enter a word or phrase into a text box and a search routine will find all Product records that contain that text string. The menu.inc file, therefore, contains the coding to present this text entry box and to pass the entered text to the search.php page where the actual search for matching products take place.

The text entry box is coded within a form appearing in the menu.inc file. The form displays the text box along with a button to submit the form information to the search.php page.

<form action="search.php" method="get">
  <span class="head4">Search for:</span><br>
  <input type="text" name="Criterion" class="textbox" size="12"
    value="<?php echo $_GET[Criterion]?>">
  <input type="submit" class="buttonS" name="Submit" value="Go"
    onMouseOver="OverMouse(this)"; onMouseOut="OutMouse(this)">
</form>

The first thing to notice about this form is the method="get" attribute. Up to this point we have used the POST method of transmitting form information. This method, recall, transmits the name/value pairs from the form to the server as a separate data stream from the URL request in the ACTION attribute. In this instance, the GET method transmits the name/value pairs as a query string appended to the URL in the ACTION parameter.

The reason for using the GET method in this application is for consistency with the previous item category links. Those links pass a chosen category of products to the search.asp page as a query string. This form does the same thing for the keyword search. When the visitor enters a word or phrase into the text box and clicks the submit button, a URL in the form,

is issued and the value in the text box is paired with the name Criterion for transmission to the server. Thus, when either a category name or a keyword is received by the search.php page, both will be in the form of a query string, differing only in their names and values:

Note also that the text box is valued with the value of the Criterion query string that is transmitted to the server when the form is submitted:

When this form is submitted, a URL is issued for the search.asp page, passing to it the query string containing the value entered into this field. Remember, also, that the menu.inc file of which this form is a part appears on all pages, including the search.asp page. Therefore, when the search.asp page is loaded, along with this form contained in the menu.inc file, the text box reflects the Criterion value that is passed to the page. So the value shows up in the text box even though it is in a different form on a different page!

The submit button used on this form is different from the standard-issue buttons. It is sized and colored differently, and it changes color when the mouse is moved over it.

The initial look for the button is given through a stylesheet specification. A stylesheet class is defined to set the button width, text alignment, font face and size, background color, and text color:

.buttonS {
  width:35px;
  text-align:center;
  font-family:arial;
  font-size:9pt;
  background-color:seagreen;
  color:white;
  }

These settings are applied, then, by coding a CLASS attribute assigning this class name within the button tag:

Changes in the style specifications take place when the mouse is moved over the button and when removed from the button. These changes are activated by JavaScript statements coded within the button tag:

The onMouseOver and onMouseOut events trigger function calls to OverMouse() and OutMouse(), respectively, passing a self reference to the object (this button) containing these event handlers. The functions, then, receive a reference to this submit button for script application.

The purpose in coding scripts within functions is two-fold. First, the scripts contain multiple statements that make it awkward to code inside individual buttons. Second, the functions can be called from any buttons to which the effects should apply. This latter point means, then, that the functions need to be made available to all pages for use by any buttons on those pages.

As is done for the header and menu that appear on all pages, the JavaScript code to activate buttons appears in an INCLUDE file that can be imported into any page. The normal method of importing JavaScript code is to include it in the <HEAD> section of the page so that the routines are loaded and available for activation prior to the loading of the <BODY> section. So, all pages of the eCommerce site include the directive,

within their <HEAD> sections. The code that comprises the jscript.inc file is shown below:

Recall that both functions receive a reference to the button that was clicked. This reference is received as variable button, so any reference to button is a reference to an actual button which currently has a mouse poised over it or which had a mouse just removed from over it. The two functions simply set different styles for the button depending on which action the user has taken.