Creating Your First Template Driven PHP Website Part 1

Written by Handy PHP Administrator

Monday, 23 April 2007 15:48

Article Index
Creating Your First Template Driven PHP Website Part 1
Page 2
Page 3
All Pages

Many people get discouraged when trying to start or even maintain a website because there are so many aspects of the website that need to be planned for in advanced. Since working with only HTML or even adding CSS and JavaScript can quickly limit the scalability of a website, many people simply give up! Here is an example of a situation where a new webmaster might abandon his dreams of running the World's greatest website!
Imagine that you are designing your website from scratch and you have about 20 pages all created and maybe even uploaded or published on the Internet. Each of the pages was easy enough to create since you planned ahead and made a blank page with all of the layout and images setup. All you have been doing is adding content to the blank and saving it as a new file! This is always a good idea, since it ensures that your website will have a uniform look throughout! As you are working on the 21st page, you realize that the menu doesn't have a link to the newest page. Usually, this can be fixed by adding the link to the file that is the next level up and hope that people will find it by following the flow of information that leads to it. Unfortunately, this newest file is a section header. It will have many subsections under it that can only be linked to from this page. Your only option now is to edit ALL of the previous 20 files and republish them with the updated menu.
Problem solved, right? well, just as you were getting ready to save that new file, you noticed a spelling error that is now on every page. You could let it slide by and hope nobody will notice but then again, you left a letter out of your website's name! So today, you have create 21 pages for your website and edited everyone of them twice! So, instead of having created 63 pages in one day, you wasted a bunch of time fixing small problems over and over again which will only get worse as your website gets larger. What if your website was modular? What if every piece of information on your website was stored in it's own file or database and only stored once. If that were the case, then you could have edited one menu file instead of 21seperate content files! That would save you a bunch of time when you add content, fix problems, and change the look of your website!
This modular website system is the basis of Content Management Systems and other template based web scripts! Here is the basic concept behind such a system. The system includes a template file or files, content or navigational files, and a handler script! The template is much like your "blank" web page. This template has all of the general information for your websites layout, color, images, and design. Additionally, this template file can be mostly HTML and CSS! The content or navigational files include everything that your user will use. These files are the modules and will include written content, menus, forms, and media. Finally, the handler script puts everything together for you! Depending on what rules you have included and what the user has requested, the handler will add the correct modules into the template and send it to the user's browser.
The template can be as simple as 99% HTML and CSS or as complex as nearly completely PHP based. No matter how it is coded, in the end only HTML or XHTML will be outputted to the browser. If you want to go the with a mostly HTML template, you still have 2 options to choose from. The first option is to build everything with HTML and then where ever the content item (module) should be, place a PHP command like the include function. The second option is a keyword system. You would use a keyword instead a PHP command.
Simple HTML Template Sample 1 - PHP Commands

CODE: template.php

<html>
 <head>
 <title>
 <?php echo "$site_title - $page_title"; ?>
 </title>
 </head>
 <body bgcolor="#aaaaaa" text="#000000" link="#0000ff" vlink="#800080">
 <table bgcolor="#f0f0f0" border="1" cellpadding="0" cellspacing="1" width="100%" height="100%">
 <tr>
 <td colspan="2" align="center" valign="middle" height="20">
 <font size=20pt"><?php echo $header."\n"; ?></font>
 </td>
 </tr>
 
 <tr>
 <td colspan="1" align="center" valign="top">
 <?php echo $main_menu; ?>
 </td>
 <td colspan="1" align="center" valign="top" width="90%">
 <?php echo $main."\n"; ?>
 </td>
 </tr>
 
 <tr>
 <td colspan="2" align="center" valign="top" height="5">
 <?php echo $footer."\n"; ?>
 </td>
 </tr>
 </table>
 </body>
 </html>

In this sample, we use the echo function to display content in the correct positions.For this file to truly work, it has to be included in another PHP file. In this case, the handler file (index.php) requires the inclusion of the template file like so:

Simple index.php Sample 1 - PHP Commands

CODE: index.php

