Home arrow PHP arrow 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.

  1. Creating a Searchable Inventory System: Setting Up Your Database and User Interface
  2. A Look at the Database
  3. Defining the Visual Layout
  4. How Do We Begin?
By: Brian Vaughn
Rating: starstarstarstarstar / 25
November 08, 2005

print this article



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:

 <?php @ include_once 'inc.core.php'; ?>

      <title>Inventory Search Page</title>
<body style="background-color: #EEEEEE;">

<div align="center" id="content_div">
            <form name="search_form" action="index.php"
                  <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>
                        <!—- Categories Menu here -->
                        <!—- Sub Categories Menu here -->

                        <!—- Manufacturers Menu here -->
                        <!—- Keywords Menu here -->
                        <INPUT type="submit" value="go"/>
            <tr id="pagination_row">
                        <!-- Current Page here -->
                        <!-- Pagination Menu here -->
                  <td id="results_cell">
                        <!—- Search Results here -->



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:

      <style type="text/css">
            body, p, th, td, select {
                  font-family: Tahoma, Arial, Verdana, Helvetica;
                  font-size: 11px;
            table {
                  background-color: #FFFFFF;
            input, select {
                  width: 90%;
            #content_div {
                  width: 100%;
            #content_div table {
                  width: 775px;
                  border: 2px solid #DDDDDD;
                  margin: 2px;
            #content_div table th {
                  font-weight: bold;
                  text-align: left;
             a {
                  font-weight: bold;
                  color: #000080;
                  text-decoration: none;
                  a:hover {
                  text-decoration: underline;
            #results_cell table {
                  border: 0px hidden;
                  padding: 0px;
                  margin: 0px;
            #results_cell .even {
                  background-color: #EEEEEE;
            #results_cell .odd {
                  background-color: #DDDDDD;

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 );

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.

>>> More PHP Articles          >>> More By Brian Vaughn

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: