Web-Publishing mit Template Engines

Ein Nützliches Werkzeug

oder nur Spielerei?

 

 

Template Engines sind Skripte, die einem Programmierer und Designer bei der Zusammenarbeit sehr helfen können.

Ein Template ist ein Design, was noch nicht inhaltlich gefüllt ist, sondern nur mit Platzhaltern ausgestattet wird. Diese Platzhalter werden dann erst zur Laufzeit, also erst wenn ein Besucher die dynamische Website (das PHP-Dokument) aufruft, mit Leben gefüllt.

 

Es gibt dann einerseits das Template, rein aus HTML, CSS und JavaScript und andererseits die reine Scriptdatei. Die Scriptdatei lädt beispielsweise Inhalte aus einer Datenbank, verarbeitet und filtert sie und gibt sie dann an die Engine weiter, welche den entsprechenden Platzhalter mit dem Inhalt füllt.

 

Was genau ist jetzt dynamisch daran?

Die Struktur bleibt gleich, die Inhalte werden dynamisch per Script ergänzt.

Man kann sich das am besten mit einer Wetteranzeige ihrer Stadt an der rechten Seite der Homepage vorstellen. Dort soll immer ein 50×50 Pixel großes „Feld“ stehen, in dem das Wetter angezeigt wird. Zudem soll dieses Feld einen schönen blauen Rahmen erhalten, im Footer einen Copyrighthinweis anzeigen und als Hintergrund entweder eine Sonne oder eine Wolke angeziegt werden.

Mann kann jetzt das Feld, inklusive Copyrighthinweis und LayOut (blauer Rahmen) in das Template schreiben. Sogar das umschließende <span> Element für die Temperatur kann dort enthalten sein.

Das einzige was das Script am Endergebnis noch ändert ist also die Tempeartur, deren Anzeigeplatzhalter gefüllt und das Hintergrundbild geändert wird.

Man merke sich: Die Struktur bleibt gleich, der Inhalt ist dynamisch!

 

 

Sehen wir uns das ganze doch einfach mal in der Praxis an. Dazu verwenden wir die Template Engine Smarty. Es gibt noch unzählige andere dieser Rendering-Engines, Smarty allerdings ist eine der Beliebtesten, Umfangreichsten und gleichzeitig eine gut dokumentierte Engine.

(Smarty ist selbst auch in PHP geschrieben).

 

 

 

1. Download und Installation

 

Laden sie sich das Smarty Paket unter folgender Adresse herunter:

 

http://www.smarty.net/download

 

Entpacken sie das Archiv anschließend.

 

Darin befindet sich folgender Ordner:

/libs enthält die Rendering-Engine selbst – Dort müssen sie i.d.R. Nichts ändern

 

Nun fügen sie selbst diese beiden leeren Verzeichnisse hinzu:

/templates enthält ihre eigenen Templates – Dort spielt sich der Großteil ihrer Designarbeit ab

/templates_c enthält die kompilierten Templates. Smarty kompiliert Sie in Bytecode, dadurch kann die Engine im Realbetrieb enorm viel Zeit sparen. In diesem Ordner müssen sie ebenfalls nichts ändern. Sobald sie ein Template das erste mal aufrufen, wird es kompiliert und in diesem Ordner gespeichert.

 

2. Programmierung des ersten Scripts und Templates mit Smarty

 

Den größten Teil haben sie schon erledigt. Wenn alle Dateien entpackt, die beiden Template-Verzeichnisse hinzugefügt und auf ihren Webserver oder ihrem virtuellen Server hochgeladen wurden, kann es losgehen!

 

Wie bereits in Schritt 1 erwähnt, müssen sie alle Dateien in /templates speichern.

(templates ist der Standardname für diesen Ordner, in den Einstellungen können sie dies auch ändern. Ich persönlich würde die Konfiguration aber so belassen.)

 

Beachten sie aber, dass die Dateien in diesem Ordner zwangsweise als tpl-Dateien gespeichert werden müssen. Wenn ihr Editor diese Dateiendung nicht kennt, dann schreiben sie einfach selbst ein .tpl hinter den Dateinamen. Achten sie aber darauf, dass das Dokument nicht automatisch als txt gespeichert wird.

 

