YPO3 TYPO3. Profihandbuch. Das TYPO3 Profihandbuch. Der Leitfaden für Entwickler und Administratoren zu Version 4.1. open source library

Transkript

1 2322.fhm :37 Uhr Seite 1 Sie lernen zunächst alle wichtigen Anpassungsmöglichkeiten und Funktionen in Front- und Backend kennen, bevor Sie ausführlich in Aufbau und Nutzung des Framework einsteigen. Neben dem TYPO3-Core mit TCE und $TCA behandeln die Autoren auch die korrekte DB-Struktur für Erweiterungen, die RTE-API sowie Versioning und Workspaces. Sie zeigen außerdem, wie Sie mit Hooks oder Services Funktionen von TYPO3 für Ihre Zwecke anpassen. Auf der CD Umfangreiches offizielles TYPO3Dokumentationsmaterial, die aktuellsten TYPO3-Pakete sowie die im Buch verwendeten Extensions In der gleichen Reihe erschienen Über die Autoren Franz Ripfel, Melanie Meyer und Irene Höppner sind seit einigen Jahren im TYPO3-Universum tätig. Über ihre gemeinsame Firma A.BE.ZET GmbH (abezet.de) implementieren sie für ihre Kunden vorwiegend TYPO3basierte Lösungen. open source library Nutzen Sie die Vorteile freier Software! Administratoren, Entwicklern und Usern bietet die freie Software effizient einzusetzen. Themen sind Probedruck 49,95 [ D ] 51,40 [ A ] Webprogrammierung u.a. Betriebssysteme, Programmierung, Netzwerke Open Source Library professionelles Know-how, um ISBN CY CMY K open source library open source library Das Buch schließt mit einer HowTo-Sammlung für häufig auftretende Problemstellungen sowie einer Top 10 wichtiger und spannender Extensions. Außerdem erfahren Sie, was es beim Thema Sicherheit zu berücksichtigen gilt, wie Sie mit LDAP ein Single Sign On umsetzen und wie Sie die Performance von TYPO3 erhöhen können. und Sicherheit. MY Ripfel Meyer Höppner TYPO3 Die Entwicklung von Extensions bildet den zweiten Schwerpunkt des Buches. Sie lernen Struktur, Aufbau und Funktionsweise von Extensions kennen und wie die TYPO3-API Sie bei Ihrer Arbeit unterstützt. CM. kl in Sie entwickeln eine Extension mit Kickstarter, testen und dokumentieren sie und veröffentlichen die Extension im TER. Y YPO3 00 n T 1,ende a Das TYPO3 Profihandbuch Ihr TYPO3-Leitfaden zu Front- und Backend, Framework & Extensions Als TYPO3-Entwickler und -Administrator müssen Sie nicht nur das Front- und Backend genau kennen, sondern auch den Aufbau des TYPO3-Framework und seine Rolle in der Extension-Entwicklung. Hierbei hilft Ihnen dieses Buch. Geschrieben von drei langjährigen TYPO3-Profis bietet es Ihnen in der Projektpraxis erprobtes Wissen von der Installation und Pflege des CMS über die Veröffentlichung von Extensions bis zu Best Practices für Ihre tägliche Arbeit. M Sp open source library C Franz Ripfel Melanie Meyer Irene Höppner Das TYPO3 Profihandbuch Der Leitfaden für Entwickler und Administratoren zu Version 4.1

2 Inhaltsverzeichnis Geleitwort Einleitung Grundlegendes zum Universum von TYPO Open Source und GPL Die Entstehungsgeschichte von TYPO Die Community Die Association Active Members Supporting Members Installation Systemvoraussetzungen Hardware Software Paketwahl und Platzierung auf dem Server Lösungen für häufig anzutreffende Probleme Das Installationstool Standardmäßiges Passwort ändern Basiseinstellungen Datenbank mit $TCA vergleichen Bildbearbeitung überprüfen Gezielt Einstellungen suchen und verändern Backup/Recovery vorsehen Export des Seitenbaums Backup durch TYPO3-Extensions Eigene Scripts Ihren Provider fragen Extensions einsetzen Extension Manager konfigurieren Extensions installieren Sprachpakete laden Los geht s

