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 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:
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"> </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.
So, to access the value the user has entered into our number box, we can use the following code:
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: