Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Einführung in das Smarty Templating Framework

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Smarty ist eine PHP-basierte Template-Engine/Framework. Sie können Ihre Geschäftslogik weiter von der Visualisierung trennen, indem Sie so viel PHP-Code wie möglich aus Ihren Ansichten entfernen. Einige Entwickler und Frameworks bevorzugen es, keine Template-Engine zu verwenden, andere bevorzugen die Verwendung von einfachem PHP in Ihren Ansichten. Beide Sichtweisen können argumentiert werden, und am Ende ist es meistens Geschmackssache. Wie auch immer, es ist nie eine schlechte Idee, es auszuprobieren, bevor Sie sich entscheiden, es nicht zu verwenden, und darum geht es in diesem Tutorial: das Smarty Templating Framework auszuprobieren.


Schritt 0: Was zu erwarten

Am Ende dieses Tutorials erhalten Sie eine grundlegende Vorstellung davon, wie Smarty funktioniert. Sie können Vorlagendateien laden, Variablen an sie übergeben, ein "layout" verwenden, in das Ihre anderen Ansichten eingefügt werden, und Ihre eigenen Modifikatoren schreiben. Dies alles wird mithilfe einer zusätzlichen Wrapper-Klasse erreicht, die Sie problemlos in Ihre vorhandenen Projekte integrieren können.


Schritt 1: Einrichten des Projekts

Das Projekt für dieses Tutorial ist sehr einfach einzurichten, da wir keine echte Anwendung entwickeln. Erstellen Sie einfach einen Projektordner (meiner heißt "smarty_example") mit einer index.php-Datei und einem Verzeichnis namens "lib". Erstellen Sie außerdem eine Datei mit dem Namen smtemplate.php im Ordner "lib". Erstellen Sie als Nächstes einen Ordner "views" in "smarty_example". Dieser Ordner enthält unsere Smarty-Vorlagendateien.

Bevor Sie etwas verwenden können, müssen Sie es installieren. Zum Glück ist die Installation von Smarty extrem einfach und erfordert fast keine Konfiguration. Laden Sie zunächst Smarty herunter und extrahieren Sie das Archiv. Sie können alles im Archiv auschecken, aber wir benötigen nur den Ordner "libs" für unsere Anwendung. Benennen Sie es in "smarty" um und fügen Sie es in den Ordner "lib" unserer Anwendung ein. Smarty verwendet einige zusätzliche Ordner. Erstellen Sie daher die Ordner "templates_c", "cache" und "configs" in unserem Ordner "lib/smarty". Wenn Sie Windows nicht verwenden, müssen Sie Ihrem Webserver 775 Berechtigungen für diese Ordner erteilen. Ihr Verzeichnisbaum sollte jetzt folgendermaßen aussehen:


Schritt 2: Erstellen der SMTemplate-Klasse

Jeder Programmierer hat seine eigene Vorstellung von der idealen API. Um die Smarty-API geringfügig anzupassen und zusätzliche Funktionen hinzuzufügen, erstellen wir eine Wrapper-Klasse namens SMTemplate, die sich um die Smarty-Details kümmert. Dieser Ansatz hat einen weiteren Vorteil: Wenn Sie zu einem bestimmten Zeitpunkt eine andere Vorlagen-Engine verwenden möchten, können Sie einen Wrapper für diese Engine erstellen, während die SMTemplate-Schnittstelle beibehalten wird, ohne den Code zu beschädigen, der unsere SMTemplate-Klasse verwendet.

Speichern Ihrer Konfiguration

Vor dem Codieren der SMTemplate-Klassenfunktionalität benötigen wir einen Speicherort für einige Konfigurationsdetails. Sie können dies auf verschiedene Arten tun, d. h. indem Sie Konfigurationsoptionen als Klassenkonstanten definieren, indem Sie sie als Konstanten in der Datei smtemplate.php definieren oder indem Sie sie in einer separaten Konfigurationsdatei aufbewahren. Ich bevorzuge die letzte Option, daher erstelle ich eine smtemplate_config.php-Datei. Smarty benötigt eine Konfiguration für die Verzeichnisse Vorlage, kompilierte Vorlage, Cache und Konfiguration. Später können wir unserer Konfigurationsdatei auch SMTemplate-spezifische Optionen hinzufügen. Im Moment reicht dies jedoch aus:

Erstellen der SMTemplate-Klasse

Die SMTemplate-Klasse lädt diese Konfigurationsdatei und übergibt die Optionen an Smarty. Bevor wir die Optionen übergeben können, benötigen wir ein Objekt der Klasse Smarty. Unsere SMTemplate-Klasse könnte die Smarty-Klasse erweitern, aber ich bevorzuge die Verwendung einer privaten Instanzvariablen, um das Smarty-Objekt zu enthalten. Bisher haben wir für unsere SMTemplate-Klasse Folgendes:

Vorlagen rendern

Wie Sie sehen können, ist unsere Klasse immer noch ziemlich erbärmlich, da sie nichts rendern kann. Wir werden dieses Problem lösen, indem wir eine Renderfunktion hinzufügen, die eine Vorlage lädt und anzeigt.

Um etwas zu rendern, müssen wir eine Vorlagendatei erstellen und dann die Renderfunktion aus unserer Datei index.php aufrufen. Die Vorlagendatei ist ziemlich einfach und enthält eine einfache HTML-Seite. Nennen Sie es "home.tpl" und legen Sie es in unserem Verzeichnis "views" ab.

Jetzt müssen Sie nur noch ein SMTemplate-Objekt erstellen und 'home' rendern. Öffnen Sie index.php, fügen Sie die folgenden Codezeilen hinzu und navigieren Sie dort in Ihrem Browser.


Schritt 3: Zuweisen und Formatieren der Variablen

Wenn wir nichts dynamisch rendern könnten, wäre Smarty ziemlich nutzlos. Glücklicherweise können wir unserer Smarty-Klasse Variablen zuweisen und diese in unserer Vorlage anzeigen. Wir können auch einige Smarty-Funktionen verwenden (also Modifikatoren), um sie richtig zu formatieren.

Übergeben eines Array der Variablen

Obwohl Smarty die Zuweisung von Variablen unterstützt, tut dies unser SMTemplate (noch) nicht. Wir stellen den CodeIgniter-Zuweisungsstil bereit, bei dem Sie ein Array an die Renderfunktion übergeben. Sie können SMTemplate anpassen, um auch andere Methoden zu unterstützen. Das Zuweisen zum Objekt und das anschließende Speichern mit __set in einem Array ist ebenfalls eine saubere Methode. In diesem Tutorial reicht es jedoch, ein Array zu übergeben. Bevor wir die Variablen zuweisen, bearbeiten wir unsere Vorlage etwas dynamischer. Hallo zur Welt zu sagen ist für Programmierer üblich, aber nicht sehr nützlich. Verwenden wir also eine Variable, um zu bestimmen, wen wir begrüßen. Zweitens fügen wir der Nachricht das heutige Datum hinzu. Variablen können angezeigt werden, indem sie in geschweifte Klammern gesetzt werden.

Wenn Sie die Seite aktualisieren, werden Sie feststellen, dass die Variablen nicht ausgefüllt wurden, da wir sie nicht festgelegt haben. Das Einstellen von Variablen kann mit smarty->assign erfolgen. Weisen Sie sie also zu. Die Renderfunktion verwendet jetzt ein optionales Datenarray als zweites Argument.

Es wird immer noch nicht funktionieren, da wir beim Aufrufen unserer Renderfunktion kein Array übergeben. Wir können dies leicht tun, indem wir einige Zeilen in unserer index.php-Datei ändern.

Wenn Sie jetzt aktualisieren, wird auf der Seite etwa "Hallo, JR! Heute ist es 1282810169!" Angezeigt. Natürlich ist dieses Datum nicht wirklich das, was wir uns vorgestellt haben. Es muss formatiert werden, um zum nächsten Abschnitt zu gelangen.

Verwenden der Modifikatoren zum Formatieren der Variablen

Smarty ist nicht nur eine Vorlagen-Engine, die Variablen sucht und ersetzt. Es ist auch ein leistungsstarkes Framework, mit dem Sie Zeit sparen können, indem Sie Modifikatoren, Funktionen und Blöcke verwenden. Wenn wir beispielsweise unser Datum formatieren möchten, können wir den Modifikator date_format verwenden. Um einen Modifikator auf eine Variable anzuwenden, setzen Sie einfach ein Pipe-Zeichen und den Modifikatornamen dahinter, gefolgt von den optionalen Argumenten, die durch Doppelpunkte getrennt sind. Der Modifikator date_format verwendet ein Zeichenfolgenargument, das das Format des Datums darstellt, und ein optionales Standarddatum, das nicht benötigt wird. Der folgende Code zeigt das Datum als "Tag (in Dezimalstellen) Monat" an.

Dies sollte nun etwas von der Form "Hallo, JR! Heute ist der 26. August!" Geben. Vielleicht möchten wir jetzt sicherstellen, dass unser Empfänger in Großbuchstaben geschrieben ist. Wir können dies erreichen, indem wir den oberen Modifikator verwenden.

Wenn ich nun index.php so ändere, dass 'jr' anstelle von 'JR' übergeben wird, zeigt die Vorlage weiterhin 'JR' an. Einfach, nicht wahr? Als nächstes werden wir unsere Vorlagen in ein Standard- "Layout" aufnehmen.


Schritt 4: Arbeiten mit einem Layout

Bevor wir unsere SMTemplate-Klasse ändern, um Layouts zu aktivieren, erstellen wir zunächst ein Layout. Erstellen Sie ein neues Verzeichnis mit dem Namen "Layouts" in unserem Ordner "smarty_example" und verschieben Sie dort home.tpl. Benennen Sie es in 'page.tpl' um. Wir werden unseren vorherigen "Hallo Welt" -Inhalt entfernen und zwei horizontale Zeilen einfügen. Unser Inhalt wird zwischen diesen Zeilen platziert.

Dies wird natürlich nicht schaden, da Smarty nicht weiß, wo er unsere Inhalte einfügen soll. Es gibt mehr als eine Möglichkeit, Inhalte aus einer anderen Vorlage in unserem Layout abzurufen, und ich werde die Abruffunktion von Smarty verwenden. Diese Funktion gibt unsere Vorlage als Text zurück, anstatt sie anzuzeigen. Dies bedeutet, dass wir die Vorlage abrufen und sie dann einer Variablen zur Verwendung in unserer Vorlage zuweisen können! Der Name dieser Variablen liegt bei Ihnen. Ich stelle meinen speziellen Variablen __ voran, um sie von den anderen von mir verwendeten Variablen zu unterscheiden. Ich werde diesen einen "content" nennen, da wir ihm unseren Seiteninhalt zuweisen.

Damit ist unser Layout abgeschlossen. Erstellen wir also einige Vorlagen, die als Inhalt verwendet werden sollen. Ich werde eine "hello"-Vorlage erstellen, die eine Standardzeile "Hallo Welt" enthält, und eine "lipsum"-Vorlage, die Lorem Ipsum-Text enthält. Vergessen Sie nicht, diesen Vorlagen eine .tpl-Erweiterung zu geben.

Das Anpassen unserer SMTemplate-Klasse an ein Layout ist ebenfalls äußerst einfach. Wir werden zuerst eine Konfigurationsoption für das Layoutverzeichnis einrichten, wie wir es für unsere Ansichten getan haben.

Als nächstes ändern wir unsere Renderfunktion. Wir werden das Layout als optionalen dritten Parameter bereitstellen und es standardmäßig auf "Seite" setzen. Anschließend rufen wir die angeforderte Vorlage ab, weisen sie der variablen $__content zu und zeigen unser Layout an.

In Bezug auf diesen Code sind einige Dinge zu beachten. Zunächst haben wir Smarty noch nicht mitgeteilt, wo wir unsere Layouts finden können. Wir können dies tun, indem wir ein Vorlagenverzeichnis hinzufügen. Dieser Ansatz bedeutet jedoch, dass wir unseren Layouts nicht den gleichen Namen wie unseren Vorlagen geben können - Smarty würde nicht wissen, welches ausgewählt werden soll. Wir könnten dies lösen, indem wir unseren Layouts eine andere Erweiterung geben oder indem wir unser Vorlagenverzeichnis in unserer Renderfunktion festlegen und zurücksetzen oder indem wir erweiterte Smarty-Funktionen verwenden. Im Moment werden wir uns nur mit der Einschränkung abfinden, dass Layouts und Ansichten nicht denselben Namen haben können. Wir können unser Layoutverzeichnis mit der Funktion addTemplateDir() hinzufügen.

Lassen Sie es uns überprüfen, indem Sie unsere index.php-Datei erneut ändern.

Es klappt!

Und wenn wir es ändern, um "lipsum" zu rendern, funktioniert es auch:


Schritt 5: Erstellen Sie Ihre eigenen Modifikatoren

Als letzten Teil dieses Tutorials werde ich eine der erweiterten Funktionen von Smarty vorstellen, die es zu mehr als einer einfachen Template-Engine machen. Smarty enthält eine Reihe von Standardfunktionen und Modifikatoren, aber es ist auch extrem einfach, eigene zu erstellen. Werfen wir einen Blick auf den Modifikator, mit dem wir unser Datum formatiert haben:

Wenn Sie einen benutzerdefinierten Modifikator benötigen, müssen Sie lediglich eine PHP-Funktion schreiben.

Dies führt tatsächlich zu einem Aufruf der Funktion smarty_modifier_date_format() mit $date und unserer Formatzeichenfolge als Argumenten. Diese Funktion gibt eine Zeichenfolge zurück und diese Zeichenfolge wird angezeigt. Wenn Sie also einen benutzerdefinierten Modifikator möchten, müssen Sie lediglich eine PHP-Funktion schreiben. Als Beispiel schreiben wir einen Modifikator namens "weirdcase", der alle Konsonanten in Großbuchstaben und alle Vokale in Kleinbuchstaben schreibt, d. h. "Lorem Ipsum" wird zu "LoReM IPSuM". Erstellen Sie dazu eine Datei mit dem Namen 'modifier.weirdcase.php' im Ordner 'lib/smarty/plugins'. Unser Modifikator akzeptiert nur ein Argument, die Zeichenfolge, die geändert werden muss.

Wir können unser Ergebnis erhalten, indem wir ein Array 'vowels' definieren, unsere Zeichenfolge in ein Array verwandeln und es dann durchlaufen und prüfen, ob jedes Zeichen in unserem Vokal-Array enthalten ist. Wenn dies der Fall ist, schreiben wir es in Kleinbuchstaben, andernfalls in Großbuchstaben. Die geänderten Zeichen werden dann an eine Ergebnisvariable angehängt.

Dies sollte den Trick machen, also lasst es uns überprüfen. Bearbeiten Sie die Vorlage 'lipsum.tpl' und fügen Sie ein h1 hinzu, das unser seltsames 'Lorem Ipsum' enthält.


Schritt 6: Abschluss

Obwohl Smarty viel mehr beinhaltet, als ich in dieses Tutorial passen könnte, sollte dies Ihnen hoffentlich ein Grundwissen darüber vermitteln, wie Sie damit arbeiten können. Sie wissen im Wesentlichen bereits alles, was Sie wissen müssen. Sie sollten auch feststellen können, ob Ihnen die Idee, dieses Template-Framework zu verwenden, gefällt oder nicht. Die fortgeschritteneren Themen wie Filter und Blöcke sind nützlich, aber ohne sie kommen Sie trotzdem gut zurecht. Dokumentation zu den erweiterten Funktionen finden Sie auf der Smarty-Website. Danke fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.