Include Files & Navigation

Include Files

When we put together our site files, we wish to retain as much flexibility as possible, while maintaining a single location for making site changes. To accommodate this apparent contradiction, we can use include files to house recurring HTML elements, CSS styles & code. An advantage of using includes is we can remove all structural HTML from our pages.

Not all PHP pages consist of one file. We can 'break up' PHP pages into several files, each file holding a fragment of an HTML page. Like CSS, this has the effect of allowing us to make a single change to one file, and have the change cascade across several pages. The difference is that CSS cascades format changes, and include files cascade HTML (or PHP) across pages!

Files vs. Pages

While we build HTML pages we think of a 'page' as the document that ends with an .html extension. A 'page' however is best thought of as what the user sees, that consists of HTML which can weave together the contents of several different files.

Even in the simplest web pages we use images. The image is not part of the HTML document, but is referenced, and called by the browser, when it sees the reference in the HTML document. CSS and JS files are also called when identified in a page in much the same way. Therefore the 'page' has always been the combined effect of combining several files.

Basic Document Structure

On a typical web page, just as in a word processing document, we frequently find a header and a footer. The header & footer areas provide the context for the page.

When using include files in PHP, we'll build on the theme that pages are created of multiple files. Each of the files could contain a fragment (piece) of the HTML page. The most obvious reason to do this is to add a 'header' or 'footer' to our pages.

In many pages, a header or footer identify the website, and place copyright and contact information into several pages. Consider a large website, with dozens to hundreds of pages. What if change was requested to the copyright notice at the bottom of each page? If the pages were built with include files, the change could occur in one file, and that change would 'cascade' across all site pages! The 'footer' file thus involved would only be a fragment of HTML, and not be an entire page. \

What goes between the header and footer identifies (makes unique) the specific document. If the top and bottom of a document are the header and footer, what goes between can be called the guts. When we work with a page, this is the area we would like to concentrate on.

Page Identity

When using include files we'll identify parts of our pages that deserve to be consistent across all pages. Each page however, still retains it's purpose, which we'll call it's identity. The page identity implies a single file to which all of the include files are a part.

This is the traditional 'center' of the page, sometimes called the 'guts' in a design (in relation the words header & footer) is what distinguishes any page from all others.

For example, a 'links' page features different information from an 'about us' page.You'll hear me use the word 'identity' to define this area, and in fact the entire page. The purpose of a page should be clearly defined, and that purpose gives the page an identity. All visible elements of the page should contribute to this identity.

The Include Function

include is one of many core functions that are provided to help PHP developers. When you see the name of a function linked in our pages, I usually link to PHP.NET, which is where I recommend you look first for answers about PHP! You may include any number of other files on a page, by including them, at the appropriate place in the page:

<?

include("myINC.php");

?>

The letters INC are used in the filename to identify that the file is not designed to be used as a standalone file in a browser. The page can contain functions or even just HTML code used by more than one file, or even navigational elements that change dynamically based on the page in which they are included. Here is a typical HTML page, before we deconstruct it into include files:

Templates

The word template exists in various contexts. If we go back to the word processing document concept, a template provides a model from which to start. It provides a starting point from which related pages are created. Starting from one template allows us to focus on the identity of the page, without concern about behavior of the context, the header and footer. Our goal will be to first build an HTML template, which is structurally sound. Then we'll break this file, template.html into multiple files, visible via the page named template.php, which will be the template (model) for all other site pages.

Deconstructing our HTML Page

Once we have a solid HTML template file which works in all browsers, we'll save this, and study it to be broken into PHP include files.

When we decide how much to include in our header/footer files, we find out that it pays to include as much as possible inside these files. The more code that remains inside the the includes, the less coding is required to make site wide changes.

Placing all structural HTML inside the header & footer allows us to go from div to table based design (or vice versa) as needed. It also allows us to more easily accommodate other devices, as the header & footers can be swapped out dynamically inside the include files.

We can study the HTML of this page and isolate the specific parts of the page that may make good include files. A good target for this would be pieces of the page that may be consistent across many pages (not necessarily all) pages of a site. In our case, we elect to isolate a left "Nav", a "header" (a banner identifying the site) a "footer" (an identifying element including copyright info on the bottom of the page) and a left "Nav" area which may exhibit consistent site links. A good approach would be to come up with the site design basics, study carefully the HTML and identify early candidates for include files, which benefit from making changes to HTML in one file, and having it effect all applicable site pages.

In the following example we have deconstructed the HTML page above into include files. Study the code in this example for details on the page:

Include, Require & Once

When using include files we can use the function include, plus a couple of variations,require,include_once andrequire_once. Later on we'll see that the 'once' designation is great for making sure file is only included once in a page. This helps minimize some PHP errors.

Adding Dynamic Code

Include files can also include PHP code that is aware of it's current page address to greatly assist us in creating include files.

The following samples build a TD based horizontal navigational element that "sniffs" the address of the page where it is currently included, and reacts differently based on that page.

This example uses a function to check to see if the page matches the "_SERVER['PHP_SELF']" page, as seen by the server. The page info must be stripped of everything but the file name, so the directory info produced with the server info is stripped away with one of PHP's many string handlers.

This version of the header file uses an array to loop through the code. Storing the link data in an array makes it easy for the developer to add or delete link info across many pages, and without changing the code. The following example incorporates the horizontal nav element in our previous include file example:

The above example is designed to AVOID a link to the page it is currently on. A further example below features different treatment of the including page in that the TD is changed to black, the link is disabled, and the name of the page is now yellow. Additionally this example uses the same concept of "sniffing" the current page to swap out images, text and colors in the header of the including page. See the code for more details!