The image above shows what different parts of a general website are known as. It is certain that for most websites (even this one), there is a consistent look. E.g. the header, sidebar and footer remain the same for all the pages of a website such that you may create many pages from one page just by changing the body text and saving as a different file. But suppose if you have created, like 10, 20, 30, 50 or even more pages that way and now you want to change the copyright year on the footer or add a link on the sidebar, what would you do? There is only one way, to change all the pages which is very cumbersome.
Well, PHP has got features to include consistent parts of pages on many pages such that editing only that part at one place would be enough to change the whole site.
It can be done in the simplest way as following:
<html>
<head>
<title>Sample Page</title>
</head>
<body><?php
require('header.php');
//body text starts
?>
---html body text here---
<?php
//body text ends
require('sidebar.php');
require('footer.php');
?>
While a simple HTML page designed with the help of tables has the following form:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<table width="90%" height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#CCCCCC">
<td height="90" colspan="2"><h1>My Website</h1>
<p align="right"><em>Slogan Over Here</em></p></td>
</tr>
<tr>
<td width="75%" valign="top"><h2>Main Content Over Here</h2>
<p>Blah! Blah</p>
<p>blah blah</p></td>
<td width="25%" valign="top"><p align="center"><strong>Sidebar</strong></p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
</td>
</tr>
<tr>
<td height="50" colspan="2"><div align="center">Footer © 2008</div></td>
</tr>
</table>
</body>
</html>
Header part in Red
Sidebar part in Green
Footer part in Blue
The code above uses a table to design the page layout and the page looks something like below:
So what we are actually doing is to create different files for each section as below:
‘header.php’ would include:
<table width="90%" height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#CCCCCC">
<td height="90" colspan="2"><h1>My Website</h1>
<p align="right"><em>Slogan Over Here</em></p></td>
</tr>
‘sidebar.php’:
<td width="25%" valign="top"><p align="center"><strong>Sidebar</strong></p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
</td>
</tr>
‘footer.php’:
<tr>
<td height="50" colspan="2"><div align="center">Footer © 2008</div></td>
</tr>
</table>
</body>
</html>
Thus instead of statically copying and pasting to include consistent parts on each page we are using PHP’s function to do so. So whenever we’d have to change the header, footer or sidebar we’d just have to edit the respective file and the whole site would reflect the changes made.
Having the header, sidebar and footer, we can create many pages like below, which share the common consistent parts:
Homepage:
<html>
<head>
<title>Home Page</title>
</head>
<body>
<?php
require('header.php');
//body text starts
?>
<tr>
<td width="75%" valign="top"><h2>Main Content Over Here</h2>
<p>Blah! Blah</p>
<p>blah blah</p></td>
<?php
//body text ends
require('sidebar.php');
require('footer.php');
?>
Page1:
<html>
<head>
<title>Page 1</title>
</head>
<body>
<?php
require('header.php');
//body text starts
?>
<tr>
<td width="75%" valign="top"><h2>Page 1</h2>
<p>Blah! Blah for page 1</p>
<p>blah blah</p></td>
<?php
//body text ends
require('sidebar.php');
require('footer.php');
?>
Page2:
<html>
<head>
<title>Page 2</title>
</head>
<body>
<?php
require('header.php');
//body text starts
?>
<tr>
<td width="75%" valign="top"><h2>Page 2</h2>
<p>Blah! Blah for page 2</p>
<p>blah blah again</p></td>
<?php
//body text ends
require('sidebar.php');
require('footer.php');
?>
You can create as many pages as you would like following the above method an ll of them would have the same consistent look. More importantly you can change just the parts (header, sidebar or footer) at one place (from the respective files) to change the whole site.
Previous Articles: