Introductie van het Smarty Templating Framework

Smarty is een op PHP gebaseerde template-engine / framework. Hiermee kunt u uw bedrijfslogica verder scheiden van de visualisatie door zo veel mogelijk PHP-code uit uw zicht te verwijderen. Sommige ontwikkelaars en frameworks geven er de voorkeur aan geen templating-engine te gebruiken, anderen geven er de voorkeur aan om gewone PHP te gebruiken in uw weergaven. Beide standpunten kunnen worden beargumenteerd en uiteindelijk is het vooral een kwestie van smaak. Hoe dan ook, het is nooit een slecht idee om het uit te proberen voordat je beslist om het niet te gebruiken, en daar gaat deze tutorial over: het Smarty Templating Framework uitproberen.


Stap 0: wat te verwachten

Aan het einde van deze tutorial, heb je een basisidee van hoe Smarty werkt. U kunt sjabloonbestanden laden, variabelen aan hen doorgeven, een "lay-out" gebruiken waarin uw andere weergaven zijn ingevoegd en uw eigen modifiers schrijven. Dit zal allemaal worden bereikt met behulp van een extra wrapper-klasse, die u gemakkelijk kunt integreren in uw bestaande projecten.


Stap 1: Het project opzetten

Het project voor deze tutorial heeft een zeer eenvoudige installatie, omdat we geen echte applicatie ontwikkelen. Maak gewoon een projectmap (de mijne heet "smarty_example") met daarin een index.php-bestand en een map met de naam "lib" erin. Maak ook een bestand met de naam smtemplate.php in de map "lib". Maak vervolgens een map "views" aan binnen "smarty_example". Deze map bevat onze smarty-sjabloonbestanden.

Voordat je iets kunt gebruiken, moet je het installeren. Gelukkig is het installeren van Smarty uiterst eenvoudig en vereist bijna geen configuratie. Allereerst download je Smarty en pak je het archief uit. Je kunt alles in het archief bekijken, maar we hebben alleen de map "libs" nodig voor onze applicatie. Hernoem het naar "smarty" en plak het in de "lib" -map van onze applicatie. Smarty gebruikt een aantal extra mappen, dus maak de mappen "templates_c", "cache" en "configs" in onze map "lib / smarty". Als u geen Windows gebruikt, moet u 775 rechten op deze mappen aan uw webserver geven. Uw mappenboom zou er nu als volgt uit moeten zien:


Stap 2: De SMTemplate-klasse maken

Elke programmeur heeft zijn eigen idee over de ideale API. Om de Smarty-API enigszins aan te passen en ons in staat te stellen wat extra functionaliteit toe te voegen, zullen we een wrapper-klasse maken genaamd SMTemplate, die de slimme details voor ons zal verzorgen. Deze benadering heeft nog een ander voordeel: als u op een gegeven moment voor een andere sjabloonengine zou moeten kiezen, kunt u een wrapper voor die engine maken, met behoud van de SMTemplate-interface, en dus zonder de code te breken die onze SMTemplate-klasse gebruikt.

Uw configuratie opslaan

Voordat we de functionaliteit van de SMTemplate-klasse coderen, hebben we een plaats nodig om enkele configuratiegegevens op te slaan. U kunt dit op meerdere manieren doen, d.w.z. door configuratie-opties te definiëren als klassenconstanten, door ze te definiëren als constanten in het smtemplate.php-bestand, of door ze in een afzonderlijk configuratiebestand te bewaren. Ik geef de voorkeur aan de laatste optie, dus ik maak een smtemplate_config.php-bestand. Smarty heeft configuratie nodig voor de sjablonen, gecompileerde sjablonen, cache en config-mappen. Later kunnen we SMTemplate-specifieke opties toevoegen aan ons configuratiebestand, maar voorlopig zal dit het volgende doen:

 / ** * @file * Configuratiebestand voor de SMTemplate-klasse * / $ smtemplate_config = array ('template_dir' => 'views /', 'compile_dir' => 'lib / smarty / templates_c /', 'cache_dir' => ' lib / smarty / cache / ',' configs_dir '=>' lib / smarty / configs / ',);

De SMTemplate-klasse bouwen

De SMTemplate-klasse laadt dit configuratiebestand en geeft de opties door aan Smarty. Voordat we de opties kunnen doorgeven, hebben we een object van klasse Smarty nodig. Onze SMTemplate-klasse kan de klasse Smarty uitbreiden, maar ik gebruik liever een privé-instantievariabele om het Smarty-object te bevatten. Tot nu toe hebben we het volgende voor onze SMTemplate-klasse:

 / ** * @file * Wrapper voor Smarty Template Engine * / require_once ('smarty / Smarty.class.php'); require_once (smtemplate_config.php); class SMTemplate private $ _smarty; function __construct () $ this -> _ smarty = nieuwe Smarty (); globale $ smtemplate_config; $ this -> _ smarty-> template_dir = $ smtemplate_config ['template_dir']; $ this -> _ smarty-> compile_dir = $ smtemplate_config ['compile_dir']; $ this -> _ smarty-> cache_dir = $ smtemplate_config ['cache_dir']; $ this -> _ smarty-> configs_dir = $ smtemplate_config ['configs_dir']; 

Rendertemplates

Zoals je kunt zien, is onze klas nog steeds behoorlijk zielig, omdat deze niets kan weergeven. We lossen dit probleem op door een renderfunctie toe te voegen, die een sjabloon laadt en weergeeft.

 function render ($ template) $ this -> _ smarty-> display ($ template. '.tpl'); 

Om iets te kunnen genereren, moeten we een sjabloonbestand maken en de renderfunctie vanuit ons index.php-bestand aanroepen. Het sjabloonbestand zal vrij eenvoudig zijn en een eenvoudige html-pagina bevatten. Noem deze "home.tpl" en plaats deze in onze "views" -directory.

    Huis    

Hallo Wereld!

Nu is het enige dat overblijft om een ​​SMTemplate-object te maken en 'home' te renderen. Open index.php, voeg de volgende coderegels toe en navigeer daar in uw browser.

 require_once (lib / smtemplate.php); $ tpl = nieuwe SMTemplate (); $ Tpl-> render ( 'thuis');

Stap 3: Variabelen toewijzen en opmaken

Als we niets dynamisch zouden kunnen weergeven, zou Smarty behoorlijk nutteloos zijn. Gelukkig kunnen we variabelen toewijzen aan onze slimme klasse en die in onze sjabloon weergeven. We kunnen ook een aantal Smarty-functies gebruiken (of eigenlijk modifiers) om ze op de juiste manier te formatteren.

Een array met variabelen passeren

Hoewel Smarty de toewijzing van variabelen ondersteunt, is onze SMTemplate (nog) niet. We zullen de CodeIgniter-stijl van toewijzing geven, waarbij u een array aan de renderfunctie doorgeeft. U kunt SMTemplate ook aanpassen om andere methoden te ondersteunen; bijvoorbeeld, ze toewijzen aan het object en vervolgens __set gebruiken om ze in een array op te slaan is ook een schone manier. Voor deze zelfstudie is het slagen voor een array echter voldoende. Voordat we de variabelen toewijzen, bewerken we onze sjabloon naar iets dynamischers. Zeggen gedag tegen de wereld is gebruikelijk voor programmeurs, maar niet erg nuttig, dus laten we een variabele gebruiken om te bepalen wie we zijn gaan helpen. Ten tweede voegen we de datum van vandaag aan het bericht toe. Variabelen kunnen worden weergegeven door ze tussen accolades te wikkelen.

  

Hallo, $ ontvanger! Het is vandaag $ date!

Als u de pagina vernieuwt, ziet u dat de variabelen niet zijn ingevuld, omdat we deze niet hebben ingesteld. Instellen van variabelen kan gedaan worden met smarty-> toewijzen, dus laten we ze toewijzen. De renderfunctie neemt nu een optionele gegevensmatrix als een tweede argument.

 functie render ($ template, $ data = array ()) foreach ($ data als $ key => $ value) $ this -> _ smarty-> assign ($ key, $ value);  $ this -> _ smarty-> display ($ template. '.tpl'); 

Het zal nog steeds niet werken, omdat we niet in een array passen als we onze renderfunctie aanroepen. We kunnen dit eenvoudig doen door een paar regels in ons index.php-bestand te wijzigen.

 $ data = array ('ontvanger' => 'JR', 'date' => tijd (),); $ tpl = nieuwe SMTemplate (); $ tpl-> render ('home', $ data);

Als u nu vernieuwt, zal de pagina iets zeggen als "Hallo, JR! Het is vandaag 1282810169!". Natuurlijk is deze datum niet echt wat we in gedachten hadden. Het moet worden opgemaakt, wat ons naar de volgende sectie brengt.

Modifiers gebruiken om variabelen op te maken

Smarty is niet alleen een sjabloonengine die variabelen zoekt en vervangt. Het is ook een krachtig raamwerk waarmee u tijd kunt besparen door dingen zoals modifiers, functies en blokken te gebruiken. Als we bijvoorbeeld onze datum willen opmaken, kunnen we de date_format-modifier gebruiken. Als u een wijziging op een variabele wilt toepassen, plaatst u eenvoudig een pipe-karakter en de naam van de wijziging erachter, gevolgd door de optionele argumenten die worden gescheiden door dubbele punten. De date_format-modifier heeft een stringargument, dat de indeling van de datum aangeeft, en een optionele standaarddatum, die we niet nodig hebben. De volgende code geeft de datum weer als "dag (in decimalen) maand".

  

Hallo, $ ontvanger! Het is $ date | date_format: "% d% B" vandaag!

Dit zou nu iets van de vorm moeten geven: "Hallo, JR! Het is 26 augustus vandaag!" Misschien willen we ervoor zorgen dat onze ontvanger in hoofdletters is. We kunnen dat bereiken door de bovenste modifier te gebruiken.

  

Hallo, $ receiver | upper! Het is $ date | date_format: "% d% B" vandaag!

Nu, als ik index.php verander om 'jr' in plaats van 'JR' door te geven, zal de sjabloon nog steeds 'JR' tonen. Makkelijk, toch? Vervolgens nemen we onze sjablonen op in een standaard "lay-out".


Stap 4: Werken met een lay-out

Voordat we onze SMTemplate-klasse wijzigen om lay-outs in te schakelen, maken we eerst een lay-out. Maak een nieuwe map met de naam "lay-outs" in onze map "smarty_example" en verplaats hier home.tpl. Hernoem het naar 'page.tpl'. We verwijderen onze vorige inhoud 'Hallo World' en plaatsen twee horizontale lijnen. Onze inhoud wordt tussen deze regels geplaatst.

    Huis    

Natuurlijk zal dit het niet snappen, omdat Smarty niet weet waar onze inhoud moet worden ingevoegd. Er is meer dan één manier om inhoud van een andere sjabloon in onze lay-out te krijgen en ik gebruik de ophaalfunctie van Smarty. Deze functie retourneert onze sjabloon als tekst, in plaats van deze weer te geven. Dit betekent dat we de sjabloon kunnen ophalen en deze dan aan een variabele kunnen toewijzen voor gebruik binnen onze sjabloon! De naam van deze variabele is aan jou om te kiezen. Ik voeg mijn speciale variabelen in met __ om ze te onderscheiden van de andere variabelen die ik gebruik. Ik noem deze ene 'inhoud', omdat we er onze pagina-inhoud aan toewijzen.

  
$ __ inhoud

Hiermee is onze lay-out voltooid, dus laten we een aantal sjablonen maken om als inhoud te gebruiken. Ik maak een 'hallo'-sjabloon met een standaard' Hallo wereld'-regel en een 'lipsum-sjabloon', die een Lorem Ipsum-tekst bevat. Vergeet niet om deze sjablonen een .tpl-extensie te geven.

 

Hallo Wereld!

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet dignissim diam at vulputate. Aenean nec ligula ac dolor fringilla pharetra. Cras in augue ac tellus dictum pellentesque. Integer elementum tempus lectus, non rutrum sem viverra a. Sed tincidunt sollicitudin dolor, ut blandit magna auctor non. Maecenas sed nibh felis. Donec dictum porta ante bij faucibus. Morbi massa tellus, pulvinar id porta id, imperdiet vel nibh. Donec lectus nulla, porttitor a tempor id, cursus vitae leo. Nulla eget nunc eu lorem posuere hendrerit ut ac urna. Aenean sodales lobortis egestas. Integer faucibus hendrerit tempor.

Het is ook heel eenvoudig om onze SMTemplate-klasse aan te passen om een ​​lay-out te gebruiken. We zullen eerst een configuratieoptie voor de lay-outmap instellen, zoals we deden voor onze weergaven.

 / ** * @file * Configuratiebestand voor de SMTemplate-klasse * / $ smtemplate_config = array ('layouts_dir' => 'lay-outs /', 'template_dir' => 'views /', 'compile_dir' => 'lib / smarty / templates_c / ',' cache_dir '=>' lib / smarty / cache / ',' configs_dir '=>' lib / smarty / configs / ',);

Vervolgens zullen we onze renderfunctie veranderen. We zullen de lay-out als een optionele derde parameter leveren en deze standaard laten 'pagina'. Vervolgens halen we de gevraagde sjabloon op, wijzen we deze toe aan de inhoudsvariabele $ __ en geven we onze lay-out weer.

 function render ($ template, $ data = array (), $ layout = 'page') foreach ($ data as $ key => $ value) $ this -> _ smarty-> assign ($ key, $ value);  $ content = $ this -> _ smarty-> fetch ($ template. '.tpl'); $ this -> _ smarty-> assign ('__ content', $ content); $ this -> _ smarty-> display ($ layout. '.tpl'); 

Er zijn een paar dingen die u moet overwegen, met betrekking tot deze code. Allereerst hebben we Smarty nog niet verteld waar we onze lay-outs kunnen vinden. We kunnen dat doen door een sjabloon toe te voegen, maar deze benadering betekent dat we onze lay-outs niet dezelfde naam kunnen geven als onze sjablonen - Smarty zou niet weten welke te kiezen. We kunnen dit oplossen door onze lay-outs een andere extensie te geven of door onze sjabloondirectory in te stellen in onze renderfunctie of door meer geavanceerde Smarty-functies te gebruiken. Voorlopig nemen we genoegen met de beperking dat lay-outs en weergaven niet dezelfde naam kunnen hebben. We kunnen onze layouts-directory toevoegen met behulp van de addTemplateDir () -functie.

 function __construct () $ this -> _ smarty = nieuwe Smarty (); globale $ smtemplate_config; $ this -> _ smarty-> template_dir = $ smtemplate_config ['template_dir']; $ This -> _ smarty-> addTemplateDir ($ smtemplate_config [ 'layouts_dir']); // <- new line $this->_smarty-> compile_dir = $ smtemplate_config ['compile_dir']; $ this -> _ smarty-> cache_dir = $ smtemplate_config ['cache_dir']; $ this -> _ smarty-> configs_dir = $ smtemplate_config ['configs_dir']; 

Laten we het eens bekijken door ons index.php-bestand opnieuw te wijzigen.

 require_once (lib / smtemplate.php); $ tpl = nieuwe SMTemplate (); $ Tpl-> render ( 'hallo');

Het werkt!

En als we het veranderen in 'lipsum', werkt het ook:


