TUTORIAL: A basic templating mechanism for PHP

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Introduction



This tutorial was made assuming that no or very limited knowledge of PHP is known by the reader and some knowledge in HTML. This technique is not hard to implement, easy actually, but quite hard to explain so bare with me here.

The main purpose of this tutorial is to show of an easy way for a person to create/manage a site easily without having to edit every page of the site if you change one thing. Mostly it has being solved by using CSS externally and then linking it on every page. But what if you need to change the CSS? What if the location of your external CSS file changes and you need to change 50+ pages? It'd take a long time wouldn't it? Well, this tutorial will help you fix that using PHP.

Well, you don't have to use PHP, for this you can use some other languages, but I only know of a sure way in PHP and I use it. Most of the other web developers/programmers use this technique as well and if you don't, you might want to start doing this to make it easier for you to make and manage your site much more easier. Certainly helpful.

You would learn, if you haven't already, how to include pages using PHP into other pages and how it would help you in creation of your site. The codes in PHP that you would learn/use in this tutorial would be how to store things into variables, using the "echo" command and how to include pages into other pages. They would all be explained on the tutorial as we go through them.

Testing if you have PHP Enabled



If you know you have PHP on, or if you're just reading this tutorial, you can skip this section.

Please take note that to test it you would either have to have wamp installed (or any other PHP enabled servers), or if you have an on-line server, make sure it has PHP enabled on it. If you don't know how, than make a file, save it as "test.php" and put the following code in it...

PHP Code: [ Select ]
<?php phpinfo(); ?>


If you see tables filled with information on them, that you have PHP enabled, but if you see the line of code that you have written in on the test.php, than you don't have PHP enabled. If the test fails altogether, than change the code into the following.

PHP Code: [ Select ]
<?php
$test = 'You have PHP enabled';
echo $test;
?>
  1. <?php
  2. $test = 'You have PHP enabled';
  3. echo $test;
  4. ?>


That's just another simple test for the same thing.

Saving your work



If you are making your site as you read the tutorial, I advice you to save the pages that you would include into other pages into a different directory. You can name the directory as "Includes". You don't have to capitalize the first letter, but I do that to save confusion later on in the coding.

The Configuration File



The main purpose of the configuration file is to set universal variables that would/could be used throughout the site, or portions of the site. It would help you later on with management of your site when you want to fix something that is used about in every page of your site. Such as the administrator e-mail. This file would be included into every other file in one line of code. How? Just read on and find out.

Mostly, the main variables could be the site name, site url, meta tags such as description or keywords if they would be the same throughout the site.

Setting the variables that would have things stored into them shouldn't have any dashes or anything in them. Even if the variable name would have two or more words in them. Just capitalize the first letter of each word to show the ending of one word and beginning of another word. This would save you from encountering PHP errors or anything like that.

It is best to put divisions in your configuration file if certain portions of the variables aren't for the whole site (but can be used throughout), but mainly aimed for a certain portion of the site, such as contact us page. You canalso nullify a variable from being usable if you know you will need that variable in the future but not now by putting two backslashes (//) in front of it like some variables in the example below ($adminEmail, $siteSlogan...).

Below is an example of a configuration file...

PHP Code: [ Select ]
<?php
//*************************************************************************//
//** Configurations for the many additions and features of my site...  **//
//** ... also for better flexibility of my site and for easier editing. **//
//*************************************************************************//
 
//** Main site Configurations **//
 
 $siteName = 'MySite';
 $title = 'Title for MySite';
//$siteSlogan = 'This is a slogan for MySite';
 $metaDescription = 'MySite - Anyone can visit MySite because its MySite.';
 $metaKeywords = 'MySite, My, Site';
 $copyright = 'MySite &copy; 2007-2008';
 
//** Contact Us Configurations **//
 
//$contactTitle = 'Contact Us';
 $adminEmail = 'MySiteAdmin at email.com';
 
?>
 
  1. <?php
  2. //*************************************************************************//
  3. //** Configurations for the many additions and features of my site...  **//
  4. //** ... also for better flexibility of my site and for easier editing. **//
  5. //*************************************************************************//
  6.  
  7. //** Main site Configurations **//
  8.  
  9.  $siteName = 'MySite';
  10.  $title = 'Title for MySite';
  11. //$siteSlogan = 'This is a slogan for MySite';
  12.  $metaDescription = 'MySite - Anyone can visit MySite because its MySite.';
  13.  $metaKeywords = 'MySite, My, Site';
  14.  $copyright = 'MySite &copy; 2007-2008';
  15.  
  16. //** Contact Us Configurations **//
  17.  
  18. //$contactTitle = 'Contact Us';
  19.  $adminEmail = 'MySiteAdmin at email.com';
  20.  
  21. ?>
  22.  


The words you see after the dallor sign ($) but before the equal sign (=) are the variable names. They give the variable(s) the unique identifier that would let you recall them later on multiple times. This way, if you have more than one of the same text that would be the same text throughout the site and you would need to change them, you will change it in the configuration file and save it. It would change the rest throughout the site. Would save time and effort and make it simple and easy.

The configuration file would be included into the header page which would be included into the main content.

Other Files



You may want to cut your site in pieces and save the universal peices into the Includes directory where you will include into the main content pages. This way, if the code for the header would need to be edited, you edit one file in the Includes pages and it would change all of the headers on the rest of the site. Easy and simple.

An image showing somewhat of an outline of what I'm talking about is shown below...

Attachments:
Diagram.JPG

Figure 1: Diagram of how this works.



If we put our attention on one of the main content pages, here's how the diagram would look like...

Attachments:
Diagram2.JPG

Figure 2: Diagram of one page on this technique



In general, we are including main universal content that would be the same for all pages throughout to the content pages. The content page might look something like the following piece of code...

PHP Code: [ Select ]
<?php include_once('includes/header1.php'); ?>
<div id="wrap">
<?php include_once('includes/header2.php'); ?>
<?php include_once('includes/leftContent.php'); ?>
<div id="rightContent">
<div class="content"><p>Main Content</p></div>
<div class="mainContent">
<p>Welcome to <?php echo $siteName; ?>! Have fun and enjoy being on <?php echo $siteName; ?>. If you have any questions please <a href="mailto:<?php echo $adminEmail; ?>">Email Us</a>. Thank you!</p>
</div>
<?php include_once('includes/footer.php'); ?>
  1. <?php include_once('includes/header1.php'); ?>
  2. <div id="wrap">
  3. <?php include_once('includes/header2.php'); ?>
  4. <?php include_once('includes/leftContent.php'); ?>
  5. <div id="rightContent">
  6. <div class="content"><p>Main Content</p></div>
  7. <div class="mainContent">
  8. <p>Welcome to <?php echo $siteName; ?>! Have fun and enjoy being on <?php echo $siteName; ?>. If you have any questions please <a href="mailto:<?php echo $adminEmail; ?>">Email Us</a>. Thank you!</p>
  9. </div>
  10. <?php include_once('includes/footer.php'); ?>


An example of how a header.php might look like is...

PHP Code: [ Select ]
<?php include_once('site_config.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $title; ?></title>
<meta name="keywords" content="<?php echo $metaKeywords; ?>" />
<meta name="description" content="<?php echo $metaDescription; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="Scripts/design.css" />
</head>
<body>
  1. <?php include_once('site_config.php'); ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title><?php echo $title; ?></title>
  6. <meta name="keywords" content="<?php echo $metaKeywords; ?>" />
  7. <meta name="description" content="<?php echo $metaDescription; ?>" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <link rel="stylesheet" href="Scripts/design.css" />
  10. </head>
  11. <body>


The could be more than one header on your site. The header that goes up to the "<body>" tag and the header that shows the main image of your site, or you can combine the two headers and make it as one header page. Or just have a header that goes up to the "<body>" tag.

Take notice, that all of the pages, including pages and the main content pages would be saved under the extension PHP and would need PHP enabled as was brought up in a prvious section of this tutorial.

Conclusion



In general, you are including universal files stored in a different Directory into main pages that would be publicly viewable which would make it easier for the web developer/programmer easily manage the site. This would be helpful if the site you are making is going to grow 50 pages and more.

Forums and other services like forums (such as blogs) use this technique to manage and create pages automatically.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

I think the tutorial title is a bit misleading. I was expecting a mechanism to implement a CMS, not a good way to create a template.
  • artorious
  • Newbie
  • Newbie
  • artorious
  • Posts: 6

Post 3+ Months Ago

That's almost exactly the same way I use PHP when designing a website. It makes it easier to organize and update the site, and if you ever plan on creating your own CMS, the process of creating and using templates becomes easier.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Rabid Dog wrote:
I think the tutorial title is a bit misleading. I was expecting a mechanism to implement a CMS, not a good way to create a template.

What title do you suggest for it?
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

"A basic templating mechanism for PHP"
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Ok... thanks... I will do that...
  • vaidhyasiv
  • Newbie
  • Newbie
  • User avatar
  • Posts: 8
  • Loc: India

Post 3+ Months Ago

Hi Bogey,
Ever since 2March, you had stopped submitting useful ideas like "a basic templating mechanism". Please go on. I am new to PHP and its interesting. Could you move to next step forward?
  • satya-prakash
  • Graduate
  • Graduate
  • User avatar
  • Posts: 134
  • Loc: Bangalore

Post 3+ Months Ago

I like to have meta.php/head.php file as well. So that I can add head data/meta information for different page if required.
Like:

if page url/path is this then
$title = ''; // <title>.. </title>
$keyword = ''; // <meta name="keywords" content="" />
else
$title =''; // <title>.. </title>
$keyword = ''; //<meta name="keywords" content="" />
  • Orajames
  • Novice
  • Novice
  • User avatar
  • Posts: 16
  • Loc: PA, USA

Post 3+ Months Ago

This is a very useful PHP start up guide. I found no problem incorporating your methods in less than 10-15 minutes, now though I want more!

Please continue on. Such as the above post, why would that be beneficial to use a (meta.php) & (head.php) for different pages?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Orajames wrote:
This is a very useful PHP start up guide. I found no problem incorporating your methods in less than 10-15 minutes, now though I want more!

Please continue on. Such as the above post, why would that be beneficial to use a (meta.php) & (head.php) for different pages?

To tell you the truth, I don't know. I never used those pages and I could do conditional checks in header.php

What that poster is talking about is having different meta tags in meta.php and head.php for the same function as header.php.
  • mzainims
  • Newbie
  • Newbie
  • User avatar
  • Posts: 5

Post 3+ Months Ago

how about external link?
Code: [ Select ]
  <?php include_once('includes/header1.php'); ?>
  <div id="wrap">
  <?php include_once('includes/header2.php'); ?>
  <?php include_once('includes/leftContent.php'); ?>
  <div id="rightContent">
  <div class="content"><p>Main Content</p></div>
  <div class="mainContent">
  <p>Welcome to <?php echo $siteName; ?>! Have fun and enjoy being on <?php echo $siteName; ?>. If you have any questions please <a href="mailto:<?php echo $adminEmail; ?>">Email Us</a>. Thank you!</p>
  </div>
  <?php include_once('includes/footer.php'); ?>
  1.   <?php include_once('includes/header1.php'); ?>
  2.   <div id="wrap">
  3.   <?php include_once('includes/header2.php'); ?>
  4.   <?php include_once('includes/leftContent.php'); ?>
  5.   <div id="rightContent">
  6.   <div class="content"><p>Main Content</p></div>
  7.   <div class="mainContent">
  8.   <p>Welcome to <?php echo $siteName; ?>! Have fun and enjoy being on <?php echo $siteName; ?>. If you have any questions please <a href="mailto:<?php echo $adminEmail; ?>">Email Us</a>. Thank you!</p>
  9.   </div>
  10.   <?php include_once('includes/footer.php'); ?>

... say an http://www(.)somesite(.)com that targets the Main Content? As in "old-school" using frameset, will be a breeze... but have lots of compatibility issues.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I don't think you can use external links in includes if that's what you mean.

Why would you need to do that anyway? Cite the source or link to it... that would be the best option here.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1241
  • Loc: Sydney

Post 3+ Months Ago

Started to look into this and got a error about the "<!-- e -->"
Code: [ Select ]
//$contactTitle = 'Contact Us';
$adminEmail = <!-- e -->'MySiteAdmin@@email bot com<!-- e -->';
  1. //$contactTitle = 'Contact Us';
  2. $adminEmail = <!-- e -->'MySiteAdmin@@email bot com<!-- e -->';


error was "<" was undefined or something was wrong with the <

only way i got it working without error was removed both <!-- e -->

Not sure what it is but gone now lol, any background on that command?
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1241
  • Loc: Sydney

Post 3+ Months Ago

mite just be me but think i am missing something

Parse error: syntax error, unexpected T_ELSE in /opt/lampp/htdocs/login.php on line 104

i am sure everything is set to 1:1 what u had but i got everything else working apart from this one error.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Zealous wrote:
Started to look into this and got a error about the "<!-- e -->"
Code: [ Select ]
//$contactTitle = 'Contact Us';
$adminEmail = <!-- e -->'MySiteAdmin@@email bot com<!-- e -->';
  1. //$contactTitle = 'Contact Us';
  2. $adminEmail = <!-- e -->'MySiteAdmin@@email bot com<!-- e -->';


error was "<" was undefined or something was wrong with the <

only way i got it working without error was removed both <!-- e -->

Not sure what it is but gone now lol, any background on that command?

I have no idea why I had the "<!-- e -->" in there... sorry.

Zealous wrote:
mite just be me but think i am missing something

Parse error: syntax error, unexpected T_ELSE in /opt/lampp/htdocs/login.php on line 104

i am sure everything is set to 1:1 what u had but i got everything else working apart from this one error.


Can you post the code around the error line as well as the error line? Maybe start a new thread about the error you are getting so we don't have to wait for approval by an administrator.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1241
  • Loc: Sydney

Post 3+ Months Ago

Of course i can :) write up soon.

Post Information

  • Total Posts in this topic: 16 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.