After implmenting this template system in your webistes, you will achieve the following benefits
- If you have a lot of pages that use the same design. If you want to make a layout change in the header, menu, footer or right section then you don't have to update numerous files. You will have to edit a single php file
-
You will have less vertical scrolling when typing PHP code as the whole section will be replaced by a single line of php (i.e we will use php include function to include an external file into the main script and the number of lines in the main script will be reduced).
-
You will have a consistent look and feel across the website.
-
Designers can modify different sections without intervention from the programmer.
Before you start, you can
Download files in this tutorial
Now lets start creating our own custom template system. So what is the technique ???
The idea is to create separate files for sections that use the same design. Then include these sections in our main page. In this tutorial i haved created 4 sections i.e
header,
top-bar,
left menu and the
footer. I have created separate files for these sections and then included these sections in main pages.
See the sample code of my home page below
<?
/* This file wil declare all the configuration varibles, we
* have only 1 variable in it to store appliation title
*/
include("includes/config.php");
/* All the pages will have this varible at the top
* to store the title of every page. This varible will be
* used in the title tag of HTML and can also be used elsewhere
*/
$page_title='Home';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<title><?=APP_TITLE ?> - <?=$page_title ?></title>
</head>
<body>
<div id="container">
<div id="header"><? include("includes/header.php"); ?></div>
<div id="topBar"><? include("includes/top-bar.php"); ?></div>
<div id="menu"><? include("includes/menu.php"); ?></div>
<div id="content">
<h1>The main content will go here ...</h1>
</div>
<br style="clear:both;" />
<div id="footer"><? include("includes/footer.php"); ?> </div>
</div>
</body>
</html>
The included file can be HTML files but sometimes you also need to write PHP code in sections, so i have saved these files as PHP. The code for individual files is given below
Config
<?
define("APP_TITLE","Kings Hospital [Admin Panel]");
?>
Header
<div>
<h1 style="color:#F7F7F7;"><?=APP_TITLE ?> - <?=$page_title ?> </h1>
</div>
Top Bar
<div style="background-color:#dadada;border-bottom:solid 1px #BBB; text-align:right; padding:5px;">
Logged in as Administrator <a href="#">Logout</a>
</div>
Left Menu
<div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="employees.php">Doctors</a></li>
<li><a href="employees.php">Employees</a></li>
<li><a href="departments.php">Departments</a></li>
<li><a href="groups.php">Appointments</a></li>
<li><a href="locations.php">Settings</a></li>
</ul>
</div>
Footer
<div style="border-top:dotted 1px #CCC; padding:20px;">
Copyright All rights reserved
</div>
CSS
body{
margin:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#container{
width:1004px;
margin:0px auto;
border:solid 1px #CCC;
border-top:none;
}
h1{
font-family:Georgia, "Times New Roman", Times, serif;
margin:0px;
padding:5px 0px 15px 15px;
font-size:22px;
}
#header{
background-color:#26469B;
padding:20px 0px 0px 30px;
}
#topBar{
background:#F8F8F8;
}
#menu{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
width:180px;
margin:0px;
padding:20px;
border-right:dotted 1px #CCC;
float:left;
}
#content{
float:left;
width:742px;
padding:20px;
padding-bottom:0px;
}
#footer{
font-size:11px;
}
The last thing is how will you create other pages? Very simple, just save-as this page & add content in the content div and change the title of the page at the top.
Aprico