3 Inhaltsverzeichnis 2.8 TYPO3-Update durchführen Dateistruktur umstellen Datenbank aktualisieren Konfiguration überprüfen, Update Wizard Extensions überprüfen Reference-Index-Tabelle aktualisieren Cache leeren und temporäre Dateien löschen Superadmin-Script Materialien zum Weitermachen Das Frontend vorne raus Tutorial Die erste Webseite Vorbereitungen und Inhalte importieren Das erste TypoScript-Template Das HTML-Template und CSS einbinden Marker ersetzen Verschachtelungen übersichtlicher darstellen Hauptnavigation erstellen Eine Breadcrumb-Navigation erstellen Die Seiteninhalte anzeigen lassen Grundlagen Aus der Datenbank in den Browser Was ist TypoScript (nicht)? Zusammenspiel mit PHP TypoScript versus TSconfig Der Begriff»Template« HTML-Templates vorbereiten (dynamische und statische Bereiche) TypoScript-Syntax und -Semantik Begriffe: Objekt, Objektname, Eigenschaft, Funktion & Co Datentypen (data types) Operatoren und Kommentare Konstanten Bedingungen Die Bedeutung der Reihenfolge Die TypoScript-Referenz (TSref) TypoScript-Templates verwalten Der TypoScript-Template-Datensatz TypoScript-Konfigurationsbereiche wiederverwenden (temp.*, styles.* und lib.*) TypoScript-Templates übersichtlich organisieren

4 Inhaltsverzeichnis TypoScript-Templates in Dateien auslagern TypoScript-Editoren Das Modul Web, Template TypoScript-Templates bearbeiten (Info/Modify) TypoScript-Struktur betrachten (Object Browser) Template-Organisation überblicken (Template Analyzer) Konstanten bequem ändern (Constant Editor) Das Grundgerüst des Setup-Feldes (Toplevel Objects) Grundlegende Konfigurationen (CONFIG) Globale Marker (CONSTANTS) Das eigene Layout (PAGE) Metatags (META) plugin Ausgabe von Datensätzen (tt_*) Navigationen (Menüs) Grundlagen Der Ausgangspunkt (HMENU) Textmenüs (TMENU) Grafisches Menüs (GMENU) Layermenüs (TMENU_LAYER, HMENU_LAYER) Menü als Auswahlbox (JSMENU, JSMENUITEM) Weitere Menütypen Spezielle Funktionen in Menüs (iproc) Menüpunkte unterschiedlich behandeln (optionsplit) Die Ausgabe von Inhalten (cobjects) Dynamische Textausgabe (HTML, TEXT) Inhaltselemente zusammenfassen (COA, COA_INT) Dateien einbinden (FILE) Bilder darstellen (IMAGE, IMG_RESOURCE) Datensätze ausgeben (CONTENT, RECORDS) Navigationen (HMENU) Text mit Bild darstellen (IMGTEXT) Fallunterscheidungen einsetzen (CASE) Globale Variablen verwenden (LOAD_REGISTER und RESTORE_REGISTER) Mail-Formulare erzeugen (FORM) Eigene PHP-Scripts verwenden (USER, USER_INT, PHP_SCRIPT) HTML-Templates verwenden (TEMPLATE) Bearbeitungsleiste im Frontend (EDITPANEL)

5 Inhaltsverzeichnis 3.8 Erweiterte Konfiguration: Funktionen Die Allzweckwaffe (stdwrap) Bilddateien einbinden (imgresource) Klickvergrößern (imagelinkwrap) SQL-Statement konfigurieren (select) Noch mal Bedingungen (if) Links erzeugen (typolink) Textfelder/HTML parsen (parsefunc) Bildbearbeitung mit dem GIFBUILDER Mehrsprachigkeit Verschiedene Konzepte der Mehrsprachigkeit Grundeinstellungen TypoScript Alle Sprachen im gleichen Baum Übersetzungen Ein eigener Baum für jede Sprache Materialien zum Weitermachen Fehler finden Debuggen mit TypoScript Das AdminPanel verwenden Caching Caching-Einstellungen Ungecachte Teilbereiche einer Seite Caching mit URL-Parametern (chash) Extensions zum Thema Caching Barrierefreiheit Strukturierung des Dokuments durch Überschriften Barrierefreie Menüs Kennzeichnung von Abkürzungen und Akronymen, Glossar Tabellen Materialien zum Weitermachen Das Backend hinten rein Backend-Benutzerverwaltung Rechte Funktionsweise, Grundprinzip Home-Verzeichnisse Überblick behalten

6 Inhaltsverzeichnis 4.2 TypoScript-Konfiguration (TSconfig) Page TSconfig User TSconfig Versioning und Workspaces für das Team Einführung Benutzerverwaltung und Rechtevergabe Der Workspace Manager Redaktionelles Arbeiten mit Workspaces Tipps und Tricks Ausblick Interessante (oft unbekannte) Funktionalitäten Arbeitsschritte zusammenfassen Suchen im Backend Datenbankfelder kontrollieren Import/Export Drag&Drop Das Klemmbrett (Clipboard) Lokalisierung Datensätze im Modul Page anzeigen Kontrollmöglichkeiten, Logs Autologin Extension Manager für Administratoren Materialien zum Weitermachen Das Framework der Werkzeugkasten Aufbau und Funktionsweise Konzeptioneller Aufbau Dateisystem Dateien in typo3conf, Konfiguration Sprachvielfalt durch Lokalisierung L10n, UTF Datenbank Anforderungen an Tabellen, die von TYPO3 verwaltet werden Wichtige Tabellen Wie erkennt TYPO3 neu anzulegende Tabellen? Tabellenverknüpfungen Im Zentrum der Macht: The Core TCE (TYPO3 Core Engine) $TCA (Table Configuration Array)

7 Inhaltsverzeichnis Spezialkonfigurationen in defaultextras $PAGES_TYPES Aufbau der Backend-Schnittstelle Aussehen der Backend-Formulare anpassen Colorschemes Styleschemes Borderschemes RTE-API Versioning und Workspaces im Detail Voraussetzungen für eine versionierbare Tabelle Sonderfall Löschen und Erzeugen Eindeutige Felder (unique fields) Lebenszyklus von versionierten Elementen Workspaces-API für Programmierer Kontextsensitive Menüs Kontextsensitive Hilfe Funktionsweisen von TYPO3 abändern Ändern des Core-Codes Erweiterung mittels XCLASS Hooks Services Texte anpassen Materialien zum Weitermachen Extensions entwickeln Wozu Extensions? Extension Key Extension Key registrieren Ja, wo liegt sie denn? Sysext vs. global vs. lokal System-Extensions, typo3/sysext Globale Extensions, typo3/ext Lokale Extensions, typo3conf/ext/ Vorrangreihenfolge Kickstarter Allgemeine Informationen Verschiedene Sprachen vorsehen Eigene Datenbanktabellen anlegen

8 Inhaltsverzeichnis Bestehende Datenbanktabellen erweitern Frontend-Plugin erstellen Backend-Modul anlegen Neue Möglichkeiten für bestehende Module hinzufügen Neue Elemente im Kontextmenü der Seiten Neuen Service definieren Statischen TypoScript-Code einfügen TSconfig hinzufügen Struktur, Aufbau, Funktionsweise Extension-Daten in ext_emconf.php Weitere reservierte Datei- und Ordnernamen Konfigurationsmöglichkeiten für Extensions (ext_conf_template.txt) Bereich für Frontend-Plugins (pi*) Bereich für Backend-Module (mod*) Bereich für Services (sv*) Textinformationen und ihre Lokalisierung (L10n) Und dann geht s los! Coding Guidelines Organisationsregeln Formatierung und Benennung Programmiergrundsätze mit PHP Weitere Programmiergrundsätze mit TYPO Dokumentation Datenbankzugriffe Operationen im Dateisystem Das Rad nicht neu erfinden, API nutzen Verfügbare Konstanten Globale Variablen Die wichtigsten Klassen für den Extension-Entwickler Reference Index Table Cache-Möglichkeiten intelligent nutzen plugin als USER oder USER_INT Was Sie verstehen und einsetzen sollten T3DataStructure, XML und Flexforms Links im Frontend richtig erzeugen Cache während der Entwicklung unterdrücken Sessions im Frontend

