Designing the User Interface

Chapter 8 - Creating a Search System
byGareth Downes-Powellet al.
Wrox Press 2003

We'll design the user interface in pure HTML using Dreamweaver.

Building Your Page

The search system interface is made primarily of HTML input tags, all grouped into a special HTML tag, which is named <form>. You can have multiple <form> tags on your page. When the user clicks on the submit button, the browser will only send the values of the input elements that are inside the <form>...</form> tag that contains the button to the server.

Dreamweaver MX Interface Tools

Dreamweaver MX provides a series of tools to build the user interface. Most of these tools are located in the Forms tab in the Insert panel:

This panel will let you insert the following standard HTML input elements:

• The main <form>...</form> tag

• text input element

• hidden input element

• textarea input element

• checkbox input element

• radio button

• select input element

• image input element

• file input element

• button element

The User Interface for Our Search Engine

For the user interface of our search engine, let's build a page that will let the user search for rooms in our hotel using two criteria: the number of beds and a price range. The user interface we'll be using on our system looks like this:

The interface is composed of the following elements:

• A drop-down menu (a select menu), allowing the user to specify a range of number of beds to search for. The name of the element is bed_option. The possible values of the bed_option are: More than, Less than, or Equal to.

• The number of beds that the user wishes to search for. Here we're using a textbox as the input element. The name of the element is bed, with any value permitted.

• A drop-down menu asking whether the price searched should be above or below the stated value. The name of the menu is price_option. The possible values are: above and below.

• The textbox where user can enter a price that they wish to search. The input element used is a text input. The name of the element is price.

• A submit button, to confirm the search request.

The HTML code used for the user interface is the following (it's in the code download for the book in the file form.html, or you can build it yourself using Dreamweaver - just make sure that the names of all of the input elements are correct):

    <form name="form1" method="post" action="search.php">      <table width="400" border="0">        <tr align="center">          <td colspan="3">Search for a room</td>        </tr>        <tr>          <td width="152" align="right">Number of beds :</td>          <td width="38"><select name="bed_option" >              <option value="more" selected>More than</option>              <option value="less">Less than</option>              <option value="equal">Equal to</option>            </select></td>          <td width="196">          <input name="bed" type="text"  value="1" size="2"                 maxlength="2">bed(s)</td>        </tr>        <tr>          <td align="right">Price Range :</td>          <td><select name="price_option" >              <option value="above" selected>Above</option>              <option value="below">Below</option>            </select></td>          <td>$<input name="price" type="text"  value="25" size="5"                      maxlength="5"></td>        </tr>        <tr>          <td align="right">&nbsp;</td>          <td colspan="2" align="center">          <input type="submit" name="Submit" value="Search"></td>        </tr>      </table>    </form> 

Retrieving the Value Entered By the User

OK, so we've got our user interface. How does our code know what values the user has entered and submitted to the server? Luckily, PHP provides a very easy way to get those values.

Let's say we have the following HTML code:

    <form name="form1" action="search.php" method="post">        <input type="text" name="number">    </form> 

This HTML code has a <form> tag named form1 and one input element of type text, named number. That piece of code will insert an input box in the browser window, which could be used to search for information about a room number, for instance. But how are we going to retrieve the numbers the user entered in their browser?

We can use the predefined PHP array: $HTTP_POST_VARS. This PHP array is automatically defined at the start of our script and all values posted from the user's browser are put into this array. If the form's method is get instead of post, we can use the array $HTTP_GET_VARS instead.

The difference between a get and a post method resides in the way the browser will send information to the server. In case of a get, all information will be passed through the URL variable. The user will be able to see all of the data in the location bar of their browser. In the case of a post, everything is passed silently without any notice to the user. In this chapter, we will be using the post method.

In the newest versions of PHP, 4.1 and above, these arrays have been deprecated in favour of the following arrays: $_POST and $_GET.

However, this syntax is not available on servers with older versions of the PHP scripting engine, so we won't use it.

So, to access the value the user has entered into our number box, we can use the following code:

    $HTTP_POST_VARS['number'] 

Let's have a look at a fuller example. Suppose we have the following HTML code in a page called index.html:

    <html>       <body>          <form action="print.php" method="post">             Enter a number : <input type="text" name="myinput">          </form>       </body>    </html> 

This example will show like this in a browser:

The file print.php, looks like this:

    <html>       <body>          You typed : <?php echo $HTTP_POST_VARS["myinput"]?>       </body>    </html> 

You can find these two HTML pages in the code download for the book. If the user types 789 into the input box and presses return, their browser will display the following result: