Smarty Templates

  • Smarty
In dieser Anleitung wird beschreiben wie mit Smarty Templates erstellt werden können um eine klare Abgrenzung zwischen Programmierung und Design zu erreichen. Smarty ist eine kostenlose PHP Template Engine und kann unter folgender URL heruntergeladen werden: https://www.smarty.net/download.

Schritt 0: Voraussetzungen

  1. Im Hauptverzeichnis von Xentral wird ein Ordner "smarty" angelegt. In diesem Verzeichnis wird die heruntergeladene Datei entpackt
  2. In www/pages/content wird ein Ordner "smarty" angelegt. In diesem Verzeichnis werden die für Smarty relevanten Templates angelegt
  3. Im Ordner www/pages/ wird die Datei "smartytest.php" angelegt. Alle hier gezeigten Beispiele beziehen sich auf diese Datei
  4. Im Ordner www/pages/content/ wird die Datei "smartytest_list.php" angelegt. Diese Datei ist das Ziel für das von Smarty generierte HTML
Zunächst werden ein einfaches Modul, sowie ein einfaches Templates erstellt. Näheres dazu im Handbucheintrag für das Erstellen von Modulen. Die Datei "smartytest_list.php" enthält lediglich eine Zeile, da das gesamte HTML durch Smarty generiert wird::entwickler:smarty0.png?nolink Die Datei "smartytest.php" erhält als minimalistisches Modul folgenden Inhalt: :entwickler:smarty1.png?nolink Relevant ist die 2. Zeile: include_once("../smarty/libs/Smarty.class.php");. Dadurch wird Smarty eingebunden kann verwendet werden.

Schritt 1: Der erste Schritt

Der Ablauf für die Verwendung von Smarty in Xentral sieht aus wie folgt: Smartyobjekt instanzieieren → Smartyobjekt mit Werten füttern → dem Smartyobjekt ein Template zuweisen au das die Werte angewandt werden sollen → das Smartyobjekt den HTML Code generieren lassen → den vom Smartyobjekt generierten HTML Code dem Xentralstemplate zuweisen → das Xentralstemplate parsen Für die Verwendung von Smarty fehlt also noch ein Smartytemplate. Hierfür wird im Ordner www/pages/content/smarty die Datei "smartytest.tpl" angelegt. In diesem Template stehen zukünftig der HTML Code, sowie die Variablen und Steuerelemente die von Smarty verwendet werden. Der Inhalt der Templatedatei sieht anschlißend so aus::entwickler:smarty8.png?nolink In smartytest.php wird die Funktion SmartyTestList wie folgt angepasst: :entwickler:smarty6.png?nolink Der anschließende Programmablauf folgt dem oben beschriebenen Schema:
  1. $smarty = new Smarty; erstellt ein neues Smartyobjekt
  2. $smarty->assign('text', 'Textueller Inhalt'); teilt dem Smartyobjekt mit, dass die Variable "Text" den Wert "Textueller Inhalt" beinhalten soll
  3. $html = $smarty->fetch('../www/pages/content/smarty/smartytest.tpl'); lässt das Smartyobjekt den HTML Code generieren
  4. $this->app->Tpl->Set('SMARTY', $html); weist dem Xentralstemplate den HTML Code zu
  5. $this->app->Tpl->Parse("PAGE","smartytest_list.tpl"); parst das Xentralstemplate
Das Ergebnis sieht dann aus wie folgt: :entwickler:smarty7.png?nolink Hierbei kann man sehen dass {$text} durch "Textueller Inhalt" ersetzt wurde. Das war bereits das ganze Geheimnis.

Schritt 2: Komplexes Beispiel

Die Möglichkeiten von Smarty erschöpfen sich allerdings nicht darin lediglich einfache Textbausteine zu ersetzen. Um Smarty wirklich funktional einsetzen zu können werden noch ein paar zusätzliceh Bausteine benötigt. Hier für wird die Funktion SmartyTestList ordentlich aufgebohrt::entwickler:smarty10.png?nolink Anschließend wird smartytest.tpl erweitert::entwickler:smarty11.png?nolink Zusätzlich werden vier neue Dateien im Verzeichnis www/pages/content/smarty/ angelegt: 1. Die Datei parent.tpl::entwickler:smarty12.png?nolink 2. Die Datei child.tpl::entwickler:smarty13.png?nolink 3. Die Datei layout_divwithborder_header.tpl::entwickler:smarty14.png?nolink 4. Die Datei layout_divwithborder_footer.tpl::entwickler:smarty15.png?nolink Wenn das Modul anschließend neu geladen wird erscheinen drei Tabs. :entwickler:smarty17.png?nolink Im ersten Tab kann man sehen, dass sich ein roter Kasten um den Text befindet. Dieser rote Kasten entsteht dadurch dass die Zeile {include file="pages/content/smarty/layout_divwithborder_header.tpl" color="$color"} die Datei "layout_divwithborder_header.tpl" importiert. In dieser Datei gibt es nur eine Zeile in der ein Div geöffnet wird das einen Rahmen besitzt. Die Zeile {include file="pages/content/smarty/layout_divwithborder_footer.tpl"} importiert ihrerseits das Gegenstück zu diesem Div, namentlich ein schließendes </div> Tag. Zusätzlich kann man sehen das mit color="$color" eine Variable an das zu importierende Template weitergereicht wird. Dabei ist der Ablauf wie folgt: Dem Smartyobjekt wird Zeile 20 gesagt die Variable "color" hat den Wert "red" → in Zeile 42 wird der Vorgang zum Generieren des HTML Codes gestartet → im smartytest.tpl wird in Zeile 10 das Template "layout_divwithborder_header.tpl" geladen, dabei wird zusätzlich die Variable "color" mit dem Wert "red" an das Template übergeben → ...anschließend wird in smartytest.tpl in Zeile 12 das gleiche für das Template "layout_divwithborder_footer.tpl" gemacht :entwickler:smarty18.png?nolink Im zweiten Tab ist ein grün umrandetes Div mit aussagekräftigem Inhalt zu sehen. Auf Codeseite wird in Zeile 15 von "smartytest.tpl" das Template "child.tpl" importiert wird. Dieses Template erbt seinerseits von "parent.tpl". Das grüne umrandete <div> wird vom Elterntemplate übernommen, den Inhalt überschreibt das erbende Template hingegen. Hierfür sind die {block} Elemente ausschlaggebend. Das Kind ersetzt die Blöcke seiner Eltern mit den Informationen aus seinen eigenen Blöcken, sofern es eigene Blöcke mit entsprechenden Namen hat. Sollte das Elternelement Blöcke besitzen die vom Kind nicht überschrieben werden, so werden die Blöcke des Elterntemplates angezeigt. Sollte das Kind hingegen Blöcke besitzen die das Elterntemplate nicht besitzt, so werden diese gar nicht(!) angezeigt. :entwickler:smarty19.png?nolink Das dritte Tab ist Kondtional. Es taucht nur auf wenn in der SQL Abfrage in "smartytest.php" mindestens ein Artikel gefunden wurde. Wenn es mindestens einen Artikel gibt wird in Zeile 24 der Variablen "tab" der Name für das Tab zugewiesen. Auf der Templateseite wird in "smartytest.tpl" in Zeile 5 geprüft ob die Variable ein leerer String ist. Wenn die Variable nicht leer ist wird das Listenelement in der nächsten Zeile angezeigt und der Name wird mit dem Inhalt der Variablen angegeben. Zusätzlich werden in diesem Tab eine Kombobox sowie zwei Tabellen befüllt. Um die Kombobox mit Leben zu füllen müssen auf Seite des Smartyobjekts lediglich zwei Arrays übergeben werden: $smarty->assign('id', $idarray); sowie $smarty->assign('bezeichnung', $namearray);. Das Smartyobjekt übernimmt anschließend die Generierung der einzelnen <option value="...">...</option> Elemente. Im Template wird in Zeile 26, Analog zur Syntax in PHP, ein Array durchgeschleift. Hierbei wird für jedes Element im Array der Code in der Schleife ausgeführt. Etwas spezifischer: Für jeden Artikel wird eine neue Zeile angelegt. Die {strip}...{/strip} Tags entfernen hierbei Zeilenumbrüche und überschüssige Leerzeichen die die Darstellung behindern könnten. In diesem Beispiel würde ihre Abwesenheit keinen Unterschied machen, allerdings sollten Sie erwähnt werden. In Zeile 40 ein assoziatives Array durchgeschleift; hier sieht man wie der Zugriff auf die einzelnen Werte über den Schlüssel realisierbar ist.
War der Artikel hilfreich?
Vielen Dank für Ihr Feedback!

Made with ❤ at zwetschke.de