Das Typo3 Backend

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Vorwort

Dieses Seminar soll eine Einführung in das Backend von Typo3 geben. Beispiele und Texte basieren, sofern nicht anders gekennzeichnet, auf der Version 4.0 von Typo3. Teilweise können Themen wegen ihres Umfangs nicht in der gesamten Tiefe behandelt werden. Im Anhang ist eine Übersicht von weiterführenden Links zu finden, die einen tieferen Einstieg in Typo3 ermöglichen.

Was ist ein CMS ?

Die Abkürzung CMS steht für Content Management System, was auf deutsch übersetzt soviel heißt wie „Verwaltungssystem für Inhalte“.

Die Notwendigkeit von CMS Systemen im Web entstand dadurch, dass es möglich werden sollte komplexe Webseiten einfacher verwalten zu können. Dabei sollten Layout, Programmierung und Inhalt klar von einander getrennt werden.

Durch diese Trennung ist es möglich, dass auch Autoren, die mit Webtechnologien wie HTML, CSS, PHP etc. weniger vertraut sind, eigene Inhalte publizieren können.

Im geschäftlichen Umfeld ist es erwünscht, dass alle Webseiten dem Corporate Design der Firma entsprechen und in das Gesamtbild passen. Zu diesem Zweck kann der Administrator Vorgaben machen, damit alle Seiten dem Corporate Design entsprechen.

Das CMS fügt Inhalte mit einem Template zusammen und generiert daraus Webseiten.

Da die Erforderlichkeit von solchen Systemen von vielen erkannt wurde, gibt es entsprechend viele Lösungen auf dem Markt. Die Palette reicht von einfachen Redaktionssystemen bis hin zu komplexen Systemen mit eigener Benutzerverwaltung, Medienverwaltung und Unterstützung von Workflows etc.

Im geschäftlichen Einsatz (Enterprise Umfeld), werden besondere Anforderungen an ein solches System gestellt:

  1. Flexibilität
  2. Möglichkeiten zur Integration anderer Systeme
  3. Erweiterbarkeit durch Module
  4. Skalierbarkeit
  5. Performance
  6. Umfangreiches Rechtesystem um Benutzerrechte optimal anzupassen

Im Bereich der freien Content Management Systeme ist Typo3 eines der wenigen Systeme das diesen Anforderungen in vielen Aspeketen gerecht wird.

Was ist Typo3 ?

Logo-typo3.gif

Typo3 ist ein Open Source CMS. Es ist aufgeteilt in zwei Bereiche, und zwar in Frontend und Backend:

  • Das Frontend ist die erzeugte Webseite, so wie der Besucher sie sieht. Kleine Änderungen können von Autoren auch im Frontend erledigt werden.
  • Das Backend ist der Verwaltungsbereich der Webseite. Im Backend können Administratoren, Redakteure und andere Backendbenutzer die Webseite bearbeiten.

Zusätzlich existiert ein Typo3 Extension Repository (TER), das viele hunderte von Erweiterungen anbietet und mit denen der Benutzer sein Typo3 System an seine Bedürfnisse anpassen kann.

Typo3 basiert auf der Skriptsprache PHP und der Datenbank MySQL, wobei der Einsatz einer anderen Datenbank auch möglich ist.

Mehr Informationen, sowie Download Links zur aktuellen Version und Paketen bietet die Typo3 Website (www.typo3.org).

Durch die Enterprise Merkmale wird Typo3 schon jetzt bei vielen bekannten Firmen eingesetzt. Zu nennen sind hier u.a.:

  1. DHL (http://www.dhl-eventmanager.de )
  2. Thyssen Krupp Automotive AG (http://www.thyssenkrupp-automotive.de/)
  3. Lilly Pharma (http://www.lilly-pharma.de/)

Unter www.typo3.com ist eine detaillierte Liste mit Referenzen verfügbar.

Nach einer Anfangs kommerziellen Entwicklung wurde die Software unter die GPL Lizenz gestellt. Durch die GPL ist es für jeden frei veränderbar und einsetzbar.

Historische Entwicklung

Die Geschichte von Typo3 beginnt 1997 in Kopenhagen.


1997:

Der dänische Student Kasper Skårhøj hatte die Idee ein neues CMS zu entwickeln. Er beginnt mit ersten Prototypen.

1998:

Kasper Skårhøj gründet mit einem Freund die Firma „superfish.com“ um sein Produkt besser zu vermarkten. Durch die Unterstützung von „Saatchi & Saatchi“ und den besseren BWL Kenntnissen seines Partners gelingt es den beiden Typo3 bekannter zu machen.

Kasper erkennt jedoch, dass die Vermarktung über ein Unternehmen für ihn nicht das Richtige ist. Er einigt sich mit seinem Partner, dass er alle Rechte an Typo3 behält und der Partner dafür den Rest der Firma bekommt.

Kasper verwendet die restliche Zeit um an seinem System zu arbeiten und beschließt nach reiflicher Überlegung es unter die GPL zu stellen.


2000:

Typo3 wird erstmalig für die Öffentlichkeit freigegeben. Es entsteht langsam eine Community rund um Typo3.


2001:

Kasper und seine Frau Rie beschließen eine Snowboard Tour als Community Event durchzuführen, um die Menschen kennenzulernen, die sie bis dahin nur von Emails kennen. Bei der ersten Tour in Splügen nehmen 25 Menschen teil.


2006:

Die Version 4.0 von Typo3 wurde released. Typo3 bietet neue Funktionen, wie mehrere Workspaces und einen neuen Editor im Backend.

Überblick über die Features von Typo3

Typo3 bietet einige außergewöhnliche Features die hier kurz vorgestellt werden:

  1. Automatische Anpassung von Bildern:
    Wenn ein Bild in Typo3 in einem nicht webfähigen Format hochgeladen wird, erkennt Typo3 dies und wandelt es automatisch um. Desweiteren werden Bilder die in eine Webseite eingebunden und verkleinert werden, automatisch serverseitig in die richtige Größe konvertiert.
  2. Versionierung von Inhalten:
    Sämtliche Inhalte werden versioniert, dadurch kann man zu jedem Zeitpunkt zu einem bestimmten Versionsstand einer Seite zurückkehren.
  3. Effizientes Caching:
    Die Seiten in Typo3 werden bei der Ausgabe effizient gecached, so dass sie nicht jedesmal neu generiert werden müssen. Dadurch wird die Perfomance erheblich gesteigert.
  4. Drag and Drop:
    Bilder und Seiten lassen sich im Backend sehr elegant durch Drag and Drop verschieben.

Das Typo3 Backend

Das Backend ist die zentrale Verwaltung von Typo3. Im Backend kann der Administrator die Webseite verwalten und Redakteure können Inhalte bearbeiten. Aufgerufen wird das Backend über einen normalen Browser und ist unter folgender Adresse zu finden:

http://www.meindomain.de/typo3/

Überblick über das Backend

Das Typo3 Backend ist in 4 Bereiche unterteilt. Diese Unterteilung besteht, bis auf wenige Ausnahmen im gesamten Backendbereich.

Übersicht Backend
  1. Backendnavigation
    Über diese Navigation sind alle Bereiche des Backends zu erreichen (siehe auch Die einzelnen Menüpunkte des Typo3 Backends im Detail)
  2. Pagetree
    Der Pagetree repräsentiert die Struktur der Webseite, es gibt außer den Seitenbehältern auch Verweise, Seiten die nicht im Menü angezeigt werden sollen, oder Sysfolders in denen man relevante Dinge für eine Seite speichern kann. Sysfolders sind z.B. sinnvoll um dort Frontendbenutzer, Templates oder Datensätze von Plugins wie z.B. News oder Votes zu speichern. In der Dateiansicht ist in diesem Bereich der Baum des Dateisystems zu sehen.
  3. Editorbereich
    In diesem Bereich können Seiten oder andere Elemente bearbeitet werden. Bei einem Klick auf einen Seitencontainer im Pagetree öffnet sich in diesem Bereich die Detailansicht. In der Detailansicht lassen sich z.B. neue Contentelemente anlegen.
  4. Suche und Workspaceauswahl
    In diesem Bereich kann man zwischen den Workspaces umschalten. Standardmäßig gibt es zwei Workspaces, den Live Workspace und den Draft Work'space. Im Live Workspace werden Änderungen an der Seite sofort sichtbar. Im Draft Workspace hat man eine Entwurfsansicht. In dieser Entwurfsansicht kann man umfangreiche Änderungen durchführen und diese dann gebündelt in den Live Workspace übertragen. Auf diese Möglichkeit wird im Abschnitt „Versionierung von Inhalten“ eingegangen.

Seiten erstellen

Das Ziel eines CMS ist es Inhalte zu publizieren. In Typo3 wird im ersten Schritt ein Behälter für eine Webseite angelegt. Dieser Behälter erscheint, sofern ausgewählt, in der Navigation. Im zweiten Schritt werden die Inhalte in einen Seitenbehälter integriert und plaziert. In diesem Abschnitt soll es darum gehen, wie man Seitenbehälter erzeugt und darin Inhalte anlegt.

Seitenbehälter für Inhalte erzeugen

"Web -> Seite"

Zum Erstellen eines Seitenbehälters ist im Backend der Bereich Web -> Seite zu öffnen.

Durch einen Klick mit der linken Maustaste auf den Menüpunkt Seite öffnet sich im mittleren Bereich des Backend's der Pagetree. Im Pagetree navigiert man zu dem Menüpunkt unter dem ein neuer Seitenbehälter angelegt werden soll. Durch einen Klick auf das + vor einer Seite öffnet sich die nächste Ebene des Astes.

"Kontextmenü eines Pagetree Objekts"

Mit Hilfe eines Klicks auf den Text eines Baumeintrags öffnet sich im rechten Bereich die Bearbeitungsansicht dieses Eintrags.

Durch einen Klick auf das Symbol vor einem Baumeintrag öffnet sich ein Kontextmenü, um diesen Eintrag zu bearbeiten oder neue Elemente in den Baum einzufügen.

Um einen neuen Seitenbehälter anzulegen, wählen Sie den Menüpunkt Neu im Kontextmenü.

Im rechten Bereich erscheint nun eine Auswahl der möglichen Elemente, die an dieser Position des Pagetree's eingefügt werden können. Wählen Sie dort den Bereich Seit (en) aus. Daraufhin öffnet sich im rechten Bereich des Backend's ein Dialog in dem Angaben zu dem zu erstellenden Seitenbehälter gemacht werden.

Detailierte Angaben zum Erstellungsdialog für Seitencontainer


Nachdem im Formular alle erforderlichen Angaben zum neuen Seitenbehälter gemacht wurden, muss es gespeichert werden. Daraufhin erscheint der neue Seitenbehälter im Pagetree.

Überblick über die verschiedenen Arten von Inhalten

Im vorherigen Abschnitt wurde ein Seitenbehälter angelegt. In diesem Seitenbehälter können verschiedene Inhaltselemente platziert werden. In diesem Abschnitt soll es darum gehen, welche Arten von Inhalten es gibt und wie ein Seitenbehälter mit Inhalten befüllt werden kann.

Zunächst ist dazu im Backendmenü der Menüpunkt Web -> Seite auszuwählen und zu dem Seitenbehälter zu navigieren in den man Inhalte einfügen möchte. Durch einen Klick auf den Text im Pagetree öffnet sich im rechten Bereich des Backend's eine schematische Übersicht dieser Seite.

Abhängig vom Layout gibt es mehrere Spalten in denen Inhalte eingebunden werden können. In diesem Dialog ist entweder der Button Seiteninhalt anlegen oder ein + oberhalb der Spalte auszuwählen, um ein Content-Element anzulegen.

"Anlegen eines Seiteninhalts"

Nach der Auswahl erscheint eine Liste der Möglichen Inhaltsarten:

Typische Seiteninhalte
"Auswahl des Inhaltstypen"
  • Nomaler Text
    Dieser Typ ist vorgesehen für Seiten die nur Text enthalten. Es ist zwar ohne weiteres möglich später bei diesem Inhaltstyp über den Editor Bilder einzubinden, dazu wird aber nicht geraten da dann die Medien und der Text nicht klar von einander getrennt sind.
  • Text mit Bild
    Dieser Seitentyp bietet die Möglichkeit neben dem Text auch Bilder einzufügen. Die Bilder sind vom Content getrennt und können durch Angaben im Formular positioniert werden. Dadurch hat der Administrator eine bessere Kontrolle über das Design. Bei jedem Bild lässt sich die Größe frei festlegen und auch alternativ Texte eingeben. Die Funktion „klick vergrößern“ ermöglicht es dem Besucher der Webseite Bilder durch einen Klick darauf zu vergrößern. Bei der Eingabe von Breite und Höhe skaliert Typo3 Bilder automatisch auf die richtige Größe.
  • Nur Bilder
    Dieser Inhaltstyp eignet sich für eine größere Anzahl von Bildern, dadurch kann man z.B. bequem eine Bildergalerie einrichten.
  • Aufzählungen
    Mit diesem Inhaltstyp kann man nummerierte oder auch Aufzählungslisten mit Punkten erzeugen
  • Tabellen
    Dieser Inhaltstyp wird genutzt um Tabellen in eine Seite zu integrieren. Einzelne Zellen werden durch die Eingabe von | getrennt und jede Zeile im Editorfeld repräsentiert eine Tabellenzeile. Desweiteren steht ein Wizard zum Erstellen von Tabellen zur Verfügung.
Spezielle Elemente
  • Dateiverweise
    Mit diesem Inhaltstyp kann ein Downloadverzeichnis erstellt werden, dabei können Dateien eingebunden werden, die auf dem Webserver im Ordner fileadmin liegen oder Dateien die beim Erstellen des Verzeichnisses hochgeladen werden.
  • Multimedia
    Durch den Inhaltstyp Multimedia lassen sich beispielsweise Filme oder Musikdateien in eine Webseite einbauen.
  • Sitemap
    Der Inhaltstyp Sitemap erzeugt eine Übersicht über die Struktur der Frontendwebseite.
  • Reines HTML
    Durch diesen Inhaltstyp hat der Redakteur die Möglichkeit Inhalte durch reines HTML zu definieren.
Formulare
  • Mailformular
    Über diesen Typ kann ein Kontaktformular in die Webseite integriert werden, damit Besucher die Möglichkeit haben Kontakt mit dem Betreiber aufzunehmen.
  • Suchformular
    Mit diesem Inhaltstyp lässt sich schnell eine Volltextsuche in die Webseite integrieren.
  • Anmeldeformular
    Durch diesen Inhaltstyp lässt sich ein Loginformular für Frondendbenutzer in eine Webseite integrieren.
Plugins
  • Allgemeines Plugin
    Mit diesem Typ kann ein Plugin aus dem TER eingebunden werden. Die Liste der Inhaltstypen von Plugins wird durch die Installation von Extensions weiter ergänzt.

Inhalte in Seitenbehälter integrieren

Im folgenden Abschnitt werde ich exemplarisch am Inhaltstyp Seite mit Bild erklären, wie man Inhalte in einen Seitenbehälter integriert.

Zuächst ist im Pagetree zu dem Seitenbehälter zu navigieren, in dem ein neues Inhaltselement angelegt werden soll. In der Bearbeitungsansicht ist wie in Abschnitt 4.2.2 der Button Seiteninhalt anlegen zu wählen und dann der Typ Text mit Bild. Daraufhin öffnet sich ein Formular, in dem Angaben zum Inhalt der Seite gemacht werden können. Dieses Formular ist sehr umfangreich, deshalb gehe ich hier nur auf die wesentlichen Einträge ein.

Überschrift

In diesem Feld wird die Überschrift der Seite eingetragen, welche im Frontend abhängig von der TypoScript-Konfiguration entsprechend mit einem Layout versehen wird

Text

In diesem Bereich ist der Rich Text Editor (RTE) zu finden, mit diesem werden die Inhalte der Seite eingetragen. Die Bedienung des RTE gleicht einer Textverarbeitungssoftware.

Bilder / Position / Breite

In diesem Bereich können Bilder in die Webseite eingefügt werden. Entweder können die Bilder aus dem Filemount in /fileadmin eingebunden werden, oder direkt über das Formular auf den Server geladen werden.

Im Bereich Position kann angegeben werden, wo das Bild im Text positioniert werden soll.

Mit der Breite kann bestimmt werden wie breit das Bild auf der Webseite (in Pixeln) erscheinen soll, hier reicht übrigens die Angabe der Breite aus, weil die Höhe automatisch berechnet wird. Desweiteren lassen sich Bilder mit Klick-vergrössern vergrößern oder einen Rahmen festlegen. Im folgenden Screenshot wird die die Integration eines Bildes dargestellt:

"Bild in die Webseite integrieren"
"Das Ergebnis im Frontend"

Das Ergebnis kann sich sehen lassen. Wie zu sehen ist, wurde die Überschrift mit besonderer Formatierung oben links gelayoutet.

Der Inhalt wurde eingefügt und das Bild in der oberen rechten Ecke positioniert. Um das Bild wurde ein Rahmen erzeugt und es lässt sicht durch einen Klick vergrössern.

Der Richtext Editor

Die Inhalte einer Seite können in Typo3 mit dem Richtext Editor bearbeitet werden. Der RTE (Richtext Editor) gleicht von der Bedienung einer Textverarbeitung.

"Der Richtext Editor"

Mit Hilfe des Richtext Editor's können Texte formatiert werden (fett, kursiv) und Inhalte wie Tabellen und Bilder in die Seite direkt integriert werden.

Vor der Version 4.0 von Typo3 gab es immer Schwierigkeiten mit der Browserkompatibilität des RTE. Der in der Version 4.0 enthaltene Editor läuft nun jedoch unter dem Internet Explorer und dem Mozilla Firefox problemlos.

Versionierung von Inhalten

In Typo3 gibt es die Möglichkeit Änderungen an einer Seite zu verfolgen und rückgängig zu machen. Um die Historie der Änderungen zu öffnen ist in der Detailansicht eines Seitenbehälters der Menüpunkt Änderungsverlauf des Datensatzes anzeigen auszuwählen. In der Änderungsverlaufsansicht lassen sich dann einzelne Änderungen rückgängig machen.

Änderungsverlauf-des-datensatzes-anzeigen.jpg

Mit der Version 4.0 von Typo3 wurde mit dem Workspacekonzept eine neue Art der Versionierung eingeführt. In der Entwurfsansicht lassen sich umfangreiche Änderungen an Seiten vornehmen und später in die produktive Umgebung der Webseite übernehmen. Über die Workspaceauswahl in der rechten unteren Ecke des Backend's lässt sich der aktuell zu bearbeitende Workspace auswählen.

Workspace-auswahl.jpg

Nachdem Änderungen im Draft Workspace vorgenommen wurden, können diese über den Menüpunkt Versionierung in den Live Workspace übernommen werden.

Workspace-versionierung-anwenden.jpg

Benutzerverwaltung im Typo3 Backend

"Backend: Tools -> Benutzer"

Typo3 verfügt über eine Benutzerverwaltung und eine Rechteverwaltung im Backend. In diesem Abschnitt wird am Beispiel der Gruppe Redakteur erklärt, wie eine Gruppe angelegt wird, ein Benutzer einer Gruppe zugeordnet wird und die entsprechenden Rechte zugeteilt werden.

Zunächst ist ein Benutzer im Backend anzulegen. Um einen Benutzer zu erstellen ist der Eintrag Tools -> Benutzer zu wählen.

Im Bereich 2-3 öffnet sich eine Übersicht der Benutzer mit der Möglichkeit diese Ansicht zu filtern.

"Übersicht der vorhandenen Backendbenutzer"

Auf die Benutzer können folgende Aktionen angewendet werden:

  • Information: Zeigt eine Übersicht des Benutzers an.
  • Bearbeiten: Einstellungen des Benutzers bearbeiten
  • Deaktivieren: Den Benutzer temporär deaktivieren.
  • Löschen: Den Benutzer dauerhaft löschen.
  • SU (weiß): Switch User: In die Backendansicht dieses Benutzers wechseln. Wenn man danach mit seinem normalen Backend-Account weiter arbeiten möchte muss man sich neu anmelden.
  • SU (rot): Switch User: In die Backendansicht dieses Benutzers temporär wechseln. Bei einem Logout kehrt man in seine persönliche Backend-Ansicht zurück.


Backendbenutzer anlegen

Mit dem + oberhalb der Benutzerliste kann ein neuer Benutzer angelegt werden, alternativ kann über den Rootknoten bei dem Eintrag Web -> Seite mit Neuer Backendbenutzer ein Benutzer angelegt werden.

Die Felder bei der Erzeugung eines Benutzers haben folgende Bedeutung:

  • Benutzername / Passwort: Logindaten des Benutzers
  • Admin: Muss angekreuzt werden wenn der Benutzer ein Administrator sein soll.
  • Groups: In diesem Bereich werden die Gruppen eingetragen, zu denen ein Benutzer gehören soll, wobei der erste Eintrag die primäre Gruppe des Benutzers ist. In diesem Fall gehört der Benutzer noch zu keiner Gruppe, da diese noch nicht angelegt wurde.
  • Modules: In diesem Bereich wird angegeben welche Backend Module der Benutzer sehen soll.
  • DB Mounts: In diesem Bereich wird eingetragen, welche Bereiche des Pagetree der Benutzer sehen kann. Zum Bearbeiten sind die Rechte auf das jeweilige Element nötig.
  • Filemounts: In diesem Feld wird angegeben welchen Bereich der Benutzer im Backend unter dem Menüpunkt Datei -> Dateiliste sehen kann. Dadurch lassen sich Ordner auf Personen(gruppen) beschränken. Normalerweise liegt ein Filemount innerhalb des Ordners fileadmin.


Die DB- und File- Mounts können und sollten auch von der Gruppe übernommen werden, um die Administration zu erleichtern.

Sind alle Daten zum Benutzer eingetragen, kann dieser gespeichert werden.

Backendgruppen anlegen

In diesem Abschnitt soll eine Gruppe Redakteur angelegt werden. Dazu wird über Web -> Seite das Kontextmenü des Rootknotens (Weltkugel) ausgewählt. Dort ist über den Menüpunkt Neu -> Backendbenutzergruppe eine neue Gruppe anzulegen.

Im Formular ist ein Gruppenname einzutragen. Im Feld DB-Mount ist ein Eintrag auszuwählen, ab dem der Pagetree für diese Benutzergruppe eingebunden werden soll. In diesem Fall die Startseite, die Redakteure dieser Webseite sollten alle Unterseiten bearbeiten können.

Im Bereich Filemount ist ein Ordner anzugeben, der unter Datei -> Dateiliste eingebunden werden soll. In diesem Fall habe ich einen Ordner Bilder innerhalb von /fileadmin ausgewählt. Redakteure sollen nur Bilder aus diesem Ordner verwenden können.

"Einrichtung eines Filemounts"

Im Bereich „Workspaces“ sind die Workspaces zu wählen; Benutzer der Gruppe sollen diese nutzen können. Wenn alle Einstellungen gemacht wurden, ist die Gruppe zu speichern. Nun wurde eine Gruppe erstellt sowie ein Benutzer.

Backendbenutzer einer Backendgruppe zuordnen

Um einen Benutzer einer Gruppe zuzuordnen ist das Modul Tools -> Benutzer in der linken Backendnavigation zu wählen. Aus der Benutzerliste ist der vorher erstellte Benutzer zum „Editieren“ über das Bleistiftsymbol auszuwählen.

In der Gruppenliste ist nun die neue Gruppe verfügbar. Durch einen Klick auf eine Gruppe in der rechten Liste, wird die Gruppe in die Liste der zugeordneten Gruppen aufgenommen.

"Liste der verfügbaren Gruppen"

Da der Benutzer auch die DB und Filemounts der Gruppe übernehmen soll, ist dies ebenfalls im Formular auszuwählen.

"Gruppenvererbung von DB und Filemounts"

Berechtigungen im Pagetree anpassen

Da der Benutzer die Seiten editieren können soll, müssen die Berechtigungen der Seiten geändert werden. Die Gruppe "Redakteur" soll alle Seiten editieren, neue anlegen, aber keine vorhandenen Seiten löschen können. Um die Rechte der einzelnen Seiten zu bearbeiten ist das Modul Web -> Zugriff zu öffnen. Im rechten Bereich des Backend's ist die Struktur der Seite und die jeweiligen Berechtigungen zu sehen. Bei einem Klick auf den Bleistift vor einem Eintrag lassen sich die Berechtigungen dieser Seite einstellen.

"Rechtevergabe"

Als Gruppe ist die Gruppe Redakteur zu wählen.

Der Aufbau der Rechte ist vom Prinzip ähnlich aufgebaut wie unter Unix. Es gibt einen Besitzer und eine Gruppe für jeden Datensatz. Durch die Selectbox unterhalb der Rechteeinstellung lassen sich Rechte rekursiv auf einen Teilbaum anwenden.

Wenn alle Einstellungen der Gruppe vorgenommen wurden, kann geprüft werden, ob der Backendbereich des Benutzers so aussieht und funktioniert, wie es vorgesehen ist. Dazu wählt der Nutzer unter Tools -> Benutzer, den roten Button SU in der Zeile des jeweiligen Benutzers.

"Backendansicht eines Redakteurs"

Über die Konfiguration der Gruppe im Bereich Tools -> Benutzer lassen sich viele weitere Einschränkungen für Gruppen machen. Auf diese Einschränkungen kann hier nicht im vollem Umfang eingegangen werden.

Integration von Inhalten in ein Template

Damit der Inhalt mit dem Design der Webseite zusammengefügt werden kann, ist es notwendig ein Template zu integrieren. Typo3 liefert einige Templates als Vorlage mit aus. Meist ist es jedoch erwünscht ein eigenes individuelles Template zu erzeugen. In Typo3 gibt es mehrere Möglichkeiten Templates zu erzeugen.

  1. TypoScript Templates:
    Es ist möglich mit TypoScript komplette Templates zu erzeugen. TypoScript ist eine Typo3 interne Konfigurationssprache, die es erlaubt gewisse Einstellungen in Typo3 vorzunehmen. Technisch gesehen werden in TypoScript gemachte Einstellungen in PHP Arrays überführt und können im Quelltext von Typo3 und Erweiterungen genutzt werden. Die Möglichkeiten von Typo3Script gehen jedoch viel weiter, so ist es z.B. möglich Textausgaben von Extensions in Grafiken zu konvertieren. Die TypoScript Referenz ist unter folgendem Link zu finden.
  2. Templates aus HTML Vorlagen
    Da das Erzeugen von kompletten Templates mit TypoScript sehr aufwendig wäre, gibt es die Möglichkeit Templates aus HTML Dateien auszulesen.
    In dem HTML Template werden Marker und Subparts eingefügt, um später ersetzt zu werden. Ein Marker ist ein Text, welcher mit ### beginnt und endet.

Bsp. für einen Marker innerhalb eines HTML-Template:

###TESTMARKER###

Ein Subpart besteht aus zwei HTML Kommentaren, die wie Marker aussehen, jedoch noch den Zusatz „start und end“ enthalten und als Kommentare auch dann nicht sichtbar sind, wenn sie nicht ersetzt werden.

Bsp. für einen Subpart:

<!-- ###DOCUMENT_BODY### START--> 
<!-- ###DOCUMENT_BODY### END--> 

Die HTML Datei wird im Templatedatensatz eingebunden. Über TypoScript lassen sich Subparts und Marker ansprechen und durch Inhalte ersetzen.

Die beiden Templatearten lassen sich kombinieren. In der Regel wird für das Rahmenlayout eine HTML Vorlage verwendet und für einzelne Passagen der Seite TypoScript Templates. Da sich in ein Template andere Templates integrieren lassen, ist es möglich häufig genutzte Teiltemplates in ein eigenes Template auszulagern und so mehrfach zu verwenden.

HTML Templatevorlagen verwenden

"Vorlage für das Template"

In den nächsten Schritten werde ich ein ganz einfaches Template erstellen und Schritt für Schritt in Typo3 umsetzen. Als erstes ist eine HTML Seite mit einem WYSIWYG-Editor wie NVU oder einem normalen Editor in HTML zu erstellen, die als Vorlage für das Template dient.

Es wurde für dieses Beispiel ein Template vorbereitet, welches auf einem Layout mit DIV-Tags, einem CSS und einem Logo basiert. In die einzelnen Bereiche soll später Typo3 die Inhalte einfügen.

Dazu muss als erstes der Quelltext des Templates angepasst werden. Die einzelnen Bereiche, die später ersetzt werden sollen müssen durch Subparts und Marker ausgewiesen werden.

Im linken Bereich soll die Navigation erscheinen, die über den Subpart MENU angesprochen werden soll. Im rechten Bereich soll der Inhalt erscheinen. Außerdem soll im oberen orangenen Layer eine Rootline Navigation eingefügt werden, damit der Besucher später weiß, wo er sich gerade auf der Webseite befindet.

Der Tag, mit dem vorher das Bild eingebaut wurde, wird mit einem Marker (###LOGO###) ersetzt.

Aufbau des HTML Templates nach Einbau von Markern und Subparts

Damit der Browser das Layout so umsetzt wie gewünscht, ist ebenfalls ein CSS File notwendig. Dies hat folgenden Aufbau:

Aufbau der CSS Datei

Nachdem alle Vorbereitungen getroffen sind kann das Template in das Typo3 System übernommen werden.

Templatesetup mit TypoScript

Um ein Template in Typo3 anzulegen und einzubinden ist in der Backendnavigation der Menüpunkt Web -> Template zu wählen. Für dieses Beispiel ist im Pagetree die Startseite auszuwählen. Im rechten Bereich des Backend's ist der Button Create Template for a New Site auszuwählen, oder falls schon ein Template existiert Click here to Edit the whole template record.

Im Formular für das Template sind folgende Einträge zu machen:

  • Template title: Geben sie hier einen aussagekräftigen Titel ein. Anhand diesen Titels ist das Template später im Backend zu sehen.
  • Contants: In diesem Feld können Konstanten definiert werden, auf welche später im Setupfeld zugegriffen werden kann.
  • Setup: Dieses Feld ist das wichtigste Feld im Templatedatensatz. In diesem Feld erfolgt die Konfiguration des Templates mit TypoScript. Für das Beispiel ist folgende Konfiguration notwendig, wobei Kommentare zu den einzelnen Zeilen mit '#' beginnen:
#Kompatibiltität Typo3 4.0
config.simulateStaticDocuments_replacementChar = _

#Erzeugen eines Pageobjekt in „page“
page = PAGE

#Zuweisen des Sytlesheet Files mit * damit die 
#aktuelle Version genutzt wird
page.stylesheet = style*.css

#Typ der Seite ist 0, hiermit können verschiedene 
#Typen ausgewählt werden z.b. für eine Druckansicht
page.typeNum = 0

page.20 = TEMPLATE

#Template ist eine Datei 
page.20.template = FILE

#Der Dateiname ist template*.html, * für aktuelle Version
page.20.template.file = template*.html

#Den Subpart DOCUMENT BODY bearbeiten
page.20.workOnSubpart = DOCUMENT_BODY

#Innerhalb von Documtent Body weitere Subparts bearbeiten
page.20.subparts {
	#Der Subpart CONTENT wird mit 
        #der Ausgabe von styles.content.get ersetzt
	#dies entspricht der mittleren Contentspalte 
	CONTENT < styles.content.get
	
	#Der Subpart MENU ist ein hierachisches Menü 
	MENU = HMENU 

	#Die 1. Ebene des Menüs ist ein Textmenü
   	MENU.1 = TMENU
   	MENU.1 {
		NO = 1
		#Die Einträge werden umschlossen von 
                #<div id="level1"> </div> 
   		NO.allWrap = <div id="level1"> | </div> 
   	} 
   	
	#Die 2. Ebene ist ebenfalls ein Textmenü
   	MENU.2 = TMENU
   	MENU.2 {
		NO = 1
		#Die Einträge werden umschlossen 
                #von <div id="level2"> </div> 
   		NO.allWrap = <div id="level2"> | </div> 
   	} 
}

#An dieser Stelle werden die Marker 
#im Template (page.20) bearbeitet

page.20.marks{
	#Der Marker LOGO ist ein Bild
	LOGO = IMAGE

	#Die Datei für das Bild ist die 
        #aktuelleste Version von logo-typo3.gif
	LOGO.file = logo-typo3*.gif
	
	#Der Marker Rootline ist ein hierachisches Menü
	ROOTLINE = HMENU
	ROOTLINE.special=rootline
	ROOTLINE.special.range= 0 | -1
	ROOTLINE.1=TMENU

	#Die einzelnen Einträge werden durch Slashes getrennt
	ROOTLINE.1.NO.allWrap= |   /   |*| |   /   |*| |
}
  • Ressource: In diesem Feld werden Ressourcen angegeben die im Template verwendet werden; diese können aus den Filemounts ausgewählt oder direkt hochgeladen werden. In diesem Beispiel werden die Dateien template.html, style.css und logo-typo3.gif hochgeladen.
  • Rootlevel: In diesem Feld ist ein Haken zu setzen da dieses Template ein Template in der 1. Ebene ist.
  • Include Static: In diesem Feld ist content (default) und styles.content (default) auszuwählen.
  • Description: In diesem Feld sollte eine Beschreibung des Templates eingetragen werden, damit andere es später leichter haben, das Template zu verstehen.

Fazit

Typo3 ist ein geeignetes Werkzeug um Webseiten zu erstellen und zu verwalten. Mit ein wenig Einarbeitungsaufwand ist die Handhabung des Systems möglich.

Eine Schwierigkeit im Rahmen des Seminares war es, umfangreiche Dialoge, deren Verständnis erforderlich ist, so zu erklären das der Umfang nicht zu groß wird. Ich hoffe dennoch bei einigen Lesern Intresse für Typo3 geweckt zu haben.

Leider konnten interessante Erweiterungen wie z.B. SimulateStatic, RealUrl oder CHC Forum auf Grund des Umfangs nicht behandelt werden. Jedem Interessierten sei deshalb zu empfehlen, in der Literaturliste zu stöbern.

Weiterführende Links und Literatur

Aus diesem Seminar entstandene Website

http://www.typo3-talk.net/

Onlineressourcen:

Typo3 Forum von Mittwald Medien:

http://www.typo3.net/

Typo3 Podcast:

http://typo3.org/podcast/

Umfangreiche Linkliste zu Typo3:

http://www.contentschmiede.de/links-zu-typo3/

Typo3 Handbuch für Redakteure (etwas veraltet)

http://www.mgwebservice.de/uploads/media/Handbuch.PDF

Tutorials von Jochen Weiland

http://www.jweiland.net/typo3cms/howto/

Video Tutorials zu Typo3

http://www.mgwebservice.de/typo3-videos.html