<?php 
 
 $site_title = "My Website";
 $page_title = "Sample Template Page 1";
 $header = $page_title;
 $main_menu .= "<a href=\"http://www.handyphp.com\" title=\"Handy PHP - Free PHP Resources and Help\">Handy PHP</a><br />";
 $main_menu .= "<a href=\"http://www.google.com\" title=\"Google - Internet Search Engine\">Google</a><br />";
 $main_menu .= "<a href=\"http://www.joomla.org\" title=\"Joomla! - Open Source Content Management System\">Joomla!</a><br />";
 $main_menu .= "<a href=\"http://www.vwone.com\" title=\"VW One - Volkswagen Information Website\">VW One</a><br />";
 $main_menu .= "<a href=\"http://www.forum500.com\" title=\"Forum500 - A General Information Website\">Forum500</a><br />";
 $main .= "<div style=\"text-align:left; margin:10px;\">Welcome to my first template based website!</div>";
 $footer .= "&amp;copy; 2007 My Website";
 
 require('templates.php');
 
 ?>

This handler script creates all of the content for the web page and then includes the template file which has all of the echo functions. So by including the file after setting all of the variables, the echo commands insert that data where it belongs! The output looks like this:

As you can see, this is a very basic template and doesn't benefit from any styling or fancy HTML. With a little CSS and some interesting content, this would make for a easy to navigate website.

Using this system with a few modifications, you can create a static website with templates. Basically, you would create a file for each of the modules and a seperate file for each content page like so:

main_menu.php Sample 2

CODE: main_menu.php

<?php 
 $main_menu .= "<a href=\"http://www.handyphp.com\" title=\"Handy PHP - Free PHP Resources and Help\">Handy PHP</a><br />";
 $main_menu .= "<a href=\"http://www.google.com\" title=\"Google - Internet Search Engine\">Google</a><br />";
 $main_menu .= "<a href=\"http://www.joomla.org\" title=\"Joomla! - Open Source Content Management System\">Joomla!</a><br />";
 $main_menu .= "<a href=\"http://www.vwone.com\" title=\"VW One - Volkswagen Information Website\">VW One</a><br />";
 $main_menu .= "<a href=\"http://www.forum500.com\" title=\"Forum500 - A General Information Website\">Forum500</a><br />";
 ?>

header.php Sample 2

CODE: header.php

<?php 
 $header .= $page_title;
 $header .= "<br />Probably Some Type Of Advertisement Here!<br />";
 ?> 

footer.php Sample 2

CODE: footer.php

<?php 
 $footer .= "&copy; 2007 My Website";
 ?>

index.php Sample 2

CODE: index.php

<?php 
 
 $site_title = "My Website";
 $page_title = "Sample Template Page 2";
 $main .= "<div style=\"text-align:left; margin:10px;\">Welcome to my second template based website!<br />I hope that you enjoy learning PHP in this manner. I have found that I learn best if I can see the code and the output together. Many times you can't see the output until you sit down and write the script just to find out that you don't like what the script does!</div>";
 
 require('header.php');
 require('main_menu.php');
 require('footer.php');
 require('template.php');
 
 ?>

These files would output the following:

The output is basically the same but now the only difference in the handler file is the title and content which means that you can create as many handler files as you wish. Basically, your website will be it's normal static content but your template, header, footer, and menu can all be edited quickly and easily. If you use this same method for every page on your website, then you can change thelayout for the entire website be only editing the one template file! Or if you need to add a menu item, you can make that change for the entire website by editing the menu file. This makes creating and maintaining your website much easier.

Using all of the same files as before except the index.php file we can create additional content pages like so:

content1.php Sample 2

CODE: content1.php

<?php 
 
 $site_title = "My Website";
 $page_title = "Sample Template Content Page 1";
 $main .= "<div style=\"text-align:left; margin:10px;\">Here I can place any kind of content I want. By using a template and a few static content files with each page of my website, I can quickly add, reformat, update, or otherwise modify the content on my website.</div>";
 
 require('header.php');
 require('main_menu.php');
 require('footer.php');
 require('template.php');
 
 ?>

The file above would output the following when used with the files specified:

This is a different page than index.php but was created the same way. This means that the website is static in that the pages are put together using direct data. No manipulation of data has occured and the pages are dumb in nature. Dynamic content can be easily added to the website at this point on a limited basis since the use of a template and modules allows information from one file to influence information in another file.

Using this method of templating will provide you with a quick and easy website or can be used as the means by which you convert your pure HTML website to PHP. For more information on converting yout HTML website to PHP, you may find this article helpful: Converting HTML to PHP Basic Tutorial. Additional tutorials regarding this topic will follow soon.

{mos_fb_discuss:4}

< Prev		Next >

Last Updated on Friday, 02 October 2009 21:25