Creating a Website Design Templating System Using PHP

Hassan Sayed

Rate me:

4.81/5 (21 votes)

7 Feb 2008CPOL9 min read

447.6K

139

Learn how to create a website design templating system using php to be able to easily update different sections on your website by changing only few design files. The tutorial is designed for total beginners, so it is easy to understand and follow.

Creating a Website Design Templating System Using PHP

Note: Although experienced coders might find some useful information in this tutorial, this tutorial is designed to be easily understood and comprehended by total beginners.

Introduction
Requirements
The Tutorial
Code Explanation & How it Works
Extending Functionality and Usability
Conclusion

Introduction:
Whether you have a small or a huge website, you know how much hassle and time it takes to upgrade your web site pages. The upgrade process becomes even more irritating when you make a change that needs to be upgraded on every page of your website; a good example of such a change is adding a button to the header or changing the copy right information in the footer of your website.
In this tutorial I will show you how PHP comes to the rescue with only few lines of code. You can use this tutorial to be the basis to make your website easier to maintain and upgrade.

Top

Requirements:
Server/Hosting capable of running php scripts.
No knowledge of php necessary!

Top

The Tutorial

Step 1
Create a folder on your server and name it "design".
Step 2
Create the following files in the design folder:
'header.html', 'footer.html', 'right_column.html', 'left_column.html'
Step 3
Create another folder and name it "pages"
Step 4
In the "pages" directory, create a page and give it the name: 'main.html'
Step 5
Now in the root directory create a file and give it the 'index.php'
Step 6
Add the following code to your 'index.php' file (don't worry, it will be explained later!):

<?php

if (isset($_REQUEST['page']))
{
if($_REQUEST['page'] !="")
if(file_exists("pages/".$_REQUEST['page'].".html"))
$page_content = file_get_contents("pages/".$_REQUEST['page'].".html");
else
if (file_exists($_REQUEST['page'].".html"))
$page_content = file_get_contents($_REQUEST['page'].".html");
else
echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>";
}
else
$page_content = file_get_contents("pages/main.html");
$page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
$page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
$page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
$page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);
$page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);

echo $page_content;
?>
Step 7
Go to your 'main.html' and design it as you would like your website layout to look at the end, only here, instead of adding the complete header design, add !!HEADER!! and then go to the 'header.html' file that you created in the "design" folder. Now in the 'header.html', design the main header of your website. This design will be the header of all your pages at the end.

Now do the same thing for the other designs, that is: put !!FOOTER!! and design 'footer.html', !!RIGHT_COLUMN!! and design 'right_column.html', put !!LEFT_COLUMN!! and design 'left_column.html' respectively.

Or simply copy the following pre-made design:

'main.html'

<!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" />
<title>Main Page - PHP Simple Templating System By Zeronese</title>
!!COMMON_TAGS!!
</head>
<body>
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><center>
!!HEADER!!
</center>
</td>
</tr>
<tr>
<td class="column" width="25%" height="100%">!!LEFT_COLUMN!!</td>
<td> </td>
<td width="25%">!!RIGHT_COLUMN!!</td>
</tr>
<tr>
<td class="column" colspan="3"><center>
!!FOOTER!!
</center>
</td>
</tr>
</table>
</body>
</html>
'header.html'

<div class="header">Welcome To The PHP Simple Templating System</div>

'footer.html'

<div class="footer">
<center>
<a href="http://www.zeronese.net">PHP Simple Templating System is a Copy Right of Zeronese.net</a>
</center>
</div>

'right_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Advertisement</td>
</tr>
<tr>
<td>Zeronese.net offers professional web design templates for both web designers and end users. Save time and money and still get a high quality professional web site for business, ecommerce or personal use. <a href="http://www.zeronese.net">Learn More...</a></td>
</tr>
</table>

'left_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="">Home</a></td>
</tr>
<tr>
<td><a href="!!WEBSITE_URL!!tutorial.html">Tutorial Page</a></td>
</tr>
<tr>
<td><a href="!!WEBSITE_URL!!sub-directory/page.html">Tutorial Sub Page</a></td>
</tr>
<tr>
<td><a href="http://www.zeronese.net">Visit Zeronese.net</a></td>
</tr>
</table>

and to add a little touch to our design, we create a 'styles.css' file in the design folder and add the following code:

body{
background-color:#003399;
color:#FFFFFF;
}
a{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.column{
background-color:#3366CC;
vertical-align:top;
}
.header{
background-color:#336699;
}
.footer{
background-color:#336699;
}

Now give it a test drive spin! Try and test your design by using the browser to go to: main_folder_of_files/index.php?page=main.html

Top

Code Explanation & How it Works:
Of course you can tell that the 'index.php' file is doing all the work. The design is base on creating a default page and a default folder to store pages.

if (isset($_REQUEST['page']))
This php code will check to see if a page is requested.

if($_REQUEST['page'] !="")
Of course, to eliminate errors, make sure a page is entered and it is not a blank argument.

if(file_exists("pages/".$_REQUEST['page'].".html"))
A page is requested and the page argument is not blank. Now we check to see if it exists in the default folder; in our case it is the pages folder. Note that we have included the '.html' extension here so we do not need to enter it when we request the page. By using this method, we also benefit from using standard html designs for the pages.
Hint: You can change the extension of the pages as you wish. Further more if you want to use different extensions for different pages, just delete the .".html" from the statement. Do not forget that in this case, when requesting the page you will have to provide the extension.

$page_content = file_get_contents($_REQUEST['page'].".html");
If every thing is alright, assign the contents of that page to a variable: $page_content.
Note that the file_get_content function will not execute any code. That is: putting php code in your pages will not work. If you need to use any php code, either add it to your 'index.php' or to separate files and then include it in the 'index.php'.
Hint: You can still add java code since this is executed on the client's side!

else
if (file_exists($_REQUEST['page'].".html"))
$page_content = file_get_contents($_REQUEST['page'].".html");
These lines will extend and go further than the default folder. You can use it to request pages in deeper folders in your website. For example, you can design pages in a sub-directory and request it in a similar way to requesting pages in the default folder using the following command in your browser:
main_folder_of_files/index.php?page=sub-directory/page.html
Actually, we could have came straight to this statement with out adding the default folder option, but a default folder is more convenient and you don't have to enter the folder name every time you request it in the browser. Also, it is good for the tutorial purposes so you can practice more options and extend based on this!

else
echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>";
We looked for the requested page in the default folder, in the sub-directory requested but we did not find it....then it does not exist. Print an error statement!!!

else
$page_content = file_get_contents("pages/main.html");
If no page is requested at all, go to a default page. In our case here to the main page. This could be your error page, but it is convenient to go to the main page in this case because that is how the index file is translated on servers. It is the main page!

$page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
$page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
$page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
$page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);
This is the fun part! Our $page_content variable now holds the design and the content of the page requested. We simply use the str_replace function to replace our tag holders with our predesigned pages.

$page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);
Added to demonstrate how you can add any file and create your own files and place holders. The '!!COMMON_TAGS!!' place holder in this case has the link to the styles sheet that we created in the design folder. This becomes handful if you want to add any content that you want to change more often. For example, you can create a text file and put inside it your add sense code, create a place holder for it, add a similar line of code to this one, then add your place holder to the right or left column to see it on all pages instantly.

echo $page_content;
Now show our design. Voala.... simple!!!

Top

Extending Functionality and Usability:
To make this even greater, we can make our links static and search engine safe.
Create a .htaccess file in the root folder and the following lines of code:

RewriteEngine on
Options +FollowSymLinks
RewriteRule (.*).html ?page=$1

Save the .htaccess file and instead of having to write main_folder_of_files/index.php?page=main.html to go to your main page, you simply can now go there by typing: main_folder_of_files/main.html
Also, typing main_folder_of_files/ will take you to the default page!!!
Don't worry, it also works with sub directories too, try: main_folder_of_files//sub-directory/page.html

Also you can extend by adding static variables that rarely is changed but you want them to change on all the pages once changed. For example, let's say you want to transfer your design to another domain name, and you want to change the links to the domain name instantly. This can be a hard task if you have to change it page by page.

To easily do this, make it a variable, and this is how it is done:
Add the following code to your 'index.php' file just after the opening statement of your code, that is: after the <?php
$website_link = "http://www.mywebsitelink.com";

now before the 'echo $page_content;' statement add this line of code:
$page_content = str_replace("!!WEBSITE_LINK!!", $website_link,$page_content);

It should be obvious now that you can add the !!WEBSITE_LINK!! place holder to any of your pages to get it replaced by your website link!

Top

Conclusion:
This tutorial is designed for total beginners, it is simple yet very powerful and could be a base for very large and complicated systems that want to offer an easy way for their clients to design their script. Many scripts have great functionality, but when it comes to the design templating they lack this important feature, or when they have the templating system, the templating system is usually very hard to manipulate for un-experienced users.
Using this method will separate the script code from the design. This separation is useful in numerous ways. One very important issue is when modifying the design you don't have to worry about the code!

I hope this tutorial has been useful for some one. Feel free to use it in your scripts and designs even the commercial ones. However the script and tutorial files included are not for resale or distribution without our permission and it is only fair and polite to credit and reference this page!

Top

The Author: Hassan Sayed
Webmaster at http://www.zeronese.net a place for webmasters to find everything needed for a website. Web developement, professional website templates, web hosting, web directory, article directory, webmaster resources and tools.

Have fun coding!