HomePHP Page 3 - Creating a Searchable Inventory System: Setting Up Your Database and User Interface
Defining the Visual Layout - PHP
Businesses that hope to sell items through their website need a searchable inventory system for the web. This article, the first in a four-part series, will start you on your way to building one.
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>
</div>
</body> </html>
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:
Again, this is pretty basic. We’re just formatting the appearance of our page, and the results found within our page. We’re now done with the layout. All our page needs now is a little bit of JavaScript and we’re ready to dive into the PHP code:
<SCRIPT type="text/javascript"> function attach_file( p_script_url ) { // create new script, set relative URL, and load it script = document.createElement( 'script' ); script.src = p_script_url; document.getElementsByTagName( 'head' ) [0].appendChild( script ); } </SCRIPT>
This technique may be unfamiliar to some, but it is merely a method of dynamically attaching a PHP file with JavaScript capabilities to our document at runtime. This is a topic thoroughly discussed in another recent article of mine, posted on Dev Articles, and I recommend you read it if you are interested in learning more.
Now we’re ready to start talking about the PHP framework that will pull this all together.
PHP 
