TemplatePower: Meerdere Templates Ondersteunen
1. Inleiding
2. Directory Structuur
Structuur Legenda
3. Template Configuratie Bestand
4. Index Bestanden Maken
5. Keuzemenu Bestanden Maken
6. Stylesheets en Plaatjes
7. Meer Templates Toevoegen
8. Nawoord
1. Inleiding
Template Power: Je website meerdere templates laten ondersteunen!
In deze tutorial zal ik uitleggen hoe je een website kunt maken die meerdere templates (layouts) zal ondersteunen. In deze tutorial maak ik gebruik van
de TemplateEngine Template Power. Mocht je nog geen verstand hebben van Template Power,
lees dan deze tutorial van
XenoX door. Mocht je de online handleiding van Template Power willen lezen/raadplegen, dan kan je deze
hier vinden.
In deze tutorial gaan wij een website maken die twee templates zal ondersteunen. Ik noem ze voor een duidelijk contrast even heel_mooi en erg_lelijk.
Elk template krijgt zijn eigen templatenaam.css toegewezen. Aan het eind van deze tutorial leg ik ook uit hoe je meer templates kunt toevoegen.
Deze tutorial is opgebouwd uit stukjes uitleg, gevolgd door stukjes script. Deze stukjes script bevatten belangrijke comments voor mensen die nog
niet zo heel erg veel van PHP snappen. Lees alle stukjes script aandachtig door, en probeer te snappen wat er gebeurd. De comments zullen je hierbij helpen.
Mocht je achteraf nog niet snappen hoe het werkt of wat er gebeurt, laat mij dat dan even weten via de nota's op Sitemasters.
Laten we beginnen, veel succes en plezier met deze tutorial!
top
2. Directory Structuur
We beginnen met het aanmaken van de benodigde folders in je rootfolder. Aan het begin elk bestand vertel ik hoe het bestand genoemd moet worden, aan het eind van het script vertel ik in welke folder hij moet worden opgeslagen. We beginnen met het aanmaken van de folder templates in je rootfolder. In deze templates folder maak je nog twee folders aan, namelijk
heel_mooi en erg_lelijk (spaties altijd vervangen door een underscore (_), en geef altijd elk template een andere naam)
Je directory structuur zal er nu als volgt uit moeten zien:
Rootfolder
+ templates
| + heel_mooi
| + erg_lelijk
|
Legenda Directory Structuur:
+ naam = folder
- naam = bestand
| = folderlijn
|
top
3. Template Configuratie Bestand
Eerst gaan we een configuratie bestand maken, en die noemen we dan ook config.php. Deze slaan we later op in onze
rootfolder, maar hierover meer zodra we dit bestand hebben afgerond.
<?PHP
# Voordat we beginnen gaan we ervoor zorgen dat wij cookies en sessies kunnen gaan gebruiken.
# Om deze te kunnen gaan gebruiken moeten we ze wel eerst aanzetten. Ook zetten we
# error_reporting () op E_ALL, zodat alle bekende fouten worden weergegeven.
ob_start ();
session_start ();
error_reporting (E_ALL);
# Voordat we TemplatePower kunnen gaan gebruiken, moeten we wel eerst de TemplatePower class
# geinclude hebben. De locatie van deze class moet je zelf even aanpassen als je dit al hebt
# geupload. Ik ga er van uit dat je weet hoe dit moet en al hebt gedaan!
include ("../tplpower/class.TemplatePower.inc.php");
# Nu gaan we een sessie maken, met daarin een array met de beschikbare templates. Tijdens deze
# tutorial gebruiken we de templates "heel_mooi" en "erg_lelijk". Deze zullen wij dus ook in de
# array stoppen. We gebruiken een sessie om de array op te slaan, zodat we deze in de gehele
# site kunnen gebruiken.
$_SESSION['templates'] = array ("heel_mooi", "erg_lelijk");
# Nu gaan we kijken of de bezoeker van onze website al een template-voorkeur heeft ingesteld. Als dit
# het geval is, dan zorgen wij ervoor dat zijn template-voorkeur ook daadwerkelijk wordt gebruikt. Echter
# moet deze template wel geldig zijn. Daarom controleren we of de inhoud van zijn cookie wel in de array
# voor komt. Mocht hij geen voorkeur hebben of is de cookie niet geldig, dan gebruiken wij "erg_lelijk" als
# standaard template. De cookie met de voorkeur noemen we "template_voorkeur".
// Controleren of de bezoeker een cookie heeft met een template-voorkeur. Controleer tevens of de inhoud
// van de cookie ook daadwerkelijk gebruikt mag worden.
if (isset ($_COOKIE['template_voorkeur']) && in_array ($_COOKIE['template_voorkeur'], $_SESSION['templates']))
{
# De inhoud van de cookie klopt, en mag gebruikt worden. Nu gaan wij TEMPLATE_NAME met de inhoud
# van de cookie defineren. In dit geval is dan de inhoud "heel_mooi" of "erg_lelijk". Nu kunnen wij
# TEMPLATE_NAME (hoofdletters!) in elk bestand (waar wij dit bestand (config.php) hebben geinclude)
# aanroepen als een variable in PHP.
define ("TEMPLATE_NAME", $_COOKIE['template_voorkeur'], TRUE);
}
else
{
# De inhoud van de cookie klopte niet, en kan dus ook niet gebruikt worden. We gaan er nu voor zorgen
# dat de template "erg_lelijk" gebruikt gaat worden. We defineren nu TEMPLATE_NAME als "erg_lelijk",
# en deze kan ook gewoon als een variable in PHP gebruikt gaan worden.
define ("TEMPLATE_NAME", "erg_lelijk", TRUE);
}
?>
|
Nu is ons configuratie bestand klaar voor gebruik. We slaan dit bestand op als config.php in onze rootfolder.
Je directory structuur zal er nu als volgt uit moeten zien:
Rootfolder
+ templates
| + heel_mooi
| + erg_lelijk
|
| - config.php
Bekijk legenda
|
top
4. Index Bestanden Maken
Nu gaan we het bestand index.php maken. Dit bestand zal straks samenwerken met de index.tpl bestanden. (Deze zullen we verderop in deze tutorial
gaan maken voor de twee verschillende templates) In dit script gaan we er voor zorgen dat het bestand een titel krijgt en dat
er een apart bestand kan worden geinclude in het index.tpl bestand. Het bestand wat wij straks gaan includen zal het keuzemenu
zijn voor de veschillende beschikbare templates.
<?PHP
# Het config bestand includen, zodat wij de gedefineerde TEMPLATE_NAME kunnen gebruiken,
# en natuurlijk hebben wij ook de TemplatePower class nodig die wij daar hebben geinclude.
include ("config.php");
# We gaan nu aangeven met welk bestand dit script moet gaan samenwerken. In dit geval gaat
# het om index.tpl. In ons configbestand hadden we TEMPLATE_NAME gedefineerd, en die komt hier
# terug in het pad naar het bestand index.tpl. Nu zal TEMPLATE_NAME duidelijk maken om welke
# template het gaat, en uit welk folder hij dus het bestand index.tpl moet gaan halen.
$tpl = new TemplatePower ("templates/" . TEMPLATE_NAME . "/index.tpl");
# Nu gaan we er voor zorgen dat wij het bestand keuzemenu.php moeten kunnen gaan includen
# in het index.tpl bestand. De keuzemenu bestanden zullen wij later in deze tutorial gaan
# maken.
$tpl -> assignInclude ("KEUZEMENU", "keuzemenu.php");
# Voorbereiden van TemplatePower met de bovenstaande gegevens.
$tpl -> prepare ();
# Waardes aan de TemplatePower variabelen geven, zodat wij die in het index.tpl bestand kunnen
# gaan gebruiken. Ook willen wij de templatenaam die in gebruik is kunnen gebruiken, zodat
# wij straks plaatjes naar het goede pad kunnen sturen, evenals het .css bestand!
$tpl -> assign (array ( "TEMPLATE" => TEMPLATE_NAME,
"TITEL" => "Meerdere Templates Mogelijk!",
"WELKOM" => "Welkom bij mijn websites met meerdere templates!"));
# Al het templatedata op het scherm tonen.
$tpl -> printToScreen ();
?>
|
Dit bestand sla je op als index.php in je rootfolder. Echter is dit bestand nutteloos als je geen index.tpl bestand hebt
voor de beide templates. Dus heel_mooi en erg_lelijk hebben beiden dit het bestand index.tpl in hun folder nodig. Daarom gaan wij nu voor beide templates een
iets verschillend index.tpl bestand maken. Bij het template heel_mooi gaan wij het keuzemenu links plaatsen, en bij erg_lelijk gaan
wij het keuzemenu rechts plaatsen. (Deze gaan we includen, zoals eerder aangegeven)
Belangrijk! In het onderstaande script zul je comments tegenkomen, en een TemplatePower Block. De comments zijn aangeduid met een dubbele slash (//)
na het beginnen van een HTML comment. Is dit niet het geval, en staat er enkel een HTML comment tag, dan zal het gaan om een TemplatePower
Block. Deze mag NIET verwijderd worden uit het script!
Laten we beginnen met het index.tpl bestand voor het template heel_mooi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- // Voor de titel hebben we in index.php TITEL geassigned. Deze gaan we nu dus ook weer -->
<!-- // gebruiken. We roepen hem aan met zijn variable-naam. Maar dan met accolades ( {} ) -->
<title>{TITLE}</title>
</head>
<body>
<!-- // Nu gaan we de website opbouwen met een table. Een kleinde TD links, waar het menu zal -->
<!-- // komen, en een grote TD (content) rechts van de pagina. -->
<table width="100%">
<tr>
<td width="20%"><!-- // menu links -->
<!-- In deze TD gaan we ons menu (die we verderop in deze tutorial -->
<!-- zullen maken) includen met een TemplatePower IncludeBlock -->
<!-- INCLUDESCRIPT BLOCK : KEUZEMENU -->
</td>
<td width="80%"><!-- // content rechts -->
<!-- In het bestand index.php hebben we ook de variable WELKOM -->
<!-- geassigned. Deze gaan we nu ook weer gebruiken. -->
{WELKOM}
</td>
</tr>
</table>
</body>
</html>
|
Nu hebben we het index templatebestand voor het template heel_mooi klaar. Dit bestand slaan we op als index.tpl in de folder heel_mooi.
Nu gaan we het index.tpl bestand maken voor het template erg_lelijk. In dit bestand zal het menu aan de
rechterkant van de pagina komen. Dat in tegenstelling tot het index.tpl bestand van heel_mooi, waar het menu links van de
pagina zit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- // Voor de titel hebben we in index.php TITEL geassigned. Deze gaan we nu dus ook weer -->
<!-- // gebruiken. We roepen hem aan met zijn variable-naam. Maar dan met accolades ( {} ) -->
<title>{TITLE}</title>
</head>
<body>
<!-- // Nu gaan we de website opbouwen met een table. Een grote TD links voor de content van-->
<!-- // je website, en een kleine TD richts voor het menu. -->
<table width="100%">
<tr>
<td width="80%"><!-- // content links -->
<!-- In het bestand index.php hebben we ook de variable WELKOM -->
<!-- geassigned. Deze gaan we nu ook weer gebruiken. -->
{WELKOM}
</td>
<td width="20%"><!-- // menu rechts -->
<!-- In deze TD gaan we ons menu (die we verderop in deze tutorial -->
<!-- zullen maken) includen met een TemplatePower IncludeBlock -->
<!-- INCLUDESCRIPT BLOCK : KEUZEMENU -->
</td>
</tr>
</table>
</body>
</html>
|
Nu hebben we het index templatebestand voor de template erg_lelijk klaar. Dit bestand slaan we op als index.tpl in de folder erg_lelijk.
Je directory structuur zal er nu als volgt uit moeten zien:
Rootfolder
+ templates
| + heel_mooi
| | | - index.tpl
| |
| + erg_lelijk
| | | - index.tpl
|
| - config.php
| - index.php
Bekijk legenda
|
top
5. Keuzemenu Bestanden
We gaan nu een keuzemenu maken. Het bestand wat we nu gaan maken heet keuzemenu.php. Hier gaan we kijken welke templates er
beschikbaar zijn om te gebruiken. Deze gaan wij met een for() loop in een uitklap-menu plaatsen. Mocht er op de bevestigingsknop
gedrukt worden, zal ons systeem een cookie aanmaken met de persoonlijke voorkeur van onze bezoeker. Als dit gedaan is, zal de pagina
zich refreshen, en zijn voorkeur direct in gebruik worden genomen. Ook onze keuzemenu zal in beide templatefolders moeten gaan voorkomen, want
je wilt natuurlijk wel dat je het menu kunt aanpassen naar de style van je templates.
<?PHP
# We gaan nu aangeven met welk bestand dit script moet gaan samenwerken. In dit geval gaat
# het om keuzemenu.tpl. In ons config hadden we TEMPLATE_NAME gedefineerd, en die komt hier
# terug in het pad naar het bestand keuzemenu.tpl. Nu zal TEMPLATE_NAME duidelijk maken om
# welke template het gaat, en uit welk folder hij dus het bestand keuzemenu.tpl moet gaan halen.
$tpl = new TemplatePower ("templates/" . TEMPLATE_NAME . "/keuzemenu.tpl");
# Voorbereiden van TemplatePower met de bovenstaande gegevens.
$tpl -> prepare ();
# Nu gaan we een for()-loopje maken met de beschikbare templates. De beschikare hadden we in
# het bestand config.php al in een array gezet. Deze array hebben we in een sessie gezet, zodat
# we deze op de hele site konden gebruiken.
for ($i=0; $i < count ($_SESSION['templates']); $i++)
{
# Per beschikbare template, een nieuwe "TemplatePower Block" beginnen, zodat ze
# allemaal onder elkaar in het menu komen te staan. Het menu gebruikt de volgorde
# zoals ze in de array (staan van links naar rechts).
$tpl -> newBlock ("keuze_optie");
# Per block de goede template-naam meegeven als een TemplatePower variable.
$tpl -> assign ("OPTIE_NAAM", $_SESSION['templates'][$i]);
}
# Als er op de bevestigingsknop is gedrukt, moeten we een cookie gaan aanmaken met de
# gebruiker zijn voorkeur.
// Controleren of er op de bevestigingsknop is gedrukt.
if (isset ($_POST['bevestig']))
{
# Een cookie zetten met de template-naam als inhoud. De template-naam die we in
# de cookie gaan plaatsen als waarde, halen we op uit de $_POST['template_keuze'],
# die we dadelijk gaan maken. Zoals eerder gezegt, gebruiken we de cookie
# "template_voorkeur" om de gebruiker zijn voorkeur op te slaan. Deze gaan we dan
# ook nu aanmaken. De duur van deze cookie is 1 jaar.
setcookie ("template_voorkeur", $_POST['template_keuze'], time()+60*60*24*7*52);
# De pagina opnieuw laden, zodat de nieuwe cookie direct in gebruik wordt genomen.
header ("Location: " . $_SERVER['PHP_SELF']);
}
# Al het templatedata op het scherm tonen.
$tpl -> printToScreen ();
?>
|
Nu hebben we het het bestand wat ons menu zal aansturen klaar. Dit bestand slaan we op als menukeuze.php in de rootfolder.
Het bestand zal niet werken zonder het bijbehorende menukeuze.tpl bestand in beide templatesfolders. Nu gaan we het keuzemenu.tpl bestand
maken. In dit bestand gaan we een form maken met een dropdown keuzemenu, en een knop om je keuze te bevestigen. De "option" komt in een
TemplatePower Block te staan. Per beschikbaar template komt er een option bij, met de bijbehoorende gegevens.
<form action="" method="post">
<!-- // De geposte waarde van deze form kan worden aangeroepen met -->
<!-- // $_POST['template_keuze'], en de waarde zal de template-naam -->
<!-- // zijn van de gekozen template in het menu. -->
<select name="template_keuze">
<!-- // Per beschikbare template een nieuwe optie maken -->
<!-- START BLOCK : keuze_optie -->
<option value="{OPTIE_NAAM}">{OPTIE_NAAM}</option>
<!-- END BLOCK : keuze_optie -->
</select>
<br />
<!-- // De bevestigings knop -->
<input name="bevestig" type="submit" value="Bevestigen" />
</form>
|
Nu hebben we het templatebestand voor het menu ook af. Sla dit bestand op als keuzemenu.tpl in de folder heel_mooi EN in de folder erg_lelijk
Nu hebben we bij beide templates een indentiek menu (dit kan je zelf weizigen als je dat wilt). Echter verschilt de locatie van het menu in de templates door het bestand index.tpl, waar het bestand keuzemenu.php
wordt geinclude.
Als je alles goed hebt opgeslagen, zal je directory structuur zal er nu als volgt uit moeten zien:
Rootfolder
+ templates
| + heel_mooi
| | | - index.tpl
| | | - keuzemenu.tpl
| |
| + erg_lelijk
| | | - index.tpl
| | | - keuzemenu.tpl
|
| - config.php
| - index.php
| - keuzemenu.php
Bekijk legenda
|
FINISHED! Mocht het niet werken, klik dan hier. (Kop 8: Nawoord)
top
6. Stylesheets en Plaatjes
Mocht je een stylesheet aan je template willen binden, dan zul je eerst een .css bestand moeten aanmaken. De naam van dit
bestand moet indentiek zijn aan de naam van je templatefolder, en dan met .css erachter. Mocht je bijvoorbeeld voor het
template heel_mooi een .css bestand willen maken, dan zal deze heel_mooi.css genoemd moeten worden. Nu gaan we dit
.css bestand aan je header van je site toevoegen. Plaats hetvolgende stukje code tussen de <head> en </head> tags:
|
<link href="templates/{TEMPLATE_NAME}/{TEMPLATE_NAME}.css" rel="stylesheet" type="text/css" />
|
Als je een plaatje wilt aanroepen, gaat dit bijvoorbeeld als volgt:
|
<img src="templates/{TEMPLATE_NAME}/images/voorbeeld.gif" alt="" />
|
(In je editor kan je plaatje niet worden weergegeven, omdat TEMPLATE_NAME niet geldig is in een pad in een editor, in je browser moet hij wel gewoon werken.)
om deze twee dingen te kunnen gaan gebruiken, moet de variable {TEMPLATE_NAME} wel geassigned zijn in het .php bestand die met het bestand in kwestie
samenwerkt. Het assignen van deze variable doe tussen je $tpl -> prepare (); en $tpl -> printToScreen in. Dit zal er bijvoorbeeld als
volgt uit kunnen zien:
<?PHP
$tpl -> new TemplatePower ("templates/" . TEMPLATE_NAME . "/bestand.tpl");
$tpl -> prepare ();
# Het assignen van deze TEMPLATE_NAME mag ook in een assignGlobal () worden uitgevoerd.
$tpl -> assign ("TEMPALTE_NAME", TEMPLATE_NAME);
$tpl -> printToScreen ();
?>
|
top
7. Meer Templates Toevoegen
Je kunt altijd meer templates toevoegen. Voor elke template maak je een nieuwe folder aan met de templatenaam aan in de templates folder. Natuurlijk moet voor elk .php bestand wat samenwerkt met een .tpl bestand, de tpl bestanden aanmaken.
Als je dit gedaan hebt, moet je de array in $_SESSION['templates'] in het bestand config.php aanpassen. Hier voeg je de templatenaam aan toe,
gequote ("") en gescheiden met een komma (,). De templatenaam in je array moet indentiek zijn met de naam van je
template folder. Mocht dit niet lukken, kun je altijd het forum raadplegen of een nota achterlaten.
top
8. Nawoord
Als het is gelukt, gefeliciteerd. Je bent nu in staat om je website meerdere templates te laten ondersteunen. Mocht
het niet zijn gelukt zul je het opnieuw kunnen proberen, maar je mag ook altijd even een een nota plaatsen hier op
de site. Mogelijk kan ik je dan verder helpen. Ook kun je altijd het forum raadplegen, waar je mogelijk eerder hulp
krijgt.
Ik heb in deze totorial aardig wat tijd gestoken, om geinteresseerden verder te helpen met TemplatePower en templates. Ik verzoek
daarom dan ook de mensen die deze tutorial gebruikt hebben een stem naar waarheid uit te brengen. Mocht je laag stemmen,
dan zal ik hier de reden graag van willen weten, om mijn tutorial mogelijk te verbeteren. Bij voorbaat dank.
(Mijn excuses voor mogelijke taalfouten)
Succes! En vriendelijke groeten,
Nrzonline
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