9 Inhaltsverzeichnis Workspaces beachten Alleinstehende Scripts Debug: debug und devlog syslog AJAX Zeichensatz richtig einstellen Veröffentlichung Ihrer Extension Dokumentation erstellen Ins TER hochladen Ein eigenes Extension Repository aufsetzen Ausblick: Model-View-Control-Architektur Struktur, theoretisch Struktur, praktisch für TYPO Erweiterung bestehender Extensions Materialien zum Weitermachen HowTos Darstellung im Backend anpassen Login-Formular anpassen Icons und Farben verändern Datensätze im Page-Modul anzeigen Position und Erscheinen von Feldern beeinflussen Label überschreiben Label über Frontend-TypoScript anpassen Label für das Backend über Page TSConfig anpassen Label über Sprachdateien Kontextsensitive Hilfe einbauen Datensätze in Feldern speziell bearbeiten (itemsprocfunc) Eigene Wizards zu Feldern hinzufügen Durch eigene Listenansichten den Überblick behalten Den kompletten Seitenbaum auf einmal erzeugen Extension TOP 10 (für Entwickler) cal Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen

10 Inhaltsverzeichnis 8.2 commerce Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen DAM Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen direct_mail Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen indexed_search Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen realurl Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen rtehtmlarea und weitere Rich-Text-Editoren Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen

11 Inhaltsverzeichnis 8.8 templavoila Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen timtab (Weblog) Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen tt_news Beschreibung Voraussetzungen Installation und Konfiguration Anwendung Spezialwissen Spezialthemen Sicherheit Organisationsverschulden Beliebte Angriffsvarianten Grundsätzliche Sicherheitsmaßnahmen Einstellungen im Install Tool Standard-Admin-Benutzer deaktivieren Coding Guidelines einhalten Abonnieren Sie die Mailingliste TYPO3-Announce Weitere Möglichkeiten Zugriffsgeschützte Seiten im Frontend Spam-Vermeidung Materialien zum Weitermachen TYPO3 im Intranet mit Single Sign On (SSO) Authentifizierungsmodul für Apache einrichten LDAP für PHP aktivieren Browsereinstellungen Testumgebung einrichten TYPO3 konfigurieren Troubleshooting

12 Inhaltsverzeichnis 9.3 Seiten mit sehr viel Last, Performance Lasttests durchführen Technische Rahmenbedingungen und Erfahrungswerte TYPO3 Cache nutzen, serverseitig Cache Control Headers, clientseitig Statische Files PHP-Beschleuniger Apache optimieren Datenbank optimieren (MySQL) Hardware, Cluster Materialien zum Weitermachen Werkzeuge für Profis Stichwortverzeichnis

13 3 Das Frontend vorne raus Mit TYPO3 können so gut wie alle Anforderungen an Layout und Funktion des Frontends individuell gestaltet werden. Dies geschieht vor allem mithilfe von HTML-Templates, TypoScript und Frontend-Plugins. Die Erstellung von Frontend-Plugins mithilfe von Extensions wird im Kapitel Extensions entwickeln, Seite 387, detailliert besprochen, daher kümmern wir uns in diesem Kapitel vor allem um die Frontend-Ausgabe mithilfe von TypoScript. Außerdem werden wir darüber sprechen, was Caching ist und wie TYPO3 damit umgeht, und werden uns mit der Umsetzung barrierefreier Webseiten mit TYPO3 befassen. Hinweis Anders als in den anderen Teilen dieses Buches fangen wir bei dem Thema TypoScript so an, als wären keinerlei Vorkenntnisse vorhanden. Der Grund dafür ist die Erfahrung, dass häufig auch erfahrene TYPO3-Entwickler nur ungern TypoScript verwenden. Wir wollen mit diesem Kapitel die Hemmschwelle für die Verwendung von TypoScript herabsetzen. Das möchten wir vor allem dadurch erreichen, dass wir das Verständnis für TypoScript erhöhen, die Idee hinter diesem Konzept verdeutlichen und durch Beispiele ein»gefühl«für diese Art der Konfiguration erzeugen.

