Smarty herunterladen und einrichten
Bevor wir mit der eigentlichen Entwicklung unseres CMS beginnen, richten wir die Smarty Template Engine korrekt ein. In diesem ersten Teil des Workshops zeige ich dir, wo du Smarty herunterlädst, wie du es installierst und in dein Projekt integrierst. Mit dieser Vorbereitung legen wir den Grundstein für eine klare Trennung von Layout und Logik – einer der größten Vorteile von Smarty.
Was ist Smarty eigentlich?
Smarty ist eine leistungsfähige Template Engine für PHP. Sie erlaubt die klare Trennung von PHP-Logik und HTML-Layout und wird in vielen professionellen Webprojekten eingesetzt. Genau das wollen wir uns in diesem Workshop zunutze machen.
Smarty herunterladen
Du kannst Smarty direkt von GitHub oder der offiziellen Website herunterladen: https://www.smarty.net. Alternativ via Composer: composer require smarty/smarty
Tipp: Wenn du Composer verwendest, ersparst du dir das manuelle Aktualisieren und kannst Smarty leichter in bestehende Projekte integrieren.
Projektstruktur und Server vorbereiten
Lade das Smarty-Paket auf deinen Server hoch und entpacke dort das ZIP-File. Erstelle dann eine klare Projektstruktur, z. B.:
/smarty-cms/
│
├── /libs/ # Hier kommt Smarty hinein
├── /templates/ # Deine HTML-Vorlagen
├── /templates_c/ # Kompilierte Templates
├── /cache/ # Optionaler Cache
├── /config/ # Konfigurationsdateien
├── /content/ # Deine Beiträge und Artikel
└── index.php # Einstiegspunkt deines CMSBei dem oben gezeigten Beispiel handelt es sich mehr oder weniger um die Standard-Vorgabe des Projektes und sollte zunächst übernommen werden.
Die Ordner templates_c und cache müssen beschreibbar sein (CHMOD 777 im lokalen Testumfeld).
.htaccess vorbereiten
Die Datei .htaccess ist eine wichtige Schaltzentrale deines Servers, in ihr wird festgelegt, wie der Server ankommende Requests verarbeiten soll. Ziel ist es, das die in den folgenden Abschnitten kommende index.php jedwede Anfrage verarbeiten kann.
RewriteEngine On
RewriteBase /
# --- Process by index.php ---
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) /index.php/$1 [L]Der oben gezeigte Code weist den Server an, jede Anfrage gegen die index.php zu senden, also dein Skript das den Request mittels Programmcode auswerten und verarbeiten soll.
Smarty in die index.php einbinden
In deiner index.php bindest du Smarty grundsätzlich wie folgt ein:
require_once 'smarty-5-4-5/libs/Smarty.class.php';
$smarty = new Smarty\Smarty;
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('configs/');Damit ist die Basis gelegt, um im nächsten Schritt ein erstes Template zu erstellen und dynamisch Inhalte einzubinden.
Im nächsten Schritt erstellst du einen kurzen Prototype in der index.php, um die grundlegende Funktionsweise zu symbolisieren und um eine funktionsfähige Basis zu haben.
Das erste Template default.html
Im nächsten Schritt legst du ein erstes Template an das Smarty verarbeiten kann. Im Verzeichnis templates speicherst du die Datei default.html und legst in diese Datei den folgenden HTML-Inhalt ab:
<!DOCTYPE html>
<html>
<head>
<title>{$title}</title>
</head>
<body>
<h1>{$title}</h1>
<p>{$description}</p>
<p>{$content}</p>
</body>
</html>Hinweis: Auch wenn das Projekt Smarty die Extension tpl empfiehlt, so kannst du zunächst html verwenden, denn in den meisten Hosting-Backends der Provider, können HTML-Dateien online bearbeitet werden. Dateien mit der Endung tpl müssen stattdessen heruntergeladen werden, was der Workflow etwas umständlicher macht.
Der erste Prototyp
Im nächsten Schritt machst du dich an den ersten Prototypen, also eine erste funktionierende Version, daher an dieser Stelle der vollständige Code der index.php:
require_once 'smarty-5-4-5/libs/Smarty.class.php';
$smarty = new Smarty\Smarty;
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('configs/');
$smarty->assign('title', 'Der Beitragstitel');
$smarty->assign('description', 'Der Anleser des Beitrags');
$smarty->assign('content', 'Der vollständige Beitragstext...');
$smarty->display('default.html');Im ersten Teil des Skripts, wird Smarty und dessen Umgebungsvariablen konfiguriert. Verzeichnisse werden festgelegt und das Smarty-Objekt wird im Arbeitsspeicher erzeugt.
Mit Hilfe des Befehls assign() erzeugt Smarty eine Template-Variable mit dem Titel title und weist ihr den Inhalt Der Beitragstitel zu. Das gleiche passiert auch mit description und content.
Im letzten Schritt läd der Befehl display() das angegebene Template default.html aus dem Templateverzeichnis und ersetzt die Templatevariablen mit den eigentlichen Texten.
Erster Start
Wenn du die URL zu deiner Webseite mit dem Smarty-CMS im Browser eingibst und bestätigst, sollte eine rudimentäre Webseite erscheinen die den Inhalt ausgibt. Soweit, so gut.
Dynamik ins Spiel bringen, echten Content anzeigen
Da dein statischer Test des Prototypen erfolgreich war, kannst du damit beginnen dich um den Content zu kümmern. Du hast bereits das Verzeichnis content in deinem CMS erzeugt. Lege in diesem Verzeichnis die folgenden Dateien an:
title.txt
description.txt
content.txt
template.txtTrage dazu ein wenig Inhalt in die einzelnen Dateien entsprechend ihres Titels ein. In die Datei template.txt musst du den Namen der Templatedatei default.txt eintragen.
Startskript anpassen
Das Startskript index.php muss jetzt natürlich angepasst werden, damit es den Inhalt aus den Dateien laden kann und damit Smarty diesen dynamisch in das Template einstellt.
require_once 'smarty-5-4-5/libs/Smarty.class.php';
$smarty = new Smarty\Smarty;
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('configs/');
$smarty->assign('title', file_get_contents('content/title.txt'));
$smarty->assign('description', file_get_contents('content/description.txt'));
$smarty->assign('content', file_get_contents('content/content.txt'));
$smarty->display(file_get_contents('content/template.txt'));Oben zu sehen das neue index-Skript das den dynamischen Inhalt aus dem Content-Verzeichnis anzeigen kann.
Unterschiedliche Artikel anzeigen
Bislang kann dein kleines Smarty-CMS auf lediglich einen fixierten Beitrag zugreifen, das wollen wir jetzt ändern. Dazu benötigst du die Server-Variable $_SERVER['REQUEST_URI'] in der die URL zu einem existierenden Beitrag angegeben ist, etwa so: http://domain.de/kontakt. Da alle Anfragen durch die htaccess an die index.php geleitet werden, muss dieses Programm die Verarbeitung der URL abwickeln.
require_once 'smarty-5-4-5/libs/Smarty.class.php';
$smarty = new Smarty\Smarty;
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('configs/');
$uri = $_SERVER['REQUEST_URI'];
$smarty->assign('title', file_get_contents('content/'.$uri.'/title.txt'));
$smarty->assign('description', file_get_contents('content/'.$uri.'/description.txt'));
$smarty->assign('content', file_get_contents('content/'.$uri.'/content.txt'));
$smarty->display(file_get_contents('content/'.$uri.'/template.txt'));Dazu wird dein Startskript index.php wie oben zu sehen leicht erweitert. Neu hinzugekommen ist die Zeile $uri = $_SERVER['REQUEST_URI']; in der die aktuell eingegebene URL des Besuchers gespeichert wird. Als weitere Neuerung, wird der assign() um die Variable $uri erweitert, damit dynamische Pfadangaben und unterschiedliche Artikel aufgerufen werden können.
Inhalt und Struktur in den Content-Ordner bringen
Damit das Smarty-CMS auf unterschiedliche Beiträge zugreifen kann, müssen natürlich noch Beiträge und Verzeichnisse erzeugt werden. Die technische Implementierung schreibt vor, das in jedem Verzeichnis die vier Dateien title.txt, description.txt, content.txt und template.txt liegen müssen. Willst du also eine Kontaktseite ala http://Domain.de/kontakt erzeugen, dann musst die folgende Struktur aufbauen:
/smarty-cms/
│
├── /libs/ # Hier kommt Smarty hinein
├── /templates/ # Deine HTML-Vorlagen
├── /templates_c/ # Kompilierte Templates
├── /cache/ # Optionaler Cache
├── /config/ # Konfigurationsdateien
├── /content/ # Deine Beiträge und Artikel
│ ├── /kontakt/
│ │ └── title.txt # Titel des Beitrags
│ │ └── description.txt # Anleser des Beitrags
│ │ └── content.txt # Beitragstext
│ │ └── template.txt # Template
│ ├── /impressum/
│ │ └── title.txt
│ │ └── description.txt
│ │ └── content.txt
│ │ └── template.txt
│ └── /usw...
└── index.php # Einstiegspunkt deines CMSFertig, wie geht’s weiter?
Das kleine Smarty-CMS ist damit fertig und lauffähig. Zugegeben, es bietet nur wenig Funktionen aber das war auch nicht das Ziel. Dennoch ist es eine gute Basis für weitere Ausbauten und schafft ein grundlegendes Verständnis zur Template-Engine Smarty.
