Slimme templates met Smarty deel 1

Joor Loohuis, 19 november 2009, 14425 views.

Een van de problemen waar je snel tegenaan loopt als je scripts en webapplicaties schrijft, is dat de HTML uitvoer die deze genereren erg lastig te onderhouden is. Voor onbenullige wijzigingen in de HTML moet je meteen de scripts in. De oplossing hiervoor is om een template systeem te gebruiken, waarin je modelpagina's van de HTML kan opzetten die los staan van het script dat ze vult. Voor de meest populaire scripting taal, PHP, zijn er een aantal oplossingen, maar een van de krachtigste en populairste is Smarty. Mag ik u voorstellen...

Tags: , ,

Hsitorisch wordt PHP gebruikt om in HTML bestanden dynamische componenten in to voegen, zoals berekeningen, instructies om informatie uit een database te halen, en ga zo maar door. Nu heeft PHP over de jaren weel ontwikkelingen ondergaan, en een van de belangrijkste daarvan is wel dat er een scheiding is gekomen tussen de logica (wat een programma eigenlijk doet), en de uitvoer van wat de gebruiker ziet. Template engines maken het dan mogelijk om de presentatie in modeldocumenten (templates) te formuleren, met speciale syntax om aan te geven waar informatie moet worden weergegeven die vanuit de applicatie wordt meegegeven. Smarty is een krachtige en flexibele template engine, en om die reden populair.

Smarty templates bestaan hoofdzakelijk uit HTML, op strategische plaatsen aangevuld met speciale template syntax. Smarty instructies staan tussen accolades, en dient een aantal doelen. De basis is echter altijd dat informatie die aan een template wordt toegewezen in een door de template bepaalde manier wordt weergegeven. De eenvoudigste vorm kan de waarde van een toegewezen variabele weergeven:

<html>
<head>
  <title>{$titel}</title>
</head>
<body>
<h1>Een template voorbeeld...</h1>
<p>Dit is een voorbeeld voor {$naam}.</p>
</body>
</html>

We hebben nu een paar eenvoudige variabelen, titel en naam in onze pagina weergegeven. Meestal zijn de gegevens die je wil weergeven niet zo simpel. Arrays, associatieve arrays en objecten zijn schering en inslag in de meeste scripts, en ook daar weet Smarty raad mee. Meer complexe gegevens zijn eenvoudig weer te geven binnen het voorbeeld door een paar simpele toevoegingen:

<html>
<head>
  <title>{$titel}</title>
</head>
<body>
<h1>Een ander template voorbeeld</h1>
<p>Dit is een voorbeeld voor {$naam}.</p>
<ul>
  <li>De eerste kleur is {$kleur0}</li>
  <li>De tweede kleur is {$kleur1}</li>
  <li>De derde kleur is {$kleur2}</li>
</ul>
<p>Een link naar <a href="{$adres.url}">{$adres.naam}</a>.</p>
<p>Dezelfde link naar <a href="{$voorbeeld->adres.url}">
{$voorbeeld->adres.naam}</a>, maar nu uit een object.</p>
</body>
</html>

Hier hebben we aan de template een simpele array kleur en een associatieve array adres toegewezen, en een object dat deze twee structuren ans eigenschappen heeft. Het mag duidelijk zijn dat ook complexe data vrij eenvoudig weer te geven zijn. Reguliere arrays indiceer je met blokhaken. Associatieve arrays hebben wel wat weg van klassieke records, en in Smarty zie je dat terug doordat de punt wordt gebruikt om toegang te krijgen tot de elementen. Ook het gebruik van een object is vertrouwd door naar eigenschappen te refereren met het 'pijltje'.

Modifiers

Een belangrijk punt bij het weergeven van data in een template is dat de data niet noodzakelijk door de server worden aangeleverd in de formattering die je zoekt. Om die aan te passen kan je natuurlijk allerlei transformaties toepassen in de PHP, maar Smarty heeft daar een betere oplossing voor, in de vorm van modifiers, operators die je in de template op de data kan toepassen. Om dat te demonstreren verbouwen we de template:

