[How To] PHP Smarty Template Engine

  • Heyho,
    Da es hier im Forum noch kein Tutorial zur Smarty Template Engine gibt und ich gerade etwas Langeweile habe, dachte ich mir ich hole das mal nach.



    Was ist Smarty, kann man es essen?
    Als erstes, Nein, man kann es nicht essen.
    Smarty ist eine Template Engine für PHP. Nun wird sicher die nächste Frage kommen, was eine Template Engine ist.
    Es ist nichts anderes, Design und Code zu trennen, sprich eine Trennung zwischen Front -und Backend.
    Durch diese Trennung kann man dann schließlich eine sauberes, übersichtliches Webprojekt entwickeln.


    Installation
    Die Engine bekommt ihr von der Offiziellen Webite, http://www.smarty.net/download
    In dem Archiv wird nun der "libs" ordnet benötigt.
    In dem Tutorial werde ich die Ordnerstruktur für mein Webprojekt wie folgt anlegen:

    Spoiler anzeigen

    Die Anführungsstriche sind Unterordner.

    Code
    1. lib- template.class.php- templatetemplates- cache- configs- templates- templates_cindex.php



    In den Template Ordner, der sich im lib Ordner befindet, kommt nun der Inhalt von dem "libs" ordner aus dem smarty archiv.
    Für die ganzen Einstellungen basteln wir uns nun noch eine eigene Klasse, die Smarty einfach erbt.
    Spoiler anzeigen


    Als erstes binden wir die Klasse ein, und lassen unsere Klasse von ihr erben.

    PHP
    1. <?phprequire_once('template/Smarty.class.php');class Template extends Smarty {}?>

    Spoiler anzeigen


    Als nächstes erstellen wir uns einen Konstruktor in der Klasse

    PHP
    1. public function __construct(){}

    Spoiler anzeigen

    Allerdings würde dieser nun den Konstruktor in der Smarty Klasse überschreiben, und das macht sie dann nutzlos.
    Daher müssen wir dafür sorgen, dass der Smarty Konstruktor zuerst ausgeführt wird. Das machen wir indem wir folgendes in den Konstruktor unserer Klasse schrieben

    PHP
    1. parent::__construct();

    Spoiler anzeigen

    Nun können wir die Einstellungen für die Ordner, welche wir am Anfang erstellt haben setzen, das ist recht selbsterklärend.

    PHP
    1. $this->setTemplateDir('template/templates');$this->setCompileDir('template/templates_c');$this->setCacheDir('template/cache');$this->setConfigDir('template/configs');


    Nun ist unsere Klasse bereit, um in die index.php Datei eingebunden zu werden.

    PHP
    1. <?phprequire_once('lib/template.class.php');?>




    Die Erste Seite mit Smarty
    Die Vorbereitungen sind nun soweit getroffen, nun können wir anfangen, uns mit der Engine auseinander zu setzen.
    Wie bereits erwähnt, ist der Sinn dahinter, die Trennung zwischen Front und Backend.
    Fangen wir mal mit dem Frontend Bereich an. Das ist das was wir auf dem Bildschirm sehen, sprich der HTML Code, dieser wird aller Dings in eine Template Datei geschrieben ".tpl".
    Also erstellen wir uns erst mal eine "index.tpl" im Ordner "template/templates/".
    Das Template sieht nun erst mal so aus:

    HTML
    1. <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Smarty Tutorial</title></head><body>Hier ist ein Text für das Smarty Tutorial.</body></html>


    Allerdings ist das eine Statische Seite, sprich sie wird so angezeigt wie es im Code steht.
    Um das zu ändern, kommt jetzt der Backend Bereich.
    Also begeben wir uns nun in die index.php
    Spoiler anzeigen

    Als erstes erstellen wir das Klassenobjekt über unsere eigene Klasse.

    PHP
    1. $smarty = new Template();

    Spoiler anzeigen

    Nun werden wir eine eigenschaft von Smarty kennenlernen, welche uns etwas dynamischer arbeiten lässt.
    Die Funktion nennt sich "assign". Assign macht nichts anderes, als einer Variable einen Wert zu geben, allerdings können wir die Variablen dann im Template nutzen.
    Der Syntax sieht wie folgt aus.
    assign(VariablenName, VariablenWert)

    Spoiler anzeigen
    Wenn wir nun also unser Template etwas dynamischer erstellen wollen, können wir das nun so machen.

    PHP
    1. $smarty->assign('Title','Dynamisches Smarty Tutorial');$Text = "Das ist nun ein neuer Text, der im Backend geschrieben wurde ".$_GET['var'];$smarty->assign('Text',$Text);

    Spoiler anzeigen

    Nun haben wir also unsere Variablen, und sehen auf unserem Bildschirm immer noch nichts, was nun?
    Jetzt lassen wir das Template anzeigen, das geschieht mit der Funktion "display".

    PHP
    1. $smarty->display('index.tpl');

    Spoiler anzeigen
    Allerdings ist das Template jetzt immer noch statisch, das ändern wir indem wir im Quelltext vom Template die Variablem bequem einfügen.

    HTML
    1. {$VariablenName}

    Spoiler anzeigen

    Da wir die Variablen also "Title" und "Text" benannt haben, schreiben wir unser Template auch so um:

    HTML
    1. <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>{$Title}</title></head><body>{$Text}</body></html>

    Spoiler anzeigen

    Nun wir auch die ändrung deutlich.


    Der Effektive Einsatz
    Nachdem wir nun die Grundlegende Anwendung von Smarty verstanden haben, können wir es nun effektiv anwenden.
    Als erste erstellen wir in unserem template Ordner noch einen "backend" Ordner.
    Die Struktur sieht nun so aus:

    Spoiler anzeigen

    Die Anführungsstriche sind Unterordner.

    Code
    1. lib- template.class.php- templatetemplates- backend- cache- configs- templates- templates_cindex.php


    Nun werden wir im "lib" Ordner eine "system.class.php" Klasse erstellen, in ihr werden wir alles wichtige Regeln.

    PHP
    1. class System{}

    Spoiler anzeigen

    Nun werden wir in unserer index.php erst mal das verzeichnis definieren, um die ganzen Inkludes ohne Probleme einbinden zu können.

    PHP
    1. define('Dir',__DIR__);

    Spoiler anzeigen

    Als nächstes werden wir erst mal über die Klassendefinition unsere eigene Template Klasse inkludieren.

    PHP
    1. require_once(Dir.'/lib/template.class.php');

    Spoiler anzeigen
    Jetzt, nach dem wir die Template Klasse eingebunden haben, können wir nun weiter damit arbeiten.
    Aber als erstes erstellen wir eine Statische Geschützte Variable, für das Template Objekt in der System Klasse.

    PHP
    1. static protected $Template;

    Spoiler anzeigen
    Als nächstes folgt die Funktion.

    PHP
    1. public static function TPL() { if(is_object(self::$Template))return self::$Template; // Fragt ab ob die Variable schon ein Objekt besitzt, falls ja gibt es das Objekt zurück self::$Template = new Template(); // Falls Nein, erstellt es das Objekt. return self::$Template; //Nun wird das erstellte Objekt zurückgegeben.}

    Spoiler anzeigen
    Aber warum machen wir das jetzt so? Ganz einfach. Nun können wir ganz bequem mit Smarty arbeiten, ohne immer ein neues Objekt zu erstellen.
    Die neue Anwendung könnte nun so aussehen.

    PHP
    1. System::TPL()->assign("variable","test");

    Spoiler anzeigen
    Jetzt sind wir dem Endergebnis schon etwas näher gekommen..
    Nun kommen wir zur Seitenverwaltung. Das mache ich bequem über Query Links : index.php?page=Seite
    Dafür erstellen wir als erstes in unserem "lib" Ordner eine "page.class.php" Klasse.
    Um die Übersicht zu behalten werden wir sie in unsere System Klasse Inkludieren., direkt unter die Template Klasse:

    PHP
    1. require_once(Dir.'/lib/template.class.php');require_once(Dir.'/lib/page.class.php');

    Spoiler anzeigen
    Nun kommen wir zur eben erstellten Seiten Klasse.

    PHP
    1. class Page {}

    Spoiler anzeigen

    Nun erstellen wir als erstes den Konstruktor mit dem Parameter $page für den Seitennamen.

    PHP
    1. public function __construct($page) {}

    Spoiler anzeigen

    Nun prüfen wir noch ob der Parameter einen Inhalt besitzt, falls nicht setzen wir als Standard Seite "index".

    PHP
    1. if(!isset($page)) $page = "index";

    Spoiler anzeigen
    Nun sind wir bereit um das ganze zu verarbeiten, in dem wir unter der Abfrage erstmal eine Funktion aufrufen, die wir gleich erstellen werden, Als Parameter geben wir den Seitennamen mit.

    PHP
    1. self::checkPage($page);

    Spoiler anzeigen

    Nun erstellen wir in der Klasse die eben genannte funktion.
    Diese Funktion überprüft nun, ob sie seite (mit der endung .php) im Backend Ordner befindet, falls ja wird diese Inkludiert, falls nein geben wir eine "404" Meldung aus.

    PHP
    1. public static function checkPage($page) { if(file_exists(Dir."/template/backend/$page.php")) require_once(Dir."/template/backend/$page.php"); else echo "404 .. Seite nicht vorhanden";}

    Spoiler anzeigen
    Wie jetzt? Die Seite im Backend Ordner? Ich dachte wir arbeiten mit Template Dateien im template/templates Ordner?
    So ist das richtig, allerdings muss der Backend Code ja auch irgendwo Abgelegt werden, ansonsten macht das Prinzip mit der Codetrennung keine Sinn.

    Spoiler anzeigen
    Nun bearbeiten wir unsere index.php.

    PHP
    1. <?phpdefine('Dir',__DIR__);require_once(Dir.'/lib/system.class.php');?><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Smarty Tutorial</title></head><body><?php new Page($_GET['page']); ?></body></html>

    Spoiler anzeigen

    Bis jetzt sollte hier nichts neues sein, außer das wir unser Page Klassen objekt erstellen, und somit die Seitenverwaltung aufrufen.

    Spoiler anzeigen
    Da standart mäßig, wenn keine Seite übergeben wird, die "index" Seite geladen werden soll, erstellen wir in unserem Backend Ordner nun die "index.php".
    Nun kommt dort, wie bei den "ersten schritten in Smarty" gezeigt er Backend Code.

    PHP
    1. <?phpSystem::TPL()->assign('testvariable','Ich wurde im Backend geschrieben!');System::TPL()->display('index.tpl');?>

    Spoiler anzeigen

    Am ende Rufen wir die "index.tpl" auf. Diese muss sich im "template/templates" ordner befinden, wir in den ersten Schritten erklärt.
    In ihr geben wir nun die Variable wieder:

    HTML
    1. {$testvariable}


    Nach diesem Anwendungsbeispiel wird hoffentlich endgültig Klar, wie es funktioniert.
    Möchte man eine Seite hinzufügen, so erstellt man eine php Datei mit dem Seitennamen im Backend Ordner, man benötigt aber auch die Template Datei im template/temlates Ordner, als Frontend.


    Arrays in Smarty
    Natürlich kann man auch mit Arrays arbeiten, und diese dann im Template verarbeiten.
    Ich werde einfach mal im Backend Ordner eine "array.php" Datei erstellen damit wir sie über "index.php?page=array" aufrufen können. Die "array.tpl" erstelle ich wie immer im template/templates Ordner.

    Spoiler anzeigen

    Als erstes erstellen wir in unserer "array.php" eine Variable als Array.

    PHP
    1. $array = array();

    Spoiler anzeigen

    Als nächstes lassen wir mal eine Schleife 5 mal Durchlaufen und setzen somit eine Dimmension und den Wert des Arrays.

    PHP
    1. for($i=0;$i<5;$i++) $array[$i] = $i;

    Spoiler anzeigen

    Nun ist unser Array fertig und wir können ihn zwischenspeichern.

    PHP
    1. System::TPL()->assign('array',$array);

    Spoiler anzeigen

    Nun zeigen wir noch unsere Template Datei an und somit ist der Backend-Code Fertig.

    PHP
    1. System::TPL()->assign('array',$array);

    Spoiler anzeigen

    Kommen wir nun zum anzeigen, in PHP würde das ganze nun so aussehen:

    PHP
    1. echo $array[2]; //ergibt 2, da die schleife in der ersten Dimension beim 2. Durchlauf war und somit auch der wert so gesetzt wurde.

    Spoiler anzeigen

    In Smarty geht das ganze aber bequemer, indem wir normal die Variable anzeigen, jedoch ergänzen wir die Dimensionen mit einem Punkt und dem wert der Dimension, in unserem Beispiel würde das so aussehen.

    HTML
    1. {$array.2}

    Spoiler anzeigen

    Das ergibt demnach 2, da der wert der 2. Dimension als 2 gespeichert ist.


    For Schleife in Smarty
    Passend auf dem Vorherigen Thema mit den Arrays, zeige ich hier nun wie man in einer Template Datei eine Schleife einbindet, um so zum Beispiel verschiedene Sachen aufzulisten, wie z.B. Benutzer.
    Ich benutze gleich die Dateien die wir bei dem Array Tutorial genutzt haben.

    Spoiler anzeigen

    Am backend Code verändert sich nichts, daher gehen wir gleich in die Template Datei, ("array.tpl").

    Spoiler anzeigen
    Der Syntax einer Schleife sieht erstmal so aus:

    HTML
    1. {for $i=0 to 3}{/for}

    Spoiler anzeigen

    Das heißt also, die Variable "i" gilt hier als index, die Schleife fängt bei 0 an und hört Praktisch bei 2 auf.
    In PHP würde das ganze so aussehen:

    PHP
    1. for($i=0;$i<3;$i++) {}

    Spoiler anzeigen
    Um nun unser Array in der Schleife ausgeben zu lassen, müssen wir nur die erste Dimension im array mit dem Index "i" austauschen:

    HTML
    1. {for $i=0 to 4} {$array.$i}{/for}

    Spoiler anzeigen

    Nun gibt es noch einen sogenannten "forelse", dieses wird aufgerufen, wenn die schleifen z.B. bei 5 anfängt aber nur bis 1 laufen soll.

    HTML
    1. {for $i=5 to 1} {$array.$i}{forelse}Geht nicht.{/for}


    Abfragen in Smarty
    Es ist auch möglich, abfragen direkt im Template zu regeln, um z.B. verschiedenen Content anzeigen zu lassen.

    Spoiler anzeigen

    Der Syntax einer einfachen Abfrage sieht demnach so aus.

    HTML
    1. {if $variable == wert}{/if}

    Spoiler anzeigen

    Die Abzufragende variable übergeben wir wieder im backend via.

    PHP
    1. System::TPL()->assign('variable',1);

    Spoiler anzeigen

    Demnach ist die Funktion selbsterklärend:

    HTML
    1. {if $variable == 1} Die Variable besitzt den Wert 1{elseif $variable == 2} Die Variable besitzt den Wert 2{else} Keiner der beiden Möglichkeiten treten ein.{/if}


    Template Dateien Inkludieren
    Wenn man seine Website weiter strukturieren möchte, ist es sinnvoll, z.B. für footer, navbar weitere Template Dateien zu verwenden.

    Spoiler anzeigen

    Nehmen wir mal an, das wir ein Template besitzen und nun ein anderes Template einbinden möchten, zwecks der Übersichtlichkeit, verwenden wir die Funktion "include".
    Der Syntax sieht demnach so aus:

    HTML
    1. {include file="dateiname.tpl"}

    Spoiler anzeigen

    Es ist recht selbsterklärend, allerdings muss die zu Inkludierende Datei sich auch im template/templates Ordner befinden.


    PHP Code direkt im Template einbetten
    Es gibt auch die Möglichkeit PHP Code im Template zu verwenden, das spricht zwar gegen jede Art, warum man überhaupt smarty verwenden sollte aber es gibt die Möglichkeit.
    Sinnvoll wäre es zum Beispiel, wenn man in einem Template eine Klasse öffnet, zum Beispiel zur Seitenverwaltung.

    Spoiler anzeigen

    Der Syntax sieht folgendermaßen aus:

    HTML
    1. {php}echo "PHP Code im Template";{/php}

    Spoiler anzeigen

    Jedoch gibt es da noch ein Problem, Diese Funktion ist in der "normalen" Smarty Klasse nicht vorhanden, wie gesagt aus gutem Grund, da so eine direkte Trennung zwischen Front und Backend nicht mehr gewährleistet wird.
    Demnach müssen wir in unserer "template.class.php" die die Erbinformation in "SmartyBC" Umbenennen, da in dieser Klasse die Funktion aktiviert wird.

    PHP
    1. class Template extends SmartyBC

    Spoiler anzeigen

    Mehr muss nicht geändert werden


    Fazit
    Das Resultat ist nun einfache Trennung von Front und Backend. Ist doch ganz einfach oder?
    Ich hoffe das Tutorial war gut verständlich, da ich eigentlich nicht so gut im erklären bin :S
    Konstruktive Kritik ist wie immer gerne gesehen, bei Interesse kann ich auch weitere Tutorials machen und auf weitere Funktionen der Engine eingehen.


    Bis dahin, Mit Freundlichem Gruß,
    Slash™

    [Bedrohung für WestCoast... ]


    Meine Werke hier im Forum:
    Zu sehen in meinem Profil.

    2 Mal editiert, zuletzt von Slash™ () aus folgendem Grund: Tutorial wurde erweitert mit einer Effektiven Anwendung und die wichtigsten Template Funktionen

  • Hallo Slash,


    zuerst einmal danke für das Verständnisvolle Tutorial. Ich glaube selbst manche die es nicht verstanden haben, haben bestimmt jetzt das Gefühl es zu verstehen.
    Hatte mir schon mehrmals Gedanken gemacht Smarty zu verwenden. Aber lediglich habe ich keine Lust mit Template-Dateien (.tpl) zu arbeiten da vieles anders ist (Nicht nur die Variablen) Wie du es erklärt hattest "{$text}" sondern mehr. Wie werden Functions und Klassen eingebunden? While, For und Foreach? Könntest du dies auch verständlich erklären?


    Liebe Grüße
    Patrick

    Dir gefällt mein Beitrag oder hat dir weiter geholfen? Dann drücke auf dem "Gefällt mir" - Daumen :love:


    Wer PALWAL-Sternchen vergibt, bekommt aus Prinzip ein Like 😏


    Webentwickler |-| politisch aktiv


    Apache 207 ♡


    <3

  • Hallo Slash,


    zuerst einmal danke für das Verständnisvolle Tutorial. Ich glaube selbst manche die es nicht verstanden haben, haben bestimmt jetzt das Gefühl es zu verstehen.
    Hatte mir schon mehrmals Gedanken gemacht Smarty zu verwenden. Aber lediglich habe ich keine Lust mit Template-Dateien (.tpl) zu arbeiten da vieles anders ist (Nicht nur die Variablen) Wie du es erklärt hattest "{$text}" sondern mehr. Wie werden Functions und Klassen eingebunden? While, For und Foreach? Könntest du dies auch verständlich erklären?


    Liebe Grüße
    Patrick

    Schau mal da: http://www.smarty.net/docsv2/de/ - da steht alles beschrieben, sogar auf Deutsch. :thumbup:

  • palwal :
    Könntest du das nächste mal mich bitte zitieren, dann könnte ich auch sofort antworten, hab es leider nicht gesehen, sorry dafür.
    Das freut mich schon mal wenn es verständlich war, da es nicht so meine habe ist, was zu erklären.


    Aber natürlich wenn du willst erweitere ich das ganze auch noch, demnach kann ich auch einen effektiven Einsatz von smarty zeigen.
    Andernfalls kannst du dich auch durch die docs arbeiten, was allerdings meiner Meinung nach etwas verwirrend ist.
    Ich werde heute Abend, wenn ich wieder zuhause vom Proben bin, das ganze erweitern.


    MfG Slash™


    //Edit
    Hab das ganze jetzt mit einer Effektiven Einsatzvariante und den wichtigsten Template Funktionen erweitert.

  • Hallo Slash!


    Ich bin bei der Recherche zu Smarty über dein Tutorial "gestolpert", dass mir ausgesprochen gut gefällt und für meine "Kenntnisse" sehr aufschlussreich ist!
    Nun da ich kein gelernter Programmierer bin, zwar über rudimentäre Kenntnisse verfüge, fehlt mir bei deinem "Beispiel" ein wenig der Durchblick....


    Wäre es möglich, dass du mir den obigen Quellcode (zusammengefasst (welcher Code steht in welcher Datei) zur Verfügung stellen kannst?


    "Nach diesem Anwendungsbeispiel wird hoffentlich endgültig Klar, wie es funktioniert." - grundsätzlich ja, bis auf die obige Tatsache, dass ich mir bei eingen
    Code-Schnipseln nicht klar bin, in welche Datei sie gehören....


    Vielen Dank im Voraus
    LG
    Wolfgang

  • Beitrag von elyday ()

    Dieser Beitrag wurde vom Autor aus folgendem Grund gelöscht: Fail ().