CMS Workbench

Hilfreiche Codeschnipsel, Tipps und Tricks, um das eigene CMS (Bludit, WordPress, Joomla, ...) anzupassen


Teil 1 - des Template-Workshops mit Smarty zeigt Ihnen was Smarty eigentlich ist und kann. Verschaffen Sie sich einen Überblick für eigene Projekte.

Smarty Template Engine

Was ist Smarty?

Smarty ist eine so genannte Template Engine auf Basis der Programmiersprache PHP (wikipedia.org). Mit Template-Engines trennen Sie das HTML-Gerüst vom Beitragsinhalt der Seiten ab. Sie entwickeln eine Webseitenvorlage in die alle Inhalte geladen werden. Viele bekannte CMS nutzen solche Template-Engines für den Aufbau der Webseiten. Smarty ist eine open Source Anwendung und kostenlos nutzbar. Sie können das Projekt von der Webseite smarty.net herunterladen und auf einem Webserver oder lokalen Server installieren.

Warum ist Smarty?

Keine Ahnung, es hätte auch jede andere Template-Engine wie Twig, Mustache, Plates, Blade oder oder oder sein können. Alle die genannten Template-Engines tun im wesentlichen immer das gleiche, sie laden ein Webseitentemplate in das sie den Beitragstext zur Laufzeit einfügen.

Smarty basiert auf Basis von PHP, während andere auf Sprachen wie JavaScript, Python oder sogar Ruby basieren - es ist also für jeden Sprachdialekt etwas dabei. Dennoch viel meine Wahl auf PHP, da dieser Sprachdialekt stärker verbreitet und auch deutlich typsicherer als JavaScript ist.

Wozu eine Template-Engine?

Auch wenn die händische HTML-Seiten-Entwicklung heutzutage kaum noch betrieben wird, dennoch ein Beispiel aus diesem Bereich. Stellen Sie sich vor, Sie schreiben eine Online-Dokumentation mit mehreren 1000 einzelner HTML-Seiten. Jede Seite hat einen Kopf in dem Überschriften sind, einen Inhaltsbereich der den Beitragstext aufnimmt und eine Fußzeile für Ihr Impressum und Datenschutz.

Ihre Online-Dokumentation soll jetzt noch den Namen des Autors unterhalb des Beitragstextes anzeigen, Sie brauchen also ein neues Feld in allen der über 1000 HTML Seiten. Haben Sie die Anwendung klassisch ausgeführt, müssten Sie daher alle Seiten einzeln modifizieren - das ist wirklich ein menge Arbeit.

Eine Template-Engine funktioniert anders. Es existiert nur eine HTML-Seite die Platzhalter enthält und Anweisungen mit denen sie erkennt welcher Inhalt in die betroffenen Platzhalter geladen werden soll. Beispielsweise gäbe es die Platzhalter {header}, {body} oder {footer}, dorthin werden wie im Beispiel beschrieben die betroffenen Inhalte zur Laufzeit geladen.

<html>
  <body>
{header}
{body}
{footer}
  </body>
</html>

Das schematische Codeschnipsel oben soll den Inhalt eines solchen HTML-Templates symbolisieren, ohne dabei Anspruch auf Vollständigkeit zu erheben. Dieses Template mus nur einmal existieren, kann jedoch alle 1000 Inhalte Ihrer Onlinedokumentation anzeigen indem es den Text anstelle der Platzhalter läd.

Wollten Sie folglich noch den Autor mit anzeigen, dann reicht es aus ein weiteres Feld aufzunehmen. Nennen Sie es beispielsweise {autor}.

<html>
  <body>
{header}
{body}
{autor}
{footer}
  </body>
</html>

Das Feld Autor ist im Template unterhalb jedes Beitragstextes vorhanden und kann angezeigt werden. Natürlich können Sie auch ein Datum oder eine Kontakt-Mail auf diese Weise zu Ihrer Doku anreichern, es ist wirklich ganz einfach.

Anmerkung - Dieser Einstiegsbeitrag soll Ihnen eher einen schematischen Einstieg in die Template-Engines geben. Es geht nicht so sehr darum exakte Codeschnipsel zum nachprogrammieren zu erhalten, dies folgt in weiteren Beiträgen.




Empfehlungen


Smarty installieren

Teil 2 - des Workshops zur Template-Engine. Installieren Sie Smarty auf dem Webserver Ihres Providers. Legen Sie ein paar grundlegende Ordner an um loszulegen.


Smarty, multipler Content

Teil 4 - der Templatebau-Reihe für das überaus populäre Template-System Smarty. Legen Sie nun Ordner für Ihre Texte des Contant an, um verschiedene Inhalte laden zu können.


Smarty Template-Abfragen

Teil 7 - Implementieren Sie im Template einfache Kontrollstrukturen, um bestimmte Bereiche im Template dynamisch ein- oder auszuschalten.


Smarty Template anlegen

Teil 3 - des Template-Workshops in dem Sie ein erstes Template anlegen und Daten anzeigen lassen können - die erste Webseite zeigt sich.


Smarty Textbausteine, Code

Teil 6 - Trennen Sie den Programmcode vom Text. Dieser Beitrag zeigt Ihnen wie Sie dies mit wenigen Zeilen Code realisieren und reine Textbausteine erzeugen.


Smarty Textkonvertierung HTML

Teil 5 - Deutschen sonderzeichen wie ü und ä müssen zwingend in HTML konforme Zeichen umgewandelt werden. Die Smarty Modifier erlauben solche manipulationen im Template.




Channel Monitoring

Aus Zeit- und Kostengründen wünschen Sie die Betreuung Ihres Social-Kanals wie Xing, Kununu, YouTube, Facebook, Instagram, Twitter oder Ihrer Firmenseite.

Web-Design und Templating

Für Ihr Unternehmen benötigen Sie eine professionelle und sichere Webseite nach aktuellem Stand der Technik, um weitere Kundenfelder zu erschließen.

Bewertungen und Sterne

Ihr frisch gebackenes Unternehmen benötigt einen Image-Vorschuss, positive Bewertungen bei Google, Instagram uns co. ermöglichen einen sorglosen Start.