<html>
<head>
  <title>{$titel}</title>
</head>
<body>
<h1>Een voorbeeld met modifiers</h1>
<p>Dit is een voorbeeld voor {$naam|upper}.</p>
<p>De variabele $missing heeft een standaard waarde 
{$missing|default:'(leeg)'}.</p>
<p>Het is vandaag {$smarty.now|date_format:'%A %e %B %Y'}.
</p>
</body>
</html>

Hier geven we drie voorbeelden van modifiers. De eerste is eenvoudig, de inhoud van $naam wordt naar hoofdletters geconverteerd door de upper modifier, die door een pipe karakter aan de variabele wordt gekoppeld. De gedachte erachter is dat de inhoud van die variabele eerst door een filter wordt gepiped voordat die wordt uitgevoerd, net zoals je op de command line zou doen. Sommige modifiers kunnen extra paramaters meekrijgen. Een nuttig voorbeeld hiervan is de default

modifier, die een standaard waarde weergeeft als de variabele die aan de template is toegewezen geen waarde heeft, zoals hier de $missing variabele. Een ander voorbeeld van een modifier is date_format waarmee uiteraard allerlei formattering van datum- en tijdwaarden te doen is. De extra parameter die we hier toepassen is een gewone strftime format string. Deze modifier begrijpt een aantal verschillende datum-tijd formaten, waaronder de gangbare systeem en database versies zoals timestamps. Een kleine toevoeging die we hier erin hebben gesmkokkeld is een interne variabele uit Smarty, $smarty.now, die uiteraard de actuele datum en tijd bevat. Een andere nuttige interne variabele die voor de template beschikbaar is, is $smarty.server.SCRIPT_NAME, dat de naam van het uitgevoerde PHP script bevat. In het algemeen zijn waarden uit de PHP globale arrays $_GET, $_POST, $_COOKIE, $_SERVER, $_ENV en $_SESSION toegankelijk als $smarty.get.*, $smarty.post.*, enzovoorts.

Debuggen

Een van de lastige zaken bij het werken met templates is het uitzoeken waarom de weergave niet is wat je had verwacht, of er helemaal niet is. Er zijn twee middelen die je hierbij kunnen helpen. De eerste is de error log van de webserver. Syntaxfouten en andere problemen met de code zullen daar gemeld worden. Een andere bron van problemen ligt in de feitelijk toegewezen data, en daarvoor kan je in je template de opdracht {debug} opnemen. Dat zal een venstertje tonen waarin alle aan de template toegewezen gegevens en andere zaken worden opgesomd. Vergeet alleen niet om die weer weg te halen als je script in productie gaat. Een veel voorkomende fout die lastig is op te sporen is wanneer de template accolades bevat, zoals kan gebeuren in een stukje JavaScript of CSS. Smarty verwacht namelijk een template instructie, en verslikt zich in de erop volgende code. De oplossing is om de code met de accolades tussen een {literal} en een {/literal} te plaatsen. Dat vertelt Smarty om alle template syntax ertussen te negeren.

Tot slot

Uiteraard is er veel meer mogelijk met Smarty. Op de Smarty website vind je niet alleen de officiële documentatie, maar ook een Wiki met veel tips, technieken en uitbreidingen.

NB: Dit artikel is in aangepaste vorm eerder verschenen in Linux Magazine nummer 2 van 2006.

Creative Commons License Op dit werk is een Creative Commons Licentie van toepassing.
Social networking: Tweet dit artikel op Twitter Geef dit artikel door op LinkedIn Bookmark dit artikel op Google Bookmark dit artikel op Yahoo! Bookmark dit artikel op Technorati Bookmark dit artikel op Delicious Deel dit artikel op Facebook Digg dit artikel op Digg Zend dit artikel naar to Reddit Geef dit artikel een duim omhoog op StumbleUpon Zend dit artikel naar Furl

Talkback

reageer op dit artikel