Im Folgenden wird beschrieben, 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.
Folgende Voraussetzungen sind zu erfüllen:
-
Im Hauptverzeichnis von xentral wird ein Ordner "smarty" angelegt. In diesem Verzeichnis wird die heruntergeladene Datei entpackt
-
In www/pages/content wird ein Ordner "smarty" angelegt. In diesem Verzeichnis werden die für Smarty relevanten Templates angelegt
-
Im Ordner www/pages/ wird die Datei "smartytest.php" angelegt. Alle hier gezeigten Beispiele beziehen sich auf diese Datei
-
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 wird ein einfaches Modul und 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:
Die Datei "smartytest.php" erhält folgenden Inhalt:
Relevant ist die 2. Zeile: include_once("../smarty/libs/Smarty.class.php");. Dadurch wird Smarty eingebunden und kann dann verwendet werden.
Um Smarty in xentral zu verwenden, ist folgender Ablauf einzuhalten: Zunächst ist das Smartyobjekt zu instanziieren und dem Smartyobjekt Werte zuzuführen. Dann ist dem Smartyobjekt ein Template zuzuweisen, auf das die Werte angewandt werden sollen. Das Smartyobjekt generiert danach den HTML Code. Dieser ist dem xentralstemplate zuzuweisen und das xentralstemplate zu parsen. Für die Verwendung von Smarty fehlt 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, die Variablen und Steuerelemente, die von Smarty verwendet werden. Der Inhalt der Templatedatei sieht anschließend so aus:
In smartytest.php wird die Funktion SmartyTestList wie folgt angepasst:
Der anschließende Programmablauf folgt dem oben beschriebenen Schema:
-
$smarty = new Smarty → Es wird ein neues Smartyobjekt erstellt
-
$smarty->assign('text', 'Textueller Inhalt') → Teilt dem Smartyobjekt mit, dass die Variable "Text" den Wert "Textueller Inhalt" beinhalten soll
-
$html = $smarty->fetch('../www/pages/content/smarty/smartytest.tpl') → Lässt das Smartyobjekt den HTML Code generieren
-
$this->app->Tpl->Set('SMARTY', $html) → Weist dem xentralstemplate den HTML Code zu
-
$this->app->Tpl->Parse("PAGE","smartytest_list.tpl") → Parst das Xentralstemplate
Das Ergebnis sieht dann aus wie folgt:
Hier ist einzusehen, dass {$text} durch "Textueller Inhalt" ersetzt wurde.
Smarty ersetzt nicht nur einfache Textbausteine. Um Smarty wirklich funktional einsetzen zu können, werden noch ein paar zusätzliche Bausteine benötigt. Hierfür ist nachstehendes mit Smarty durchzuführen:
Anschließend wird smartytest.tpl erweitert: :entwickler:smarty11.png?nolink Zusätzlich werden vier neue Dateien im Verzeichnis www/pages/content/smarty/ angelegt:
-
Die Datei parent.tpl:
-
Die Datei child.tpl:
-
Die Datei layout_divwithborder_header.tpl:
-
Die Datei layout_divwithborder_footer.tpl:
Wenn das Modul anschließend neu geladen wird, erscheinen drei Tabs.
Im ersten Tab ist zu sehen, dass ein roter Kasten den Text einrahmt. 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 lediglich eine Zeile, in der ein Div mit Rahmen geöffnet wird. Die Zeile {include file="pages/content/smarty/layout_divwithborder_footer.tpl"} importiert ihrerseits das Gegenstück zu diesem Div und zwar ein schließendes Tag. Zusätzlich ist zu sehen, dass mit color="$color" eine Variable an das zu importierende Template weitergereicht wird. Dabei ist der Ablauf wie folgt: Dem Smartyobjekt wird in Zeile 20 gesagt, die Variable "color" hat den Wert "red". In Zeile 42 wird der Vorgang zum Generieren des HTML Codes gestartet und 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
Im zweiten Tab ist ein grün umrandetes Div mit Inhalt zu sehen. Auf Codeseite wird in Zeile 15 von "smartytest.tpl" das Template "child.tpl" importiert. Dieses Template erbt seinerseits von "parent.tpl". Das grüne umrandete wird vom Elterntemplate übernommen, aber der Inhalt durch das erbende Template überschrieben. 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 besitzt. Sollte das Elternelement Blöcke besitzen, die vom Kind nicht überschrieben werden, werden die Blöcke des Elterntemplates angezeigt. Sollte das Kind hingegen Blöcke besitzen, die das Elterntemplate nicht besitzt, werden diese gar nicht angezeigt.
Das dritte Tab ist kondtional. Es taucht nur auf, wenn in der SQL Abfrage in "smartytest.php" mindestens ein Artikel gefunden wurde. Wenn das der Fall ist, wird in Zeile 24 der Variablen "tab" der Tabname 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 Variableninhalt angegeben. Zusätzlich werden in diesem Tab eine Kombobox und zwei Tabellen befüllt. Um die Kombobox 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 ... Elemente.
Im Template wird in Zeile 26, analog zur Syntax in PHP, ein Array durchgeschleift. Hierbei wird für jedes Arrayelement der Code in der Schleife ausgeführt. Das heißt: 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 das Fehlen keinen Unterschied machen, allerdings sollten diese erwähnt werden. In Zeile 40 ist ein assoziatives Array durchgeschleift; hier ist zu sehen, wie der Zugriff auf die einzelnen Werte über den Schlüssel realisierbar ist.