Leseprobe. »InstallationSeiten anlegeneinstieg in TypoScript« Inhalt. Index. Die Autoren. Einstieg in TYPO3 CMS 6.2 LTS. Wissen, wie s geht.

Transkript

1 Wissen, wie s geht. Leseprobe TYPO3 ist ein mächtiges Werkzeug zur Erstellung von Websites. Mit dieser Leseprobe finden Sie sich schnell zurecht und starten im Handumdrehen mit der Entwicklung Ihrer eigenen Website inklusive Einführung in TypoScript. Außerdem können Sie einen Blick in das vollständige Inhalts- und Stichwortverzeichnis des Buches werfen.»installationseiten anlegeneinstieg in TypoScript«Inhalt Index Die Autoren Frank Bongers, Michael Hassel Einstieg in TYPO3 CMS 6.2 LTS EPUB-Format, 623 Seiten*, in Farbe, 6. Auflage ,90 Euro, ISBN *auch erhältlich als gebundenes Buch: 29,90 Euro, ISBN

2 Kapitel 2 Installation von TYPO3 CMS 6.2 LTS In diesem Kapitel zeigen wir Ihnen, wie Sie unter Windows eine lokale Testinstallation auf dem eigenen Rechner erstellen und die ersten Konfigurationsschritte vornehmen. Die Beispiele des Buches werden mit der Testinstallation durchgeführt, die wir Ihnen auf den folgenden Seiten vorstellen. Als ersten Schritt beschaffen Sie sich ein geeignetes Installationspaket für TYPO3 CMS 6.2 LTS. Die Website bietet TYPO3 in verschiedenen Versionen und Varianten zum Download an. Neben dem reinen TYPO3-Paket, das für den Einsatz in einer bereits vorhandenen oder separat zu installierenden Webserverumgebung nebst Datenbank gedacht ist, existieren zum Teil auch sogenannte Installer, die neben TYPO3 auch Webserver und Datenbank enthalten. Wir entscheiden uns für das normale Installationspaket, das wir in der aktuellen Version 6.2.x herunterladen (Sie finden es auch auf der DVD 1 ). Abbildung 2.1 Download von TYPO3 auf» noch ein einziges Installationspaket Im Gegensatz zu den älteren Versionen von TYPO3 (dies schließt auch die gar nicht sehr viel ältere Version TYPO3 CMS 6.1 ein) existiert in TYPO3 CMS 6.2 LTS nur noch ein einziges Paket. Die frühere Unterscheidung in Blank Package, Source, Dummy, Source+Dummy oder Introduction Package ist hinfällig. 2 1 Wir haben die zur Drucklegung aktuelle Version beigefügt. Online können jedoch neuere Versionen mit Bugfixes verfügbar sein (siehe ggfs. 2 Die Inhalte des Introduction-Pakets lassen sich als»distribution«über den Erweiterungsmanager nachladen. Es enthält eine komplette, wenn auch etwas unübersichtliche Demosite. 35

3 2 Installation von TYPO3 CMS 6.2 LTS 2.2 Das Installationspaket von TYPO3 CMS 6.2 LTS 2.1 Voraussetzungen für die Installation von TYPO3 Für welchen Weg Sie sich hinsichtlich Ihrer lokalen Testinstallation entscheiden, hängt von Ihrer aktuellen Rechnerkonfiguration ab: Webserver, PHP und MySQL sind bereits installiert Verfügen Sie auf Ihrem Testrechner über eine lauffähige, für TYPO3 taugliche Umgebung aus einem Server mit PHP und Datenbank (prüfen Sie aber den Versionsstand Ihrer Installation), können Sie direkt mit der Installation und Einrichtung von TYPO3 fortfahren. Hinweis: Sie benötigen PHP ab Version (bis 5.5) sowie eine MySQL-Datenbank ab Version 5.1 (bis 5.6). Für ältere (aber auch neuere) Versionen gibt es keine Funktionsgarantie. Webserver, PHP und MySQL sind nicht installiert Zur Installation eines Apache Webservers mit u. a. PHP und MySQL bietet sich das XAMPP-Installationspaket an, das für Windows, Linux und Mac OS X vorliegt. Sie finden alle entsprechenden XAMPP-Installer auf der Begleit-DVD des Buches. Auf die fertiggestellte XAMPP-Installation setzen Sie anschließend TYPO3 auf. Einen theoretisch einfacheren Installationsprozess bieten die TYPO3-Installer, die in Versionen für Windows, Mac OS X und Linux vorliegen. Derzeit 3 ist jedoch lediglich Lars Leuchters Version für Linux auf dem aktuellen Stand von TYPO3 CMS 6.2 LTS, den wir Ihnen nicht vorenthalten möchten. Auf die anderen Installer haben wir jedoch für die Begleit-DVD verzichtet. Wir raten ohnehin zur flexibleren, im Folgenden für Windows 7 exemplarisch beschriebenen Herangehensweise, da auf ihr auch die für dieses Buch verwendete Konfiguration basiert. Die Installation von XAMPP ist jedoch für alle Betriebssysteme gleichermaßen problemlos: Diese Installation ist der erste Schritt zu Ihrem lokalen TYPO3-System. Installation von XAMPP Eine Beschreibung der Installation des XAMPP-Pakets selbst kann an dieser Stelle unterbleiben Sie finden nähere Erläuterungen hierzu in Anhang A,»Installation von XAMPP«. Eingesetzt wird die Version , in der der OpenSSL-Heartbleed-Bug beseitigt 4 ist. 2.2 Das Installationspaket von TYPO3 CMS 6.2 LTS Bislang wurden die entpackten TYPO3-Installationsdateien im Dokumentenverzeichnis htdocs des Webservers abgelegt. Ab der neuen Version TYPO3 CMS 6.2 wird diese Herangehensweise nicht mehr empfohlen. Stattdessen soll, wie es unter Linux und Mac OS seit Langem üblich ist, die Source des CMS separat abgelegt und mit dem Arbeitsverzeichnis der Installation über symbolische Links verbunden werden. Nur dieses Arbeitsverzeichnis liegt tatsächlich in htdocs. Warum die Trennung von Installation und Arbeitsverzeichnis? Der Vorteil besteht darin, dass sich so mehrere Arbeitsinstallationen eine gemeinsame Source teilen können, ohne dass TYPO3 wirklich mehrmals komplett auf dem Rechner abgelegt werden muss. Ein Blick in das Zip-File (siehe Abbildung 2.3) offenbart, dass sich hierin nur noch ein einzelner Ordner typo3/ verbirgt, der eine Reihe von Unterordnern enthält. Des Weiteren befinden sich hier einige einzelne Dateien, von denen wir uns später index.php und _.htaccess herausgreifen werden. Abbildung 2.2 Die Startseite einer XAMPP-Installation 3 Stand: Oktober Die Versionen für Mac OS und Windows sind noch auf dem Stand 6.1 respektive 6.0. Da die Änderungen in TYPO3 erheblich sind, berücksichtigen wir sie nicht. 4 Betroffen ist OpenSSL 1.0.1f und älter. In XAMPP ist Version 1.0.1g enthalten

4 2 Installation von TYPO3 CMS 6.2 LTS 2.3 Arbeitsverzeichnis und TYPO3-Source die Sie sich, ähnlich einer Verknüpfung, als Verweise in andere Verzeichnisse vorstellen können. Symbolische Links ermöglichen es, die Daten der Verzeichnisse zu verwenden, ohne sie physisch an den Ort des Verweises kopieren zu müssen. Das gewünschte Ergebnis ist in Abbildung 2.4 illustriert. Wir werden vom Arbeitsverzeichnis also drei symbolische Links auf die TYPO3-Source erstellen sowie eine Datei kopieren (und zwar _.htaccess, die dann in.htaccess umbenannt wird). Abbildung 2.3 Die Struktur des entpackten TYPO3-Zips 2.3 Arbeitsverzeichnis und TYPO3-Source Als Vorbereitung für die eigentliche Installation entpacken Sie das Zip-File und legen den Ordner typo3_src-6.2.x in Ihr XAMPP-Verzeichnis neben das htdocs-verzeichnis ab (also nicht darin!). Die TYPO3-Source liegt somit hier 5 : C:\\xampp\typo3_src-6.2.x\ Das Dokumentenverzeichnis htdocs befindet sich parallel dazu in der gleichen Ebene: C:\\xampp\htdocs\ Im htdocs-verzeichnis erstellen Sie nun einen leeren Ordner, den Sie beliebig benennen können. Er soll das Arbeitsverzeichnis des CMS sein, dessen Inhalt durch den Webserver ausgeliefert werden soll. In diesem Buch verwenden wir den Ordnernamen cms1: Abbildung 2.4 TYPO3-Arbeitsverzeichnis mit symbolischen Links Anbinden des Arbeitsverzeichnisses mit symbolischen Links Der Einsatz von symbolischen Links ist für Linux- und Mac-OS-User eine altbekannte Sache. Für Windows-Nutzer hingegen ist das Konzept verhältnismäßig neu, da es sich mit älteren Windows-Versionen nur schwer oder gar nicht realisieren ließ 6 normalerweise mussten von Programmen genutzte Dateien physisch in denjenigen Zielordner kopiert werden, in dem sie benötigt wurden. Dies ist nun nicht mehr nötig. Das Erstellen von symbolischen Links ist unter Windows nicht schwer, lässt sich aber, anders als Sie es für reguläre Verknüpfungen gewohnt sind, nicht auf dem üblichen Weg per Mausklick realisieren. Stattdessen müssen Sie die Eingabeaufforderung bemühen und die Links über die Kommandozeile definieren (siehe Abbildung 2.5). C:\\xampp\htdocs\cms1\ In der Tat ist das Verzeichnis noch komplett leer. Es soll jedoch in Verbindung mit der (extern liegenden) TYPO3-Source treten. Diese wird über symbolische Links definiert, 5 Das Verzeichnis heißt, je nach Version, natürlich typo3_src oder ähnlich. Tipp: Belassen Sie die Version im Namen, um die Source leichter identifizieren zu können. 6 Sollten Sie noch Windows XP (oder gar 2000) einsetzen müssen, können Sie das Junction-Programm von Marc Russinovich verwenden. Ein Download ist unter en-us/sysinternals/bb aspx möglich

5 2 Installation von TYPO3 CMS 6.2 LTS 2.3 Arbeitsverzeichnis und TYPO3-Source Abbildung 2.6 Start der Eingabeaufforderung mit Administratorrechten Geben Sie hierfür Folgendes ein: mklink /D C:\xampp\htdocs\cms1\typo3_src C:\xampp\typo3_src Sie erhalten jeweils eine Bestätigung, dass das Kommando ausgeführt wurde (siehe Abbildung 2.7). Abbildung 2.5 Die Eingabeaufforderung von Windows Syntax der Definition symbolischer Links Ein symbolischer Link kann auf ein Verzeichnis oder eine Datei gesetzt werden, wobei das Ziel und der Ursprung des Links übergeben werden: mklink pfad/zum/ziel/datei.dat pfad/zur/quelle/datei.dat Zur Verlinkung eines Verzeichnisses stellen Sie /D (für directory) voran: mklink /D pfad/zum/zielverzeichnis pfad/zum/quellverzeichnis Öffnen Sie hierfür also die Eingabekonsole aber halt, nicht auf dem gewohnten Wege! Sie benötigen eine Eingabemöglichkeit mit Administratorrechten. Diese erhalten Sie nicht automatisch, selbst wenn Sie als Administrator an Ihrem Rechner angemeldet sein sollten. Suchen Sie den entsprechenden Menüpunkt in der Programmliste, und wählen Sie per Rechtsklick die Option Als Administrator ausführen (siehe Abbildung 2.6). Das aktuelle Verzeichnis ist automatisch C:\windows\system32>. Dies stört nicht, da die Links mit absoluten Pfaden erstellt werden können. Zuerst soll aus dem Arbeitsverzeichnis ein symbolischer Verzeichnis-Link unter dem Namen typo3_src auf das TYPO3-Source-Verzeichnis selbst gesetzt werden. Abbildung 2.7 Der erste symbolische Link Der zweite Link zeigt unter dem Verzeichnisnamen typo3 auf das gleichnamige Verzeichnis innerhalb der TYPO3-Source (siehe Abbildung 2.8): mklink /D C:\xampp\htdocs\cms1\typo3 C:\xampp\typo3_src-6.2.4\typo3 Abbildung 2.8 Der zweite symbolische Link Der dritte und letzte Link erstellt eine symbolische Kopie der Startdatei des Systems (siehe Abbildung 2.9). Setzen Sie ihn unter dem Namen index.php auf die Datei index.php innerhalb der TYPO3-Source. Das Kürzel /D lassen Sie hier weg: mklink C:\xampp\htdocs\cms1\index.php C:\xampp\typo3_src-6.2.4\index.php 40 41

6 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Vor- und Nachteile symbolischer Links Abbildung 2.9 Der dritte symbolische Link Die letzte Aktion an der Kommandozeile wird das Kopieren der Datei _.htaccess in das Arbeitsverzeichnis sein. Dies kann nicht per Maus erfolgen, da die Datei in.htaccess umbenannt werden soll. Dies erlaubt Windows nur an der Kommandozeile (siehe Abbildung 2.10). Kopieren per Kommandozeile Geben Sie einfach den Befehl copy ein, gefolgt vom Quellverzeichnis und dem Zielverzeichnis der gewünschten Datei. Hierbei können Sie die Datei umbenennen, indem Sie einfach einen neuen Namen übergeben: copy pfad/zur kopierten/datei.dat pafd/zum/ziel/neuername.dat Geben Sie also Folgendes ein: copy C:\xampp\typo3_src-6.2.4\_.htaccess C:\xampp\htdocs\cms1\.htaccess Der Vorteil eines symbolischen Links besteht also darin, dass Speicherplatz gespart wird, da auf dieselbe Ressource von verschiedenen Orten verwiesen werden kann. Auch ist ein Update einfacher, indem lediglich ein neuer symbolischer Link auf eine aktuellere Ressource gesetzt wird oder die ursprüngliche Ressource aktualisiert wird. Kopieren lassen sich symbolische Links hingegen nicht! Da Windows den Verzeichnisinhalt für»echt«hält, wird stets der gesamte Inhalt der Ressource kopiert, nicht etwa der symbolische Link! Sie müssen einen symbolischen Link also stets dort»vor Ort«erzeugen, wo Sie ihn benötigen. Nachdem nun die Vorarbeiten erledigt sind, können wir mit dem Aufsetzen des eigentlichen CMS beginnen. Starten Sie jetzt Ihren Webserver. 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Vergewissern Sie sich, dass sowohl Apache als auch die MySQL-Datenbank laufen. Die folgenden Schritte der Installation Ihres TYPO3-Systems werden direkt aus dem Browser gesteuert. Geben Sie in das Adressfeld des Browsers die Home-Adresse des lokalen Servers und den Verzeichnisnamen Ihrer Installation ein (im Beispiel cms1): oder alternativ: Abbildung 2.10 Filecopy per Eingabeaufforderung Ihr Arbeitsverzeichnis ist nun nicht mehr leer und sollte so aussehen wie in Abbildung Wenn Sie versuchsweise auf einen der symbolischen Verzeichnislinks klicken, sehen Sie, dass der Ordner die Dateien des Linkziels zu enthalten vorgibt. (Die Dateien sind also nicht wirklich dort. Es genügt für uns und für das Funktionieren der Installation jedoch, wenn Windows dieser Meinung ist.) Die in diesem Verzeichnis symbolisch verlinkte Datei index.php aus der TYPO3- Source sorgt nun für den Fortgang der Installation. Sie werden jetzt automatisch zum TYPO3 Install Tool weitergeleitet. Abbildung 2.11 Das Arbeitsverzeichnis nach dem Erstellen der Links Abbildung 2.12 Absichtliche Hürde vor Beginn der Installation 42 43

7 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Hier erhalten Sie jedoch zunächst eine Fehlermeldung (siehe Abbildung 2.12). Das System verlangt die Existenz einer Datei namens FIRST_INSTALL (in Großbuchstaben, ohne Dateiendung) im Arbeitsverzeichnis Ihrer Installation. Diese muss dort zunächst neu angelegt werden. Anschließend können Sie den Installationsvorgang fortsetzen, indem Sie die Browserseite einfach neu laden. Abbildung 2.13 Legen Sie die Datei»FIRST_INSTALL«im Arbeitsverzeichnis an. Wozu ist das physische Erzeugen einer Datei erforderlich? Dieses Manöver mit der Datei FIRST_INSTALL wird aus Sicherheitsgründen verlangt. Sobald einem Angreifer der Zugriff auf den Installationsprozess möglich ist, kann er das System korrumpieren, zerstören oder sich Zugang zu den Daten verschaffen, indem er einen Login-Account anlegt. Die Forderung nach dem Ablegen einer Datei stellt sicher, dass der betreffende User auch Schreibzugriff auf das Filesystem besitzt Phase 1 Check der TYPO3-Umgebung Leider wartet nun erneut eine Fehlermeldung auf uns. Immerhin ist es uns gelungen, zum TYPO3 Install Tool vorzudringen, aber bereits in Phase 1 bemerkt das System einige Defizite der Standardkonfiguration von XAMPP. Zunächst wird moniert, die Maximalgröße für den File-Upload sei zu gering gewählt (siehe Abbildung 2.14). Es empfiehlt sich diesen (und weitere) Fehler zu beseitigen, bevor man mit der Installation fortfährt. (Den Button I know what I m doing zum Überspringen zu klicken birgt durchaus Gefahr.) Abbildung 2.14 Error:»PHP Maximum upload filesize too small«ändern Sie den Wert auf 10 Megabyte 7 (10M) wie in Abbildung Die Beseitigung des Fehlers erfolgt in der Datei php.ini, die Sie in C:\xampp\php finden. Legen Sie eine Sicherungskopie der Datei an, bevor Sie sie editieren. Öffnen Sie nun die Datei. Der zu ändernde Eintrag befindet sich in Zeile 922: upload_max_filesize=2m Abbildung 2.15 Änderung des Maximalwerts für File-Upload 7 Schreiben Sie 10M und keinesfalls 10MB. Letzteres funktioniert nicht! 44 45

8 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Auch die weiteren nun gemeldeten Fehler (siehe Abbildung 2.16) sind über die php.ini (zumindest teilweise) in den Griff zu bekommen. niedrig, kann das System nicht verlässlich arbeiten, da Timeouts entstehen. Sie finden den Eintrag in Zeile 458 der php.ini. Abbildung 2.19 Erhöhen der maximalen Verarbeitungsdauer (php.ini) Eine weitere Meldung stellt streng genommen keine Fehlerwarnung dar, sondern teilt lediglich mit, die Größe des Thread Stacks des Apache-Servers sei möglicherweise zu gering (siehe Abbildung 2.20). Dies kann das System jedoch nicht selbst feststellen, da auf diese Variable kein Zugriff möglich ist. Abbildung 2.16 Error:»OpenSSL«,»Fileinfo«und»Execution Time«TYPO3 möchte die PHP-Erweiterungen OpenSSL und Fileinfo aktiviert sehen; Erstere dient der Sicherheit bei der Überprüfung von Passwörtern beim Einloggen. Sie zu aktivieren ist im Prinzip einfach. Im Falle der OpenSSL-Erweiterung müssen Sie eigentlich nur in Zeile 1010 von php.ini das Semikolon am Zeilenanfang entfernen, das den Eintrag auskommentiert (siehe Abbildung 2.17). Abbildung 2.20 Das System bittet, die Thread-Stack-Größe zu überprüfen. Um den Thread Stack gegebenenfalls auf 8 MB, den Default für UNIX-Systeme, zu erhöhen, prüfen Sie, ob sich in der httpd.conf des Servers folgender Eintrag findet (Sie finden die Datei in C:\\xampp\apache\conf): Abbildung 2.17 Aktivieren der OpenSSL-Erweiterung (php.ini) Dasselbe gilt für die Erweiterung Fileinfo, nur dass Sie jetzt den Eintrag in Zeile 994 finden (siehe Abbildung 2.18). <IfModule mpm_winnt_module> ThreadStackSize </IfModule> Falls Sie nicht fündig werden, tragen Sie den Eintrag nach (siehe Abbildung 2.21) und starten den Server neu. Die Warnung wird jetzt zwar nicht verschwinden, Sie wissen nun jedoch, dass sie unbegründet ist. Abbildung 2.18 Aktivieren der Fileinfo-Erweiterung (php.ini) Setzen Sie den Wert für max_execution_time wie gefordert auf 240 Sekunden hoch (siehe Abbildung 2.19). TYPO3 benötigt manchmal eine etwas ausgiebigere Verarbeitungszeit, um komplexere Transaktionen vornehmen zu können. Ist der Wert zu Abbildung 2.21 Erhöhen der Thread-Stack-Größe (httpd.conf) 46 47

9 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Die erste Phase des Installationsvorgangs ist nun beendet. Haben Sie alle Fehler beseitigt, so bestätigen Sie dies durch Klick auf den Button Fixed. Check again! (siehe Abbildung 2.22). Sollten Sie während der XAMPP-Installation ein Datenbankpasswort gesetzt haben und finden es hier nicht vor, so tragen Sie es selbst im Feld Password ein (siehe Abbildung 2.23). Andernfalls muss das Feld leer bleiben. Abbildung 2.22 Abschluss der ersten Phase der Installation Phase 2 Anbindung des Datenbanksystems In der nun folgenden Phase der Installation verbindet sich TYPO3 mit der Datenbank, wobei stillschweigend angenommen wird, dass es sich um eine MySQL-Datenbank handelt. Für diesen Fall hat TYPO3 bereits einige Daten in die Eingabemaske übernommen, die für eine Standardinstallation von XAMPP den Kontakt zur Datenbank ermöglichen: Angabe Username: Password: Wert root (leer) Abbildung 2.23 So stellen Sie die Verbindung zum MySQL-Datenbanksystem her. Type: Host: TCP/IP based connection* Für den (prinzipiell denkbaren) Fall, dass ein anderes DBMS verwendet werden soll, steht ganz unten ein Button I do not use MySQL bereit. Üblicherweise werden Sie hier jedoch auf Continue klicken. Part: 3306 *) Die Alternative ist»socket based connection«. Sie werden das in der Regel nicht brauchen. Tabelle 2.1 Die Standardangaben zur Datenbankanbindung Phase 3 Erstellung der Datenbank für das CMS Nachdem TYPO3 nun Verbindung zum MySQL-Datenbanksystem aufgenommen hat, kann die eigentliche Datenbank erstellt werden, die das System nutzen wird

10 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Im Prinzip könnten Sie auf eine bestehende Datenbank zurückgreifen (hierfür wählen Sie erst den oberen Radiobutton und suchen sich dann die gewünschte Datenbank in der Dropdown-Liste). Grundsätzlich ist dies meist keine gute Idee. Handelt es sich nicht um eine TYPO3-Datenbank, so wird deren Struktur zerstört, da TYPO3 weitere Tabellen hinzufügt. Ist es hingegen eine Datenbank eines existierenden TYPO3-Systems, so werden deren Daten möglicherweise verstümmelt. Wählen Sie diese Option also nur, wenn Sie sich Ihrer Sache sicher sind. Empfehlenswert (und vorgewählt) ist die zweite Option, in der Sie angehalten sind, eine leere neue Datenbank zu erstellen (siehe Abbildung 2.24). Wir empfehlen, der Datenbank denselben Namen zu geben, den Sie dem Ordner des Arbeitsverzeichnisses gegeben haben in unserem Falle wäre dies cms1. So lässt sich jederzeit nachvollziehen, welche Datenbank zu welchem TYPO3-Verzeichnis gehört (spätestens wenn Sie mehrere Systeme parallel betreiben, werden Sie dies zu schätzen wissen) Phase 4 Backend-User erstellen und Datenimport In der vierten Phase gibt es verhältnismäßig wenig zu tun. Zum einen wird jetzt die Struktur der Datenbank erstellt, also die Tabellen generiert und auch einige benötigte Daten eingelesen. An dieser Stelle können (und sollen) Sie nicht eingreifen. Wichtig hingegen ist, dass Sie sich jetzt für einen Usernamen und ein dazugehöriges Passwort entscheiden, mit dem Sie sich gleich in der Verwaltungsoberfläche von TYPO3, dem sogenannten Backend, anmelden können. Für das Buch haben wir uns entschieden, den Standard-Account früherer TYPO3-Installationen zu verwenden, also den Usernamen admin und das Passwort password (siehe Abbildung 2.25). Abbildung 2.25 Erstellen des ersten Backend-User-Accounts Abbildung 2.24 Erstellen der Datenbank für die TYPO3-Installation Tragen Sie Ihren Wunschnamen für die Datenbank ein, und klicken Sie auf Continue. Die dritte Phase der Installation ist hiermit abgeschlossen. Die Möglichkeit, hier im Feld Site name einen Websitenamen einzugeben, lassen wir aus. Diese Angabe kann später gemacht werden. Sie dürfen nun wieder auf Continue klicken

11 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS Wahl des Usernamens und Passworts Sofern Ihre Installation nur Test- und Trainingszwecken dient und von außen nicht zugänglich ist, mag dies angehen. Möchten Sie mehr Sicherheit, so denken Sie sich ein eigenes Login aus. Beachten Sie in diesem Zusammenhang die gut gemeinte Hinweismeldung der Eingabemaske Phase 5 Abschluss der Installation Da diese Liste aus dem Web geholt wird, muss spätestens jetzt eine Onlineverbindung für das System vorhanden sein. (Später werden Sie diese ohnehin benötigen.) Beachten Sie jedoch, dass der Download der Liste, wie in der Eingabemaske angedroht wird, etwas Zeit benötigt. Betätigen Sie nun den Button Open the Backend. Sie werden auf eine Login-Seite weitergeleitet, in der Sie Ihren gewählten Usernamen und das dazugehörige Passwort eingeben können (siehe Abbildung 2.27). Diese letzte Phase stellt den Abschluss der eigentlichen Installation dar. Von hier aus soll es ins Backend gehen, was einfach durch Klick auf den Button Open the backend eingeleitet wird (siehe Abbildung 2.26). Sie werden nun Ihre eben vereinbarten Login-Daten benötigen. Vorher können Sie noch veranlassen, dass das System eine Liste mit Erweiterungsmodulen herunterlädt, die im Anschluss im sogenannten Extension Manager bereitsteht. Anhand der Liste können Sie über den Import und die Installation von Zusatzmodulen entscheiden. Abbildung 2.27 Das Login-Formular für den Backend-Zugang von TYPO3 An dieser Stelle mag alles glatt gegangen sein und Sie sehen sich einer (möglicherweise zunächst verwirrenden) Bedienoberfläche für die TYPO3-Arbeitsumgebung gegenüber. Diese werden wir uns gleich zu Teilen und im folgenden Kapitel genauer ansehen. Nicht unwahrscheinlich jedoch ist, dass der Login-Versuch zunächst erfolglos bleibt und das System im Überprüfen der Account-Daten»hängen bleibt«. Sollte dies der Fall sein, so lesen Sie den folgenden Abschnitt. Ansonsten überspringen Sie ihn ruhig und blättern weiter zur Installation von GraphicsMagick. Sie sind vom OpenSSL-Bug verschont geblieben Bugfix Reparatur der OpenSSL-Installation Abbildung 2.26 Auf dem Weg ins Backend nach Abschluss der Installation Dieser Abschnitt wird hoffentlich in naher Zukunft obsolet sein derzeit aber gibt es Probleme bei Windows-Installationen mit XAMPP bzw. Apache: Beim Versuch des Logins bleibt das System gelegentlich in einem Zustand wie in Abbildung 2.28 hängen. Geduld und die Bereitschaft, sich einen Kaffee zu holen, ändert leider nichts; ein Login ist nicht möglich

12 2 Installation von TYPO3 CMS 6.2 LTS 2.4 Der Installationsvorgang von TYPO3 CMS 6.2 LTS TYPO3 verwendet OpenSSL zur Verifikation von Passwörtern, daher muss das entsprechende Protokoll vom Webserver unterstützt 8 und von TYPO3 auch angesprochen werden können. Derzeit existiert ärgerlicherweise ein Bug (vermutlich im XAMPP-Paket bzw. in Apache), der die Zusammenarbeit mit TYPO3 verhindert. Unter Windows 7 und Windows 8: Klicken Sie auf die Schaltfläche Start, geben Sie in das Suchfeld»Computer«ein, klicken Sie mit der rechten Maustaste auf den Eintrag Computer, und klicken Sie dann auf Eigenschaften. Die Information, die Sie suchen, nennt sich»systemtyp«. Unter Windows 8.1: Über eine Wischbewegung vom rechten Bildschirmrand aus öffnen Sie Einstellungen und gehen dann auf PC-Einstellungen ändern. Tippen oder klicken Sie auf PC und Geräte und dann auf PC-Info. Sehen Sie unter PC unter Systemtyp nach, ob eine 32-Bit- oder eine 64-Bit-Version von Windows ausgeführt wird. Abbildung 2.28 TYPO3 verifiziert die Login-Daten leider vergeblich. Abhilfe schafft die zusätzliche Installation von Win OpenSSL, einer Windows-Implementierung des korrespondierenden Linux-Tools, die es in Versionen für 32- und 64- Bit-Systeme gibt. Die aktuelle Version enthält OpenSSL 1.0.1h, in der der Heartbleed- Bug beseitigt ist. Ein vertrauenswürdiger Download ist beispielsweise bei möglich (siehe Abbildung 2.29), und wir stellen beide Varianten für Sie auch auf der DVD bereit. Installation von Win OpenSSL oder nicht? Nochmals, dieses Manöver ist ein Bugfix! Falls Sie sich ohne Probleme und weitere Maßnahmen beim Backend anmelden können, unterlassen Sie den folgenden Schritt. Ansonsten installieren Sie diejenige Version von Win OpenSSL, die zu Ihrem Betriebssystem passt: win64openssl-1_0_1h.exe für 64-Bit-Windows win32openssl-1_0_1h.exe für 32-Bit-Windows 32- oder 64-Bit: Wenn Sie sich nicht sicher sind, ob Sie ein 32- oder 64-Bit-System besitzen, so überprüfen Sie dies: Abbildung 2.29»Win OpenSSL«bei» Sie nun Ihre passende Version von Win OpenSSL. Es kann nun sein, dass sich eine weitere Hürde vor Ihnen aufbaut: eine Fehlermeldung, dass das Microsoft Visual C Redistributable Package (x86) noch installiert werden müsse (siehe Abbildung 2.30). 8 Sie erinnern sich, dass wir das Protokoll im Setup aktiviert hatten. Dies genügt unter Umständen nicht

13 2 Installation von TYPO3 CMS 6.2 LTS 2.5 Konfiguration über das Backend-Install-Tool auf den grauen Pfeil neben dem Menüpunkt), und lassen Sie nur den Bereich System offen. Wir wollen nochmals in die Installation, um den Zustand unseres Systems zu kontrollieren und ein paar abschließende Schritte vorzunehmen. Anschließend sollen Sie über ein gebrauchsfertiges TYPO3-System verfügen. Abbildung 2.30 Fehlermeldung bei fehlendem»visual C Redistributable Package«Auch dieses Tool haben wir für Sie auf der DVD bereitgelegt. Es handelt sich um die Dateien vcredist_x86.exe (32 Bit) bzw. vcredist_x64.exe (64 Bit). Sie können sie aber auch direkt von Microsoft beziehen: Installieren Sie das Visual C Redistributable Package gegebenenfalls, und fahren Sie dann in der Installation von Win OpenSSL fort. Wählen Sie während der Installation den Modus Copy OpenSSL DLLs to the Windows system directory (dies ist ohnehin die Defaulteinstellung). Starten Sie nun Ihren Rechner neu. Abbildung 2.31 Der Weg vom Backend ins Install Tool Was kostet Win Open SSL? Der Programmierer des Tools, Thomas J. Hruska, würde sich über eine Spende von 10 USD freuen, die Sie über PayPal leisten können durchaus fair, denn er erspart uns viel Ärger. Sie können das Tool jedoch auch gratis nutzen, es ist Open Source. Neustart gemacht? Wenn alles gut gegangen ist, sollte nun ein Login am Backend möglich sein, und Sie sehen sich einer Oberfläche wie in Abbildung 2.31 gegenüber. Zu diesem Zeitpunkt wollen wir uns auf ihr noch nicht allzu genau umsehen. Es gilt nämlich noch einige Konfigurationen am System vorzunehmen. 2.5 Konfiguration über das Backend-Install-Tool Im TYPO3-Backend sehen Sie linker Hand eine Liste von Menüpunkten, mit denen verschiedene Funktionen des Systems gesteuert werden, die Menüleiste. Sie ist untergliedert in sechs Rubriken (Web, File, User Tools, Admin Tools, System und Help siehe Abbildung 2.31). Klappen Sie sie einstweilen alle zu (mit jeweils einem Klick Login am Backend-Install-Tool Klicken Sie in der Rubrik System auf den Eintrag Install. Im rechten Teil des Screens (nennen wir das den»arbeitsbereich«) erscheint nun die Meldung, das Tool, das wir ansprechen wollen, sei»locked«. Das lässt sich einfach durch Klick auf den Button Unlock the Install Tool ändern. Wozu dient das versperrte Install Tool? Das Install Tool dient unter TYPO3 zur Konfiguration des Systems. Es ist über einen URL erreichbar, könnte also auch unautorisiert von außen angesprochen werden, was das CMS angreifbar macht. Ähnlich dem Manöver bei der Erstinstallation muss durch Ablegen einer Datei im Installationsverzeichnis gewährleistet sein, dass der zugreifende User Schreibrechte im System oder (wie wir) Zugang zum Backend besitzt. Beim Zugriff über einen URL müssen Sie eine Datei ENABLE_INSTALL_TOOL im Verzeichnis ablegen. Beim Zugang über das Backend genügt der Klick auf den Button

14 2 Installation von TYPO3 CMS 6.2 LTS 2.5 Konfiguration über das Backend-Install-Tool Sobald Sie den Button betätigt haben, stehen Sie sozusagen auf der Schwelle zum Install Tool. Es muss jedoch noch ein Passwort eingegeben werden. Per Default ist es dasselbe Passwort, das Sie in Abschnitt als Passwort für Ihren Backend-Account vereinbart haben in unserem Fall wäre es also ganz simpel password. Dies ist der String, der im System abgelegt sein muss, damit dieses Passwort funktioniert (es handelt sich um eine Verschlüsselung des Klartext-Passworts, die über einen sicheren Hash-Algorithmus vorgenommen wird) 9. Abbildung 2.34 Der Ordner»typo3conf«im Arbeitsverzeichnis Um diesen Passwort-Hash der Konfiguration mitzuteilen, gehen Sie nun in das Arbeitsverzeichnis Ihres Systems, also in den Ordner cms1. Sie sehen, dass er nicht mehr so leer ist wie zu Beginn. TYPO3 hat während der Installation einige Verzeichnisse erstellt und Daten abgelegt (siehe Abbildung 2.34). Abbildung 2.32 Login am Install Tool des Backends Neusetzen des Backend-Install-Tool-Passworts Wir interessieren uns derzeit nur für den Ordner typo3conf, den Rest betrachten wir später. Öffnen Sie die Datei LocalConfiguration.php zum Bearbeiten im Editor, und geben Sie den eben gespeicherten String als neuen Wert für installtoolpassword im Bereich BE ein. Diese Variable finden Sie ziemlich am Beginn der Datei (siehe Abbildung 2.35). Speichern Sie die Datei, und laden Sie die Login-Seite für das Backend- Install-Tool neu. Ein Login mit dem soeben versuchten Passwort sollte nun gelingen. Für den Fall, dass das Tool Sie nicht einlassen möchte, erhalten Sie eine Fehlermeldung, die besagt, dass Ihr Passwort nicht dem vereinbarten Passwort entspricht (siehe Abbildung 2.33). Ist dies so, müssen Sie eine kleine Dateioperation vornehmen. Andernfalls können Sie den folgenden Abschnitt überspringen. Abbildung 2.35 Der gespeicherte Passwort-Hash (LocalConfiguration.php) Abbildung 2.33 Das Install Tool mag das übergebene Passwort nicht. Sie haben sich das erfolglos eingegebene Passwort gemerkt? Gut. Dann kopieren Sie sich den String, der in der Fehlermeldung als Calculated hash ausgegeben wurde. 9 Sollte sich jemand diesen Hash-String verschaffen, so kann er daraus nicht das eigentliche Passwort ermitteln. Verschlüsselte Passwörter können daher auch in der Datenbank abgelegt werden

15 2 Installation von TYPO3 CMS 6.2 LTS 2.5 Konfiguration über das Backend-Install-Tool Die Systemumgebung im Install Tool Sie befinden sich (wenn alles gut gegangen ist) nun auf der Startseite des Install Tools. Den langen Text auf der rechten Seite können Sie bei Gelegenheit gern lesen. Hier möchten wir Sie aber erst auf das Menü links von ihm hinweisen, das acht Menüpunkte enthält. Vermutlich befindet sich auch bei Ihnen neben dem Menü System environment eine rote Bubblemessage mit einer Zahl. Dies bedeutet, dass in diesem Bereich noch Fehler auftreten. Abbildung 2.37 Das Menü des Install Tools, links die Startkonfiguration Eine rote Meldung hingegen ist ein echter Fehler, der ziemlich wahrscheinlich ein Problem darstellt und beseitigt werden sollte. Eine jetzt wohl auftauchende Meldung betrifft die erlaubte Größe von POST-Dateien, die vom vorhin vereinbarten Wert für das Upload-Maximum (10 MB) abweichen wird. Per Default liegt der Wert bei 8 MB. Abbildung 2.36 Die Startseite des Install Tools Öffnen Sie nun per Klick den Bereich System environment (siehe Abbildung 2.37). In dieser Rubrik meldet TYPO3 Ihnen den aktuellen Zustand der Systemumgebung. Eingreifen können Sie hier nicht, aber in Form von farbig kodierten Meldungen erhalten Sie Auskunft über mögliche Probleme und über Einstellungen, die das System für in Ordnung hält. Abbildung 2.38 Die Maximale Größe für POST-Requests ist kleiner als die maximale Upload-Größe Das ist nicht dramatisch. Um diesen Fehler zu beseitigen, öffnen Sie wieder die php.ini im Editor und setzen den fraglichen Wert post_max_size ebenfalls auf 10M. Diese Meldungen können Sie ignorieren, wenn ihr Hintergrund grau, hellblau oder hellgrün ist ist. Dies sind Positivmeldungen oder rein informative Mitteilungen. Eine gelbe Meldung sollte berücksichtigt werden. Es handelt sich nicht um Fehler, sondern um Warnhinweise über»mögliche Probleme«. Sie finden hier in Form der Thread-Stack-Size-Warnung einen alten Bekannten vor. Abbildung 2.39 Editieren des Wertes»post_max_size«(php.ini) 60 61

16 2 Installation von TYPO3 CMS 6.2 LTS 2.5 Konfiguration über das Backend-Install-Tool Nach dem Neustart des Servers (dies muss sein, weil die PHP-Konfiguration in php.ini nur zum Start von Apache eingelesen wird, nicht zwischendurch) sollte die Fehlermeldung verschwunden sein (siehe Abbildung 2.40). Falls Sie weitere Einstellungen der PHP-Umgebung überprüfen möchten, gibt Ihnen das Install Tool unter diesem Menüpunkt auch Direktzugriff auf die PHP Info. Scrollen Sie hierzu einfach das Dokument nach unten, und öffnen Sie den entsprechenden Bereich (per Default ist er eingeklappt). Abbildung 2.41 Die»Configuration Presets«im Install Tool Dies geschieht mithilfe von PHP, wobei aber noch ein Zusatztool herangezogen werden muss, um die eigentliche Grafikverarbeitung vorzunehmen. Etabliert haben sich hierfür die Tools ImageMagick und GraphicsMagick. Keines von beiden ist jedoch installiert (siehe Abbildung 2.42). Abbildung 2.40 Die»PHP Info«im Menü»System environment«des Install Tools Install Tool die Configuration Presets Wir begeben uns nun in den Bereich Configuration Presets. Er ist in vier Abteilungen untergliedert, von denen uns derzeit nur der Menüpunkt Image handling settings interessiert. (Unten in Abbildung 2.41 sehen Sie noch einen Button Activate, der erst später benötigt wird, um vorgenommene Änderungen auch ins System zu übernehmen.) Klappen Sie nun den Bereich Image handling settings auf. TYPO3 muss mit Grafikressourcen umgehen können, um sie verarbeiten zu können. Dies betrifft einerseits die Erstellung von Thumbnail-Grafiken zu Vorschauzwecken im Backend, zum anderen die Umrechnung von Grafiken, die in der Website (also dem Frontend) benötigt werden. Hierfür müssen hochgeladene Bilder beispielsweise skaliert oder gedreht werden können. Abbildung 2.42 ImageMagick fehlt TYPO3 möchte Bildbearbeitung

17 2 Installation von TYPO3 CMS 6.2 LTS 2.6 Test der Umgebung im Test-Setup des Install Tools GraphicsMagick oder ImageMagick? Im Grunde ist ImageMagick der ältere Player. GraphicsMagick ist ein hierzu kompatibles Tool, das Oberhand gewann, als ImageMagick vorübergehend (bis Version 6.x) nicht mit TYPO3 zusammenarbeiten mochte. Man kann es als Geschmackssache betrachten, für welchen der beiden Protagonisten man sich entscheidet. Für die Installation, die wir in diesem Buch zeigen, verwenden wir GraphicsMagick Q8, das Sie in einer 32-Bit- und einer 64-Bit-Version auch auf der Begleit-DVD finden. Downloads und ausführliche Installationshinweise finden Sie unter: Installation von GraphicsMagick Die Installation von GraphicsMagick ist simpel. Laden Sie sich die für Sie passende Version von der Hersteller-Website herunter, oder verwenden Sie die von der Begleit- DVD (denken Sie daran, dass online aktuellere Versionen vorhanden sein können hier ist dies jedoch vermutlich nicht kritisch). Die 32-Bit-Version installiert sich hier: C:\\Programme (x86)\graphicsmagick q8 Die 64-Bit-Variante finden Sie analog in diesem Verzeichnis: C:\\Programme\GraphicsMagick Q8 Üblicherweise ist TYPO3»schlau«genug, um an den üblichen Speicherorten nach einer Installation zu suchen. Höchstwahrscheinlich ist daher die Fehlermeldung im Anschluss an die Installation verschwunden. Ist dies jedoch nicht der Fall, so müssen Sie TYPO3»an der Hand nehmen«und dem System den Pfad zur GraphicsMagick-Installation mitteilen (siehe Abbildung 2.43). Dies machen Sie mithilfe des Feldes neben dem Button Find executables in this directory. Kopieren Sie den Pfad zum Verzeichnis mit der ImageMagick-Installation (Rechtsklick im Explorer auf den Pfad und Auswahl des Befehls Adresse als Text kopieren) in das Feld, und betätigen Sie nun den Button. Danach bestätigen Sie das Update der Einstellungen über den Button Activate. Die Fehlermeldung sollte nun verschwunden sein (wie in Abbildung 2.44). Achten Sie darauf, dass der Radiobutton auf der Meldung aktiviert ist. Wir lassen es uns an dieser Stelle jedoch nicht entgehen, die Funktion des Tools und ein paar andere Einstellungen zu überprüfen. Abbildung 2.43 Den GraphicsMagick-Pfad kopieren und übergeben Abbildung 2.44 Meldung, dass GraphicsMagick nun gefunden wurde 2.6 Test der Umgebung im Test-Setup des Install Tools Für ein paar abschließende Tests gehen Sie nun in den Menüpunkt Test settings. Hier kann geprüft werden, ob das System in der Lage ist, s zu verschicken (nützlich, um beispielsweise den Administrator über Logins zu informieren), ob die Fonteinstellungen beim Rendern von Texten korrekt sind oder ob die Bibliotheken und Tools für Grafiken korrekt arbeiten Test von -Versand und Fonteinstellung Die ersten beiden Tests sind schnell absolviert. Geben Sie im ersten Fall eine - Adresse ein, und lassen Sie das System eine Testmail verschicken. Hier sind üblicherweise keine Probleme zu erwarten

18 2 Installation von TYPO3 CMS 6.2 LTS 2.6 Test der Umgebung im Test-Setup des Install Tools Test der grafischen Funktionen Kommen wir zum»spaßteil«, nämlich zum Test der Funktion der Bildbearbeitung. Es sind vier Testsuiten zu absolvieren, nämlich die Konvertierung von Bildformaten nach JPG, das Erstellen von GIF und PNG-Grafiken, die Skalierung und das Kombinieren von Grafiken. Ganz am Ende wird auch noch GDLib getestet, das für das Generieren von Schrift auf Grafiken und diverse Effekte zuständig ist. Schicken wir voraus, dass die hier eingesetzten Testgrafiken noch von Kasper Skårhøj persönlich zur Verfügung gestellt und (aus Tradition?) nie ersetzt oder aktualisiert worden sind. Lesen und Konvertieren von Grafikformaten Das erste getestete Feature prüft, ob Grafiken in verschiedensten Formaten eingelesen und in JPG umgewandelt werden können. Dies ist nützlich, um TYPO3 mit beliebigem grafischem Rohmaterial versorgen zu können, ohne sich Gedanken darüber machen zu müssen, ob das System ein spezielles Format unterstützt oder nicht. Abbildung 2.45 Versand einer Testmail aus dem»test Setup«Ähnlich zügig ist die Kontrolle der True type font DPI settings. Klicken Sie einfach auf den betreffenden Button. TYPO3 generiert zwei Testgrafiken, die identisch aussehen sollen. Ist dies der Fall, so ist der Test bestanden. 10 Abbildung 2.46 Test der»true type font DPI settings«im»test Setup«Abbildung 2.47 Trivial JPG kann eingelesen werden. 10 Nostalgiker werden sich erinnern, dass es über viele Jahre erforderlich war, hier nachzubessern und den betreffenden Konfigurationswert von Hand zu setzen. Geprüft wird zunächst das JPG-Format selbst, im Anschluss aber auch GIF, PNG, TIF, BMP, PCX und TGA sowie die Vektorformate PDF und AI (Adobe Illustrator). Ist die GraphicsMagick-Installation korrekt, so gibt es bei den Bitmap-Formaten keine Pro

19 2 Installation von TYPO3 CMS 6.2 LTS 2.6 Test der Umgebung im Test-Setup des Install Tools bleme. Alle Meldungen sollten so aussehen wie in Abbildung 2.48, wo das Einlesen und Konvertieren von TIF- und BMP-Daten geprüft wird. Abbildung 2.49 Das Lesen von PDF- und AI-Dateien schlägt ohne Ghostscript fehl. Abbildung 2.48 Lesen und Konvertieren von TIF und BMP Das Lesen von Vektorformaten hingegen scheitert häufig (siehe Abbildung 2.49). Der Grund ist, dass Vektorformate nicht von GraphicsMagick (oder ImageMagick) übernommen werden können; diese Programme können lediglich Bitmap-Formate verarbeiten! Vielmehr muss zum Erkennen von vektorbasierten Formaten ein Hilfstool namens Ghostscript, ein Postscript-Interpreter, auf dem Rechner installiert sein. Befindet sich Ghostscript (zufällig) bereits auf Ihrem Rechner, so gelingt der Test und Sie müssen nichts weiter unternehmen. Ansonsten installieren Sie jetzt Ghostscript, das Sie ebenfalls auf der Begleit-DVD finden. Alternativ erhalten Sie den Interpreter unter Wiederholen Sie den Test, so werden die beiden Formate nun erkannt. Abbildung 2.50 TYPO3 kann jetzt auch das AI-Format lesen. Erstellung von GIF- und PNG-Grafiken Der jetzt zu absolvierende Test prüft, ob das TYPO3-System im GIF- und PNG-Format auch schreiben kann, was ebenfalls zum Erstellen von Grafiken für das Backend und das Frontend benötigt wird (siehe Abbildung 2.51). Klicken Sie auf den Button Test image formats, um den Test einzuleiten

20 2 Installation von TYPO3 CMS 6.2 LTS 2.6 Test der Umgebung im Test-Setup des Install Tools Kombinieren von Grafiken Ein durchaus interessanter, wenn auch heutzutage nicht mehr allzu üblicher Einsatz der Grafikfähigkeiten von TYPO3 besteht in der Kombination mehrerer Grafiken zu einer Ergebnisgrafik. Auf diesem Weg können programmatisch komplexe Bildelemente erzeugt werden, wie sie beispielsweise für Stimmungsbilder im Seitenkopf von Webseiten Verwendung finden. Das Arbeitsprinzip besteht darin, dass neben einer oder mehrerer Quellgrafiken auch eine Maskendatei eingesetzt wird, die bestimmt, auf welche Art oder für welche Bereiche der Grafiken eine Überblendung geschieht. Es sei angemerkt, dass man meist mit einem»echten«bildbearbeitungstool bessere Ergebnisse erzielt. Wer aber Lust hat, dies einmal direkt in TYPO3 zu machen, kann sich hier austoben. Abbildung 2.51 Das Schreiben im GIF- und PNG-Format gelingt. Skalieren von Grafiken Ähnlich wichtig wie das Lesen und Schreiben verschiedener Grafikformate ist die Fähigkeit, eine Grafik bei Bedarf auch skalieren zu können. Dies prüfen Sie im nächsten Test durch Klick auf den Button Test scaling images. Hierbei behält TYPO3 das Format bei, skaliert also ein GIF im GIF-Format, ein PNG im PNG-Format usw. (siehe Abbildung 2.52). Abbildung 2.53 TYPO3 prüft die Erstellung von Kompositgrafiken. Abbildung 2.52 Das Skalieren von GIF-Bildern ist erfolgreich

21 2 Installation von TYPO3 CMS 6.2 LTS 2.7 Finetuning mit»all Configuration«Test von GDlib Die PHP-Bibliothek GDlib regelt das Erzeugen von Text auf Grafiken, wobei der Grafik durch GraphicsMagick auch Effekte wie Antialiasing oder Schlagschatten hinzugefügt werden können (siehe Abbildung 2.54 und Abbildung 2.55). 2.7 Finetuning mit»all Configuration«Die bisher betrachteten Menüpunkte des Install Tools boten übersichtliche und absichtlich einfach gehaltene Möglichkeiten, bestimmte Aspekte der Systemkonfiguration zu betrachten und diverse Grundeinstellungen vorzunehmen. Oft genügt die hier gebotene Auswahl an Konfigurationsmöglichkeiten allerdings nicht. Sie stellt in Wirklichkeit auch nur einen Ausschnitt der tatsächlich möglichen Einstellungen dar. Abbildung 2.54 Einfaches Aufbringen von Text auf eine Grafik TYPO3 nutzt dies im Wesentlichen zur Erstellung grafischer Menübuttons, weshalb diese Funktionalität ein wenig in den Hintergrund getreten ist. Dennoch kann es gelegentlich von Nutzen sein, Text und Grafikelemente kombinieren zu können. Abbildung 2.56 Wirklich alle Einstellmöglichkeiten finden Sie in»all Configuration«. Entsprechend umfassend ausgestattet zeigt sich dann auch der dritte Menüpunkt des Install Tools, All Configuration (siehe Abbildung 2.56). Wie der Name bereits verrät, findet sich hier wirklich jede Einstellung von TYPO3 wieder, auch die bereits im Rahmen der Configuration Presets gezeigten. Inzwischen ist die Installation von TYPO3 unter normalen Umständen so reibungslos, dass eine weitergehende Anpassung nur in Sonderfällen erforderlich ist. Wenn Sie aber erleben möchten, welche Möglichkeiten hier angeboten werden, so klicken Sie auf den Button Toggle All, um sämtliche Optionen auszuklappen. Abbildung 2.55 Text mit Antialiasing und Schlagschatten Da üblicherweise kein weiterer Eingriff erforderlich ist, belassen wir es bei der kurzen Stippvisite. Beachten Sie aber den permanent am unteren Fensterrand sichtbaren Button Write configuration (siehe Abbildung 2.57), den Sie bitte betätigen, wenn Sie hier eine Änderung vorgenommen haben sollten. Verlassen Sie eine Eingabemaske, ohne zu speichern (dies gilt für ähnliche Situationen überall im System), so werden Ihre Änderungen verworfen

22 2 Installation von TYPO3 CMS 6.2 LTS 2.9 Aufräumen im Clean-up-Bereich des Install Tools Abbildung 2.58 Der»Upgrade Wizard«des Install Tools Abbildung 2.57 Viele, viele Optionen und ein Speicherbutton 2.8 Der Upgrade Wizard und die Folder Structure Ähnlich kurz wird unser Besuch im Upgrade Wizard (siehe Abbildung 2.58) ausfallen. In dieser Abteilung des Install Tools erhalten Sie Hilfe, sobald Sie Ihr System auf eine neuere Version von TYPO3 upgraden möchten (was jetzt bestimmt noch nicht der Fall sein wird) oder ein altes System zu einem aktuellen migrieren möchten (was ebenfalls nicht erforderlich ist, da wir ja eine Neuinstallation gemacht haben). In der Rubrik Folder Structure (siehe Abbildung 2.59) gibt TYPO3 Auskunft über die Verzeichnisstruktur des Systems. Sollten Probleme mit fehlenden Verzeichnissen oder nicht gesetzter Schreiberlaubnis für kritische Ordner existieren, so erfahren Sie dies hier. Aktuell sollten hier jedoch keinerlei entsprechende Meldungen ausgegeben werden. Abbildung 2.59 Die»Folder Structure«-Ansicht des Install Tools 2.9 Aufräumen im Clean-up-Bereich des Install Tools Für später merken können Sie sich den Bereich Clean up (siehe Abbildung 2.60), über den TYPO3 Ihnen die Möglichkeit gibt, bestimmte Tabellen der Datenbank zu leeren, die auf längere Sicht mit nicht mehr benötigten Informationen volllaufen. Hierzu gehörten Login-Protokolle, der Cache von Bildinformationen, Session-Protokolle und vieles mehr. Sie brauchen jedoch keine Pauschallöschung vorzunehmen, sondern können gezielt einzelne Tabellen zum Leeren benennen. Des Weiteren können Sie temporäre Dateien löschen, wie sie beim laufenden Betrieb anfallen. Hierbei können Sie auch nach Alter oder Dateigröße filtern

23 2 Installation von TYPO3 CMS 6.2 LTS 2.10 Kurz vor Schluss»Important actions«im Install Tool Der»Database Analyzer«Das Tool Database Analyzer vergleicht den augenblicklichen Zustand der Datenbanktabellen (Ist-Zustand) mit den Spezifikationen (Soll-Zustand). Dieses Werkzeug kommt gelegen, wenn nach größeren Eingriffen (wie nach der Installation oder Deinstallation von Erweiterungen, nach Datenimporten oder Updates) die Systemintegrität überprüft werden soll. Abbildung 2.62 Report des»database Analyzer«alles in Ordnung Zum jetzigen Zeitpunkt können Sie den Analyzer zwar»zum Spaß«laufen lassen, Fehler melden wird er jedoch nicht (siehe Abbildung 2.62). Abbildung 2.60 Löschen von Datenmüll im Bereich»Clean up«2.10 Kurz vor Schluss»Important actions«im Install Tool Bevor wir das Install Tool endgültig verlassen und uns im Backend umsehen, besuchen wir noch den obersten Menüpunkt Important Actions (siehe Abbildung 2.61). Hier werden Ihnen einige tatsächlich wichtige Eingriffsmöglichkeiten geboten, die Sie registrieren sollten Die Option»Clear all cache«über Clear all cache können die Caches des TYPO3-Systems geleert werden. Es gibt zwar eine analoge Funktion im Backend, die wir bei Gelegenheit betrachten werden, diese hier ist aber ebenfalls nützlich. Abbildung 2.63 Der (zurzeit eigentlich noch leere) Cache wurde geleert Nach fehlerhaften Erweiterungsinstallationen suchen Da TYPO3 durch externe Module erweiterbar ist und diese Module auch miteinander in Konflikt geraten können, ist es eine gute Option, bei nicht identifizierbaren Fehlern testen zu können, ob die Ursache bei einer Erweiterung zu suchen ist, deren Installation beschädigt wurde. Mit Check for broken extensions kann man genau dies tun. Das Tool lädt einfach alle aktuellen Erweiterungen neu (was ansonsten nur bei einem Systemstart geschieht) und kann so erkennen, ob ein Defekt vorliegt. Abbildung 2.61 Diverse Servicefeatures in»important actions«76 77

24 2 Installation von TYPO3 CMS 6.2 LTS 2.10 Kurz vor Schluss»Important actions«im Install Tool Update des System-Cores Ein Update des Systems gleicht zwar einer Operation am offenen Herzen, muss aber dennoch gelegentlich vorgenommen werden, weil beispielsweise Sicherheitsupdates im Rahmen eines neuen Releases vorgenommen wurden. Prüfen Sie dies über Core update. Sie benötigen eine Onlineverbindung zum TYPO3-Repository, da Daten von geladen werden. Wird die Notwendigkeit eines Updates bemerkt, so erhalten Sie eine Meldung wie in Abbildung Leider funktioniert ein automatisches Update unter Windows nicht 11 Sie bekommen nur eine Fehlermeldung, wenn Sie den Button Update now betätigen: Sie müssen das aktuelle Zip-File der Distribution herunterladen und die TYPO3- Source per Hand aktualisieren Ändern des Website-Namens TYPO3 verwendet einen Defaultnamen für ein Website-Projekt. Solange Sie dies nicht ändern 12, lautet er»new TYPO3 site«. Zwar haben Sie später noch öfter Gelegenheit, ihn zu ändern, Sie können es aber auch gern jetzt über Change site name tun (siehe Abbildung 2.66). Abbildung 2.66 Ändern des Website-Namens Ändern des Verschlüsselungsstrings Einen Grund zum Wechsel des Verschlüsselungsstrings gibt es eigentlich selten. Sie können jedoch, was auch geraten wird, Change encryption key prophylaktisch nach einer Neuinstallation veranlassen (beispielsweise jetzt). Dies zwingt das System dazu, alle Hashstrings der verschlüsselten Passwörter neu zu berechnen. Abbildung 2.64 Ein verfügbares Update wurde erkannt. Bevor Sie den Button Set a new encryption key betätigen, seien Sie vorgewarnt, dass das Install Tool Sie gleich aus dem Login werfen wird, da der bis dahin gültige Hash nicht mehr existiert! Sie können sich aber mit demselben Passwort erneut anmelden (nur dessen interne Verschlüsselung wurde aktualisiert) Ändern des Passworts für das Install Tool Möchten Sie das Login-Passwort des Install Tools ändern (derzeit sollte es noch den Defaultwert haben), so können Sie dies in Change install tool password tun. Sie benötigen hierfür das alte Passwort nicht geben Sie einfach zweimal das gewünschte neue Passwort ein (siehe Abbildung 2.65) Einen Backend-Administrator erstellen Die wichtigste (und als Angriffsvektor gefährlichste) Aktion, die Sie an dieser Stelle vornehmen können, besteht im Generieren eines Backend-Administrators (Create backend administrator user siehe Abbildung 2.67). Bedenken Sie, dass ein Nutzer mit diesen Rechten im System alle Privilegien hat, der Zugang zu dieser Option einem Angreifer also alle Tore öffnet! Abbildung 2.65 Ändern des Install-Tool-Passworts 11 Mac OS- und Linux-User haben hier einen Vorteil. Das Core-Update geht dort über Simlinks. Es funktioniert aber unter Windows selbst dann nicht, wenn im Projekt (wie bei uns) ebenfalls»symbolische Links«eingesetzt wurden. Schade. Abbildung 2.67 Erstellen eines Admin-Accounts 12 Ja, das hätte in Phase 4 des Installationsprozesses bereits geschehen können. Gut bemerkt

25 2 Installation von TYPO3 CMS 6.2 LTS Nur völlig neue Usernamen möglich Es ist nicht möglich, von dieser Stelle aus einen existierenden Account zu überschreiben, beispielsweise um ein vergessenes Passwort neu zu setzen! Sie erhalten die Meldung, der Username sei bereits vergeben. (Das gilt auch für gelöschte Accounts auch für diese befindet sich noch ein Datensatz in der Datenbank!) Verwenden Sie also stets einen noch nie eingesetzten Usernamen. Änderungen oder Reparaturen an existierenden Accounts können Sie vornehmen, sobald Sie wieder ins Backend gelangen. Üblicherweise existiert ein solcher Account in der Datenbank, sodass Sie diese Aktion nicht benötigen. Falls jedoch der Datenbankeintrag zum Account beschädigt oder der Datensatz versehentlich gelöscht wurde (das geht schneller, als man glaubt), können Sie, solange Sie das Install Tool erreichen, stets wieder Zugang zum System erlangen. Zwei Dinge sind hierfür erforderlich: Der Direktzugriff auf das Install Tool: Das Install Tool ist über den URL stets direkt ansprechbar. In unserem speziellen Fall über: Schreibrechte auf den Ordner typo3conf (z. B. per FTP): Sie werden gewöhnlich eine Datei ENABLE_INSTALL_TOOL platzieren müssen, um den Zugriff zu autorisieren. Ein unautorisierter Zugriff auf das Install Tool birgt Gefahr Die oben stehenden Fakten sind jedermann bekannt, der sich einigermaßen mit TYPO3 auskennt. Aus Gründen der Sicherheit raten wir Ihnen daher, bei einem System, das von außen erreichbar ist, das Verzeichnis install/ im Ordner typo3/ zu löschen oder (was angeblich besser ist) es einfach umzubenennen 13. Für Ihre lokale Testinstallation sollte dies aber nicht nötig sein. Derzeit wollen wir uns wegen Sicherheitsfragen keine grauen Haare wachsen lassen. Sicher haben Sie jetzt genug von der Konfiguration des Systems und wollen tätig werden. Voilà, im nächsten Schritt werden wir den versprochenen Rundgang durch das Backend von TYPO3 machen! Vorher sollte die Datei ENABLE_INSTALL_TOOL der Ordnung halber gelöscht werden: Klicken Sie auf den Link Logout from Install Tool, um den Installationsbereich sauber zu verlassen. 13 Möglicherweise ist dies jedoch fruchtlos: Es ist nur eine Alias-Adresse. Ein Zugriff ist ebenfalls möglich über Dort nämlich liegt das eigentliche Install Tool. Und auch das ist Angreifern natürlich bekannt. 80

26 Kapitel 4 Seiten anlegen In diesem Kapitel zeigen wir Ihnen, wie Sie Seiten und Unterseiten mithilfe der Modulgruppe Web anlegen: Wir behandeln das Erstellen, Kopieren, Verschieben von Seiten mittels Kontextmenü und Drag & Drop, das Löschen und Wiederherstellen sowie das Kopieren und Löschen von Zweigen des Seitenbaums. Jetzt, da Sie über eine funktionierende TYPO3-Installation verfügen, ist es an der Zeit, die erste Seitenstruktur aufzubauen. 4.1 Der TYPO3-Seitenbaum Wählen Sie in der Modulgruppe Web das Modul Seite aus. In der linken Hälfte des Arbeitsbereichs erscheint jetzt der Seitenbaumder zukünftigen Website. Da wir die Standard-Installation von TYPO3 verwendet haben, ist der Seitenbaum noch leer. Ein Seitenbaum in TYPO3 entspricht den Webseiten, die in einer»herkömmlichen«webpräsenz in Form von HTML-Dokumenten abgelegt sind. Da TYPO3 nicht mit»realen«dateien arbeitet, müssen keine Seiten physisch auf dem Server abgelegt werden. Stattdessen werden sie im CMS selbst als»virtuelle Seiten«aus der Datenbank erzeugt. Diese virtuellen Dokumente werden hierarchisch einem Startpunkt unterstellt, der dem Wurzelverzeichnis (Root) einer Webpräsenz entspricht. Das Symbol, das TYPO3 für diesen Startpunkt verwendet, ist ein kleines TYPO3-Logo mit der Bezeichnung New TYPO3 site. Die Hierarchien unterhalb dieses Root-Icons sind vergleichbar mit den Ordnerstrukturen, die normale Websites zur Dateiablage verwenden. Eine Stärke von TYPO3 ist die hierarchische Struktur des Seitenbaums. Damit lassen sich sehr komplexe Seitenstrukturen aufbauen und verwalten Anlegen von neuen Seiten über das Kontextmenü des Root-Icons Ein Klick auf das Root-Icon öffnet ein Kontextmenü (siehe Abbildung 4.1) 1. Es ist gleichgültig, ob Sie hierfür die linke oder die rechte Maustaste verwenden. Dieses 1 Sie benötigen einen aktuellen Browser. Wenn Sie kein Kontextmenü sehen, unterstützt Ihr Browser die aktuelle TYPO3-Version nicht entsprechend. 97

27 4 Seiten anlegen 4.1 Der TYPO3-Seitenbaum Kontextmenü besitzt fünf Menüpunkte. Wählen Sie von diesen den Befehl Neu, um eine neue Seite anzulegen. Eine frische Seite ist immer zunächst»versteckt«, damit sie vor dem Abschluss der Bearbeitung von außen unsichtbar ist. Da dies für diese Vorübungen keine Rolle spielt, wählen Sie im Reiter Zugriff die entsprechende Checkbox Deaktivieren ab (siehe Abbildung 4.3). Alle anderen Reiter und Eingabefelder können Sie vorläufig außer Acht lassen. Abbildung 4.1 Eine neue Seite aus dem Kontextmenü anlegen In der rechten Hälfte des Arbeitsbereichs erscheint nun ein Dialog zur Erstellung einer neuen Seite. Der Dialog ist, analog zu den Benutzereinstellungen, in mehrere Bereiche unterteilt, die in Form von Karteireitern organisiert sind. Uns interessiert an dieser Stelle zunächst der erste Reiter, Allgemein (siehe Abbildung 4.2). Hier geben Sie den Seitentitelein. Dialoge mit obligatorischen Angaben kennzeichnet TYPO3 durch ein Ausrufezeichen im gelben Dreieck. Das heißt, Sie können diesen Dialog erst dann speichern, wenn Sie eine Eingabe im Feld Seitentitel gemacht haben. Nennen Sie die neu erstellte Seite»Seite 1«. Abbildung 4.3 Sichtbarkeit der neuen Seite Beenden Sie den Dialog durch Klick auf das rechte Disketten-Icon (Dokument speichern und schliessen) am oberen Rand des Arbeitsfensters (siehe Abbildung 4.3, Schritt 2). Das linke Disketten-Icon (jenes ohne Kreuz, siehe Abbildung 4.4) speichert Ihre Eingaben, ohne aber dabei den Dialog zu schließen. Sie können nachfolgend weitere Eingaben vornehmen. Abbildung 4.4 Icons zum Speichern und Beenden des Dialogs Das räumlich abgesetzte graue Icon mit dem Kreuz (ganz links) benötigen Sie nur, falls Sie den Dialog ohne Speichervorgang unmittelbar verlassen wollen. In diesem Fall würde jedoch keine neue Seite erzeugt werden. Tipp: Vergessen Sie nie das Speichern als Abschluss eines Dialogs! Die von den Eingabefeldern räumlich getrennte Anordnung der Speicher-Buttons oberhalb des eigentlichen Eingabebereichs verleitet dazu, das Speichern zu vergessen, wenn man in Eile ist. Sobald Sie den Dialog jedoch verlassen, ohne zu speichern (indem Sie beispielsweise in ein anderes Modul wechseln), sind Ihre Eingaben unwiederbringlich verloren. Gewöhnen Sie sich daher routinemäßiges Speichern an. Abbildung 4.2 Seitentitel für eine neue Seite angeben Wenn Sie eine neue Seite auf die eben beschriebene Weise erstellen, landen Sie im rechten Arbeitsbereich in einem Modus Neuer Datensatz, in dem Sie weitere Sei

28 4 Seiten anlegen 4.1 Der TYPO3-Seitenbaum ten anlegen und deren Position bestimmen können. Das ist sehr praktisch und erspart Ihnen einige Klicks, wenn Sie eine Seitenstruktur anlegen wollen. Sie bestimmen die Position mit einem Klick auf einen der angebotenen Pfeile. Wählen Sie den zweiten Pfeil von oben (siehe Abbildung 4.5), um eine Unterseite zu erstellen. Es öffnet sich wieder der Dialog wie eben. Geben Sie den Seitentitel»Unterseite 1«ein, aktivieren Sie die Seite, und bestätigen Sie mit Dokument speichern und schliessen. und bedeutet»einfügen in«. Die neue Seite wird hierarchisch der bestehenden Seite untergeordnet (siehe Abbildung 4.7, rechts). Abbildung 4.7 Neue Seite per Drag & Drop»in«bestehender Seite Abbildung 4.5 Eine Unterseite anlegen und die Position bestimmen Neue Seite mit Drag & Drop Die neuen Seiten erscheinen nun mit den angegebenen Titeln als Hauptseite und Unterseite im Seitenbaum. Klicken Sie jetzt zur Abwechslung auf das Seitenerstellungs-Icon links oben (Neue Seite erstellen), um eine weitere Seite anzulegen. Unter dem Icon klappt eine Button-Reihe auf, die verschiedene Typen zu erstellender Seiten symbolisiert (siehe Abbildung 4.6, rechts). Wir interessieren uns in diesem Fall zunächst nur für das Icon ganz links, das eine»herkömmliche«neue Seite repräsentiert. Sie können jedes Icon einfach mit der Maus anfassen und in den Seitenbaum ziehen. Dieses Prozedere soll nun gleich wiederholt werden. (Praktischerweise bleibt die Icon-Leiste zur Seitenerstellung offen, bis sie durch einen weiteren Klick auf den Neue Seite erstellen-button geschlossen wird.) Ziehen Sie das Icon Neue Seite erneut in den Seitenbaum, diesmal allerdings unterhalb der neuen Seite, die noch den Titel [Standard-Titel] trägt (siehe Abbildung 4.8, links). Diesmal soll jedoch eine Folgeseite auf der gleichen Hierarchie-Ebene, also nach der bestehenden Seite erzeugt werden. Das genaue Einfügen ist anfangs ein wenig kniffelig, mit ein wenig Übung jedoch recht praktisch. Abbildung 4.8 Neue Seite per Drag & Drop»nach«bestehender Seite Beachten Sie den Avatar, der diesmal ein wenig anders aussieht. Er verändert sein Aussehen je nach Zielposition der zu erstellenden Seite (siehe Abbildung 4.9 und Abbildung 4.10). Abbildung 4.6 Icons für neue Seiten, Einleitung für das Drag & Drop Abbildung 4.9 Avatar für»einfügen in«ziehen Sie das Icon nun auf die im Seitenbaum bereits bestehende Seite mit dem Titel»Seite 1«, und lassen Sie es dort fallen (siehe Abbildung 4.7, links). Achten Sie auf das hellblaue Avatar-Icon es zeigt ein kleines Symbol mit einem einzelnen Ordner Abbildung 4.10 Avatar für»einfügen nach«

29 4 Seiten anlegen 4.2 Kontextmenüs und Shortcut-Buttons Dies ist die wohl intuitivste Methode der Seitenerstellung trotzdem gibt es hierfür noch weitere Möglichkeiten, die wir uns gleich ansehen werden. Zurzeit besitzen die neuen Seiten immer noch Standardtitel, die lediglich als Platzhalter zu verwenden sind. Sie müssen also geändert werden. Außerdem sind die beiden neuen Seiten noch»versteckt«, was Sie am Icon erkennen können, das ein rotes Warnsymbol trägt (siehe Abbildung 4.11). Im nächsten Schritt sollen sowohl die Seitentitel als auch die Sichtbarkeitseigenschaften der neuen Seiten angepasst werden. Abbildung 4.11 Icon für eine»versteckte«seite Änderungen der Seiteneigenschaften Abbildung 4.13 Eine Seite über das Kontextmenü aktivieren Das Ändern des Titels ist ebenso intuitiv möglich wie das Erstellen der Seite. Sie brauchen lediglich einen Doppelklick auf den zu bearbeitenden Titel auszuführen und können ihn dann einfach überschreiben. Ändern Sie den Titel der ersten neuen Seite in»unterseite 2«(siehe Abbildung 4.12). Abbildung 4.14 Die Eigenschaften einer Seite bearbeiten Abbildung 4.12 Ändern des Seitentitels unmittelbar im Seitenbaum Fast ebenso einfach gestaltet sich das Einblenden einer Seite: Klicken Sie hierfür auf deren Icon im Seitenbaum. Es öffnet sich ein Kontextmenü. Wählen Sie hier den Befehl Aktivieren, und schon sind Sie fertig (siehe Abbildung 4.13) Mit der zweiten Seite könnten Sie im Prinzip ebenso verfahren. Da die Möglichkeit dazu besteht, soll diesmal jedoch ein anderer Weg gewählt werden. Klicken Sie diesmal auf den Seitentitel (siehe Abbildung 4.14, Schritt 1). Rechts neben dem Seitenbaum wechselt nun die Ansicht des Arbeitsbereichs, um ein Bearbeiten der angewählten Seite zu ermöglichen allerdings mit der Zielsetzung, der Seite Inhalte hinzuzufügen. Das soll jetzt noch nicht geschehen, sondern es sollen die Seiteneigenschaften bearbeitet werden. Klicken Sie auf das Icon Seiteneigenschaften bearbeiten am oberen Rand des Arbeitsbereichs (siehe Abbildung 4.14, Schritt 2). Sie gelangen in den gleichen Dialog wie bei der Neuerstellung einer Seite. Überschreiben Sie den Seitentitel mit»unterseite 3«, und speichern Sie Ihre Eingabe. Sie sehen, dass Ihre Änderung sofort im Seitenbaum sichtbar wird. Stellen Sie die Seite im Bereich Zugriff durch Abwahl der Checkbox Deaktivieren auf sichtbar. In diesem Dialogmodus sind auch beliebige weitere Änderungen an den Seiteneigenschaften möglich. 4.2 Kontextmenüs und Shortcut-Buttons An dieser Stelle ist es angebracht, die Kontextmenüs des Root-Icons und normaler Seiten miteinander zu vergleichen. Grundsätzlich besitzt jedes Objekt, das Teil des Seitenbaums ist, ein solches Kontextmenü

30 4 Seiten anlegen 4.2 Kontextmenüs und Shortcut-Buttons Das Kontextmenü eines Seitenelements Genau wie das Root-Icon besitzt auch jede Seite im Seitenbaum ein Kontextmenü. Dieses wird ebenfalls per Klick auf das Icon eingeblendet, ist aber von der Zahl der Befehle her umfangreicher als das Kontextmenü des Root-Icons (siehe Abbildung 4.15). Abbildung 4.17 Das Icon des Befehls»Aktivieren/Deaktivieren«Der Befehl Bearbeiten Stiftsymbol Dieser Befehl öffnet den Dialog zur Bearbeitung der Seiteneigenschaften. Abbildung 4.18 Das Icon des Befehls»Bearbeiten«Abbildung 4.15 Die Kontextmenüs des Root-Icons (links) und einer Seite (rechts) Die Befehle, aus denen sich ein Menü zusammensetzt, richten sich nach dem Objekt, dem das Kontextmenü gehört. Das Root-Icon besitzt die Optionen Ansehen, Neu, Verlauf/Rückgängig, Exportieren in.t3d und Importieren aus.t3d. Wofür genau die jeweiligen Befehle stehen, werden wir in Kürze erarbeiten. Das Kontextmenü einer Seite zeigt (mit zwei Ausnahmen) andere Befehle. Auch hier existieren zwar die Optionen Ansehen und Verlauf/Rückgängig die anderen drei Befehle Deaktivieren, Bearbeiten und Info sind aber nur für Seitenobjekte verfügbar. Des Weiteren befindet sich hinter den beiden Menüpunkten Seitenaktionen und Teilbereichsaktionen noch je ein weiteres Untermenü. Betrachten wir zunächst kurz die Befehle der ersten Ebene: Der Befehl Ansehen Seitensymbol mit Auge Dieser Befehl öffnet die aktuelle Seite zum Betrachten in einem neuen Browserfenster. Vom Root-Icon aus angewandt, öffnet er die Einstiegsseite der Website. Der Befehl Info weißes»i«auf blauem Schild Dieser Befehl öffnet ein Popup-Fenster mit Informationen über das aktuelle Objekt (Typ, Titel, letzte Aktualisierung etc.). Abbildung 4.19 Das Icon des Befehls»Info«4.2.2 Das Untermenü»Seitenaktionen«Im Kontextmenü sind Ihnen sicher die beiden Menüpunkte Seitenaktionen und Teilbereichsaktionen aufgefallen, die selbst nicht anklickbar sind. Stattdessen führen sie jeweils in ein weiteres Untermenü. Wenn Sie das Unterkontextmenü ausgehend von»seite 1«öffnen, sehen Sie, dass es drei Befehle enthält (siehe Abbildung 4.20). Sie können, ausgehend von dieser Position im Seitenbaum, eine neue Seite anlegen, die aktuelle Seite ausschneiden oder kopieren. Diese Befehle werden wir in Abschnitt 4.4»Manipulation des Seitenbaums«, behandeln. Abbildung 4.16 Das Icon des Befehls»Ansehen«Der Befehl Aktivieren ausgeschaltete Glühlampe Dieser Befehl macht die aktuelle Seite sichtbar, wenn sie ausgeblendet ist, bzw. blendet sie aus, wenn sie sichtbar ist. Welcher Befehl angezeigt wird, hängt vom jeweiligen Zustand der Seite ab. Die Anweisung entspricht der Checkbox Deaktivieren im Bereich Zugriff der Seiteneigenschaften. Abbildung 4.20 Das Untermenü»Seitenaktionen«, Wurzelseite eines Zweigs

31 4 Seiten anlegen 4.2 Kontextmenüs und Shortcut-Buttons An dieser Stelle soll etwas anderes gezeigt werden. Öffnen Sie nun das gleiche Untermenü erneut, diesmal ausgehend von Unterseite 3. Sie sehen, dass das Untermenü jetzt vier Befehle umfasst und zwar ist die Option hinzugekommen, die aktuelle Seite zu löschen (siehe Abbildung 4.21). Der Grund hierfür ist, dass es sich bei»unterseite 3«um eine sogenannte Blattseite im Seitenbaum handelt, also um eine Seite, die selbst nicht über Unterseiten verfügt. Eine solche Seite darf gelöscht werden, da keine von ihr abhängigen Seitendatensätze existieren. TYPO3 geht hingegen davon aus, dass das Löschen einer Seite, die (wie»seite 1«) über eine oder mehrere Unterseiten verfügt, reglementiert werden muss: Für solche Seiten wird daher eine Löschoption von vornherein nicht angeboten (Sie werden noch sehen, wie sich das ändern lässt). Löschen Sie nun die Seite»Unterseite 3«. Wir brauchen diese Seite nicht mehr. Abbildung 4.23 Löschen einer Seite per Drag & Drop Das Untermenü»Teilbereichsaktionen«In TYPO3 bezeichnet man einen Zweig des Seitenbaums als Teilbereich. Nicht alle Aktionen, die im Seitenbaum möglich sind, beziehen sich direkt auf Seitenobjekte. Manche sind für mehrere Seiten gleichzeitig gültig, die im Rahmen eines Baumzweigs zusammengefasst sind. Sie betreffen also beispielsweise eine Hauptseite und gleichzeitig alle ihre Unterseiten. Solche Aktionen werden als Teilbereichsaktionen bezeichnet. Diese Aktionen sind über ein eigenes Untermenü erreichbar (siehe Abbildung 4.24), wobei es keine Rolle spielt, ob die betreffende Seite selbst über Unterseiten verfügt. (Ist dies nicht der Fall, besteht der»teilbereich«eben nur aus der aktuellen Seite.) Abbildung 4.21 Das Untermenü»Seitenaktionen«,»Unterseite 3«löschen Der Befehl Löschen Mülltonnensymbol Dieser Befehl löscht das aktuelle Objekt aus dem Seitenbaum. Dies ist ohne Konfigurationsänderung nur für Objekte möglich, die keine Unterobjekte besitzen (sogenannte Leaf- oder Blattseiten eines Zweigs). Abbildung 4.22 Das Icon des Befehls»Löschen«Zum Löschen können Sie ein Objekt jedoch einfacher auch an den unteren Rand des Seitenbaumbereichs ziehen (siehe Abbildung 4.23). Auch dies ist nur für Leaf-Seiten möglich; für andere Seiten erscheint das Drop-Target nicht. Abbildung 4.24 Das Untermenü»Teilbereichsaktionen«Der Befehl Als Startpunkt für den Seitenbaum festlegen Dieser Befehl macht die aktuelle Seite zur Wurzelseite eines temporären Seitenbaums. Dies ist praktisch, sobald der vollständige Seitenbaum auf eine unüber

32 4 Seiten anlegen 4.3 Verwenden des Papierkorbs sichtliche Größe angewachsen ist und man vorübergehend mehr Übersicht benötigt: Alle Zweige, die sich neben der aktuellen Seite befinden, und Seiten hierarchisch oberhalb der aktuellen Seite werden ausgeblendet. Der temporäre Startpunkt kann per Klick einfach wieder aufgehoben werden (siehe Abbildung 4.26). itiv und braucht nicht weiter erläutert zu werden. Es sollte damit aber deutlich werden, warum TYPO3-Anwender sagen, dass Unterseiten sich»in«einer Hauptseite befinden. Abbildung 4.25 Das Icon des Befehls»Als Startpunkt für den Seitenbaum festlegen«abbildung 4.29 So klappen Sie einen Zweig des Seitenbaums aus und ein. Dieselbe Aktion lässt sich auch über das Kontextmenü der Stammseite eines Zweigs erledigen. Klicken Sie auf das Seiten-Icon, und öffnen Sie das Untermenü Teilbereichsaktionen. Hier finden Sie, neben den soeben vorgestellten Befehlen, auch die Optionen, diesen Teilbereich ein- oder auszuklappen (siehe Abbildung 4.30). Abbildung 4.26 Temporären Startpunkt aufheben Der Befehl Exportieren in.t3d Dieser Befehl exportiert die Daten der aktuellen Seite oder, je nach Einstellung, des gesamten aktuellen Zweigs in Form eines TYPO3-Dumps. Abbildung 4.27 Das Icon des Befehls»Exportieren in.t3d«der Befehl Importieren aus.t3d Als Gegenstück zum eben erwähnten Exportbefehl gibt diese Anweisung die Möglichkeit, einen TYPO3-Dump mit der aktuellen Seite als Einstiegspunkt zu importieren. Abbildung 4.30 Aus- und Einklappen eines Seitenbaumzweigs (Kontextmenü) 4.3 Verwenden des Papierkorbs Abbildung 4.28 Das Icon des Befehls»Importieren aus.t3d«4.2.4 Ein- und Ausklappen von Seitenbaumzweigen Um die Übersichtlichkeit zu verbessern, können Sie in TYPO3 Teile des Seitenbaums einklappen (siehe Abbildung 4.29). Hierbei dienen die schwarzen Dreiecke am Ausgangspunkt jedes Zweigbaums als klickbare Schalter. Das Verfahren ist intu- Sie haben jetzt schon einige Funktionen des Seitenbaums kennengelernt. Seiten werden in hierarchischer Struktur angelegt und können positioniert werden. Sie haben auch schon Seiten gelöscht. Sind die Seiten wirklich gelöscht? Sie ahnen es schon: nein. In der Datenbank werden sie als gelöscht markiert und im Backend nicht mehr angezeigt. Hier kommt der Papierkorb ins Spiel, um gelöschte Seiten wieder anzuzeigen oder als gelöscht markierte Seiten aus der Datenbank endgültig zu löschen

33 4 Seiten anlegen 4.3 Verwenden des Papierkorbs Wie alle Module der Modulgruppe Web arbeitet auch der Papierkorb als Web-Modul mit dem Seitenbaum zusammen. Hier werden also nicht alle gelöschten Datensätze, wie Seiten oder Inhalte, gesamt in einem Eimer abgelegt, wie es beim Papierkorb auf dem Windows-Desktop der Fall ist, sondern sie behalten den Bezug zum Seitenbaum Seiten aus dem Papierkorb wiederherstellen Klicken Sie auf das Modul Papierkorb, und wählen Sie im Seitenbaum New TYPO3 site aus. Im rechten Teil des Arbeitsbereichs öffnet sich der Papierkorb und ist scheinbar leer (siehe Abbildung 4.31). Ohne weitere Einstellungen zeigt der Papierkorb nur die als gelöscht markierten Datensätze, die der ausgewählten Seite im Seitenbaum zugeordnet waren. Die gelöschten Unterseiten waren der»seite 1«zugeordnet. Es wäre müßig, alle Seiten im Seitenbaum durchzuklicken, um die gelöschten Seiten wiederzufinden. Dazu stellt der Papierkorb die einzuschließenden Ebenen (Tiefe) als Auswahl zur Verfügung. Die Tiefe ist auf diese Seite eingestellt. Wählen Sie die Tiefe auf 1 Ebene (siehe Abbildung 4.31). Im Papierkorb tauchen»unterseite 2«und»Unterseite 3«auf. Es wird also die nächste Ebene aus dem Seitenbaum mit aufgenommen. Abbildung 4.32»Unterseite 2«wiederherstellen Möglicherweise stellt der Seitenbaum die wiederhergestellte Seite noch nicht dar und ein Aktualisieren des Seitenbaums ist notwendig. Dazu klicken Sie auf das Symbol mit den grünen geschwungenen Pfeilen oberhalb des Seitenbaums (siehe Abbildung 4.33). Damit wird der Seitenbaum aus der Datenbank neu eingelesen. Abbildung 4.33 Den Seitenbaum aktualisieren Seiten aus dem Papierkorb löschen Abbildung 4.31 Der Papierkorb wird auf Ebenen im Seitenbaum begrenzt. Hier können Sie nun entscheiden, ob Datensätze aus dem Papierkorb wiederhergestellt oder endgültig gelöscht werden. Die einzelnen Datensätze werden mit dem Kontrollkästchen links markiert. Markieren Sie die»unterseite 2«(siehe Abbildung 4.32, Schritt 1). Im unteren rechten Bereich des Papierkorbs finden Sie die Schaltflächen Löschen und Wiederherstellen. Stellen Sie»Unterseite 2«wieder her, indem Sie die Schaltfläche Wiederherstellen klicken (Schritt 2) und den folgenden Dialog mit Ja bestätigen. Im Laufe des Betriebs von TYPO3 werden eine Menge an Seitenaktionen passieren. Somit wird auch der Papierkorb voll. Wie im wahren Leben sollte er hin und wieder geleert werden, das heißt, nicht benötigte Seiten sollten endgültig gelöscht werden. Lassen Sie uns die»unterseite 3«aus dem Papierkorb entfernen. Im Hintergrund wird der Datensatz aus der Datenbank unwiederbringlich gelöscht. Markieren Sie dazu in dem Kontrollkästchen links die»unterseite 3«, und betätigen Sie diesmal die Schaltfläche Löschen unten rechts (siehe Abbildung 4.34). Bestätigen Sie auch hier den folgenden Dialog mit Ja

34 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Kopieren über das Kontextmenü Wie einfach es ist, eine neue Seite per Drag & Drop zu erzeugen, haben wir bereits in diesem Kapitel behandelt. Eben wurde nochmals das Erzeugen einer Seite per Kontextmenü demonstriert. Sie sehen, dass TYPO3 verschiedene Wege bietet, um dieselbe Aktion durchzuführen. Diese Redundanz ist durchaus beabsichtigt und gibt Ihnen die Möglichkeit, Ihre Arbeitsmethoden nach Ihren persönlichen Vorlieben zu gestalten. Abbildung 4.34»Unterseite 3«aus dem Papierkorb löschen 4.4 Manipulation des Seitenbaums Wir befassen uns nun mit den Möglichkeiten, die TYPO3 bietet, um den Seitenbaum und damit die Struktur einer Website zu bearbeiten, die wir erzeugen wollen. Da das Navigationsmenü der Site aus den Namen und den Positionen der Seiten im Seitenbaum abgeleitet wird, ist es wichtig, Seiten einfach umbenennen, verschieben, kopieren oder löschen zu können. Einen Teil dieser Möglichkeiten haben wir bereits gestreift. Nun gehen wir die Thematik systematischer an und betrachten zum Schluss auch das Kopieren und Löschen ganzer Zweige. Benennen Sie zunächst»seite 1«in»Hauptseite 1«um, und erzeugen Sie eine weitere»unterseite 3«in»Hauptseite 1«(siehe Abbildung 4.35). Abbildung 4.36 Kopieren und Einfügen einer Seite per Kontextmenü Auch für das Kopieren einer bereits existierenden Seite bietet TYPO3 mehrere Ansatzpunkte. Betrachten wir zunächst das Kopieren und Einfügen per Kontextmenü. Klicken Sie das Icon der betreffenden Seite an, und wählen Sie im sich daraufhin öffnenden Kontextmenü die Option Seitenaktionen Kopieren (siehe Abbildung 4.36, links). Wir wollen auf diesem Weg eine Kopie von»hauptseite 1«erstellen. Die kopierte Seite muss nun im Seitenbaum platziert werden klicken Sie hierfür auf das Icon derjenigen Seite, der die kopierte Seite als Folge- oder Unterseite zugeordnet werden soll (siehe Abbildung 4.36, Mitte; in diesem speziellen Fall ist dies zweimal die gleiche Seite). Abbildung 4.37 Das Icon»Kopieren«Abbildung 4.35 Erzeugen des Ausgangsseitenbaums für diesen Abschnitt

35 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Sie sehen, dass das Untermenü Seitenaktionen nun weitere Befehle aufweist, die in dem Moment hinzukommen, in dem sich ein kopiertes Seitenobjekt in der Zwischenablage befindet. Manche Befehlsoptionen werden erst sichtbar, wenn sie benötigt werden Die Menüpunkte Einfügen nach und Einfügen in sind im Kontextmenü nur dann sichtbar, wenn zuvor ein Seitenobjekt zum Kopieren ausgewählt wurde. Sie haben demnach zwei Möglichkeiten zur Verfügung, um das kopierte Objekt relativ zur aktuellen Seite (bezeichnen wir sie als Zielseite) in den Seitenbaum einzufügen: Zum Einfügen der kopierten Seite als Folgeseite der Zielseite (auf gleicher Hierarchiestufe) wählen Sie Seitenaktionen Einfügen nach (siehe Abbildung 4.38). Abbildung 4.38 Das Icon»Einfügen nach«zum Einfügen der kopierten Seite als Unterseite der Zielseite wählen Sie Seitenaktionen Einfügen in (siehe Abbildung 4.39). Abbildung 4.41 Das Icon einer im Seitenbaum versteckten Seite Die neue Seite muss nun durch Änderung ihrer Seiteneigenschaften eingeblendet werden (im Kontextmenü: Aktivieren). Danach können Sie noch den Seitentitel von»hauptseite 1 (Kopie 1)«in»Hauptseite 2«ändern. Zweige des Seitenbaums werden nicht automatisch kopiert Beachten Sie, dass in diesem Fall nur die Seite selbst, nicht aber der ihr untergeordnete Seitenzweig mit den Unterseiten kopiert wurde! Analog gehen Sie beim Kopieren und Einfügen einer Unterseite vor (siehe Abbildung 4.42) hier wird als Beispiel»Unterseite 1«von»Hauptseite 1«kopiert und als Unterseite von»hauptseite 2«abgelegt. Auch in diesem Fall wird zunächst die Quellseite kopiert und anschließend das Icon der Zielseite angewählt allerdings muss in diesem Fall die Option Einfügen in verwendet werden (siehe Abbildung 4.42, Mitte). Auch diesmal ist die neu erstellte Unterseite zunächst versteckt. Blenden Sie sie daher über das Kontextmenü mit dem Befehl Aktivieren ein (siehe Abbildung 4.43). Abbildung 4.39 Das Icon»Einfügen in«der Kopierbefehl hingegen ist einstweilen blockiert, was sich in einem roten Verbotsschild auf dem Icon niederschlägt (siehe Abbildung 4.40). Dieses Icon sehen Sie nur, wenn sich die Seite, von der aus das Kontextmenü geöffnet wurde, bereits in der Zwischenablage befindet. Sie könnten zwar dennoch eine andere Seite kopieren, doch würde dabei das ursprünglich kopierte Objekt in der Zwischenablage ersetzt. Abbildung 4.40 Das Icon»Kopieren blockiert«die Kopie von»hauptseite 1«soll auf gleicher Ebene als deren Folgeseite erscheinen. Wählen Sie daher Einfügen nach (siehe Abbildung 4.36, Mitte). Die erstellte Kopie platziert sich nun als Folgeseite von»hauptseite 1«im Seitenbaum (siehe Abbildung 4.36, rechts). Gleich einer neu erstellten Seite ist sie zunächst versteckt, weshalb sie ein anderes Icon mit einem roten Warnsymbol erhält. Auch im Seitentitel ist die neue Seite als Kopie gekennzeichnet:»hauptseite 1 (Kopie 1)«. Abbildung 4.42 Kopieren und Einfügen als Unterseite

36 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Auf diesem Wege verschieben Sie»Unterseite 2«in»Hauptseite 2«. Beachten Sie: Eine verschobene Seite nimmt ihre bisherigen Eigenschaften mit. Da»Unterseite 2«bereits sichtbar war, behält sie diesen Status dementsprechend auch nach der Verschiebung bei. In»Hauptseite 1«fehlt nun die Unterseite. Macht nichts kopieren wir sie einfach dorthin zurück. Auch dies geht ganz einfach per Drag & Drop. Der einzige Unterschied zur vorigen Aktion besteht darin, die (Strg)-Taste gedrückt zu halten, während Sie die Seite mit der Maus bewegen. Abbildung 4.43 Seite aktivieren per Kontextmenü Ziehen Sie nun bei gedrückter (Strg)-Taste»Unterseite 2«aus»Hauptseite 2«auf»Unterseite 1«in»Hauptseite 1«. Sie sehen, dass sich der Avatar der bewegten Seite verändert hat und nun ein Plussymbol auf grünem Kreis zeigt. Dies bedeutet, dass dem Seitenbaum an der durch die Querlinie angedeuteten Stelle ein Objekt hinzugefügt wird (siehe Abbildung 4.46, Mitte). An dieser Position wird die Seitenkopie abgelegt. Die neue Seite muss, wie gehabt, anschließend noch eingeblendet werden. Analog können Sie eine Seite auch jederzeit wieder ausblenden (Deaktivieren). Das Kontextmenü bietet stets den jeweils zum Zustand der Seite passenden Befehl an (siehe Abbildung 4.43, Mitte). Eine verborgene Seite kann eingeblendet, eine bereits sichtbare Seite verborgen werden. Abbildung 4.44 Das Icon»Deaktivieren«(leuchtende Glühbirne) Abbildung 4.46 Seite kopieren mit Drag & Drop Kopieren und Verschieben per Drag & Drop Eleganter und intuitiver lässt sich der Seitenbaum durch Drag&Drop-Operationen manipulieren. Ziehen Sie einfach die Quellseite auf die Zielseite, und lassen Sie sie dort fallen. Probieren Sie es mit»unterseite 2«von»Hauptseite 1«, und ziehen Sie sie auf die»unterseite 1«von»Hauptseite 2«(siehe Abbildung 4.45) Der Bearbeitungsverlauf Arbeitsschritte wiederherstellen Ihnen ist sicher im Kontextmenü einer Seite das Symbol Verlauf/Rückgängig aufgefallen. Damit lassen sich bestimmte Arbeitsschritte wiederherstellen bzw. rückgängig machen. Die meisten Arbeitsschritte werden automatisch aufgezeichnet. Um zu demonstrieren, wie der Verlauf zu verstehen ist, benennen Sie die»hauptseite 2«in z. B.»Hauptseite test«um. Abbildung 4.47 Das Icon»Verlauf/Rückgängig«Abbildung 4.45 Seite verschieben mit Drag & Drop Im Kontextmenü der»hauptseite test«klicken Sie nun auf Verlauf/Rückgängig. Im rechten Arbeitsbereich öffnet sich der Bearbeitungsverlauf, der in einer Liste alle Aktionen dieser Seite und aller Unterseiten zeigt (siehe Abbildung 4.48, Schritt 1). Die Liste kann, je nach Anzahl der Arbeitsschritte, sehr lang werden. Sie können die Liste

37 4 Seiten anlegen 4.4 Manipulation des Seitenbaums einschränken, um nur die Aktionen der Seite»Hauptseite test«zu sehen. Wählen Sie dazu im Auswahlfeld Unterelemente anzeigen die Auswahl Nein (Schritt 2). Im folgenden Dialog haben Sie die Wahl, entweder einen einzelnen Schritt (den angewählten) oder alle aktuell aufgelisteten Schritte rückgängig zu machen (siehe Abbildung 4.51 und Abbildung 4.52). Abbildung 4.51 Das Icon»Einzelnen Eintrag rückgängig machen«abbildung 4.52 Das Icon»Alle gezeigten Änderungen rückgängig machen«abbildung 4.48 Der Bearbeitungsverlauf der»hauptseite test«dies ist in diesem Beispiel ebenfalls nur ein Schritt (siehe Abbildung 4.53). In der Liste sollte als erster Eintrag das Umbenennen des Seitentitels stehen. Einen Hinweis auf den durchgeführten Arbeitsschritt gibt die Spalte Unterschiede. Dort erscheint der ursprüngliche Seitentitel (siehe Abbildung 4.49). Abbildung 4.53 Einzelnen Arbeitsschritt rückgängig machen Abbildung 4.49 Letzte Änderung der»hauptseite test«widerrufen eines Arbeitsschritts im Erstellungsverlauf Um einen Arbeitsschritt rückgängig zu machen, klicken Sie auf das Pfeil-Icon links neben dem Eintrag (siehe Abbildung 4.50). Der unauffällige Klick-Button unterhalb der Tabelle dient im Bedarfsfall dazu, zur vorher gezeigten Gesamttabelle zurückzukehren, falls Sie mit der getroffenen Auswahl nicht einverstanden sein sollten (siehe Abbildung 4.54). Abbildung 4.50 Das Icon»Rückgängig machen (Vorschau)«Abbildung 4.54 Das Icon»Zurück zur Gesamtansicht«

38 4 Seiten anlegen 4.4 Manipulation des Seitenbaums In diesem Fall erfolgt keine Rücknahme des Arbeitsschritts. Entscheiden Sie sich jedoch für eine Rücknahme, wird dies als neuer Arbeitsschritt gewertet, und dieser wird daraufhin der Liste hinzugefügt (siehe Abbildung 4.55). Rekursives Löschen in den Benutzereinstellungen erlauben Um die gewünschte Aktion zu ermöglichen, müssen Sie zunächst eine Änderung in den Benutzereinstellungen vornehmen. Wechseln Sie hierfür nach Benutzerwerkzeuge Einstellungen (siehe Abbildung 4.56, Schritt 1). Indem Sie einen Haken in die Checkbox Rekursives Löschen (wie der Löschvorgang für komplette Zweige bezeichnet wird) im Bereich Bearbeiten und erweiterte Funktionen setzen (Schritt 2), gestatten Sie die entsprechende Option. Abschließend klicken Sie auf Dokument speichern (Schritt 3). Abbildung 4.55 Ein rückgängig gemachter Arbeitsschritt in der Übersicht Die vorhin umbenannte Seite heißt nun im Seitenbaum wieder»hauptseite 2«; die Rücknahme steht als Arbeitsschritt Seitentitel: Hauptseite test am Anfang der Verlaufstabelle. Ein Arbeitsschritt wird also nicht gelöscht, sondern mit umgekehrtem Vorzeichen wiederholt was den Vorteil hat, auch die Rücknahme gegebenenfalls widerrufen zu können Rekursives Löschen und Kopieren Nun könnte auch der Wunsch entstehen, eine Seite zu löschen, die selbst Unterseiten besitzt. Wie eben gezeigt, akzeptiert TYPO3 die Löschung einer Seite ohne untergeordnete Seiten widerspruchslos. Dies ist jedoch nicht der Fall, wenn Sie beispielsweise»hauptseite 2«per Kontextmenü zu löschen versuchen, da diese Seite mehrere Unterseiten besitzt: Ein entsprechender Befehl ist in ihrem Kontextmenü schlicht nicht enthalten. Auch das Löschen per Drag & Drop scheitert, da kein Target-Bereich für den Löschvorgang erscheint. Dennoch mag es wünschenswert sein, auch Seiten mitsamt ihren Unterseiten löschen zu können. (Wir weisen an dieser Stelle darauf hin, dass dies ein Risiko darstellt und bei der Wiederherstellung zu unübersichtlichen Verhältnissen führen kann. Gehen Sie mit dieser Option nicht leichtfertig um!) Abbildung 4.56 So erlauben Sie rekursive Operationen auf Benutzerebene. Rekursives Kopieren in den Benutzereinstellungen erlauben Rekursives Kopieren also das Mitkopieren der Unterseiten einer kopierten Seite erlauben Sie, indem Sie im Texteingabefeld Rekursives Kopieren die Anzahl der mitzukopierenden Hierarchiestufen angeben. Wollen Sie also nur die erste Ebene der Unterseiten mitkopieren, geben Sie hier eine»1«ein. Wollen Sie tiefere Kopien, muss eine größere Zahl eingetragen werden. Platzhalter, im Sinne von»beliebig«, sind nicht möglich

39 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Anwendung des rekursiven Kopierens und Löschens Nachdem Sie die Optionen gesetzt haben in diesem Fall wurde rekursives Kopieren zweier Sublevel erlaubt (also der ersten beiden untergeordneten Hierarchie-Ebenen), können Sie»Hauptseite 1«mit ihren Unterseiten kopieren und sie als Folgeseite nach»hauptseite 2«einfügen (siehe Abbildung 4.57). Wie gehabt, ist die kopierte Seite selbst ausgeblendet, ihre mitkopierten Unterseiten sind es jedoch nicht. Abbildung 4.58 Rekursives Löschen inklusive aller Unterebenen Gehen Sie behutsam beim Erlauben rekursiver Operationen vor! Abbildung 4.57 Rekursives Kopieren mit einer Unterebene Dass nun auch rekursives Löschen gestattet ist, haben Sie daran bemerken können, dass während des Kopierens von»hauptseite 1«im Kontextmenü auch die Option Löschen sichtbar war (siehe Abbildung 4.57, links). Folglich lässt sich auch der gerade kopierte Zweig ebenso leicht wieder löschen. Vorsicht: Den Einträgen Kopieren, Einfügen, Löschen im Kontextmenü sieht man nicht an, dass sie nun über rekursive Operationen auch Unterseiten mit einbeziehen. Klicken Sie auf die eben kopierte»hauptseite 1 (Kopie 1)«, um sie zu löschen. Es erfolgt beim Löschen keine Meldung, dass nun eine rekursive Aktion stattfindet. Das bedeutet, der unveränderte Warndialog bietet keinen Hinweis darauf, dass hier ebenfalls vorhandene Unterseiten entfernt werden (siehe Abbildung 4.58, Mitte). Auch eine rekursive Aktion lässt sich mittels des Bearbeitungsverlaufs rückgängig machen. Dies erfordert jedoch mehrere Schritte. Wollen Sie beispielsweise den soeben erfolgten Löschvorgang zurücknehmen, müssen Sie zunächst die Hauptseite mithilfe des Bearbeitungsverlaufs der Site-Root rekonstruieren und anschließend über den Bearbeitungsverlauf der wiederhergestellten Hauptseite deren Unterseite. Beachten Sie, dass rekursive Operationen eine heikle Angelegenheit sind. Obwohl sie praktisch sind, können sie auch eine Menge Verdruss verursachen. Überlegen Sie daher, welchem Benutzer Sie die entsprechenden Einstellungsmöglichkeiten zugestehen wollen Kontextmenüs vs. Shortcut-Buttons Was TYPO3-Einsteiger anfänglich irritiert, ist eine gewisse Redundanz in der Systemoberfläche durch mehrfach auftauchende Icons. Verglichen mit vorhergehenden Versionen, ist TYPO3 CMS 6.2 in dieser Beziehung sehr zurückhaltend gestaltet. Inzwischen sind auch einige Symbole verschwunden, die wohl eher für Verwirrung gesorgt haben. Es ist jedoch nach wie vor ein Grundmerkmal von TYPO3, oft verschiedene Alternativen zum Aufruf einer gewünschten Funktionalität zu bieten, um jedem Benutzer die bevorzugte Arbeitsmethode zu ermöglichen. Sicher ist Ihnen bereits die graue Leiste am oberen Rand des Arbeitsbereichs aufgefallen, auf der sobald Sie sich im Seitenmodul auf einer Seite befinden zwei Gruppen von Shortcut-Buttons zu sehen sind (siehe Abbildung 4.59)

40 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Abbildung 4.61 Der»Seiteninhalt erstellen«-button Der Betrachten-Button Er öffnet eine Browsersicht der aktuellen Seite in einem neuen Fenster. Der Button entspricht dem Befehl Ansehen im Kontextmenü. Abbildung 4.62 Der Betrachten-Button Abbildung 4.59 Shortcut-Buttons im»seiten-modul«die linken drei Icon-Gruppen dienen dem Direktzugriff auf Befehle, von denen alle bis auf einen analog über das Kontextmenü des Seitenbaums oder durch Drag & Drop-Aktionen erreichbar sind. Die Icons der rechten Gruppe sind hingegen mit Zusatzfunktionen belegt. Für sie findet sich im Kontextmenü kein Pendant, da sie entweder nicht streng einem Seitenobjekt zuzuordnen sind oder Funktionalität außerhalb des Seitenbaums bieten. All diese Icons werden wir Ihnen im Folgenden kurz vorstellen. Der Seiteneigenschaften bearbeiten-button Dieser Button öffnet den Dialog zur Bearbeitung der Seiteneigenschaften. Er entspricht dem Befehl Bearbeiten des Kontextmenüs. Die Funktion kann alternativ per Klick auf den Seitentitel im Seitenbaum und durch anschließendes Anwählen des Buttons Seiteneigenschaften bearbeiten im Arbeitsbereich aufgerufen werden. Die linken drei Gruppen der Shortcut-Buttons In den meisten Fällen kann man bei TYPO3 davon ausgehen, dass mit gleichen Icons jeweils die gleiche Funktion illustriert und gesteuert wird. Dies gilt ebenso für die Shortcut-Buttons und die gleichwertigen Befehle des Kontextmenüs. Der Seitenerstellungs-Button Er ermöglicht die Erstellung neuer Seiten per Drag & Drop und gleicht in der Wirkung dem Befehl Neu des Bereichs Seitenaktionen des Kontextmenüs. Diesen Button haben Sie schon kennengelernt. Abbildung 4.60 Der Seitenerstellungs-Button Abbildung 4.63 Der»Seiteneigenschaften bearbeiten«-button Die rechte Gruppe der Shortcut-Buttons Etwas abgesetzt am rechten Rand der oberen Button-Leiste befinden sich zwei weitere Buttons. Sie dienen nicht unmittelbar zum Bearbeiten des aktuellen Datensatzes, sondern bieten andere in seinem Kontext benötigte Funktionen an bzw. schalten die Arbeitsansicht um. Der Cache-Button Er löscht den Datenbank-Cache der aktuellen Seite. Dies kann erforderlich sein, falls sich erfolgte Änderungen nicht unmittelbar im Frontend zeigen. Ein ähnliches Icon in Gestalt eines Blitzes finden Sie am oberen Rand des Arbeitsfensters dessen Befehle wirken jedoch global auf das gesamte System. Der Seiteninhalt erstellen-button Er öffnet einen Dialog zum Erstellen von Inhaltselementen (also Seiteninhalten, wie Textblöcke etc.), die dann der aktuellen Seite zugeordnet werden. Dieses Icon hat keine Entsprechung im Kontextmenü. Abbildung 4.64 Der Cache-Button

41 4 Seiten anlegen 4.4 Manipulation des Seitenbaums Der Lesezeichen-Button Dieses Icon erstellt ein sogenanntes Lesezeichen in der Lesezeichenliste des aktuellen Benutzers. Dies dient dazu, eine Sprungmarke zur aktuellen Arbeitsansicht zu speichern, wobei sowohl der aktuell bearbeitete Datensatz als auch das Modul und dessen Ansicht gespeichert werden, mit dem die Bearbeitung erfolgt. Hierzu ist ein kurzer Exkurs zum Thema Lesezeichen angebracht. Um dies zu demonstrieren, sollen ein paar Lesezeichen erstellt werden. Navigieren Sie zunächst in das Modul Benutzerwerkzeuge Einstellungen. Hier haben wir schon öfter Änderungen am Benutzerkonto vorgenommen. Sie finden hier ebenfalls ein Icon zum Erstellen eines Lesezeichens. Wenn Sie darauf klicken, erhalten Sie einen Zwischendialog, in dem Sie gefragt werden, ob ein»shortcut«erzeugt werden soll. Bestätigen Sie dies. Abbildung 4.65 Der Lesezeichen-Button Abbildung 4.68 Ein neues Lesezeichen im Lesezeichenmenü Lesezeichen Die Navigation innerhalb von TYPO3 ist gelegentlich ein wenig umständlich und verlangt erstens die Auswahl eines Moduls in der Modulleiste, zweitens möglicherweise die Auswahl eines Arbeitsmodus dieses Moduls, und drittens muss der zu bearbeitende Datensatz festgelegt werden. Dies kann ein Objekt im Seitenbaum sein, aber auch ein Benutzerdatensatz oder ein beliebiges anderes Objekt. Ein Lesezeichen hilft dabei, direkt in eine bestimmte Arbeitsansicht des Backends zu springen, und erspart Ihnen somit mühsames Suchen in den Menüs. Über den eben vorgestellten Button ist ein Lesezeichen einfach zu erstellen (siehe Abbildung 4.66) es gilt dann für die aktuelle Ansicht des Arbeitsplatzes in Verbindung mit dem bearbeiteten Datensatz. Das Lesezeichenmenü enthältt nun einen Eintrag, der zwar das Icon des Moduls Einstellungen zeigt, aber den wenig erklärenden Namen»Shortcut«hat. Dies lässt sich leicht ändern klicken Sie hierfür auf den Lesezeichen bearbeiten-stift, der bei einem Mouseover im Lesezeichen erscheint (siehe Abbildung 4.68). Abbildung 4.69 Das Lesezeichen wird bearbeitet. Geben Sie in das obere Textfeld einen neuen Namen für das Lesezeichen ein, beispielsweise»einstellungen Admin«, und bestätigen Sie dies mit ok (siehe Abbildung 4.69). Das Lesezeichen wird daraufhin umbenannt. Abbildung 4.66 Ein Lesezeichen erstellen Ebenso einfach ist die Verwendung der Lesezeichen. Rechts vom Logout-Button finden Sie, als Icon in Form eines gelben Sterns, das Lesezeichenmenü (siehe Abbildung 4.67). Es enthält sämtliche Einträge, die über das Icon Lesezeichen hinzufügen erstellt wurden. Abbildung 4.67 Das Lesezeichenmenü Erstellen Sie nun noch ein Lesezeichen für die Übersetzungsansicht des Erweiterungsmanagers, und nennen Sie den Shortcut»Übersetzungen«. Wechseln Sie in das Modul Web Seite, und erstellen Sie zwei weitere Shortcuts auf beliebige Seiten. In diesem Fall brauchen Sie das Lesezeichen nicht benennen; es wird automatisch der Seitentitel eingesetzt. Die beiden letzten Lesezeichen sollen nun einer Gruppe zugeordnet werden. Öffnen Sie sie hierfür nacheinander zur Bearbeitung, und wählen Sie im Pulldown-Menü jeweils den Eintrag»Seiten«als Gruppe (siehe Abbildung 4.70). Auf diese Weise lassen sich die Lesezeichen übersichtlich gruppieren. Sie sehen, dass hier fünf Gruppen existieren (Seiten, Datensätze, Dateien, Werkzeuge und Verschiedenes). Jede dieser Gruppen ist ein weiteres Mal mit dem Präfix Global: vorhanden

42 4 Seiten anlegen 4.5 Filtern der Seitenbaumansicht Abbildung 4.72 Pfade zu»hauptseite 1«und»Unterseite 1«4.5 Filtern der Seitenbaumansicht Abbildung 4.70 Das Lesezeichen wird einer Gruppe zugeordnet. Dies hat folgenden Hintergrund: Zwar sind Lesezeichen prinzipiell an den jeweiligen Benutzer gebunden, stehen also auch nur ihm persönlich zur Verfügung. Allerdings können Administratoren (und wir sind derzeit als Administrator eingeloggt) Teile ihrer Lesezeichen auch anderen Nutzern zur Verfügung stellen, indem sie diese einer der globalen Gruppen zuordnen. Mehr darüber erfahren Sie in Kapitel 13,»Rechtevergabe im Backend«. Inzwischen befinden sich ausreichend Seiten im Seitenbaum, um einen zweiten Blick auf die Filterfunktion der Seitenbaumansicht zu werfen. Klappen Sie dazu das Eingabefeld auf, und geben Sie einen Filterbegriff in das Feld ein. Alle Seiten, in deren Titel die eingegebene Zeichenkette nicht enthalten ist, werden in der Baumansicht ausgeblendet. Die Filterung erfolgt ab dem ersten eingegebenen Zeichen, wobei Groß- oder Kleinschreibung keine Rolle spielt. Sobald ein Filterbegriff eingegeben wurde, erscheint rechts im Feld der Lösch-Button, mit dem die Filterung wieder aufgehoben werden kann. Abbildung 4.71 Lesezeichenmenü mit gruppierten Lesezeichen Dieser kurze Einblick in die Lesezeichen soll hier fürs Erste genügen. Nehmen Sie von diesem Exkurs bitte mit, dass Lesezeichen schnell erstellt sind und sich als extrem nützlich erweisen, wenn Sie einen entlegenen Winkel des TYPO3-Systems wiederholt aufsuchen müssen. (Die übungshalber erstellten Lesezeichen können Sie nun wieder löschen.) Pfadangabe zum bearbeiteten Objekt Ein weiteres Feature des Arbeitsbereichs, auf das hingewiesen werden muss, besteht in der Pfadangabe, die Sie am rechten Rand unter der Button-Leiste sehen. Die Pfadangabe informiert Sie über Name und Position der augenblicklich bearbeiteten Seite (die ID steht in eckigen Klammern am Ende des Pfades). Dies ist praktisch, weil aus der Ansicht des Seitenbaums allein nicht immer ersichtlich ist, welcher Datensatz gerade aktuell bearbeitet wird. Abbildung 4.73 Aktivieren der Filterfunktion, Filtern der Seitenbaumansicht, Aufheben der Filterung Die eingegebene Zeichenfolge»Hau«reduziert dementsprechend den Seitenbaum auf»hauptseite 1«und»Hauptseite 2«(siehe Abbildung 4.73, Mitte). Analog zeigt die Eingabe von»unt«alle sechs Unterseiten. Geben Sie die Ziffer»2«in das Feld ein, erscheinen»hauptseite 2«und die beiden Seiten namens»unterseite 2«. Es spielt für die Filterfunktion keine Rolle, ob in der zugrunde liegenden Baumansicht einzelne Zweige eingeklappt, potenzielle Fundstellen also nicht von vornherein sichtbar sind. Durch einen Klick auf das Kreuz im blauen Feld oberhalb des gefilterten Seitenbaums lässt sich die Filterung aufheben (siehe Abbildung 4.73, rechts)

43 4 Seiten anlegen 4.7 Zusammenfassung 4.6 Eine Seite anzeigen Um eine in TYPO3 angelegte Seite zu betrachten, gibt es mehrere Wege (siehe Abbildung 4.74). Der erste führt aus dem Bearbeitungsmodus Web Seite heraus über das Augensymbol 2 am oberen Seitenrand des Arbeitsbereichs oder über das Kontextmenü des Elements (Befehl Ansehen) im Seitenbaum. In beiden Fällen wird die aktuell bearbeitete Seite in einem neuen Browserfenster geöffnet. Der zweite Weg besteht in der Wahl des Betrachtungsmodus hierfür wählen Sie das Modul Web Anzeigen. Im Unterschied zur vorigen Methode wird die Seitenansicht jedoch nicht in einem neuen Fenster, sondern im Arbeitsbereich rechts neben dem Seitenbaum geöffnet. 4.7 Zusammenfassung Sie haben nun gelernt, wie Sie eine Seite im Seitenbaumbereich des Backends anlegen, kopieren, verschieben oder löschen und wie Sie ihre Eigenschaften bearbeiten können. Wenn Sie jedoch zu diesem Zeitpunkt eine Seite zum Betrachten auswählen, erhalten Sie eine Fehlermeldung, die darauf zurückzuführen ist, dass der Seite zunächst noch ein sogenanntes Template zugeordnet werden muss. Wie dies geschieht und was TYPO3 überhaupt unter einem Template versteht, ist Thema des nun folgenden Kapitel 5,»Einstieg in TypoScript«. Abbildung 4.74 Anzeigemodus per Menü, per Kontext oder per Augensymbol Wählen Sie die Anzeige per Augensymbol oder Kontextmenü, wenn Sie die Seite in einem neuen Fenster öffnen wollen. Sie halten den Bearbeiten-Dialog geöffnet und können die Seite gleichzeitig im Backend weiterbearbeiten. Wählen Sie die Option Web Anzeigen, wenn Sie die Ansicht zwischen verschiedenen Seiten schnell per Seitenbaum wechseln wollen. Achtung Beachten Sie, dass sich die Anzeige im Arbeitsbereich wegen des geringeren verfügbaren Platzes auf die Darstellung des Layouts auswirken kann. 2 Das Augensymbol dient allgemein zum Wechsel in den Ansichtsmodus. Es wird Ihnen im Backend von TYPO3 noch an weiteren Stellen begegnen

44 Kapitel 5 Einstieg in TypoScript Dieses Kapitel erläutert das Anlegen eines TypoScript-Root-Templates und vermittelt erste Einblicke in die Syntax und Grundelemente der darunterliegenden Konfigurationssprache namens TypoScript. Im vorigen Kapitel wurden sowohl das Anlegen von Seitenobjekten als auch Grundfertigkeiten wie das Kopieren, Verschieben und Löschen von Seiten im Seitenbaum beschrieben. Das Betrachten einer TYPO3-Seite im Browser sei es in einem eigenen Browserfenster oder im internen Vorschaumodus des Arbeitsbereichs scheiterte jedoch zu diesem Zeitpunkt (siehe Abbildung 5.1) mit der Fehlermeldung No Typo- Script template found! Abbildung 5.1 TYPO3 meldet, dass kein Template gefunden wurde. Dies ist unabhängig davon, ob Sie den Seiten bereits Text- oder sonstige Inhalte zugewiesen oder sie (wie beabsichtigt) zunächst»leer«gelassen haben. In diesem Kapitel werden wir uns mit dem offensichtlich fehlenden Baustein beschäftigen, den TYPO3 hier moniert dem Template. Was also versteht TYPO3 unter einem Template? Und wie erstellt man eines? 133

45 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates 5.1 Das Konzept des TYPO3-Templates Das befremdende Verhalten von TYPO3 liegt darin begründet, dass wir es hier nicht mit»realen«html-seiten zu tun haben, die in einem Verzeichnis und einer hierarchischen Struktur abgelegt sind auch wenn die Seitenbaummetapher zu dieser Annahme verleitet. Eine TYPO3-»Seite«ist zunächst nicht mehr als ein Datensatz, der in einer Tabelle der Datenbank liegt. Es müssen daher Vereinbarungen getroffen werden, auf welche Weise und mit welchen Inhalten an welcher Stelle dieser Datensatz im Browser darzustellen ist Ein Template ist eine Darstellungsvereinbarung Die Umsetzung dieser Vereinbarungen geschieht durch das CMS. Die Vereinbarungen werden in ihrer Summe als Template bezeichnet. Die gerade zitierte Fehlermeldung ist also lediglich ein Hinweis darauf, dass für die auszugebende Seite keinerlei Darstellungsvereinbarungen getroffen wurden. Die Vereinbarung einer Darstellung ist ein Schritt, der explizit erforderlich ist: Es gibt nicht so etwas wie eine»defaultdarstellung«einer TYPO3-Seite. Das ist Absicht, weil das System dadurch flexibler wird. (Sie werden in den folgenden Kapiteln sehen, dass TYPO3 eine Reihe alternativer Möglichkeiten zum Umgang mit Templates bietet.) Eine TYPO3-Seite kann erst dann angezeigt werden, wenn sie mit einem Template- Datensatz verknüpft worden ist. Dieser Datensatz kann sehr simpel sein, aber auch ausgesprochen komplex werden. Tasten wir uns langsam heran, und erstellen wir einfach einen solchen Template-Datensatz. 5.2 Anlegen und Verwalten von Templates Sie haben im letzten Kapitel gelernt, wie Sie TYPO3-Seiten anlegen, und haben den Seitenbaum als hierarchisches Gerüst kennengelernt. In dieses Gerüst sollen nun Templates eingehängt werden. Dies geht, indem ein Template einer TYPO3-Seite im Seitenbaum»zugeordnet«wird und dann deren Darstellung steuert. Wählen Sie nun eine Seite im Seitenbaum durch Klick an. Um Templates anlegen und verwalten zu können, existiert in TYPO3 das Modul Template im Bereich Web der Menüleiste (siehe Abbildung 5.2). Ein Klick auf diesen Menüpunkt öffnet eine Bildschirmmaske zum Anlegen eines Templates. Das neu zu erstellende Template bezieht sich auf die aktuell im Seitenbaum angewählte Seite. Die Zielseite kann aber jederzeit (bevor die eigentliche Template-Erstellung eingeleitet wurde) durch Neuwahl im Seitenbaum gewechselt werden. Templates und»typo3-templates«der Begriff»Template«ist im Umfeld von TYPO3 abstrakter besetzt als in vielen anderen CMS: In den meisten anderen Fällen (auch in einigen HTML-Editoren), wird unter einem Template lediglich eine HTML-Datei mit zusätzlichen Steuerungsinformationen verstanden. TYPO3-Templates werden in einer eigenen Syntax geschrieben, die als TypoScript bezeichnet wird. Obwohl der Name»TypoScript«an die Benennung einer Programmiersprache erinnert, handelt es sich bei TypoScript eher um eine Konfigurationssprache, also um eine Sammlung von Darstellungsanweisungen. Bei einem in TypoScript erstellten Template handelt es sich daher nicht um ein»programm«im eigentlichen Sinne des Wortes Ein Template ist TypoScript Ein Template ist in TYPO3 eine Abfolge von TypoScript-Anweisungen. Diese legen fest, wie die Seiten formatiert werden, wo Inhalte ausgegeben werden, wie Menüs aufgebaut sind und vieles mehr. Die Anweisungen sind, ebenso wie die Seitenelemente, lediglich Datensätze in der TYPO3 zugrunde liegenden MySQL-Datenbank. Abbildung 5.2 Anwahl des Template-Werkzeugs für»hauptseite 1«Im Arbeitsbereich öffnet sich die Dialogseite zur Erstellung des Templates (siehe Abbildung 5.3). Für die aktuelle Seite existiert noch kein Template worauf die blau hinterlegte Infomeldung Kein Template hinweist. Zum Anlegen des Templates dient die Schaltfläche Template für neue Website erstellen

46 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates Abbildung 5.4 Ein neues Template begrüßt Sie mit»hello WORLD!«. Abbildung 5.3 Dialogseite zur Template-Erstellung Klicken Sie auf den Button, um ein Template zu erstellen: TYPO3 legt jetzt für Sie einen Template-Datensatz mit dem Namen»Neue Website«an. Dieser Template- Name wird automatisch vergeben, kann aber später wieder geändert werden, wenn dies gewünscht wird. Da nun ein Template vorhanden ist, kann die Seite angezeigt werden. Das neue Template ein Root- oder Wurzel-Template Das von Ihnen erstellte Template bezeichnet TYPO3 als Root-Template oder Wurzel- Template. In jeder Website muss ein Template dieser Art vorhanden sein, das der Wurzelseite der Site zugeordnet wird. (Sie werden später noch sehen, dass TYPO3 auch andere Arten von Template-Datensätzen kennt.) Hallo Welt! Sie können die Seite nun im Browser öffnen. Klicken Sie hierfür auf das Seitensymbol mit dem Auge am oberen Rand des Arbeitsfensters, oder wählen Sie Web Anzeigen. Im Browserfenster sehen Sie ein HTML-Dokument mit dem Begrüßungstext Hello World! Die Begrüßung erscheint nicht etwa, weil das für das Erlernen einer neuen Programmiersprache übliche Beispiel für dieses Buch vorbereitet wurde. Vielmehr ist jedes von TYPO3 neu erzeugte Template automatisch so vorbelegt, dass es den Text»HELLO WORLD!«ausgibt. Aber wo genau und auf welche Weise wird dies festgelegt? Um dies herauszufinden, müssen wir ein wenig mehr in die Tiefe gehen Aufbau des Template-Datensatzes Gehen Sie zurück in die Arbeitsansicht Template-Werkzeuge. Das obere Dropdown-Menü muss den Menüpunkt Info/Bearbeiten zeigen. In der Dialogseite sind in tabellarischer Form (siehe Abbildung 5.5) folgende Angaben 1 zusammengefasst: Title (Titel des Templates) Titel des Template-Datensatzes; beliebig wählbar Sitetitle (Titel der Website) Titel der Website; anfangs leer (für HTML-<title>-Element) 1 Für die hier beschriebene Bildschirmmaske (und weitere) liegt noch keine vollständige Übersetzung der Oberfläche vor. Das kann und wird sich ändern. Lassen Sie sich nicht irritieren, falls in Ihrem System mehr Elemente auf Deutsch erscheinen. Wo es erforderlich schien, haben wir mögliche Übersetzungen in Klammern hinzugefügt

47 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates Description (Beschreibung) Beschreibung des Templates Constants (Konstanten) Textfeld zur Vereinbarung von Konstanten Setup Textfeld zur Eingabe des TypoScript-Setups Eingabe eines Titels für die Website Klicken Sie auf das Stiftsymbol für das Feld Title, und geben Sie als Titel»TYPO3einsteiger«in das Textfeld über der Tabelle ein. Beachten Sie, dass oberhalb des Dialogs nun die bekannten Icons zum Speichern bzw. zum Abbrechen erscheinen. Speichern Sie Ihre Eingabe. Wenden wir uns daraufhin dem Feld Setup zu. Abbildung 5.5 Die Template-Informationen im Modus»Info/Bearbeiten«Die für uns wichtigsten Felder sind die für Constants und Setup: In Constants werden in TypoScript-Code öfter auftauchende Konstanten festgelegt. Das Feld Setup enthält den eigentlichen TypoScript-Code, den Sie hier ebenfalls betrachten oder auch ändern können. Beachten Sie die Bleistiftsymbole am Anfang jeder Zeile: Sie können in den noch leeren Feldern Einträge vornehmen bzw. vorhandene Einträge ändern. Zur entsprechenden Eingabemaske gelangen Sie durch einen Klick entweder auf den Bleistift selbst oder auf den Titel, der ebenfalls als Link dient. Unterhalb der Tabelle sehen Sie den Eintrag Edit the whole template record (»vollständigen Template-Datensatz bearbeiten«), ebenfalls mit vorangestelltem Stiftsymbol. Dieser Befehl wird später noch wichtig werden. Alle für uns derzeit relevanten Aktionen können wir mithilfe der restlichen Felder direkt vornehmen. Zunächst soll die Website (nicht das Template selbst) einen neuen Titel erhalten. Abbildung 5.6 Eingabe des Sitetitles Und nochmals Speichern nicht vergessen! Hier gilt wieder, wie auch an anderen Stellen im Backend, dass vorgenommene Eingaben verloren gehen, wenn Sie den Dialog verlassen, ohne zu speichern. Da es keine Fehlermeldung oder Nachfragen gibt, kann dies schnell geschehen Template-Setup mit dem Konfigurationsfeld Wenn Sie, wie eben beschrieben, das Feld Setup öffnen, sehen Sie, dass es bereits einen von TYPO3 eingetragenen Inhalt besitzt. Bei den Zeilen, die im Formularfeld stehen, handelt es sich um TypoScript-Anweisungen: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD!

48 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates Diese TypoScript-Anweisungen sind für die Ausgabe»HELLO WORLD!«verantwortlich. Die einzelnen Zeilen haben dabei folgende Bedeutung: # Default PAGE object: Die Zeile mit dem vorangestellten #-Zeichen ist eine Kommentarzeile. Sie hat nur erklärende Bedeutung und wird nicht ausgewertet. Hier wird erläutert, dass anschließend die»deklaration des Default-Seitenobjekts«erfolgt. Tipp: Fügen Sie Ihren Skripten Kommentare hinzu, um sie (auch für andere) verständlich zu machen. Wie funktioniert ein Kommentar in TYPO3? TYPO3 kennt verschiedene Arten, eine TypoScript-Zeile als Kommentar, also als»nicht auszuführen«, zu markieren. Eine solche Markierung besteht z. B. in der Raute # am Zeilenanfang. Wichtig ist, dass ein Kommentar in einer Zeile stets nur allein stehen darf und nicht nach einer auszuführenden Anweisung. page = PAGE Im ersten Schritt wird eine Variable page eingeführt und mit dem TypoScript- Objekttyp PAGE belegt, um ein Seitenobjekt zu erzeugen. Bezifferung der Positionen in Zehnerschritten (10, 20, 30 etc.), die es ermöglicht, nachträglich weitere Positionsobjekte einzuschieben, falls dies nötig wird. page.10.value = HELLO WORLD! Um Text im Browser anzeigen zu können, muss das Textobjekt in page.10 nun noch mit einem Wert belegt werden. Dies geschieht in seiner Eigenschaft value. Beachten Sie, dass die übergebene Zeichenkette HELLO WORLD! nicht in Anführungszeichen gesetzt ist. Das Setzen von Stringbegrenzern ist in TypoScript nicht erforderlich. TypoScript verwendet Objektpfade mit Punktnotation Sie erkennen in TypoScript eine Ähnlichkeit mit der Ihnen vielleicht geläufigen Objektschreibweise, bei der ein Objekt und sein zugehöriges Property (eine Eigenschaft) durch einen Punkt verbunden werden. Eine solche Verkettung aus Objekten und ihren Eigenschaften wird als Objektpfad bezeichnet. Am Ende des Objektpfads befindet sich stets das Objekt bzw. die Eigenschaft, der ein Wert zugewiesen oder entnommen wird. Hier ist es die Eigenschaft value, die einen Textinhalt erhält. Was ist ein TypoScript-Objekt? Unter einem Objekt versteht TypoScript eine Datenstruktur, die bestimmte, zum Teil vordefinierte Eigenschaften besitzt. Für die verschiedenen Aufgaben existieren dementsprechend unterschiedliche Objekttypen. Der Objekttyp PAGE, das»seitenobjekt«, gehört zu den grundlegenden Typen. Sie erzeugen hier eine Instanz dieses Objekttyps, die Sie in der Variablen namens page speichern. Sie können die Variable beliebig benennen (man sieht auch z. B. seite), doch hat sich die Bezeichnung page als Standard etabliert. page.10 = TEXT page.10 bezeichnet als Positionsobjekt die Speicherposition 10 des Objekts page (was man sich wie ein Array-Fach vorstellen kann). Dieser Position wird ein TEXT- Objekt zugewiesen (»hineingespeichert«), das wir uns als Behälter für Text vorstellen können. Man kann sagen: page.10 ist jetzt ein TEXT-Objekt. Was ist ein Positionsobjekt? TYPO3 bezeichnet eine Sammlung solcher Positionsobjekte als CARRAY (Content Array). Stellen Sie sich dies wie ein numerisch organisiertes Array vor. Eine Speicherposition wird durch ihre Einführung deklariert. Es können beliebig viele solcher Slots erstellt und frei benannt werden, z. B. page.1, page.2 page.253. Übliche Praxis ist jedoch die Ein wichtiger Faktor ist, dass TypoScript zwischen Groß- und Kleinbuchstaben unterscheidet, also case-sensitive ist. Häufig sind Fehler auf Verstöße gegen die Schreibregeln von TYPO3 zurückzuführen. Hier müssen Sie unbedingt Sorgfalt walten lassen. Ein falsch geschriebener Bezeichner (z. B. Page statt PAGE) hat zwar keine Fehlermeldung zur Folge, aber Ihr Skript wird nicht funktionieren Erste Gehversuche in TypoScript Um die Funktionsweise von TypoScript kennenzulernen, wollen wir im Feld Setup sukzessive einige Änderungen vornehmen und deren Auswirkungen im Browserfenster betrachten. Öffnen Sie also über das Augensymbol eine Ansicht auf die Seite in einem neuen Browserfenster, sodass das Setup-Feld weiterhin zur Eingabe zur Verfügung bleibt. TypoScript-Editor mit Codecompletion Der TypoScript-Editor T3Editor verfügt neben Zeilenzähler und Syntax-Highlighting auch über Codecompletion. Der Editor steht im Info/Bearbeiten-Modus für Setup und Constants zur Verfügung (nicht aber im Complete-Template-Modus). Wenn Sie TypoScript-Code eingeben, so schlägt der Editor mögliche Objekteigenschaften vor, die Sie durch Klick übernehmen können. Sie können den Editor per Klick auf die Checkbox T3Editor deaktivieren unterhalb des Eingabefelds auf Wunsch auch abschalten

49 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates Erweitern Sie die Angaben im Editor, wie im Folgenden erläutert. Es werden TEXT- Objekte an zwei neuen Positionsziffern, page.20 und page.5, eingeführt (die»falsche«reihenfolge ist Absicht!) und ihnen Werte zugewiesen: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! page.20 = TEXT page.20.value = Das ist TypoScript! page.5 =TEXT page.5.value = Ein Beispiel: TYPO3 sortiert die Positionsobjekte in numerischer Reihenfolge Der absolute Wert der verwendeten Positionsziffern eines CARRAY ist nicht wichtig, nur ihre relative Reihenfolge: Wählt man (beliebig) Position 10 und 20 für zwei Textobjekte, werden diese nacheinander ausgegeben. Die Reihenfolge der Deklarationen im Template spielt hingegen keine Rolle (z. B. wie hier Position 5 nach Position 20), weil TYPO3 die Objekte intern numerisch sortiert. Folgerichtig wird Position 5 zuerst ausgegeben. Wir werden nun mit den Setup-Erweiterungen und einigen Erläuterungen zum TEXT- Objekt fortfahren Das Wrap-Prinzip anhand des TEXT-Objekts Ein Objekt einer Programmiersprache besitzt stets eine Reihe von vordefinierten Eigenschaften. TypoScript bildet hier keine Ausnahme so hat beispielsweise ein Objekt vom Typ PAGE (neben anderem, wie Sie soeben gesehen haben) die Eigenschaft, Unterobjekte, sogenannte Content-Objekte, in einem CARRAY enthalten zu dürfen. Diese Content-Objekte (auch als cobjects bezeichnet), können verschiedenen Typs sein, wobei der Typ jeweils durch Zuweisung bestimmt wird. So bedeutet page.10 = TEXT die Zuweisung eines Objekts vom Typ TEXT an die CARRAY-Position 10 des PAGE-Objekts namens page. Ein TEXT-Objekt besitzt eine Eigenschaft value, der ein Wert zugewiesen werden kann. Die Eigenschaft musste nicht eigens deklariert werden, denn sie ist ja in den Objekttyp»eingebaut«, wie Sie gesehen haben. Wir machen uns nun eine zweite Eigenschaft dieses Objekttyps zunutze, um das Textobjekt mit HTML-Tags zu umgeben das Property wrap. Dieses funktioniert nach folgendem Prinzip: Abbildung 5.7 Erweitern und Speichern des Template-Setups Klicken Sie nun zum Speichern auf das Diskettensymbol (siehe Abbildung 5.7), und aktualisieren Sie die Browseransicht der Seite. Alternativ können Sie (das gilt aber nur für den T3Editor!) auch mit dem gewohnten Tastaturkürzel (Strg) + (S) speichern. Im Browserfenster sehen Sie jetzt: Ein Beispiel:HELLO WORLD!Das ist TypoScript! Offensichtlich wird das Objekt page.5 also vor den Objekten page.10 und page.20 ausgegeben, obwohl wir es doch als Letztes definiert haben. mein_textobjekt.wrap = davor dahinter Anführungszeichen sind nicht erforderlich, führende und folgende Leerzeichen werden nicht beachtet. Das Pipe-Symbol steht dabei stellvertretend für den Inhalt des Textobjekts. Wollen Sie vor oder hinter dem Textobjekt keinen Wrap-Text haben, lassen Sie die entsprechende Seite einfach leer. Wenn wir beispielsweise mein_textobjekt.value = Beispiel mein_textobjekt.wrap = <h1> </h1> schreiben, erhalten wir in der Quelltextausgabe an den Browser:

50 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates <h1>beispiel</h1> In den Quelltext eingeschobene Leerzeilen haben genau wie per Tabulator oder mittels Leerzeichen erfolgende Einrückungen keinen Einfluss auf die Funktion des Skripts. So machen Sie es aber erheblich übersichtlicher. Erweitern Sie nun das TypoScript-Setup wie folgt: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! page.10.wrap = <p>t3-begrüßung: </p> page.20 = TEXT page.20.value = Das ist TypoScript! page.20.wrap = <h1> </h1> page.5 =TEXT page.5.value = Ein Beispiel: page.5.wrap = <p><b> </b></p> Sie erhalten in der Voransicht nun eine Ausgabe, die etwa so aussieht, wie in Abbildung 5.8 gezeigt, und die langsam beginnt, einer HTML-Seite zu ähneln. Beachten Sie, dass hier für page.10.wrap außer HTML-Tags zusätzlich auch normaler Text als Teil des Wraps verwendet wird. Das ist vollkommen legal. Da jedoch Leerzeichen in diesem Zusammenhang nicht beachtet werden, rückt der Text-Wrap (siehe Abbildung 5.8) notgedrungen nahtlos an den Objektinhalt heran. Sie können dem Text allerdings ein geschütztes Leerzeichen hinzufügen, um dieses Manko zu beheben: page.10.wrap = <p>t3-begrüßung: </p> Mehr Komplexität durch Content-Object-Arrays (COA) Eine einfache HTML-Seite, die nur aus einer Abfolge von Strukturcontainern (wie Überschriften, Absätzen etc.) besteht, ließe sich bereits auf diese Weise aufbauen. 2 Eine HTML-Tabelle hingegen (oder eine andere komplexe Struktur) ist auf dem bisher beschrittenen Weg nicht sauber zu erstellen. Hierfür ist es erforderlich, einem Content-Objekt gleichzeitig mehrere Unterobjekte zuzuordnen, um die Zellen- und Zeilenstruktur aufzubauen. Mit dem bislang verwendeten Objekt vom Typ TEXT ist dies nicht möglich. In TypoScript existiert passend ein Objekttyp, dem Unterobjekte in beliebiger Anzahl in Form weiterer Content-Objekte zuweisbar sind: das sogenannte Content-Object- Array (kurz COA). Nun soll als Vorübung eine HTML-Tabelle erstellt werden. Eine Tabelle kann aus einer beliebigen Anzahl von Zeilen bestehen, die wiederum aus einer beliebigen Anzahl von Zellen zusammengesetzt sein können. Die Zellen können Text enthalten. Wo in diesem Zusammenhang von einer»beliebigen Anzahl«von Unterobjekten die Rede ist, liegt es nahe, die entsprechenden übergeordneten Teile durch COAs aufzubauen. Dies gilt für die Tabelle selbst (die mehrere Zeilen enthält) und deren Zeilen (die aus mehreren Zellen bestehen). Die Tabellenzellen selbst können hingegen durch einfache Textobjekte realisiert werden (sofern sie keine komplexe Struktur enthalten sollen). Der erforderliche HTML- Code wird wieder durch einen Wrap um das jeweilige Objekt erzeugt. # Die Tabelle (mit Attributen): page.30 = COA page.30.wrap = <table border="1" width="150"> </table> #... und zwei Tabellenzeilen: page = COA Abbildung 5.8 Textobjekte mit HTML-Wrap in der Arbeitsvorschau 2 Merken wir kurz an, dass es bei Templates um Grundstrukturen geht, nicht um Inhalte. Betrachten Sie diese Einführung als»fingerübung«

51 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates page wrap = <tr> </tr> page = COA page wrap = <tr> </tr> Jeder Tabellenzeile sollen nun zwei Textobjekte an Position 10 und 20 hinzugefügt werden. Diese erhalten das <td>-tag als wrap und einen Inhalt als value. Sobald Sie dies für die erste Tabellenzeile niederschreiben, werden Sie bemerken, dass eine merkliche Redundanz im Skript auftritt, weil sich in jeder Zeile der Beginn des Objektpfads wiederholt. # Datenzellen für Zeile 1: page =TEXT page value = Eine page wrap = <td> </td> page =TEXT page value = Tabelle page wrap = <td> </td> # Datenzellen für Zeile 2: page { 10 = TEXT 10.value = mittels 10.wrap = <td> </td> 20 = TEXT 20.value = TypoScript 20.wrap = <td> </td> } Im Browserfenster sehen Sie nun eine Tabelle mit zwei Zeilen und jeweils zwei Zellen (siehe Abbildung 5.9). Sie sehen, dass jede Zeile mit page beginnt. Um Code einzusparen, ist es möglich, Teile des Objektpfads gewissermaßen»auszuklammern«. Hierfür wird zunächst der redundante Part notiert, gefolgt von einer öffnenden geschweiften Klammer. Anschließend listet man die von der so gebildeten temporären Pfadwurzel abstammenden Definitionen auf und schließt die Klammer wieder. Lassen Sie die Definition des COA-Objekts und seines Wraps (Zeile 1 und 2) so, wie sie ist, und ändern Sie die darauf folgenden Zeilen wie eben beschrieben. Das Ergebnis ist nun merklich übersichtlicher. Sie können den Text im Formularfenster zur besseren Übersichtlichkeit mittels Leerzeichen oder Tabulatoren einrücken. # Datenzellen für Zeile 1: page { 10 = TEXT 10.value = Eine 10.wrap = <td> </td> 20 = TEXT 20.value = Tabelle 20.wrap = <td> </td> } Beachten Sie, dass bei dieser Schreibweise der Punkt nach der vorangestellten Pfadwurzel entfällt für ihn steht die geschweifte Klammer. Sie schreiben also statt page { nur page {. Fügen Sie nun noch die Definition der zweiten Zeile hinzu, und speichern Sie. Abbildung 5.9 Eine per TypoScript»von Hand gebaute«html-tabelle Kopieren, Referenzieren und Löschen von Objekten in TypoScript TypoScript bietet Ihnen ein schnelles Verfahren an, weitere Instanzen eines komplexen Objekts zu erstellen, ohne diese wiederholt explizit notieren zu müssen also auch, wie im folgenden Beispiel, Instanzen unserer in Objektform realisierten Tabelle. Hierfür kann wahlweise eine Kopie oder eine Referenz des gewünschten Objekts erstellt werden. Der Unterscheid zwischen beiden Vorgehensweisen wird im Folgenden erläutert. Wenden wir uns zunächst dem Kopieren zu

52 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates Den Zuweisungsoperator kennen Sie bereits es ist das Gleichheitszeichen, das Sie bereits wie selbstverständlich in dieser Aufgabe eingesetzt haben. Die Zuweisung erfolgt stets von rechts nach links, sieht also beispielsweise so aus: page.10.value = Hallo Welt! Hierbei steht auf der rechten Seite eine Zeichenkette, die dem links stehenden Objekt als Wert zugewiesen wird. Zeichenkettenbegrenzer sind nicht erforderlich, da an dieser Stelle ohnehin nur Strings übergeben werden können. 3 Kopieren eines Objekts Ein Kopier- oder Referenziervorgang unterscheidet sich von einer normalen Zuweisung dadurch, dass die dem Zielobjekt zugewiesene Größe ebenfalls ein Objekt ist. Außerdem wird ein anderer Operator verwendet für eine Kopie ist dies das Zeichen <. Um die Tabelle in page.30 in ein neues Objekt page.40 zu kopieren, schreiben wir einfach: # die ganze Tabelle in ein neues Objekt kopieren: page.40 < page.30 In der Tat würden Sie nun, wenn Sie das Ergebnis im Browser betrachten, eine zweite, identische Tabelle gleicher Struktur unter der ersten sehen. Müsste eine Kopie identisch mit dem Original bleiben, hätte das Verfahren jedoch wenig Sinn. In der Tat ist es durch einfaches Überschreiben möglich, die Inhalte der kopierten Tabelle zu ändern. Beachten Sie, dass die interne COA-Struktur nicht erneut angelegt werden muss, da sämtliche nicht geänderten Bestandteile der Kopie exakt so bleiben wie im Original. Hier werden den Feldern der ersten Zeile page neue Inhalte zugewiesen: # Inhalte der ersten Zeile ändern: page { 10.value = Ich wurde 20.value = kopiert } Die Inhalte der zweiten Zeile werden nicht angetastet (siehe Abbildung 5.10 ). Abbildung 5.10 Die Originaltabelle und ihre Kopie nach erfolgter Änderung Eine Kopie ist, einmal erstellt, unabhängig vom Original. Eine nachfolgende Änderung des Originals wirkt sich also nur dort und nicht in der Kopie aus. Analog hat eine nachfolgende Änderung eines kopierten Objekts (durch später im Quelltext stehende Anweisungen) keine Rückwirkung auf das Original. Referenzieren eines Objekts Anstatt ein Objekt zu kopieren, können Sie es auch referenzieren. Dies mag zwar für diese einfache Beispieltabelle wenig tieferen Sinn haben, kann in seinen Konsequenzen hier jedoch sehr anschaulich demonstriert werden. Eine Objektreferenz wird im Prinzip genau wie eine Kopie erstellt, nur der verwendete Operator ist ein anderer: =<. Um in einem neuen Objekt page.50 eine Referenz auf die Tabelle in page.30 zu bilden, schreiben Sie also: # Referenz der Ursprungstabelle in neues Objekt page.50 =< page.30 3 Anführungszeichen sind in diesem Kontext normale Zeichen und haben keine Steuerzeichenfunktion: Setzen Sie einen String in Anführungszeichen, werden diese ausgegeben. Das Ergebnis im Browser ist zunächst nicht von dem einer Kopie zu unterscheiden (Original und Referenz sind identisch). Auch bei anschließender Änderung von Werten der Referenz (hier in deren zweiter Zeile) ist zunächst nichts auffällig (siehe Abbildung 5.11) das Original wird nicht angetastet:

53 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates # Änderung der Werte von Zeile 2 in der Referenz page { 10.value = per 20.value = Referenz } # Änderung Zeile 2 der Ursprungstabelle nach Referenzierung: page { 10.value = vorher 20.value = geändert! } #... wird durch Änderung in der Referenz überschrieben! Diese zweite Änderung ist nun im Original und in Zeile 1 der Referenz sichtbar, nicht aber in der kopierten Tabelle in der Mitte (die Kopie erfolgte ja von einem älteren Zustand des Originals), wie in Abbildung 5.12 zu sehen ist. Beachten Sie: In Zeile 2 der Referenz sind deren geänderte Werte sichtbar, obwohl ja die Änderung der Referenz im Quelltext vor der Änderung des Originals vorgenommen wurde. Abbildung 5.11 Original, Kopie und geänderte Referenz Erst wenn auch am referenzierten Original eine Änderung erfolgt (diesmal in beiden Zeilen), bemerkt man ein verändertes Verhalten (beachten Sie, dass die Originaltabelle im TypoScript-Quelltext erst nach Erstellung der Referenz und deren Wertänderung überschrieben wird). Fügen Sie also folgende Zeilen an: # Änderung Zeile 1 der Ursprungstabelle nach Referenzierung: page { 10.value = Nachträglich 20.value = geändert } #... wirkt sich auf die Referenz aus! Abbildung 5.12 Nachträglich geändertes Original, Kopie und Referenz Was passiert hier? Eine TypoScript-Referenz steht gewissermaßen in der Mitte zwischen einer»gewöhnlichen Kopie«und einer Objektreferenz, wie es in objektorientierten Programmiersprachen üblich ist. Vorsicht Denkfalle: doch nur eine Kopie! In Java, JavaScript, C oder vergleichbaren Sprachen bildet eine Referenz einen echten»zeiger«auf das Originalobjekt und verhält sich zu jedem Zeitpunkt wie das Original

54 5 Einstieg in TypoScript 5.2 Anlegen und Verwalten von Templates (beide Objekte sind dort eigentlich nur ein Objekt): Eine Änderung in der Referenz hat dort stets eine Änderung im Original zur Folge. Dies ist in TypoScript nicht der Fall. In TypoScript ist eine»referenz«ebenfalls eine Kopie, nur der Zeitpunkt des Kopiervorgangs ist ein anderer: Die Erstellung der Referenz erfolgt nach dem Einlesen des vollständigen Skripts, die Erstellung einer Kopie während des Einlesens. Aus diesem Grund betreffen Änderungen in der Referenz nicht das ausgegebene Original; dies ist zu diesem Zeitpunkt bereits»fertig«. Am Ende ausgegeben wird der jeweils letzte Zustand eines Objekts. # Die Tabelle wird vollständig gelöscht: page.30 > Überlegen Sie nun kurz, bevor Sie die Wirkung des Löschvorgangs im Browser kontrollieren, was mit der erstellten Kopie und der erstellten Referenz der Originaltabelle geschieht. Der Kopiervorgang ist ja vor dem Ende des Skripts erfolgt, die Referenzierung jedoch wird erst nach Skriptende ausgeführt. Kopien werden»unterwegs«(beim Abarbeiten des Quelltextes) erstellt, und ebenso werden fortlaufende Änderungen an Objekten vollzogen. Eine Referenz wird jedoch erst erstellt, nachdem das Ende des Skripts erreicht ist. Anschließend können eventuelle Änderungen vorgenommen werden (wobei diese Änderungen an beliebiger Stelle im Skript stehen können; natürlich aber erst nach der Referenzierungsanweisung). Man kann sich dies so vergegenwärtigen, dass die Erstellung der Referenz»aus dem Fluss genommen«und mitsamt der Abarbeitung aller weiteren sie betreffenden Befehle an das Ende des Skripts angehängt bzw. dorthin verschoben wird. Löschen eines Objekts Ein Text innerhalb eines Textobjekts kann einfach dadurch entfernt werden, dass man seinen Wert mit dem leeren String (also mit»nichts«) überschreibt. Hier sehen Sie ein Beispiel, das Sie aber nicht in Ihr Setup einzugeben brauchen: page.100 = TEXT page.100.value = Dieser Text wird gleich wieder entfernt # rechts vom Zuweisungsoperator steht "nichts": page.100.value = Sie müssen dabei allerdings bedenken, dass hier nicht das Objekt selbst entfernt wird, sondern dass es nur»geleert«wird. Nach wie vor existiert das TEXT-Objekt page.100 und auch dessen value-eigenschaft. Um ein Objekt wie gewünscht vollständig zu löschen, bietet TYPO3 einen eigenen Operator an. Notieren Sie einfach die schließende spitze Klammer nach dem Objekt. Rechts vom Operator steht kein Wert, da hier keine Zuweisung erfolgt: # Das Objekt wird gelöscht: page.100 > Nun soll dieser Operator am Tabellenbeispiel ausprobiert und die Ursprungstabelle, also page.30, gelöscht werden. Fügen Sie folgende Anweisung am Ende des Skripts hinzu: Abbildung 5.13 Verbleibende Kopie nach dem Löschen des Originals Und richtig: Vom Löschvorgang ist nicht nur das Original betroffen, sondern auch dessen Referenz: Zu dem Zeitpunkt, zu dem die Referenz ausgeführt werden soll, existiert nämlich das referenzierte Objekt nicht mehr! Ein Fehler wird nicht gemeldet. Die Kopie jedoch bleibt erhalten, da sie ein unabhängiges Objekt darstellt (siehe Abbildung 5.13) Der Quelltext einer TYPO3-Seite Werfen Sie jetzt im Browser kurz einen Blick auf den Quelltext der von TYPO3 erzeugten Seite (siehe Abbildung 5.14). Sie sehen, dass die im TypoScript definierten Bestandteile der Seite (sie sind durch einen Kasten hervorgehoben) innerhalb des Body-Containers stehen. Abgesehen davon, dass das erzeugte HTML weder Zeilenumbrüche noch Leerzeichen hat, sieht es aus wie erwartet

55 5 Einstieg in TypoScript 5.3 Vererbung von TypoScript-Templates TYPO3 erzeugt die Grundstruktur der ausgegebenen Seite automatisch Beim Generieren einer Seite erzeugt TYPO3 eine Dokumenttyp-Deklaration, das Wurzelelement <html>, den <head>-container mit Inhalt und das <body>-element, das die mit TypoScript erzeugten Elemente enthält. Veranlasst wird dies alles ohne weiteres Zutun unsererseits durch das PAGE-Objekt. 5.3 Vererbung von TypoScript-Templates Bislang haben wir die Seite»Hauptseite 1«, in der das Template angelegt wurde, mit dem Befehl Web Anzeigen in der Ansicht des Arbeitsbereichs betrachtet. Die im vorhergehenden Abschnitt kopierten, referenzierten und geänderten Tabellen wurden der Übersichtlichkeit halber wieder entfernt. Setzen Sie nun per Klick im Seitenbaum das aktive Dokument auf»unterseite 1«von»Hauptseite 1«: Sie werden bemerken, dass die Ansicht dieselbe ist, obwohl für»unterseite 1«gar kein Template angelegt wurde. Abbildung 5.14 Der Quelltext der erzeugten HTML-Seite Sie sehen allerdings auch, dass die Seite, wie für ein reguläres HTML-Dokument selbstverständlich, über einen Dokumentkopf und einen Dokumentrumpf verfügt. Die einleitende Dokumenttyp-Deklaration erklärt das Dokument zu gültigem HTML5. Im <title>-container des Dokumentkopfs finden Sie den Sitenamen, den Sie im Wurzel-Template eingegeben hatten, und den Seitentitel des aktuell angezeigten Dokuments (hier also»hauptseite 1«). Der Dokumentkopf enthält darüber hinaus einen Kommentar, der die Seite als TYPO3-Seite erkennbar macht. Das erste <meta>-element deklariert UTF-8 als Zeichensatz für das Dokument, das zweite <meta>-element zeichnet TYPO3 als Generator aus. TYPO3 erzeugt zusätzlich noch eine temporäre CSS-Datei (sie ist später für das Stylen einiger Inhaltselemente zuständig) und bindet sie ein. All diese Dokumentbestandteile generiert TYPO3 automatisch, ohne dass Sie etwas tun müssten. Sie werden aber in Kürze erfahren, wie Sie Einfluss auf diese elementaren Strukturen nehmen können. Abbildung 5.15 Zugriff auf Templates der übergeordneten Hierarchie-Ebene Dies beruht auf dem TYPO3-Prinzip der Vererbung eines Templates an untergeordnete Seiten des Seitenbaumzweigs. Dasselbe Ergebnis erhalten Sie, wenn Sie eine der beiden anderen Unterseiten in diesem Zweig betrachten: TYPO3 durchsucht für eine Template-lose Seite den Seitenbaum in aufsteigender Richtung, bis in einer der darüberliegenden Hierarchie-Ebenen ein Template gefunden wird. Dieses wird dann verwendet

56 5 Einstieg in TypoScript 5.3 Vererbung von TypoScript-Templates Im vorliegenden Fall»erbt«also die auf Level 1 befindliche»unterseite 1«das Template von»hauptseite 1«im darüberliegenden Level 0. In welcher Tiefe die Templatelose Seite sich befindet, macht keinen Unterschied (siehe Abbildung 5.15). Nochmals zur Verdeutlichung: Eine Seite kann ein Template nur von einer hierarchisch übergeordneten Seite erhalten. Im ersten Zweig erhält beispielsweise»unterseite 2«ihr Template ebenfalls von»hauptseite 1«und bekommt es nicht etwa von»unterseite 1«weitergereicht. In der Tat wird ein Template niemals innerhalb der gleichen Hierarchie-Ebene weitergegeben (siehe Abbildung 5.16), daher auch nicht von»hauptseite 1«nach»Hauptseite 2«. Wenn Sie nun»hauptseite 2«oder beliebig eine der Unterseiten des zweiten Zweigs anwählen (die ja ebenfalls keinen Zugang zum Template von»hauptseite 1«haben), sehen Sie, dass in diesem Fall keine Template-Vererbung stattfindet: Sie erhalten in allen diesen Fällen die Meldung No TypoScript template found! Erweiterungs-Templates auf Unterseiten Es wäre ausgesprochen unflexibel, wenn ein Template nur auf der Wurzelseite des Zweigs angelegt und von dieser aus unverändert weitergegeben werden könnte. TYPO3 kennt das Prinzip der Erweiterungs-Templates (Extension Templates), um eine Modifikation oder Erweiterung der Template-Definitionen für eine Unterseite und ihr hierarchisch unterstellte Seiten zu ermöglichen. Erweiterungs-Templates sind nur auf Template-losen Seiten sinnvoll Ein Erweiterungs-Template kann mittels der Template-Tools auf jeder Seite platziert werden, der selbst kein Template direkt zugeordnet ist. Es dient dazu, TypoScript- Angaben des Wurzel-Templates zu ergänzen oder diese zu überschreiben. Wählen Sie hierfür eine Seite ohne eigenes Template (im Beispiel ist es»unterseite 2«von»Hauptseite 1«). Die Template-Tools bieten Ihnen für diesen Fall drei Optionen an: neue Website erstellen Abbildung 5.16 Keine Vererbung zwischen benachbarten Zweigen Kein Template am Wurzelelement des Seitenbaums platzierbar Das Root-Objekt des Seitenbaums (das kleine TYPO3-Logo) selbst kann grundsätzlich keine Templates tragen, da es sich bei diesem Objekt nicht um eine Seite handelt, die Inhalte tragen könnte. Es ist deshalb nicht möglich, dort ein Template für alle untergeordneten Baumzweige zu platzieren. Folge: Jeder Zweig, der direkt unter dem Root-Icon (auf Level 0) ansetzt, verhält sich somit wie eine unabhängige Website und benötigt jeweils ein eigenes Haupt-Template. Sie können Templates natürlich stets auch durch»physisches«kopieren von einem Zweig zum anderen übertragen. Das Anlegen eines solchen eigenständigen Root-Templates sollte normalerweise jedoch nur auf der obersten Ebene erfolgen. Zur nächsten Seite mit Template gehen Diese Option wählen Sie, wenn Sie das auf die aktuelle Seite wirkende Template bearbeiten möchten. In unserem Fall würde dies den Wechsel zu»hauptseite 1«bedeuten, die als einzige Seite im Zweig ein Template besitzt. Im anderen Zweig existiert gar kein Template, daher wird Ihnen TYPO3 eine solche Option auf keiner der dortigen Unterseiten vorschlagen. Erweiterungs-Template erstellen Hiermit wird ein Zusatz-Template erstellt. Es ist die Option, die jetzt demonstriert werden soll. Klicken Sie also auf diesen Button (siehe Abbildung 5.17). Sie sehen nun die Template-Information-Tabelle des Erweiterungs-Templates vor sich. Der Template-Titel lautet standardmäßig +ext (wie»plus extension«, siehe Abbildung 5.18). Wir wollen ihn aber gleich in einen aussagekräftigeren Titel ändern. Klicken Sie den Stift im Titelfeld an, und benennen Sie dieses Erweiterungs-Template in»bodybgcolor«um. Speichern Sie die Eingabe über das Diskettensymbol

57 5 Einstieg in TypoScript 5.3 Vererbung von TypoScript-Templates page.bodytagadd = bgcolor="red" text="white" page.20.value = Dies ist Unterseite 2! Wenn Sie diese kurzen Anweisungen mit den im Haupt-Template eingegebenen Daten vergleichen, werden Sie bemerken, dass diese hier im Vergleich fragmentarisch sind: Es wird kein PAGE-Objekt angelegt, aber dennoch verwendet. Es wird auf eine Eigenschaft bodytagadd von page zugegriffen. Es wird auf ein Objekt 20 von page zugegriffen, ohne es vorher anzulegen. Wieso kann hier auf anderswo definierte Objekte zugegriffen werden? Dies liegt daran, dass unser Template kein unabhängiges Template ist, sondern eine Erweiterung der Definitionen des Haupt-Templates darstellt aus diesem Grund kann (auch überschreibend) jederzeit auf dort definierte Objekte zugegriffen werden. Abbildung 5.17 Anlegen eines Erweiterungs-Templates Die im Erweiterungs-Template getroffenen Anweisungen werden zu den vorhandenen TypoScript-Anweisungen addiert. Da sie also quasi nach den Anweisungen des Haupt-Templates geschehen, widerrufen sie diese im Konfliktfall bzw. ergänzen sie anderenfalls. Folgendes geschieht hier: Die Hintergrundfarbe des Dokuments wird in Rot und die Schriftfarbe in Weiß geändert. Dies geschieht durch Erweitern des Body-Tags um die Attribute bgcolor und text sowie durch das Überschreiben ihrer Standardwerte mit red und white. Der Wert des Objekts 20 wird überschrieben. Anstelle des im Haupt-Template definierten Wertes Dies ist TypoScript! steht hier nun Dies ist Unterseite 2!. Wechseln Sie in das Modul Web Anzeigen, und betrachten Sie das Ergebnis (siehe Abbildung 5.19). Diese Änderungen würden ebenfalls an alle Seiten weitergegeben, die»unterseite 2«hierarchisch untergeordnet sind. Es sind allerdings derzeit keine vorhanden. Eine Vererbung oder Weitergabe des Erweiterungs-Templates auf gleicher Hierarchie- Ebene findet jedoch auch hier nicht statt. Um dies zu überprüfen, wechseln Sie die Ansicht nach»unterseite 1«oder»Unterseite 3«. Diese finden Sie unverändert vor, wie Sie in Abbildung 5.20 sehen. Abbildung 5.18 Bearbeiten des Titels des Erweiterungs-Templates Klicken Sie anschließend, wie inzwischen gewohnt, auf das Stiftsymbol der Setup- Zeile, und geben Sie in das leere Setup-Feld folgende Zeilen ein:

58 5 Einstieg in TypoScript 5.4 Der TypoScript-Objekt-Browser 5.4 Der TypoScript-Objekt-Browser Zu Beginn des Kapitels haben wir erwähnt, dass es sich bei TypoScript um eine Konfigurationssprache handelt, die nach hierarchischen Prinzipien arbeitet. Dies spiegelt sich im Template-Setup beispielsweise in den nummerierten Positionsobjekten wider. Diese werden in beliebiger Reihenfolge eingefügt, jedoch stets nach ihrem Index sortiert abgearbeitet. Auch kann jede Instruktion an einem späteren Punkt des Setups überschrieben werden. Das Template-Setup kann daher schnell unübersichtlich werden. Folgende»Wunschliste«könnte angesichts dieses Defizits für eine alternative Darstellungs- und Bearbeitungsoberfläche aufgestellt werden: Objekte sollen sortiert angezeigt werden statt in Deklarationsreihenfolge. Nur der jeweils letzte gültige Wert eines Objekts soll angezeigt werden. Ein Wert soll einfach»vor Ort«geändert werden können. Die Hierarchien sollen durch eine Baumstruktur abgebildet werden. Abbildung 5.19»Unterseite 2«mit roter Hintergrundfarbe Genau für diese Zwecke stellt TYPO3 den sogenannten TypoScript-Objekt-Browser zur Verfügung Arbeit mit dem TypoScript-Objekt-Browser Sie wechseln in den TypoScript-Objekt-Browser über das rechte obere Pulldown- Menü in den Template-Werkzeugen (siehe Abbildung 5.21). Wählen Sie dort als ersten Schritt den Eintrag TypoScript-Objekt-Browser aus, und wechseln Sie dann gleich (Schritt 2) im Pulldown-Menü Browse auf den Eintrag Setup. Abbildung 5.20 Die anderen Unterseiten sind nicht betroffen. Legen Sie nun eine Unterseite»Unterseite 2-1«für»Unterseite 2«an, und betrachten Sie diese zunächst im Modul Web Anzeigen. Sie werden erkennen, dass die Angaben des Erweiterungs-Templates tatsächlich auch für»unterseite 2-1«gelten. Auch diese Seite hat die rote Hintergrundfarbe erhalten. Abbildung 5.21 Wechsel in die»setup«-ansicht des TypoScript-Objekt-Browsers

59 5 Einstieg in TypoScript 5.4 Der TypoScript-Objekt-Browser Beim ersten Blick in den TypoScript-Objekt-Browser erkennen Sie eine Baumstruktur hier als Object Tree bezeichnet, die die hierarchisch verschachtelten Objektdefinitionen abbildet (siehe Abbildung 5.22). Einige Zweige sind»eingeklappt«; sie können durch einen Klick auf das Pluszeichen vor der Zweigwurzel geöffnet und wieder geschlossen werden. Das im Setup erst nach Objekt 20 deklarierte Positionsobjekt 5 ist korrekt in Ausgabereihenfolge eingeordnet. Ansonsten sehen Sie auch die restlichen im Setup definierten Objekte sowie ihre Eigenschaften und deren Werte. Abbildung 5.23 Ändern eines Propertys im TypoScript-Objekt-Browser Änderungen können analog für alle Objekte des Baums erfolgen. Nicht nur die Eigenschaften eines Objekts können bearbeitet werden, sondern auch die Objekte selbst. So ist über Edit object/property value sogar die nachträgliche Änderung eines Objekttyps prinzipiell möglich. (Dies kann Konsequenzen haben, sollten die bereits zugeordneten Propertys für den neuen Objekttyp nicht gültig sein. 4 ) Ebenso können Sie ein Objekt löschen (Clear object) oder eine Objekteigenschaft hinzufügen (Add object property). Abbildung 5.22 Arbeit mit dem TypoScript-Objekt-Browser Auf ein Objekt oder ein Property können Sie über die Baumstruktur direkt zugreifen. Die Objekt- bzw. Property-Namen dienen als Link. Um beispielsweise den Wert»Dies ist Unterseite 2!«des Positionsobjekts 20 zu ändern, klicken Sie im betreffenden Zweig einfach auf [value]. Sie sehen nun ein Dialogfeld vor sich, ähnlich dem in Abbildung 5.23, in dem Sie den aktuellen Wert einfach durch einen beliebigen neuen Eintrag überschreiben können. In diesem Beispiel wird der Wert mit»das ist toll!«überschrieben. Speichern Sie, indem Sie auf den Button Update klicken. Zurück in der Object-Tree-Ansicht, erhalten Sie nochmals eine Rückmeldung, welches Objekt geändert und was als sein neuer Wert gespeichert worden ist (siehe Abbildung 5.24). Auch in der Baumstruktur spiegeln sich die Änderungen wider. Beachten Sie: Der TypoScript-Objekt-Browser ist kein wirklich guter Editor, der Änderungen am Ursprung der Definitionen vornimmt (also in der Zeile, aus der eine Anweisung stammt). Dies können Sie leicht erkennen, wenn Sie in den Info/Bearbeiten-Dialog zurückwechseln und erneut einen Blick in das Setup-Feld werfen: Anstatt im Zuge der erfolgten Bearbeitung etwa die Zeile mit der Wertzuweisung an page.20.value zu ändern, hat der Template-Objekt-Browser einfach am Ende der Setup-Definitionen eine weitere Wertdeklaration hinzugefügt und die alte hierdurch überdeckt. 4 Nach dem Prinzip, dass nur beachtet wird, was gilt, werden Sie keine Fehlermeldung erhalten. Nicht mehr benötigte oder nicht mehr anwendbare Propertys würden einfach ignoriert

60 5 Einstieg in TypoScript 5.5 Einsatz von Konstanten im TypoScript-Template Was versteht man in TypoScript unter Konstanten? Sie haben gesehen, dass in einem Template die TypoScript-Angaben im Feld Setup die Ausgabe im Frontend des CMS definieren. Hier werden Strukturen definiert und Werte übergeben. Sie haben auch gesehen, dass im Rahmen eines Erweiterungs-Templates ein Wert des Haupt-Templates (genauer, ein Wert jedes untergeordneten Templates) überschrieben werden kann: # Dies steht im Haupt-Template: page.20.value = Dies ist TypoScript! # Dies steht im Erweiterungs-Template: page.20.value = Dies ist Unterseite 2! Abbildung 5.24 Update-Hinweis und geänderter Wert im Object Tree Mehrfache Änderungen (auch des gleichen Objekts) bewirken dementsprechend jeweils einen weiteren angehängten Eintrag. Prüfen Sie das, indem Sie den Text wieder in»dies ist Unterseite 2!«zurück ändern. (Räumen Sie anschließend auf, indem Sie beide neuen Einträge aus dem Setup löschen.) Der Sinn des TypoScript-Objekt-Browsers Der TypoScript-Objekt-Browser ist hervorragend geeignet, um eine Übersicht über die Template-Hierarchie zu erhalten und gegebenenfalls»ambulant«geringfügige Änderungen vorzunehmen. Für größere Umstellungen oder»aufräumarbeiten«ist er weder geeignet noch konzipiert. Erledigen Sie solche Arbeiten gleich besser im eigentlichen Setup-Dialog, oder arbeiten Sie dort zumindest nach. 5.5 Einsatz von Konstanten im TypoScript-Template Sicher ist Ihnen bereits aufgefallen, dass neben dem Feld Setup auch ein weiteres Feld Constants im Template existiert. Bislang haben wir es schnöde ignoriert, und es liegt daher brach. In diesem Abschnitt wird gezeigt, wie Sie prinzipiell damit arbeiten und was man in TypoScript überhaupt unter einer Konstante versteht. Okay, diese Vorgehensweise funktioniert. Als Nachteil mag man ansehen, dass es im Erweiterungs-Template erforderlich ist, zu wissen, wo in der Hierarchie des Haupt- Templates die zu ändernde Information steht (also in page.20). Gut, in unserem Fall ist das kein Problem. Aber stellen Sie sich vor, ein bestimmter Wert käme in einem umfangreichen Template mehrfach und an verschiedenen hierarchischen Positionen vor. Ihn überall zu ändern könnte ziemlich mühsam werden, und leicht würde dabei ein zu ändernder Wert übersehen.»eine Variable«, denkt jeder Programmierer sofort und wird als Lösung vorschlagen, den konkreten Wert im Setup durch eine Variable zu ersetzen, deren Wert dann nur an einer Stelle (»zentral«) angepasst werden müsste. Bingo! Genau das ist die Funktion, die in TYPO3 sogenannte Konstanten erfüllen. Diese übernehmen in TypoScript die Aufgabe von Variablen (stören Sie sich einstweilen nicht an der Bezeichnung»Konstante«). Und wo ist»zentral«? Richtig, im Feld Constants Ihres Templates! Die Syntax für Deklaration und Referenz einer Konstante Kommen wir zunächst zur Syntax der Konstanten, die an die Syntax von PHP-Variablen angelehnt ist: PHP kennzeichnet eine Variable durch das $-Zeichen, das dem Variablennamen vorangestellt wird. Diese Kennzeichnung reicht in PHP aus, um eine Variable als solche zu erkennen. Sie wird dann bei der Ausführung des Skripts durch ihren Wert ersetzt. Auch TYPO3 stellt einer Konstante zur Referenzierung ein $-Zeichen voran. Dies allein genügt aber nicht, da das $-Zeichen keine unmittelbare Steuerzeichenfunktion besitzt. Vielmehr müssen zusätzlich geschweifte Klammern als Markierung des Ausdrucks herhalten. Hier ein Beispiel:

61 5 Einstieg in TypoScript 5.5 Einsatz von Konstanten im TypoScript-Template # Dies steht im Setup-Feld page.20.value = {$ersatztext} Achten Sie darauf, dass um den Konstantenbezeichner innerhalb der geschweiften Klammern keine zusätzlichen Leerzeichen stehen dürfen dies würde dazu führen, dass die Konstante nicht ersetzt wird. Die Wertzuweisung an die Konstante erfolgt im Feld Constants: # Dies steht im Konstanten-Feld ersatztext = Das steht in der Konstante Bei der Deklaration einer Konstante wird kein $-Zeichen dem Namen des Bezeichners vorangestellt. Die Wertzuweisung erfolgt wie gewohnt über das Gleichheitszeichen. Nun soll die Farbzuweisung für die Hintergrundfarbe der Seite durch eine Konstante ersetzt werden Editieren von Konstanten im Konstanten-Editor Neben dem Modus Info/Bearbeiten, der gewissermaßen dem Quelltextmodus des Templates entspricht, existieren weitere Ansichten, die über das Pulldown-Menü der Template-Ansicht erreichbar sind. Den TypoScript-Objekt-Browser haben Sie bereits kennengelernt. Wählen Sie nun die Ansicht Konstanten-Editor (Constant Editor siehe Abbildung 5.25). Die beiden Farbkonstanten, die zu editieren wären, existieren ja bereits. Ärgerlicherweise ist TYPO3 nicht dieser Ansicht, wie Sie bemerken werden, sobald Sie den Menüpunkt angewählt haben. Sie sehen hier lediglich Konstanten für Layout Root Path, Partial Root Path und Template Root Path. Was auch immer es damit auf sich hat, sie stammen nicht von uns, und wir wollen sie daher ignorieren. Nur, unsere soeben definierten Konstanten für Farben tauchen hier nicht auf. Wie kann das sein? Der Einsatz von Konstanten Wechseln Sie in das Modul Web Template, und klicken Sie»Unterseite 2«an. Ändern Sie im Setup-Feld die Zuweisung von Text- und Hintergrundfarbe, sodass keine konkreten Farbwerte, sondern Referenzen auf Konstanten übergeben werden: # Im Setup von Unterseite 2: page.bodytagadd = bgcolor={$bodybgcolor} text={$textcolor} Geben Sie nun im Feld Constants die Deklaration der Konstante ein: # In Constants von Unterseite 2: bodybgcolor = red textcolor = white Prüfen Sie die Ausgabe der Seite. Sie sollte sich nicht verändert haben. Legen Sie nun auch für»unterseite 2-1«ein Erweiterungs-Template an, und nennen Sie es»bodybgcolor (mod)«. Lassen Sie diesmal das Setup-Feld außer Acht, und fügen Sie lediglich in das Constants-Feld folgende Zeile ein: # In Constants von Unterseite 2-1: bodybgcolor = green Lassen Sie sich»unterseite 2-1«im Browser anzeigen. Der Hintergrund dieser Seite erscheint nun in Grün, da das Erweiterungs-Template die Angabe des ihm untergeordneten Erweiterungs-Templates überschreibt. Abbildung 5.25 Der Konstanten-Editor»sieht«die Farbkonstanten nicht. Immerhin gelangen Sie durch einen Klick auf den Template-Namen im Bereich Edit constants for template in das Constants-Feld, um die eine dort gesetzte Konstante zu bearbeiten (die natürlich doch vorhanden ist). Der Konstanten-Editor ist dennoch nicht unbrauchbar. Er verlangt lediglich Zusatzinformationen zu einer Konstante, damit er diese als»editierbar«erkennt. Solche Informationen haben wir bislang nicht übergeben. Das ändern wir nun Konstanten über Kategorien kennzeichnen Die vom Konstanten-Editor erwartetete Kennzeichnung einer Konstante erfolgt in Form eines Kommentars im Constants-Feld. Dort übergeben werden:

62 5 Einstieg in TypoScript 5.5 Einsatz von Konstanten im TypoScript-Template eine Angabe zum Datentyp (der Art des Wertes) eine Beschreibung Aber das allein genügt immer noch nicht. Eine Konstante muss, damit sie vom Konstanten-Editor akzeptiert wird, noch einer Kategorie zugewiesen sein. Normalerweise werden einer Kategorie nicht nur eine, sondern mehrere Konstanten zugeordnet. Übertragen wir das auf den Objektbegriff, könnten wir die Kategorie mit dem Objekt gleichsetzen und die Konstante mit einer seiner Eigenschaften, sodass wir die Konstante quasi einer»rubrik«zuordnen. Wir wählen, da es sich beim Konstantenwert um eine Farbangabe handelt, den Bezeichner»Farben«als Kategoriebezeichner. Nehmen Sie im Constants-Feld von»unterseite 2«folgende Änderung vor: Produktive Arbeit mit dem Konstanten-Editor Nun, da die Vorarbeit geleistet ist, können Sie den Konstanten-Editor erneut aufrufen. Dies ist jetzt von Erfolg gekrönt. Sie sehen nicht nur, dass im Pulldown-Menü Category tatsächlich die erstellte Kategorie gezeigt wird, sondern auch, dass darunter je ein Editierfeld eingeblendet wird, mit dem die beiden Farben geändert und gleich in einem Vorschaufeld überprüft werden können. Wie dieses Editierfeld aussieht, bestimmt der gewählte Typ color, der ein in TYPO3 vordefinierter Typ ist. Über dem Feld steht der Wert des Labels als Überschrift, dahinter der Konstantenbezeichner mit Kategoriepräfix (siehe Abbildung 5.26). # Kategoriebezeichner "Farben" wird vor den Konstantennamen gestellt: Farben.bodybgcolor = red # Kategoriebezeichner "Farben" wird vor den Konstantennamen gestellt: Farben.textcolor = white Das war nur ein Zwischenschritt. Nun sollen die eigentlichen Informationen platziert werden, die den Konstanten-Editor interessieren. Der Kommentar, der soeben für beide Konstanten vor die Deklaration geschrieben wurde, muss hierfür geändert werden: # cat=farben; type=color; label= Body-Hintergrundfarbe Farben.bodybgcolor = red # cat=farben; type=color; label= Textfarbe Farben.textcolor = white Beachten Sie die Syntax die drei Definitionen werden durch Semikolons getrennt, und der Wert wird mit einem Gleichheitszeichen zugewiesen. Stellen Sie auch für die Wertzuweisung im Constants-Feld von»unterseite 2-1«den Kategoriebezeichner vor den Konstantennamen (den Kommentar benötigen Sie dort nicht, er muss nur der Zeile vorangestellt werden, in der die Konstante zum ersten Mal deklariert wird). Abbildung 5.26 Bearbeiten einer Konstante über dem Konstanten-Editor Eine neue Farbe kann als Klartextbezeichner über das Pulldown-Menü gewählt oder in das Textfeld eingetragen werden. Dort kann alternativ ein Hexadezimalwert verwendet werden, was der Präzision halber vorzuziehen ist. Achtung Im Setup müssen die Konstanten jetzt ebenfalls als $Farben.bodybgcolor und $Farben.textcolor referenziert werden. Dies macht die Kategorie der Konstanten bereits aus dem Setup-Quelltext kenntlich, ohne dass Sie deren Definition sehen müssen: page.bodytagadd = bgcolor={$farben.bodybgcolor} text={$farben.textcolor} Abbildung 5.27 Konstante auf Defaultwert zurücksetzen

63 5 Einstieg in TypoScript 5.6 Das Template-Analyse Tool Gefahr: Zurücksetzen nur, wenn ein Defaultwert vereinbart ist! Vorsicht mit dem Pfeil-Icon Revert to default Constant, das die Konstante auf einen Default-Wert zurücksetzt (siehe Abbildung 5.27). In unserem Fall ist kein solcher Wert definiert, was zum vollständigen Löschen der Konstantendeklaration führt. Eine Wiederherstellung ist dann nur noch im Constants-Feld möglich, nicht aber im Konstanten-Editor. Von den drei User-Templates wird das Wurzel-Template Neue Website zuerst abgearbeitet, danach das Erweiterungs-Template Bodybgcolor. Dieses überschreibt einen Wert des Wurzel-Templates. Abschließend folgt das zweite Erweiterungs-Template Bodybgcolor (mod), das eine Konstante des vorhergehenden Erweiterungs- Templates überschreibt. Beachten Sie die leicht unterschiedlichen Icons, die Wurzel-Templates und Erweiterungs-Templates kennzeichnen (sie haben hier lediglich illustrierende Funktion und verfügen nicht über ein klickbares Kontextmenü). 5.6 Das Template-Analyse Tool Nun werfen wir einen Blick auf eine weitere Ansicht, die das Template-Modul auf ein TypoScript-Template bietet. Klicken Sie im Seitenbaum auf die Seite»Unterseite 2-1«, und wählen Sie im Pulldown-Menü der Template-Werkzeuge den Eintrag Template-Analyse (siehe Abbildung 5.28). Die Ansicht, die sich bietet, bildet die Hierarchie aller Templates der aktuellen Seite ab. An deren Gesamtwirkung sind auch alle drei durch Sie definierten Templates beteiligt. Sie werden übereinander in der Reihenfolge ihres Aufrufs dargestellt. (Die sieben hier ebenfalls sichtbaren, sogenannten»statischen«templates extbase, fluid, extensionmanager, sys_note, felogin, beuser und belog ignorieren Sie derweil sie werden durch das System automatisch eingebettet und sind für uns hier ohne Belang.) Die Reihenfolge, in der die Templates abgearbeitet werden, bestimmt, welches Template den Wert eines anderen überschreiben kann. Generell gilt, dass ein Template jeden Wert eines in der Ansicht über ihm stehenden Templates überschreiben kann. Abbildung 5.29 Icon»Root-Template«Abbildung 5.30 Icon»Erweiterungs-Template«Die Template-Analyse zeigt die hierarchische Struktur des Templates In dieser Ansicht kann ein Template zwar nicht editiert werden, Sie erhalten jedoch Einblick in Aufbau und Reihenfolge der Module im Gesamtzusammenhang. Dies erweist sich bei komplexeren und daher meist unübersichtlich werdenden Strukturen als sehr wertvoll. Die Ansichten des Template-Analyse-Tools können Sie ändern. Außer einer groben Übersicht über die Reihenfolge der Module ist auch ein Blick in den Quelltext der einzelnen Module möglich. Klicken Sie hierfür den Namen eines der Module in der Übersicht an (die statischen Module wurden in Abbildung 5.31 zur Vereinfachung weggelassen). Unter der Übersichtstabelle mit den gelisteten Modulen werden in zwei Feldern die Constants und das Setup des Moduls angezeigt. Für die Ausgabe können Sie im Bereich Display Options mit Checkboxen die Anzeige von Zeilennummern und ein Syntax-Highlighting aktivieren. Abbildung 5.28 Die drei User-Templates von»unterseite 2-1«

64 5 Einstieg in TypoScript 5.6 Das Template-Analyse Tool Abbildung 5.31 Detailansicht eines Moduls (»Constants«und»Setup«) Wenn Sie noch mehr bzw.»alles«sehen wollen, so klicken Sie auf den Button mit der Aufschrift View the complete TS-Listing (siehe Abbildung 5.32). Sie sehen dann im unteren Bereich der Seite tatsächlich den gesamten Inhalt aller Template-Module in der Reihenfolge des Einlesens, und zwar inklusive der statischen Module. Die Auflistung ist unterteilt in die Bereiche Constants und Setup, wobei Sie zunächst die Konstantenbereiche aller Module nacheinander ausgegeben bekommen. Anschließend geschieht dasselbe mit dem Setup-Bereich. Die Zeilennummerierung geschieht jetzt nicht mehr pro Modul, sondern wird für die Gesamtheit des TypoScripts durchgeführt. Die Nummerierung beginnt mit den Konstanten und setzt sich dann durch das Setup bis zum Ende fort. (Sie sehen, dass hier bereits über 500 Codezeilen am Werke sind, von denen Sie zum Glück die meisten nicht schreiben mussten.) Abbildung 5.32 Auflistung des gesamten wirkenden TypoScripts Bemerkenswert ist, dass die Konstanten (wie aus den Zeilennummern ersichtlich ist) insgesamt vor der Verarbeitung des Setups durchgearbeitet werden. Dies bedeutet, dass auch Konstantenwerte des letzten eingebundenen Moduls bereits vor dem Setup bekannt sind, sodass stets die korrekten Werte eingebunden werden. (Konstantenwerte aus Erweiterungs-Templates gelten deshalb auch im Setup des Wurzel- Templates.) Interessant mag für Sie auch ein Blick in die Konstantendeklarationen der statischen Templates sein, wo Sie sich die Kommentare ansehen können, die den Konstanten- Editor steuern

65 5 Einstieg in TypoScript 5.7 Löschen von Templates oder Erweiterungs-Templates 5.7 Löschen von Templates oder Erweiterungs-Templates Möglichweise müssen Sie früher oder später ein Erweiterungs-Template oder auch ein Haupt-Template wieder entfernen. Die Template-Informationstabelle bietet scheinbar zwar alle Optionen, ein Template beliebig zu bearbeiten, jedoch nicht die Möglichkeit, es vollständig zu löschen. Dies ist nur auf den ersten Blick so, denn wenn Sie auf das Template-Icon über der Tabelle klicken, öffnet sich ein Kontextmenü, das dann durchaus eine Option Delete bietet (siehe Abbildung 5.33). Abbildung 5.34 Editieren des gesamten Template-Moduls Beachten Sie an dieser Stelle lediglich die Button-Reihe (siehe Abbildung 5.34, rechts) am oberen Rand des Arbeitsbereichs das vorletzte Icon von rechts (das Mülltonnensymbol) der insgesamt sieben Icons bewirkt das Löschen des aktuell bearbeiteten Template-Datensatzes. Die anderen Buttons dienen (von links nach rechts) zum Beenden des Dialogs, ohne erfolgte Eingaben zu speichern, zum Speichern, Speichern und Betrachten, Speichern und Dialog beenden sowie zur Rücknahme des letzten Bearbeitungsschritts. Abbildung 5.33 Löschen eines Templates über das Icon-Kontextmenü Dies ist der einfachste Weg, ein Template-Modul wieder zu entfernen, jedoch nicht der einzige. Zwei weitere Möglichkeiten sollen demonstriert werden, die von Fall zu Fall auch ihre Berechtigung haben oder sogar praktischer sein können. Haben Sie das Template auf»unterseite 2-1«eben gelöscht? Nein? Dann werden wir es im folgenden Schritt tun Löschen über das Modul»Web Template«Da das Erweiterungs-Template von»unterseite 2-1«seinen Dienst nun getan hat, möchten wir hier kurz demonstrieren, wie ein Löschvorgang noch vonstatten gehen kann. Unter der Template-Informationstabelle des Erweiterungs-Templates finden Sie den Link Edit the whole template record. Sofern Sie ein Template-Modul nicht von der Übersichtstabelle aus in seinen Einzelaspekten, sondern in seiner Gesamtheit betrachten und bearbeiten wollen, bringt dieser Link Sie auf eine Formularseite, die genau diesem Zweck dient. (Wir kommen hier demnächst wieder vorbei.) Klicken Sie auf das Lösch-Icon, und bestätigen Sie die Warnmeldung. Das Erweiterungs-Template wird entfernt. Die»Unterseite 2-1«sieht wieder so aus wie»unterseite 2«, da wieder ausschließlich die Definitionen des Root-Templates und des Eweiterungs-Templates von»unterseite 2«gelten Löschen über das Modul»Web Liste«Konsequenterweise soll auch das Erweiterungs-Template von»unterseite 2«gelöscht werden. Weil es interessanter ist, werden wir nicht den eben eingeschlagenen Weg verfolgen TYPO3 bietet hier (wie so oft) auch alternative Möglichkeiten: Öffnen Sie eine Ansicht auf die Seite über das Modul Web Liste. Was Sie nun sehen, ist die Sammlung aller Datensätze, die mit dem aktuellen Seitenobjekt verbunden sind. Später werden Sie in dieser Ansicht auch die Datensätze der Seiteninhalte wiederfinden. Da im Moment noch keine Inhalte existieren, sehen Sie nur zwei Datensätze, nämlich den Datensatz von»unterseite 2-1«und den des Erweiterungs-Templates

66 5 Einstieg in TypoScript 5.7 Löschen von Templates oder Erweiterungs-Templates Es gibt aber auch weniger destruktive Varianten. Wollen Sie ein Template lediglich vorübergehend deaktivieren, betätigen Sie stattdessen die Glühbirne (Verbergen- Icon) links neben der Mülltonne (im Kontextmenü nennt sich diese Option derzeit Hide) Das versehentliche Löschen eines Templates rückgängig machen Sollten Sie ein Template-Modul einer Seite versehentlich gelöscht haben, können Sie dies im Seitenbaum über das Kontextmenü des Seiten-Icons der betroffenen Seite rückgängig machen. (Auch das Löschen einer Unterseite können Sie über den Erstellungsverlauf widerrufen.) Klicken Sie im Arbeitsfenster für den Bearbeitungsverlauf auf das Rückgängig-Icon der versehentlichen Aktion. (Alle Änderungen an diesem Datensatz sind hier chronologisch gelistet, sodass Ihre Aktion vermutlich als oberste erscheint.) Abbildung 5.35 Löschen eines Templates in der Ansicht»Liste«Ein Löschen des Datensatzes ist auch hier wieder über das Kontextmenü seines Icons möglich (Abbildung 5.35). Wählen Sie die Checkbox Erweiterte Ansicht unter dem Template-Datensatz an (siehe Abbildung 5.36). Neben dem Datensatz-Icon erscheinen nun weitere Symbole für die Bearbeitung des Datensatzes. Über das Löschen-Icon (die Mülltonne) können Sie das Template löschen. Abbildung 5.37 So machen Sie einen versehentlichen Löschvorgang rückgängig. Nach einem Klick auf das Icon (siehe Abbildung 5.37) kommen Sie in eine neue Ansicht, in der Sie die Aktion widerrufen. Hierbei wird jedoch nicht wirklich die ursprüngliche Aktion gelöscht, sondern durch eine gegenteilige Aktion (hier das Wiedereinfügen des Templates) zurückgenommen (siehe Abbildung 5.38). Abbildung 5.36 Löschen eines Templates in»liste«(erweiterte Ansicht)

67 5 Einstieg in TypoScript 5.7 Löschen von Templates oder Erweiterungs-Templates Abbildung 5.39 Undelete eines Template-Datensatzes über den Recycler Abbildung 5.38 Änderung durch Gegenaktion widerrufen Undelete eines gelöschten Templates mit dem Recycler Auch mithilfe des Moduls Papierkorb (Recycler), den wir unlängst in unserem Setup aktiviert haben, kann man das Löschen eines Template-Moduls rückgängig machen. Sofern Sie das Erweiterungs-Template»Bodybgcolor«im letzten Schritt wiederhergestellt haben, löschen Sie es nun erneut! Diesmal soll die Aktion über den Papierkorb widerrufen werden. Wechseln Sie hierfür in der Modulleiste in das Modul Papierkorb. Im Arbeitsfenster wählen Sie im Pulldown-Menü Tabelle den Eintrag Template. Dies reduziert die Anzahl der in der Liste gezeigten Einträge und reduziert sie auf Template-Datensätze. (In unserem Fall gibt es zwar nicht viel zu filtern, aber es geht ums Prinzip.) Klicken Sie nun einfach die Checkbox neben dem Datensatz an, der»undeleted«werden soll, und betätigen Sie den Button Wiederherstellen rechts unten (siehe Abbildung 5.39). Das war s, das Template ist wieder da. Nachdem Sie nun in diesem Kapitel ausreichend Fingerübungen gemacht haben, werden wir in Kapitel 6,»Seitenlayout mit TypoScript«, ein vollständig auf Typo- Script basierendes Layout realisieren