Home > Articles > Using PHP as Your Template Engine > Page 5/6

PTE - Page 5

So what exactly do header.php and footer.php look like?

They look like the html code for your site design.

Sound too simple?

You're right - there's a lot more to it than that.

For example, on this web site, I have some pages that need JavaScript libraries loaded, so I had to support that. Plus, there's the obvious need to change the document's title (window title) depending on what page it being viewed. Also, you might want to put some meta-tags in the head element of your page. These are all needs of individual pages, however, these things can be stored in databases or config files to make updating an entire web site simple and easy.

I also needed some standard functions available on all pages, so the header file was a logical place to put this include - which is at the top of the file.

Also needed was a way to be able to modify the body tag for calling a JavaScript function onLoad. And finally, I wanted to be able to automatically do breadcrumb navigation links based on variables set up on the various individual pages. This is my header code as of 11/15/2006

<?php

require_once ( $_SERVER['DOCUMENT_ROOT'] . '/functions.php' );

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="verify-v1" 
content="TKNITUAudHkW5wik7x4MBltWT/xhjrwaGPa+3SXwhys=" />

<meta http-equiv="Content-Type" 
content="text/html; charset=iso-8859-1" />
<?php

if ( $title == 'Home' )
{
    ?><title>Professional PHP and MySQL Programming Services - Home</title><?
}
else
{
    ?><title><?php echo $title; ?> - Professional PHP and MySQL Programming Services</title><?
}

if ( isset( $scripts ) )
{
    foreach ( $scripts as $source )
    {
        ?><script type="text/javascript" src="<?= $source; ?>"></script>
        <?php
    }
}
?>
<link href="/css/site.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/pngfix.js"></script>
<![endif]-->
</head>
<?

if ( isset( $onload ) )
{
    ?><body onLoad="<?= $onload; ?>"><?
}
else
{
    ?><body><?
}
?>
<div id="page">
    <div id="header"><a href="/"><img alt=" Home " src="/images/header/top.jpg" /></a><br />
        <a href="/"><img class="noPrint" alt=" Home " src="/images/header/home.jpg" /></a>
        <a href="/products/">
        <img class="noPrint"alt=" Products " src="/images/header/products.jpg" />
        </a>
        <a href="/quote.php">
        <img class="noPrint" alt=" Request Quote " src="/images/header/request_quote.jpg" />
        </a><a href="/testimonials.php">
        <img class="noPrint" alt=" Testimonials " src="/images/header/testimonials.jpg" />
        </a>
        <a href="/articles/">
        <img class="noPrint" alt=" Articles " src="/images/header/articles.jpg" />
        </a><a href="/contact.php">
        <img class="noPrint" alt=" Contact Us " src="/images/header/contact.jpg" />
        </a>
    </div>
    <?= breadcrumb( $breadCrumbs ); ?>
    <div id="outerContent">
        <div id="content">

Some new lines have been added to the code to improve readability.

If I ever need to programatically modify the links at the top of the page, I will create a template file for that part of the page and load that template from within header.php; with, perhaps, some logic in the template itself for determining how or if to display.

Continue Reading on Page 6

Jump to page: _1_ | _2_ | _3_ | _4_ | _5_ | _6_

Thank you for reading! Feedback may be left by using the contact form
Interesting and/or informative comments will be posted on the article comment page.


For web site hosting I recommend - www.bluehost.com