#php/QuakeNet Tutorial - Templatesystem Smarty

Author: Progman, zuletzt bearbeitet von progman @ 2005/03/13 16:12:20

Bitte beachten Sie, dass die Tutorialkapitel zusammenhängen. Wenn sie direkt auf ein Kapitel verlinkt wurden müssen Sie gegebenenfalls die vorherigen Kapitel auch lesen. Achten Sie beim lesen darauf, dass Sie kein Kapitel überspringen.

1. Was sind Templatesysteme?

Im Moment geben wir die HTML-Elemente direkt mit echo aus. Die PHP-Scripte enthalten, ggf. über mehrere Dateien hinweg, die ganzen HTML-Elemente. Doch dies hat einen Nachteil. Wenn man die HTML-Seite ändern möchte, muss man die PHP-Scripte bearbeiten. Code und Design fließen ineinander über.

Mit Templatesystemen versucht man nun Programmcode und Design zu trennen. Der Programmierer bleibt bei seinem Code und läd ein sog. Template in das Script rein. Das Templatesystem untersucht die Templates und ersetzt bestimmte Platzhalter durch echte Werte und gibt das dann alles aus. Diese Trennung von Code und Design ermöglicht zwei Sachen.

Ein reiner HTML-Webautor kann nun die Seiten gestalten ohne auch nur PHP zu kennen. Er kriegt dann vom PHP-Programmierer die Platzhalter genannt, die er verwenden kann.
Der PHP-Programmiere kann sich voll und ganz seinen PHP-Scripten widmen. Er braucht sich nicht um HTML und CSS zu kümmern. Er muss nur sicherstellen, dass die Formulare verarbeitet werden und die MySQL-Befehle alle gültig sind.

2. Installation von Smarty

Ich werde hier nun Smarty als Templatesystem benutzen. Es ist eigentlich egal, welches System man benutzt, es soll ja nur die Technik klar werden, wie man Design und Code sauber trennt. Da Smarty aber eine Homepage auf php.net hat, hab ich mich für dieses Templatesystem entschieden.

Zuerst laden wir uns den Quellcode von Smarty von der Smarty Hompage herrunter und entpacken alles in ein beliebiges Verzeichnis. In euren Projekt legt ihr nun ein neues Verzeichnis an. Der Name ist eigentlich egal, ich hab es mal Smarty genannt. Da kommt nun alles aus den Verzeichnis /libs vom Smartyarchiv rein. Dies müsste nun etwa so aussehen.

progman@Dresden:~/public_html/testseite/Smarty> ls -l
insgesamt 174
-rw-r--r--    1 progman  users        9962 Mai 24 19:19 Config_File.class.php
-rw-r--r--    1 progman  users       87861 Mai 24 19:19 Smarty.class.php
-rw-r--r--    1 progman  users       65286 Mai 24 19:19 Smarty_Compiler.class.php
-rw-r--r--    1 progman  users        4977 Mai 24 19:19 debug.tpl
drwxr-xr-x    2 progman  users        1912 Mai 24 19:19 plugins
progman@Dresden:~/public_html/testseite/Smarty>

Im Verzeichnis testseite schreibe ich nun meine PHP-Scripte rein.

Im html-root Verzeichnis (bei mir ist es /home/progman/public_html/testseite/) erstellen wir nun 3 Verzeichnisse

templates
configs
templates_c

Ich hoffe ihr könnt das CHMOD dieser Verzeichnisse ändern. Wenn nicht, lasst euch das von jemandem erklären. Die Verzeichnisse sollten vom Webserver (z.B. Apache) schreibbar sein. Ein chmod von 777 geht auf jedenfall.

Nun testen wir mal, ob alles geklappt hat. Wir erstellen nun eine Datei mit dem Namen index.php in unseren html-root Verzeichnis und schreiben folgendes rein.

<?php
    error_reporting(E_ALL);
    define('SMARTY_DIR', '/home/progman/public_html/testseite/Smarty/');
    // den Pfad entsprechend anpassen. Der Slash am ende muss
    // vorhanden sein

    require(SMARTY_DIR.'Smarty.class.php');
    // Die Smarty-Klasse laden

    $smarty = new Smarty;
    // Neues Objekt erstellen

    echo("foobar");
?>

Wenn der Text foobar ohne Fehlermeldung erscheint, ging alles in Ordnung.

Mehr über die Installation von Smarty kann man auf der Smarty-Homepage unter dem Menupunkt Kapitel 2. Installation nachlesen.

3. Erste Schritte mit Smarty

Nun erstellen wir mal ein billiges Beispiel mit Smarty. Wir erstellen folgende HTML-Seite.

{* Ein Kommentar mit Smarty
   Wie in PHP wird dieser dann von dem Smarty-System
   ignoriert. Der Browser bekommt dann diesen Kommentar
   auch nicht zu sehen, obwohl er direkt im Template
   drinsteht *}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testen macht spaß</title>
        <meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1" />
    </head>
    <body>
        <p>
            Willkommen {$name} auf der Seite vom Clan {$clanname}
        </p>
    </body>
