Templates mit Smarty gestalten und nutzen

Templates trennen Programmlogik und Darstellung auf einer Website. Smarty ist ein mächtiges Tool, um Templates zu schreiben. Wie Sie es konfigurieren und einsetzen, zeigt dieser Beitrag.

(erschienen in Internet Professionell)

Jede Site fängt einmal klein an. Und während sie wächst, fügen Sie einmal hier ein wenig Code hinzu, ändern mal dort ein HTML-Tag. Und mit den Monaten erzeugen Sie das schönste Kuddelmuddel aus PHP und HTML. Jetzt noch etwas an der Optik oder an der Programmierung zu ändern, wird zum fehlerträchtigen Vabanque-Spiel.

Damit es gar nicht erst so weit kommt trennen Sie von Anfang an strikt Inhalt und Darstellung. Dann können Sie jederzeit den Code ändern, ohne dass Sie dabei versehentlich das Design zerstören. Und umgekehrt sind Änderungen in der Darstellung keine Gefahr mehr für den Programmcode.

Wie arbeiten Templates?

Damit die Trennung Inhalt – Darstellung zuverlässig funktioniert sollten Sie separate Dateien für Code und Design verwenden. In der Programmdatei holen Sie zum Beispiel Daten aus der Datenbank und packen sie in ein Array oder eine Variable. Dessen Daten übergibt ein spezieller Aufruf an das Template.

Sind alle Daten ermittelt, ruft das Programmfile das zugehörige Template auf. Das fügt die Daten an den zuvor festgelegten Stellen in den HTML-Code ein. Dafür verfügt das Template über einfache Platzhalter, Schleifen und Bedingungen. Schließlich geht das fertige Produkt an den Client.

Ein Problem bei Templates: Der zusätzliche Arbeitsschritt zum Aufbereiten der Optik erfordert Rechenzeit. Besonders bei stark besuchten Seiten kann das zu Verzögerungen führen. Dem entgegnet Smarty mit einem eigenen Cache, das auf Wunsch einmal aufbereitete Seiten zwischenspeichert.

Smarty installieren

Für die ersten Tests installieren Sie Smarty auf Ihrem Entwicklungsserver. Besonders einfach geht's, wenn Sie den mit Xampp aufgesetzt haben. Dieses Paket installiert im Handumdrehen eine voll lauffähige WAMP-Umgebung inklusive MySQL, PHP 4 und 5 sowie Apache-Server. Xampp gibt es unter http://www.apachefriends.org/ zum Download.

Ist Xampp installiert, holen Sie Smarty auf der Download-Seite von http://smarty.php.net. Leider bieten die Smarty-Programmierer nur ein mit gzip gepacktes Tar-Archiv an. Um das zu entpacken brauchen Sie ein Tool wie Winzip. Damit dekomprimieren Sie zunächst das gzip-File, so dass Sie eine Tar-Datei erhalten. Die müssen Sie dann auch noch auspacken und bekommen so einen Ordner "Smarty-2.6.10". Benennen Sie diesen Ordner um in "smarty" und verschieben Sie ihn in das Programm-Verzeichnis von Xampp.

Legen Sie innerhalb des Smarty-Ordners noch einen Ordner "compile" und einen Ordner "template" an. Hier landen später die für die Auslieferung kompilierten Dateien sowie die Templates. Der Vorteil: Diese Daten liegen nicht im direkt für den Web-Client zugänglichen Bereich. Das schafft ein wenig zusätzlichen Schutz für Ihren wertvollen Source-Code. Denn würden Sie die Templates in einen frei zugänglichen Ordner legen und mit der Endung "tpl" versehen, könnte sie sich jeder Benutzer ansehen.

Als nächstes öffnen Sie im Xampp-Ordner das Unterverzeichnis "apachein" und darin die Datei "php.ini".

In der php.ini suchen Sie nach dem Eintrag "include_path". Ergänzen Sie ihn um den Pfad zu den Smarty-Libraries, so dass das Ergebnis wie folgt aussieht:

include_path = ".;f:programmexamppphppear;f:programmexamppsmartylibs"

Danach starten Sie den Apache-Server von Neuem und Ihr Smarty ist einsatzklar.

Smarty nutzen

Starten Sie Ihre Entwicklungsumgebung und probieren Sie es mit einem ersten Skript:

<?php

include ('Smarty.class.php');

$strSmartyTemplateDir = 'f:\programme\xampp\smarty\templates\';

$strSmartyCompileDir = 'f:\programme\xampp\smarty\compile\';

$smarty = new Smarty();

