Introduction To Templating

HmmZ

Dec 19 2005, 08:37 PM

Pre-note
Hello and welcome. if your website doesn't use a templating function, you may have noticed it's pretty hard to update your website (layout) unless you dig through many files to update the images and such.

The solution is templates. If you ever got curious and looked into phpBB codes or any other template based forum/CMS, you saw the .tpl files they use. I am not at a point where i base everything on .tpl (simply because i havent taken the time to see how it all works). But i do can tell you that it's the same principle, template your site using an external .html file. That is the incentive of this tutorial

Comments
First i wanna say that this isn't a ripped tutorial. (ive been accused in the past aswell)
Second, this is a custom and pretty easy way of templating, ill even explain (short) how to get a theme preference from a user.

First off...functions file
I'm making this look like a huge tutorial, but it isn't. If you use a functions file (where you have all functions() defined) you may want to place the template() function in there aswell.
I will first show an example template function, and then explain:

CODE

This is the exact template() function i just copy pasted from my functions file, i wont edit it to make it easier, since it isnt that superhard

explanation

CODE

function template($content){
global $title,$main,$bar,$nav,$right,$footer;

This is the start of the function, later on, you will see that template($content) has a reason and that the globals are pretty important, as they fetch the variables from your include file.

CODE

get_theme();

Here i'm calling the get_theme() function, because we will be calling the theme.html later this file, it makes sure the right theme is stored in the $theme variable

CODE

$file="$theme/theme.html";
if(!$rf = fopen($file,"r")){$error=1;}else{$template=fread($fd,filesize($file));fclose($fd);

the variable $file defines the location of your theme.html, $theme was defined earlier through the get_theme() function
the if...else function makes sure theme.html is readable, if its not readable, nothing much happens, if it is readable, then $template is defined, $template will later on make sure the template variable (for example <% main %>) is fetched from theme.html correctly, to configure it.

CODE

$template=stripslashes($template);

make sure $template doesn't have slashes as it will become unreadable then

CODE

$template=eregi_replace("<% title %>","Solarity Gaming",$template);

I won't display all theme variable defines, because it all is the same.
the predefined $template is getting a new definition, its pretty double, because in the same line $template has 2 completely different meanings.
Anyway, in this line, the theme variable <% title %> is replaced with "Solarity Gaming", wich means, once template() is called, the page would have the title Solarity Gaming,
in other lines the theme variable is stored in a php variable (<% main %.,"$main")
wich means that once template() is called later, all $main defines in the included file will replace <% main %> in the theme.html.

CODE

print "$template";
}end else
}end function

we have defined $template (with alot of info), so we print it, then we close the function, the function is ready to be used, lets make theme.html!

theme.html
If you followed me to this far, you are doing great, the hard part (atleast for me, took me ages to explain template()

) is done.

CODE

ooo creepy huh? I though that bursting the code in your eyes would be less hurting in the long run

i think it's all pretty self-explanatory, if not...ask

calling template()
Basically everything is done, you have defined template($content), enabling it to template anything you desire. you got your theme.html that defines the locations of where the variables should be placed...There is 2 things left that might need explaining...calling template() and the file you wish to template

calling template is as easy as 1,2,3

CODE

function test(){
global $title,$main,$bar,$nav,$right,$footer;
include("test.php");
template($data);}

ive found my comfort way to call template() through functions, it gives an easy overview over files and is easy to edit or anything.
Now, whenever test() is called, it will include test.php and then template the data found inside ($data is a more general way to get all the $variables)

i don't think calling template needs more explaining, but please yell if you do need some more explaining

test.php
i made the function test() instead of copy pasting functions im using (simply because it would be too confusing). But i can tell you, once you get the hang of templating, you can do great stuff with your functions and maybe even learn new stuff, cause, as you can see, it's not that hard to create stuff ^^

Anyway, back on topic, we have included test.php, so what would it look like (o god now i gotta make that too,

)

CODE

<?php
############
#test.php######
#trap17 tut#####
############
#define $main variable#
#this would be anything in the middle#
#the REAL content such as news#
$main .= "Hello this is a test";
$main .= "<br> a test to see if i got this templating crap of the hmmz to work";
$main .= "whoa im seeing it!? it must have gone great!";
#define $nav variable#
#nav as in navigation#
#<% nav %> got defined to fit at the left of your page#
#so lets make some links!#
$left .= "<a href='http://www.trap17.com'>Trap17</a>";
$left .= "<br> HAHA! links work too? AWESOME!";
#define $bar variable#
#lets set it up with a login form?#
$bar .= "<form method='post' action='index.php?action=login'>";
$bar .= "Username : <input type='text' name='user'>";
$bar .= "<br> Password: <input type='password' name='pass'>";
$bar .= "<input type='submit' value='login'></form>";
#define $footer variable#
#as its name says it will be at the foot of your page#
#so lets define it with a copyright?#
$footer .= "Copyright © 2005 TheHmmZ";
?>

whoosh, finally done

Anyway, i have defined all the variables in just 1 file, to make it a bit easier on your side, but you can use many different files, i do think that defining the same variable (for example $main) in multiple files would cause a lot of mayhem, so dont

Note: the # is used for commenting, just like //. I just like # more

this file will be included, and, as expected your file should be displaying everything on the right place, just try it. if you want a full example, get the codes at the of this tutorial.

Conclusion
Well, you got to be honest, it wasn't THAT hard to understand, not much needs to be done to prepare your website for a real templating engine (expensive word, low costs

). for existing websites with alot of files and such, it can get tough. but a tip would be to open the file you want to fix for templating in notepad, then ctrl+h type in print " or echo " and make the replacement word for example news $main .= " this will remove print " and replace it with $main .= "

Hope you enjoyed this tutorial and that it helps you, any questions i will gladly answer

Full Example
functions.php

CODE

theme.html

CODE

index.php

CODE

<?php
function test(){
global $title,$main,$navigation,$footer;
include("example.php");
template($data);}

switch($action){
default:
test();
break;
}
?>

test.php

CODE

<?php
$main .= "This is an example<br>";
$main .= "This is defined with the main variable";
$navigation .= "<a href='http://www.trap17.com'>trap17</a><br>";
$navigation .= "This is defined with the navigation variable";
$footer .= "Copyright © myself<br>";
$footer .= "example made possible by TheHmmZ<br>";
$footer .= "This is defined with the footer variable";
?>

fileroot
ROOT/functions.php
ROOT/index.php
ROOT/themes/theme.html
ROOT/test.php

Comment/Reply (w/o sign-up)

HmmZ

Dec 23 2005, 10:27 PM

Note that it's extremely easy to have multiple themes, letting the user choose himself

as ive stated before with the get_theme() function, the get_theme() function is fairly small:

CODE

what my get_theme() function basically does is get the theme preference of a user in the users table, and change the $theme variable to the preferred one, this only changes the theme for the user itself and not the whole site. Making it very versatile even though it's just a small piece of code.

Note that if the sql query is unable to be executed (its a guest or sql server is down (templating itself is not sql-based)) it chooses the default theme.

Enjoy! Any questions or suggestions? dont hesitate and reply!

Comment/Reply (w/o sign-up)

Introduction To Templating - Templating your website with PHP

Introduction To Templating - Templating your website with PHP