</html>

Diese Datei speichern wir in dem Verzeichnis templates als index.tpl ab. Die Endung *.tpl zeigt, dass es sich hier um ein Template handelt. Sie ist aber frei gewählt und kann heißen wie sie wollen.

Wie sie sehen, haben wir zwei Platzhalter in diesem Template drinstehen. Einmal {$name} und {$clanname}. Etwas was mit Smarty zu tun hat wird in geschweiften Klammern geschrieben.

Nun schreiben wir die index.php.

<?php
    error_reporting(E_ALL);
    define('SMARTY_DIR', '/home/progman/public_html/testseite/Smarty/');

    require(SMARTY_DIR.'Smarty.class.php');

    $smarty = new Smarty;

    $smarty->assign('name', 'Progman');
    $smarty->assign('clanname', 'L33T HaXX0r Clan');

    $smarty->display('index.tpl');
?>

Nachdem ein neues Objekt erstellt wurde, wurden 2 Template-Variablen gesetzt. Mit der display-Methode wird dann die index.tpl Datei geladen und die dort stehenden Platzhalter ersetzt. Wenn wir die index.php Datei nun öffnen, erhalten wir folgende ausgabe.

Willkommen Progman auf der Seite vom Clan L33T HaXX0r Clan

Der HTML-Designer kann nun die index.tpl Datei verändern wie er will.

4. Arrays mit Smarty durchlaufen

Der PHP-Programmierer sorgt jetzt nun, dass in Smarty z.B. die ganzen Newseinträge gespeichert sind. Dabei läd er zuerst alle Beiträge in einem Array und speichert dann dieses Array in Smarty.

<?php
    error_reporting(E_ALL);
    include("inc/config.php"); // Konfig laden
    define('SMARTY_DIR', '/home/progman/public_html/testseite/Smarty/');

    require(SMARTY_DIR.'Smarty.class.php');

    @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) OR die(mysql_error());
    mysql_select_db(MYSQL_DATABASE) or die(mysql_query());

    $smarty = new Smarty;

    $smarty->assign('name', 'Progman');
    $smarty->assign('clanname', 'L33T HaXX0r Clan');

    $query = "SELECT
                  Titel,
                  Inhalt,
                  Datum,
                  Autor
              FROM
                  News
              ORDER BY
                  Datum DESC;";
    $newsqry = mysql_query($query) OR die(mysql_error());

    $news = array(); // leeres Arrayelement erzeugen
    while($row = mysql_fetch_assoc($newsqry))
    {
        $news[] = $row;
    }

    $smarty->assign('newsbeitraege', $news); // In Smarty speichern

    $smarty->display('index.tpl');
?>

Die Template Datei könnte so aussehen.

{* Ein Kommentar mit Smarty
   Wie in PHP wird dieser dann von dem Smarty-System
   ignoriert. Der Browser bekommt dann diesen Kommentar
   auch nicht zu sehen, obwohl er direkt im Template
   drinsteht *}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testen macht spaß</title>
        <meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1" />
    </head>
    <body>
        <p>
            Willkommen {$name} auf der Seite vom Clan {$clanname}
        </p>
        <ul>
        {foreach from=$newsbeitraege item=newsbeitrag}
            <li>
                <div class="newsbeitrag">
                    <div class="newsdatum">
                        {$newsbeitrag.Datum}
                    </div>
                    <div class="newstitel">
                        {$newsbeitrag.Titel}
                    </div>
                    <div class="newsautor">
                        {$newsbeitrag.Autor}
                    </div>
                    <div class="newsbeitrag">
                        {$newsbeitrag.Inhalt}
                    </div>
                </div>
            </li>
        {/foreach}
        </ul>
    </body>
</html>

Dieser foreach-Teil funktioniert eigentlich so, wie foreach unter PHP. Der HTML-Webautor kann nun die News mit CSS so anpassen wie er will. Auf die Arrayelemente greift er mit {$variable.Index} zu.

5. Infos zu Smarty

Dies sind nur 2 von vielen Funktionen von Smarty. Genauere Infos zu Smarty findet man auf der Homepage von Smarty unter http://smarty.php.net/.

Fragen zum aktuellen Thema

Welche Verzeichnisse muss man für seine Anwendung anlegen?
Wie werden im Template Variablen aus Smarty ausgegeben?

Welche Verzeichnisse muss man für seine Anwendung anlegen?: Smarty braucht die Verzeichnisse templates, templates_c und configs. Diese Verzeichnisse müssen die entsprechenden Rechte haben, damit PHP/Smarty darauf zugreifen kann.
Wie werden im Template Variablen aus Smarty ausgegeben?: Mit dem Ausdruck {$variable} kann man im Template die Variablen aus Smarty ausgeben. Diese müssen vorher mit der assign-Methode in Smarty gespeichert werden. Siehe dazu Smarty: Kapitel 4. Variablen .

Nach oben

quakenet:#php Tutorial