14 3 Das Frontend vorne raus (Lern)ziele: Das Konzept»TypoScript«verstehen TypoScript anwenden können Eigene TypoScript-Templates erstellen können Die TSref verwenden können 3.1 Tutorial Die erste Webseite Dieses Kapitel beginnt mit einem Tutorial. Wenn Sie es durcharbeiten, haben Sie eine erste einfache Webseite mit TypoScript und einem HTML-Template erstellt. Sie bekommen auf diese Weise einen einfachen Überblick darüber, wie man mit Typo- Script arbeitet Vorbereitungen und Inhalte importieren Wir haben ein paar Dateien für dieses Tutorial vorbereitet. Um es eins zu eins durcharbeiten zu können, müssen Sie einige wenige Vorbereitungen treffen. Am besten ist es, wenn Sie mit einer neuen TYPO3-Installation arbeiten. Das Tutorial basiert auf einem TYPO3-Dummy der Version Informationen zur Installation von TYPO3 finden Sie im Kapitel Installation, Seite Kopieren Sie den Ordner frontend-tutorial/templates/ von der CD in das Verzeichnis fileadmin Ihrer TYPO3-Instanz. 2. Importieren Sie im Backend den Seitenbaum des Tutorials von der CD (frontendtutorial/seitenbaum.t3d) mithilfe der Import/Export-Funktion. Die Vorgehensweise dazu finden Sie im Abschnitt Import/Export, Seite 278. Aktivieren Sie dabei ausnahmsweise die Option FORCE ALL UIDS VALUES Das erste TypoScript-Template Wenn Sie sich jetzt die Ausgabe im Frontend anschauen (z.b. über das Modul WEB, ANZEIGE), bekommen Sie in einer TYPO3-Fehlermeldung gesagt, dass kein Template gefunden wurde. Gemeint ist mit dieser Fehlermeldung das TypoScript-Template (siehe auch Abschnitt Der Begriff»Template«, Seite 86). Legen Sie jetzt ein TypoScript-Template an. Gehen Sie dazu im Modul WEB, TEMPLATE auf die oberste Seite Ihres Seitenbaumes. Klicken Sie auf den Button CREATE TEMP- LATE FOR A NEW SITE, und bestätigen Sie die JavaScript-Meldung. 68

15 3.1 Tutorial Die erste Webseite Abbildung 3.1: TYPO3-Fehlermeldung bei fehlendem TypoScript-Template Abbildung 3.2: Anlegen eines Root-Templates Im Modul WEB, LIST sehen Sie jetzt, dass ein neuer Datensatz vom Typ TEMPLATE mit dem Titel NEW SITE angelegt wurde. Wenn Sie sich jetzt die Seiten im Frontend anschauen, sehen Sie, dass nicht mehr die TYPO3-Fehlermeldung, sondern der Text HELLO WORLD dort steht. Gehen Sie jetzt wieder in das Backend, und dort in das MODUL WEB, TEMPLATE, und wählen Sie rechts oben die Funktion INFO/MODIFY aus. Ausführliche Informationen zu den Funktionen des Moduls WEB, TEMPLATE erhalten Sie im Abschnitt Das Modul Web, Template, Seite 109. Klicken Sie auf den Stift vor SETUP:. Sie sehen jetzt den automatisch erzeugten Quelltext Ihres TypoScript-Templates. Listing 3.1: Automatisch erzeugter TypoScript-Quelltext # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! 69

16 3 Das Frontend vorne raus Ändern Sie den Text HELLO WORLD!, klicken Sie auf den Button UPDATE, und schauen Sie sich das Ergebnis im Frontend an. Sie sehen, dass der Text dort auch geändert wurde. Achten Sie bei allen TypoScript-Eingaben auf korrekte Groß- und Kleinschreibung! Fügen Sie dem TypoScript jetzt die Zeile page.10.wrap = <strong> </strong> hinzu, und schauen Sie sich das Ergebnis im Frontend an. Sie sehen, dass der Text fett dargestellt wird. Ein Content Management System wird erst dann interessant, wenn Daten aus der Datenbank ausgegeben werden. Ändern Sie den Quelltext so, dass als Ergebnis Listing 3.2 herauskommt. Vergessen Sie nicht, den Button UPDATE anzuklicken. Listing 3.2: TypoScript für die Ausgabe des Seitentitels 01 # Default PAGE object: 02 page = PAGE 03 page.10 = TEXT 04 page.10.field = title 05 page.10.wrap = <strong> </strong> Im Frontend wird jetzt auf jeder Seite etwas anderes angezeigt, nämlich der Titel der aktuellen Seite. Sie haben eine dynamische Ausgabe erzeugt Das HTML-Template und CSS einbinden In diesem Schritt geht es darum, das vorbereitete HTML-Template und die zugehörigen CSS-Klassen zu verwenden. Das HTML-Template finden Sie in dem Ordner templates, den Sie von der CD nach fileadmin kopiert haben. Prinzipiell soll jede Seite so aussehen wie das HTML-Template. Allerdings sollen die folgenden dynamischen Bereiche durch Inhalte aus der Datenbank ersetzt werden: ➊ Hauptnavigation: Hier wird eine Textnavigation mit zwei Ebenen erstellt. ➋ Breadcrumb-Navigation ➌ Hauptinhaltsbereich ➍ Ein weiterer Inhaltsbereich ➎ Hier soll das aktuelle Jahr stehen. ➏ Datum, wann die Seite zuletzt geändert wurde Im HTML-Template sind diese Bereiche durch Marker (z.b. ###YEAR###) oder Subparts (z.b. <!-- ###CONTENT### begin --> <!-- ###CONTENT### end -->) gekennzeichnet. Im Abschnitt HTML-Templates vorbereiten (dynamische und statische Bereiche), Seite 86, wird dieses Vorgehen genau erklärt. 70

