Learn how to use the PEAR HTML_Template_IT Package to create a templating system for your website using PHP and HTML. After this tutorial you should be able to have a strong inital grasp on creating templates using PEAR and the HTML_Template_IT package. This is great for creating template files (.tpl files) and making your website more easily editable. It also helps organize your website when it gets big with lots of PHP files and you can change certain aspects of your site easily as well.

To get started your gonna need to download the HTML_Template_IT package. The link to this package is here :

http://pear.php.net/package/HTML_Template_IT/download

Click the download link, you will then be prompted to download a .tgz file. At the time of writing this tutorial the latest version of this package is 1.2.1.

Then I recommend you use WinRAR to un-compress the file you just downloaded. If you do not already have WinRAR you can get it here :

http://www.rarlabs.com/download.htm

Just go there and choose your language.

After un-compressing this file you will get a new folder, in this folder will be 1 file and another folder. Open the other folder, it is called 'HTML_Template_IT-1.2.1'. Then you will see 2 more folders and 4 files. We are interested in just 2 of these files. The file called 'IT.php' and the file called 'IT_Error.php'.

Alright now that we have our bearings we can get started, hang onto these 2 files and dont close that folder yet we will be using them in the next part of this tutorial.

Now, for this tutorial we will just be creating a simple 4 column table and we wont be using any dynamic data but I WILL show you how to do the same thing with dynamic data (Pulling data from a database and using a loop to display it).

So for this tutorial upload your IT.php and IT_Error.php files onto your website, upload them to the same. I am going to be uploading my files to the root directory on my website. Now create a new folder, call it 'templates'. this is where you can store all your template files (.tpl files).

Now we are gonna create our first (and only) .tpl file. This will be our table template. Here is the entire code, I will give you all the code then explain it more in detail afterwards.

PLAIN TEXT
HTML:
  3. <table cellpadding="2" cellspacing="5">
  5. <th>Name</th>
  6. <th>Birthday</th>
  7. <th>Address</th>
  8. <th>Fav Color</th>
  9. </tr>
  10. <!-- BEGIN TABLE -->
  12. <td>{FIRSTNAME}{LASTNAME}</td>
  13. <td>{BIRTH}</td>
  14. <td>{ADDRESS}</td>
  15. <td>{COLOR}</td>
  16. </tr>
  17. <!-- END TABLE -->
  18. </table>
  19. </body>
  20. </html>

Alright, now to explain the code. We first start off with defining out basic <html> and <body> tags. Then we create a table, I give it some padding and spacing so it doesn't all look clumped together. Then I use <th> tags to create table headings. I create 4 table headings since I did say we will have 4 columns. So that is our first <tr> tag, just defining the table headers. Next we create something that is called a Block. A block is a block of information or code that we can present or duplicate. We use these blocks in our HTML by making HTML comments. I call this block TABLE.

Then we have our traditional <td> tags and everything, except instead of putting actual information in between the <td> tags, we use something called Placeholders. These place holders are used to define a certain part of information that we later give a value to in our PHP script.

So I create 5 place holders, for the name column I have 2 placeholders for a first and last name.

Now onto the PHP part of our tutorial, this is where we will parse our blocks in our template file and give our place holders values. Hopefully after this you will have a basic idea of how to use templates.

PLAIN TEXT
PHP:
  1. <?php
  2. require_once "IT.php";
  3.  
  4. $template = new HTML_Template_IT("./templates");
  5. $template->loadTemplatefile("table.tpl", true, true);
  6.  
  7. $template->setCurrentBlock("ADDRESS");
  8. $template->setVariable("FIRSTNAME", "Sean");
  9. $template->setVariable("LASTNAME", "McKnight");
  10. $template->setVariable("BIRTH", "April 14th, 2006");
  11. $template->setVariable("ADDRESS", "123 Fake Street");
  12. $template->setVariable("COLOR", "<font color=\"red\">Red</font>");
  13.  
  14. $template->parseCurrentBlock();
  15.  
  16. $template->show();
  17. ?>

So we start off by defining our

Next we have to set our block. This is where we use those blocks that we defined in our template file, this is so the script knows which part of the template file we are talking about. Now its time to give those place holders a value. This is where we use the setVariable function. They all have the same way, you say which place holder you are giving a value, then you put in what you want to display. As you can see for the Favorite color, I have used HTML code in there just to show you that it can be done. I had to escape the " in the HTML by using a back slash(\) so that the function didnt think I was done defining the value.

Now all you have to do is upload your table.tpl file into your templates folder, and upload your template.php file into the main directory. Then visit www.yourdomain.com/template.php to see it in action!

Thanks for reading my tutorial! I hope you got something out of it. If you have any questions use the contact form and we will address your comments or questions!

Thanks!
Sean

Share and enjoy our tutorial : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Furl
  • Slashdot
  • Netscape
  • BlinkList
  • Ma.gnolia
  • Reddit
  • Technorati