Requirements:
1. Access to a server with PHP installed
2. A text editor to create the files
3. A working knowledge of HTML
Fed up of having to make a change to multiple pages because you added a new link to your navigation bar or need to update your disclaimer at the bottom of the page?
Well, with a simple bit of PHP, you can overcome this
For this tutorial, I will only actually create one page as an example, but the principle will work for two, twenty, a hundred, or more, pages.
The Files
Two files are needed
index.php and
page.php. For tidiness, I tend to put the
page.php into a sub-folder named
includes or similar.
Copies of the two completed files are attached to this tutorial.
The Template
The contents of this file will be the functions to draw the template of the page this will be the common parts of the page, including the HTML skeleton and things like the navigation bar.
For this tutorial, we will use the HTML skeleton from the
HTML 101 tutorials.
PHP Code:
function page_Header($title)
{
// creates the common page header HTML
// $title = page title in browser
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><?php echo $title; ?></title>
<?php
// do not close the <head> element - allows individualisation
}
The variable
$title allows us to modify the page title displayed in the browser making it easier for users to find the page in a history listing. It is also a good idea for search engines.
Notice how the <head> section is not completed in this function this is so that an individual page can have extra information placed in this section before we close it. While we would like to have as much as possible placed in a common function like this, sometimes we do need individualisation of a page.
The next function closes the <head> element, and starts the <body>:
PHP Code:
function page_Bridge($heading, $subheading)
{
// closes the <head> element and starts the <body>
?>
</head>
<body>
<h1><?php echo $heading; ?></h1>
<h2><?php echo $subheading; ?></h2>
<hr />
<?php
}
The use of
$heading and
$subheading allows us to create individual headings on the page.
PHP Code:
function page_Navigation()
{
// creates the navigation links
?>
<div class='standard' id='div_nav'>
<a href='index.php'>Home</a> ||
<a href='about.php'>About</a> ||
<a href='links.php'>Links</a>
</div>
<?php
}
The rest is all pretty much self-explanatory (and is available in the attached file)
The Page
Once you have your template in the
page.php file, you now need to create the actual page (in this case
index.php) for display.
PHP Code:
<?php
// index.php
// Created by: Stuart Jones
// Created on: 30th June 2005
// This file is freely distributed as part of a tutorial
include "includes/page.php";
// this means all functions in page.php are now available in index.php
page_Header("Example :: Home");
// if you want to, you could put a <script> or a <style> which is required
// only by this page
?>
<script src='scripts/welcome.js' type='text/javascript'></script>
<?php
page_Bridge("Example", "Home");
// You could insert more individualised HTML here..
page_Navigation();
// ...and here too
page_MainStart();
// this is the actual content section - any valid HTML can be entered here...
?>
<p>
Welcome to the PHP/HTML tutorial: "My First PHP"
</p>
<p>
I hope you find it useful.
</p>
<?php
// ...and now we close it all
page_MainFinish();
page_Disclaimer();
page_Footer();
//----------------------------------------------------------------------------
// END OF FILE
?>
The reason why sections are broken up into the following functions:
Code:
page_Header("Example :: Home");
page_Bridge("Example", "Home");
page_Navigation();
page_MainStart();
page_MainFinish();
page_Disclaimer();
page_Footer();
is that this offers a lot of flexibility in the template, with very little effort in future pages.
I hope that this is useful to anyone starting out in PHP look out for more tutorials at HTML Forums
Add to del.icio.us 
Can you digg it?
Linear Mode
