Wie Sie bereits bei der Installation gesehen haben, besteht TYPO3 grundsätzlich aus zwei Teilen - dem Backend und dem Frontend. Während das Frontend für alle da draußen im Web sichtbar ist - es ist die Website, die TYPO3 erzeugt - haben nur Sie und Ihre Mitarbeiter Zugang zum Backend - dem Administrationsbereich der Website. Hierfür ist immer ein Benutzername und ein Passwort erforderlich.

Backend Module

Im Backend gibt es eine Reihe von Modulen im Menü auf der linken Seite. Wenn Sie Seiten editieren und erzeugen möchten, wählen Sie das "Page" Modul:

Jedes Modul hat seine eigenen Inhalte, die es anzeigt. Da Sie der Administrator sind, haben Sie Zugriff auf alle Module. Aber es wird auch andere, "normale" Benutzer geben - diese haben nur Zugriff auf die Module, die Sie für sie ausgewählt haben!

Probieren Sie auf die verschiedenen Module im Menü zu klicken und beobachten Sie, wie sich der Content Frame verändert.

Die Überschrift "Web" im linken Menü wird "Hauptmodul" genannt, und alle Module, die darunter aufgelistet werden, sind "Submodule". Alle Module unterhalb des "Web"-Moduls erzeugen eine zweigeteilte Ansicht im Content Frame - den Page Tree (links #1) und den modulspezifischen Inhalt, der sich auf die ausgewählte Seite im Page Tree bezieht (rechts #2).

Der Page Tree kann erweitert werden, indem Sie auf die Plus-/ Minus-Symbole klicken (#3). Das funktioniert genauso wie mit Ordnern auf Ihrem eigenen Computer. Grundsätzlich können Sie sich den Page Tree als eine Art Verzeichnisstruktur vorstellen, in der Webseiten in einer Hierarchie mit Hauptseiten, Unterseiten und Unter-Unterseiten dargestellt werden.

Klicken auf Titel und Symbole

Was Sie als nächstes über den Page Tree wissen sollten ist, dass Sie sowohl auf das Seitensymbol als auch auf den Seitentitel klicken können - und es macht einen Unterschied!

Wenn Sie auf den Seitentitel klicken, sehen Sie, wie das aktuelle Modul Inhalt im rechten Frame darstellt:

In diesem Fall ist das "Page"-Modul aktiv und zeigt den Inhalt der im Page Tree ausgewählten Seite im rechten Frame. Dort können Sie ihn editieren und vieles mehr. Wir kommen später darauf zurück.

Wenn Sie stattdessen auf das Seitensymbol klicken, erscheint ein kleines kontextsensitives Menü. Dieses wird auch manchmal als Click Menu bezeichnet:

Hinweis: Wenn Sie einen älteren Browser benutzen, wird das Menü nicht direkt neben dem Symbol sondern im oberen Frame des Backends erscheinen. Hier sollten Sie geduldig sein, denn es kann sein, dass es einige Sekunden dauert, bis das Menü eingeblendet wird!

Im Kontextmenü können Sie Optionen wählen, die sich auf diese Seite beziehen! Bei den meisten ist es ziemlich offensichtlich, was sie tun - spielen Sie ein bisschen damit herum, wenn Sie mögen. Für dieses Beispiel habe ich auf "Show" geklickt, was bewirkt, dass sich ein neues Browserfenster öffnet und diese gewählte Seite im Frontend gezeigt wird:

Beachten Sie, wie diese Seite im neuen Fenster gezeigt wird: Das Skript ".../quickstart/index.php?id=13" wird hier nämlich aufgerufen (#1). In TYPO3 wird jede Seite in der Datenbank gespeichert (in einer Tabelle mit Namen "pages") und jede dieser "Page-Records" hat eine eindeutige Nummer (Unique Number - uid). An dieser Stelle wurde der Parameter "id" auf den Wert "13" gesetzt - und offensichtlich muss dies die uid-Nummer der Seite "This week" im Page Tree sein!

Außerdem können Sie sehen, dass der Seiteninhalt (#2) derselbe ist, den Sie im rechten Frame des Page Moduls gesehen haben (falls Sie ihn bemerkt haben), als Sie auf den Seitentitel geklickt haben! Darauf kommen wir nochmal zurück.

Schauen Sie auf die Seitenüberschrift (#3) - hier wird der Seitentitel der Seite, die wir anzeigen, gezeigt ("This week") aber die übergeordnete Seite im Page Tree - "Results" - wird ebenfalls gezeigt. Dies verdeutlicht die Logik des Page Trees - nämlich dass die "This week" Seite eine Unterseite (child) der "Results" Seite (parent) ist.

Schließlich sollten Sie noch einen Blick auf den linken Frame werfen. Dieser spiegelt klar die Hierarchie wider, die wir im Page Tree gesehen haben:

Die technische Umsetzung von Seiten und Unterseiten

Dieser Abschnitt richtet sich an diejenigen, die verstehen wollen, wie die Baumstruktur in der Datenbank technisch funktioniert:

Technisch wird die Beziehung zwischen einer Seite und den Unterseiten über das Feld "pid" (parent id / page id) in der Tabelle pages der Datenbank hergestellt - das "pid" Feld der "This week" Seite enthält die "uid" der Seite mit dem Namen "Results".

Wenn Sie den Mauszeiger über das Seitensymbol der "Results" Seite bewegen und kurz warten, wird dieser Titel-Text erscheinen:

Dies sagt uns, dass die Seite "Results" die uid-Nummer "4" hat. Wir wissen, dass die Seite "This week" die uid "13" hatte (und die Seiten "Last week" und "Reports results" haben die uids 12 und 11).

Wenn wir nun in das Modul "phpMyAdmin" gehen und uns die Tabelle "pages" ansehen (welche alle Page Header records enthält), sollten wir diese Beziehung recht einfach erkennen können:

Offensichtlich haben die "pid" Felder der drei Unterseiten von "Results" den Wert "4" - genauso wie wir es erwartet haben.

Nun haben Sie gelernt, dass

Haben Sie bemerkt, dass einige Seiten aus dem Page Tree nicht im Menü der Website aufgetaucht sind? Nun, diese Seiten waren folgende:

Not in menu

Die "Log in" Seite (#1) wurde nicht angezeigt, weil der Seitentyp (page type) auf "Not in menu" - also nicht im Menü - gesetzt wurde. Das ist besonders nützlich, wenn Sie eine Seite erzeugen wollen, die eben nicht als Menüpunkt erscheinen soll. Trotzdem können Sie auf diese Seite zugreifen, indem Sie manuell auf sie verweisen - oder indem Sie einfach ihre id-Nummer direkt als URL eintippen!

Sie können den "Not in menu"-Modus für eine Seite setzen, indem Sie den Page Header bearbeiten:

Zugriffsgeschützte Seiten

Die "Team pages" Seite (#2) ist nicht sichtbar, weil ihr Zugriff eingeschränkt wurde. Das bedeutet, dass sie nur angezeigt wird, wenn ein Frontend User eingeloggt ist. Dies wird später in diesem Tutorial noch behandelt. Kurz gesagt editieren Sie den Page Header und wählen die Benutzer Gruppe, der Sie den Zugriff erlauben möchten:

sysFolders - Was ist das?

Schließlich werden auch die so genannten "sysFolder" nicht dargestellt (#3). Sie erzeugen einen sysFolder genauso wie Sie eine "Not in menu" Seite erzeugen - wählen Sie stattdessen einfach "sysFolder" als Seitentyp (s.o.).

Aber was ist ein "sysFolder" überhaupt? Nun, grundsätzlich enthalten Seiten, die in TYPO3 erzeugt werden, Inhalte für die Webseiten. Sie erscheinen im Menü und können einen Seitentitel haben. 95% aller Seiten werden auf diese Weise benutzt. Aber Seiten können auch als eine Art Container für Datenbank Elemente dienen, die nicht für die Darstellung auf einer sichtbaren Webseite vorgesehen sind. Und genau dafür gibt es sysFolder! Benutzen Sie sie genau so wie Sie Ordner innerhalb des Dateisystems Ihres Computers verwenden, um verschiedene Dateien in einer organisierten Form zu speichern! Auf die gleiche Weise sind sysFolder "Ordner", die in einer schön sortierten Form Datenbank Elemente innerhalb von TYPO3 enthalten.

In unserem Beispiel enthält der sysFolder "Users" die Website Benutzer, die sich auf der Website anmelden können (mehr darüber später). Sie können den Inhalt des sysFolders sehen, indem Sie das "List" Modul benutzen (das ist quasi der "Explorer" von TYPO3...):

Shortcuts (Verknüpfungen)

Abgesehen von den Seitentypen, die nicht im Menü erschienen, gibt es außerdem zwei mysteriöse Seiten mit einem "Verknüpfungs-Symbol":

Ein Shortcut ist eine nette Funktion, wenn Sie eine Seite haben (leer, ohne Inhalt), die einfach zu einer anderen Seite springen soll! Das ist zum Beispiel nützlich, wenn Sie trotzdem möchten, dass der Link in einem Menü erscheint.

In unserem Fall verweist die Seite "Home" auf die Startseite und die Seite "Results" auf "This week". Probieren Sie es selbst!

Sie erzeugen Shortcuts indem Sie den Seitentyp editieren. Für die Seite "Home" sieht das folgendermaßen aus:

Den Element Browser verwenden Sie, um eine Seite auszuwählen, auf die Sie verweisen wollen. Der Element Browser wird benutzt um Beziehungen zwischen Datensätzen und Dateien in TYPO3s Formularen herzustellen. Mehr über den Element Browser können Sie hier nachlesen.

Auf der Seite "Results" ist der Shortcut etwas ausgefallener - er verweist einfach auf die erste Unterseite, die er findet! In unserem Fall ist es die "This week" Seite:

Der "Shortcut" Modus ist eine so genannte secondary option des "Shortcut to page"-Feldes - das bedeutet, dass dieses Feld nur gezeigt wird (und zwar ganz oben in der Palette / dem oberen Frame), wenn Sie auf das Symbol "More options..." klicken (siehe Abbildung oben).

Stets zu Diensten: Hilfe!

Schön, aber was mögen all die anderen interessanten Seitentypen anstellen? Nun, das können Sie einfach herausfinden, indem Sie das kleine "?" Symbol neben dem Feld anklicken:

Sofort erscheint ein neues Fenster, ungefähr so eines wie das folgende:

Dies nennt man kontextsensitive Hilfe. Man findet sie bei fast allen Element in TYPO3 über die Sie Informationen über dessen Funktion benötigen könnten! Es ist einfach und steht sofort zu Ihrer Verfügung, wenn Sie innerhalb des Systems arbeiten!

Jetzt haben wir uns den Page Tree angeschaut, gesehen, wie der Page Tree in der Menü-Hierarchie der Website widergespiegelt wird und wie Seiten gezeigt werden können etc.

Als nächstes stellt sich die Frage: Wie werden Inhalte in einer Seite untergebracht? Lassen Sie uns noch einen Blick auf die "This week" Seite werfen:

Der Seiteninhalt auf dieser Seite besteht aus drei Seiteninhaltselementen (page content elements) - hier nummeriert von 1 bis 3. Und weil jedes Content Element von einem verschiedenen Typ sein kann, können Sie Seiten mit sehr flexiblen Strukturen erstellen! In diesem Fall besteht die Seite aus einem Content Element vom Typ "Text" gefolgt von zwei "Table" Elementen.

Exkurs: TYPO3 - ein element-basiertes CMS

Diese Art und Weise, um Seiten zu erzeugen, ist ein sehr grundlegendes Konzept in den meisten Websites, die mit TYPO3 erstellt wurden. Die Methode, Seiten aus einzelnen Inhaltselementen zu erzeugen, wird heutzutage auch von anderen Content Management Systemen verwendet. Das macht TYPO3 zu einem "element-basierten" CMS. Es verleiht Ihnen eine große Flexibilität und sorgt für ein durchgängig konsequentes Design - eine der Hauptaufgaben eines CMS! Die alternative Methode ist ein eher strikter Ansatz, bei dem die Seite aus einer festgelegten Anzahl von Inhaltsfeldern besteht, zum Beispiel je eines für die Überschrift, den Text und ein Bild. TYPO3 kann prinzipiell auch so verfahren (es kann Ihnen alles ermöglichen, was Sie wollen!) aber ziemlich sicher werden Sie das letztendlich gar nicht wollen. Wenn Sie Fragen zu professionellen Implementationstechniken für Template-Entwürfe, Content Elemente usw. haben, sehen Sie bitte in das Tutorial "Modern Template Building", Teil 1 und Teile 2+3. Denken Sie aber daran, dass diese Dokumente ein weit höheren Schwierigkeitsgrad besitzen als dieses Tutorial - und Sie sollten besser Schritt für Schritt vorgehen, wenn Sie mit TYPO3 noch nicht vertraut sind.

Reihenfolge der Content Elemente

Jetzt aber zurück zu den Content Elementen auf der Webseite. Sehen Sie sich einmal ihre Darstellung im Backend an:

Vergleichen Sie jetzt einmal die Ansicht im Backend mit der im Frontend. Sehen Sie, dass die Elemente im Backend gleichermaßen vorhanden sind wie im Frontend?

Versuchen Sie sie umzusortieren indem Sie ein Backend Element nach oben oder unten verschieben:

Dies wird das Element nach oben verschieben:

... und auf der Webseite sieht das folgendermaßen aus:

Die übergeordnete Seite von Content Elementen

Dies wendet sich an diejenigen, die den technischen Aspekt von Content Elementen und Seiten besser verstehen wollen:

Erinnern Sie sich, dass die "page records" ein Feld namens "pid" haben, welches zu ihrer übergeordneten Seite verweist (parent)? Nun, Seiteninhaltselemente - page content elements - und jeder andere Datensatz, der für das TYPO3 Backend konfiguriert wurde - hat ebenfalls ein solches Feld. Wenn wir noch einmal in das phpMyAdmin Modul schauen, sehen wir, dass die Page Content Elemente (Tabelle: "tt_content") mit den uids 18-20 alle auf die Seite mit der uid "13" - der uid der Seite "This week" - verweisen:

Es ist so logisch!