Templates met Smarty in de praktijk

Bij een groot aantal scripts staat de HTML code dwars door de PHP code heen. Bij een niet al te groot script vormt dit in principe geen probleem, maar bij een wat groter script heeft dit negatieve invloed op de leesbaarheid en overzichtelijkheid.

In de meest ideale situatie zijn layout en logica van elkaar gescheiden. Met layout bedoel ik in dit geval HTML, en met logica bedoel ik PHP. Een mogelijke oplossing hiervoor is een templateparser. Je kunt een templateparser uiteraard zelf schrijven, maar er zijn prima alternatieven beschikbaar zoals TemplatePower, STP, t24.

In deze tutorial leg ik jullie het één en ander uit over Smarty. Ik ben voor Smarty gegaan omdat er een erg goede documentatie voor handen is. Bovendien is het voor mijn doeleinden snel en stabiel genoeg, en de bijzonder handige features spraken me erg aan.

Je hebt het bestand Smarty-xx.xx.tar.gz gedownload. Deze kun je onder Windows uitpakken met bijvoorbeeld WinRar, en onder Linux met "tar". Zodra je het archief uitgepakt hebt zie je een aantal mappen en bestanden. Alleen de inhoud van de map "libs" is van belang.

Er van uitgaande dat je op je werkstation een webserver hebt geinstalleerd kopieër je de inhoud van de map "libs" naar de root. Ik vind het zelf het prettigst werken om een vaste map te hebben waar de templateparser in staat, zo kunnen al mijn scripts gebruik maken van dezelfde bestanden, zodat ik niet voor elk project opnieuw Smarty hoef te installeren. Bijkomend voordeel is ook dat bij een update van Smarty maar één keer de bestanden overschreven hoeven worden.

Met dit stappenplan wordt duidelijk wat de bedoeling is:

• [li]Maak in de root van je webserver een map genaamd "Smarty"[/li]
  [li]Alle bestanden die in het archief in de map "libs" stonden kopieër je naar de map "Smarty"[/li]
  [li]Maak in de root een map genaamd “myFirstSmarty”. Hierin komt de eerste applicatie te staan waarbij je gebruik maakt van templates.[/li]
  [li]Maak in de map "myFirstSmarty" de volgende 4 mappen aan:[/li]
  [list]
  Opmerking: deze mappen kunnen ook buiten de root geplaatst worden zodat ze niet door een bezoeker te openen zijn. Het is ook mogelijk om doormiddel van een .htaccess bestand de mappen te beveiligen, maar dat is persoonlijke voorkeur.
  [li]templates[/li]
  [li]templates_c[/li]
  [li]cache[/li]
  [li]configs[/li]

[li]Maak een bestand genaamd "index.php" aan in de map "myFirstSmarty" waarin je de volgende code plaatst:[/li]
[/list]

<?php
//Roep het bestand aan waarin de Smarty classes staan
require("../Smarty/Smarty.class.php");

//Maak een nieuw object aan genaamd "Smarty"
$smarty = new Smarty();

$smarty->template_dir = "templates"; //Hierin staan de templatebestanden waarvan je gebruik maakt in je project
$smarty->compile_dir = "templates_c"; //Hierin komen de gecompileerde templatebestanden te staan
$smarty->cache_dir = "cache"; //Het is mogelijk om templates te cachen zodat ze niet telkens opnieuw gecompileerd hoeven worden. In dat geval is dit de map waar de gecachede bestanden in komen te staan.
$smarty->config_dir = "configs"; //Deze map wordt gebruikt voor het opslaan van configuratie-bestanden.
?>

Je kunt Smarty downloaden op de volgende locatie:

http://smarty.php.net/download.php

Om templates te kunnen implementeren in je website zul je ze moeten aanroepen in je PHP code. Smarty kent hier meerdere manieren voor:

• [li]Het aanroepen en direct weergeven ("display" methode)[/li]
  [li]Het aanroepen en plaatsen in een variabele ("fetch" methode)[/li]

Voor het tonen van opmaak + content op een website gebruik je in de meeste gevallen de "display" methode. Voor het versturen van bijvoorbeeld een HTML nieuwsbrief gebruik je de "fetch" methode.

Ik zal dit schetsen aan de hand van een voorbeeld:

"display" methode:

<?php
//Roep het bestand aan waarin de Smarty classes staan
require("../Smarty/Smarty.class.php");

//Maak een nieuw object aan genaamd "Smarty"
$smarty = new Smarty();

$smarty->template_dir = "templates"; //Hierin staan de templatebestanden waarvan je gebruik maakt in je project
$smarty->compile_dir = "templates_c"; //Hierin komen de gecompileerde templatebestanden te staan
$smarty->cache_dir = "cache"; //Het is mogelijk om templates te cachen zodat ze niet telkens opnieuw gecompileerd hoeven worden. In dat geval is dit de map waar de gecachede bestanden in komen te staan.
$smarty->config_dir = "configs"; //Deze map wordt gebruikt voor het opslaan van configuratie-bestanden.

//Toon pagina op scherm van gebruiker
$smarty->display("pagina.tpl"); //Templatebestand wordt aangeroepen uit "templates" map
?>

"fetch" methode:

<?php
//Roep het bestand aan waarin de Smarty classes staan
require("../Smarty/Smarty.class.php");

//Maak een nieuw object aan genaamd "Smarty"
$smarty = new Smarty();

$smarty->template_dir = "templates"; //Hierin staan de templatebestanden waarvan je gebruik maakt in je project
$smarty->compile_dir = "templates_c"; //Hierin komen de gecompileerde templatebestanden te staan
$smarty->cache_dir = "cache"; //Het is mogelijk om templates te cachen zodat ze niet telkens opnieuw gecompileerd hoeven worden. In dat geval is dit de map waar de gecachede bestanden in komen te staan.
$smarty->config_dir = "configs"; //Deze map wordt gebruikt voor het opslaan van configuratie-bestanden.

//Stuur een email naar een gebruiker
mail($emailadres,"Nieuwsbrief",$smarty->fetch("email.tpl")); //Templatebestand wordt aangeroepen uit "templates" map
?>

Je ziet nu het verschil tussen beide methodes. Steeds wordt een .tpl bestand aangeroepen uit de map die we als "$smarty->template_dir" gedefinieerd hebben.

Je kunt dit ook zelf proberen, maak een .tpl bestand aan met wat tekst en opmaak in de map "templates", en probeer de verschillende methodes eens uit aan de hand van de voorbeelden die ik je gegeven heb.

Nu je weet hoe je templates kunt aanroepen in PHP code is het tijd om kennis te maken met de mogelijkheden van Smarty.

Het toekennen van variabelen is eenvoudig. De Smarty class kent hier de methode "assign" voor. Hiermee kun je verschillende soorten waarden toekennen aan een variabele. Deze waarden zijn als volgt:

• [li]Tekst (strings)[/li]
  [li]Getallen (integers, floats, etc)[/li]
  [li]Arrays (Ook multi-dimensionaal)[/li]

Ik zal dit demonstreren aan de hand van een voorbeeld:

<?php
//Toekennen van paginatitel
$smarty->assign("paginaTitel","Smarty Site :: Home");
//Toekennen van een bedrag
$smarty->assign("totaalBedrag",50.30);
//Toekennen van een lap tekst
$content = "Dit is een tekst die je zo lang kunt maken als je zelf wilt.";
$smarty->assign("content",$content);
//Toekennen van een array
$arrNames = array("Henk","Klaas","Jan");
$smarty->assign("namen",$arrNames);
?>

Deze waarden moeten natuurlijk weergegeven worden in de template (.tpl) bestanden. Smarty kent hier de volgende syntax voor:

<p>Dit is de titel van mijn site: {$paginaTitel}</p>

<p>Dit is het totaalbedrag: €{$totaalBedrag}</p>

<h3>Content</h3>
<p>{$content}</p>

<h3>Namen</h3>
<p>
  {foreach from=$namen item=naam}
    {$naam}
  {/foreach}
</p>

Bovenstaande spreekt voor zich, maar bij de array zal ik toch wat uitleg geven.

Je ziet dat ik gebruik maak van de "foreach"-loop, iets wat je waarschijnlijk wel kent vanuit PHP. Met deze loop kun je eenvoudig een array doorlopen. Met het argument "from" geef je aan uit welke array de gegevens gelezen moeten worden, en met "item" (dit is géén variabele) geef je aan wat de naam is waarmee de waarden aangesproken moeten worden. Met dit voorbeeldje hoop ik het wat duidelijker te maken:

<?php
$arrNames = array("Henk","Klaas","Jan");

foreach ($arrNames as $name) {
  $name;
}

In feite doe je hier hetzelfde, $arrNames is in dit geval "from", en $name is in dit geval "item".

Dit is een handige link voor iedereen die alles te weten wil komen over het toekennen en aanroepen van variabelen.

Net als PHP kent Smarty (zoals je ondertussen begrepen hebt) ook een syntax. Aangezien deze syntax in behoorlijk wat opzichten op die van PHP lijkt is het vrij makkelijk om 'm aan te leren.

Statements
Allereerst is het belangrijk om de noodzakelijke statements onder de knie te krijgen. Een belangrijk statement is het "if"-statement. Voorbeeld:

{if $bedrag > 100}
  Het bedrag is hoger als €100,-.
{else}
  {if $bedrag == 100}
    Het bedrag is €100,-.
  {elseif $bedrag == 70}
    Het bedrag is €70,-.
  {else}
    Het bedrag is €{$bedrag},-
  {/if}
{/if}

Zoals je ziet wijkt deze syntax nauwelijks af van die van PHP.

Functies
Functies werken in feite op dezelfde manier, afhankelijk van de specifieke functie. Zo is er bijvoorbeeld de functie {cycle}, die er automatisch voor zorgt dat een waarde automatisch gewisseld kan worden. Dit is bijvoorbeeld nuttig bij tabellen, waarbij de achtergrondkleur om en om gewisseld wordt, zodat de gegevens overzichtelijker worden. Een voorbeeld van de {cycle} functie:

{foreach from=$arrNames item=names}
<tr bgcolor="{cycle values="#000000,#FFFFFF"}">
   <td>{$names}</td>
</tr>
{/foreach}

Zoals je ziet zorgt deze functie ervoor dat de achtergrondkleur van een tabel automatisch om en om gewisseld wordt. De syntax van de {cycle} functie is kinderlijk eenvoudig.

Modifiers
Een modifier doet precies wat de naam zegt, het modified iets (iets aanpassen). Deze modifiers zijn over het algemeen erg praktisch, zoals ik aan de hand van het volgende voorbeeld laat zien:

<h3>Lange tekst</h3>
<p>{$langeTekst|wordwrap:50}</p>

Soms wordt er gebruik gemaakt van teksten die erg lang zijn, en waardoor de layout soms uitgerekt wordt. Om dit te voorkomen kun je de modifier "wordwrap" gebruiken. Deze doet precies hetzelfde als de PHP functie "wordwrap". Om een modifier te gebruiken plaats je na de naam van de variabele een "|"-teken, gevolgd door de naam van de modifier en de eventuele attributen die je aan de modifier meegeeft.

Custom functies, modifiers
Het is mogelijk om zelf functies en modifiers te ontwerpen. Zo kun je bijvoorbeeld modifiers maken die bepaalde tekens omzetten in smileys, of waarbij BBcode omgezet kan worden naar HTML code. Ook custom functies bieden soms uitkomst voor de problemen waar je tegenaan loopt.

Ondanks deze materie vrij complex is, en buiten de scoop van deze tutorial valt kun je op de volgende locatie meer informatie vinden over custom functies en modifiers:

• [li]Functies[/li]
  [li]Modifiers[/li]

Waarschuwing
Zoals ik al eerder heb aangegeven is Smarty bedoeld om layout en logica van elkaar te scheiden. Gebruik deze statements, functies en modifiers alleen als het het developen makkelijker maakt. Modifiers hoef je eigenlijk niet te gebruiken als je vóór het assignen van een variabele de waarde met PHP kunt aanpassen. Hetzelfde geldt voor de functies.

Een voorbeeld waarbij het developen daadwerkelijk makkelijker wordt heb ik hierboven gegeven, het om en om wisselen van achtergrondkleur bijvoorbeeld. Dit kun je uiteraard wel met PHP bewerkstelligen, maar het is veel eenvoudiger om direct in het template (.tpl) bestand zelf te doen.

De documentatie is absoluut een must-read, of je nu een week, of een jaar bezig bent met Smarty. De documentatie is op de volgende locatie te vinden:

http://smarty.php.net

Dit is geen probleem, iedereen loopt in het begin wel ergens tegenaan. Ik raad je nogmaals aan eerst de documentatie te bestuderen. Mocht je daarna ergens niet uitkomen kun je het altijd vragen op één van de vele fora op het internet, het liefst natuurlijk het forum van PHP Hulp.

Vergeet niet; voor elk probleem is een oplossing te vinden. Ik heb de raarste dingen al meegemaakt tijdens het coden met Smarty, en er is tot nu toe geen enkel probleem geweest wat ik niet heb kunnen oplossen.

Ik hoop dat deze tutorial je iets geleerd heeft, en dat je nu begrijpt waarom het beter is om Smarty wel of niet te gebruiken. Mocht je een vraag of opmerking hebben die niet inhoudelijk over Smarty gaat, dan zie ik het liefst dat je me een intern bericht stuurt. Overige vragen, opmerkingen die wél met Smarty te maken hebben zie ik graag verschijnen bij de daarvoor aangewezen plaats.

Met vriendelijke groet,

Willem-Aart van Dorpen.