Templates mit PHP

Je umfangreicher ein PHP-Projekt wird, desto unübersichtlicher wird das Gemisch aus HTML und PHP im Quelltext. Dieser 2004 in Internet Professionell erschienene Beitrag zeigt einen Ausweg aus dem Code-Chaos.

Über lange Jahre gewachsene PHP-Projekte haben oft ein Problem: Sie sind nicht nur gewachsen, sondern auch verwachsen. In den Dateien steht HTML-Code durchsetzt von PHP-Kommandos. Daten werden erst an der Stelle aus der Datenbank gezogen, an der sie auch gezeigt werden, und irgendwo in der letzten Zeile wird noch der entscheidende Wert berechnet. HTML und PHP verschwimmen. Bei der Wartung des Quelltextes sucht man sich verrückt, bis man an die entscheidende Stelle kommt. Derart gemischter Code ist äußerst Bug-trächtig.

Und dann kommt es ganz dicke. Der Kunde entscheidet: »Wir brauchen ein neues Layout.« Und der Entwickler fragt sich: »Wo soll ich anfangen?« Wo auch immer er den Quellcode anfasst, es bricht sofort alles zusammen.

In diesen Fällen gibt es nur eins: Gar nicht erst versuchen, sich in dem Gestrüpp zurecht zu finden. Vergessen Sie die alte Seite und fangen Sie noch mal von vorne an. Und diesmal trennen Sie Programm-Code und HTML so weit wie möglich.

Sauber trennen

Der erste Schritt zu sauberem und übersichtlichem Code ist: Zuerst kommt PHP und dann HTML. Sprich: Alles, was in PHP beispielsweise aus einer Datenbank geholt wird, kommt gleich zu Beginn in Variablen oder – übersichtlicher – in ein Array. Erst wenn alle Daten geladen sind, folgt der HTML-Teil. Hier finden sich die Tags und mittendrin stecken nur noch Ausgabebefehle für die Variablen.

Um das Ganze noch besser zu trennen, packen Sie PHP und HTML in zwei getrennte Dateien. Eine enthält nur den Code, die andere die Darstellung.

Diese Trennung ist wichtig und schwierig zu gleich. Oft müssen direkt bei der Ausgabe Berechnungen erledigt werden, um die Ausgabe abhängig von den Daten richtig zu formatieren. Solche Arbeiten kann ein Template-System übernehmen.

Das muss ein Template können

Ein Template kümmert sich um die Darstellung von Inhalten. Das schließt nicht nur das Anzeigen von Variableninhalten ein. Zusätzlich brauchen Templates Verfahren, um ein wenig Logik in die Darstellung zu bringen. Beispiel Arrays: Dazu brauchen Templates die Fähigkeit, einzelne Elemente aus einem Array zu holen und zusätzlich einen Mechanismus, um sich durch Arrays zu bewegen. Damit einher geht die Fähigkeit, Schleifen zu bilden, um die Einträge eines Arrays beispielsweise als Tabelle auszugeben.

Außerdem sollte ein Template Fallunterscheidungen treffen können. Beispiel: Der PHP-Code liefert einen leeren Datensatz. Das Template versucht dennoch die Daten auszugeben und scheitert daran. Also muss das Template zuvor prüfen, ob eine Variable oder ein Array überhaupt Werte hat. Außerdem kann man mit solchen Fallunterscheidungen hübsche Effekte auf eine Seite zu zaubern, etwa wechselnde Farben in Tabellenzeilen.

Template-Systeme

Also her mit dem Template. Doch welches System ist das beste? Wer sich bei Freshmeat umsieht, wird eine ganze Ladung von Template-Systemen für PHP finden. Die meisten funktionieren im Prinzip so:

Über eine Klasse werden Variablen oder Arrays mit Daten geladen. Im HTML-Code des Templates stecken spezielle Tags. An Stelle dieser Tags fügt der Parser später den Inhalt der Arrays ein.

Dieses Verfahren kostet Zeit. Denn der Parser muss den kompletten Template-Code nach den Tags durchforsten und die entsprechenden Daten einfüllen.

Einige Template-Systeme wie Smarty arbeiten daher mit einem Cache-Verfahren: Einmal durchgearbeitet werden die aus Template und PHP-Code erzeugten, fertigen Seiten zwischengespeichert und direkt, ohne weiteren Zeitverlust abgerufen. Bei der Gelegenheit spart man nicht nur Rechenzeit, die beim Parsen der Templates verloren ginge sondern im Idealfall auch Rechenzeit, die sonst für das Ermitteln der Daten benötigt würde.

PHP als Template-System

Doch wer ein wenig tiefer in PHP einsteigt, findet dort ebenfalls grundlegende Template-Fähigkeiten, die für einfache Aufgaben genügen. Unter dem Stichwort "Alternative Kontrollstrukturen" finden sich in der PHP-Syntax kleine Template-Schätze: Fallunterscheidungen, eine while-Schleife und das für die Arbeit mit Arrays so wichtige foreach. Natürlich ist auch ein if dabei, um Fälle zu unterscheiden.

