TYPO3

TYPO3 ist Europas weitest verbreitetste Open Source CMS. Es geht auf den Dänen Kasper Skårhøj zurück, der 1998 die erste Version davon veröffentlichte. Das CMS wird von einer großen Entwickler-Community gestützt, deren meisten Mitglieder im deutschsprachigen Raum angesiedelt sind.

Die Entwicklung und Community-Arbeit wurde seit langem von der TYPO3 Association, einem in der Schweiz registrierten Verein, gefördert und gelenkt. Im Jahr 2016 — nach einer politisch schwierigen Phase, in der TYPO3 an Orientierung und Reputation verloren hatte — wurde die in Düsseldorf ansässige TYPO3 GmbH gegründet, um Dienstleistungen um das System herum anzubieten und die Weiterentwicklung wieder »auf Spur« zu bringen.

Kernmerkmale

• TYPO3 ist in PHP implementiert und gilt als eines der sichersten und stabilsten Open-Source CMS.
• Es nutzt eine relationale Datenbank als Speicher für Inhalte (typischerweise MySQL oder MariaDB).
• Ist auf den Enterprise-Markt ausgerichtet und im Vergleich zu anderen Systemen stärker als Plattform für Anwendungen ( »Framework«) aufgestellt. Das Betreiben einer Website ist nur einer der möglichen Einsatzzwecke.
• Die Funktionalität von TYPO3 ist in Module, sog. »Extensions«, verteilt. Die wichtigsten Extensions, die vom TYPO3-Kernentwicklungsteam bereitgestellt werden, bilden zusammen den »TYPO3 Core«. Sie bilden die Basis jeder TYPO3-Installation.
• Darüber hinaus haben Entwickler mehrere Tausend kostenfreie Extensions zu unterschiedlichsten Zwecken im zentralen Extension-Repository veröffentlicht. Aufgabe der Nutzer-Extensions ist es, den Funktionsumfang von TYPO3 für spezielle Zwecke zu erweitern.
• TYPO3 profitiert von kontinuierlichen Weiterentwicklung und einem sehr regelmäßigen Release-Zyklus (eine neue Minor-Version alle 2-3 Monate). Je Major-Version (derzeit Version 10) erscheint eine sogenannte Long-term Support -Versionen (LTS), die 2 Jahre lang mit Updates versorgt wird. Ansonsten werden immer die letzten 2 Minor-Versionen mit Updates und Sicherheits-Patches versorgt. (TYPO3 nutzt den Semver-Standard, siehe Kompendium)

Installation & Einrichtung

1. Vorbereitung

Dateisystem

Du beginnst die TYPO3-Installation, indem du das Dateisystem deines Hetzner-Accounts wie folgt vorbereitest. Im Beispiel wird davon ausgegangen, dass TYPO3 unter public_html/typo3 auf dem Server eingerichtet werden soll. Verbinde dich per SSH (KiTTY) mit deinem Server, wechsle ins TYPO3-Verzeichnis und lege dort ein Verzeichnis namens public an:

cd public_html/typo3
mkdir public

In diesem Verzeichnis werden alle öffentlich zugänglichen Teile deiner TYPO3-Website liegen, wohingegen viele Teile der internen Programmierung außerhalb des Verzeichnisses installiert werden.

Domain / Virtueller Host

Damit deine Domain (z.B. http://typo3.deinedomain.de) auf das soeben angelegte public-Verzeichnis zeigt, müssen wir die Domainzuordnung im Hetzner-Backend darauf umstellen. Bitte richte dich darauf ein, dass bis zu 24 Stunden vergehen können, bis Änderungen an dieser Einstellung greifen.

Datenbank

Bereite im Hetzner-Backend eine neue / leere Datenbank für die TYPO3-Installation vor:

2. Download

TYPO3 kann auf verschiedene Weisen aus dem Internet heruntergeladen werden. Besonders empfehlenswert ist die Installation per Composer, weil auch spätere Updates damit durchgeführt und Nicht-TYPO3-Bibliotheken einfach hinzuinstalliert werden können.

Download per Composer

Zur Nutzung von Composer ist Kommandozeilenzugriff auf den Webhosting-Account nötig, was in manchen Hosting-Konstellationen nicht gegeben ist. Bei Hetzner stellt dies keine Hürde da, hier hast du per SSH Zugriff auf die Kommandozeile.

Wenn Composer genutzt werden kann und installiert wurde (siehe Kompendium), können wir TYPO3 damit aus dem Internet auf den Server laden. Verbinde dich dazu per SSH (KiTTY) mit deinem Server, wechsle ins TYPO3-Verzeichnis und starte via Composer den Download der TYPO3-Minimaldistribution:

​x
cd public_html/typo3

# Installation mit lokal abgelegtem Composer
./composer require typo3/minimal

Sodann werden TYPO3 und alle benötigten Bibliotheken heruntergeladen und für die Installation vorbereitet. Der Download kann mehrere Minuten dauern. Mit der Minimaldistribution werden nur diejenigen TYPO3-Extensions installiert, die zum Betrieb des Systems unbedingt notwendig sind. Wir werden weitere, nützliche Extensions im Anschluss manuell hinzuinstallieren.

Beim Download werden verschiedene Verzeichnisse angelegt (ls -l zur Ansicht), unter anderem:

• vendor: Hier hinein legt Composer alle verwendeten Programmbibliotheken, u.a. TYPO3 selbst.
• public: In diesem Verzeichnis liegt die eigentliche Website (hat vorher schon existiert).

Alternative Installationsmethoden

Steht Composer auf dem Server nicht zur Verfügung, so kommen weitere Methoden in Betracht (z.B. per FTP oder Github), die auf der offiziellen Website dokumentiert sind.

3. Installation

Um die Installation mit dem TYPO3-Installationsassistenten fortsetzen zu können, müssen wir zunächst eine leere Datei namens FIRST_INSTALL ins public-Verzeichnis auf dem Server anlegen. Damit »beweisen« wir dem Assistenten, dass wir tatsächlich Zugriff auf den Server haben und zur Installation berechtigt sind. Am einfachsten geht das mit dem touch -Befehl (siehe SSH-Dokumentation für die nützlichsten Kommandozeilenbefehle):

xxxxxxxxxx
touch public/FIRST_INSTALL

Sodann kannst du den Installationsassistenten starten, indem du deine Domain (z.B. http://typo3.deinedomain.de) im Browser aufrufst.

Trage im zweiten Schritt die deine deine Datenbank-Zugangsdaten ein, die du in der Hetzner-Oberfläche findest:

Wähle im folgenden Schritt die vorbereitete, leere Datenbank (ggf. zuvor über den PHPMyAdmin von Hetzner alle Datenbanktabellen löschen, falls die Datenbank bereits anderweitig benutzt wurde).

Im letzten Schritt des Installationsassistenten legst du einen ersten Benutzer für das TYPO3-Backend an. Vergib ein starkes Passwort (die Farbe des Eingabefelds symbolisiert die Passwortstärke → Grün ist zu bevorzugen!) und merke dir die Zugangsdaten, die du hier vergibst (Benutzername und Passwort). Lass dich abschließend zum TYPO3-Backend führen und melde dich dort mit diesen Zugangsdaten an.

4. Konfiguration

Zum Abschluss der TYPO3-Installation solltest du noch eine Reihe von nützlichen TYPO3-Extensions installieren. Dies geschieht wiederum auf der Kommandozeile und mit Hilfe von Composer:

xxxxxxxxxx
cd public_html/typo3

# Installation des Benutzerprofil-Editors
./composer require typo3/cms-setup

# Installation des Richtext-Editors
./composer require typo3/cms-rte-ckeditor

# Installation des Template-Moduls
./composer require typo3/cms-tstemplate

# Installation der Backend-Benutzerverwaltung
./composer require typo3/cms-beuser

# Installation des Standard-Renderings von Content-Elementen durch Fluid-Templates
./composer require typo3/cms-fluid-styled-content

Du kannst auch alle diese TYPO3-Extensions in einem Durchgang installieren:

xxxxxxxxxx
cd public_html/typo3

# Installation des Benutzerprofil-Editors
./composer require typo3/cms-setup typo3/cms-rte-ckeditor typo3/cms-tstemplate typo3/cms-beuser typo3/cms-fluid-styled-content

TIPP: Extensions, die per Composer installiert wurden, sind nicht automatisch aktiviert, sondern müssen zunächst ** manuell aktiviert** werden, um genutzt werden zu können.

Grundlegende Konzepte

Vorweg: Umfassende Informationen über TYPO3 und seine Konzepte bietet dir auch das ( englische) Getting Started Tutorial.

Backend & Frontend

Wie auch bei anderen CMS wird bei TYPO3 zwischen Frontend und Backend unterschieden. Unter Frontend (»Vorderseite«) versteht man dabei die Website, so wie sie von normalen Website-Besuchern gesehen wird. Manche Websites bieten die Möglichkeit, sich am Frontend als registrierter Benutzer anzumelden — etwa Online-Shops oder Websites mit einem geschlossenen Benutzerbereich. TYPO3 spricht hier von sog. Frontend-Benutzern. Dies haben jedoch keinen Einfluss auf die redaktionellen Inhalte oder gar Zugriff auf das TYPO3-Backend.

Um redaktionelle Arbeiten im TYPO3 durchzuführen, musst du dich als Backend-Benutzer am Backend anmelden. Das TYPO3-Backend kannst du standardmäßig aufrufen, indem du /typo3 an deine Basisdomain anhängst, also etwa unter http://typo3.deinedomain.de/typo3.

Module & Seitenbaum

Die Funktionalität, die im TYPO3-Backend zur Verfügung steht, gliedert sich in verschiedene Module (oder »Werkzeuge«), die linkerhand zur Auswahl stehen. Module werden von Extensions ins System eingebracht.

Seiten bilden das hierarchisch-strukturelle Rückgrat jeder TYPO3-Website. Abhängig von ihren Typen sind Seiten im Frontend aufrufbar und stellen die Dokumente einer Website dar. Im Backend wird die Seitenhierarchie im sog. ** Seitenbaum** wiedergegeben, der eine weitgehend intuitive Anlage und Verwaltung der Seiten ermöglicht (Drag & Drop, Kontextmenü bei Rechtsklick).

Sobald die Sitemap einer Website feststeht, können wir das grundlegende Seitengerüst im Seitenbaum anlegen, beginnend mit der Wurzelseite (Startseite):

Site-Konfiguration

Nach dem Anlegen der Wurzelseite können wir die sog. »Site-Konfiguration« fertigstellen. Diese legt z.B. fest, unter welcher Domain die Website erreichbar sein soll und welche die Hauptsprache ist. Beim Erzeugen der Wurzelseite wurde bereits eine Konfiguration automatisch angelegt — diese müssen wir im »Sites«-Modul korrigieren und verfeinern:

Auf der ersten Registerkarte »General« wählen wir einen schöneren, aussagekräftigen Identifizierer für die Website, und weiter unten dann die korrekte Domain, unter der unsere Website laufen soll. TYPO3 nutzt diese Angabe etwa zu Erzeugung von Link-URLs.

Im Reiter »Language« konfigurieren wir die korrekten Spracheinstellungen für verschiedene Aspekte:

Damit unsere neu eingerichtete TYPO3-Seite eine erste Frontend-Ausgabe erzeugt, fehlt ihr noch ein zentrales TypoScript-Template. Um dieses bequem anlegen zu können, müssen wir zunächst die TYPO3-Extension tstemplate installieren und aktivieren (siehe folgende Abschnitte).

Extensions

Installation

Wenn TYPO3 selbst per Composer installiert wurde, müssen auch zusätzliche Extensions mit Hilfe von Composer ergänzt werden. Dies geschieht auf der Kommandozeile (im Installationsverzeichnis, z.B. public_html/typo3):

xxxxxxxxxx
./composer require <vendor/package-name>

Dabei ist <vendor/package-name> natürlich ein Platzhalter und entspricht dem Paketnamen, wie er unter Packagist dargestellt wird (siehe Kompendium).

TYPO3-Extensions sind jeweils in einem eigenen Verzeichnis unter folgendem Pfad innerhalb deiner TYPO3-Installation gespeichert:

xxxxxxxxxx
/public/typo3conf/ext/<extension-key>

Der Extension-Schlüssel (extension key) ist der interne Name der Extension. Er wird an verschiedenen Stellen und in verschiedenen Schreibweisen in der Programmierung benötigt.

Aktivierung

Seit TYPO3 11 müssen einmal installierte Extensions nicht mehr explizit aktiviert werden. Sie sind automatisch aktiviert, sobald sie installiert wurden.

Bis einschließlich TYPO3 10 müssen TYPO3-Extensions einmalig im TYPO3-Backend aktiviert werden, damit sie im System genutzt werden können. Dies geschieht über das Extensions-Modul:

Nicht länger benötigte Extensions können (und sollten) hier ggf. auch wieder deaktiviert werden.

Viele Extensions bringen ein eigenes TypoScript-Template (siehe unten) mit, das ins Haupt-TypoScript-Template der Website eingebunden werden muss, damit die Extension funktioniert. Die Einbindung ist weiter unten für die Demo-Extension exemplarisch beschrieben.

Rendering & Templating

Als Web Content Management System hat TYPO3 verschiedene, zentrale Aufgaben:

• Es stellt eine Oberfläche zur Pflege von Inhalten zur Verfügung (Content Management)
• Es bietet einen Mechanismus, mit dem die gepflegten Inhalte zur Ausgabe im Web gebracht werden, indem die in der Datenbank liegenden Daten im Sinne des gewünschten Designs in HTML verpackt werden. Man spricht hier auch von einem Rendering-Vorgang.

Beim Rendern werden die auszugebenden Daten mit vorgefertigten Vorlagen (Templates) kombiniert, wobei die Templates die resultierende HTML-Quelltextstruktur definieren und gleichzeitig die einzubindenden Gestaltungsvorgaben mitbringen. Das intelligente Ineinander-Verwirken von Inhaltsdaten und HTML-/CSS-Vorlagen wird auch Templating genannt.

TYPO3 bietet mehrere unterschiedliche Templating-Methoden an, die verwendet werden können, um HTML-Ausgaben fürs Frontend zu erzeugen. Die unterschiedlichen Methoden können gleichzeitig bzw. in Kombination miteinander verwendet werden:

• Ausgabe mittels TypoScript (siehe folgender Abschnitt)
• Fortgeschrittenes Templating mit Fluid-Templates (siehe unten)

TypoScript

Das Herzstück im Zentrum des Rendering-Prozesses ist der sogenannte TypoScript Frontend Engine (TSFE). Diese zentrale Programmkomponente hat die Aufgabe, beim Seitenaufruf die Erzeugung von Frontend-Ausgaben zu starten und zu kontrollieren. Seine Arbeitsanweisungen bezieht der TSFE aus großen Instruktionsangabe, die mit der Konfigurationssprache TypoScript artikuliert ist. TypoScript sieht z.B. so aus:

xxxxxxxxxx
page = PAGE
page.10 = TEXT
page.10.value = Hello World

Die Gesamtkonfiguration des TSFE setzt sich in der Regel aus mehreren kleinen TypoScript-Fragmenten zusammen, die vom TYPO-Core und von installierten Extensions beigetragen werden. TYPO3 nennt diese Konfigurationsfragmente ** TypoScript-Templates**, auch wenn der Begriff »Template« an dieser Stelle verwirrend sein mag.

Jede TYPO3-Website benötigt stets mindestens ein zentrales TypoScript-Template (das sog. Root-Template). Optional können weitere TypoScript-Templates inkludiert werden. Mit Ausnahme des Root-Templates können TypoScript-Templates entweder als Datensätze in der Datenbank oder in Form von TypoScript-Dateien im Dateisystem des Servers gespeichert werden. Die Dateiform ist zu bevorzugen, da die Templates dann per PHPStorm bearbeitet werden können (statt über den Browser).

PRO-TIPP: Streng genommen nutzt TYPO3 zwei leicht unterschiedliche Varianten von TypoScript (das verfügbare Vokabular unterscheidet sich minimal):

• TypoScript: Konfiguration für Frontend-Ausgaben
• PageTS: Konfiguration des TYPO3-Backends

Eine umfangreiche Einführung in TypoScript bietet das Tutorial TypoScript in 45 Minutes .

Fluid

Neben TypoScript stellt die vorinstallierte Core-Extension fluid noch eine weitere, HTML-nähere Technik fürs Frontend-Rendering zur Verfügung: Mit Hilfe der XML-basierten Templating-Sprache Fluid wird HTML-Quellcode um Programmteile angereichert, die vom Fluid Template Engine ausgewertet bzw. ausgeführt werden, sobald solche Fluid-** Templates** für die Frontend-Ausgabe eingesetzt werden. Fluid-Quellcode sieht z.B. so aus:

xxxxxxxxxx
<h4>Template it your own way</h4>
<p>
    <f:if condition="{myExpression}">
        <f:then><strong>Yay</strong></f:then>
        <f:else>Nay</f:else>
    </f:if>
</p>

Elemente, die mit dem f:-Präfix beginnen, stammen aus dem Fluid-Namensraum . Anhand dieses Merkmals erkennt der Fluid Template Engine beim Verarbeiten des Templates, dass es sich um Programmcode handelt, der ausgeführt werden muss. Solche Mini-Programme, die in das umgebende HTML eingebettet werden, nennt man ** ViewHelper**. Nach der Verarbeitung der ViewHelper ist im Ergebnis kein Fluid-Code mehr enthalten — lediglich HTML bleibt übrig und wird zum Browser des Besuchers geschickt.

Jede TYPO3-Extension kann eigene ViewHelper mitbringen und zur Nutzung zur Verfügung stellen. Eine Referenz zu allen ViewHelpern, die im Standardumfang von TYPO3 enthalten sind, findest du in der offiziellen Fluid ViewHelper Documentation . Insbesondere wichtig sind die ViewHelper der typo3/fluid-Extension .

3 Dateivarianten

Fluid-Quellcode wird typischerweise in Dateien mit der Endung .html im Dateisystem abgelegt. Theoretisch wäre es denkbar, den gesamten benötigten Fluid-Quellcode in ein einziges Template zu schreiben. In der Praxis bewährt es sich aber, Fluid-Templates in kleinere Einheiten zu teilen und bei Bedarf einzubinden (Partials). Auf diese Weise wird gleichzeitig Wiederverwendbarkeit für einzelne Teil-Templates erreicht, etwa zur einheitlichen Ausgabe von wiederkehrenden Abschnitten. Je nach Speicherort werden 3 Dateivarianten unterschieden, die leicht unterschiedliche Aufgaben übernehmen:

Templates

Der Einstiegspunkt jedes Rendering-Prozesses (z.B. komplette Seiten oder einzelnen Content-Elemente) ist stets ein * Template*. Aus dem Template heraus können optional ein Layout und / oder beliebig viele Partials referenziert werden.

Layouts

Jedes Template kann max. ein Layout aufrufen, welches die Rahmenkonstruktion für das Template-Rendering liefert (= der Quellcode um die Template-Ausgabe herum)

Partials

Partials sind "Unter-Templates", die aus Layouts, Templates und anderen Partials heraus aufgerufen werden können. Partials können also wiederverwendet werden und sparen damit redundanten Code.

Fluid-Syntax

Die folgende Übersicht stellt nur einen winzigen Ausschnitt von Fluid und seinen Möglichkeiten dar. Einen ausführlichen Einstieg in Fluid findest du unter https://typo3.org/fluid/.

Grundstruktur

Jedes Fluid-Template sollte auf der obersten Ebene nur ein einziges HTML-Element haben, alle weiteren Inhalte sollten untergeordnet sein. Es bietet sich dafür das html- oder ein div-Element an. Damit dieses Element selbst nicht in der Ausgabe erscheint, muss ihm das Spezialattribut data-namespace-typo3-fluid="true" gegeben werden:

xxxxxxxxxx

<html data-namespace-typo3-fluid="true">

    <!-- Hier kommt der eigentliche Fluid-Code hinein -->

</html>

Variablen

Beim Start eines Fluid-Rendering-Vorgangs werden dem Template in der Regel Argumente übergeben, die innerhalb von Fluid als Variablen zur Verfügung stehen. Man kann auf Variablen zugreifen, indem man ihren Namen in geschweifte Klammern setzt:

xxxxxxxxxx
<p>{text}</p>

Die Sondervariable {_all} steht synonym für "alle verfügbaren Variablen" (Beispiele siehe unten).

ViewHelper

ViewHelper werden in der Regel in der XML-Notation verfasst, also als Element-Attribut-Konstrukte (analog HTML):

xxxxxxxxxx

<div>
    <f:format.html>{text}</f:format.html>
</div>

Erklärung: der format.html-ViewHelper nimmt formatierten Text (z.B. aus einem TYPO3-Richtext-Editor) entgegen (hier aus der Variable text) und gibt ihn als HTML-formatierten Text aus.

Mit dem debug-ViewHelper kann man sich zu Entwicklungszwecken vorübergehend einzelne Variablen anschaulich anzeigen lassen:

xxxxxxxxxx

<f:debug>{text}</f:debug>

Alternativ kann man die Sondervariable {_all} verwenden, um sich alle verfügbaren Variablen zeigen zu lassen:

xxxxxxxxxx

<f:debug>{_all}</f:debug>

Der if-ViewHelper ermöglicht z.B. die Formulierung von Bedingungen:

xxxxxxxxxx

<f:if condition="{messages}">
    <f:then>Sie haben {messages} Nachrichten.</f:then>
    <f:else>Leider liegen derzeit keine Nachrichten für Sie vor.</f:else>
</f:if>

Manchmal würden durch die XML-Notation ungültige Quelltextstrukturen entstehen, z.B. wenn man komplexere Konstruktionen in ein HTML-Attribut einsetzen muss. Für diese Fälle steht eine alternative Inline-Notation für ViewHelper zur Verfügung:

xxxxxxxxxx
<p class="{f:if(condition: error, then: 'error', else: 'success')}">
    {message}
</p>

Die if-ViewHelper-Konstruktion im vorherigen Beispiel ist funktional identisch mit:

xxxxxxxxxx

<f:if condition="{error}">
    <f:then>error</f:then>
    <f:else>success</f:else>
</f:if>

Der for-ViewHelper bietet die Möglichkeit, Schleifen zu durchlaufen und damit z.B. sich wiederholende Abschnitte auszugeben. Angenommen, die Variable blogPost enthält eine Liste von Blogartikeln, könnte wie folgt eine Übersichtsliste der Titel ausgegeben werden:

xxxxxxxxxx

<ul>
    <f:for each="{blogPosts}" as="blogPost">
        <li>{blogPost.title}</li>
    </f:for>
</ul>

Einbindung

Über den render-ViewHelper lassen sich ausgelagerte Fluid-Partials einbinden:

xxxxxxxxxx

<div class="blogpost">
    <f:render partial="Blog/Post" arguments="{_all}"/>
</div>

Im obigen Beispiel wird das Partial Blog/Post eingebunden. Fluid erwartet hier, dass im Partials-Verzeichnis ein Blog-Unterverzeichnis liegt und darin eine Fluid-Datei mit dem Namen Post.html zu finden ist (die Dateiendung kann weggelassen werden). Über das arguments-Attribut können dem Partial wiederum Argumente übergeben werden, die innerhalb des Partials dann wieder als Variablen zur Verfügung stehen. Im Beispiel wird die Sondervariable {_all} verwendet, um bequem alle Variablen ans Partial weiterzureichen. Alternativ können auch gezielt bestimmte Variablen übergeben werden:

xxxxxxxxxx

<div class="blogpost">
    <f:render partial="Blog/Post"
              arguments="{title: blogPost.title, published: blogPost.date}"/>
</div>

Beachte, wie im letzten Beispiel durch entsprechende Schlüsselvergabe der date-Parameter zu published umbenannt wird.

Auch innerhalb eines Templates oder Partials kann man für mehr Ordnung sorgen, indem man Sektionen definiert und gezielt aufruft:

xxxxxxxxxx

<html data-namespace-typo3-fluid="true">
    <ul>
        <f:for each="{blogPosts}" as="blogPost">
            <f:render section="Post"
                      arguments="{title: blogPost.title, published: blogPost.date}"/>
        </f:for>
    </ul>

    <f:section name="Post">
        <li>{title}: {published}</li>
    </f:section>
</html>

Wird diese Fluid-Datei von außen aufgerufen, so wird standardmäßig nur der Teil gerendert, der nicht in eine section eingeschlossen ist (der <ul>-Abschnitt im obigen Beispiel). Möchte man von außen gezielt eine bestimmte section innerhalb einer Fluid-Datei aufrufen, kann dem render-ViewHelper der Name der gewünschten section übergeben werden:

xxxxxxxxxx

<f:render partial="Blog/Post" section="Teaser" arguments="{_all}"/>

Fluid & TypoScript

Über die Fluid-ViewHelper lassen sich viele, auch komplexe Aufgaben bewerkstelligen. Nicht zuletzt kann ein Entwickler auch eigene ViewHelper programmieren und damit die Möglichkeiten von Fluid weiter ergänzen. Manchmal ist es jedoch naheliegend, bestimmte Aufgaben mit Hilfe von TypoScript (siehe oben) zu erledigen. Hierzu stellt Fluid den cObject -ViewHelper zur Verfügung, mit dem ein TypoScript-Objekt referenziert werden kann (dieses muss außerhalb der Fluid-Datei in einem TypoScript-Template vorliegen). Ein klassisches Beispiel ist das Rendern eines dynamischen Menüs, das sich dynamisch aus den in TYPO3 angelegten Seiten zusammensetzt:

xxxxxxxxxx

<f:cObject typoscriptObjectPath="lib.menu"/>

Im TypoScript:

xxxxxxxxxx
# Bibliothekselement namens "menu" vom Typ HMENU anlegen
lib.menu = HMENU
lib.menu {

    # Die erste Ebene des Menüs soll durch Texteinträge dargestellt werden (TMENU)
    1 = TMENU

    # Nutzen und konfigurieren des Normalzustands (NO)
    1.NO = 1
    1.NO.allWrap = <li>|</li>

    # Nutzen und konfigurieren des aktiven Zustands (ACT)
    1.ACT = 1
    1.ACT.wrapItemAndSub = <li>|</li>

    # Umschließen der gesamten ersten Ebene
    1.wrap = <ol class="level-1">|</ol>
}

(Der Vollständigkeit halber sei erwähnt, dass Fluid inzwischen auch über eigene Möglichkeiten verfügt, Menüs auszugeben, und TypoScript für diese Aufgabe nicht unbedingt erforderlich ist. Historisch gesehen ist dies jedoch ein übliches Vorgehen.)

Umgekehrt ist es aus TypoScript heraus möglich, das Rendering eines Fluid-Templates anzustoßen:

xxxxxxxxxx
10 = FLUIDTEMPLATE
10 {
    layoutRootPaths.10 = EXT:muk_minimal/Resources/Private/Layouts
    partialRootPaths.10 = EXT:muk_minimal/Resources/Private/Partials
    templateRootPaths.10 = EXT:muk_minimal/Resources/Private/Templates/Page

    templateName = Default
    variables {
        content = TEXT
        content.value = Lorem Ipsum dolor sit amet
    }
}

Das vorangehende Beispiel stößt von TypoScript aus das Rendering des Fluid-Templates Default an. Dieses wird im Extension-Verzeichnis Resources/Private/Template/Page erwartet. Dem Template wird das Argument foo mit Wert Lorem Ipsum dolor sit amet übergeben.

Auf diese Weise ergänzen sich TypoScript und Fluid gegenseitig. TypoScript war von Beginn an Bordmittel von TYPO3, und bis heute lassen sich bestimmte Aufgaben damit effektiver erledigen (etwa ist es von TypoScript aus einfacher möglich, auf die Datenbank zuzugreifen, ohne tief in die PHP-Programmierung einzusteigen). Dagegen eignet sich Fluid wesentlich besser, um HTML-Quellcode zu erzeugen. Im Doppel stellen die beiden eine leistungsfähige Kombination zur Ausgabeerzeugung dar.

Eigenes Website-Projekt

Bei der Umsetzung eines eigenen Website-Projekts müssen verschiedenste Dateien angelegt und bearbeitet werden, z.B.

• TypoScript-Templates
• Fluid-Templates
• Ggf. PHP-Programmierung
• CSS- und JavaScript-Ressourcen
• Sonstige Konfigurationsdateien
• etc.

Damit sich diese Komponenten nicht an willkürliche Stellen auf dem Webspace verteilen, hat sich die Praxis durchgesetzt, alle projektspezifische Daten in eine eigene, neu anzulegende TYPO3-Extension zu organisieren.

Anlage einer eigenen TYPO3-Extension

Alle Ressourcen, die zu einer TYPO3-Extension gehören, liegen in einem zugehörigen Extension-Verzeichnis unter public/typo3conf/ext. TYPO3 erwartet nur die Datei ext_emconf.php, um eine Extension installieren zu können: Sie enthält den Extension-Namen, die Version und ein paar weitere Details. Alle sonstigen Ressourcen sind optional, und die Datei- und Verzeichnisstruktur innerhalb einer Extension ist im Prinzip frei. Allerdings haben sich verschiedene * Best Practices* etabliert, und an bestimmte Datei- und Verzeichnisnamen sind Funktionalitäten gebunden (»Convention Over Configuration«).

Zur Anlage komplexerer Extensions, inbesondere solcher mit eigenen Datenbanktabellen, bietet sich der sogenannte »Extension Builder« an, der selbst ebenfalls eine TYPO3-Extension ist. Er kann mittels

xxxxxxxxxx
./composer require friendsoftypo3/extension-builder

installiert werden — allerdings steht zum Zeitpunkt dieser Dokumentation keine Version zur Verfügung, die mit dem aktuellen TYPO3 (10.x) kompatibel ist.

Für unsere Lernzwecke steht eine einfache Demo-Extension zur Verfügung. Die folgenden Schritte gehen davon aus, dass du diese Demo-Extension installiert hast — manche Pfadangaben beziehen sich auf den Namen der Demo-Extension. Die Installation und Aktivierung ist weiter unten beschrieben. Die Demo-Extension kann viele Anregungen liefern und zeigt übliche Konventionen bzgl. Datei- und Verzeichnisnamen. Solltest du dich für deine Prüfungsarbeit für TYPO3 entscheiden, solltest du deine Extension jedoch von Hand neu aufbauen und nicht direkt in der Demo-Extension arbeiten.

Backend-Layout

Backend-Layouts sind TypoScript-Definitionen für Seitenvorlagen, in denen die Anzahl und Anordnung von Bereichen vorgenommen wird, die mit Content-Elementen bestückt werden können. Du benötigst mindestens ein Backend-Layout, um deine Website mit Hilfe von Fluid-Templates im Frontend zu rendern. Jeder Seite, die du im TYPO3-Seitenbaum anlegst, ist implizit oder explizit ein Backend-Layout zugewiesen. Durch Anlage und Auswahl unterschiedlicher Backend-Layouts je Seite ist es z.B. möglich, für die Startseite ein anderes Layout zu verwenden, als für den Rest der Website.

Die einfachste Möglichkeit, ein erstes Backend-Layout zu definieren, nutzt das List-Modul:

Jedes Backend-Layout benötigt einen eindeutigen, möglichst sprechenden Titel (anhand dieses Titels wird später ein Layout für jede Seite gewählt) sowie eine Definition, wie viele mit Inhalt bestückbare Bereiche das Layout bieten soll. Jeder solcher Bereich hat einen Namen, eine Position in der Backend-Bearbeitungsansicht (nicht zwingend verbindlich für das Frontend-Rendering, macht aber Sinn) sowie einen Index. Als Index kannst du eine beliebige Ganzzahl verwenden — üblicherweise beginnt man bei 0 —, er muss nur innerhalb des Backend-Layouts eindeutig sein. TYPO3 stellt für die Konfiguration der bearbeitbaren Bereiche einen grafischen Editor zur Verfügung:

Sobald ein erstes Backend-Layout angelegt ist, kann es in den Eigenschaften einzelner Seiten ausgewählt werden (für die Seite selbst und / oder für Unterseiten). Unterseiten "erben" das Backend-Layout ihrer übergeordneten Seiten, wenn für sie nicht ausdrücklich ein anderes Layout gewählt wird.

Nach der Wahl eines Backend-Layouts für eine Seite sollte dir das Page-Modul für diese Seite die konfigurierten Inhaltsbereiche zum Bestücken anbieten:

Der letzte Baustein, der nun noch fehlt, um eine erste Ausgabe im Frontend zu erhalten, ist die Assoziation des Backend-Layouts mit einem dafür vorbereiteten Fluid-Template. Wir benötigen dazu die ID des soeben angelegten Backend-Layouts. Jeder Datensatz, der in TYPO3 angelegt wird, erhält eine eindeutige ID. Du erfährst die ID deines Backend-Layouts, indem du im Liste-Werkzeug mit der Maus über das Icon deines Backend-Layouts fährst und den sodann eingeblendeten Tooltip ausliest (aller Voraussicht nach wird die ID deines Backend-Layouts 1 sein, wenn es das erste angelegte Backend-Layout ist):

Merke dir die ID, du wirst sie weiter unten benötigen.

Fluid- & TypoScript-Templates

Um das Rendering für ein Backend-Layout zu bestimmen, kann es mit einem entsprechenden Fluid-Template assoziiert werden. Die Zuordnung geschieht über TypoScript, das im Haupt-TypoScript-Template der Projekt-Extension (Configuration/TypoScript/setup.txt) ergänzt werden muss.

xxxxxxxxxx
page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        layoutRootPaths {
            10 = EXT:muk_minimal/Resources/Private/Layouts
        }

        partialRootPaths {
            10 = EXT:muk_minimal/Resources/Private/Partials
        }

        templateRootPaths {
            10 = EXT:muk_minimal/Resources/Private/Templates/Page
        }

        templateName.stdWrap.cObject = CASE
        templateName.stdWrap.cObject {
            key.data = pagelayout

            default = TEXT
            default.value = Default

            1 = TEXT
            1.value = Post
        }
    }
}

In den letzten Zeilen wird die ID 1 mit dem Fluid-Template Post assoziiert. Setze hier ggf. deine abweichende ** Backend-Layout-ID** ein (siehe oben). Falls du mehrere Templates nutzt, sind die letzten beiden Zeilen für jedes Backend-Layout zu duplizieren und entsprechend abzuändern.

Das Rendering unseres Backend-Layouts wird fehlschlagen, wenn das zugehörige Fluid-Template nicht existiert, daher legen wir es im Verzeichnis Resources/Private/Templates/Page unserer TYPO3-Extension mit dem Namen Post.html an (Groß- / Kleinschreibung ist wichtig!):

xxxxxxxxxx

<html data-namespace-typo3-fluid="true">
    <!-- Nutze das Layout "Page/Standard" -->
    <f:layout name="Page/Standard"/>

    <!-- Hauptinhalt -->
    <f:section name="Main">
        <h1>Blogpost-Rendering</h1>
        <f:cObject typoscriptObjectPath="lib.content" data="{colPos: 0}"/>
    </f:section>
</html>

Der layout-ViewHelper gibt an, dass wir — um die eigentliche Template-Ausgabe herum — das Fluid-Layout mit dem Namen Page/Standard nutzen möchten. Wir müssen auch dieses im Verzeichnis Resources/Private/Layouts/Page anlegen:

xxxxxxxxxx

<html data-namespace-typo3-fluid="true">
    <header>
        <!-- Inhalt im Kopfbereich, z.B. Menü -->
    </header>

    <main>
        <!-- Hauptinhalt -> rendern übers Template -->
        <f:render section="Main"/>
    </main>

    <footer>
        <!-- Inhalt im Fußbereich, z.B. Doormat-Navigation -->
    </footer>
</html>

Das Layout sorgt dafür, dass die Grundstruktur der Seite, bestehend aus <header>-, <main>- und <footer>-Element, um den eigentlichen Seitenhinhalt "herumgewickelt" wird. Das Rendering des Seiteninhalts wird wiederum an das Post -Template übergeben (<f:render section="Main"/>).

Im TYPO3-Backend legen wir mit redaktionellen Mitteln Inhaltselemente auf die aktuelle Seite, z.B. Textbausteine oder Bilder. Um diese vom Fluid-Template aus zur Anzeige zu bringen, müssen wir sie aus der Datenbank abrufen und in HTML-Code übertragen. Dabei handelt es sich um einen Vorgang, den wir besser an TypoScript delegieren — gerade beim Datenbankzugriff verfügt Fluid nicht über die notwendigen Mittel. Wir referenzieren deshalb mit dem cObject-Viewhelper ein TypoScript-Objekt, dass wir außerhalb des Fluid-Templates vorbereiten:

xxxxxxxxxx
lib.content = CONTENT
lib.content {
    table = tt_content
    select {
        orderBy = sorting
        where.cObject = COA
        where.cObject {
            10 = TEXT
            10 {
                field = colPos
                intval = 1
                ifEmpty = 0
                noTrimWrap = | AND colPos=||
            }
        }
    }
}

In der section mit dem Namen Main im Fluid-Template binden wir das TypoScript-Objekt folgendermaßen ein:

xxxxxxxxxx

<f:cObject typoscriptObjectPath="lib.content" data="{colPos: 0}"/>

Die Zahl, die wir dem colPos-Argument hier übergeben, entspricht dem Index des bestückbaren Bereichs des Backend-Layouts (siehe oben), dessen Inhaltselemente wir an dieser Stelle ausgeben möchten. Haben wir mehrere bestückbare Bereiche definiert und mit Inhalten versehen, so müssen wir diese einzeln gezielt einbinden.

Demo-Extension

Installation & Aktivierung

Zu Demo-Zwecken steht die TYPO3-Extension muk_minimal zur Verfügung, die über Composer wie folgt installiert werden kann. Zur Installation musst du eine SSH-Verbindung mit deinem Server herstellen, dort ins TYPO3-Wurzelverzeichnis wechseln (cd public_html/typo3) und folgendes Kommando ausführen:

xxxxxxxxxx
./composer require jkphl/muk-minimal:@dev

Anschließend musst du die Extension im TYPO3-Backend im Extension-Manager aktivieren.

Solltest du die Extension bereits installiert haben und nur ein Update einspielen wollen, so erreichst du das mit ( Anpassungen im TYPO3 sind dann nicht nötig):

xxxxxxxxxx
./composer update jkphl/muk-minimal

Bitte beachte, dass beim Update alle Änderungen verloren gehen, die du ggf. zuvor im Extension-Verzeichnis vorgenommen hast. Sichere dir deine Anpassungen im Bedarfsfall vorher.

Wie üblich werden die Extension-Inhalte an einem bestimmten Ort innerhalb deiner TYPO3-Installation gespeichert:

xxxxxxxxxx
public/typo3conf/ext/muk_minimal

Studiere die Inhalte dieses Verzeichnisses und prüfe, welche der oben besprochenen Bausteine du dort finden kannst.

Einbindung

Die Extension enthält alle in obigen Schritten wiedergegebenen TypoScript- und Fluid-Ressourcen. Um das Frontend-Rendering deiner Website an die Extension zu übergeben, musst du

• das ggf. bereits vorhandene Haupt-TypoScript-Template deiner Seite leeren oder vollständig auskommentieren ( insbesondere die Definition eines PAGE-Objekts, sofern vorhanden)
• und stattdessen das TypoScript-Template der Extension ins Haupt-TypoScript-Template einbinden.

Dazu öffnest du zunächst das TypoScript-Haupt-Template mit dem Template-Werkzeug:

Stelle als erstes sicher, dass das Feld »Setup« im Reiter »General« leer ist:

Wenn du möchtest, kannst du hier aber folgenden Debugging-Code unterbringen. Damit werden TYPO3-Fehlermeldungen im Frontend aussagekräftiger, was insbesondere während der Entwicklungsphase hilfreich sein kann. Ansonsten ist TYPO3 aus Sicherheitsgründen recht schweigsam und verrät die Ursache von Fehlern eher nicht.

xxxxxxxxxx
config.contentObjectExceptionHandler = 0

Schließlich musst du noch das statische Extension-TypoScript der muk_minimal-Extension in dein Haupt-Template einbinden. Das geschieht im Reiter »Includes« und dort im Feld »Include static (from extension)«. Durch Klick auf das Extension-TypoScript im rechten Bereich verschiebst du es zu den eingebundenen TypoScripts linkerhand:

Backend-Layout anlegen

Der einzige Schritt, den du ansonsten von Hand durchführen musst, ist die Anlage eines oder mehrerer Backend-Layouts (siehe oben). Bitte achte darauf, dass im Haupt-TypoScript-Template der Extension die korrekten Backend-Layout-IDs hinterlegt sind — insbesondere, wenn du mehrere Backend-Layouts nutzen möchtest.

Im statischen TypoScript-Template der Extension (Configuration/setup.typoscript) wird außerdem ein einzelnes, nahezu, leeres CSS eingebunden (Resources/Public/Css/Custom.css). Zu Testzwecken kannst du dieses mit eigenen CSS-Regeln ergänzen.

Aufgabe: Im Verzeichnis Resources/Private/Example findest du einen sehr einfachen HTML-Prototypen, den es in TYPO3 zu übertragen gilt. Weitere Anweisungen findest du in der dortigen index.html.