TYPO 3 und TypoScript (eBook)

Inhalt 7
Vorwort 14
Einführung in TypoScript 16
1 Einführung in TypoScript 17
1.1 Grundlegende Vorarbeiten zum Buch 17
1.1.1 Deutsche Benutzeroberfläche einrichten 17
1.1.2 Dummy-Paket 19
1.1.3 Für manche Fälle: Eine Seitenstruktur erstellen 19
1.2 Deklarative Programmierung oder was ist TypoScript? 21
1.2.1 So leistungsfähig ist TypoScript 22
1.2.2 Das ist TypoScript wirklich 23
1.2.3 TypoScript für die Backend-Gestaltung 24
1.2.4 TypoScript und PHP 25
1.3 TypoScript-Templates 27
1.4 TypoScript-Funktionen 29
TypoScript kennen lernen 30
2 TypoScript kennen lernen 31
2.1 Hallo, Welt! 31
2.2 Syntax 33
2.2.1 Objekte und Objekteigenschaften 34
2.2.2 Die Einteilung der Objektgruppen 41
2.2.3 Konstanten 41
2.2.4 Operatoren 42
2.2.5 Datentypen 45
2.2.6 Das Wrap-Prinzip 47
2.2.7 Kommentare 48
2.2.8 Bedingungen 49
2.2.9 Funktionen 51
Tools und Editoren 56
3 Tools und Editoren 57
3.1 Der Editor Ihrer Wahl 57
3.1.1 Syntaxhighlighting im UltraEdit 58
3.2 Info/Modify 58
3.2.1 Elemente 59
3.3 TypoScript Object Browser 61
3.4 Template Analyzer 63
3.5 Die TypoScript Eigenschaften- Anzeige 64
3.6 Admin-Panel 65
3.6.1 Kategorien 66
3.7 Constant Editor 69
3.7.1 Konstanten bereitstellen 69
3.7.2 Der Praxisbeweis – Überschriftenfarben über Konstanten definieren 70
3.7.3 Kategorien 72
3.7.4 Feldtypen 74
3.7.5 Kategorien beschreiben 75
3.8 Ein Java-Editor für TypoScript 77
3.9 TypoScript in HomeSite 78
3.10 HTMLArea RTE 79
3.11 Den Rich-Text-Editor (RTE) anpassen 86
3.11.1 Die Buttonleiste anpassen 87
3.11.2 Eigene Klassen definieren 89
3.11.3 Absatzformate 89
3.11.4 Farben definieren 91
3.11.5 Benutzerdefinierte Menüs 91
3.11.6 Hintergrundfarbe anpassen 92
3.11.7 Die Ausgabe gezielt steuern 93
Designvorlagen 96
4 Designvorlagen 97
4.1 Designvorlagen vs. Templates 97
4.2 Das Prinzip von Designvorlagen 97
4.2.1 Marker 98
4.2.2 Subparts 98
4.3 Der doppelte Head-Bereich 100
Templates 104
5 Templates 105
5.1 Das Konzept von Templates 105
5.1.1 Hallo, Welt! 105
5.1.2 Hallo, Welt! Zum Zweiten 105
5.1.3 Templates vererben 107
5.2 Template-Bestandteile 107
5.3 Objekte und Eigenschaften von Websites 111
5.3.1 Seiteneigenschaften mit TypoScript definieren 111
5.4 Designvorlagen einbinden 112
5.4.1 Die Designvorlage ansprechen 112
5.4.2 Platzhalter ansprechen 114
5.5 Das Template Auto-Parser 116
5.5.1 Den Parser installieren 117
5.6 Standard-Templates 121
5.7 Reine TypoScript-Templates 125
5.8 TemplaVoila 126
5.8.1 Systemvoraussetzungen 127
5.8.2 TemplaVoila vorbereiten 127
5.8.3 Die Datenstruktur anlegen 129
5.8.4 Inhalte eingeben 135
5.8.5 Fazit 137
5.8.6 Flexforms 137
Grafikbearbeitung 138
6 Grafikbearbeitung 139
6.1 Vorarbeiten für dieses Kapitel 139
6.2 Grafiken einbinden 141
6.3 Grafiken anpassen 141
6.3.1 Die Grafikgröße ändern 142
6.4 Dynamisch Grafiken erzeugen – der GIFBUILDER 142
6.4.1 GIFBUILDER 143
6.4.2 Ebenen 145
6.4.3 Ebenen positionieren 148
6.4.4 Boxen zeichnen 148
6.4.5 Grafischer Text 149
6.4.6 Anti- Aliasing mit -niceText 152
6.5 Weiterführende Möglichkeiten 153
6.5.1 Schatten 153
6.5.2 Relief 154
6.5.3 Den Seitentitel als Grafik ausgeben 155
6.5.4 Grafiken aus der Datenbank auslesen 156
6.6 Caching 157
6.6.1 Was gecacht wird 157
6.6.2 Den Cache leeren 158
Menüs 160
7 Menüs 161
7.1 Diese Menüarten gibt es 161
7.2 Hallo, Menüs! 162
7.3 Eigenschaften von Menüs festlegen 163
7.3.1 Zustände bestimmen 164
7.3.2 Den Startpunkt des Menüs festlegen 164
7.3.3 Menüarten bestimmen 165
7.3.4 Das Einstiegslevel bestimmen 167
7.3.5 Den ersten Menüeintrag festlegen 167
7.3.6 Anzahl von Menüeinträgen bestimmen 167
7.3.7 Menüpunkte ausschließen 168
7.4 Textmenüs 168
7.4.1 Eigenschaften von Textmenüs 168
7.4.2 Untermenüs festlegen 169
7.4.3 Stylesheets verwenden 170
7.4.4 Abstände zwischen den Menüpunkten 171
7.4.5 optionSplit – Senkrechte Striche einfügen 171
7.4.6 Menüs und Tabellen 173
7.4.7 Textmenüs und JavaScript 174
7.5 JavaScript-Menüs 174
7.5.1 Seiten aus dem Menü aufrufen 175
7.6 Grafische Menüs 176
7.6.1 Menüpunkte erzeugen 176
7.6.2 Untermenüpunkte integrieren 178
7.6.3 Linien erzeugen 178
7.6.4 Die Menübreite automatisch anpassen 180
7.6.5 Hintergrundgrafiken einfügen 181
7.6.6 Eine Alternative zum GMENU 182
7.7 GMENU_FOLDOUT 183
7.8 Layer-Menüs 185
7.8.1 Das Menü formatieren 189
7.8.2 Textmenüs in Layer-Form 191
7.9 ImageMaps 192
7.10 Spezielle Menüs 193
7.10.1 Zur nächsten Seite (browse) 193
7.10.2 Sie befinden sich hier (rootline) 194
7.10.3 Schlüsselwörter (keywords) 195
7.10.4 Aktualisierte Seiten (updated) 195
7.10.5 Directory 198
7.10.6 List 198
Frames 200
8 Frames 201
8.1 Hallo, Frames! 201
8.2 Vor- und Nachteile von Frames 202
8.3 Frames erzeugen 204
8.3.1 Reihen 205
8.3.2 Spalten 205
8.3.3 Frames verschachteln 206
8.3.4 Eigenschaften von Frames definieren 210
8.4 Iframes 213
8.4.1 Die Extension installieren 213
8.4.2 Eigenschaften von Iframes festlegen 214
Formulare 216
9 Formulare 217
9.1 Formulare anlegen 218
9.1.1 Pflichtfelder 219
9.1.2 Der Formularassistent 220
9.2 Felder gestalten 221
9.2.1 Ein vollständiges Formular 221
9.2.2 Formularelemente in Spalten anzeigen 222
9.3 Einen passwortgeschützten Bereich anlegen 224
9.4 MailformPlus 230
9.5 Die Standard-Suche 233
9.5.1 Die Suche anpassen 233
9.5.2 Die Ausgabe formatieren 237
9.6 Die Erweiterte Suche integrieren 238
9.7 Dateien hochladen 247
TypoScript und SQL 250
10 TypoScript und SQL 251
10.1 Die Datenbankstruktur 251
10.2 Datenbankinhalte dynamisch auslesen 253
10.2.1 Überprüfen, ob ein Feld leer ist 254
10.3 Die SQL- Anweisung manipulieren 254
10.3.1 Inhalte sortieren 255
10.3.2 Spalten gezielt auswählen 256
10.4 SQL- Abfragen bei der Extension-Entwicklung 258
10.4.1 Die Extension im Kickstarter anlegen 258
10.4.2 Plugin-Vorschau 260
10.4.3 Einen neuen Datensatz anlegen 261
10.4.4 SQL-Abfragen einfügen 261
Extensions 264
11 Extensions 265
11.1 Grundlagen 265
11.1.1 Extension-Kategorien 266
11.2 Der Extension Manager 266
11.2.1 Extensions installieren 269
11.3 Extensions im Einsatz 270
11.3.1 News 270
11.3.2 Kalender 274
11.3.3 Newsletter 276
11.4 Einen Chat integrieren 280
11.5 Eigene Erweiterungen entwickeln 282
11.6 Der Extension Kickstarter 282
11.6.1 Einen Extension Key anlegen 283
11.6.2 Die Kickstarter-Komponenten 284
11.6.3 Das Frontend-Plugin integrieren 286
11.6.4 Die Extension-Struktur 288
11.6.5 Funktionen des Extension Managers 289
11.6.6 TER-Account 291
11.6.7 Eine eigene Extension entwerfen 292
11.7 Praxiswissen für die Extension-Entwicklung 296
11.7.1 Programmierrichtlinien 296
11.7.2 Datenbankabstraktion 300
11.7.3 Datenbankabstraktion in der Praxis 302
11.7.4 Sicherheit 303
11.7.5 Subparts ansprechen 308
11.7.6 Marker ersetzen 308
Barrierefreiheit 312
12 Barrierefreiheit 313
12.1 Hilfsmittel in TYPO3 314
12.1.2 Accesskeys definieren 316
12.2 TYPO3-Inhaltselemente barrierefrei gestalten 318
12.2.1 Tabellen 319
12.2.2 Formulare 322
12.3 Menüs und Barrierefreiheit 323
12.3.1 Textmenüs 323
12.3.2 Grafikmenüs 324
12.4 Weitere Maßnahmen 325
Feinabstimmung 327
13 Feinabstimmung 328
13.1 TypoScript und Mehrsprachigkeit 328
13.1.1 Automatische Sprachauswahl 332
13.1.2 Menü und Mehrsprachigkeit 333
13.2 Die Website in mehreren Versionen ausgeben 334
13.2.1 PDF 334
13.2.2 Eine Druckversion anbieten 336
13.3 „Being generated“ deaktivieren 337
13.4 TYPO und Suchmaschinen 338
13.4.1 Meta-Tags einfügen 338
13.4.2 Statische Dokumente simulieren 340
13.4.3 Schutz vor E-Mail-Spam 342
13.4.4 Den Seitenheader anpassen 343
Backend-Anpassung 345
14 Backend- Anpassung 346
14.1 Page TSConfig 346
14.1.1 Backend-Module konfigurieren 346
14.1.2 Bearbeitungsformulare anpassen – TCEFORM 348
14.1.3 Systemtabellen konfigurieren – TCEMAIN 349
14.2 User TSConfig 350
14.2.1 Setup 351
14.2.2 admPanel 351
14.2.3 options 352
14.3 Praxislösungen für die Backend- Anpassung 352
14.3.1 Überschriften-Typen im Bereich Überschrift anpassen 352
14.3.2 Entfernen nicht mehr benötigter Seitentypen 353
14.3.3 Einen neuen Menüeintrag in das Backend einfügen 354
Referenz 355
15 Referenz 356
15.1 Funktionen 356
15.1.1 Datums- und Zeitfunktionen 356
15.1.2 if 356
15.1.3 imageLinkWrap 358
15.1.4 parseFunc 361
15.1.5 select 362
15.1.6 tableStyle 364
15.2 Conditions (Bedingungen) 365
15.2.1 Browser 365
15.2.2 Browser-Version 366
15.2.3 Betriebssystem 366
15.2.4 Device 367
15.2.5 Sprache 367
15.2.6 Weitere Möglichkeiten 367
15.3 Formulare 368
15.3.1 Formularfelder 368
15.4 Frames 369
15.4.1 Frame 369
15.4.2 Frameset 370
15.5 GIFBUILDER 371
15.6 Menüs 373
15.7 Objekt-Referenz 375
15.7.1 CONTENT 375
15.7.2 EDITPANEL 375
15.7.3 FILE 377
15.7.4 HRULER 377
15.7.5 IMAGE 378
15.7.6 CLEARGIF 379
15.7.7 IMAGE_RESOURCE 379
15.7.8 PAGE 379
15.7.9 PAGE und Stylesheet-Angaben 382
15.7.10 TEMPLATE 383
15.8 CONFIG 384
Index 390
Mehr eBooks bei www.ciando.com 0