Die Schreibweise der Befehle sieht etwas anders aus als im normalen PHP-Betrieb. Ein Beispiel:

<? if ($meineVariable == 1): ?>

<p>Ich bin eine Eins</p>

<? endif; ?>

Wichtig ist der Doppelpunkt hinter dem if. Hinter dem endif dagegen muss ein Strichpunkt stehen. Zwischen den beiden PHP-Anweisungen lassen sich HTML-Zeilen einfügen, die abhängig von der PHP-Fallunterscheidung angezeigt werden.

Zusätzlich hat PHP noch einen effizienten Weg, den Inhalt von Variablen in HTML einzubinden. Statt eines aufwändigen

<? echo $meineVariable; ?>

genügt die Kurzversion

<?=$meineVariable?>

Achten Sie darauf, dass zwischen de, Fragezeichen und dem Gleichheitszeichen kein Zwischenraum stehen darf, sonst meldet PHP einen Fehler.

Diese Art, Variablen anzuzeigen, erspart einigen unübersichtlichen Code und passt sich gut in die HTML-Landschaft ein. Die PHP-Markierungen <? und ?> können Sie leicht in Kauf nehmen. Denn auch mit anderen Template-Systemen müssen Sie spezielle Markierungen in Ihren HTML-Code einfügen, zum Beispiel geschweifte Klammern bei Smarty.

PHP-Template in der Praxis

Genug Theorie. Bauen Sie Ihr eigenes Template. Für Übungszwecke füllen Sie dazu ein Array mit Daten, bereiten diese ein wenig auf und binden dann per Include eine Template-Datei ein.

Zunächst basteln Sie eine kleine Klasse, um die Inhalte einer Seite vorab zu laden.

<?

class text {

var $head; //string

var $body; //string

var $keys; //array

var $retArray; //array

function text($argHead, $argBody, $arrKeys)

{

$this->head = $argHead;

$this->body = $argBody;

$this->keys = $arrKeys;

}

function asArray()

{

$retArray = Array ( "head" => $this->head,

"body" => $this->body,

"keys" => $this->keys

);

return $retArray;

}

}

$objText = new text("Willkommen bei Internet Professionell",

"Auf diesen Seiten finden Sie Informationen [...]",

Array("start", "info", "business", "php") );

$arrOut = $objText->asArray();

include "temptest.tpl.php";

?>

Der Konstruktor kopiert die ihm übertragene Überschrift, den Text und Stichwörter in Objektvariablen. Diese ließen sich bereits direkt im Template verwenden, indem Sie dort beispielsweise <?=$objText->head?> hineinschreiben.

Eleganter ist es aber, wenn die Daten in einem Array vorliegen. Erstens ist das Template ist leichter zu lesen, wenn darin nicht Bezüge wie $objText->head stehen und zweitens ist das Template unabhängig vom aufrufenden Programm.

Denn so lange das Array vorliegt, ist es dem Template egal, woher die Daten kommen. Bezieht man sich aber auf ein Objekt, handelt man sich schnell Fehler und Probleme ein, sobald ein Template anderweitig genutzt werden soll.

Auch wenn der Template Code weiter gegeben werden soll, ist es einfacher zu dokumentieren dass ein Template ein Array mit einem bestimmten Namen und einer bestimmten Struktur braucht.

Das Kopieren der Daten in ein Array übernimmt die Methode asArray().Sie erzeugt ein zweidimensionales Array. Die zweite Dimension kommt aber nur bei den Stichwörtern zum Einsatz, die dem Text zugeordnet sind. Das Ergebnis wird in $arrOut gespeichert.

Wichtig: Verwenden Sie unbedingt wie in diesem Beispiel ein assoziatives Array mit lesbaren Bezeichnern, zum Beispiel $retArray['head'] für eine Überschrift. Anhand der Indexnamen erkennen Sie beim Lesen des Template-Code besser, welche Daten wo stehen.

Das Template schreiben Sie ebenfalls in eine PHP-Datei.Geben Sie dem Template den gleichen Namen wie der zugehörigen Programmdatei. Dazu kommen zwei Endungen, beispielsweise name.tpl.php. Die erste Endung »tpl« deutet an, dass es sich hier um ein Template handelt. Die Endung »php« ist aus zwei Gründen notwendit: Erstens deutet es an, dass hier PHP-Code eingebettet ist, zweitens kann dann niemand das Template lesen, indem er einfach dessen Namen in den Browser eingibt.

Das Template für die Ausgabe des zuvor erzeugten Arrays sieht so aus:

<html>

<head>

<title><?=$arrOut['head']?></title>

</head>

<body>