$smarty->template_dir = $strSmartyTemplateDir;

$smarty->compile_dir = $strSmartyCompileDir;

$smarty->assign('name', 'Max Muster');

$smarty->assign('address', 'Blumenstraße 12');

$smarty->display('sdemo1.tpl');

?>

Zunächst binden Sie die Smarty-Klasse ein. Sollte PHP hier einen Fehler melden, sehen Sie noch einmal in der php.ini nach, ob Sie wirklich den richtigen Pfad zur Bibliothek eingetragen haben. In den beiden Variablen halten Sie die Pfade zum Template- und zum Kompilierverzeichnis fest. Ändern Sie diese Variablen nach Ihrem Bedarf. Verwenden Sie unter Windows einen doppelten anstelle des einfachen Backslash. Anderenfalls kann es zu einer Fehlermeldung kommen. Für den Einsatz auf einem Linux-System müssen Sie die Pfade natürlich ändern. Bei größeren Projekten lohnt es sich, diese Variablendefinition in einem eigenen include oder - noch besser - in einer globalen Konfigurationsdatei unterzubringen.

Nach dem Initialisieren einer neuen Smarty-Klasse weisen Sie ihr die beiden notwendigen Verzeichnisinformationen zu. Danach geht es schon an das Füllen des Templates. Das sieht so aus:

<html>

<head>

<title>Benutzerinformation</title>

</head>

<body>

Name: {$name}<br>

Adresse: {$address}<br>

</body>

</html>

In den geschweiften Klammern stehen die Template-Variablen. An ihrer Stelle werden später die übergebenen Daten eingefügt.

Interessant ist ein Blick in das Kompilierverzeichnis. Hier finden Sie das kompilierte Template:

<?php /* Smarty version 2.6.10, created on 2005-12-06 15:03:38

compiled from sdemo1.tpl */ ?>

<html>

<head>

<title>Benutzerinformation</title>

</head>

<body>

Name: <?php echo $this->_tpl_vars['name']; ?>

<br>

Adresse: <?php echo $this->_tpl_vars['address']; ?>

<br>

</body>

</html>

Es besteht aus den HTML-Tags und darin eingebauten PHP-Anweisungen.

Daten aus Datenbank aufbereiten

Natürlich kann Smarty mehr, als ein paar Variableninhalte aufbereiten und darstellen. Im Folgenden lernen Sie die Fähigkeit von Smarty kennen, Daten aus einer Datenbank übersichtlich darzustellen.

Bevor es losgeht, brauchen Sie erst einmal eine kleine SQLite-Datenbank. Die erzeugen Sie mit einem kurzen Programm:

<?php

$db = sqlite_open('testdb', 0666, $strSQLiteError)

or die($strSQLiteError);

sqlite_query($db, "

CREATE TABLE notizen (body TEXT, head TEXT, id INTEGER PRIMARY KEY);

");

sqlite_close($db);

?>

Die Datenbank wird als Datei testdb im aktuellen Verzeichnis erzeugt. Auf Live-Systemen sollte diese Datenbank natürlich außerhalb des für Clients zugänglichen Bereich liegen. Mit Zeilen wie

sqlite_query($db, "INSERT INTO notizen (body, head) VALUES('Ein Text','Eine Headline')");

fügen Sie der Datenbank Inhalte hinzu.

Nun brauchen Sie noch ein Programm, das die Daten aus der Datenbank herausholt und anzeigt. Das ist in ein paar Zeilen geschehen:

<?php

include ('Smarty.class.php');

// Smarty vorbereiten

$strSmartyTemplateDir = 'f:\programme\xampp\smarty\templates\';

$strSmartyCompileDir = 'f:\programme\xampp\smarty\compile\';

$smarty = new Smarty();

$smarty->template_dir = $strSmartyTemplateDir;

$smarty->compile_dir = $strSmartyCompileDir;

// Datenbank abfragen

if (!$db = sqlite_open('testdb', 0666, $strSQLiteError))

die($strSQLiteError);

$dbResult = sqlite_query($db,'SELECT * FROM notizen');

$arrResult = sqlite_fetch_all($dbResult, SQLITE_ASSOC);

sqlite_close($db);

$smarty->assign('notizen', $arrResult);

$smarty->display('sdemo2.tpl');

?>

Sie bereiten wie gehabt Smarty vor und fragen dann die Datenbank ab. Das Ergebnis wird mit sqlite_fetch_all im assoziativen Array $arrResult gespeichert. Und das geben Sie, so wie es ist, an ein Template weiter.

Das Template sieht so aus:

<html>

<head>

<title>Notizen</title>

<style type="text/css">

{literal}

body {font-family: verdana;

font-size: 12px;

}

table {background-color: #FFCC66;

width: 800px;

}

td {padding: 3px;

}

{/literal}

</style>

</head>

<body>

<h1>Notizen</h1>

<table>

<tr><th colspan="3">Notizen in der Übersicht</th></tr>

{foreach item=notiz from=$notizen}

<tr style="background-color: {cycle values="#EEEEEE,#FFFFFF"}">

<td>{$notiz.head}</td><td>{$notiz.body|truncate:120}<a href="showarticle.php?aid={$notiz.id}">[...]</a></td>

</tr>

{/foreach}

</table>

<p>Stand: {$smarty.now|date_format:"%d.%m.%Y"}</p>

</body>

</html>

Zunächst definiert das Template ein CSS-Stylesheet. Dieses CSS muss von {literal}…{/literal} umschlossen sein. Anderenfalls würde Smarty versuchen, die Stylesheet-Inhalte als Template-Code zu interpretieren. Alternativ zu {literal} könnten Sie an Stelle der geschweiften Klammern jedes Mal {ldelim} für { und {rdelim} für } schreiben. Smarty übersetzt diese Zeichen dann beim Kompilieren des Templates.

Im Stylesheet legen Sie für body als Standardschrift Verdana in der Größe 12px fest. Diese Vorgabe wird im kompletten Dokument verwendet. Die Tabelle erhält einen orangefarbenen Hintergrund und wird der Übersichtlichkeit halber auf 800 Bildpunkte Breite beschränkt. Schließlich folgt ein wenig Feintuning für die Tabellenzellen: Mit padding: 3px legen Sie den Innenabstand jeder Zelle auf drei Bildpunkte fest. Damit sieht die Tabelle etwas luftiger und übersichtlicher aus.

Nach den Stil-Informationen und ein paar Zeilen HTML folgt die Smarty-Schleife:

{foreach item=notiz from=$notizen}

Das foreach-Kommando arbeitet sich durch das dem Template übergebene Array $notizen. Da dieses selbst aus weiteren Arrays besteht, wird bei jedem Schleifendurchlauf der Variablen notiz ein Array zugewiesen. Dieses repräsentiert einen Datensatz. Eine Besonderheit: Bei der Zuweisung über item wird notiz ohne $-Zeichen geschrieben. Beim Zugriff auf den Inhalt, wird dann aber wieder ein $ vorangestellt.

Für jedes Array erzeugt das Template eine Tabellenzeile. Hier kommt ein sehr praktisches Feature zum Einsatz: mit {cycle} wechselt das Template die in value angegeben Farbwerte bei jedem Durchlauf. So erzeugen Sie prima lesbare Tabellen mit wechselndem Hintergrund für jede Zeile. Weiter geht's mit

<td>{$notiz.head}</td><td>{$notiz.body|truncate:120}<a href="showarticle.php?aid={$notiz.id}">[...]</a></td>

Das Template baut aus den Datenfeldern zwei Tabelleneinträge. Da $notiz ein assoziatives Array ist, müssen Sie den Schlüssel mit einem Punkt an den Namen anhängen. Das entspricht dem $notiz['head'] im normalen PHP. Die nächste Tabellenzelle zeigt dann einen Teil des Nachrichtentextes. Mit dem Modifier truncate schneiden Sie diesen Teil zurecht. Im Beispiel wird der Text auf 120 Zeichen gekürzt. Dabei achtet Smarty aber darauf, den Text nicht mitten im Wort zu kappen. Schließlich hängt noch ein Link am Text. Darauf dürfen die Leser klicken, um den kompletten Text anzusehen. Die zugehörige Programmdatei showarticle.php samt Template finden Sie auf der Heft-CD.

Ganz unten zeigt das Template noch das aktuelle Datum an. Auch hierfür bringt Smarty eine Funktion mit: $smarty.now erzeugt einen Timestamp. Der Modifier date_format wandelt dieses Format um. Im Beispiel erscheint ein Datum wie 24.12.2005.

Fazit

Smarty erfordert ein wenig Konfigurationsaufwand und Einarbeitung. Dank der guten Dokumentation auf http://www.smarty.net finden Sie sich aber schnell in die mächtige und flexible Template-Sprache ein. Smarty lohnt sich umso mehr, je umfangreicher ein Projekt wird und je flexibler es sein muss. Wollen Sie zum Beispiel Themes für Ihre Software anbieten, also auswählbare Designs, ist Smarty das richtige Werkzeug.

Mehr dazu: