PHP Templates and why they will change your life.
What you will need
- A server with php installed.
- A pure text editor. I like Notepad++.
All the files needed for this tutorial can be found here.
Part One: What is a template system?.
So exactly what is a template? Well according to the American Heritage dictionary, a template is
"A document or file having a preset format, used as a starting point for a particular application so
that the format does not have to be recreated each time it is used."
You know what? They're just about right!
So basically, a template system separates your html from your php. Let me say that again. A TEMPLATE SYSTEM SEPARATES YOUR HTML FROM YOUR PHP!
Imagine the implications of this. You no longer have to use includes to add content to your website. You can create different skins and let the visitor choose what they want. You can generate lists and never have to write html like this . . .
$html = " <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>";
The possabilities are endless!
There is no better way to learn about template systems then to create your own so let's get started!
Part Two: Building your own template system.
If you've read my other php tutorials, you probably have seen the code can be rather complex. Well I've got good news for you. . . this code is EXTREMELY easy.
Here is the concept behind how it works.
- Open a file and save the contents into a string.
- Replace a string pattern (such as {VAR}) with a value.
- Output it.
There are only 81 lines of code for this script (and half of that is comments so get ready :)).
Create a new file and name it template.php
Copy and paste the following code into template.php please refer to the comments for explanation.
Note: If you have never used Object Oriented Programming before I encourage you to read up on it and then come back. You can find a good tutorial here
class template { /********************************************************************* VARIABLES Setting our variables *********************************************************************/ var $template; //The template name var $template_string; //The template string will be stored here var $prefix = "{"; //The variable prefix character. var $suffix = "}"; //The variable suffix character. var $var_array = array(); //The values of your variables will be stored here /********************************************************************* SET TEMPLATE This function sets the file that we are going to be grabbing our html from *********************************************************************/ function set_template($filename) { $this->template = $filename; } /********************************************************************* SET VARS This function sets a value for a variable *********************************************************************/ function set_var($name, $value) { //storing our variable and its value into an array $this->var_array[$name] = $value; } /********************************************************************* LOAD FILE This function loads the contents of the template file into a string. *********************************************************************/ function load_file() { //saving its contents into a string $this->template_string = file_get_contents($this->template); } /********************************************************************* REPLACE VARS This function replaces the variables with it's corresponding values *********************************************************************/ function replace_vars() { //The foreach loop is very useful when we want to loop through //associative arrays. foreach($this->var_array as $assoc => $value) { //appending the variable prefixes to match. ex: {VAR_NAME} $var_name = $this->prefix.$assoc.$this->suffix; //replacing every instance of the variable with it's corresponding value. //so {VAR_NAME} becomes "this is my variable" $this->template_string = str_replace($var_name, $value, $this->template_string); } } /********************************************************************* PARSE This function calls the actions and outputs the final result. *********************************************************************/ function parse() { //loading the file $this->load_file(); //setting the variables $this->replace_vars(); //outputting the newly parsed template :) return $this->template_string; } }//end of class
And that's our whole template class!
Part Three: Using your new template class.
Ok. . . your new template class is done and ready to go. . . but how do you use it? By itself the class doesn't seem all that remarkable. But trust me, it is.
To demonstrate we're going to create a basic personal profile page.
Create a new file and name it interface.htm copy and paste the following code into interface.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title></title> </head> <body> <div style = "margin:auto; width:800px; height:600px; border:solid 1px #808080"> <div style = "height:70px; background:#c6c6c6; padding:5px"> </div> <div style = "padding:5px">{CONTENT}</div> </body> </html>
Do you notice and {CONTENT}? Guess what. . . .those are variables! That's right! With a template system you can embed variables right into HTML! Are you starting see what I'm getting at? :)
Open up interface.htm in a browser, it should look something like this.
Create a new php file and name it index.php, save it in the same directory as template.php.
Take a look at the code below.
//This loads template.php into memory //(you can also use include, they both do the same thing) require_once("template.php"); /******************************************* INTERFACE *******************************************/ //creating a new instance of our template class $interface = new template; //setting the template file that I want to grab html from $interface->set_template("interface.htm"); //outputting the interface print $interface->parse();
Open up index.php in your browser. See any difference? You shouldn't. Take a look at the source code, it's exactly the same as template.htm You're grabbing the content inside template.htm, saving it as a string and then printing it.
Ok let's make one more template.
Make a new file and name it profile.htm Copy and paste the following code into your new file.
<div style = "margin-bottom:10px"> This is the profile for {NAME} </div> <table width = "100%"> <tr> <td> <img src = "{PROFILE_PIC}" /> </td> <td> Name:{NAME} <br />Birthday: {BIRTHDAY} <br />Phone: {PHONE} <br />E-Email:{EMAIL} <br />Bio: {BIO} </td> </table>
Notice the omission of the html, head and body tags.
Open up profile.htm in your browser, it should look something like this.
Grab any image you like and name it pic.jpg save it in the same directory.
Your directory should look like this.
Note: Given the nature of operating systems your icons may not resemble mine.
All right, let's put these two templates together.
Open up index.php again and right above where you created a new instance of your interface class write this code.
/******************************************* PROFILE *******************************************/ $profile = new template; $profile->set_template("profile.htm"); //setting the variable values $profile->set_var('PROFILE_PIC', "pic.jpg"); $profile->set_var('NAME', "Josh"); $profile->set_var('BIRTHDAY', "08/03/1985"); $profile->set_var('EMAIL', "joshua.bolduc@gmail.com"); $profile->set_var('PHONE', "555-555-3452"); $profile->set_var('BIO', "This is some kind of dynamically generated bio"); //compiling the information and saving the string into a variable $content = $profile->parse(); //setting the page title $page_title = "Personal Profile";
Next copy and paste this code into index.php right before the $interface->parse() function.
//setting the variables for the interface $interface->set_var('CONTENT', $content); $interface->set_var('PAGE_TITLE', $page_title);
index.php should look like this.
//This loads template.php into memory (you can also use include, they both do the same thing) require_once("template.php"); /******************************************* PROFILE *******************************************/ $profile = new template; $profile->set_template("profile.htm"); //setting the variable values $profile->set_var('PROFILE_PIC', "pic.jpg"); $profile->set_var('NAME', "Josh"); $profile->set_var('BIRTHDAY', "08/03/1985"); $profile->set_var('EMAIL', "joshua.bolduc@gmail.com"); $profile->set_var('PHONE', "555-555-3452"); $profile->set_var('BIO', "This is some kind of dynamically generated bio"); //compiling the information and saving the string into a variable //see where this variable goes in the $interface template? $content = $profile->parse(); //setting the page title //see where this variable goes in the $interface template? $page_title = "Personal Profile"; /******************************************* INTERFACE *******************************************/ //creating a new instance of our template class $interface = new template; //setting the template file that I want to grab html from $interface->set_template("interface.htm"); //setting the variables for the interface $interface->set_var('CONTENT', $content); $interface->set_var('PAGE_TITLE', $page_title); //outputting the interface print $interface->parse();
Do you notice above I'm not actually doing a lot of "coding?". I'm just setting values and then outputting. Nothing could be easier!
Open up index.php in your browser, it should look like something like this.
So do you see the advantages of this technique? By keeping the interface separate from the content (such as the profile) we can make one change to the interface and it will change for everything! no need to touch any other files. That's what makes skinning possible!
Conclusion
Templates open up a whole new world of possibilities in php. Learn it well!
I hope this was helpful, if you have any questions or suggestions feel free to contact me.
I'm accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email here. Make sure that you put "request" in the subject.
We are looking for good tutorial writers to help us over at TutorialQuest.com come on by and submit your stuff!