<h1><?=$arrOut['head']?></h1>

<p><?=$arrOut['body']?></p>

<ul>

<? foreach($arrOut['keys'] as $keyword): ?>

<li><?=$keyword?></li>

<? endforeach; ?>

</ul>

</body>

</html>

Hier dominiert HTML, es stören keine PHP-Konstrukte, Klassenaufrufe oder Datenbankabfragen. Im title-Tag und in der Überschrift steht der Inhalt von $arrOut['head'].

Einzig beim foreach wird der HTML-Code etwas schwerer zu lesen. Doch dafür bringt foreach Effizienz pur. Die Zeile

<? foreach($arrOut['keys'] as $keyword): ?>

holt der Reihe nach alle Einträge aus dem Array $arrout['keys'] und schreibt sie in $keyword. Der Inhalt dieser Variablen landet anschließend in einer Listen-Zeile:

<li><?=$keyword?></li>

Wichtig ist

<? endforeach; ?>

als Schluss der Schleife. Achten Sie darauf, dass die Anweisung in einem Wort geschrieben wird und mit einem Semikolon abgeschlossen sein muss.

Fallunterschiede

Fallunterscheidungen innerhalb der Vorlage sind kein Problem. Probieren Sie es mit diesem Stück Code, das Sie an Stelle des Codes zwischen <ul> und </ul> einsetzen:

<table>

<? foreach($arrOut['keys'] as $count=>$keyword): ?>

<tr>

<td <?if ($count%2 == 0):?> bgcolor=lightgreen<?endif;?>>

<?=$keyword?></td></tr>

<? endforeach; ?>

</table>

Wieder wird ein Array durchgearbeitet. Diesmal aber speichert foreach über $count=>$keyword die Indexnummer des Keywords in der Variablen $count.

Mit $count%2 überprüft das Template, ob $count eine gerade Zahl enthält. Zur Erinnerung: % steht in PHP für Modulo und ermittelt den Rest einer Division. Bleibt beim Teilen durch 2 eine 0, ist klar, dass die Zahl gerade ist. In diesem Fall setzt das Template eine andere Hintergrundfarbe für die Tabellenzelle.

Allerdings ist der Beispielcode so noch nicht unbedingt übersichtlich. Eleganter und besser lesbar ist es, abhängig von $count jeweils ein komplettes <td>-Tag zu setzen und mit else zu arbeiten:

<? if ($count%2 == 0): ?>

<td bgcolor="lightgreen">

<? else: ?>

<td>

<? endif; ?>

Experimentieren Sie mit Ihren Templates. Sie werden bald merken, wie komfortabel es ist, wenn man nicht bei jeder Design-Änderung darauf achten muss, ob man versehentlich ein wichtiges Stück Quellcode vernichtet. Auch wenn es ein wenig Überwindung kostet, den alten, gewachsenen Code über den Haufen zu werfen: Je früher Sie anfangen, Programmierung und Design zu trennen, desto einfacher wird es später, Ihren Auftritt wieder umzugestalten.

Schlaue Templates mit Smarty

Wer mehr Template will, als es PHP bieten kann, der sollte sich mit Smarty beschäftigen. Das Templatesystem ist Open Source und enthält viele Sonderfunktionen, die das Erzeugen und die Wartung von Templates deutlich beschleunigen.

In den Grundfunktionen ist Smarty recht einfach zu erlernen. Variablen werden innerhalb von geschweiften Klammern dargestellt, Schleifen oder Fallunterscheidungen sind ebenfalls vorhanden.

Darüber hinaus lassen sich Zusatzinformationen wie Datum und Uhrzeit einblenden. Ebenso vereinfacht das Template Vorgänge wie das Einfügen von Optionen in ein Select-Formularfeld in HTML. Das geht über einen Befehl wie

{html_options values=$keywords output=$keywords}

eine gesonderte foreach-Schleife für das Erzeugen einzelner <option>-Tags entfällt.

Dazu liefert Smarty noch eine Menge Modifikationswerkzeuge für Variableninhalte. So schneidet truncate Text auf die gewünschte Länge zurecht, strip entfernt doppelte Leerzeichen oder wordwrap kümmert sich um den korrekten Zeilenumbruch.

Damit komplexe Templates nicht zu sehr zu Lasten der Performance gehen, kompiliert Smarty einmal aus PHP und Template erzeugte Seiten. Die landen in einem speziellen Verzeichnis und werden von dort aus an den Browser übertragen.

Falls Sie also mit den grundlegenden Template-Funktionen von PHP nicht zufrieden sind, sehen Sie sich Smarty an. Die Einarbeitung in die raffinierteren Funktionen dauert zwar ein Weilchen, auch das Einbinden des Template-Systems in Ihren Quelltext ist nicht ganz trivial. Aber dafür entlohnt Smarty mit einem gigantischen Funktionsumfang.

Mehr dazu: