implementierungsmöglichkeiten von themes in eine typo3...
TRANSCRIPT
Implementierungsmöglichkeiten von
Themes in eine TYPO3-Installation
von Sven Dieter Walther
Bachelorarbeit - Interaktive Medien
Wintersemester 16|17
Hochschule Augsburg
Bachelorarbeit – Interaktive Medien
Implementierungsmöglichkeiten von
Themes in eine TYPO3-Installation
von Sven Dieter Walther
Hochschule Augsburg
Wintersemester 16/17
Betreuer: Prof. Dr. Michael Kipp
Zweitbetreuer: Prof. Dr. Daniel Rothaugg
Abstract
Das Content-Management-System TYPO3 gilt auf Grund seiner hohen Komplexität und der eigenen
Skriptsprache als eine sehr umfangreiche Webapplikation. Im Gegensatz dazu bieten WordPress und
Joomla! ihren Nutzern durch einfache Bedienung und dem Einsatz von Themes schnelle Erfolge in der
Erstellung und Individualisierung
einer eigenen Homepage.
Damit Themes in TYPO3 implementiert werden können, wird für das CMS ein Prototyp mit dem Titel
Theme Manager entwickelt. Mit dieser Extension können Themes im TYPO3-System verwaltet,
bearbeitet, hinzugefügt und gelöscht werden. Über einen eigenen Bereich kann auf den Theme
Manager und den darin liegenden Themes zugegriffen werden. Durch das Aktivieren und der
individuellen Anpassung des Themes kann der Nutzer seinen Webauftritt selbstständig gestalten.
Zusätzlich zur Entwicklung des Theme Managers wurde für TYPO3 eine Theme-Struktur konzipiert.
Die Entwicklung des Theme Managers wird weiterverfolgt. So ist unter anderem geplant innerhalb der
Extension eine „Theme-Erstellen“-Funktion zu implementieren. Zudem sollen die Themes unabhängig
von anderen Extensions eigene Inhaltselemente zur Verfügung stellen.
Inhaltsverzeichnis
1 Einleitung ............................................................................................................................. 6
1.1 SICOR KDL GmbH ........................................................................................................... 6
1.2 Problemstellung ............................................................................................................ 8
1.3 Zieldefinition ................................................................................................................. 8
1.4 Abgrenzung ................................................................................................................... 9
1.5 Aufbau der Thesis .......................................................................................................... 9
2 Technische Ansätze und Vorbilder ....................................................................................... 10
2.1 WordPress ................................................................................................................... 10
2.1.1 Überblick WordPress ..................................................................................................... 11
2.1.2 Themes in WordPress .................................................................................................... 12
2.1.3 Technischer Aufbau von Themes .................................................................................. 15
2.1.4 Nachteile von WordPress .............................................................................................. 18
2.2 Joomla! ....................................................................................................................... 19
2.2.1 Überblick über das Backend .......................................................................................... 20
2.2.2 Struktur und Aufbau von Templates ............................................................................. 22
2.2.3 Nachteile von Joomla! ................................................................................................... 23
2.3 TYPO3 ......................................................................................................................... 24
2.4 Überblick TYPO3 .......................................................................................................... 25
2.4.1 Ansätze Theme-Implementierung in TYPO3 ................................................................. 26
2.5 WordPress und Joomla! im Vergleich mit TYPO3 .......................................................... 28
2.5.1 WordPress und TYPO3 ................................................................................................... 28
2.5.2 Joomla! und TYPO3 ....................................................................................................... 29
2.6 Beurteilung der Lösungsansätze ................................................................................... 29
2.6.1 Ansätze aus WordPress ................................................................................................. 30
2.6.2 Ansätze aus Joomla! ...................................................................................................... 30
2.6.3 Ansätze aus TYPO3 ........................................................................................................ 30
3 Konzeption des Theme Managers ........................................................................................ 32
3.1 Planung des Theme Managers ...................................................................................... 32
3.1.1 Use-Case-Diagramm ...................................................................................................... 33
3.1.2 Benutzeroberfläche Theme Manager ........................................................................... 34
3.1.3 Benutzte Technologien .................................................................................................. 35
3.1.4 Klassenaufbau des Theme Managers ............................................................................ 36
3.2 Dokumentation des Theme Managers .......................................................................... 37
3.2.1 Technische Umsetzung .................................................................................................. 37
3.3 Repräsentation des Themes ......................................................................................... 44
3.3.1 Aufbau und Dateien eines Themes ............................................................................... 45
3.3.2 Template-Aufbau eines Themes .................................................................................... 46
3.4 Systemvorrausetzung .................................................................................................. 47
4 Design eines Themes ........................................................................................................... 48
4.1.1 Das OnePage-Theme ..................................................................................................... 48
5 Benutzung des Theme Managers ......................................................................................... 51
5.1 Installation des Theme Managers ................................................................................. 51
5.2 Theme-Manager .......................................................................................................... 51
5.3 Backend Layout ........................................................................................................... 52
5.4 Gridelements ............................................................................................................... 53
5.5 Typischer Seiteninhalt ................................................................................................. 54
6 Diskussion .......................................................................................................................... 55
7 Konklusion .......................................................................................................................... 56
7.1 Zusammenfassung ....................................................................................................... 56
7.2 Ausblick....................................................................................................................... 57
8 Bibliographie ...................................................................................................................... 58
Seite 6
1 Einleitung
Das Content-Management-System TYPO3 ist wegen seiner Komplexität und der hohen Anforderungen
nicht geeignet für Nutzer ohne Programmierkenntnisse. Während andere CM-Systeme, wie
beispielweise WordPress und Joomla!, auf den Einsatz von Themes und deren einfachen individuellen
Anpassungsmöglichkeiten setzen, können TYPO3-Projekte nur von qualifizierten Fachleuten realisiert
werden, die Kenntnisse im Umgang mit Extbase und Fluid und der Skriptsprache TypoScript besitzen.
In dieser Arbeit werden die Implementierungsmöglichkeiten von Themes in eine
TYPO3-Installation untersucht. Dabei entstand die Idee, eine Extension mit dem Titel Theme Manager
für TYPO3-Projekte zu entwickeln. Mit Hilfe des Theme Managers sollen Themes in einem TYPO3-
System verwaltet, bearbeitet, hinzugefügt oder gelöscht werden.
Die Themes bieten neben einem kompletten Layout alle nötigen TypoScript-Dateien. Durch das
Aktivieren und der individuellen Anpassung von Themes im Theme Manager, soll so das CMS auch für
Benutzer ohne Kenntnisse in TYPO3 nutzbar gemacht werden.
1.1 SICOR KDL GmbH
Die SICOR KDL GmbH wurde 1998 in Mindelheim gegründet. Damals unter dem Namen SICOR GmbH
schlossen sich die vier Gesellschafter (Landkreis Unterallgäu, Genossenschaftsbank Unterallgäu,
Sparkasse Memmingen und LEW Telnet) zusammen, um für die Mittelständigen Unternehmen im
Landkreis Unterallgäu einen kompetenten Ansprechpartner und Anbieter für internetrelevante Fragen
zu bieten. Der Firmenname SICOR ist daher auch eine Abkürzung für „Schwäbische Internet
Cooperation“.
Im Jahr 2002 entschloss die Geschäftsführung sich in der Webentwicklung auf das
Content-Management-System TYPO3 zu spezialisieren. Im Jahr 2004 übernahm Michael Auger die
Geschäftsführung der Firma SICOR GmbH.
Seit der Übernahme der SICOR GmbH im Jahr 2009 durch die KDL Süd GmbH, ist diese nun unter dem
Namen SICOR KDL GmbH mit Sitz in Mindelheim bekannt. Neben Michael Auger wurde Günter Trunzer
ebenfalls Geschäftsführer des IT- und Internet Systemhaus.
Seite 7
In diesen drei Bereichen bietet die Firma folgende Angebote an:
Webentwicklung:
- Webprojekte basierend auf das CMS TYPO3
- Webdesign und Grafik
- Online-Shops und eCommerce-Projekte
- Individuelle Lösungen von Webanwendungen
- Suchmaschinenmarketing
- Mobile Webanwendung und App-Entwicklung
Systemtechnik:
- Server- und Storagelösungen, sowie Visualisierung
- IT-Sicherheit, Datenschutz und Datensicherheit
- Netzwerktechnik und Systemadministration
Rechenzentrum:
- Webhosting, vServer und Root-Server
- Cloudlösungen
- Domainverwaltung, SSL-Zertifizierung, DNS-Management
Abbildung 1-1: Die Geschäftsführer v.l.n.r.: Michael Auger und Günter Trunzer
Seite 8
1.2 Problemstellung
Auf Grund der Untersuchung und Entwicklung von Implementierungsmöglichkeiten von Themes in
eine TYPO3-Installation werden unterschiedliche Problemstellungen sichtbar.
Wegen der Komplexität des Systems werden für die Realisierung von Webauftritten auf Basis des CMS
TYPO3 spezialisierte Agenturen benötigt. Das durchschnittliche Budget eines TYPO3-Projektes liegt bei
5.360 Euro, während Webauftritte auf Basis von WordPress und Joomla! nur die Hälfte kosten1.
Bereits existierende Theme-Lösungen können nur über zusätzliche Installationen von Extensions in
dem CMS benutzt werden. Die Installation der notwendigen Extension muss nach einer bestimmten
Reihenfolge vorgenommen werden. Dieses Verfahren ist für
TYPO3-Anfänger sehr komplex.
1.3 Zieldefinition
Ziel ist es, ein Prototyp des Theme Managers für TYPO3-Installationen zu erstellen. In dem Theme
Manager werden die installierten Themes verwaltet. Speziell dazu werden für
TYPO3 eigene Themes erstellt. Diese Themes können, wie auch in WordPress oder Joomla! bekannt,
über den Theme Manager individualisiert werden und ohne Programmierkenntnisse eine Website auf
TYPO3-Basis schaffen.
Mit Hilfe des Theme Managers soll die Attraktivität des CMS gesteigert werden. Potentielle
Entscheider für TYPO3 benötigen für die Erstellung eines eigenen Webauftritts wenige Vorkenntnisse.
Zum anderen sollen komplexe Vorarbeiten, wie die Konfiguration des Systems mittels TypoScript, aus
Sicht von Entwicklern gemindert und das Arbeiten mit dem Content-Management-System kosten- und
zeitsparender gestaltet werden.
1 Webkalkulator: http://www.webkalkulator.com/cmsvergleich (Aufgerufen am 29.01.2017)
Seite 9
1.4 Abgrenzung
In dieser Arbeit wird der Theme-Manager als Prototyp zur Verwaltung und Individualisierung von
Themes präsentiert. Die wegen im Rahmen zeitlich vorgegeben Bearbeitungszeit der Bachelorarbeit
aufgelistete Punkte werden nur kurz beschrieben:
- Das Thema Extension-Entwicklung in TYPO3 wird wegen seiner Komplexität nur anhand der
verwendeten Funktionen und Techniken im Theme-Manager erläutert
- CM-Systeme WordPress, Joomla! und TYPO3 werden kurz beschrieben, da der Umfang der
Thesis sonst überschritten wird und die Gewichtung zum eigentlichen Thema nicht
entsprechen würde
- Die Aktualität der verwendeten Funktionen und Techniken, sowie fachlichen Erläuterungen
besteht nur zum Zeitpunkt der Abgabe der Bachelorarbeit
1.5 Aufbau der Thesis
In Kapitel 2 wird ein Überblick über die Content-Management-Systeme WordPress, Joomla! und
TYPO3 gegeben. Hier werden Lösungsansätze der Theme-Verwaltung von WordPress und Joomla!
näher erläutert. Danach wird das CMS TYPO3 näher erklärt und technische Ansätze aufgezeigt, die im
Theme Manager und in den Themes zum Einsatz kommen.
Das Kapitel 3 befasst sich mit der Konzeption des Theme Managers als auch der Repräsentation und
Aufbau des Themes. Die konkreten Anforderungen an der Extension werden erläutert. Im letzten
Punkt werden Vorrausetzungen genannt, welche der
Theme Manager benötigt sowie anschließend in Kapitel 4 die gestalteten Themes vorgestellt und
beschrieben.
Im danach folgenden Kapitel gibt es eine genaue Beschreibung zur Benutzung des Theme Managers.
Anschließend werden pro und contra des Prototypens erläutert und im letzten Abschnitt eine
Zusammenfassung mit Ausblick auf die Weiterentwicklung der Extension gegeben.
Seite 10
2 Technische Ansätze und Vorbilder
WordPress und Joomla! sind für ihre einfache Implementierung von Themes bekannt. Sie werden im
Folgenden genauer beschrieben und deren Ansätze untersucht. Die daraus resultierenden
Erkenntnisse werden anschließend mit den gestellten Anforderungen des entwickelten Theme
Managers verglichen. Neben WordPress und Joomla!, werden ebenfalls technische Ansätze des
Content-Management-Systems TYPO3 erklärt.
2.1 WordPress
WordPress führt seit mehreren Jahren die Spitze aller Content-Management-Systeme weltweit an. Im
Jahr 2003 wurde WordPress vom damals 19-jährigen Matt Mullenweg programmiert2. Eigentlich
wurde das System entwickelt, um Bloggern eine Möglichkeit zu bieten, ihre Beiträge im Internet zu
veröffentlichen.
Schnell wurde das CMS weiterentwickelt um auch andere Zielgruppen zu erreichen. Bereits am Anfang
konzentrierten sich die Entwickler darauf das System einfach zu halten. Innerhalb kürzester Zeit
begeisterten sich viele Menschen für das System. WordPress bietet durch seine Einfachheit den
Nutzern schnelle Erfolge in der Erstellung eigener Websiten. Um WordPress entwickelte sich eine
große Gemeinschaft an Begeisterten. Zusammen entwickelte die Community bis zum heutigen Tag
rund 48.500 Plugins3 und mindestens über 12.000 Themes4.
2 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „1. Einleitung“. Verlag: Franzis, 2015, 3. Auflage, Seite 25 3 WordPress: https://de.wordpress.org/plugins/ (Aufgerufen am: 16.01.2017) 4 Genaue Anzahl wegen unterschiedlich Plattformen von Theme-Anbieter nicht möglich. Zahl wurde ermittelt an den Seiten: WordPress: https://de.wordpress.org/themes/browse/new/ (Aufgerufen am: 16.01.2017) und Themeforest: https://themeforest.net/category/wordpress (Aufgerufen am: 16.01.2017)
Seite 11
2.1.1 Überblick WordPress
Das System ist selbst für nicht technikaffine Menschen sehr einfach zu installieren. Benötigt wird für
die Lauffähigkeit des Content-Management-System ein Webspace mit folgenden Vorrausetzungen5:
- PHP-Version 5.2.4 oder höher
- MySQL-Version 5.0 oder höher
- Apache mod_rewrite Module
Die aktuelle Version von WordPress ist die Version 4.7.1 vom 11. Januar 2017, zum Zeitpunkt dieser
Bachelorarbeit. Die Installation des Systems ist nach wenigen Schritten abgeschlossen. Nach der
erfolgreichen Installation öffnet sich der Administrationsbereich von WordPress.
Der Aufbau der Administrationsoberfläche:
Abbildung 2.1: Überblick über die Administrationsoberfläche von WordPress
2.1.1.1 Adminbar
Die Adminbar dient dem Administrator als Schnellzugriffoption6. Über den Projektnamen kann
zwischen Front- und Backend der Seite gewechselt werden. Im Frontend steht dem Benutzer des CMS
noch die Option zu, dass Theme anzupassen. Die Sprechblase zeigt an, ob Kommentare auf die
5 WordPress Codex: https://codex.wordpress.org/WordPress_Versions (Aufgerufen am: 16.01.2017) 6 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel. „1.5 Über Begrifflichkeiten und den Fachwortschatz“. Verlag: Franzis, 2015, 3. Auflage, Seite 31
Seite 12
Freischaltung seitens des Admin oder Redakteurs warten. Zudem können über das Plus-Symbol neue
Beiträge, Seiten oder Dateien angelegt werden. Ganz rechts kann der Administrator direkt auf sein
Profil zu greifen oder sich abmelden.
2.1.1.2 Menübar
Neben der Adminbar, befindet sich links die Menübar. Die Bar steht dem Administrator als komplette
Übersicht über alle möglichen Menüpunkte zur Verfügung. Über die Menüpunkte können folgende
administrative Aufgaben durchgeführt werden:
- Beiträge und Seiten erstellen und bearbeiten
- Bilder und Videos in die Mediathek einfügen
- allgemeine Einstellungen vornehmen
- Plugins installieren und verwalten
- Design des Frontend individuell anpassen
2.1.1.3 Eingabebereich:
Der letzte Abschnitt der Administrationsoberfläche ist schnell erklärt. Es dient dem Administrator als
Bearbeitungs- und Eingabefläche. Hier finden die eigentlichen Eingaben statt, die von den oben
angesprochenen Menüpunkten erfordert werden.
2.1.2 Themes in WordPress
Für den Administrator bietet der Menüpunkt „Design“ eine Reihe von Funktionen. Darin beinhaltet
dieses Menü unter anderem eine zentrale Verwaltung und die individuelle Anpassung des
ausgewählten Themes.
2.1.2.1 Themes verwalten
WordPress bietet unter „Design“ den Untermenüpunkt „Themes“. Das ist die zentrale
Verwaltungsstelle. Bereits bei der reinen Installation des CMS WordPress, steht dem Administrator
eine kleine Auswahl an bereits installierten Themes zur Verfügung.
Seite 13
Das aktivierte Theme wird für die bessere Übersicht bei WordPress an erste Stelle gesetzt. Zudem
besteht für den Administrator die Möglichkeit, vor der Aktivierung eines Themes, sich über diesen
einen Überblick zu verschaffen. Zum Beispiel über die aktuelle Version des Themes, von wem es
entwickelt wurde und dazu einen Beschreibungstext. Für die „inaktiven“ Themes besteht die
Möglichkeit sich über den Live-Vorschau-Button einen direkten Blick über die Funktionen und
Gestaltungen zu verschaffen.
Abbildung 2-2: Liste an installierten Themes in WordPress
Über „Neues Theme hinzufügen“-Feld kann auf das Theme-Verzeichnis von WordPress zugegriffen
werden. Hier steht für den Administrator eine Vielzahl von bereits vorgefertigten Muster-Websiten zur
Verfügung. Wird nach bestimmten Kriterien gesucht, kann über die Filter-Funktion nach dem
gewünschten Theme gefiltert werden. Auch hier besteht die Möglichkeit, vor dem Herunterladen aus
dem Verzeichnis auf seine WordPress-Installation sich Informationen über das jeweilige Theme zu
einzuholen und in der Live-Vorschau zu betrachten. 7
7 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „14.5 Themes installieren“. Verlag: Franzis, 2015, 3. Auflage, Seite 335f
Seite 14
Neben dem Theme-Verzeichnis von WordPress bieten auch andere Anbieter eine reichliche Auswahl
an fertigen Themes8. Durch die große Community um WordPress, haben sich Agenturen darauf
spezialisiert, eigens für das CMS Muster-Websiten zu entwickeln und diese entweder kostenlos oder
kostenpflichtig anzubieten. Um Themes in seine
WordPress-Umgebung hochzuladen, bietet die Theme-Verwaltung die Option
„Theme hochladen“. Dazu wird eine Zip-Datei der Muster-Website ausgewählt. Im Hintergrund
entpackt WordPress diese und fügt das Theme hinzu9.
2.1.2.2 Themes anpassen
Mit der neuen Version von WordPress (Version 4.7.1), wurde der Menüpunkt „Anpassen“ umbenannt
zu „Customizer“. Hier stehen dem Administrator einer WordPress-Seite verschiedenste Einstellungs-
und Gestaltungsmöglichkeiten zur Verfügung, die das jeweilige Theme bietet. Die Theme-
Anpassungen sind für den Nutzer leicht verständlich und ohne Programmierkenntnisse umsetzbar.
Die individuelle Anpassungsmöglichkeit eines Themes wird dadurch bestimmt, wie flexibel das Layout
und die Struktur aufgebaut ist10. Neben dem Ändern von Farben, Abständen, Schriftgrößen und -arten
sollen dem Administrator möglichst viele Freiheiten in der Veränderung des Layouts und der Struktur
geboten werden.
Betrachtet man die Anpassungsmöglichkeiten von kostenlosen und kostenpflichten Themes, so bieten
kostenpflichtige Muster-Websiten dem Administrator mehr Freiheiten bei der Umstrukturierung und
Anpassung. Kostenlose Themes dagegen sind vom Umfang der Einstellungsmöglichkeiten von
Gestaltung und Layout eher eingeschränkt.
8 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „14.4.1 Bewährte Quellen für kostenpflichtige Premium-Themes“. Verlag: Franzis, 2015, 3. Auflage, Seite 332 9 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „14.5.2 Themes hochladen und installieren“. Verlag: Franzis, 2015, 3. Auflage, Seite 337f 10 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „14.3.3 Flexibles Layout und Struktur“. Verlag: Franzis, 2015, 3. Auflage, Seite 326f
Seite 15
2.1.3 Technischer Aufbau von Themes
In diesem Abschnitt wird der technische Aufbau und die Struktur eines Themes näher beleuchtet und
ein Einblick in die wesentlichen Funktionen der einzelnen Templates gegeben.
2.1.3.1 Strukturierung eines Themes
Installierte Themes werden in WordPress unter den Ordner /wp-contents/themes gespeichert. Ein
jedes Theme besitzt unter /wp-contents/themes einen eigenen Ordner.
Bei einem WordPress-Theme sind HTML und PHP-Code innerhalb eines Templates definiert. PHP dient
in diesem Fall als Vermittler zwischen der Datenbank und dem Template. Mit PHP werden die zu
verarbeitenden Daten aus der Datenbank genommen und direkt im Template ausgewertet.
Damit das CMS WordPress ein Theme auch als solches erkennt ist es notwendig, innerhalb des Theme-
Ordners über eine index.php und eine style.css zu verfügen. Zu beachten ist, dass die CSS-Datei auch
wirklich die Bezeichnung style.css trägt.
2.1.3.2 Grundlegende Templates eines Themes
Im Nachfolgenden werden die grundlegenden Templates eines Themes in ihrer Funktion erläutert:
index.php
Wie bereits erwähnt, bildet die index.php die zentrale Datei. Die index.php bindet mittels einer PHP-
Funktion weitere Templates ein. Existiert allerdings eine home.php, wird WordPress diese Datei
benutzen. Dennoch gilt, dass die index.php den „(…) kleinsten gemeinsamen Teiler besitzt (…)“11.
header.php
Die header.php beinhaltet den <head>-Bereich einer Website. Sprich hier werden die Metadaten und
Verknüpfungen mit CSS- und JavaScript-Dateien hergestellt. Zudem wird in der header.php das
öffnende <body>-Tag gesetzt. Möchte man ein Gestaltungselement auf allen Seiten präsentieren wie
ein Bildband mit Sliderfunktion, kann diese hier implementiert werden. Die header.php kann dann als
11 Vgl.: Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „17.4 Die wichtigsten Templates im Überblick“. Verlag: Franzis, 2015, 3. Auflage, Seite 382
Seite 16
sogenannte Container-Datei verwendet werden. Sie stellt HTML- und PHP-Code den anderen
Templates zur Verfügung12.
footer.php
Im Template footer.php wird der Abschluss der Website definiert. Zusätzlich kann hier die Einbindung
von JavaScript-Dateien erfolgen. Das zuvor im header.php geöffnete
<body>-Tag wird geschlossen. Auch für die footer.php gilt, dass das Template als
Container-Datei bezeichnet werden kann, da hier ebenfalls HTML- und PHP-Code für die weiteren
Seiten bereitgestellt wird.
page.php
Wird eine statische Seite aufgerufen, gibt das page.php-Template die Informationen im Frontend aus.
Das gilt für alle im WordPress angelegten Seiten.
single.php
Für die Ausgabe eines dynamischen Inhalts, also eines Beitrags, wird die single.php benötigt. Hier gilt,
dass das Template für alle Beiträge verwendet wird. Im Frontend kann damit genau gesteuert werden,
wie der Beitrag dargestellt und welche sonstigen Details (Datum, Autor, Anzahl verfasster Beiträge des
Autors usw.) angezeigt werden soll.
functions.php
Das functions.php-Template ist eine Bereitstellung von „Theme-spezifischen Funktionen“13. Diese
Funktionen bringen dem Theme spezielle Erweiterungen, die in dem Template definiert werden. Fast
jedes Theme besitzt die functions.php, obwohl auch diese Datei für das Funktionieren eines Themes
nicht essentiell wichtig ist. Unter Theme-spezifische Funktionen sind vor allem Theme-eigene Widgets
gemeint.
12 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „17.4 Die wichtigsten Templates im Überblick“. Verlag: Franzis, 2015, 3. Auflage, Seite 383ff 13 Vgl.: Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „17.4 Die wichtigsten Templates im Überblick“. Verlag: Franzis, 2015, 3. Auflage, Seite 384
Seite 17
2.1.3.3 Weitere verwendete Templates in Themes
Templates Funktion
category.php zeigt alle Beiträge einer bestimmten Kategorie
tag.php zeigt alle Beiträge eines bestimmten Tags
archive.php zeigt alle Beiträge aus einem bestimmten Zeitpunkt
author.php zeigt alle Beiträge eines bestimmten Autors
search.php verarbeitet die Ausgabe der Suchergebnisseite
404.php wird angezeigt, wenn eine Seite oder ein Beitrag nicht gefunden
wurde
comments.php steuert die Ausgabe von Kommentaren und enthält das Formular
und wird von single.php verwendet
Tabelle 2-1: Weitere Template-Dateien in einem Theme
2.1.3.4 Spezielle Templates in Themes
Für jeden Anwendungsfall bietet ein Theme das passende Template. Wird aber gewünscht, dass sich
eine Seite visuell von anderen Seiten unterscheidet, muss für diese Seite ein eigenes page.php-
Template erstellt werden.
Dafür wird die sogenannte Template-Kaskade verwendet. Hierzu wird die page.php dupliziert und der
Dateiname der Kopie entweder mit dem Titel oder mit der ID der betreffenden Seite erweitert.
Die Template-Kaskade folgt eine bestimmte Reihenfolge beim Lesen der vorhandenen Templates
eines Themes14:
Abbildung 2-3: Template-Kaskade
14 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „17.5 Die Template-Kaskade in WordPress“. Verlag: Franzis, 2015, 3. Auflage, Seite 386ff
Seite 18
2.1.4 Nachteile von WordPress
Trotz der Einfachheit des Systems, der individuellen Anpassungsmöglichkeiten von Themes und die
Möglichkeit der Erweiterung des Systems mittels Plugins, birgt das System Nachteile.
2.1.4.1 Sicherheit
Gerade die Einfachheit und die starke weltweite Nutzung des Systems, macht es auch angreifbar. Es
wird mehrmals darauf hingewiesen, Benutzernamen wie admin oder Administrator tunlichst zu
vermeiden. Auch bei der Wahl des Passwortes wird empfohlen, ein möglichst langes, mit vielen
Sonderzeichen, Zahlen,
Groß- und Kleinbuchstaben zu verwenden und dieses regelmäßig zu ändern.15
Das Problem Sicherheit zeigt sich schon in der mindesten Anforderung der PHP-Version. Die Version
5.2.4 wurde damals am 30. August 2007 released16. Für diese Version gibt es keine Upgrades mehr.
2.1.4.2 Quantität ist nicht gleich Qualität
So auch mit der riesigen Auswahl an Plugins und Themes. Dabei verliert man schnell den Überblick
über die Qualität. Der Laie ist vor allem darauf fixiert, das ein Theme toll ausschaut und ein Plugin viele
kleine interaktive Spielereien und Funktionen bietet. Auch hier gilt, je schlechter die Qualität des
Codes, desto unsicherer wird das System. Zudem wird eine WordPress-Website mit jedem installierten
Plugin in ihrer Geschwindigkeit langsamer.
2.1.4.3 Keine Template-Engine
Der Quelle-Code von Templates eines Themes ist reiner PHP-Code mit HTML5 vermischt. Sich allein in
diesem Code zurecht zu finden bedarf an viel Geduld. Gerade wenn man ein WordPress-Projekt
realisiert, wird aus Übersichtlichkeit schnell das Gegenteil. Durch die fehlende Trennung von PHP und
HTML wird das WordPress-System unsicher.
15 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „5.1 Über Benutzernamen und starke Kennwörter“. Verlag: Franzis, 2015, 3. Auflage, Seite 133f 16 PHP, http://php.net/releases/ (Aufgerufen am: 21.01.2017)
Seite 19
2.1.4.4 Mehrsprachigkeit
WordPress bietet seinen Nutzern keine anständige Lösung eine Website mehrsprachig zu gestalten.
Eine Möglichkeit wäre, die Multisite-Funktion von WordPress zu aktivieren. Das heißt, man hätte unter
einer WordPress-Installation mehrere Websites am Laufen. Allerdings benötigt man hierfür einige
Plugins.
2.2 Joomla!
Nachdem das CMS WordPress genauer beschrieben wurde, wird nun ein kurzer Einblick in Joomla!
gegeben.
Die offizielle Gründung von Joomla! war im Jahr 2005. Doch die eigentliche Entstehung beginnt bereits
im Jahr 2000, als eine Softwareagentur das CMS Mambo entwickelte. Auf Grund von Unstimmigkeiten
zwischen den Entwicklern und der Geschäftsführung, verließen einige der Entwickler diese Agentur
und schlossen sich zusammen. Das war die Geburtsstunde des CMS Joomla!.17
Bevor es in diesem Kapitel weitergeht noch eine Information. In Joomla! wird der Begriff Templates für
Themes verwendet. Diese Definition ist von Joomla! unpassend gewählt. Ein Theme bringt bei seiner
Installation nicht nur Layout und Gestaltung mit, sondern auch gewisse Funktionen und Erweiterungen
des CMS. Das Template ist nur ein Bestandteil des Themes und bildet das Grundgerüst für die Ausgabe
im Frontend.18
17 Richard Eisenmenger: „Joomla!3 -Das umfassende Handbuch“. Kapitel: „1.3 Joomla!“. Verlag: Rheinwerk Computing, 2016, 1. Auflage, Seite 42f 18 Gino Cremer: „Das WordPress Praxishandbuch“. Kapitel: „17.4 Die wichtigsten Templates im Überblick“. Verlag: Franzis, 2015, 3. Auflage, Seite 382
Seite 20
2.2.1 Überblick über das Backend
Beim erfolgreichen Anmelden in das Backend von Joomla!, findet sich der Administrator immer zuerst
im Kontrollzentrum wieder.
Das Kontrollzentrum gibt, wie das Dashboard von WordPress, auf den ersten Blick alle notwendigen
Informationen in Bezug auf systembedingte Problematiken, wie kritische Sicherheitslücken oder
Hackerangriffe auf das System und allgemeine Informationen, wie das Einstiegstutorial oder Hinweise
zu Updates des Systems, der Templates oder Plugins.
Abbildung 2-4: Backendansicht von Joomla!
In der Seitenliste finden sich die einzelnen Konfigurationselemente des Systems.
Hier eine Übersicht über die wesentlichen Elemente:
Komponenten Funktion
Beiträge Ebenfalls wie in WordPress, bildet in Joomla! die Beiträge den
größten Teil des Systems, wenn es um Inhalte geht.
Kategorien Jedem Beitrag kann eine zuvor angelegte Kategorie zugewiesen
werden, die unter dem Konfigurationselement „Kategorie“
verwaltet wird.
Seite 21
Medien In Medien werden alle Bilder, Logos, Dateien und Filmmaterialien
abgelegt. Anders wie in WordPress bietet Joomla! seinen
Administratoren, ihre Medien mittels eigener Ordnerstruktur zu
sortieren.
Module Mit diesem Element kann eine Liste aller angelegter Module
(Beiträge, Menü, Banner usw.) an einer bestimmten Position
innerhalb des Templates gesetzt werden.
Benutzer Anders wie in WordPress, besteht hier die Möglichkeit noch
genauer zu definieren, welche Rolle einem Benutzer zugewiesen
wird. Der eigentliche Administrator der Website wird hier als
Super User bezeichnet.
Templates Hier werden die Templates, sprich die Themes von Joomla!
verwaltet und bearbeiten.
Erweiterungen installieren Von diesem Menüpunkt aus können Erweiterungen installiert
werden.
Tabelle 2-2: Übersicht über die Funktionen der Konfigurationselemente in Joomla!.19
2.2.1.1 Templates verwalten und anpassen
Die Template-Verwaltung in Joomla! ist erreichbar über das Konfigurationselement „Templates“. Hier
befindet man sich nun in der Verwaltung der Templates. Der Bereich unterteilt sich in zwei
Bereichen:20
Stil
Unter den Menüpunkt „Stil“ werden die Templates später angepasst. Möchte man ein Template
ändern, bietet Joomla! dem Administrator oder genauer gesagt dem Super User die Möglichkeit, das
zu ändernde Template zu kopieren. Der Punkt „Stil“ ist an sich nochmals in drei Reitern aufgeteilt.
19 Richard Eisenmenger: „Joomla!3 -Das umfassende Handbuch“. Kapitel: „1.3 Joomla!“. Verlag: Rheinwerk Computing, 2016, 1. Auflage, Seite 42f 20 Richard Eisenmenger: „Joomla!3 -Das umfassende Handbuch“. Kapitel: „10.3 Templates verwalten“. Verlag: Rheinwerk Computing, 2016, 1. Auflage, Seite 340ff
Seite 22
Der erste Reiter „Details“ gibt hier nur eine kurze Beschreibung über das Template. Im zweiten Reiter
„Erweitert“ steht die Anpassungsmöglichkeit einem Template zur Verfügung. Der letzte Reiter
„Menüzugehörigkeit“ weißt einem Template ein oder mehrere Webseiten des Webauftritts zu. Somit
ermöglicht Joomla! jeden Menüeintrag ein individuelles Aussehen. Zu erwähnen ist, dass ebenfalls wie
bei WordPress, die Flexibilität der Templates bestimmt, welche Anpassungsmöglichkeiten zur
Verfügung stehen.
Templates
Unter Templates sind nochmals die bereits installierten Templates aufgeführt. Nur diesmal mit
Vorschaubild und Informationen zur Version, Autor und Erstellungsdatum. Bei Klick auf „Vorschau“,
wird der grobe Aufbau gezeigt. Zudem sind die einzelnen Positionen mit Nummern hervorgehoben, an
der spätere Module wie Banner, Menüs, Kategorie usw. positioniert werden können.
Unter „Details und Dateien“ kann der Benutzer direkt Änderungen an den Dateien vornehmen. Auch
hier ist eine Unterteilung in drei Reitern. Erste Reiter „Editor“ zeigt die Struktur des Templates mit
allen Ordnern und Dateien an21. Von da aus können direkt Dateien bearbeitet werden. Im zweiten
Reiter „Overrides erstellen“ werden, wie der Titel bereits erklärt, Dateien überschrieben. Mittels
Override kann ein Template speziell für einen bestimmten Menüeintrag überschrieben werden.
Joomla! setzt „(…) so lange die Originaldatei der Komponenten und Module ein, bis es eine Override-
Datei findet.“22 Der letzte Reiter „Template-Beschreibung“ gibt dem Super User noch einen genaueren
detaillierten Einblick anhand eines Beschreibungstextes mit Vorschaubild.
2.2.2 Struktur und Aufbau von Templates
Auch wie in WordPress werden die Templates unter einem zentralen Punkt des CM-Systems
verwaltet. Bei Joomla! ist das unter /templates/NAME-TEMPLATE zu finden. Für das Funktionieren
eines Templates, benötigt Joomla! drei Basis-Dateien.23
21 Siehe Kapitel „2.3. Struktur und Aufbau eines Templates“ 22 Vgl.: Richard Eisenmenger: „Joomla!3 -Das umfassende Handbuch“. Kapitel: „10.3 Templates verwalten“. Verlag: Rheinwerk Computing, 2016, 1. Auflage, Seite 340ff 23 Richard Eisenmenger: „Joomla!3 -Das umfassende Handbuch“. Kapitel: „26 Templates entwickeln“. Verlag: Rheinwerk Computing, 2016, 1. Auflage, Seite 949ff
Seite 23
XML-Manifest
Die XML-Datei liegt direkt im Hauptverzeichnis des Templates. Sie sammelt alle notwendigen Daten
wie Name, Version, Autor, Komponenten, Informationen zur Templatekonfiguration im Backend des
Systems.
Bei der Installation des Templates wird Joomla! dieses als erstes einlesen und Dateien installieren,
sowie die Datenbank vorbereiten. Der Name der Datei muss dementsprechend templateDetail.xml
heißen.
Sie gibt auch die Einstellungsoptionen des Themes im Backend aus.
HTML-Templatebasis
Auch hier gilt, die index.php muss existieren. In dieser Datei befindet sich das Grundgerüst der
Website. Mittels definierten Platzhaltern, wird der Ort des Inhaltes markiert, an dem er ausgeschüttet
werden soll.
Stylesheets
Für das Aussehen der Templates wird eine CSS Datei benötigt. Diese kann in einem Ordner namens
/NAME-TEMPLATE/css/ ausgelagert werden. Anders wie in WordPress ist der Name der Datei frei
wählbar.
2.2.3 Nachteile von Joomla!
Im Nachfolgenden werden auf die Nachteile des Systems Joomla! eingegangen:
2.2.3.1 Sicherheit
Stets ein Wunderpunkt im Joomla! ist die Sicherheit des Systems. Aufgrund der Erweiterung des CMS
mittels Komponenten, Module, Plugins und Templates, werden je nach Qualität des Quellcodes die
Türen für Hacker geöffnet. Hierfür ist auch die niedrige Mindestanforderung der Version des PHP im
Mittelpunkt. Das wurde bereits auch bei WordPress beschrieben.
Seite 24
2.2.3.2 Angebot an Erweiterungen
Zwar ist Joomla! das zweit meistbenutze Content-Management-System, allerdings ist das Angebot an
Erweiterungen und Templates im Vergleich zu WordPress ziemlich gering. Noch dazu bietet Joomla!
keine richtige zentrale Stelle eines Erweiterungsverzeichnisses wie WordPress.
2.2.3.3 Wartung
Die Wartung von Joomla! ist sehr umständlich und benötigt dazu ein manuelles Verfahren über
Plugins. Für Laien ist die Durchführung eines Updates daher sehr umständlich und sollte von
qualifizierten Fachkräften durchgeführt werden.
2.2.3.4 Inhaltspflege
Bei Joomla! ist das Problem, dass auf einer Seite höchstens ein Hauptinhalt zugewiesen werden kann.
Das beeinträchtigt die Freiheit in der Informationsübermittlung an Websitebesucher.
2.2.3.5 Mehrsprachigkeit
Für die Mehrsprachigkeit einer Website auf Joomla!-Basis ist es sehr umständlich diese einzurichten.
Zuvor muss die jeweilige Sprache als Paket heruntergeladen und dann installiert werden. Dabei muss
das Sprachpaket für das Backend und zusätzlich für die jeweiligen Inhalte mit umständlichen
Konfigurationen eingerichtet werden.
2.3 TYPO3
In diesem Kapitel werden wesentliche Informationen zu dem in dieser Arbeit bezogene Content-
Management-System TYPO3 besprochen. Nach einem kurzen Einblick in das Backend werden bereits
existierende Lösungsansätze aufgezeigt.
Das CMS wurde von dem Entwickler Kasper Skaarhoj bereits im Jahr 1997 entwickelt. Im Jahr 2000
wurde das CMS unter der GNU Public License freigegeben. Auch die
CM-Systeme WordPress und Joomla! sind unter der GPL veröffentlicht. Seit 2002 wird das System von
einer Gemeinschaft aus Entwicklern unter der Beaufsichtigung von Kasper Skaarhoj weiterentwickelt.
Seite 25
TYPO3 ist trotz Open-Source in der Klasse der
Enterprise-Lösungen eingestuft.24
Als Systemvorrausetzung müssen folgende Kriterien erfüllt sein:
- Webserver auf den PHP läuft (Apache, Nginx, IIS, usw)
- PHP mit der Version ab 5.5
- MySQL ab Version 5.5
- GraphicsMagick oder ImageMagick (optional)
2.4 Überblick TYPO3
Der Zugang zum Backend ist über ein Login-Bereich zugänglich. Im Wesentlichen ist das Backend in
folgende vier Bereiche eingeteilt:
Abbildung 2-5: Backendansicht des CMS TYP03
Globale Menü
Die schmale Leiste oberhalb steht während Arbeiten im Backend, dem Administrator zur Verfügung. Es
beinhaltet links den aktuellen Projektnamen mit Versionsnummer des Systems. Rechts befindet sich
ein Sternsymbol um wichtige Arbeitsbereiche im TYPO3 zu speichern. Daneben befindet sich ein Blitz-
Icon. Er dient zum Löschen des Caches. Ein Fragezeichen gibt Hilfestellung bei Problemen. Das nächste
Icon gibt aktuelle Informationen zur der Entwicklungsumgebung aus und informiert, wenn Fehler
vorhanden sind. Anschließend kann direkt das eigene Benutzerprofil aufgerufen werden. Als Abschluss
ist ein Suchfeld vorhanden, wo nach Seiten, Inhalten und Datensätzen gesucht werden kann.
24 Frank Bongers, Michael Hassel, Andreas Stöckl: „Einstieg in TYPO3 CMS 6“. Kapitel: „1.3 TYPO3 als Web-Content-Management-System“. Verlag: Galileo Computing, 2013, 6. Auflage, Seite 26f
Seite 26
Seitenbaumansicht
Im Seitenbaum werden die Seiten angelegt und in hierarchischer Struktur auch dargestellt. Das heißt,
dass in der Reihenfolge die Seiten später im Frontend als Navigation ausgegeben werden. Die erste
Seite (Root-Page) wird mittels einer Weltkugel dargestellt. Sie bildet die Startseite. Unterhalb dieser
werden die Unterseiten angelegt, unter denen wiederum weitere liegen können, sprich als
Untermenü.
Oberhalb in der Seitenbaumansicht, kann mittels des Icon mit Plus eine neue Seite erstellt werden.
Durch Klick auf Symbol erscheinen hierzu verschiedene weitere Symbole, die den Typ der
anzulegenden Seite definiert. Mit gedrückt gelassener linker Maustaste auf einen der Icons, kann nun
das Element an die Stelle gezogen werden, an der es der Administrator oder Redakteur möchte.
Das Filter-Icon ermöglicht es, bei vielen Seiten, direkt nach der ID oder den Seitennamen zu suchen.
Modulleiste
Die linke Leiste ist für das Arbeiten im Backend notwendig. Unterteilt ist die Modulleiste in den
Grundkonfigurationen Web, Dateiliste, Adminwerkzeuge und System. Unter diesen sind die jeweiligen
Module zugeordnet.
Bearbeitungsbereich
Im letzten Bereich des Backends werden die allgemeinen Eingaben bearbeitet. Je nach Auswahl des
Backend-Moduls, wird im Bearbeitungsbereich eine andere Ansicht angezeigt.
2.4.1 Ansätze Theme-Implementierung in TYPO3
TYPO3 ist darauf ausgelegt hohe Anforderungen wie Multidomain, Mehrsprachigkeit und individuelle
Programmierung von Extension von Webprojekten zu erfüllen. Zudem bringt TYPO3 eine eigene
Skriptsprache mit. In der Entwicklung der letzten Jahre besitzt TYPO3 seit der Version 4.3 einen
komplett neuen Unterbau25. Die Architektur des Systems wurde angepasst und auf das MVC-Prinzip
25 Patrick Lobacher: „TYPO3 Extbase – Moderne Extension-Entwicklung in TYPO3 CMS mit Extbase & Fluid“. Kapitel: „1.7 Die Geschichte von Extbase & Fluid“. Verlag: Open Source Press, 2013, 1. Auflage, Seite 25f
Seite 27
umgestellt. Dazu entwickelte man eigens für TYPO3 das Framework Extbase und die Templating-
Engine Fluid26.
Seit dieser Neuerung werden neue Wege bestritten, die das TYPO3 einfacher benutzen lässt.
Insbesondere im Hinblick auf den Einsatz von Themes und dynamischen Inhalten sind bereits
Lösungen verfügbar. Daher wird in diesem Kapitel Ansätze aufgezeigt, die bereits für TYPO3 eingesetzt
werden.
2.4.1.1 Dynamische Inhalte erstellen
Dynamische Inhalte in TYPO3 sind spezielle Content-Elemente, die von TYPO3 nicht Standardmäßig
angeboten werden. Die im System bereits beinhaltende Elemente, stoßen auf Grund der
extravaganten Gestaltungselemente und der interaktiven Möglichkeiten schnell an die Grenzen des
Machbaren. Um das zu lösen können dynamische Inhalte eigens erstellt werden. Dazu können
folgende Lösungen verwendet werden:
Eigene Core-Extension Fluid-Styled-Content
Seit der neuen Version TYPO3 7.6 die am 10. November 2015 mit Long-Term-Support veröffentlicht
wurde, hat das CMS seine standardmäßigen Inhalte komplett auf Basis der Templating-Engine Fluid
umgestellt. Damals wurden die Inhalte von umständlichen und unübersichtlichen TypoScript-
Anweisungen erstellt. Mit Fluid-Styled-Content können die Fluid-Templates ausgelagert und
bearbeitet werden.27
Extension MASK
Mit der Extension MASK steht seit kurzem eine Erweiterung für TYPO3 zur Verfügung, mit der in
kürzester Zeit eigene dynamische Inhalte erstellt werden können. Dabei stellt die Extension im
Backend ein eigenes Modul zur Verfügung. Beim Aufruf bietet MASK eine große Auswahl an Felder, die
man für das Inhaltselement (Überschriften, Dateien, Links, Richtext-Editor, Selectboxen uvm.)
benötigt. Ein Content-Element kann einfach mittels Drag & Drop erstellt werden. Nachdem das zu
erstellende Element in MASK gespeichert wurde, erstellt die Extension ein Template. Dieses kann
26 Siehe Kapitel „Framework Extbase und Templating-Engine Fluid“ 27 Fluid Powered TYPO3, https://fluidtypo3.org/ (Aufgerufen am 23.01.2017)
Seite 28
individuell mit Fluid-HTML angepasst werden. Besonders interessant ist die Portierbarkeit der
erstellten Inhaltselemente in andere Webprojekte.28
2.4.1.2 Theme-Extension
Für TYPO3 werden bereits Themes angeboten. Diese werden als Extension in das System installiert
oder das Content-Management-System als Package-Version angeboten, in der bereits alle
notwendigen Konfigurationen sowie die Theme-Extension enthalten sind. Die Extension beinhaltet alle
Templates, CSS und JavaScript-Dateien, als auch alle notwendigen TypoScript-Konfigurationen, mit
denen die endgültigen Seiten erstellt werden. Die Themes werden als Distribution ausgeliefert.
2.5 WordPress und Joomla! im Vergleich mit TYPO3
Nach der Vorstellung der drei Content-Management-Systeme soll eine kurze Gegenüberstellung von
WordPress und TYPO3 sowie Joomla! und TYPO3 stattfinden.
2.5.1 WordPress und TYPO3
Während WordPress mit seiner „5-Minuten-Installation“, der Einfachheit und schnelle Lernkurve in
der Handhabung des Backend, sowie der individuellen Anpassung von Themes besticht, trumpft
TYPO3 mit seinen Lösungsansätzen für komplexe Webauftritte und der Erweiterung des Systems,
Unterstützung von Multidomain und der Mehrsprachigkeit auf. Allerdings ist die Einarbeitungszeit in
das CMS TYPO3 viel höher, da insbesondere Kenntnisse in der eigenen Skriptsprache TypoScript
notwendig sind.
Beide Systeme verfolgen zudem unterschiedliche Zielgruppen. WordPress wird bevorzugt als Blog-
System verwendet, hat sich aber allerdings von der eigentlichen Blogsoftware zu einem vollwertigen
Content-Management-System mit einer breiten Zielgruppe aufgebaut. TYPO3 zielt dagegen auf die
Nutzergruppe, die individuelle Lösungen wünscht. Daher muss für TYPO3-Projekte mehr Zeit und
Budget in einem Projekt gesteckt werden.
28 Mask for TYPO3, https://fluidtypo3.org/ (Aufgerufen am 23.01.2017)
Seite 29
Auch im technischen Aspekt gibt es große Unterschiede. Die Templates in WordPress sind mit HTML
und PHP zusammen in einer Template-Datei programmiert. TYPO3 bietet eine saubere Trennung von
PHP und HTML.
In der Verwaltung von Inhalten sind die Unterschiede groß. In WordPress werden Beiträge als
dynamische Inhaltselemente behandelt, während Seiten als statisch angesehen werden. Die
Menüstruktur kann von dem Administrator selbst definiert werden. Bei TYPO3 wird ein anderer Ansatz
gewählt, indem Seiten in einer Seitenbaumansicht hierarchisch angelegt werden, auf dem die Inhalte
verwaltet werden. TypoScript erstellt dann aus der Hierarchischen Seitenstruktur das Menü.
Ein weiterer großer Unterschied zwischen WordPress und TYPO3 ist in der Rechteverwaltung zu
erkennen. In WordPress kann einer zugangsberechtigten Person eine Rolle zugewiesen werden, in der
die Rechte bereits gesetzt sind. Für die individuelle Einstellung von Rechten auf einen Benutzer, muss
ein Plugin installiert werden. TYPO3 bietet dagegen ein komplettes Rechtemanagement, in der jeder
Benutzer oder jede Benutzergruppe ihre entsprechenden Rechte zugewiesen bekommt.
2.5.2 Joomla! und TYPO3
Wie WordPress ist die Installation von Joomla! schnell erledigt. Es ist unkompliziert über einen FTP-
Zugang hochzuladen. TYPO3 kann zwar auch über FTP-Zugang auf den Webserver gepackt werden,
allerdings ist für eine saubere Installation der Weg über die Shell/Terminal ratsam.
Templates gelten bei Joomla! übrigens auch als Erweiterungen und für Front- und Backend verfügbar.
Bei vielen installierten Erweiterungen wird die Wartung des Systems komplex und sollte von einem
Fachmann durchgeführt werden. In TYPO3 gibt es nur Extension die unter dem Modul
„Erweiterungen“ zu finden sind. Anders wie in Joomla! besitzt das CMS TYPO3 über bereits installierte
und aktivierte Extension. Dagegen muss in Joomla! Erweiterungen erstmal installiert werden.
2.6 Beurteilung der Lösungsansätze
Im Nachfolgenden werden die, in dem Kapitel gesammelten Erkenntnisse, über die
Content-Management-Systeme und ihrer Lösungsansätze beurteilt. Bezogen auf dem in dieser Arbeit
entstanden Prototypen eines Theme Managers für TYPO3 soll aufgezeigt werden, welche Ansätze in
Seite 30
den Theme Manager einfließen sollen. Auf der anderen Seite soll begründet werden, inwiefern der
Prototyp und die entwickelten Themes besser sind als bestimmte bestehende Lösungsansätze.
2.6.1 Ansätze aus WordPress
Besonders Interessant ist der leicht zugängliche und von überall erreichbare zentrale Ort, an der die
Themes verwaltet und bearbeitet werden. Die Gestaltung und Usability der
Theme-Verwaltung ist selbsterklärend und modern durch große Boxen dargestellt.
Über gut gekennzeichnete Buttons wird klar signalisiert, wohin der Link führt.
Die wichtigsten Informationen zu jedem Theme können schnell eingesehen werden.
Negativ zu beurteilen ist die Übermittlung von Anpassungen eines Themes in der
Administrationsoberfläche von WordPress. Änderungen wird von PHP ausgewertet und als PHP-
generiertes CSS ausgeben. Das wird mit dem Prototyp des Theme Managers und der Themes über
eine sichere und saubere Methode gelöst, die später Präsentiert wird.
2.6.2 Ansätze aus Joomla!
Aus den gewonnenen Erkenntnissen sind für den Theme Manager keine nennenswerten
Lösungsansätze zu erkennen. Auf Grund der tabellarischen Darstellung und der Unterteilung der
Templates-Verwaltung in zwei Unterbereiche, wird im Gegensatz dazu der hier entwickelte Prototyp
des Theme Managers für TYPO3 mit eindeutiger und klarer Darstellung eine bessere Lösung bieten, als
die von Joomla!.
2.6.3 Ansätze aus TYPO3
Wie bereits erwähnt, stehen seit der Erneuerung des CMS neue Möglichkeiten zur Verfügung und es
gibt bereits Ansätze, wie ein Theme aufgebaut sein muss. Daher werden aus den bereits existierenden
Theme-Extensions gewisse Bestandteile für die eigene Konzipierung eines Themes benutzt29.
29 TYPO3 Themes: http://www.typo3-themes.org/ (Aufgerufen am 27.01.2017)
Seite 31
Der Theme Manager soll als zentrale Verwaltung fungieren. Obwohl der Erweiterungsmanager über
eine Filterfunktion verfügt, vermischen sich Themes und Extension in diesem. Themes und
Erweiterungen stehen im gewissen Sinn in keinem Kontext zueinander. Während Extensions das ganze
System erweitern können, stellt eine Theme eher Layout- und Gestaltungselemente sowie Funktionen
zur Verfügung.
Seite 32
3 Konzeption des Theme Managers
Durch die Analyse der bestehenden Lösungsansätze der Content-Management-Systeme WordPress
und Joomla! haben sich Kriterien gezeigt, die von dem Theme Manager und der Themes zu erfüllen
sind:
Anforderungen an den Theme Manager:
- Zentrale Verwaltung der Themes
- Themes unkompliziert und zuverlässig implementieren
- Informationsmöglichkeit über das jeweilige Theme anhand einer Vorschau bieten
- Löschung von nicht benutzten Themes
- automatische Verbindung mit dem TYPO3-System bei Aktivierung eines Themes
- Anpassungsbereich der Gestaltung eines Themes
Anforderungen an ein Theme:
- Beinhaltet alle notwendigen TypoScript-Konfigurationen
- Generiert das Menü anhand des Seitenbaums
- Saubere Trennung von HTML, CSS, JavaScript und TypoScript-Dateien
- Stellt Backend-Layouts und Rasterelemente zur Verfügung
- Besitzt Templates von Fluid-Styled-Content
3.1 Planung des Theme Managers
Dieses Kapitel befasst sich mit der Planung des Theme Managers. Betrachtet werden dabei die
Anwendungsfälle zwischen den Benutzer und der Extension. Anschließend wird anhand von
Wireframes die Entstehung der Benutzeroberfläche behandelt. Am Ende des Kapitels soll näher auf
die benutzen Technologien eingegangen werden.
Seite 33
3.1.1 Use-Case-Diagramm
Anhand dieser Anforderungen haben sich Anwendungsfälle gezeigt, die zwischen dem Benutzer und
dem Theme Manager stattfinden.
Abbildung 3-1: Use-Case-Diagramm Theme Manager
Über ein Modul gelangt der Administrator in die Listenansicht. Wird zum ersten Mal die Extension
geöffnet, erstellt der Theme Manager im File-System einen Ordner, in der später die Themes
gespeichert werden. Ist die Extension bereits aufgerufen worden, zeigt sich dem Benutzer eine Liste
an bereits vorhanden Themes.
Über ein Upload-Feld kann der Benutzer das Theme als Zip-Datei hochladen. Der
Theme Manager soll daraufhin das Zip-File entpacken und das Theme implementieren.
Der Administrator soll in der Übersicht die Möglichkeit haben, sich von jedem Theme die
Informationen anzuschauen. In der Detailansicht werden die Kontaktinformationen zu dem Ersteller
des Themes, die Versionsnummer, Beschreibung und Darstellung des Themes auf Desktop, Tablet und
Smartphone angezeigt.
Seite 34
Über einen Aktivierungsbutton soll ein Theme aktiviert werden. Die Extension soll dann überprüfen,
ob bereits ein Theme aktiv ist. Falls ja, so wird dieses deaktiviert und das zu aktivierende
dementsprechend aktiviert.
Der Benutzer kann nun das aktive Theme im Theme Manager bearbeiten. Im Anpassungsbereich kann
der Administrator individuell das Theme anpassen. Über einen Speicher-Button werden die
Änderungen im Frontend sichtbar.
3.1.2 Benutzeroberfläche Theme Manager
Die Auflistung der Themes im Theme Manager wird anhand großer Kacheln dargestellt. Kacheln
ermöglichen es, mit einen großen Vorschaubild zu arbeiten. Damit soll der Benutzer den Aufbau des
jeweiligen Themes besser erkennen.
Unterhalb des Vorschaubildes ist der Name des Themes und Buttons, deren Bedeutung durch Icons
erklärt wird. Die Icons kommen direkt von TYPO3. Es wurde darauf geachtet, die Stilmittel zu
verwenden, die TYPO3 bereits zur Verfügung stellt.
Im unteren Bereich der Listenansicht befindet sich das großzügige gestaltete
File-Upload-Feld. Die Usability des Upload-Felds wurde so angepasst, dass ein ausgewähltes Theme
vom lokalen Speicherplatz direkt hochgeladen werden kann. Eine weitere Bestätigung des Uploads im
Theme Manager ist somit nicht nötig.
Abbildung 3-2: Wireframe Listenansicht im Theme Manager
Seite 35
Die Detailansicht eines Themes besteht aus zwei wesentlichen Abschnitten. Auf der linken Spalte sind
die allgemeinen Informationen über Autor, Version und Beschreibung. In der rechten Spalte mittels
Bootstrap, eine Sliderfunktion die verschiedenen Ansichten des Themes auf Desktop, Tablet und
Smartphone anzeigt werden. Über den Zurück-Button gelangt man in die Listenansicht zurück.
Bei der Gestaltung des Anpassungsbereichs eines jeweiligen Themes wurde darauf geachtet, dass die
jeweiligen Anpassungsmöglichkeiten sauber getrennt sind. So werden die Anpassungskategorien, wie
zum Beispiel Schriften, die Menüleiste, die Inhaltselemente und die mobilen
Einstellungsmöglichkeiten, visuell voneinander getrennt.
3.1.3 Benutzte Technologien
Extensions werden in TYPO3 durch das Framework Extbase und der Templating-Engine Fluid erstellt.
Extbase basiert auf der Programmiersprache PHP und ermöglicht die schnelle interne Entwicklung von
sauberen und leicht verständlichen Extensions innerhalb eines
TYPO3-Systems. Das Framework nimmt mehrere Architekturmuster auf. Unter anderem das Prinzip
des Model-View-Controller. Durch Extbase erhält man eine saubere Trennung der drei Komponenten
Model, View und Controller.
Neben dem MVC bedient sich Extbase am Entwurfsmuster Dependency Injection. Mit dem
Entwurfsmuster werden Abhängigkeiten von Objekten gelöst. Dazu wird mit einer Annotation dem
Framework Extbase mitgeteilt, welche Klasse man für die Implementierung benötigt. Extbase gibt
diese zurück. So werden umständliche Instanzen innerhalb einer Klasse umgangen.30
Annotations sind Kommentar-Funktionen die in Kommentar-Syntax definiert werden. Ein Prozess
wertet die darin enthaltenen Informationen aus und fügt die der eigentlichen Funktion zusätzlich zu.
Für die Funktion einer Extension sind Annotations unabdingbar.31
Unter dem Framework Extbase wird die Templating-Engine Fluid für die Ausgabe der Daten
verwendet. Der Vorteil an Fluid ist, dass damit die Logik der Ausgabe gesteuert werden kann, ohne
innerhalb eines Templates mit PHP zu arbeiten. In Fluid gibt es drei Grundsteine:
30 Patrick Lobacher: „TYPO3 Extbase – Moderne Extension-Entwicklung in TYPO3 CMS mit Extbase & Fluid“. Kapitel: „2.10.3 Dependency Injection“. Verlag: Open Source Press, 2013, 1. Auflage, Seite 44f 31 Patrick Lobacher: „TYPO3 Extbase – Moderne Extension-Entwicklung in TYPO3 CMS mit Extbase & Fluid“. Kapitel: „2.11 Annotations“. Verlag: Open Source Press, 2013, 1. Auflage, Seite 46
Seite 36
Object Accessor Extbase übergibt Daten an das Fluid-Template, die dann ausgegeben
werden
ViewHelper Bestimmte Fluid-Tags mit den Funktionen ausgeführt werden, wie IF-
Abfragen, For-Each-Schleifen, Links usw.
Array Ausgabe von Daten in einem ViewHelper, die innerhalb eines übergebenen
Arrays liegen
Tabelle 3-1: Die drei Grundbausteine der Templating-Engine Fluid.32
3.1.4 Klassenaufbau des Theme Managers
Abbildung 3-3: Aufbau des Theme Managers
Der Theme Manager baut auf dem Model-View-Controller-Konzept auf. Ein Repository wird
verwendet, der die Daten in einer JSON-Dateien verwaltet. Mittels Serviceklassen werden der
Repository-Klasse Aufgaben abgenommen. Da gewisse Funktionen bereits von der TYPO3 Core
implementiert sind, instanziieren die beiden Klassen davon Objekte.
32 Patrick Lobacher: „TYPO3 Extbase – Moderne Extension-Entwicklung in TYPO3 CMS mit Extbase & Fluid“. Kapitel: „7.1 Erstellen eines Objekts (Create) – Exkurs Fluid“. Verlag: Open Source Press, 2013, 1. Auflage, Seite 137ff
Seite 37
Der Controller wertet die Daten anhand der in Model definierten Klassen aus. Das Ergebnis schickt die
Controller-Klasse mittels Object Accessors an die TYPO3 View. Diese View ist eine
Vermittlungszentrale, die das zutreffende Fluid-Template ausfindig macht an der die Daten adressiert
sind.
Die TypoScript-Datei enthält die Pfade der Fluid-Templates. Mittels der ext_tables.php wird das
TypoScript in das TYPO3- System eingebunden. Im Backend können durch diesen Prozess die Fluid-
Templates angezeigt und benutzt werden.
3.2 Dokumentation des Theme Managers
Die Programmierung des Theme Managers wird innerhalb einer TYPO3-Installation vorgenommen. Vor
Beginn der eigentlichen Programmierung bietet TYPO3 eine Extension an, die sich Extension Builder
nennt. Die Erweiterung unterstützt den Entwickler bei der Vorbereitung. In einer Maske werden alle
notwendigen Informationen wie Autor, Extension-Key, Versionsnummer, Art der Extension und vieles
mehr eingegeben.
Beim Anlegen des Projektes erstellt der Extension Builder bereits eine Ordnerstruktur. Die Struktur ist
der Grundbaustein mit der das Framework Extbase arbeitet. Anhand dessen wird der Theme Manager
realisiert.
3.2.1 Technische Umsetzung
Im Folgenden werden die wichtigsten Funktionen erklärt. Dabei wird darauf eingegangen, wie diese
aufgebaut sind.
3.2.1.1 Theme hochladen
Die BackendController-Klasse beobachtet mit Hilfe der Methode uploadThemeAction() das in dem
ListThemes.html liegende Formular. Damit eine Verbindung zwischen der Methode und dem Formular
entsteht, wird in dem beginnenden <form>-Tag das Attribut action mit der Information uploadTheme
definiert. Die Namensgebung ist hier essentiell. Bis auf den Zusatz „Action“ muss der Methodenname
aus dem Controller und der übergebene Wert des Attributs aus der View identisch sein. Wird in dem
Seite 38
Formular das enthaltene File-Upload-Element benutzt, ruft der Controller die in der Methode
uploadThemeAction() definierten Funktionen auf.
Mit einer IF-Abfrage wird sichergestellt, dass es sich um einen Dateiupload handelt. Innerhalb der
Abfrage ruft der Controller nun die statische Funktion uploadFalFile() der Serviceklasse FALService auf.
Der Funktion werden als Parameter die Datei und der Speicherort übergeben.
Abbildung 3-4: Controller Methode uploadThemeAction()
Die Funktion uploadFalService() ist für das Speichern der Zip-Datei verantwortlich. Dazu wird in der
Methode eine Instanz aufgerufen. Die Instanz ist ein Objekt einer Klasse, die von der TYPO3-Core
bereits definiert ist. Mit Hilfe der zur Verfügung stehenden Funktionen, kann eine reibungslose
Speichermethode implementiert werden.
Da das Theme als Zip-File hochgeladen wird, benötigt man innerhalb der uploadFalService()-Funktion
eine weitere statische Funktion die das Theme entpackt und das Zip aus dem Speicherort der Themes
entfernt. Anschließend wird ein Wert zurückgegeben.
Zurück im Controller, wird der zurückgelieferte Rückgabewert aus der Klasse FALService
weiterverarbeitet. Dazu läuft dieser durch eine Kontrolle. Hier soll überprüft werden, ob der Wert
TRUE oder FALSE entspricht. Der Wert FALSE tritt ein wenn die übergebene Datei keinen Dateinamen
besitzt oder das Theme bereits existiert.
Seite 39
Abbildung 3-5: Upload-Feld im ListTheme.html
In diesem Fall wird eine Meldung anzeigt und informiert darüber, dass ein Fehler auftreten ist. Der
Wert TRUE hingegen, löst den Funktionsaufruf addTheme() in der uploadThemeAction()-Methode aus.
Die addTheme()-Funktion wird in der Klasse StorageRepository definiert. Sie hat die Aufgabe, die
Meta-Informationen des entpackten und installierten Themes auszulesen. Der Funktion wird dabei als
Parameter der Pfad zu der im Theme liegenden meta.json übergeben. Aus ihr werden die Daten
herausgelesen und die JSON-Datei des Theme Managers importiert.
3.2.1.2 Themes auflisten
Nach der erfolgreichen Installation eines Themes, wird dieses im Theme Manager angezeigt. Das
geschieht durch die zuvor importierten Meta-Informationen in der JSON-Datei der Extension. Für die
Umsetzung ist die Methode listThemesAction() in der BackendController-Klasse zuständig.
Dazu ruft die Methode die Funktion getJSON() aus der Klasse StorageRepository auf. Die Funktion
überprüft als erstes, ob die zuvor angelegte Variable $json identisch NULL ist. Wenn das nicht der Fall
ist, besteht bereits ein Array der installierten Themes. Andererseits wird mit einer weiteren Abfrage
sichergestellt, ob die Extension über die benötigte JSON-Datei verfügt. Wenn ja, wird daraufhin die
Datei für PHP konvertiert33.
Am Ende der Funktion wird ein Array zurückgegeben. Der Controller speichert das Array in der
listThemesAction()-Methode in einer Variable. Mit dieser kann jetzt ein Object-Accessor erstellt
werden. Anhand des Object Accessor können nun die Daten mit dem Fluid-Template ListThemes.html
verarbeitet werden.
33 PHP: http://php.net/manual/de/function.json-decode.php“ (Aufgerufen am 26.01.2017)
Seite 40
Abbildung 3-6: listThemesAction()-Methode im Controller
3.2.1.3 Theme-Information einsehen
Bei der Informationsausgabe über ein beliebiges Theme im Theme Manager, wird eine andere View in
das Backend des TYPO3-Systems gerendert. Damit auch die Informationen des gewählten Themes
angezeigt werden, muss der Controller erfahren, von welchem Theme er die Informationen laden und
ausgeben soll.
Der Detail-Button besitzt ähnlich wie im vorherigen Abschnitt das Attribut action mit dem
zugeordneten Wert detailTheme. Dadurch wird, wie bereits im Abschnitt „Theme hochladen“
erläutert, eine Verbindung zur Funktion detailThemeAction() in der BackendController-Klasse erzeugt.
Zusätzlich wird in dem Button ein Attribut arguments definiert. Das Attribut definiert die drei
Variablen type, state und key.
Abbildung 3-7: Ausschnitt aus dem Fluid-Template DetailTheme.html
Seite 41
Klickt der Benutzer auf einen Detail-Button, nimmt sich die Methode detailThemeAction() die
Variablen aus dem Fluid-Template. Zur weiteren Verarbeitung werden die Variablen als Parameter an
die loadDetailTheme()-Funktion aus der Klasse StorageRepository geliefert. Die Funktion sucht aus
dem Array $json anhand der übergebenen Parameter die Informationen des entsprechenden Themes
aus. Als Rückgabewert wird ein Array des Themes zurückgeliefert.
Die Methode detailThemeAction() greift das Array auf und erstellt daraus einen Object Accessor. Das
wird dem Template DetailTheme.html übergeben.
3.2.1.4 Theme löschen
Der Vorgang ist identisch mit dem Abschnitt „Theme-Informationen einsehen“. Damit das
ausgewählte Theme gelöscht werden kann, werden dem HTML-Element als Attribut zwei Variablen
angehängt.
Wird der Löschen-Button durch den Benutzer aufgerufen, nimmt sich die Funktion
deleteThemeAction(), wie bereits bekannt, die Variablen aus dem HTML-Element. Diese werden dann
zur weiteren Verarbeitung als Parameter der Funktion delete() aus der Klasse StorageRepository mit
gegeben. Mit dieser Funktion wird der Eintrag des zu löschenden Theme aus der JSON-Datei des
Theme Managers gelöscht.
Im zweiten Schritt muss die Datei des Themes aus dem File-System des Webauftritts entfernt werden.
Hierzu ruft die BackendController-Klasse die statische Funktion deleteFalService() aus der Klasse
FALService auf. Durch die Übergabe des zu löschenden Themes als Parameter wird dieses von der
Funktion gelöscht.
3.2.1.5 Theme aktivieren
Bei der Aktion ein Theme zu aktivieren sind mehrere Schritte nötig. Die JSON-Datei des Theme
Managers ist mehrdimensional aufgebaut. Sie unterteilt sich zu einem in „themes“ und „active“. In
„themes“ sind alle deaktivierten Themes aufgelistet, während in „active“ das aktive Theme
gespeichert ist. Dementsprechend muss ein Tausch zwischen den zwei Unterteilungen stattfinden.
Seite 42
Abbildung 3-8: Methodenaufruf activeThemeAction() aus dem BackendController
Die Funktion setActiveTheme() aus der StorageRepository-Klasse, ist für den Tausch des
mehrdimensionalen Aufbaus der Datei themeManager.json verantwortlich. Dazu wird in einer
Variablen actThemeArr das zu aktivierende Theme gespeichert. Mit einer zweiten Variablen namens
inActThemeArr wird das zu deaktivierende Theme zwischengespeichert. Anschließend wird das in
actThemeArr gespeicherte Theme unter „active“ in der JSON-Datei eingefügt und das in
inActThemeArr unter „themes“.
Im nächsten Schritt wird das neue aktive Theme in der Controller-Methode activeThemeAction() in
einer Variablen activeTheme gespeichert. Diese Variable wird als Parameter in mehreren Funktionen
benötigt.
Mit diesen Funktionen werden dynamische Einträge in die Datenbank gesetzt. Hier werden die drei
TypoScript-Dateien des Themes eingefügt. Diese werden im Kapitel „Aufbau und Struktur eines
Themes“ kurz erklärt.
Die Funktionen sind in der Klasse ThemeManagementUtility definiert. Mittels PHP werden INCLUDE-
Befehle, die den Pfad zu den jeweiligen drei TypoScript-Dateien enthalten, in die dafür vorgesehenen
Datenbankfelder eingefügt. Ruft man jetzt die Frontend-Seite auf, wird das aktive Theme angezeigt,
allerdings ohne Styles.
Das übernimmt die Funktion compileJsonSass() aus der ThemeService-Klasse. Die Aufgabe der
Funktion ist es, das im Theme unter /Resources/Public/Sass liegende variable.json mit der SASS-Datei
zu verbinden. Diese JSON-Datei beinhaltet alle Variablen mit den dazugehörigen Styles, die an SASS
übergeben werden. Damit die Übergabe der Styles funktioniert, wird mittels einem exec-Befehl ein
sass-json-vars Compiler gestartet.
Alle Funktionen werden vom Controller in der Funktion activeThemeAction() definiert.
Seite 43
3.2.1.6 Theme bearbeiten
Unter diesem Punkt werden zwei Methoden des Controllers erklärt, die für die individuellen
Anpassungen des Themes verantwortlich sind. Diese Methoden erfüllen die Aufgabe, alle Style-
Anpassungen eines Themes anzuzeigen und Änderungen zu speichern.
editThemeAction()
Die editThemeAction() ist für die Ausgabe der Anpassungsmöglichkeit des zu bearbeitenden Themes
verantwortlich. Neben der Ausgabe der zu ändernden Styles, soll dementsprechend auch dynamisch
der Name des Themes in der Bearbeitungsansicht angezeigt werden.
Dazu wird als erstes die bereits erklärte Funktion loadDetailTheme() aus der Klasse StorageRepository
aufgerufen. Wie bereits im Abschnitt „Theme-Information einsehen“ erklärt, übergibt diese Funktion
alle Details des ausgewählten Themes. In der Variablen activeTheme speichert die editThemeAction()-
Methode das aktive Theme und übergibt diese als Parameter an die Funktion getVarsJson(). Diese
Funktion wird in der Klasse StorageRepository definiert. Sie holt sich alle Informationen aus der im
Theme liegenden variable.json und ist vom Aufbau identisch mit der Funktion getJSON().
Zum Schluss werden zwei Object Accessors erstellt. Der erste ist für die Ausgabe des Titels des Themes
verantwortlich, die aus der Datei themeManager.json entnommen wurde. Mit dem zweiten Object
Accessor werden die Daten aus der variable.json entnommen. Beide Object Accessors werden von
dem Fluid-Template EditTheme.html verwendet und ausgegeben.
Abbildung 3-9: Die Controller-Methode editThemeAction()
Seite 44
saveThemeAction()
Mit der zweiten Methode saveThemeAction() aus dem Controller sollen nun die geänderten Styles des
Themes gespeichert werden. Die Daten aus der variable.json werden dabei in einem Formular
ausgegeben.
Durch die Templating-Engine Fluid steht einem nun die Möglichkeit zur Verfügung, über das Formular
ein Objekt zu definieren. Die in dem Formular definierten Input-Felder werden mit dem Attribut
property erweitert. Das Attribut property kennzeichnet das Input-Feld als Eigentum des erstellten
Objekts.
Für die Umsetzung wird dazu auf den <form>-Tag ein Attribut object mit einem Identifikator in
geschweiften Klammern definiert. Die Input-Felder des Formulars werden um das Attribut property
und der Vergabe eines Schlüsselwert erweitert.
Betätigt der Benutzer nach Abschluss der Anpassungen den Speicher-Button, wird das Objekt aus dem
<form>-Tag erstellt. Alle im Eigentum zum Objekt befindlichen Input-Felder und deren aktuellen
Werte, nimmt das Objekt in sich auf.
Die Methode saveThemeAction() nimmt sich die BackendController-Klasse dieses Objekt und übergibt
sie der addVariable()-Funktion, welche in der StorageRepository implementiert ist. Zusammen mit der
zuvor definierten Variablen activeTheme werden die Daten aus dem übergebenen Objekt in die
variable.json übergeben.
Abschließend wird in der Controller-Methode saveThemeAction() die Funktion compileJsonSass()
aufgerufen. Die neuen Styles werden gerendert.
3.3 Repräsentation des Themes
Neben der Entwicklung des Theme Managers wird in der Bachelorarbeit eine
Theme-Struktur entwickelt. Dabei wurde in dieser Arbeit sich an bereits vorhandene Lösungsansätze
gehalten. Jedoch wurde die Struktur stark vereinfacht und zusätzliche Änderungen vorgenommen,
damit die Kommunikation zwischen Theme und Theme Manager garantiert wird.
Seite 45
3.3.1 Aufbau und Dateien eines Themes
Im Verzeichnis eines Themes befinden sich neben drei Ordnern zwei Dateien. Am Aufbau der
Verzeichnisstruktur des Themes, wurde sich an bereits existierende Themes orientiert. Da diese
Themes allerdings als Extension entwickelt wurden, ist die Struktur des hier entwickelten Themes stark
vereinfacht.
Im Folgenden eine Übersicht über die wichtigsten Dateien und ihrer Funktion:
Datei - Ordner Lokalisierung Funktion
meta.json / beinhaltet alle Informationen eines Themes
thumbnail.jpg / Vorschaubild des Themes in der
Listenansicht des Theme-Managers
Preview /Preview/ In diesem Ordner werden die Bilder
gespeichert, die im Theme Manager in der
Detailansicht verwendet werden.
page_tsconig.ts /Configuration/TSconfig/ Konfiguriert die Seiten im Backend einer
TYPO3-Installation. Die Datei nimmt mittels
INCLUDE-Befehl weitere TypoScript-
Konfigurationsdateien auf34.
setup.txt /Configuration/TypoScript/ Hier wird das eigentlich Template erstellt
und in das Frontend ausgegeben. In der
Datei sind ebenfalls INCLUDE-Befehle
gesetzt, die eine weitere TypoScript-Datei
einbindet.
constants.txt /Configuration/TypoScript/ Mittels Konstanten werden der Speicherort
und der ThemeKey des Themes
gespeichert. Die Informationen werden
dann dorthin geleitet, wo die Konstanten
im TypoScript-Konstrukt verwendet
werden.
34 Frank Bongers, Michael Hassel, Andreas Stöckl: „Einstieg in TYPO3 CMS 6“. Kapitel: „17. TypoScript – eine Kurzreferenz“. Verlag: Galileo Computing, 2013, 6. Auflage, Seite 496
Seite 46
Public /Resources/Public In Public werden alle CSS, JavaScript, Fonts
und Icon-Dateien gelagert. Werden
Bootstrap, Fancybox, Flexslider usw.
verwendet, liegen diese in eigenen
Ordnern.
SASS /Resources/Public/Sass Im SASS-Ordner befindet sich zum einen die
variable.json mit den gespeicherten
Variablen mit Styles, zum anderen die SASS-
Datei selbst.
Private /Resources/Private In diesem Ordner sind alle Templates
enthalten, die das Theme benötigt.
Extension /Resources/Private/Extension Benutzt das Theme andere Extension,
werden dessen Templates in den Ordner
ausgelagert. So zum Beispiel für Fluid-
Styled-Content Templates
Theme /Resources/Private/Theme Das Theme setzt sich aus drei Teilen
zusammen: Layout, Partials und Templates.
In Kapitel Design eines Themes, wird näher
drauf eingegangen
Tabelle 3-2: Übersicht über die Bestandteil eines Themes
3.3.2 Template-Aufbau eines Themes
Bezogen auf die obige Tabelle soll auf den Aufbau der Template-Dateien des Themes genauer
eingegangen werden. Wie bereits kurz erläutert, setzt sich das Theme aus drei Bestandteilen
zusammen.
Das Layout-Template im Ordner /Resources/Private/Theme/Layouts/ bildet die Basis. Im Template
werden die zwei anderen Bestandteile Partials und Templates durch einen ViewHelper gerendert.
Im Ordner /Resources/Private/Theme/Partials/ befinden sich kleine Template-Einheiten. Sie sind
geeignet für die Erstellung von Header- und Footer-Templates. Die Namensgebung der Template-
Dateien muss identisch mit dem im Layout-Template vergebenen Wert in der Renderanweisung sein.
Seite 47
Der dritte Bestandteile Templates wird unter /Resources/Private/Theme/Templates/ definiert. Die
Template-Einheiten beinhalten den Aufbau des Content-Bereichs der Website. Eine Startseite besitzt
je nach Gestaltung der Website einen Slider- und Inhaltsbereich, während die Unterseiten nur aus
einem Inhaltsbereich bestehen. Dafür werden zwei
Template-Einheiten erstellt. Diese werden im TYPO3-Backend über Backend Layouts ausgewählt. Im
Kapitel „Benutzung des Theme Managers – Backend Layouts“ wird auf die Benutzung näher
eingegangen.35
3.4 Systemvorrausetzung
Der Theme-Manager wurde innerhalb einer TYPO3 7.6.15 Installation. Die Version wurde am 03.
Januar 201736 veröffentlich und ist zum Zeitpunkt der Bachelorarbeit die aktuellste Version. Damit die
Kommunikation zwischen JSON und SASS funktioniert, wurde Ruby auf dem Server installiert.
Die Extension und die Themes sind abhängig von anderen Extensions. Zum einen die Extension
„ws_scss“ zum compilieren der SASS-Style-Anweisung in eine CSS-Datei. Für die Rasterelemente, die in
einem Theme bereits definiert sind, wird die Extension „gridelements“ gebraucht. Sie stellt die
Rasterelemente als Inhaltselement zur Verfügung, auf Basis der TypoScript-Anweisungen und
Templates im Theme.
35 Patrick Lobacher: „TYPO3 Extbase – Moderne Extension-Entwicklung in TYPO3 CMS mit Extbase & Fluid“. Kapitel: „8. Das Fluid-Templating: Templates, Layouts & Partials“. Verlag: Open Source Press, 2013, 1. Auflage, Seite 155ff 36 TYPO3: https://typo3.org/news/article/typo3-cms-6230-7615-and-851-released/ (Aufgerufen am 27.01.2017)
Seite 48
4 Design eines Themes
Für Präsentationszwecke wurden bereits zwei Themes zum Zeitpunkt der Bachelorarbeit entwickelt. In
diesem Kapitel wird daher ein Theme in seiner Gestaltung beschrieben.
4.1.1 Das OnePage-Theme
Eine OnePage-Website eignet sich hervorragend als Präsentationsseite für ein bestimmtes Produkt
oder eine Dienstleistung. Diese Art von Website präsentiert mittels einfachen und doch intelligent
gestalteten Elementen auf einen Blick alle interessanten und wichtigen Inhalte. Der Unterschied zu
einer normalen Website ist, dass alle Inhalte auf einer
HTML-Seite ausgegeben werden.
In Verbindung mit JavaScript gesteuerten Elementen wie Parallax-Effekt von Hintergrundbildern,
Flipeffekten von Icons mit versteckten Inhalten, Smooth Scrolling der Website, Masonry-Effekte von
Gridelementen und animierten Navigationsleisten oder Button-Elementen, lassen sich viele interaktive
Spielereien realisieren.
4.1.1.1 Gestaltung des OnePage-Theme
Das OnePage-Theme soll im ersten Moment beim Aufrufen der Seite, ein großer Slider präsentieren.
Auf diesem liegt eine prominente aber dennoch sehr offene Navigationsleiste die rechtsbündig
positioniert ist. Mit großem Schriftgrad und dezenter Linienführung werden die Navigationspunkte
übersichtlich dargestellt.
Das Logo, welches linksbündig gesetzt ist, fügt sich proportional in das Gesamtkonzept ein und
verdeckt das Hintergrundbild nicht. Der Rahmen des Logos fließt mit seiner überdurchschnittlichen
Größe über die Navigation, was eine gewisse Dynamik im Gesamtkonzept entstehen lassen soll.
Unterhalb des Header und Slider-Bereichs, beginnt der erste Inhaltsabschnitt
des OnePage-Theme. Das Hauptziel ist es, dem Element viel Platz zu geben, welches durch eine
vertikale Anordnung der Inhalte erreicht werden soll. Durch einen Hover-Effekt werden versteckte
Inhalte sichtbar.
Seite 49
Danach folgt ein Bildband-Bereich. Das Hintergrundbild wird mittels Parallax-Effekt spannend in Szene
gesetzt. Auch hier gilt es, möglichst viel Raum zu lassen. Auf dem Hintergrundbild wird ein Slider
dargestellt. Die Steuerungspfeile links und rechts werden als Fähnchen über das erste und letzte
Element der vier dargestellten Bilder gelegt.
Unterhalb vom Parallax-Element mit Slider sollen Inhaltselemente dargestellt werden, die aus einem
Bild und Textbereich bestehen. Das Bild wird mittels eines Kreises und einer gefärbten Outline
gerahmt. Der Text wird zentriert unter das Bild gesetzt. Durch eine Sliderfunktion werden weitere
Inhaltselemente sichtbar.
Das Kontaktformular soll mit großen Textfeldern arbeiten. Gerade später im mobilen Bereich, müssen
diese vom Nutzer auch in den kleinsten Endgeräten bedienbar sein. Das Kontaktformular wird von
einem Hintergrundbild in Szene gesetzt.
Abbildung 4-1: Screendesign des OnePage-Theme
Seite 50
4.1.1.2 Responsivität
Eine hohe Anzahl angebotener Themes für WordPress und Joomla!, werden auf den meisten mobilen
Endgeräten und Bildschirmen perfekt dargestellt. Deshalb wurde bei der Gestaltung darauf geachtet
wie die Inhalte auf Tablets und Smartphones dargestellt werden.
Für die Umsetzung der Responsivität wurde das Frontend-Framework Bootstrap verwendet. Bei der
Überlegung wie Elemente auf mobilen Geräten positioniert werden sollen, wurde mit Hilfe von
Wireframes eine Studie für diese Arbeit angelegt.
Die Navigationsleiste muss ab Tablet-Hochformat am oberen Rand der Website positioniert sein. Ein
Hamburger-Menü bietet dem Benutzer die Navigation ein- und auszublenden. Hier sollen die
Menüpunkte nach unten aufklappen.
Der große Inhaltsbereich unterhalb des Header- und Slider-Bereichs müssen für eine optimale Ansicht
anders angeordnet werden. Deshalb wird das Bild mittig des Bildschirms positioniert, während der
Textbereich nach unten fließt.
Die Inhaltselemente mit Sliderfunktionen werden je nach Größe und Haltung des mobilen Endgerätes
in verschiedenen Aufteilungen angezeigt.
Abbildung 4-2: Wireframe-Studie über das responsive Verhalten des OnePage-Theme
Seite 51
5 Benutzung des Theme Managers
In diesem Kapitel die genaue Handhabung erklärt werden. Beginnend mit der Installation über das
Arbeiten im Theme Manager mit Themes und deren Anpassung, wird aufgezeigt, welche
Erweiterungen das System dadurch erlangt hat.
5.1 Installation des Theme Managers
Da sich die Extension zum Zeitpunkt der Bachelorarbeit im Prototyp-Status befindet, muss der Theme
Manager über FileZilla in das TYPO3-Projekt in den Ordner für Extension eingefügt werden. Diesen
findet man unter den htdocs/typo3conf/ext/.
Nachdem die Extension in den ext-Ordner hinzugefügt wurde, erscheint sie deaktiviert im Modul
Erweiterungen unter Installierte Extensions. Für das schnelle Finden in der Extensionliste, gibt man in
das Suchfeld „thememanager“ ein. Der Theme Manager wird dann als einziger Treffer angezeigt. Über
das Icon mit dem Würfel und dem Plus, wird die Extension nun aktiviert.
5.2 Theme-Manager
Über das Modul Theme Manager gelangt man in die Listenansicht. Das aktive Theme wird an erster
Stelle angezeigt. Jedes Theme besitzt einen Detail-Button. Durch Klick auf den Detail-Button gelangt
man in die Detailansicht und ebenso wieder zurück.
Inaktive Themes können jederzeit gelöscht werden. Dazu genügt es, auf
das Mülleimer-Symbol zu klicken. Das aktive Theme kann nicht gelöscht werden. Dafür besitzt es einen
Bearbeiten-Icon. Hier wird nun eine Ansicht geladen, die alle Einstellungsmöglichkeiten aufzeigt.
Anhand der Beschriftung ist immer klar, was einzutragen ist. Durch das Speichern gelangt man zurück
in die Listenansicht.
Seite 52
Zum Aktiv-Schalten eines Themes, kann auf den Schieber geklickt werden. Nun wird dieser als aktiv
angezeigt. Unterhalb der aufgelisteten Themes befindet sich das Upload-Feld. Mit diesem kann ein
Theme als Zip hochgeladen werden.
5.3 Backend Layout
Das Backend Layout gibt vor, wie die Seite im Frontend strukturiert ist und spiegelt auch diese Struktur
als Raster im Backend wieder. Möchte der Benutzer auf der Startseite ein großes Aufmacherbild und
dafür auf den Unterseiten nicht, wählt dieser beispielsweise für die Startseite das Backend Layout
„Aufmacherbild und Inhaltsbereich“ während für die Unterseiten das Layout „Inhaltsbereich“ gewählt
wird.
Um ein Backend Layout für eine Seite zu bestimmen, wird auf das Modul „Seite“ gewechselt. Im
Bearbeitungsbereich oben werden vier Icons dargestellt. Durch Klick auf das Blatt-mit-Stift-Icon öffnet
sich das „Seite bearbeiten“ Fenster. Unter dem Reiter „Erscheinungsbild“ kann unter Backend Layout
gewählt werden, was das Theme anbietet. Durch Speichern und Klick auf das X-Icon wechselt man auf
die geänderte Backend Ansicht.
Abbildung 5-1: Backend-Layout über die Seiteneigenschaft auswählen
Seite 53
5.4 Gridelements
Gridelements sind Inhaltselemente. Mit Hilfe von Gridelements, können auf Basis des Framework
Bootstrap individuelle Spalten erstellt werden. Über das Modul „Seite“ kann im Bearbeitungsbereich
auf Inhalt-Button gedrückt werden. Hier erscheint eine neue Ansicht mit „Neues Inhaltselement“. Im
Reiter „Raster-Elemente“ werden alle Gridelements aufgelistet, die das Theme anbietet. Wählt man
ein Raster-Element aus wird wieder eine neue Ansicht geladen, mit dem das Raster-Element
eingestellt werden kann. Zum Beispiel die Spaltenverteilung, ob eine Hintergrundfarbe erstellt werden
soll, oder ob das Hintergrundbild transparent, grauskaliert oder neutral wirken soll. Dabei sind diese
Einstellungen vorgegeben.
Abbildung 5-2: Auswahl an Rasterelemente die das aktive Theme im Backend anbietet
Seite 54
5.5 Typischer Seiteninhalt
Unter „Neues Inhaltselement“ im Reiter „Typischer Seiteninhalt“ sind die von TYPO3 vorgegebene
Inhaltselemente. Das jeweilige aktive Theme besitzt eigens ausgelagerte Templates der Seiteninhalte.
Das heißt, die Inhaltselemente sind bereits gestaltet, bestimmte Überschriften vordefiniert. Der Rich-
Text-Editor verfügt über angelegte Schriftfarben vom Theme und vieles mehr.
Abbildung 5-3: Inhaltselemente, welche von TYPO3 zur Verfügung stellt
Seite 55
6 Diskussion
Die entwickelte Extension Theme Manager, soll nun von der Pro- und Kontra-Seite betrachtet werden.
Mit dem Theme Manager in Verbindung mit Themes, erspart man dem Benutzer von TYPO3
aufwendige Konfigurationen mittels TypoScript. Die von den Themes mitgelieferten TypoScript-
Konfigurationen für das Backend und das Frontend, sind mit deutlich wenigem Zeitaufwand möglich.
Die Bereitstellung von Backend Layouts, Gridelements und angepassten
Fluid-Styled-Content werden von den jeweilig aktiven Theme individuell zur Verfügung gestellt.
Als erfolgreich kann auch die individuelle Anpassung des Themes aufgefasst werden. Statt bei
Änderungen der Gestaltung des Themes seitens PHP eine CSS-Datei erstellt wird, werden die neuen
Werte in einer JSON-Datei gespeichert und von SASS importiert.
Bei der Importierung aus der JSON-Datei in die SASS-Datei ist Optimierungsbedarf vorhanden. Die
Laufzeit des Compilers, der die Daten für die zwei Dateien verarbeitet, muss dementsprechend
verbessert werden.
Das Initialisieren von bereits vorgefertigten Seitenbäumen beim Aktivieren eines Themes konnte in
der Bachelorarbeit nicht erreicht werden. Auch die Erstellung von komplett eigenen Inhalten in
Unabhängigkeit von Extension wie Mask konnte zu einem gewissen Teil erreicht nicht werden.
Seite 56
7 Konklusion
Die in dieser Arbeit zum Thema „Implementierungsmöglichkeiten von Themes in eine TYPO3-
Installation“ gewonnenen Erkenntnissen werden zum Abschluss der Thesis in diesem Kapitel
zusammengefasst.
7.1 Zusammenfassung
Die gewonnenen Erkenntnisse und die Programmierung eines Prototyps zeigt, dass sich durch die
letzten Jahre TYPO3 in Richtung Flexibilität und Einfachheit entwickelt hat. Der Grundstein dieser
Entwicklung begann bereits durch die Entwicklung des
PHP-Framework Extbase und der Templating-Engine Fluid.
Mit dem neuen TYPO3 7.6 und der Einführung der neuen System-Extension
Fluid-Styled-Content in Verbindung von Extbase und Fluid können Systeme in TYPO3 entwickelt
werden, mit denen Nutzern ohne oder mit geringen Programmierkenntnissen in TYPO3 umgehen
können. Die Entwicklung des Theme Managers und der Themes innerhalb einer TYPO3-Installation
zeigt, dass Verwaltungssysteme, wie der Theme Manager,
im CMS umsetzbar sind.
Für Laien muss der Prototyp des Theme Managers noch weiter ausgebaut werden. Gerade zu Beginn
der Installation des Theme Managers über FileZilla wird es für
nicht-computeraffine Anwender schwierig. Dennoch könnte ein Benutzer mit geringer Erfahrung in
TYPO3 den Theme Manager bedienen, Themes hochladen und individuell anpassen.
In Bezug auf den Wettbewerb mit Anbieter von WordPress und Joomla!-Projekten, kann die hier in der
Bachelorarbeit entwickelte Extension andere TYPO3-Entwickler sehr nützlich sein. Gerade durch die
extremen Zeitersparnisse am Anfang des Projektes entfallen lästige Konfigurationen mittels
TypoScript. Das steigert die Wirtschaftlichkeit einer TYPO3-Agentur. Hohe Projektkosten reduzieren
sich und Ressourcen für weitere Projekte werden freigesetzt.
Seite 57
7.2 Ausblick
Pläne für die Erweiterung des Theme Managers sind bereits vorhanden. Optimierungen werden
vorgenommen, damit gewisse Laufzeiten verkürzt werden. Insbesondere die Vorgänge beim Speichern
von Änderungen an den Themes werden optimiert.
Großes Hauptaugenmerk nach der Optimierung soll auf das Importieren von mitgelieferten
Inhaltselement aus dem Theme in das TYPO3-System sein. Damit soll die Abhängigkeit von Extensions
wie Mask gelöst werden, mit denen dynamischen Inhaltselemente werden.
Zusammen mit der SICOR KDL wird daran gearbeitet, die Extension auch multidomainfähig zu
programmieren. So soll es ermöglicht werden, mehreren Webauftritten innerhalb einer TYPO3-
Installation jeweils ein Theme zu zuordnen.
Für marketing-wissenschaftliche Zwecke, wird der Theme Manager über eine Zufallsfunktion verfügen.
Beim erneuten laden einer Website wird die Extension ein installiertes Theme zufällig auswählen und
aktivieren.
Ein weiterer Punkt betrifft die Theme-Entwicklung über den Theme Manager. Über ein „Theme
erstellen“-Button soll für Entwickler ein Dummy-Theme erstellt werden. In diesem soll bereits die
komplette Struktur eines Themes angelegt sein. Auf dieser Basis kann der Entwickler sein eigenes
Theme erstellen.
Zudem wird in Zusammenarbeit mit den Entwicklern der SICOR KDL überlegt, neben Themes spezielle
Inhaltselemente zu verwalten. Dafür wird im Theme Manager zum Beispiel eine Rubrik
„Inhaltselement“ zur Verfügung gestellt.
Seite 58
8 Bibliographie
- Gino Cremer: Das WordPress Praxishandbuch
Verlage: Franzis, 3., aktualisierte und stark erweitere Auflage, 2015
- Richard Eisenmenger: Joomla! 3 – Das umfassende Handbuch
Verlage: Rheinwerk Computing, 1. Auflage, 2016
- Patrick Lobacher: TYPO3 Extbase – Moderne Extension-Entwicklung
für TYPO3 CMS mit Extbase & Fluid
Verlage: Open Source Press, 1. Auflage, 2014
- Frank Bongers, Michael Hassel, Andreas Stöckl: Einstieg in TYPO3 CMS 6
– Inkl. Einführung in TypoScript
Verlage: Galileo Computing, 6., aktualisierte Auflage, 2013
Seite 59
Selbstständigkeitserklärung
Hiermit erkläre ich, dass ich die vorliegende Arbeit selbstständig und nur unter Verwendung der
angegebenen Literatur und Hilfsmittel angefertigt habe.
Stellen, die wörtlich oder sinngemäß aus Quellen entnommen wurden, sind als solche kenntlich
gemacht.
Diese Arbeit wurde in gleicher oder ähnlicher Form noch keiner anderen Prüfungsbehörde vorgelegt.
Augsburg, den 01. Februar 2017
Sven Dieter Walther