4 Designvorlagen (S. 82)

Mit Designvorlagen wird normalerweise das Grundlayout für die Website festgelegt. Wie bei anderen CM-Systemen kommen auch in TYPO3 Platzhalter zum Einsatz. Sie lassen sich in Form von Markern oder Subparts in die Designvorlage einfügen, um später automatisch durch die entsprechenden Inhalte ersetzt zu werden.

4.1 Designvorlagen vs. Templates

Immer wieder gibt es Unklarheiten mit den beiden Begriffen Templates und Designvorlagen: Entweder kommt der Begriff Designvorlagen überhaupt nicht vor oder er wird mit Templates gleichgesetzt. Wie auch immer – beides ist falsch. Bei einer Designvorlage handelt es sich eigentlich um eine normale HTML-Datei. Ihre einzige Besonderheit sind Platzhalter nach dem Schema ###INHALT### bzw. ###INHALT### Das ist der Inhalt ###INHALT###. Wie die HTML-Seite letztendlich gestaltet ist, spielt keine Rolle – hier dürfen Sie auf Tabellen-Layouts ebenso wie auf modernes CSS-Design setzen. Ganz anders verhält es sich bei Templates, denn bei ihnen handelt es sich um dynamische Seitendefinitionen. Mehr zum Thema Templates erfahren Sie im nächsten Kapitel. Um mit Templates zu arbeiten, müssen zumindest Grundkenntnisse in TypoScript vorhanden sein. Zunächst soll aber das Prinzip der Designvorlagen vorgestellt werden.

