In this article we will deal with one of the most frustrating problems facing any webmaster when constructing their website: the problem of maintaining potentially hundreds of pages, most of which are mostly the same in terms of layout but which differ from page to page only in content. What do you do when you want change, say, the text which appears in the footer, which appears on every page? Ideally you could only have the footer stored in one place, so that you only have to change it once. In a worst-case scenario you've put the footer in every single individual file on the site, and so you might have to change hundreds of files. Very tedious! With a bit of knowledge we can reduce this administrative workload by several orders of magnitudes.
We will use a simple but powerful server-side technology to achieve this: PHP's include() function. For this article we assume some basic knowledge of HTML. If you need a refresher, check the w3c website tutorials.
A very brief introduction to PHP
PHP is a server-side scripting language. What this means is that if you look at a PHP file which is stored on your local computer's hard disk with your web browser it would seem incomplete because there are certain special tags which get parsed (read, understood and acted upon) by the web server (the place where you upload your website to by FTP).
Files which contain these special tags are given the .php suffix, instead of the normal .html or .htm suffix. This tells the server to seek out and parse the special tags in the file, and to act on them.
Let's look at a simple example of PHP tags:
<html><head><title>Simple PHP example</title></head><body>
<h1>The time is <?php echo date("d/m/y"); ?></h1>
</body></html>
This simple HTML file should look familiar with the exception of the statement <?php echo date("d/m/y"); ?>.
Let's break it down. The first bit, <?php tells the web server that what follows is not normal HTML, and puts the server into PHP mode. The corresponding ?> puts the web server back into HTML mode. You can think of this as like a normal HTML tag like <img src="image.jpg"> which gets replaced with an image when it is rendered (viewed in a browser), except that the replacement here only happens when the file is uploaded to the web server.
Now on to the PHP bit. The statement echo date("d/m/y"); tells the web server to echo (show in the web browser) the current date, formatted like "d/m/y". There are two important things to notice:
Each PHP statement ends with a semicolon to deliminate the end of a statement, like a full stop in a sentence.
date() is an example of a function call which is why it has brackets around its input. A function (like in maths) refers to a named entity which gives a certain output when presented with a certain input. In this case, its input is the text "d/m/y" and its output is the current date, formatted like 21/12/1986.
Now we have all the knowledge we need to get back to our aim, which is to construct a template system.
So what do we mean by templates?
The very essence of a template system is the desire to be able to extract HTML that is common to a number of pages and put it in a separate place.
Let's look at a simple example. Say we have a basic website with three pages. Home, About Us and Contact Us. Here they are:
home.html:
<html><head><title>My Company's Website</title></head><body>
<h1>Welcome to My Company's Website. This is the homepage.</h1>
<img src="homepage.jpg" />
<p>You can read <a href="aboutus.html">about us</a> or <a href="contactus.html">contact us</a></p>
<h3>&copy; 2007 My Company</h3>
</body></html>
aboutus.html:
<html><head><title>My Company's Website</title></head><body>
<h1>About us</h1>
<p>Our company was founded in 2002 at the height of the dot-com bust...</p>
<h3>&copy; 2007 My Company</h3>
</body></html>
contactus.html:
<html><head><title>My Company's Website</title></head><body>
<h1>Contact Us</h1>
<p>To contact us you can email us at <a href="me@mycompany.com">me@mycompany.com</a>
or you can phone us on 0800 000 000.</p>
<h3>&copy; 2007 My Company</h3>
</body></html>
Now you can see straight away that there's a lot of repetition here. In fact, the only HTML which changes between the three pages is that which is highlighted in italics above. We could call this the content region. Above it we have the header region and below it we have the footer region.
Now suppose the year changes and we want to update our copyright notice to say 2008. At the moment we'd have to change it in all three files. If the website had more than a hundred pages, this would become a real drag. You might be able to see where this is going... we can put the common HTML which we call the header region in a fragment file called header.php, and the footer region in a file called footer.php. So we have:
header.php:
<html><head><title>My Company's Website</title></head><body>
footer.php:
<h3>&copy; 2007 My Company</h3>
</body></html>
The PHP include() function
Now the last remaining piece of the puzzle is to be able to construct the Home, About Us and Contact Us pages to include these fragments at the top and bottom of the pages. As you may be able to guess, we're going to use PHP's include() function to achieve this. When it comes to functions, we typically talk about input and output - what information you pass in to the function, and what it comes out of it as a result. The input to the include() function is the textual name of a file, enclosed in quotes. The output * is the contents of the referenced file. This is the key to our template system, as it will allow us to include the header and footer in all the content files (such as Home, About Us, etc) on the site.
Now suppose we have the HTML fragment files as described above, header.php and footer.php. Let me show you an example PHP file which includes them:
home.php:
<?php include("header.php"); ?>
<h1>Welcome to My Company's Website. This is the homepage.</h1>
<img src="homepage.jpg" />
<?php include("footer.php"); ?>
Here we have used the include function twice. First to include the header in the header region and secondly to include the footer in the footer region. Note that the file itself has changed from home.html to home.php. This is because the file contains PHP tags, so we must instruct the web server to parse it as a PHP file. Hence we suffix the filename with .php.
Now supposing we have defined aboutus.php and contactus.php similarly, we can now see that if we want to change the copyright date to 2008 we need only change it in footer.html and all three of our pages will be updated immediately!
Now this immediately gives us all the great benefits we were hoping for. Suppose there were hundreds of content pages on your site, each of which has include("header.html") at the top and include("footer.html") at the bottom. We can edit the elements common to all of them in only one place. Magic!
(*) For the sake of simplicity, I have lied slightly - in fact the include() function does not actually output anything, but it does have a side effect which is that the contents of the referenced file are included in-situ. This distinction between output and side-effect is only really of interest to programming language theorists so you probably don't need to worry about it!
Advanced templating 1 - Changing the Title with Optional Variables
Now that you have seen the power of PHP templates, we can explore some of the more advanced usages of them in conjunction with a couple more PHP features.
The first thing we might want to do is to set the title of each page separately. One way to do this is with a PHP variable. Variables are like placeholders for a value - typically a number or a piece of text. Variables are indicated by suffixing their name with a $ sign. So for example, we might set the value of the variable $title to different things on each of our three pages.
home.php:
<?php $title = "Home Page for My Company"; ?>
<?php include("header.php"); ?>
<h1>Welcome to My Company's Website. This is the homepage.</h1>
<img src="homepage.jpg" />
<?php include("footer.php"); ?>
Now we can change header.php so that it reads:
<html><head><title><?php if(isset($title)) { echo $title } else { echo "My Company"; } ?></title></head><body>
This demonstrates the use of another PHP construct, the if-statement. Translated into English, it would read "if the variable $title is given, then use that as the title, else use the default title 'My Company'".
This demonstrates assignment ($title = "Home Page") and usage of variable contents (echo $title) to achieve a flexible way of changing the title on a per-page basis
Advanced templating 2 - Achieving Sub-sections with Optional Fragment Files
Now suppose there is one section of your website which has various sub-pages. You might wish to include a navigation bar on only those pages. But of course you don't want to have to update all the pages in this section when one of the page titles changes. So we can define an optional fragment file, call it section-subnav.php, which might look like this:
section-subnav.php:
<div style="float:left; border:5px; width:200px;">
<p>In this section you can view pages:</p>
<ul><li><a href="section-one.html">One</a></li>
<li><a href="section-two.html">Two</a></li>
<li><a href="section-three.html">Three</a></li></ul>
</div>
Then you can include this fragment file from only the pages which you consider to be part of the section. Simple eh?
Conclusion
If this tutorial has inspired you to experiment with PHP, that's great! What better place to test out your new-found knowledge than here at Digital Crocus? For a mere £2.50 per month you can get your hands on a complete enterprise-ready PHP environment that's also easy to use. With a Digital Crocus account, trying out this simple yet powerful templating technique is just a couple of FTP uploads away. What's more, we give you a test domain, yourname.users.digital-crocus.com so you can try it out without having to buy your own domain name or go live with a site you're working on. You can get set up with a Digital Crocus online in minutes, click here.
For more information on PHP, see the php.net/docs website. For a complete HTML reference, try w3c.