Legen wir einfach mal los. Wir beginnen mit dem Design! Das können wir genau so tun wie sonst auch, ganz normal mit HTML, CSS und ggf. Javascript.

 

Dazu kommen nun die sogenannten Platzhalter. Man kennzeichnet sie mithilfe der geschweiften Klammern „{“ und „}“. Darin steht der Tag, angeführt von einem Dollar-Zeichen.

 

Datei ‚erster_versuch.tpl‘:

 

<!doctype html>

<head>

<title>Mein erstes Template</title>

</head>

<body>

<h1> Aktuelle Nachrichten </h1>

<article>{$artikel1}</article>

<article>{$artikel2}</article>

<article>{$artikel3}</article>

</body>

 

 

Nun geht es an die PHP-Datei!

Wir haben bis jetzt drei Platzhalter mit den Namen „artikel1“, „artikel2“ und „artikel3“ festgelegt.

Diese möchten wir jetzt mit Beispielinhalten füllen. (In der Praxis ruft man diese Daten meist aus der Datenbank ab, hier nehmen wir zur Demonstration den Standardtext.)

 

Um auf Smarty zugreifen zu können, müssen wir die Klasse zunächst einbinden und dann ein Smarty-Objekt erzeugen.

 

<?php

require_once ‚libs/Smarty.class.php‘;

$smarty=new Smarty();

 

 

Das Smarty Objekt besitzt die Methode assign(‚platzhalter‘,’inhalt‘); Das ist eigentlich ziemlich selbsterklärend. Im ersten Parameter übergeben wir den zuvor definierten Platzhalter und im zweiten Parameter den Inhalt, mit dem der Platzhalter nun gefüllt werden soll.

 

 

$smarty->assign(‚artikel1′,’Lorem ipsum dolor sit amaret.‘);

$smarty->assign(‚artikel2′,’Lorem ipsum dolor sit amaret.‘);

$smarty->assign(‚artikel3′,’Lorem ipsum dolor sit amaret.‘);

 

Damit das Dokument nun gerendert und angezeigt wird, müssen Sie nur noch die Methode display mit dem Dateinamen des Templates aufrufen.

 

$smarty->display(‚erster_versuch.tpl);

 

Wir sind fertig! Das erste Templatebuilding mit Smarty ist vollendet.

 

Fazit

 

 

Vorteile von Template Engines

 

 

Design und Script sind besser getrennt.

Möchte man am Design arbeiten, arbeitet man mit dem Template Engines. Möchte man hingegen am Script arbeiten, arbeitet man an den reinen Scriptdateien. Die Differenzierung kann vielen Designern und Entwicklern enorm viel Zeit und Stress ersparen, wenn die beiden Aufgaben von unterschiedlichen Personen ausgeführt werden. Der Programmierer kann am Script und der Designer gleichzeitig am Layout arbeiten.

 

Multi-Templates für verschiedene Plattformen – Responsive Webdesign

Es ist durch die Trennung vom Script einfacher, plattformspezifische Layouts für z.B. Mobiltelefone zu erstellen. Es müssen nur wenige Zeilen im Script geändert werden.

 

Bessere Inklusionsmöglichkeiten für HTML- bzw. TPL-Dokumente

Mit HTML selbst ist es nicht möglich, andere HTML-Dateien einzubinden. Smarty erledigt das mit einer Zeile. Man könnte das Problem auch mit PHP- Funktionen wie include() oder require() lösen, dann allerdings wären Design & Script nicht mehr getrennt.

 

 

 

 

Nachteile von Template Engines

 

 

Zu großer Aufwand für kleinere Projekte

Für kleine Projekte, insbesondere One-Page-Apps eignen sich die TemplateEngines eher weniger, weil sich der Entwicklungsaufwand und die Umstrukturierung mit Platzhaltern bei wenigen Inhalten nicht lohnt.

 

 

 

Viel Spaß beim Layouten und Programmieren!

Max 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.