4.2 Das Prinzip von Designvorlagen

Grundsätzlich wird bei Websites, die auf TYPO3 –basieren, zwischen statischen und dynamischen Elementen unterschieden.

Typische statische Elemente sind:

Tabellenstruktur für die Definition des Grundlayouts (sollte allerdings durch CSS ersetzt werden)

Grafiken, die an vielen Stellen zum Einsatz kommen (können ebenso statisch definiert sein, was sich beispielsweise bei Logos empfiehlt).

Zu den dynamischen Elementen zählen:

Textlink zur Druckversion
Textmenü Newsbereich

Was haben statische und dynamische Elemente mit der Designvorlage zu tun? Sämtliche statischen Elemente werden fest in die HTML-Datei kodiert. Alles was dynamisch sein soll, wird hingegen mit Platzhaltern gekennzeichnet. Diese Platzhalter lassen sich später ganz einfach durch den dynamischen Inhalt ersetzen.

Es gibt zwei unterschiedliche Arten von Platzhaltern: Marker und Subparts. Das Prinzip mit Platzhaltern zu arbeiten, ist übrigens keine TYPO3-Entwicklung, sondern wird auch in anderen CM-Systemen so gehandhabt. Dort existieren meistens viele Arten von Platzhaltern, so dass man schnell den Überblick verliert. TYPO3 gibt sich hier zum Glück mit bescheidenen zwei Platzhaltertypen zufrieden (die aber trotzdem allen Anforderungen gerecht werden).

Obwohl beide Platzhalterarten eine ähnliche Syntax verwenden, sind sie doch verschieden und für unterschiedliche Einsatzzwecke konzipiert. Trotzdem bestehen einige Gemeinsamkeiten, die vor allem den Bezeichner betreffen. Es ist es in TYPO3 Sitte, dass Bezeichner ausschließlich in Großbuchstaben geschrieben werden. Das macht insofern Sinn, als die Platzhalter im Quelltext schneller auffindbar sind. Außerdem wird dadurch verhindert, dass TYPO3 die Platzhalter nicht richtig zuordnen kann. Da bei Platzhaltern zwischen Groß- und Kleinschreibung unterschieden wird, ist wenigstens eine Fehlerquelle ausgemerzt, wenn man nur Großbuchstaben verwendet. Weiterhin sollten Sie sowohl bei Markern als auch bei Subparts auf Sonderzeichen und Umlaute verzichten.