17 3.1 Tutorial Die erste Webseite Abbildung 3.3: Dynamische Bereiche der Webseite Wenn Sie sich den HTML-Quelltext Ihres Frontends jetzt anschauen, ehe das HTML- Template eingebunden wird, sehen Sie, dass bereits ein vollständiger <head>-bereich sowie das <body>-tag und das <html>-tag erzeugt werden, ohne dass diese irgendwo explizit definiert wurden. Diese HTML-Teile werden von dem TypoScript-Objekt PAGE generiert (siehe Abschnitt Das eigene Layout (PAGE), Seite 121). Das TEXT-Objekt, das die Ausgabe des Seitentitels erzeugt, wird im Folgenden durch ein TEMPLATE-Objekt ersetzt (detaillierte Informationen finden Sie im Abschnitt Die Ausgabe von Inhalten (cobjects), Seite 136). Diesem TEMPLATE-Objekt wird die Information gegeben, dass es die HTML-Datei als Template verwenden soll. Listing 3.3: Erstes Einbinden des HTML-Templates # Default PAGE object: page = PAGE page.10 = TEMPLATE page.10.template = FILE page.10.template.file = fileadmin/templates/main.html Wenn Sie sich jetzt den HTML-Quelltext im Frontend anschauen, sehen Sie, dass die gesamte HTML-Datei inklusive des <head>-bereichs eingebunden wurde. Tatsächlich wird aber nur der Bereich innerhalb des <body>-tags gebraucht. Dafür wurde im HTML-Template der Subpart DOCUMENT_BODY vorbereitet. Fügen Sie in Ihrem Typo- Script-Template die Zeile page.10.workonsubpart = DOCUMENT_BODY ein. Der Quelltext Ihrer Frontend-Ausgabe sieht jetzt besser aus. Allerdings fehlt das Stylesheet, und die Pfade zu den Bildern stimmen nicht. Mit der Zeile page.10.relpathprefix = fileadmin/templates/ sorgen Sie dafür, dass TYPO3 die Pfade zu den Bildern automatisch für den Aufruf im Frontend korrigiert. 71

