The layout of the search form and the resulting records will vary widely depending on the surrounding website. However, for our example project we will stick with a simple layout that positions the search form at the top of the page, followed by a pagination menu (if more than one page of results have been found), followed lastly by the actual records returned for the search criteria given.
Our basic HTML layout, (“index.php”), will be as follows:
<div align="center" id="content_div"> <table> <form name="search_form" action="index.php" method="post"> <tr> <th style="width: 175px;">Category:</th> <th style="width: 175px;">Sub Category:</th> <th style="width: 175px;">Manufacturers:</th> <th style="width: 175px;">Keywords:</th> </tr> <tr> <td> <!—- Categories Menu here --> </td> <td> <!—- Sub Categories Menu here -->
</td> <td> <!—- Manufacturers Menu here --> </td> <td> <!—- Keywords Menu here --> </td> <td> <INPUT type="submit" value="go"/> </td> </tr> </form> </table> <table> <tr id="pagination_row"> <td> <!-- Current Page here --> </td> <td> <!-- Pagination Menu here --> </td> </tr> </table> <table> <tr> <td id="results_cell"> <!—- Search Results here --> </td> </tr> </table>
As you can see, there’s nothing too complex about this layout, just a series of placeholders into which PHP code will later be inserted to display form fields, a pagination menu, search results, and so on. Again, our focus here isn’t on the layout but the concepts behind the search interface, so we’ll zip through the HTML design phase rather quickly.
Once our HTML is in place, we may also wish to add the following CSS to the document’s <HEAD> tag:
Now we’re ready to start talking about the PHP framework that will pull this all together.