Web-Entwickler finden sich früher oder später in der Hölle wieder: ihre Skripte sind unübersichtlich und unwartbar geworden. Programmlogik, Darstellungslogik und im schlimmsten Fall sogar Layout und Design sind zu einem unentwirrbaren Knäuel Code verkommen, der kaum noch weiterentwickelt werden kann. Hatte man sich nur vorher Gedanken um eine klare Struktur des Codes gemacht – HTML-Template-Engines helfen dabei.
Eine HTML-Template-Engine dient dazu, Programmlogik (PHP), sowie Layout (HTML) und Design (CSS) voneinander zu trennen. Die meisten Template-Systeme sind nicht auf HTML-Vorlagen beschränkt. Sie lassen sich in der Regel auch für E-Mails und etwa XML nutzen.
Inhalte können mit Template-Systemen leicht in ihrer Präsentationsform umgestaltet werden, Programmcode kann unabhängig von der Gestaltung einer Website verändert werden. In der Praxis und in komplexen Projekten ist diese rigide Dreiteilung aber meist nicht umzusetzen. Um den Programmcode nicht unnötig mit Darstellungslogik aufzublähen, kommt oft zusätzlich noch eine vierte Ebene hinzu. In dieser Schicht werden logische Zusammenhänge verarbeitet, die die Darstellung direkt beeinflussen. Beispiel: Tabellenzeilen-Umbrüche oder dynamische Listen.
Ein weiterer wesentlicher Vorteil ist die Wiederverwendbarkeit von Programmcode, Design und Layout. Ein Template kann an mehreren Stellen einer Website eingesetzt werden. Änderungen an einem Template sind an allen Stellen einer Website zu sehen, an denen es eingesetzt ist. Das kann erheblich Zeit und damit Kosten sparen, weil unter Umständen nicht zig HTML-Seiten verändert und auf Fehlerfreiheit getestet werden müssen, sondern nur ein Template.
Programmlogik
In dieser Ebene werden typische Skript-Aufgaben erledigt, zum Beispiel Daten aus der Datenbank holen und verarbeiten. Das HTML-Template-System wird initialisiert. Variablen werden den entsprechenden Platzhaltern im HTML-Template zugewiesen.
Layout-Ebene
Sie besteht aus Vorlagen, zum Beispiel für HTML. Die Vorlage einer Seite kann aus mehreren Templates bestehen, die in der Programmlogik oder besser direkt vom Template-System zusammengefügt werden. Das Layout wird zum Teil in dieser Ebene bestimmt, zum Beispiel für Tabellen. Die Design-Ebene spielt hier auch mit hinein, über StyleSheets kann auch das Layout beeinflusst werden.
Darstellungslogik
Meistens sind die beiden Ebenen für Layout und Darstellungslogik verschmolzen, so dass Darstellungslogik nicht komplett vom Layout getrennt ist. Die Darstellungslogik ist oft in HTML-Templates zu finden. Das liegt nahe (Darstellungslogik enthält zum Beispiel auch HTML), ist bequem und in der Praxis meistens unproblematisch. Prinzipiell und vor allem bei komplexen Projekten ist das aber nicht empfehlenswert, weil die Trennung der Ebenen dadurch aufgeweicht wird. Die Darstellungslogik sollte daher in eigenen Template-Dateien ausgelagert werden.
Web-Entwickler sollten unbedingt darauf achten, dass sie nicht Programmlogik in die Ebene für Darstellungslogik einbauen. Die Verlockung ist groß, denn es erscheint zunächst einfacher, als sich erst Gedanken über die saubere Trennung beider Bereiche zu machen. Langfristig ist es wartungsfreundlicher, sich dazu durchzuringen.
Design
Das Design hat im Prinzip nicht direkt etwas mit der Logik oder dem Template-System zu tun. Im Wesentlichen wird das Design – und zum Teil auch das Layout – losgelöst von allen anderen Logik-Ebenen einfach durch ein Cascading Stylesheet beeinflusst.
Darüber hinaus bieten einige Template-Systeme Erweiterungen für Formular-Verarbeitung an, weil sich dieser Bereich zu großen Teilen mit der Darstellung von Web-Inhalten überlappt. WYSIWYG-Programme wie Dreamweaver lassen sich durch Erweiterungen kompatibel zu Template-Systemen machen.
Ein Beispiel
Die folgenden drei Dateien erzeugen eine HTML-Seite, in der 20 Wörter mit zufällig gewählten Buchstaben angezeigt werden. Das ist sinnfrei, demonstriert aber die Funktionsweise eines Template-Systems recht gut.
Die Programmlogik (Datei: index.php):
Die Musik spielt natuerlich im Skript selbst
Das (einfache) Design (Datei: style.css):
Das einfache Beispiel dient nur zur Veranschaulichung
Das Template (Datei: index.tpl):
Darstellungslogik und Layout sind hier der Einfachheit halber vereint
Die Links:
- Smarty Template Engine (PHP)
- Savant Template Engine (PHP)
- Smarty Template Engine (PHP)
- Flexy Template Engine (PHP)
- IT Template Engine (PHP)
- Sigma Template Engine (PHP)
- XTemplate Template Engine (Ruby)
Erstveröffentlichung 30.11.2005
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
kommt oft zusätzlich noch eine vierte Ebene hinzu. In dieser Schicht werden logische Zusammenhänge verarbeitet, die die Darstellung direkt beeinflussen. Beispiel: Tabellenzeilen-Umbrüche oder dynamische Listen.
awesome!