18 3 Das Frontend vorne raus Dies ist notwendig, da das Frontend über die index.php in Ihrem Webroot aufgerufen wird und sich somit alle relativen Pfade auf deren Speicherort und nicht auf den Ort des HTML-Templates beziehen. Mithilfe der Konfiguration aus dem folgenden Listing binden Sie die Stylesheet- Dateien ein. Listing 3.4: Einbinden der Stylesheet-Dateien über TypoScript page.includecss.screen = fileadmin/templates/css/screen.css page.includecss.screen.media = screen page.headerdata.10 = TEXT page.headerdata.10.value ( <!--[if lte IE 7]> <link href="fileadmin/templates/css/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> ) Das Einbinden von Stylesheets erfolgt also im Rahmen des PAGE-Objekts. Mehr dazu finden Sie im Abschnitt Das eigene Layout (PAGE), Seite 121. Hinweis Die Bezeichnung page des Objekts PAGE ist frei wählbar. Es könnte genauso gut meineseite = PAGE oder kuehlschrank = PAGE heißen. Wir empfehlen Ihnen trotzdem, page zu verwenden, da einige Extensions davon ausgehen, dass das Objekt so heißt und es mit eigenen Konfigurationen erweitern. Konfigurieren Sie noch den doctype über die Zeile config.doctype = xhtml_trans. Die Seite sollte jetzt im Frontend genau so aussehen wie das HTML-Template Marker ersetzen Nun werden die dynamischen Bereiche des HTML-Templates durch dynamisch erzeugte Inhalte ersetzt. Es gibt zwei Marker in dem HTML-Template: YEAR und LAST_CHANGE. Diese beiden Marker sollen als Erstes ersetzt werden. Der Marker YEAR soll durch das aktuelle Jahr ersetzt werden. Dafür finden sich ausreichend Eigenschaften im TEXT-Objekt. Genau genommen handelt es sich um die Funktion stdwrap (siehe Abschnitt Die Allzweckwaffe (stdwrap), Seite 159), dazu später mehr. 72

19 3.1 Tutorial Die erste Webseite Listing 3.5: Ausgabe des aktuellen Jahres page.10.marks.year = TEXT page.10.marks.year.data = date:y Sie sehen, dass das TEMPLATE-Objekt eine Eigenschaft marks enthält. Innerhalb dieser werden die Objekte definiert, durch die die Marker ersetzt werden. Dabei handelt es sich um sogenannte Inhaltsobjekte (siehe Abschnitt Die Ausgabe von Inhalten (cobjects), Seite 136). Auch der zweite Marker wird durch ein TEXT-Objekt ersetzt. Dabei wird zunächst über die globale Variable register:sys_lastchanged der Zeitpunkt der letzten Änderung ermittelt. Diese Variable berücksichtigt nicht nur die Änderungen an der Seite (Tabelle pages), sondern auch, wann zuletzt Inhaltselemente geändert wurden. Nach Ermittlung des Datums wird dieses in einem lesbaren Format ausgegeben. Listing 3.6: Ausgabe der letzten Änderung page.10.marks.last_change = TEXT page.10.marks.last_change.data = register:sys_lastchanged page.10.marks.last_change.strftime = %d.%m.%y Verschachtelungen übersichtlicher darstellen In Abbildung 3.4 sehen Sie, dass sich das bisherige TypoScript in Bereiche aufteilen lässt, die eine Verschachtelung darstellen. Abbildung 3.4: Verschachtelung innerhalb von TypoScript Diese Verschachtelungen lassen sich mithilfe von geschweiften Klammern übersichtlicher darstellen. Das Ergebnis sehen Sie in Listing 3.7. Dabei wurde nicht jede mögliche Verschachtelung aufgelöst, sondern in erster Linie für Übersichtlichkeit gesorgt. Mehr zum {}-Operator finden Sie im Abschnitt Operatoren und Kommentare, Seite

20 3 Das Frontend vorne raus Listing 3.7: Übersichtlich gestalteter Quelltext config.doctype = xhtml_trans # Default PAGE object: page = PAGE page { includecss { screen = fileadmin/templates/css/screen.css screen.media = screen print = fileadmin/templates/css/print.css print.media = print } headerdata.10 = TEXT headerdata.10.value ( <!--[if lte IE 7]> <link href="fileadmin/templates/css/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> ) 10 = TEMPLATE 10 { template = FILE template.file = fileadmin/templates/main.html workonsubpart = DOCUMENT_BODY relpathprefix = fileadmin/templates/ marks { YEAR = TEXT YEAR.data = date:y LAST_CHANGE = TEXT LAST_CHANGE.data = register:sys_lastchanged LAST_CHANGE.strftime = %d.%m.%y } } } Hauptnavigation erstellen In diesem Schritt wird der Subpart MAINNAVI durch ein mehrstufiges Menü ersetzt. Erstellen Sie ein temporäres Objekt für den Subpart, und kopieren Sie dieses temporäre Objekt mithilfe des <-Operators (siehe Abschnitt Operatoren und Kommentare, Seite 91) in das TEMPLATE-Objekt. Listing 3.8: Temporäres Objekt für das Hauptmenü temp.mainnavi = HMENU temp.mainnavi { 1 = TMENU 1.wrap = <ul> </ul> 1.NO.wrapItemAndSub = <li> </li> 74