Building Maintainable Websites
Written by: Anchor on 26 January 2004
Separate content and layout
The graphical appearance of your website and the content it contains
are two separate elements and should be created and maintained independently
of each other.
For consistency the graphical elements of your site should be the same
on most pages, so it follows that the html for the graphical elements
really should only be stored in one location
to ensure it can be easily and quickly be updated.
Programming tools such as server side includes and PHP allow you to split
the layout and content into separate elements.
Building sites with templates
If we agree on the need to separate layout and content, the next question is
"what's the best way of achieving this?".
In many cases, especially on smaller sites you'll find that one template serves
the needs of all pages on your site (with the exception of the homepage).
On larger sites there may be numerous page templates required as the layout
changes for each sub-sections of the site.
Generate your standard page layout in html, perfect the appearance, run your
browser compatibility testing to ensure everything stays the same. Then you
can chop the file up...
Working with server side includes
Server side includes provide a very simple way of separating the common elements
of your files from the content.
Example 1
A simple of example of a file constructed using SSI. In most cases you will need
to give the file an extension of .shtml, the shtml extension tells the web server
to parse the file, looking for include statements. Without the .shtml extension the
file would be treated like a normal html file and the include statements would appear
as comments.
The file names of the those being included, in this case "header.html" and "footer.html"
don't need to end in .html, you may wish to give them ".incl" extensions to make it
easier to manage your files.
header.html and footer.html do not need to be complete html files, they are just plain
text files with portions of html code in them.
example1.shtml
----------------------------------
header
----------------------------------
content goes here
----------------------------------
footer
----------------------------------
|
<!--#include file='header.html' -->
content goes here
<!--#include file='footer.html' -->
|
header.html
<html>
<head>
<title>Page title</title>
</head>
<body>
|
footer.html
text for the footer goes here
</body>
</html>
|
In our example every page would have the same header and footer, if you
wish to be able to use a different navigation menu for example on each page
then you may need to use multiple include statements.
You will find a wealth of information about using SSI, and the different
commands that can be used on the following site:
Using PHP for includes
PHP can be used in much that same way to split up the common elements of php pages.
The major of advantage of using php is that you have greater flexibility over what
you can achieve and greater capacity to add dynamic elements to your pages now or
in future. PHP can easily be used to include information from databases or other files.
Example 2
Following our earlier example of using server side includes we can achieve the same thing
in php.
example2.php
----------------------------------
header
----------------------------------
content goes here
----------------------------------
footer
----------------------------------
|
<?php include('header.php'); ?>
content goes here
<?php include('footer.php'); ?>
|
header.php
<html>
<head>
<title>Page title</title>
</head>
<body>
|
footer.php
text for the footer goes here
</body>
</html>
|
To extend on this example and show how PHP can be used more effectively
than server side includes.
For example, rather than every page having the same title, you can define
the page title in your php pages by assigning a value to a variable which
is passed on to the header.php page:
example3.php
|
header.php
|
<?php $page_title="SSI Tutorial"; include('header.php'); ?>
content goes here
<?php include('footer.php'); ?>
|
<html>
<head>
<title>
<?php echo $page_title; ?>
</title>
</head>
<body>
|
Related Links: |