Stap 5: uw eigen modifiers maken

Als laatste onderdeel van deze tutorial zal ik een van de meer geavanceerde functies van Smarty introduceren, die het meer dan een eenvoudige templatemachine maken. Smarty bevat een aantal standaardfuncties en modifiers, maar het is ook heel eenvoudig om uw eigen functies te maken. Laten we eens kijken naar de modifier die we hebben gebruikt om onze datum te formatteren:

 $ date | date_format: "% d% B"

Als je een aangepaste modifier wilt, hoef je alleen maar een PHP-functie te schrijven.

Dit zal feitelijk resulteren in een aanroep van de functie smarty_modifier_date_format (), met $ date en onze format string als argumenten. Deze functie retourneert een tekenreeks en deze tekenreeks wordt weergegeven. Dus als je een aangepaste modifier wilt, hoef je alleen maar een PHP-functie te schrijven. Als voorbeeld zullen we een modifier met de naam 'weirdcase' schrijven, die alle medeklinkers in hoofdletters en kleine letters in alle letters zal zetten, d.w.z. 'Lorem Ipsum' wordt 'LoReM IPSuM'. Hiertoe maakt u een bestand met de naam 'modifier.weirdcase.php' in de map 'lib / smarty / plugins'. Onze modifier neemt slechts één argument, de reeks die moet worden gewijzigd.

 / ** * Smarty-adapter voor vreemde modifiers * * Type: modificator * Naam: weirdcase * Doel: medeklinkers in hoofdletters en klinkers in kleine letters veranderen * @param-tekenreeks * @return-tekenreeks * / functie smarty_modifier_weirdcase ($ string) 

We kunnen ons resultaat krijgen door een array 'klinkers' te definiëren, onze string in een array te veranderen en deze vervolgens te doorlopen en te controleren of elk karakter in onze klinkerarray zit. Als dat zo is, nemen we het in kleine letters, anders brengen we het in hoofdletters. De gewijzigde tekens worden vervolgens toegevoegd aan een resultaatvariabele.

 functie smarty_modifier_weirdcase ($ string) $ str_array = str_split ($ string); $ result = "; $ vowels = array ('a', 'e', ​​'i', 'o', 'u'); foreach ($ str_array als $ char) if (in_array ($ klinkers, $ char) ) $ result. = strtolower ($ char); else $ result. = strtoupper ($ char); return $ result;

Dit zou de slag moeten gaan, dus laten we het eens bekijken. Bewerk de 'lipsum.tpl' -sjabloon en voeg een h1 toe met daarin onze rare 'Lorem Ipsum'.

 

'Lorem Ipsum' | weirdcase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet dignissim diam at vulputate. Aenean nec ligula ac dolor fringilla pharetra. Cras in augue ac tellus dictum pellentesque. Integer elementum tempus lectus, non rutrum sem viverra a. Sed tincidunt sollicitudin dolor, ut blandit magna auctor non. Maecenas sed nibh felis. Donec dictum porta ante bij faucibus. Morbi massa tellus, pulvinar id porta id, imperdiet vel nibh. Donec lectus nulla, porttitor a tempor id, cursus vitae leo. Nulla eget nunc eu lorem posuere hendrerit ut ac urna. Aenean sodales lobortis egestas. Integer faucibus hendrerit tempor.


Stap 6: Conclusie

Hoewel Smarty veel meer bevat dan ik in deze tutorial zou kunnen passen, zou dit u hopelijk een basiskennis moeten geven van hoe u ermee kunt werken. Je weet in feite al alles wat je bent nodig hebben weten. Je zou ook in staat moeten zijn om te bepalen of je het leuk vindt om dit sjabloonkader te gebruiken of niet. De meer geavanceerde onderwerpen, zoals filters en blokken, zijn nuttig, maar je zult het nog steeds goed doen zonder hen. U vindt documentatie over de meer geavanceerde functies op de Smarty-website. Bedankt voor het lezen!