[How To] PHP Smarty Template Engine

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    Es gibt Neuigkeiten! Ab sofort könnt ihr dem Donators Club auf Lebenszeit beitreten.
    Weitere Infos im Thema Donator's Club ab heute wieder verfügbar!

    • [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, 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.

      Quellcode

      1. lib- template.class.php
      2. - template
      3. templates
      4. - cache
      5. - configs
      6. - templates
      7. - templates_c
      8. index.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-Quellcode

      1. <?php
      2. require_once('template/Smarty.class.php');
      3. class Template extends Smarty {
      4. }?>


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

      PHP-Quellcode

      1. public function __construct(){
      2. }

      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-Quellcode

      1. parent::__construct();

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

      PHP-Quellcode

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



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

      PHP-Quellcode

      1. <?php
      2. require_once('lib/template.class.php');
      3. ?>



      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:
      Spoiler anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>Smarty Tutorial</title>
      6. </head>
      7. <body>
      8. Hier ist ein Text für das Smarty Tutorial.
      9. </body>
      10. </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-Quellcode

      1. $smarty = new Template();

      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)

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

      PHP-Quellcode

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

      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-Quellcode

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


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

      HTML-Quellcode

      1. {$VariablenName}

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

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>{$Title}</title>
      6. </head>
      7. <body>
      8. {$Text}
      9. </body>
      10. </html>

      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.

      Quellcode

      1. lib
      2. - template.class.php
      3. - template
      4. templates
      5. - backend
      6. - cache
      7. - configs
      8. - templates
      9. - templates_c
      10. index.php


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

      PHP-Quellcode

      1. class System
      2. {
      3. }

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

      PHP-Quellcode

      1. define('Dir',__DIR__);

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

      PHP-Quellcode

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


      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-Quellcode

      1. static protected $Template;


      Als nächstes folgt die Funktion.

      PHP-Quellcode

      1. public static function TPL() {
      2. 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
      3. self::$Template = new Template(); // Falls Nein, erstellt es das Objekt.
      4. return self::$Template; //Nun wird das erstellte Objekt zurückgegeben.
      5. }


      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-Quellcode

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


      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-Quellcode

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


      Nun kommen wir zur eben erstellten Seiten Klasse.

      PHP-Quellcode

      1. class Page
      2. {
      3. }

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

      PHP-Quellcode

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

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

      PHP-Quellcode

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


      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-Quellcode

      1. self::checkPage($page);

      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-Quellcode

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


      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.

      Nun bearbeiten wir unsere index.php.

      PHP-Quellcode

      1. <?php
      2. define('Dir',__DIR__);
      3. require_once(Dir.'/lib/system.class.php');
      4. ?>
      5. <!DOCTYPE html>
      6. <html>
      7. <head>
      8. <meta charset="UTF-8">
      9. <title>Smarty Tutorial</title>
      10. </head>
      11. <body>
      12. <?php new Page($_GET['page']); ?>
      13. </body>
      14. </html>
      Alles anzeigen

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

      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-Quellcode

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

      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-Quellcode

      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-Quellcode

      1. $array = array();

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

      PHP-Quellcode

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

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

      PHP-Quellcode

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

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

      PHP-Quellcode

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

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

      PHP-Quellcode

      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.

      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-Quellcode

      1. {$array.2}

      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").

      Der Syntax einer Schleife sieht erstmal so aus:

      HTML-Quellcode

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

      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-Quellcode

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


      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-Quellcode

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

      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-Quellcode

      1. {for $i=5 to 1}
      2. {$array.$i}
      3. {forelse}
      4. Geht nicht.
      5. {/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-Quellcode

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

      Die Abzufragende variable übergeben wir wieder im backend via.

      PHP-Quellcode

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

      Demnach ist die Funktion selbsterklärend:

      HTML-Quellcode

      1. {if $variable == 1}
      2. Die Variable besitzt den Wert 1
      3. {elseif $variable == 2}
      4. Die Variable besitzt den Wert 2
      5. {else}
      6. Keiner der beiden Möglichkeiten treten ein.
      7. {/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-Quellcode

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

      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-Quellcode

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

      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-Quellcode

      1. class Template extends SmartyBC

      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.

      Dieser Beitrag wurde bereits 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:

      Webentwickler |-| politisch aktiv

      Avicii lebt in unseren Herzen weiter ♡
      youtu.be/u8tdT5pAE34
    • palwal schrieb:

      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: 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.
      [Bedrohung für WestCoast... ]

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

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Slash™ ()

    • 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 ().