Websites erstellen mit Contao 3836216515, 9783836216517

Citation preview

---

Peter Müller

Websites erstellen mit Contao

Liebe Leserin, lieber Leser, Contao, vormals TYPOlight, hat sich innerhalb kürzester Zeit vom Geheimtipp zu einem der beliebtesten CMS entwickelt. Die Gründe dafür sind vielfältig. So setzt Contao konsequent auf aktuelle Webstandards, Barrierefreiheit, Mehrsprachenfähigkeit, Personalisierbarkeit und suchmaschinenfreundliche URLs. Contao trennt konsequent zwischen Inhalt und Design mit CSS. Wer seine Website mit Contao umsetzen möchte, sollte daher auch souverän mit IDs und Klassen umgehen können. Peter Müller, vielen Lesern bekannt durch seine Einführung in CSS »Little Boxes«, stellt mit vielen Praxisbeispielen Installation, Konfiguration und Administration von Contao vor. Sein unnachahmlicher Stil garantiert Ihnen schnellen Lernerfolg und Unterhaltung auf jeder Seite. Schritt für Schritt begleitet er Sie bei der Erstellung Ihres Webauftritts. Angefangen von der Installation von Contao und einem Testsystem bis hin zur fertigen Website finden Sie alles, was Sie für einen erfolgreichen Start benötigen. Dieses Buch wurde mit großer Sorgfalt lektoriert und produziert. Sollten Sie dennoch Fehler finden oder inhaltliche Anregungen haben, scheuen Sie sich nicht, mit uns Kontakt aufzunehmen. Ihre Fragen und Änderungswünsche sind uns jederzeit willkommen. Viel Vergnügen beim Lesen! Wir freuen uns auf den Dialog mit Ihnen.

Ihr Stephan Mattescheck Lektorat Galileo Computing

[email protected] www.galileocomputing.de Galileo Press · Rheinwerkallee 4 · 53227 Bonn

Auf einen Blick TEIL I Contao kennenlernen 1

Das ist Contao .........................................................

25

2

Schnelldurchlauf: So funktioniert Contao .................

31

TEIL II Contao installieren 3

XAMPP: Der Offline-Webspace ...............................

51

4

Die Installation von Contao .....................................

71

5

Ein kurzer Rundgang im Backend ............................ 101

TEIL III Schritt für Schritt zur ersten Website 6

Die erste Website mit Contao ................................. 117

7

Webseiten gestalten: Contao und CSS ..................... 155

8

Navigationen erstellen in Contao ............................ 193

TEIL IV Inhalte erstellen und verwalten 9

Inhaltselemente für Text und Bilder ......................... 233

10 Weitere nützliche Inhaltselemente .......................... 265 11 Kontakt: Formulare erstellen mit Contao ................. 289 12 Suchfunktion: Die Beispielsite durchsuchen ............. 317 13 Die Erweiterung »Nachrichten« ............................... 335 14 Die Erweiterungen »Kalender« und »FAQ« .............. 371 15 Die Erweiterung »Newsletter« ................................. 389 16 Die Startseite gestalten ........................................... 401 TEIL V Systemverwaltung 17 Der Theme-Manager in Aktion ................................ 421 18 Die Optimierung für Suchmaschinen ....................... 437 19 Mitglieder: Im Frontend angemeldete Besucher ...... 459 20 Benutzer: Im Backend angemeldete Mitarbeiter ...... 479 21 Die Website im Alltag ............................................. 495 22 Contao für Fortgeschrittene: Tipps und Tricks .......... 507

Der Name Galileo Press geht auf den italienischen Mathematiker und Philosophen Galileo Galilei (1564–1642) zurück. Er gilt als Gründungsfigur der neuzeitlichen Wissenschaft und wurde berühmt als Verfechter des modernen, heliozentrischen Weltbilds. Legendär ist sein Ausspruch Eppur se muove (Und sie bewegt sich doch). Das Emblem von Galileo Press ist der Jupiter, umkreist von den vier Galileischen Monden. Galilei entdeckte die nach ihm benannten Monde 1610. Gerne stehen wir Ihnen mit Rat und Tat zur Seite: [email protected] bei Fragen und Anmerkungen zum Inhalt des Buches [email protected] für versandkostenfreie Bestellungen und Reklamationen [email protected] für Rezensions- und Schulungsexemplare Lektorat Stephan Mattescheck Korrektorat Friederike Daenecke Fachgutachten Leo Feyer Cover Barbara Thoben, Köln Titelbild Barbara Thoben, Köln Coverfoto Fotolia© mao-in-photo Typografie und Layout Vera Brauner Herstellung Iris Warkus Satz Typographie & Computer, Krefeld Druck und Bindung Bercker Graphischer Betrieb, Kevelaer Dieses Buch wurde gesetzt aus der Linotype Syntax Serif (9,25/13,25 pt) in FrameMaker. Gedruckt wurde es auf chlorfrei gebleichtem Offsetpapier.

Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar. ISBN

978-3-8362-1651-7

© Galileo Press, Bonn 2010 1. Auflage 2010

Das vorliegende Werk ist in all seinen Teilen urheberrechtlich geschützt. Alle Rechte vorbehalten, insbesondere das Recht der Übersetzung, des Vortrags, der Reproduktion, der Vervielfältigung auf fotomechanischem oder anderen Wegen und der Speicherung in elektronischen Medien. Ungeachtet der Sorgfalt, die auf die Erstellung von Text, Abbildungen und Programmen verwendet wurde, können weder Verlag noch Autor, Herausgeber oder Übersetzer für mögliche Fehler und deren Folgen eine juristische Verantwortung oder irgendeine Haftung übernehmen. Die in diesem Werk wiedergegebenen Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. können auch ohne besondere Kennzeichnung Marken sein und als solche den gesetzlichen Bestimmungen unterliegen.

Inhalt Geleitwort des Fachgutachters ........................................................................ Vorwort ..........................................................................................................

19 21

TEIL I Contao kennenlernen 1

Das ist Contao .......................................................................... 25 1.1

1.2 1.3 1.4

2

Contao ist ein Content-Management-System ............................... 1.1.1 Brauchen Sie ein Content-Management-System? ............. 1.1.2 Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen ..................................................................... Die Website zum Programm: www.contao.org ............................ Ein paar Highlights von Contao .................................................... Die Community im Web: »www.contao-community.de« ..............

25 25 26 27 28 30

Schnelldurchlauf: So funktioniert Contao ............................... 31 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11

Das Frontend ist die Website ....................................................... Das Backend ist die Verwaltungsabteilung ................................... Die Seitenstruktur ist das Fundament der Website ....................... Themes bestimmen das Aussehen der Site ................................... Module erzeugen den Quelltext für das Frontend ........................ Jede Seite hat ein Seitenlayout ..................................................... Seitenlayouts verbinden die Seiten mit Stylesheets ...................... Jeder Artikel gehört zu einer Seite ............................................... Ein Artikel besteht aus Inhaltselementen ..................................... Das Backend ist für Redakteure sehr übersichtlich ........................ Zusammenfassung – so tickt Contao .............................................

32 33 35 36 37 38 41 42 43 46 47

TEIL II Contao installieren 3

XAMPP: Der Offline-Webspace ............................................... 51 3.1

3.2

XAMPP ist Webspace auf Ihrem Rechner ..................................... 3.1.1 Statische Webseiten: Der Webspace als Lagerhalle .......... 3.1.2 Content-Management-System: Der Webspace als Werkstatt ........................................................................ Die Installation von XAMPP Lite (Windows) ................................ 3.2.1 XAMPP Lite installieren ..................................................

51 51 52 53 54

5

Inhalt

3.3

3.4

3.5

3.6 3.7

4

54 56 57 57 58 60 60 62 62 63 66 66 67 68 69

Die Installation von Contao ..................................................... 71 4.1 4.2 4.3

4.4

4.5 4.6 4.7 4.8

6

3.2.2 Das XAMPP Control Panel .............................................. 3.2.3 Testen, ob der Webserver funktioniert ............................ Der Sicherheitscheck von XAMPP ................................................ 3.3.1 Den Sicherheitscheck aufrufen ........................................ 3.3.2 Einen Passwortschutz für MySQL und phpMyAdmin einrichten ....................................................................... 3.3.3 Passwortschutz für das XAMPP-Verzeichnis einrichten .... 3.3.4 Die neuen Sicherheitseinstellungen testen ....................... Der Webserver: Apache serviert Webseiten ................................. 3.4.1 DocumentRoot: »htdocs«, der Ordner für die Webseiten ...................................................................... 3.4.2 Der PHP-Übersetzer: Als Modul oder als CGI .................. MySQL serviert SQL-Datenbanken ............................................... 3.5.1 MySQL verwaltet mehrere Datenbanken ......................... 3.5.2 SQL ist die Sprache zur Verwaltung von Datenbanken ..... phpMyAdmin verwaltet die Datenbanken von MySQL ................. XAMPP-Matrix – die Komponenten im Überblick ........................

Vorbereitung: Die Systemvoraussetzungen ................................... Offline: Contao auf Ihrem Rechner installieren ............................. Online: Contao im Web installieren ............................................. 4.3.1 Informationen über Webhoster im Forum ....................... 4.3.2 Webspace prüfen: Das Contao-Systemdiagnosetool ........ 4.3.3 Dateien auf den Webspace kopieren ............................... 4.3.4 Zugangsdaten für die Datenbank ..................................... 4.3.5 Die Installation im Überblick ........................................... Safe Mode Hack: Der FTP-Modus von Contao ............................. 4.4.1 »Sie benötigen wahrscheinlich den Safe Mode Hack« ...... 4.4.2 Eine Alternative zum SMH: PHP als CGI oder Fast-CGI .... 4.4.3 Online: So richten Sie den Safe Mode Hack ein ............... 4.4.4 Offline-Webspace: SMH bei einer lokalen Installation umgehen ......................................................................... Alte PHP-Version: Parse error… ................................................... Sonstige potenzielle Probleme bei der Installation ....................... Umzug: Von XAMPP auf den Online-Webspace ........................... Know-how: Dateiberechtigungen – das 1x1 zu 644 ..................... 4.8.1 Besitzer, Benutzer und Berechtigungen: 644 und 755 ..... 4.8.2 PHP und Contao: Benutzerrechte, Modul und (Fast)CGI .........................................................................

71 72 82 82 83 84 86 86 87 88 89 89 91 92 93 94 97 97 98

Inhalt

4.8.3 4.8.4

5

Was der Safe Mode Hack genau macht ........................... Sicherheitsloch: »Alles auf 777« ist keine gute Idee .........

99 99

Ein kurzer Rundgang im Backend ............................................ 101 5.1 5.2 5.3 5.4 5.5

5.6

5.7

Überblick: Das Backend ............................................................... Ganz oben: Der Infobereich ......................................................... Links: Der Navigationsbereich (Backend-Module) ........................ Rechts: Der Arbeitsbereich .......................................................... »System 폷 Einstellungen« .............................................................. 5.5.1 Der »Titel der Webseite« ................................................. 5.5.2 Das Format für Angaben von Datum und Zeit ................. Der Dateimanager: »System 폷 Dateiverwaltung« ........................... 5.6.1 Ordner erstellen mit dem Dateimanager ......................... 5.6.2 Dateien mit dem Dateimanager hochladen ..................... Erweiterungen installieren ........................................................... 5.7.1 Die Erweiterungsliste auf »contao.org« ............................ 5.7.2 Erweiterungen aus dem Backend heraus installieren ........

101 102 103 104 105 106 107 108 109 110 112 112 112

TEIL III Schritt für Schritt zur ersten Website 6

Die erste Website mit Contao ................................................. 117 6.1

6.2

6.3

6.4

6.5

»No pages found« – Die Seitenstruktur erstellen .......................... 6.1.1 Der Startpunkt für eine neue Website ............................. 6.1.2 Sprachen-Fallback für den Startpunkt aktivieren .............. 6.1.3 Die Startseite für die Beispielsite erstellen ....................... 6.1.4 Die Seitenstruktur für die Beispielsite erweitern .............. »No layout found« – Theme und Seitenlayout erstellen ................ 6.2.1 Das erste Theme erstellen ............................................... 6.2.2 Das erste Seitenlayout erstellen ....................................... 6.2.3 Ein kurzer Blick in den Quelltext ..................................... Das erste Frontend-Modul: »Navigation – Hauptnavi« ................. 6.3.1 Ein Navigationsmodul erstellen ....................................... 6.3.2 Das Navigationsmodul im Seitenlayout einbinden ........... Frontend-Module für den Kopf- und den Fußbereich ................... 6.4.1 Module für den Kopf- und den Fußbereich erstellen ....... 6.4.2 Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden .................................................... Das erste Stylesheet erstellen und zuweisen ................................. 6.5.1 Das erste Stylesheet im Backend erstellen .......................

117 118 119 121 122 124 124 126 127 128 129 130 132 132 133 134 135

7

Inhalt

6.5.2 6.5.3 6.5.4

6.6

6.7

6.8

7

135 137 139 142 142 143 144 146 147 147 149 150 152 153

Webseiten gestalten: Contao und CSS .................................... 155 7.1

7.2

7.3

7.4

7.5

7.6

8

Stylesheet bearbeiten: Einen Style für »body« erstellen .... Das Stylesheet mit dem Seitenlayout verbinden .............. Weitere Styles für Kopfbereich, Hauptspalte und Fußbereich ...................................................................... Der erste Artikel und ein Inhaltselement ...................................... 6.6.1 Der Artikelbaum: Die Übersicht über alle Artikel ............. 6.6.2 Die Einstellungen für einen Artikel .................................. 6.6.3 Inhaltselemente zu einem Artikel hinzufügen .................. 6.6.4 Den Artikel mit dem Seitenlayout verbinden ................... Templates: Das HTML für den Quelltext ...................................... 6.7.1 Es gibt verschiedene Arten von Templates ....................... 6.7.2 Das HTML der Navigation im Quelltext ........................... 6.7.3 Backend-Modul »Templates«: Templates update-sicher anpassen ......................................................................... 6.7.4 Ein kurzer Blick in das Template »nav_default.tpl« ........... Das Contao-Prinzip: Altogether now ............................................

Übersicht: Contao und CSS .......................................................... 7.1.1 Gestatten: Das CSS-Framework von Contao .................... 7.1.2 Stylesheets bearbeiten: Interner oder externer Editor? ..... Arbeiten mit internen Stylesheets ................................................ 7.2.1 Der interne CSS-Editor: CSS per HTML-Formular ............. 7.2.2 Übung: Header und Footer mit dem internen CSSEditor gestalten ............................................................... 7.2.3 Tipps für die Arbeit mit dem internen CSS-Editor ............ 7.2.4 Integration von internen Stylesheets in »Seitenlayouts« ... Interne Stylesheets: CSS-Dateien importieren .............................. 7.3.1 Das Reset-Stylesheet »basic.css« herunterladen ............... 7.3.2 Das Reset-Stylesheet »basic.css« importieren ................... 7.3.3 Das Reset-Stylesheet »basic.css« im Detail ....................... Das Suchen und Filtern von Styles in internen Stylesheets ............ 7.4.1 Styles mit bestimmten Selektoren suchen ........................ 7.4.2 Filtern nach Kategorie ..................................................... Die Erweiterung »[csseditor]« ....................................................... 7.5.1 Die Erweiterung »[csseditor]« installieren und kennenlernen .................................................................. 7.5.2 Interne Stylesheets extern bearbeiten .............................. 7.5.3 Einschränkungen bei der Arbeit mit »[csseditor]« ............. Übung: Gestaltung der Navigation per CSS ..................................

155 155 156 156 157 158 160 161 162 162 162 165 167 168 169 171 171 173 173 174

Inhalt

7.7

7.8 7.9 7.10

8

Externe Stylesheets: CSS außerhalb der Datenbank ...................... 7.7.1 Vorgehensweise: Die Arbeit mit externen Stylesheets ...... 7.7.2 Integration von externen Stylesheets in »Seitenlayouts« .. Teamwork: Interne und externe Stylesheets zusammen ................ Fazit: Jeder kann so arbeiten wie er gerne möchte ....................... Know-how: Das CSS-Framework von Contao ............................... 7.10.1 Das HTML-Grundgerüst von Contao in »fe_page.tpl« ...... 7.10.2 »$this->framework«: Die Einstellungen aus dem Seitenlayout .................................................................... 7.10.3 Stylesheets einbinden: »$this->stylesheets« und »$this->head« ................................................................. 7.10.4 Das CSS-Framework von Contao aus Benutzersicht ......... 7.10.5 Der Kern des CSS-Frameworks: »system/contao.css« ....... 7.10.6 Patches für IE6 und 7: »system/iefixes.css« ......................

176 177 181 182 183 184 184 186 188 188 190 191

Navigationen erstellen in Contao ............................................ 193 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9

Übersicht: Seiten, Module und Artikel ......................................... Die Navigationsmodule im Überblick ........................................... Die Seitenstruktur der Beispielsite erweitern ................................ Vertikale Navigation mit zwei Ebenen .......................................... Horizontale Navigation mit zwei Ebenen ...................................... Horizontale und vertikale Navigation zusammen .......................... Metanavigation: Eine »Individuelle Navigation« ........................... Sitemap: Das Inhaltsverzeichnis der Website ................................ Weitere Navigationsmodule ......................................................... 8.9.1 Quicknavigation und Quicklink ....................................... 8.9.2 Navigationspfad: Die Breadcrumb-Navigation »Sie sind hier« ............................................................................... 8.9.3 Buchnavigation: Von einer Seite zur nächsten und zurück

193 194 195 197 203 211 215 221 226 226 227 228

TEIL IV Inhalte erstellen und verwalten 9

Inhaltselemente für Text und Bilder ........................................ 233 9.1 9.2 9.3

Artikel und Inhaltselemente im HTML-Quelltext .......................... Das Inhaltselement »Überschrift«: »ce_headline« .......................... Das Inhaltselement »Text«: »ce_text« ........................................... 9.3.1 Inhaltselement Text: Die Eingabemaske .......................... 9.3.2 Der Editor TinyMCE im Überblick .................................... 9.3.3 Hyperlinks erstellen im Editor TinyMCE ...........................

233 234 237 238 238 240

9

Inhalt

9.3.4 9.3.5

9.4

9.5

9.6 9.7

Das Inhaltselement »Text« mit einem Bild erweitern ........ Das HTML für das eingefügte Bild und ein CSSBilderrahmen .................................................................. Das Inhaltselement »Bild«: »ce_image« ........................................ 9.4.1 Das Inhaltselement »Bild« im Einsatz ............................... 9.4.2 »Bild-Einstellungen«: Die Möglichkeiten der Bildanpassung ................................................................. Das Inhaltselement »Galerie«: »ce_gallery« ................................... 9.5.1 Eine Bildergalerie erstellen .............................................. 9.5.2 Die Bildergalerie im HTML .............................................. 9.5.3 Beschriftung von Galerien: »meta.txt« ............................. Das Inhaltselement »Top-Link«: «ce_toplink» ............................... Syndikation: Artikel drucken und verbreiten ................................ 9.7.1 Die Links zur Syndikation aktivieren ................................ 9.7.2 Die Links zur Syndikation per CSS gestalten .....................

243 246 247 247 250 252 252 255 256 258 261 261 262

10 Weitere nützliche Inhaltselemente ......................................... 265 10.1

10.2

10.3

10.4

10

Das Inhaltselement »Tabelle«: ce_table ........................................ 10.1.1 Der Eingabeassistent für das Inhaltselement »Tabelle« ..... 10.1.2 Importieren der Daten mit einer CSV-Datei ..................... 10.1.3 Das HTML für das Inhaltselement »Tabelle« .................... 10.1.4 Das Inhaltselement »Tabelle« per CSS gestalten ............... Das Inhaltselement »Akkordeon«: »ce_accordion« ........................ 10.2.1 Seitenlayout vorbereiten und Artikel erstellen ................. 10.2.2 Das Eingabeformular für das Inhaltselement »Akkordeon« ................................................................... 10.2.3 Zugeschaut und mitgebaut: Drei Akkordeons erstellen .... 10.2.4 Das HTML für ein Akkordeon .......................................... 10.2.5 Das CSS zur Gestaltung eines Akkordeons ....................... 10.2.6 Optional: Grafiken zur Statusanzeige ............................... Externe Videos auf Webseiten einbinden ..................................... 10.3.1 Inhaltselement »Text«: Ein Link in einer Mediabox .......... 10.3.2 Das Inhaltselement »HTML«: »ce_html« .......................... Weitere Inhaltselemente im Überblick ......................................... 10.4.1 Das Inhaltselement »Code«: »ce_code« ............................ 10.4.2 Das Inhaltselement »Aufzählung«: »ce_list« ..................... 10.4.3 Das Inhaltselement »Modul« ........................................... 10.4.4 Die »Include«-Elemente im Kurzüberblick .......................

265 265 267 269 270 272 273 274 276 277 277 279 280 280 282 284 284 286 287 287

Inhalt

11 Kontakt: Formulare erstellen mit Contao ................................ 289 11.1 11.2

11.3

11.4

Ein Kontaktformular für die Beispielsite erstellen ......................... Das Kontakformular gestalten ...................................................... 11.2.1 Das HTML für das Kontaktformular ................................. 11.2.2 Das CSS für das Kontaktformular ..................................... Formularfelder: Die Feldtypen im Formulargenerator ................... 11.3.1 Formularfelder einfügen: Die Feldtypen im Überblick ...... 11.3.2 Überschrift und Erklärung für zusätzliche Informationen ................................................................. 11.3.3 Formularfelder gruppieren: »fieldset« und »legend« ......... 11.3.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld ....... 11.3.5 Das Select-Menü: Auswahllisten per Klick ....................... 11.3.6 Das Radio-Button-Menü: Optionsfelder deluxe ............... 11.3.7 Das Checkbox-Menü: Kontrollkästchen deluxe ................ 11.3.8 »Datei-Upload«: Besucher können Dateien hochladen ..... 11.3.9 Die Sicherheitsfrage zur Spamvermeidung ....................... Sinnvolle Erweiterungen zur Arbeit mit Formularen .....................

289 300 300 302 304 304 305 306 306 307 309 312 313 314 316

12 Suchfunktion: Die Beispielsite durchsuchen ........................... 317 12.1 12.2 12.3

Teil 1: Eine Suchseite erstellen ..................................................... 318 Teil 2: Das Suchformular erstellen und einbinden ......................... 326 Die Syntax der Suchfunktion im Überblick ................................... 334

13 Die Erweiterung »Nachrichten« ............................................... 335 13.1 13.2

13.3

Übersicht: Die Zutaten für das Nachrichtensystem ....................... Das Backend-Modul »Nachrichten«: Beiträge erstellen ................. 13.2.1 »Newsarchiv«: Ein Nachrichtenarchiv erstellen ................ 13.2.2 Nachrichtenbeiträge schreiben ........................................ Beiträge auf den Webseiten ausgeben ......................................... 13.3.1 Eine neue Seite zur Anzeige eines Beitrags (Einzelansicht) ................................................................. 13.3.2 Das Modul »Nachrichten – Teaser anzeigen [Nachrichtenarchiv]« ....................................................... 13.3.3 Das Modul »Beitrag anzeigen [Nachrichtenleser]« ........... 13.3.4 Einbinden des Moduls »Nachrichten – Teaser anzeigen« .. 13.3.5 Einbinden des Moduls »Nachrichten – Beitrag anzeigen« ........................................................................

336 336 337 338 341 341 343 344 345 346

11

Inhalt

13.4

13.5 13.6 13.7

13.8

13.9

HTML und CSS: Teaser und Beiträge gestalten ............................. 13.4.1 Das HTML des Moduls »Nachrichten – Teaser anzeigen« ........................................................................ 13.4.2 Das CSS für das Modul »Nachrichten – Teaser anzeigen« ........................................................................ 13.4.3 Das HTML des Moduls »Nachrichten – Beitrag anzeigen« ........................................................................ 13.4.4 Das CSS für das Modul »Nachrichten – Beitrag anzeigen« ........................................................................ Bilder zu Teasern und Beiträgen hinzufügen ................................. Einen Feed zum Abonnieren der Beiträge erstellen ...................... Die Kommentarfunktion .............................................................. 13.7.1 Die Kommentarfunktion aktivieren .................................. 13.7.2 Kommentare schreiben und überprüfen .......................... 13.7.3 Kommentare und Fehlermeldungen gestalten ................. 13.7.4 Kommentare im Backend verwalten ................................ Navigation: Beiträge monatsweise auswählen .............................. 13.8.1 Das Modul »Monat auswählen [NachrichtenarchivMenü]« ........................................................................... 13.8.2 Das Modul »Nachrichten – Monat auswählen« einbinden ........................................................................ 13.8.3 Das HTML des Moduls »Nachrichten – Monat auswählen« ..................................................................... 13.8.4 Das CSS für das Modul »Nachrichten – Monat auswählen« ..................................................................... Übersicht: Nachrichten, Modultypen und Templates .................... 13.9.1 Die Modultypen und die Modultemplates »mod_news*.tpl« ............................................................. 13.9.2 Die vier Subtemplates »news_*.tpl« .................................

348 348 350 351 352 353 356 358 358 359 360 362 363 364 364 365 366 368 368 369

14 Die Erweiterungen »Kalender« und »FAQ« ............................. 371 14.1 14.2

14.3

12

Die Erweiterung »Kalender«: Termine verwalten .......................... 14.1.1 Die Erweiterung »Kalender« in der Übersicht ................... Einen Kalender gestalten ............................................................. 14.2.1 Das HTML vom Frontend-Modul »Kalender« ................... 14.2.2 Das CSS zum Gestalten eines Kalenders ........................... 14.2.3 HTML und CSS zur Gestaltung der Einzelansicht .............. Häufig gestellte Fragen: Die FAQ-Erweiterung ............................. 14.3.1 Die Kurzanleitung für die FAQ-Erweiterung .................... 14.3.2 Die FAQ-Erweiterung gestalten .......................................

371 372 377 377 379 383 384 384 386

Inhalt

15 Die Erweiterung »Newsletter« ................................................. 389 15.1

15.2

15.3

Das Backend-Modul »Newsletter« ............................................... 15.1.1 Einen Verteiler erstellen .................................................. 15.1.2 Abonennten verwalten: Die Empfänger des Newsletters ..................................................................... 15.1.3 Einen Newsletter erstellen ............................................... 15.1.4 Einen Newsletter versenden ............................................ Newsletter im Frontend anzeigen ................................................ 15.2.1 Die Kurzanleitung zur Darstellung der Newsletter auf der Site ........................................................................... 15.2.2 Das HTML der Frontend-Module zur Newsletterdarstellung ..................................................... Newsletter im Frontend abonnieren und kündigen ...................... 15.3.1 Die Kurzanleitung zum Abonnieren und Kündigen .......... 15.3.2 Das HTML der Frontend-Module »Abonnieren« und »Kündigen« .....................................................................

390 390 391 392 393 395 396 396 397 398 399

16 Die Startseite gestalten ........................................................... 401 16.1 16.2

16.3 16.4

16.5

16.6

Ein neues Layout für die Startseite ............................................... Inhalt für die Hauptspalte: Newsbeiträge und Termine ................. 16.2.1 Die Frontend-Module erstellen ....................................... 16.2.2 Die Frontend-Module auf der Startseite einbinden .......... 16.2.3 Newsbeiträge und Termine gestalten .............................. Artikel mit Teaser auf der Startseite ............................................. Sidebar erstellen: Lesetipps und Zufallsbild .................................. 16.4.1 Lesetipps mit einem Quicklink-Modul ............................. 16.4.2 Ein zufällig ausgewähltes Bild .......................................... 16.4.3 Die Sidebar gestalten ...................................................... Der Minikalender in der Sidebar .................................................. 16.5.1 Eine neue Seite mit dem Modul »Eventliste« erstellen ..... 16.5.2 Ein Modul für den Minikalender erstellen und einbinden ........................................................................ 16.5.3 Den Minikalender gestalten ............................................ Newsletter abonnieren in der Sidebar ..........................................

402 403 404 404 406 408 410 410 411 411 413 413 414 414 416

13

Inhalt

TEIL V Systemverwaltung 17 Der Theme-Manager in Aktion ................................................ 421 17.1

17.2 17.3 17.4

17.5

17.6

Ein Theme bestimmt das Aussehen der Website .......................... 17.1.1 Der Theme-Manager verwaltet bekannte Komponenten ................................................................. 17.1.2 »Blaues Theme« von der Beispielsite exportieren ............. 17.1.3 All-in-one: Das Innenleben einer CTO-Datei ................... 17.1.4 Was nicht in einem Theme enthalten ist .......................... Das »Cover Theme«: Die Beispielsite im neuen Look .................... Über die Anpassung von Themes ................................................. Sonderfall: In Artikeln eingebundene Module .............................. 17.4.1 Im Seitenlayout eingebundene Module sind unproblematisch ............................................................. 17.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt .............................................................................. 17.4.3 Was mit in Artikeln eingebundenen Modulen schiefgehen kann ......................................................................... 17.4.4 Reparatur: Anpassung von in Artikeln eingebundenen Modulen ......................................................................... Sicherheitshinweise für Contao-Themes ....................................... 17.5.1 Das potenzielle Problem ................................................. 17.5.2 Vertrauenswürdige Quellen ............................................. 17.5.3 Ein Theme prüfen ............................................................ 17.5.4 Angriff von innen ............................................................ Fazit: Themes sind klasse .............................................................

421 421 422 423 424 425 428 430 430 431 432 433 434 435 435 435 435 436

18 Die Optimierung für Suchmaschinen ....................................... 437 18.1

18.2 18.3

14

Lesbare Adressen: URLs umschreiben .......................................... 18.1.1 Content-Management-Systeme und URLs ....................... 18.1.2 Die drei URL-Einstellungen von Contao ........................... 18.1.3 Drei Voraussetzungen zum Umschreiben der URLs .......... 18.1.4 Contao im Unterordner: Die »RewriteBase« in der ».htaccess« ...................................................................... 18.1.5 Die Rewrite-Regel zum URL-Umschreiben in der ».htaccess« ...................................................................... 18.1.6 So wird’s gemacht: URLs umschreiben in der Praxis ......... Flache oder hierarchische URLs? .................................................. Die Optimierung von Seiten ........................................................ 18.3.1 Seitenname und Seitenalias im Backend von Contao .......

438 438 439 440 441 442 442 444 445 445

Inhalt

18.4

18.5

18.3.2 Der Titel der Seite: » ... « ........................... 18.3.3 Die Beschreibung der Seite: »« ..................................................... Abfangjäger: 404 und 403 ........................................................... 18.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit ................................................................... 18.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein? ............................................................................... 18.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie .................................................................................. Eine XML-Sitemap für Google & Co .............................................

447 450 451 451 453 455 456

19 Mitglieder: Im Frontend angemeldete Besucher ..................... 459 19.1 19.2

19.3

19.4

19.5 19.6

Mitglieder und Benutzer: Der Unterschied ................................... Mitgliedergruppen und Mitglieder einrichten .............................. 19.2.1 Mitgliedergruppen einrichten .......................................... 19.2.2 Mitglieder einrichten ...................................................... Seiten und Module für die An- und Abmeldung erstellen ............. 19.3.1 Seiten zur An- und Abmeldung erstellen ......................... 19.3.2 Die Module zur Anmeldung im Überblick ....................... 19.3.3 Ein Modul für das Anmeldeformular: »[LoginFormular]« ...................................................................... 19.3.4 Ein Modul zur Abmeldung: »[Automatischer Logout]« ..... 19.3.5 Modul für den Link zur Anmeldeseite: »[Eigener HTML-Code]« ................................................................. 19.3.6 Anmeldenamen und Abmeldelink: »[Eigener HTMLCode]« ............................................................................ Die erstellten Module einbinden und gestalten ............................ 19.4.1 Die Module zum An- und Abmelden in Artikeln einbinden ........................................................................ 19.4.2 Module für den Fußbereich im Seitenlayout einbinden .... 19.4.3 An- und Abmeldung testen ............................................. 19.4.4 Das Anmeldeformular gestalten ...................................... Einen geschützten Downloadbereich einrichten ........................... Weitere Möglichkeiten zur Mitgliederverwaltung ........................ 19.6.1 Das Modul »Passwort vergessen« .................................... 19.6.2 Das Modul »Persönliche Daten« ...................................... 19.6.3 Die automatische Registrierung für Mitglieder .................

459 461 461 461 462 462 463 464 465 465 466 466 466 467 468 470 471 475 475 477 477

15

Inhalt

20 Benutzer: Im Backend angemeldete Mitarbeiter .................... 479 20.1 20.2 20.3

20.4

20.5

Benutzerverwaltung: Die Übersicht .............................................. Die Benutzergruppe »Redakteure – Nachrichten« ......................... Die Benutzerin »Helen Lewis« einrichten ...................................... 20.3.1 Testen der Einstellungen: Ein Klick, und Sie sind Helen Lewis .............................................................................. Die Benutzergruppe »Redakteure – Artikel« ................................. 20.4.1 Benutzergruppe »Redakteure – Artikel« einrichten .......... 20.4.2 Benutzer zuweisen und testen ......................................... Zugriffsrechte für Seiten und Artikel setzen .................................. 20.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf .................................................................... 20.5.2 Zugriffsrechte für die freigegebenen Seiten setzen ...........

479 480 485 487 489 489 490 491 491 492

21 Die Website im Alltag .............................................................. 495 21.1 21.2 21.3

21.4 21.5 21.6

Das System-Log protokolliert Aktivitäten von Contao .................. Webstatistiken mit Google Analytics ............................................ Den Cache in Contao kontrollieren .............................................. 21.3.1 Der Cache-Modus in »System 폷 Einstellungen« ................. 21.3.2 Cache-Einstellungen: Die Cachezeit für die Seiten definieren ....................................................................... 21.3.3 Systemwartung: Daten bereinigen ................................... 21.3.4 Systemwartung: Suchindex neu aufbauen ........................ 21.3.5 Daten in den Benutzereinstellungen bereinigen ............... Backups erstellen ......................................................................... Der Live Update Service: Das automatische Update ..................... Das manuelle Update per FTP ......................................................

495 496 497 497 498 499 500 501 501 503 504

22 Contao für Fortgeschrittene: Tipps und Tricks ........................ 507 22.1

22.2

16

Wichtige Konfigurationsdateien von Contao ................................ 22.1.1 Die Systemkonfiguration: localconfig.php ........................ 22.1.2 Data Container Arrays: Die »dcaconfig.php« .................... 22.1.3 Sprachkonfiguration: Die »langconfig.php« ...................... Tipps und Tricks zum TinyMCE .................................................... 22.2.1 Ein Stylesheet für den TinyMCE: »tl_files/tinymce.css« ..... 22.2.2 Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen .......................................................................... 22.2.3 Die Symbolleisten des TinyMCE anpassen .......................

507 507 508 509 510 510 511 512

Inhalt

22.3

22.4

22.5

22.6

22.2.4 Konfiguration des TinyMCE pro Benutzergruppe anpassen ......................................................................... Anfahrtskizze mit Google Maps .................................................... 22.3.1 Die Konfiguration des Frontend-Moduls ......................... 22.3.2 Die Ermittlung der Koordinaten ...................................... Layouts für Fortgeschrittene ........................................................ 22.4.1 Eigene Layoutbereiche erstellen und aktivieren ............... 22.4.2 Eigene Seitentemplates erstellen ..................................... 22.4.3 Contao mit anderen CSS-Frameworks nutzen .................. Mehrere Websites in einer Contao-Installation ............................ 22.5.1 Ein Startpunkt für jede Website ....................................... 22.5.2 Mehrsprachige Website mit automatischer Sprachwahl ..................................................................... 22.5.3 Mehrere Domains in einer Contao-Installation ................ 22.5.4 Zusammenfassung: Mehrere Websites in mehreren Sprachen ......................................................................... Die Insert-Tags im Überblick ........................................................ 22.6.1 Insert-Tags für Link-Elemente .......................................... 22.6.2 Benutzereigenschaften: Insert-Tags für FrontendBenutzer ......................................................................... 22.6.3 Umgebungsvariablen ....................................................... 22.6.4 Include-Elemente ............................................................ 22.6.5 Verschiedenes: Datum, E-Mail und Sprachen ..................

515 515 516 517 518 518 519 519 520 520 521 522 522 523 524 525 526 527 527

Index ............................................................................................................ 529

17

Geleitwort des Fachgutachters

Peter Müller hat sich mit seiner Buchreihe »Little Boxes« schnell einen Namen in der Webdesign-Szene gemacht und war natürlich auch mir ein Begriff, als ich gefragt wurde, ob ich das Fachgutachten zu seinem Contao-Buch übernehmen möchte. Persönlich kennengelernt hatte ich ihn bis dahin noch nicht, sehr wohl war mir aber die fast ein wenig ehrfürchtige Art und Weise aufgefallen, in der die Leute über ihn sprachen. »Ja, Peter Müller. Little Boxes. Super Bücher. Erfolgsautor.« Wie würde wohl ein Buch zu einem CMS von ihm aussehen? Zum damaligen Zeitpunkt war ihm das wahrscheinlich selbst noch nicht im Detail klar. Allerdings hatte er schon vor über zehn Jahren, als Dreamweaver & Co. noch das Maß der Dinge waren, Bücher zum Thema »Webpublishing« geschrieben und wusste aus der langjährigen Erfahrung heraus, wie man ein solches Werk strukturiert und die Inhalte dem Leser verständlich vermittelt. Inzwischen ist das Manuskript fertig, und ich kann sagen, dass Peter der Brückenschlag zwischen der Veranschaulichung von Contao und »seinem« Thema CSS optimal gelungen ist. Vor allem die ganzheitliche Betrachtung der Frage, wie man Stylesheets in Contao am besten einbindet und bearbeitet, dürfte für viele Anwender ein interessantes Kapitel sein. Denn nicht jeder kommt mit dem in Contao gewählten Standardweg auf Anhieb zurecht. Das wurde auch auf dem Contao-Usertreffen im Mai 2010 deutlich, bei dem Peter zu unser aller Freude einen wohl unvergesslichen Gastvortrag zu diesem Thema gehalten hat. Für mich und die meisten anderen Teilnehmer war das der erste persönliche Kontakt mit ihm, und schnell stand fest, dass Peter nicht nur fachlich überzeugend ist, sondern auch Qualitäten als Entertainer hat – ein echtes Original eben. Seine humorvolle Art findet sich natürlich auch in seinen Büchern und Video-Trainings wieder. Eine gehörige Portion Humor und Gelassenheit war dann wohl auch notwendig, als die Namensänderung von TYPOlight in Contao verkündet wurde. Zu diesem Zeitpunkt hatte Peter die ersten Kapitel des Buches bereits fertig, und ihm wurde bewusst, dass er sie nun überarbeiten musste. Eine unbezahlte Mehrarbeit, die leider auch für alle anderen Autoren angefallen ist, die inzwischen Contao-Bücher schrieben. Mittlerweile haben sich aber alle Beteiligten von dem »Schock« erholt und sind mit der Entscheidung und dem neuen Namen zufrieden. Denn Contao ist weder ein »CMS für Einsteiger« noch eine »abgespeckte Version« irgendwel-

19

Geleitwort des Fachgutachters

cher anderer Blog- oder CMSysteme, wie das »light« im alten Namen vermehrt interpretiert wurde. Das vorliegende Buch »Websites erstellen mit Contao« ist ein praxisorientierter Leitfaden für Anwender und Administratoren, der Schritt für Schritt die Erstellung einer Website mit Contao beschreibt und dabei alle wichtigen Elemente und Vorgehensweisen erklärt. Es versteht sich nicht als vollständige Systemreferenz, sondern zeigt anhand eines konkreten Beispiels, welche Lösungen Contao für die gängigen Problemstellungen beim Bau von Webseiten bietet. Dabei weist Peter an vielen Stellen auch auf entsprechende Drittanbieter-Extensions hin, mit denen sich die Core-Funktionen sinnvoll ergänzen oder auf eine alternative Art und Weise nutzen lassen. Denn eines der schönsten Features von Contao ist seine Flexibilität, die den Anwender fast nie auf nur einen Lösungsweg beschränkt. Ich wünsche allen Lesern viel Spaß mit diesem Buch und genauso viel Freude beim Arbeiten mit Contao wie Peter Müller. Leo Feyer Core-Entwickler des Content-Management-Sytems Contao München

20

Vorwort

Das erste Jahrzehnt dieses Jahrtausends habe ich wie so viele Webworker mit der Suche nach einem geeigneten Content-Management-System (CMS) verbracht, bis ich im Jahre 2008 Contao kennenlernte, das damals noch TYPOlight hieß. Nach einigen kleineren Sites habe ich im Sommer 2009 die Online-Version der CSSEinführung »Little Boxes« damit erstellt, und das erste Mal fand ich ein CMS nach einem Projekt besser als vorher. Anfang 2010 fragte Galileo Computing dann, ob ich Lust hätte, ein Buch zu Contao zu schreiben. Hatte ich, und so ist in den letzten Monaten dieses Buch entstanden, das Ihnen genau eine Sache näherbringen möchte, nämlich dass das Websites erstellen mit Contao Spaß macht und sehr effektiv ist. Für wen ist dieses Buch? Werfen Sie einen Blick auf die folgende Skala, und überlegen Sie kurz, wo Sie sich einordnen würden: Websurfer – Webbastler – Webdesigner – Webmaster – Webentwickler Okay? Weiter geht’s. Websurfer nutzen das Web. Sie kennen vielleicht Firefox und andere moderne Browser, beherrschen aber weder HTML noch CSS. Websurfer können nach einer kurzen Einführung die Inhalte einer Contao-Site verwalten, werden bei der Erstellung einer eigenen Website mit Contao aber wahrscheinlich mehr Hilfe benötigen, als dieses Buch geben kann. Webbastler, Webdesigner und Webmaster haben schon Webseiten erstellt, sei es als Hobby oder beruflich. Sie beherrschen mehr oder weniger HTML und CSS, kennen Add-Ons wie Firebug und haben zumindest Grundwissen zu Themen wie FTP. Sie können mit Contao, diesem Buch und der Community eigene Websites erstellen, auch wenn sie bislang wenig Erfahrung mit CMSystemen haben. Dieses Buch ist für Sie geschrieben. Webentwickler sprechen JavaScript und PHP und sind meist auch mit Datenbankentwicklung und Serververwaltung vertraut. Entwickler können mit Contao fast alles machen und die Funktionalität beliebig erweitern. Sie bekommen in diesem Buch eine gute Einführung in das CMS, werden sich aber einen Knopf zum

21

Vorwort

schnellen Vorlauf und mehr über Programmierung wünschen. Der schnelle Vorlauf ist drin, die Programmierung nicht. Die DVD im Buch Auf der DVD finden Sie neben einigen Programmen wie Contao, XAMPP und Editoren auch Links, Beispieldateien und Frontend-Templates. Links. Alle im Buch abgedruckten Webadressen sind als Verknüpfungen im Ordner buch_links gespeichert. Wenn Sie den Ordner beim Lesen im Hintergrund geöffnet halten, brauchen Sie die Adressen nicht abzutippen. Beispieldateien. Im Ordner beispieldateien finden Sie nach Kapiteln sortiert alle Dateien, die Sie zur Erstellung der Beispielsite benötigen. Frontend-Templates. Ab Kapitel 6 gibt es im Ordner beispieldateien für jedes Kapitel ein Frontend-Template, sodass Sie buchstäblich in jedem Kapitel einsteigen können. Das ist der schnelle Vorlauf. Eine genaue Anleitung finden Sie auf der DVD im Ordner beispieldateien. Video-Lektionen. Hier finden Sie weiterführende Lektionen aus dem Video-Training von Michael Herzog.

Vielen Dank An Erika Schiener und Dörte Neumann, die als Testleserinnen die Entstehung des Manuskriptes von Anfang bis Ende begleitet und mich mit zahlreichen Fragen, Vorschlägen und Kommentaren versorgt haben. Vielen, vielen Dank für Eure Energie, Mühe und Zeit. An Leo Feyer für die Entwicklung von Contao, das Kontrollieren des Buches als Fachgutachter und für die Anregungen, die daraus entstanden sind. An meinen Chef Dr. Manfred Fornfeist von der PROCON GmbH Seminare und Software, dessen Zeitspende den Schreibstress milderte. An Stephan Mattescheck für die Idee zu diesem Buch. Last but not least vielen Dank an Sie als Leser. Ohne Sie würde es keinen Spaß machen, und Sie lesen sogar das Vorwort. Wow. Ich wünsche Ihnen viel Spaß und Erfolg mit den kommenden Seiten. Take it easy, but take it. Die Website zum Buch Aktuelle Informationen zum Buch finden Sie auf der Website: http://www.websites-erstellen-mit-contao.de Made with Contao.

22

TEIL I Contao kennenlernen

In diesem Kapitel stelle ich Ihnen Contao kurz vor: Was sind die Gründe für ein CMS? Welche Highlights bietet Contao? Was sind die wichtigsten Ressourcen im Web?

1

Das ist Contao

Contao. Klingt gut, ist einfach zu behalten und hat auch noch eine Bedeutung: 왘

con sind die ersten Buchstaben von Content.

왘

ta.o kommt aus dem Vietnamesischen und bedeutet bilden, erzeugen, gestalten.

Content erzeugen. Kein schlechter Name für ein Programm, mit dem Content erzeugt, gestaltet und verwaltet wird.

1.1

Contao ist ein Content-Management-System

Content-Management-System (kurz CMS) ist der gängige Begriff für ein Programm zum Verwalten von Inhalten auf Websites. Ein CMS wie Contao ist eine Software, ein Werkzeug, ein Tool, mit dem man Websites erstellen und pflegen kann. Contao ist ein webbasiertes CMS, denn die Bedienung erfolgt über das Web und mithilfe eines Webbrowsers.

1.1.1

Brauchen Sie ein Content-Management-System?

Webseiten wurden früher manuell erstellt, auf den Webspace kopiert und dort vom Webserver unverändert ausgeliefert. Manuell erstellte, statische Webseiten sind sehr aufwendig in der Erstellung und der Pflege und sind deshalb immer seltener anzutreffen. Wer Websites aber bisher manuell erstellt hat, muss für die Einarbeitung in ein CMS je nach Vorwissen mehr oder weniger Zeit einplanen und bei Workflow und Gewohnheiten in vielen Punkten völlig umdenken. Die Frage ist bei einem Projekt daher häufig, ob sich der Einsatz eines CMS überhaupt lohnt. Folgende Kriterien können bei dieser Entscheidung hilfreich sein: 왘

Regelmäßige Aktualisierung des Inhalts Wenn Texte und Grafiken regelmäßig von Personen geändert werden müssen, die selbst keine Webseiten bauen, lohnt sich ein CMS auch bei einer kleinen Site.

25

1

Das ist Contao

왘

Größe der Website Wo genau die Grenze zu »größer« liegt, ist schwer zu sagen, aber bei größeren Sites ohne CMS wird zum Beispiel eine nachträgliche Änderung an der Navigation sehr aufwendig. Bei mehr als ein paar einzelnen Seiten lohnt sich ein CMS meistens, auch wenn die Inhalte sich nicht oft ändern.

왘

Anzahl der Mitarbeiter Wenn bei der Inhaltspflege mehr als zwei bis drei Leute beteiligt sind, lohnt sich ein CMS, denn sonst kommt es beim Hochladen des Inhalts früher oder später zu Katastrophen. Idealerweise hat das CMS eine gute Benutzerverwaltung und eine detaillierte Rechteverwaltung, damit jeder nur das sieht, was er sehen soll.

왘

Ortsunabhängige Pflege des Inhalts Ein webbasiertes CMS läuft in der Regel auf dem Webspace und wird per Browser bedient. So lassen sich Inhalte unabhängig vom Aufenthaltsort pflegen. Einzige Voraussetzungen sind ein Internetanschluss und ein Browser.

Diese Kriterien geben Ihnen einen ersten Anhaltspunkt, ob ein CMS sich lohnen könnte. Der Übergang von »Nein« über »Vielleicht« bis zu »Ja, sicher« ist fließend, aber wenn mehrere Mitarbeiter an verschiedenen Orten die Inhalte einer eher großen Site aktualisieren sollen, ist die Lage ziemlich eindeutig. Für Semiprofis und Agenturen beschleunigt ein CMS schlicht und einfach die Erstellung von Prototypen, Klickmodellen und ganzen Sites.

1.1.2

Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen

Contao ist ein schlankes, aber leistungsfähiges und einfach erweiterbares Content-Management-System, das relativ leicht zu lernen ist und sich für kleine, mittlere und auch ziemlich große Websites eignet. Bei der Erstellung und der anschließenden Verwaltung einer Website müssen Sie sich über drei Bereiche Gedanken machen: Inhalte, Gestaltung und Funktionen. Contao unterstützt Sie in allen drei Bereichen: 왘

Inhalt Content ist der Grund, warum Besucher auf eine Website kommen. Contao vereinfacht die Verwaltung der Inhalte mit einer übersichtlichen Baumstruktur, dem genialen Konzept der Inhaltselemente und nützlichen Erweiterungen, z. B. für Nachrichten oder Termine.

왘

Gestaltung Layout. Design. Das Aussehen einer Website. Contao unterstützt Sie beim Layouten mit einem integrierten CSS-Framework und dem Theme Manager, mit dem Sie fertige Layouts importieren können.

26

Die Website zum Programm: www.contao.org

왘

Funktionen sind die interaktiven Bestandteile einer Website: Suchfunktion, Kontaktformular, Kommentarfunktion und vieles mehr. Contao bietet zahlreiche vorgefertigte Module, die Sie nur noch konfigurieren und einbinden müssen.

Contao ist also nicht nur ein hervorragendes Content-Management-System, sondern unterstützt Sie bei der Erstellung und Verwaltung der gesamten Website. Klingt gut? Ist gut. Los geht’s.

1.2

Die Website zum Programm: www.contao.org

Contao ist eine Erfindung des Programmierers Leo Feyer aus München und ein noch recht junges System.

Abbildung 1.1 »www.contao.org« – die zentrale Anlaufstelle für Contao

Die erste Version erschien vor wenigen Jahren, am 28. Februar 2006, unter dem Namen TYPOlight. Der Grund für die im Juni 2010 erfolgte Umbenennung waren zwei chronische Missverständnisse, die immer mehr zu einem Ärgernis wurden: 왘

TYPOlight war keine abgespeckte Version von TYPO3.

왘

Das light stand nicht für einen geringen Funktionsumfang.

27

1.2

1

Das ist Contao

Unter dem neuen Namen Contao wächst und gedeiht das Projekt und gewinnt nicht zuletzt dank der guten Pflege des engagierten Core-Teams eine immer größere Fangemeinde. Erste Anlaufstelle für Contao im Web ist: 왘

http://www.contao.org/

Auf dieser mehrsprachigen Website können Sie alles rund um Contao Entdecken, Herunterladen, Verstehen, Erweitern und Nachfragen:

1.3

Ein paar Highlights von Contao

In diesem Abschnitt möchte ich Ihnen zur Einführung ein paar Highlights von Contao zeigen, auch wenn diese nur einen unzureichenden Einblick in den Charme des Systems geben. Was Contao bei seiner stetig wachsenden Fangemeinde so beliebt macht, ist die Art und Weise, wie es Ihnen im Alltag bei der Erstellung und Pflege einer Website zur Hand geht, und das lässt sich nicht auf eine Liste besonderer Features reduzieren. Trotzdem folgen hier ein paar ausgewählte Highlights: 왘

Contao ist ein seitenbasiertes Content-Management-System. Anders als bei Blogsystemen wie WordPress, kategoriebasierten Systemen wie Joomla oder nodebasierten Programmen wie Drupal ist Contao ein seitenbasiertes CMS. Der Kern einer Contao-Installation ist eine hierarchisch aufgebaute Seitenstruktur. In diesem Seitenbaum können Sie Seiten mit wenigen Klicks verschieben, kopieren, bearbeiten, verstecken, mit einem Passwort schützen, zeitgesteuert veröffentlichen und vieles mehr.

왘

Komfortable Editierfunktionen Es macht richtiggehend Spaß, mit Contao Inhalte zu verwalten. Sie können Inhaltselemente, Artikel und Seiten via Zwischenablage kopieren und verschieben, mehrere Datensätze auf einmal bearbeiten (genial, wenn es man es einmal entdeckt hat) und ältere Versionen mit einem Klick wiederherstellen. Alles geht locker von der Hand.

Auch nicht webaffine Redakteure können dank der leicht zu verstehenden Inhaltselemente gut aussehende Bildergalerien, Tabellen oder andere Inhaltstypen erstellen. Und zum Schreiben von Texten gibt es mit dem TinyMCE einen hervorragend integrierten WYSIWYG-Editor, dem man sogar Vorlagen für komplexe HTML-Strukturen mit auf den Weg geben kann. 왘

28

Barrierefrei in Front- und Backend Contao erzeugt nicht irgendwelche seltsamen unmotivierten HTML-Strukturen oder Layout-Tabellen und ermöglicht so die Erstellung einer barrierefreien

Ein paar Highlights von Contao

Website. Der Webdesigner hat mithilfe von Templates die volle Kontrolle über den erzeugten Quelltext und kann somit eine barrierefreie Website erstellen. Aber auch das Backend ist barrierefrei. Der geschickte Einsatz von Technologien wie Ajax sorgt im Backend für hohen Bedienkomfort, aber auch ohne JavaScript lässt sich das Backend problemlos bedienen. 왘

Schlanker Kern, viele Erweiterungen Wichtige Module wie Nachrichten, Kalender (jeweils mit RSS-Feeds) und Newsletter sind in den Kern von Contao integriert und stehen sofort nach der Installation zur Verfügung.

Zusätzlich gibt es im zentralen Erweiterungskatalog Hunderte von Erweiterungen, die die Funktionalität des Kerns beliebig erweitern und sich komfortabel aus dem Backend heraus installieren lassen. 왘

Ein integriertes CSS-Framework – oder doch lieber eigene Styles? Contao hat ein gut durchdachtes, integriertes CSS-Framework, mit dem Sie sehr einfach statische oder flexible mehrspaltige Seitenlayouts erstellen können. Sie können aber auch mit komplett eigenen Styles oder anderen CSS-Frameworks arbeiten.

왘

Mit Themes blitzschnell das Aussehen ändern Ein Theme bestimmt das Aussehen einer Website und kann mit wenigen Klicks verändert werden. Der Theme-Installer von Contao perfektioniert die Trennung von Inhalt und Gestaltung. Ohne dass Sie den Inhalt verändern, bekommt eine Website im Nu ein neues Kleid.

왘

Detaillierte Rechte- und Benutzerverwaltung Für Websites, an denen mehrere Personen arbeiten, wird die umfangreiche Benutzerverwaltung von Contao wichtig. Geschützte Bereiche mit KundenLogin sind ebenso leicht zu realisieren wie ein schlankes Backend für Redakteure. Jeder sieht nur das, was er sehen soll, bis hinunter zu einzelnen Formularfeldern in Eingabemasken.

왘

Einfaches Live Update Nach der Site ist vor der Site. Um aktuelle Installationen auf dem Laufenden zu halten, kann Contao entweder manuell oder über ein bequemes Live Update aktualisiert werden. Dieser Service ist zwar nicht kostenlos, aber so günstig, dass er sich wirklich für fast alle Sites lohnt.

왘

Mehrsprachigkeit und Multi-Domain Man kann mit einer Contao-Installation sowohl mehrere Websites betreiben als auch eine Website in mehreren Sprachen. Oder mehrere Websites in mehreren Sprachen.

29

1.3

1

Das ist Contao

1.4

Die Community im Web: »www.contao-community.de«

Die Contao-Community ist eigentlich ein Highlight für sich. Sie hat sich in den letzten Jahren den Ruf einer sehr freundlichen Gemeinschaft erworben, was sich auch im Umgangston im Forum widerspiegelt, der im Allgemeinen sehr angenehm ist. Im Web finden Sie die deutschsprachige Contao-Community unter folgender URL: http://www.contao-community.de/

왘

Abbildung 1.2 »contao-community.de« – die deutschsprachige Community

Im Forum gibt es übrigens auch einen Bereich Was kann Contao?, in dem Sie vor einer Installation konkret nachfragen können, ob Contao für die von Ihnen geplante Site geeignet ist. Lieber auf Englisch? Contao kommt zwar aus deutschen Landen frisch auf den Tisch, ist aber auch in vielen anderen Sprachen erhältlich. Eine englischsprachige Community finden Sie unter folgender URL: 왘

http://www.contao-community.org/

Weitere Sprachen finden Sie auf http://www.contao.org/netzwerk.html.

30

In diesem Kapitel sehen Sie anhand der Online-Demo, wie Contao tickt. Begriffe wie Frontend, Backend, Seitenstruktur, Themes, Module, Seitenlayouts, Artikel und Inhaltselemente werden kurz erklärt und in Aktion gezeigt.

2

Schnelldurchlauf: So funktioniert Contao

Anhand der Online-Demo Music Academy möchte ich Ihnen in diesem Kapitel einen schnellen Überblick geben, damit Sie gleich zu Anfang eine Vorstellung davon bekommen, wie Contao tickt: 왘

CMS-Einsteiger werden vielleicht nicht gleich jedes Detail verstehen und richtig einordnen können, lernen hier aber die wichtigsten Begriffe und Zusammenhänge kennen, ohne gleich das CMS installieren zu müssen.

왘

CMS-Umsteiger finden die Funktionsprinzipien von Contao auf wenigen Seiten komprimiert und können sie beim Lesen mit bereits bekannten Systemen vergleichen.

Auf den folgenden Seiten machen Sie Bekanntschaft mit den Begriffen Frontend, Backend, Seitenstruktur, Themes, Modul, Seitenlayouts, Artikel, Inhaltselement und Rechteverwaltung und sehen, wie diese Komponenten zusammenarbeiten. Dieses Kapitel können Sie online oder offline lesen Die Abbildungen in diesem Kapitel sind so gewählt, dass die Lektüre ohne Internetzugang problemlos möglich ist. Mehr Spaß macht es aber wahrscheinlich, wenn Sie während der Lektüre die »Music Academy« im Browser öffnen und die Maus bereithalten: http://demo.contao.org/ Die Live-Demo lebt übrigens wirklich, und falls etwas nicht so ist wie hier beschrieben, liegt das eventuell daran, dass gleichzeitig noch andere Neugierige etwas ausprobieren. Die Demo wird stündlich wieder zurückgesetzt. Die Demo-Site Music Academy ist auch im Download-Paket von Contao enthalten, sodass Sie sie selbst installieren und genau untersuchen können.

31

2

Schnelldurchlauf: So funktioniert Contao

2.1

Das Frontend ist die Website

Contao besteht aus einem Frontend und einem Backend. Das Frontend ist die eigentliche Website, so wie ein Besucher sie sieht. Um das Frontend im Browser zu sehen, geben Sie die ganz normale Adresse der Website ein: 왘

http://demo.contao.org/ (ohne www davor)

Das Frontend sieht so aus wie in Abbildung 2.1. Diese Webseite lag nicht fix und fertig auf dem Webspace, sondern ist nach der Eingabe der URL von Contao automatisch erstellt worden.

Abbildung 2.1 Das Frontend der Online-Demo »Music Academy«

Registrierte Benutzer wie zum Beispiel die Studenten der Music Academy können sich im Frontend anmelden (Front End Login) und haben dann Zugriff auf Informationen, die für nicht angemeldete Besucher (Gäste) unsichtbar bleiben. Die Studentin Donna Evans (Benutzername »d.evans«, Passwort »donnaevans«) sieht nach einem Login zum Beispiel Informationen über ihren Kurs Violin Master Class (Abbildung 2.2).

32

Das Backend ist die Verwaltungsabteilung

Abbildung 2.2 Ein angemeldeter Frontend-Benutzer sieht mehr ...

2.2

Das Backend ist die Verwaltungsabteilung

Das Backend ist der Administrationsbereich, also die Verwaltungsabteilung der Website. Im Backend wird aber nicht nur verwaltet, sondern auch richtig gearbeitet. Die Struktur der Website, das Seitenlayout und die Inhalte für die einzelnen Webseiten, alles wird hier im Backend erstellt und verwaltet. Zutritt zum Backend haben nur Mitarbeiter, und deshalb werden am Eingang Benutzername und Passwort kontrolliert. Um das Backend aufzurufen, hängen Sie an die URL des Frontends einfach /contao/ hinten dran: 왘

http://demo.contao.org/contao/

Am besten öffnen Sie das Backend in einem neuen Tab oder einem zweiten Browserfenster, damit Sie leicht zwischen Front- und Backend hin- und herwechseln können. Abbildung 2.3 zeigt das Anmeldeformular für das Backend. Der Administrator der Music Academy heißt Kevin Jones, und nach einer Anmeldung mit dem Benutzernamen »k.jones« und dem Passwort »kevinjones« sehen Sie das Backend aus Abbildung 2.4.

33

2.2

2

Schnelldurchlauf: So funktioniert Contao

Abbildung 2.3 Die Anmeldung zum Backend von Contao

Abbildung 2.4 Das Backend nach erfolgreicher Anmeldung als k.jones

Im Backend gibt es drei Bereiche, die Sie später genauer kennenlernen: 1 Infobereich (oben) 2 Navigationsbereich (links) 3 Arbeitsbereich (rechts) Kevin Jones ist der Administrator der Site und hat Zugriff auf das gesamte Backend. Der Administrator ist der Chef und darf alles. Die Benutzer Helen Lewis

34

Die Seitenstruktur ist das Fundament der Website

und James Wilson hingegen sehen nur den Teil des Backends, den sie für ihre Arbeit benötigen (siehe 2.10, »Das Backend ist für Redakteure sehr übersichtlich«, ab Seite 46). Das Backend lernen Sie später genauer kennen Beim Schnelldurchlauf in diesem Kapitel machen Sie nur ein paar ausgesuchte Zwischenstopps im Backend. In Kapitel 5, »Ein kurzer Rundgang im Backend«, lernen Sie das Backend genauer kennen (ab Seite 101).

2.3

Die Seitenstruktur ist das Fundament der Website

Contao ist ein seitenbasiertes Content-Management-System, und ein hierarchisch aufgebauter Seitenbaum bildet das Rückgrat der Website. Wie ein Skelett einem Körper so verleiht der Seitenbaum einer Website sowohl Stabilität als auch Flexibilität. Unter anderem dient die Seitenstruktur als Grundlage für die Navigation. Abbildung 2.5 zeigt oben die Navigation im Frontend und darunter die Seitenstruktur im Backend.

Abbildung 2.5 Navigation im Frontend und Seitenstruktur im Backend

35

2.3

2

Schnelldurchlauf: So funktioniert Contao

Die in der Navigation hervorgehobenen Webseiten finden Sie im Backend im Bereich Seitenstruktur. Mithilfe der Seitenstruktur können Sie die Site ganz einfach verwalten und mit wenigen Klicks neue Seiten hinzufügen oder die Reihenfolge der vorhandenen Seite verändern. Änderungen in der Seitenstruktur wirken sich direkt auf die Navigation aus. In der Online-Demo können Sie das live ausprobieren: 왘

Löschen Sie zum Beispiel die Seite Teachers im Backend, indem Sie auf das rote x rechts daneben klicken.

왘

Wechseln Sie zum Frontend, und laden Sie die Startseite neu.

Die Seite Teachers ist in der Navigation nicht mehr zu sehen. Versehentliche Bearbeitungsschritte kann man rückgängig machen Die Online-Demo ist unkaputtbar, und nach dem stündlichen Reset ist die Seite Teachers wieder da. Contao bietet aber auch eine sehr komfortable Funktion, um versehentliche Bearbeitungsschritte rückgängig zu machen: Im Navigationsbereich gibt es unten links im Bereich Benutzerfunktionen einen Menüpunkt namens Rückgängig. Probieren Sie ihn ruhig aus.

2.4

Themes bestimmen das Aussehen der Site

Das Aussehen einer Contao-Site wird von einem Theme bestimmt. Das wird »ßiehm« gesprochen, mit einem wunderschönen »Tie-Eitsch« am Anfang und einem ziemlich langen »ieh« in der Mitte. Nach einem Klick auf das BackendModul Themes im Navigationsbereich, sehen Sie in der Online-Demo das Theme Music Academy (Abbildung 2.6).

Abbildung 2.6 Das Backend-Modul »Themes« im Überblick

36

Module erzeugen den Quelltext für das Frontend

Ein Theme besteht aus Stylesheets, Modulen und Seitenlayouts, die mit einem Klick auf die entsprechenden Symbole rechts neben dem Theme bearbeitet werden können.

2.5

Module erzeugen den Quelltext für das Frontend

Module sind in Contao kleine Programme, die den Quelltext für das Frontend erzeugen. Um zum Beispiel aus dem Seitenbaum die Navigation im Frontend zu erstellen, kommt ein solches Modul zum Einsatz. Eine Übersicht über verwendete Module finden Sie im Backend in Themes 폷 Module. Die in diesem Bereich gelisteten Module erzeugen allesamt HTML für das Frontend und werden deshalb auch Frontend-Module genannt. Auf der Beispielsite sieht es dort so aus wie in Abbildung 2.7.

Abbildung 2.7 Die Frontend-Module der Music Academy

Sie müssen die Frontend-Module natürlich nicht selbst programmieren. Für alle wichtigen Funktionen stehen fertige Modultypen bereit, deren Name hellgrau in eckigen Klammern hinter den Modulnamen steht. Rechts am Rand gibt es für jedes Modul farbige Symbole zum Bearbeiten, Duplizieren, Verschieben, Löschen und für Detailinformationen.

37

2.5

2

Schnelldurchlauf: So funktioniert Contao

Die Hauptnavigation im Frontend wird zum Beispiel von dem Modul Navigation – Main navigation erzeugt, das auf dem Modultyp [Navigationsmenü] basiert und mit wenigen Einstellungen einsatzbereit ist. Zur Bearbeitung eines Moduls klicken Sie auf das in Abbildung 2.7 rechts unten hervorgehobene gelbe Bleistiftsymbol. Sie sehen dann die Eingabemaske aus Abbildung 2.8.

Abbildung 2.8 Das Modul »Navigation – Main navigation«

Was bei einem Navigationsmenü die Optionen wie Startlevel, Stoplevel und Hard Limit genau bedeuten, erfahren Sie in Kapitel 8 ab Seite 199. Templates definieren, welches HTML die Module erzeugen Frontend-Module werden bequem per Eingabemaske im Backend konfiguriert. Welches HTML ein Modul genau erzeugt, wird über Templates gesteuert. Mehr dazu lesen Sie in Kapitel 6.7, »Templates: Das HTML für den Quelltext«, ab Seite 150.

2.6

Jede Seite hat ein Seitenlayout

Jede Seite basiert auf einem Seitenlayout, das die Seite in Layoutbereiche einteilt. Wenn Sie in der Online-Demo im Backend-Modul Themes 폷 Seitenlayouts rechts neben Default layout [Standard] auf den gelben Bleistift klicken, können Sie die Einstellungen für das Layout bearbeiten. Abbildung 2.9 zeigt drei wichtige Einstellungen aus dem Standardlayout der Music Academy. Sie können die einzelnen Bereiche auf dieser Seite wie z. B. Titel und

38

Jede Seite hat ein Seitenlayout

Standard oder Kopf- und Fusszeile mit einem Klick auf die grünen Überschriften komfortabel ein- und ausblenden, sodass die Seite immer übersichtlich bleibt.

Abbildung 2.9 Ein Seitenlayout – die wichtigsten Einstellungen

Diese Einstellungen erzeugen folgendes Seitenlayout: 1 eine Kopfzeile mit einer festen Höhe von 273px 2 ein zweispaltiges Layout mit einer 200px breiten linken Spalte 3 ein zentriertes, statisches Layout mit einer Breite von 870px Abbildung 2.10 zeigt dieses Seitenlayout im Frontend. Aber ein Seitenlayout teilt die Seite nicht nur in Layoutbereiche ein, sondern bestimmt auch, wo die einzelnen Elemente erscheinen. In Abbildung 2.10 können Sie sehen, dass die Hauptnavigation innerhalb der Kopfzeile sitzt. Das wird im Seitenlayout definiert. Wenn Sie das Default layout [Standardlayout] bearbeiten, können Sie im Bereich Frontend-Module sehen, dass das Modul Navigation – Main navigation dem Bereich Kopfzeile zugeordnet ist (Abbildung 2.11).

39

2.6

2

Schnelldurchlauf: So funktioniert Contao

Abbildung 2.10 Das Seitenlayout im Frontend

Abbildung 2.11

40

Modul »Navigation – Main navigation« in »Kopfzeile«

Seitenlayouts verbinden die Seiten mit Stylesheets

2.7

Seitenlayouts verbinden die Seiten mit Stylesheets

In einem Seitenlayout passiert aber noch mehr, denn Seitenlayouts verbinden die Seiten auch mit den Stylesheets. Im Backend-Modul Themes 폷 Stylesheets sind die drei Stylesheets basic, music_academy und print gespeichert, mit denen die Music Academy gestaltet wird. In Klammern dahinter wird jeweils der definierte Medientyp angezeigt. Abbildung 2.12 zeigt das Backend-Modul Themes 폷 Stylesheets mit den drei Stylesheets.

Abbildung 2.12 Im Backend-Bereich »Stylesheets« gibt es drei Stylesheets.

Im Backend-Modul Themes 폷 Seitenlayouts werden für jedes definierte Seitenlayout die gewünschten Stylesheets ausgewählt. Abbildung 2.13 zeigt, dass für das Default layout [Standardlayout] die beiden Stylesheets basic und music_academy aktiviert wurden.

Abbildung 2.13 Mit dem »Default layout« sind zwei Stylesheets verbunden.

41

2.7

2

Schnelldurchlauf: So funktioniert Contao

Probieren Sie es einmal aus: 왘

Deaktivieren Sie im Seitenlayout die Stylesheets basic und music_academy.

왘

Klicken Sie unten auf der Seite auf die Schaltfläche Speichern.

왘

Rufen Sie das Frontend im Browser auf, und laden Sie es neu.

Nach dieser Aktion sieht das Frontend im Browser etwas anders aus, denn die Formatierungen aus den beiden Stylesheets fehlen.

2.8

Jeder Artikel gehört zu einer Seite

In Contao werden Inhalte in Artikeln gespeichert, und ein Artikel gehört immer zu einer bestimmten Seite. Zur Illustration zeigt Abbildung 2.14 einen Artikel mit der Überschrift Impressions auf der gleichnamigen Seite im Frontend.

Abbildung 2.14 Der Artikel »Impressions« im Frontend

42

Ein Artikel besteht aus Inhaltselementen

Im Backend-Modul Artikel sehen Sie die bereits bekannte Seitenstruktur, aber dieses Mal mit den dazugehörigen Artikeln (Abbildung 2.15). Mit einem Klick auf die Plus- und Minus-Zeichen können Sie diesen Artikelbaum bei Bedarf ein- und ausklappen. Auf der Seite Impressions wird ein gleichnamiger Artikel gelistet, der in der [Hauptspalte] erscheint.

Abbildung 2.15 Der Artikel »Impressions« auf der Seite »Impressions«

Ein Artikel ist genau genommen nur ein »Container«, ein Bereich auf einer Webseite, der ein oder mehrere Inhaltselemente enthält. Die eigentlichen Inhalte (Texte, Grafiken etc.) werden in diesen Inhaltselementen aufbewahrt. Ohne Inhaltselemente ist ein Artikel im Frontend nur ein leerer Bereich und nicht zu sehen. Mehrere Artikel pro Seite Auf einer Seite können natürlich auch mehrere Artikel erscheinen. Und umgekehrt kann ein Artikel auch auf verschiedenen Seiten auftauchen, ohne dass er kopiert werden muss.

2.9

Ein Artikel besteht aus Inhaltselementen

Artikel bestehen also aus Inhaltselementen, in denen die eigentlichen Inhalte gespeichert werden. Contao stellt für verschiedene Inhaltstypen vorgefertigte Inhaltselemente bereit. So gibt es zum Beispiel spezielle Inhaltselemente für Überschriften, Texte (mit und ohne Bildern), Bildergalerien, Tabellen, Listen und vieles mehr.

43

2.9

2

Schnelldurchlauf: So funktioniert Contao

Abbildung 2.16 zeigt, dass der Artikel Impressions aus drei Inhaltselementen besteht. So können Sie die Abbildung in Ihrem Browser sehen: 왘

Öffnen Sie im Backend das Backend-Modul Artikel.

왘

Suchen Sie im Seitenbaum den Artikel Impressions [Hauptspalte].

왘

Klicken Sie auf das gelbe Bleistiftsymbol, um den Artikel zu bearbeiten.

Jetzt sehen Sie die Inhaltselemente des Artikels (Abbildung 2.16).

Abbildung 2.16 Der Artikel »Impressions« – Einstellungen und Inhaltselemente

Im oberen Bereich werden die Einstellungen des Artikels angezeigt, auch Metadaten genannt. Dazu zählen z. B. der Titel des Artikels, der Autor und das Änderungsdatum. Diese Einstellungen werden im Frontend nicht angezeigt. Unterhalb der Einstellungen sehen Sie drei Inhaltselemente: 1 ein Inhaltselement vom Typ Text mit Überschrift und Fließtext 2 ein Inhaltselement vom Typ Galerie mit ein paar Fotos 3 noch ein Inhaltselement vom Typ Text, dieses Mal ohne Überschrift

44

Ein Artikel besteht aus Inhaltselementen

Abbildung 2.17 zeigt diese drei Inhaltselemente im Frontend.

Abbildung 2.17

Der Artikel »Impressions« – Inhaltselemente im Frontend

Ein Artikel wird durch Inhaltselemente bildlich gesprochen in Scheibchen unterteilt, und diese Scheibchen können einzeln bearbeitet werden. Für Redakteure ist der Vorteil, dass sie nie den ganzen Artikel in einem Editorfenster bearbeiten, sondern sich immer nur um einen Teil kümmern müssen: Divide et impera. Soll zum Beispiel die Bildergalerie unterhalb der Textelemente am Ende des Artikels erscheinen, klicken Sie einfach auf das Inhaltselement Galerie und ziehen es mit der Maus nach unten, bis es unterhalb des Inhaltelements Text steht. Einfacher geht es nicht. Probieren Sie es aus.

45

2.9

2

Schnelldurchlauf: So funktioniert Contao

Inhaltselemente erleichtern den Redakteuren die Arbeit Die Sache mit den Inhaltselementen ist ungewohnt, aber ziemlich pfiffig und ein wichtiger Grund, warum Redakteuren die Bearbeitung der Inhalte in Contao leichter fällt als in vielen anderen CMSystemen, in denen immer der ganze Artikel in einem Editorfenster erscheint.

2.10

Das Backend ist für Redakteure sehr übersichtlich

Contao hat ein sehr ausgefeiltes Rechtesystem, sodass jeder Mitarbeiter nur den Teil des Systems sieht, den er benötigt bzw. sehen soll. Neben den Frontend-Benutzern, die Sie auf Seite 32 schon kennengelernt haben, gibt es noch BackendBenutzer, die bei der Verwaltung der Website helfen. Professor James Wilson zum Beispiel unterrichtet den Kurs Elements of Jazz Piano und ist verantwortlich für die inhaltliche Pflege der Seiten unterhalb von Courses. Wenn er sich mit seinem Benutzernamen »j.wilson« und seinem Passwort »jameswilson« anmeldet, sieht das Backend aus wie in Abbildung 2.18.

Abbildung 2.18 Übersichtlich – das Backend für James Wilson

Auch im Backend-Modul Dateiverwaltung sieht Professor Wilson nur die Dateien für den von ihm betreuten Bereich der Website.

46

Zusammenfassung – so tickt Contao

2.11

Zusammenfassung – so tickt Contao

In Contao arbeiten mehrere Komponenten zusammen, um eine Webseite zu erstellen: 왘

Texte, Grafiken etc. werden in Inhaltselementen gespeichert.

왘

Inhaltselemente gehören zu einem Artikel, der sie zusammenfasst.

왘

Artikel gehören zu einer Seite, auf der sie dargestellt werden.

왘

Die Seitenstruktur definiert, welche Seiten es gibt.

왘

Jede Seite basiert auf einem Seitenlayout, das diverse Dinge definiert: 왘

welche Layoutbereiche es auf einer Seite gibt

왘

welches Modul in welchem Layoutbereich erscheint

왘

welche Stylesheets zur Gestaltung der Seiten benutzt werden

왘

Module erzeugen den HTML-Quelltext für das Frontend.

왘

Stylesheets bestimmen das Aussehen der Webseiten und werden über das Seitenlayout mit einer Seite verbunden.

Soweit dieser Schnelldurchlauf. Natürlich gibt es in Contao noch eine Menge anderer interessanter Abteilungen wie z. B. Nachrichten, Kalender, Events, Systemverwaltung und dergleichen mehr, aber das Buch hat ja auch gerade erst angefangen.

47

2.11

TEIL II Contao installieren

In diesem Kapitel erfahren Sie, warum Sie XAMPP benötigen, wie Sie es installieren und wie Sie einen Sicherheitscheck machen. Danach werden der Webserver, PHP und die Datenbank kurz vorgestellt.

3

XAMPP: Der Offline-Webspace

XAMPP ist die Abkürzung für eine gängige Kombination von Komponenten, die beim Einsatz von Webanwendungen benötigt werden. Es wird »ksamp« oder etwas anglophiler »iks-ämp« ausgesprochen: 왘

X ist ein Platzhalter für das verwendete Betriebssystem: Linux, Windows oder MAC OS.

왘

A ist der erste Buchstabe des Webservers Apache.

왘

M steht für den Datenbankserver MySQL.

왘

PP steht für die Programmiersprachen PHP und Perl.

Bevor Sie XAMPP installieren, möchte ich kurz erklären, warum Sie es überhaupt benötigen. Wenn Sie ausschließlich auf einem Online-Webspace arbeiten, können Sie dieses Kapitel getrost überspringen.

3.1

XAMPP ist Webspace auf Ihrem Rechner

XAMPP ist die einfachste Möglichkeit, eine lokale Entwicklungsumgebung einzurichten. Lokal bedeutet in diesem Zusammenhang auf Ihrem Rechner und hat nichts mit einer Gaststätte zu tun.

3.1.1

Statische Webseiten: Der Webspace als Lagerhalle

Beim traditionellen Webpublishing werden die Webseiten in der Regel auf dem eigenen Rechner erstellt, auf den Webspace kopiert und dann unverändert vom Webserver ausgeliefert. Da die Webseiten auf dem Webspace nicht verändert werden, spricht man von statischen Webseiten (Abbildung 3.1).

51

3

XAMPP: Der Offline-Webspace

Statische Webseiten Browser

Internet

Webserver (Apache)

Webspace Abbildung 3.1 Statische Webseiten – der Webspace als Lagerhalle

Die Webseite ist im Moment der Anforderung durch den Browser bereits fix und fertig. Der Webspace dient als Lagerhalle zur Aufbewahrung der Webseiten, und es gibt dort nur den Webserver und die Webseiten.

3.1.2

Content-Management-System: Der Webspace als Werkstatt

Ein Content-Management-System (CMS) ist ein Programm, das auf dem Webspace läuft und die Webseiten kurz vor der Auslieferung zusammenbaut. Die Webseiten liegen nicht mehr statisch auf dem Webspace, sondern werden dynamisch auf Anforderung erstellt. Der Webspace ist somit keine Lagerhalle mehr, sondern gleicht eher einer Werkstatt. In dieser Werkstatt arbeitet ein ganzes Team daran, die Webseiten so schnell wie möglich zu erstellen und zu liefern. Statt vieler fertiger Webseiten gibt es dort nur eine Vorlage, eine Datei mit zahlreichen Platzhaltern namens index.php, die je nach Anforderung des Browsers mit verschiedenen Parametern unterschiedlich zusammengebaut wird. Zum Team gehören neben dem Webserver noch ein paar andere Mitarbeiter: 왘

PHP-Interpreter Ein Interpreter ist ein Übersetzer. Contao wurde in der Programmiersprache PHP geschrieben, und damit ein in PHP geschriebenes Programm funktioniert, muss auf dem Webspace ein PHP-Interpreter vorhanden sein. PHP arbeitet sehr eng mit dem Webserver zusammen.

왘

Content-Management-System Ein CMS wie Contao ist der Motor der Website und koordiniert die Erstellung der Webseiten, bevor der Webserver sie ausliefert.

왘

Datenbank Viele Webanwendungen bewahren ihre Daten in einer Datenbank auf. Weit verbreitet und auch bei Contao im Einsatz ist MySQL.

Abbildung 3.2 zeigt das gesamte Team im Überblick.

52

Die Installation von XAMPP Lite (Windows)

index.php Browser

Internet

Webserver (Apache)

P H P

Contao (CMS)

MySQL (Datenbank)

Webspace Abbildung 3.2 Das Content-Management-System – der Webspace als Werkstatt

Um eine dynamisch erstellte Website offline auf dem eigenen Rechner erstellen zu können, müssen Sie einen solchen Webspace auf Ihrem Rechner simulieren, und dazu benötigen Sie außer Contao noch einen Webserver, einen PHP-Interpreter und MySQL. Ein solcher Offline-Webspace wird oft auch Entwicklungsumgebung genannt. Da es ziemlich mühsam ist, alle Komponenten einzeln zu installieren und dann auch noch zur Zusammenarbeit zu bewegen, haben die Betreiber von apachefriends.org Ihnen diese Arbeit abgenommen, ein Komplett-Paket geschnürt und es unter dem Namen namens XAMPP kostenlos veröffentlicht. Dieses Paket werden Sie jetzt installieren.

3.2

Die Installation von XAMPP Lite (Windows)

XAMPP für Windows gibt es in einer Voll- und in einer Lite-Version. Für eine Contao-Entwicklungsumgebung reicht XAMPP Lite völlig aus. Sie können XAMPP Lite von der Buch-DVD installieren oder von der Website herunterladen, am besten als EXE-Datei: http://apachefriends.org/de/xampp-windows.html#631

왘

Falls Sie bereits eine ältere Version von XAMPP installiert haben, prüfen Sie bitte, ob die Voraussetzungen für Contao erfüllt sind: PHP ab V5.2 und MySQL ab V4.1 (besser V5.x). Details dazu finden Sie in Kapitel 4, »Die Installation von Contao«. Apache, PHP und MySQL für MAC OS X Ein MAC mit OS X hat als Unix-Abkömmling eigentlich bereits alle Komponenten an Bord, aber wer keine Lust hat, alles selbst zu konfigurieren, kann auf eines der beiden komfortablen Installationspakete zurückgreifen: 왘

XAMPP für Mac OS X http://www.apachefriends.org/de/xampp-macosx.html

왘

MAMP: Mac – Apache – MySQL – PHP http://www.mamp.info/de/mamp/

53

3.2

3

XAMPP: Der Offline-Webspace

Schauen Sie sich beide Seiten an, und nehmen Sie die, die Sie sympathischer finden. Überall ist dasselbe drin: Apache, PHP, MySQL.

3.2.1

XAMPP Lite installieren

So installieren Sie XAMPP Lite auf Ihrem Rechner: 1. Starten Sie die Installationsdatei mit einem Doppelklick. Als Ziel der Installation wird C:\ vorgeschlagen, wodurch XAMPP Lite in den Ordner C:\xampplite installiert wird. 2. Starten Sie die Installation mit einem Klick auf Install. Daraufhin werden die Dateien entpackt, was ein bisschen dauern kann. 3. Nach dem Entpacken öffnet sich das XAMPP-Setup in einem DOS-Fenster. Darin müssen Sie ein paar Fragen zur Konfiguration mit (Y) für »Yes« oder (N) für »No« beantworten und mit (Return) bestätigen. Im Zweifelsfall übernehmen Sie einfach die Vorgaben. 4. Am Ende der Fragenliste erscheint eine Liste mit fünf Optionen. Wählen Sie hier bitte die erste Option start XAMPP Control Panel, indem Sie eine »1« eingeben und mit (Return) bestätigen. Kurz darauf erscheint das Kontrollzentrum von XAMPP. 5. Das XAMPP-Setup selbst verlassen Sie mit (X) für Exit und (Return).

3.2.2

Das XAMPP Control Panel

Falls das XAMPP Control Panel nicht automatisch gestartet wurde, können Sie es mit einem Doppelklick auf die Desktop-Verknüpfung oder auf die Datei xamppcontrol.exe im Ordner c:\xampplite aufrufen. Wenn das Control Panel zu sehen ist, starten Sie Apache und MySQL: 왘

Starten Sie zuerst den Webserver Apache mit einem Klick auf die Schaltfläche Start. Kurze Zeit später erscheint der hellgrün hinterlegte Hinweis Running, und die Schaltfläche heißt jetzt Stop.

왘

Falls sich beim Starten eine Firewall meldet, sollten Sie einen Moment inne halten, die Meldung lesen und dann die Ausführung von Apache erlauben, denn sonst wird er nicht funktionieren.

왘

Starten Sie danach den Datenbankserver MySQL. Falls sich beim Apache eine Firewall gemeldet hat, kommt jetzt wahrscheinlich wieder eine Meldung. Erlauben Sie auch MySQL, denn sonst funktioniert es nicht.

Sieht das XAMPP Control Panel so ähnlich aus wie in Abbildung 3.3, hat alles geklappt.

54

Die Installation von XAMPP Lite (Windows)

Abbildung 3.3

Das XAMPP Control Panel – Apache und MySQL laufen.

Ein Klick auf das X rechts oben im Fenster beendet XAMPP übrigens nicht, sondern verkleinert nur das Control Panel und schickt es rechts unten in den Infobereich von Windows. Um das Control Panel zu beenden, stoppen Sie zuerst alle aktiven Server und klicken dann auf die Schaltfläche Exit. Mit der Schaltfläche Explore können Sie sich die Ordnerstruktur unterhalb von C:\xampplite im Windows Explorer anzeigen lassen (Abbildung 3.4).

Abbildung 3.4 Die Ordnerstruktur von XAMPP Lite

55

3.2

3

XAMPP: Der Offline-Webspace

Wenn der Apache nicht startet Falls der Apache nicht startet, ist ziemlich sicher der Port 80, den ein Webserver braucht, schon belegt. Kandidaten hierfür sind Fernwartungs- oder Telefonieprogramme wie z. B. Skype. Zur Behebung des Problems starten Sie einfach zuerst den Apache und dann Skype. Oder Sie ändern die Skype-Einstellungen auf einen anderen Port.

3.2.3

Testen, ob der Webserver funktioniert

Um zu testen, ob alles geklappt hat, starten Sie einen Browser Ihrer Wahl und geben in der Adressezeile folgende URL ein: 왘

http://localhost/

http heißt frei übersetzt »Gehe zu einem Webserver«, und localhost ist ein anderes Wort für »der Computer, an dem ich gerade arbeite«. Die URL ruft also die Startseite des Webservers auf Ihrem Computer auf, und nachdem Sie Deutsch als Sprache gewählt haben, gelangen Sie zur Startseite von XAMPP. Diese sollte ungefähr so aussehen wie in Abbildung 3.5.

Abbildung 3.5 Die Startseite von XAMPP Lite

In der orange hinterlegten Navigationsleiste am linken Rand können Sie mit einem Klick auf Status nachschauen, ob der Datenbankserver MySQL ebenfalls aktiviert ist. Das Ausprobieren der anderen in der Navigation angebotenen Beispiele und Tools ist freiwillig. Machen Sie sich ob der angebotenen Vielfalt keine Sorgen, Sie werden längst nicht alles benötigen. Wirklich wichtig ist nur, dass Apache und MySQL funktionieren.

56

Der Sicherheitscheck von XAMPP

3.3

Der Sicherheitscheck von XAMPP

Der große Gegenspieler von Sicherheit ist die Bequemlichkeit. Ein Rechner ohne jeglichen Passwortschutz ist bequem zu bedienen, aber nicht besonders sicher. XAMPP ist als Entwicklungsumgebung nach der Installation absichtlich eher bequem als sicher konfiguriert. Wenn Ihr Rechner durch eine gut konfigurierte Firewall oder einen DSL-Router (oder beides) vom Internet getrennt ist, wird das Sicherheitsrisiko überschaubar, und die Gefahr beschränkt sich auf Zugriffe aus einem eventuell vorhandenen lokalen Netzwerk. Auf einem Laptop mit ständig wechselnden und zum Teil auch direkten Internetzugängen hingegen sieht die Sache schon anders aus. In diesem Abschnitt stopfen Sie die potenzielle Sicherheitslöcher von XAMPP.

3.3.1

Den Sicherheitscheck aufrufen

In der Navigationsleiste von XAMPP gibt es einen Sicherheitscheck, der in einem neuen Tab oder Fenster geöffnet wird. In der Übersichtstabelle taucht dreimal der rot markierte Status unsicher auf (Abbildung 3.6).

Abbildung 3.6

Der Sicherheitscheck von XAMPP

57

3.3

3

XAMPP: Der Offline-Webspace

Allgemeingültige Empfehlungen zu Sicherheitseinstellungen sind schwierig, weil die Balance zwischen »sicher« und »bequem« immer ein Kompromiss ist, der sowohl von der Arbeitsumgebung als auch vom persönlichen Paranoia-Level abhängt. Hier zunächst ein paar Anmerkungen zu den Meldungen: 왘

Diese XAMPP-Seiten sind über’s Netzwerk erreichbar Wenn Ihr Rechner einen direkten Internetzugang hat, kann man vom Internet aus problemlos den Webserver auf Ihrem Rechner aufrufen. Als Schutz bietet sich ein Passwort für das XAMPP-Verzeichnis an. Sitzen Sie hingegen hinter einem DSL-Router, ist Ihr Rechner nicht direkt aus dem Internet erreichbar, und dann ist dieser Schutz nicht so wichtig.

왘

MySQL Admin user »root« hat kein Passwort Der Datenbankserver hat einen Hauptbenutzer mit dem schönen Namen »root«, der noch kein Passwort hat. Falls Sie ein Passwort für »root« vergeben, sollten Sie es sich in irgendeiner Form notieren, eventuell gleich hier im Buch. Dieses Passwort braucht Contao in Kapitel 4 bei der Installation, um eine Verbindung zur Datenbank herstellen zu können.

왘

PhpMyAdmin ist über das Netzwerk erreichbar phpMyAdmin ist eine Webanwendung zur Verwaltung von MySQL-Datenbanken, die Sie weiter unten in diesem Kapitel noch kennenlernen. Wer Zugriff auf phpMyAdmin hat, hat Zugriff auf die Datenbank, und auch das kann man mit einem Passwort schützen.

3.3.2

Einen Passwortschutz für MySQL und phpMyAdmin einrichten

Auf der Seite mit dem Sicherheitscheck finden Sie unterhalb der Übersichtstabelle einen Link, mit dem alle drei Lücken geschlossen werden können: 왘

http://localhost/security/xamppsecurity.php

Nach einem Klick auf diesen Link erscheint die Seite Security Konsole MySQL | XAMPP Verzeichnis Schutz (Abbildung 3.7).

58

Der Sicherheitscheck von XAMPP

Abbildung 3.7 Sicherheitslücken in XAMPP stopfen

Der erste Abschnitt auf der Seite heißt MySQL Sektion: »Root« Passwort, und darin geht es um die Sicherheit von MySQL und phpMyAdmin: 1 Geben Sie ein Passwort für den MySQL SuperUser ein (»root«), und wiederholen Sie das Passwort. Notieren Sie sich dieses Passwort, damit Sie es nicht vergessen. Benutzername: root Passwort: …………………… 2 Checken Sie, ob die phpMyAdmin Authentifikation auf cookie und das zufällige Passwort für den phpMyAdmin User ’pma’ auf Ja gesetzt sind. Dieses Passwort wird nur im Hintergrund benutzt, und Sie müssen es sich weder merken noch selbst irgendwo eingeben. 3 Sie sollten das MySQL-Root-Passwort nicht im Klartext in einer Datei auf Ihrer Festplatte speichern. Notieren ist besser. 4 Klicken Sie auf die Schaltfläche Passwort ändern. Danach erhalten Sie eine Meldung, dass das »root Passwort« erfolgreich geändert wurde und der MySQL Server neu gestartet werden muss, damit die Änderungen wirksam werden. Das machen Sie über das XAMPP Control Panel: Klicken Sie einmal auf Stop, einmal auf Start, und schon ist der MySQL-Server neu gestartet.

59

3.3

3

XAMPP: Der Offline-Webspace

3.3.3

Passwortschutz für das XAMPP-Verzeichnis einrichten

In der unteren Hälfte des Sicherheitschecks geht es um den XAMPP-Verzeichnisschutz (Abbildung 3.8).

Abbildung 3.8

Passwortschutz für das XAMPP-Verzeichnis einrichten

1 Geben Sie im Feld Benutzer (User) den von Ihnen gewünschten Benutzernamen ein. 2 Geben Sie im Feld Passwort das gewünschte Passwort ein. Achten Sie auf Groß- und Kleinbeschreibung. Notieren Sie sich Benutzername und Passwort, damit Sie beide nicht vergessen: Benutzername: ………………………… Passwort: ……………………………… 3 Kreuzen Sie das Kontrollkästchen Passwort in Klartext in Datei speichern? nicht an. Das ist zu unsicher, und Sie haben es sich in Schritt 2 sowieso schon notiert. 4 Klicken Sie auf die Schaltfläche XAMPP Verzeichnis sichern. Wenn alles geklappt hat, erhalten Sie eine Erfolgsmeldung, in der auch der Speicherort der zum Verzeichnisschutz benötigten Dateien xampp.users und .htaccess angezeigt wird. Diese müssen Sie sich nicht merken.

3.3.4

Die neuen Sicherheitseinstellungen testen

Wenn Sie in der orangefarbenen Navigationsleiste links oben wieder auf Sicherheitscheck klicken, sollten alle drei Optionen grün markiert sein (Abbildung 3.9).

60

Der Sicherheitscheck von XAMPP

Abbildung 3.9

XAMPP ist jetzt sicher.

Nach diesen beiden Schritten sind zwar die größten Sicherheitslücken in Ihrer lokalen XAMPP-Installation gestopft, aber die alltägliche Arbeit ist dadurch auch ein klein bisschen unbequemer geworden, denn Sie müssen an zwei Stellen jeweils einen Benutzernamen und ein Passwort eingeben. Probieren Sie es ruhig einmal aus: 왘

Nach dem Aufruf von http://localhost/ greift der XAMPP–Verzeichnisschutz, und im Browserfenster erscheint ein Fenster zur Authentifizierung, in das Sie den von Ihnen vergebenen Benutzernamen und das dazu passende Passwort eingeben müssen. Der Browser merkt sich die Anmeldung für eine Sitzung.

왘

Wenn Sie in der XAMPP-Navigationsleiste in der Gruppe Tools das Programm phpMyAdmin starten, müssen Sie auf der folgenden Seite im Bereich Anmeldung den Benutzernamen »root« und das von Ihnen vergebene »Root«-Passwort für MySQL eingeben.

So viel zur Sicherheit. In den folgenden Abschnitten möchte ich Ihnen die einzelnen Komponenten von XAMPP kurz vorstellen. Ungeduldig? Die Installation von Contao beginnt auf Seite 71. Nach dem Sicherheitscheck ist XAMPP als Entwicklungsumgebung einsatzbereit. Sie können die folgenden Erläuterungen zu den Komponenten von XAMPP auch überspringen und gleich zur Installation von Contao weitergehen. Falls irgendetwas unklar ist, kommen Sie einfach wieder zurück.

61

3.3

3

XAMPP: Der Offline-Webspace

3.4

Der Webserver: Apache serviert Webseiten

Ein Webserver ist ein Webseiten-Servierprogramm, ein Programm, das auf Anfrage Webseiten ausliefert. Im Alltag ist mit Webserver zwar oft auch der Computer gemeint, auf dem das Programm läuft, aber eigentlich ist der Webserver nur das Programm. Der Apache ist ein Open-Source-Projekt, und seine Entwicklung wird von der Apache Software Foundation koordiniert, die auf apache.org zu Hause ist. Der Name wurde laut FAQ aus Respekt vor dem Stamm der Apachen gewählt. Nicht ganz korrekt, aber weit verbreitet ist die Variante, dass sich der Name vom Ausdruck »a patchy server« ableitet, was so viel heißt wie »ein zusammengeflickter Server«. Laut der Web Server Survey von Netcraft ist der Apache der meistbenutzte Webserver im Internet: 왘

http://news.netcraft.com/archives/web_server_survey.html

In XAMPP finden Sie in der orangefarbenen Navigation den Bereich Dokumentation. Dort gibt es auch einen Link zur deutschsprachigen Übersicht der Apache-Dokumentation.

3.4.1

DocumentRoot: »htdocs«, der Ordner für die Webseiten

Wenn ein Webserver Webseiten servieren soll, muss er wissen, wo sie aufbewahrt werden, und dazu gibt es auf der Festplatte einen speziellen Ordner, in dem die zu servierenden Webseiten liegen. In XAMPP Lite ist das der Ordner c:\ xampplite\htdocs. Beim Apache wird dieser Ordner als DocumentRoot bezeichnet, was so viel heißt wie »Hauptordner für Webseiten«. In der Praxis läuft das Servieren von Webseiten ungefähr so ab: 왘

Sie geben im Browser http://localhost/ ein. Der einfache Schrägstrich am Ende der URL steht für die DocumentRoot des Webservers.

왘

Der Webserver schaut in seiner Konfigurationsdatei nach, welcher Ordner als DocumentRoot eingetragen ist, und findet c:\xampplite\htdocs.

Alle Webprojekte werden am besten in einem eigenen Ordner unterhalb der DocumentRoot abgelegt. Probieren Sie testweise einmal das Anlegen eines neuen Ordners aus: 왘

Erstellen Sie unterhalb von htdocs einen Ordner namens test.

왘

Geben Sie im Browser http://localhost/test/ ein.

62

Der Webserver: Apache serviert Webseiten

Der Apache zeigt Ihnen jetzt im Browser den leeren Ordner an. Wenn es in dem Ordner test eine Datei namens index.html gibt, wird der Webserver diese anzeigen. Ist eine solche Datei nicht vorhanden, listet der Apache in XAMPP Lite alle Dateien im Ordner auf (Directory Listing). Manchmal sind Webserver nicht ganz so bequem konfiguriert und zeigen beim Fehlen einer Index-Seite die Meldung »403 – Zugriff verweigert«. Sie können den Ordner test übrigens gerne wieder löschen. Er wird nicht mehr gebraucht. Falls der Apache nicht so will, wie er soll: »error.log« Der Webserver protokolliert im Hintergrund so ziemlich alles mit, was er tut, und falls irgendetwas nicht richtig funktioniert, hilft oft ein Blick in die Log-Datei mit den Fehlermeldungen: 왘

c:\xampplite\apache\logs\error.log

Die neuesten Meldungen finden Sie immer ganz unten in der Datei. Manchmal gibt einer der Einträge den entscheidenden Hinweis, auch wenn man nicht jedes Detail versteht.

3.4.2

Der PHP-Übersetzer: Als Modul oder als CGI

Mit dem Begriff PHP ist im Alltag zweierlei gemeint: erstens die Programmiersprache, die das Web im Sturm erobert hat, und zweitens der Interpreter, der die PHP-Befehle ausführt. PHP ist wie der Apache Open Source, und die Entwicklung wird auf php.net koordiniert (Abbildung 3.10).

Abbildung 3.10 »php.net« – hier wird die Entwicklung von PHP koordiniert.

63

3.4

3

XAMPP: Der Offline-Webspace

Auf http://php.net/manual/de können Sie übrigens bei Bedarf alle PHP-Befehle nachschlagen, aber in diesem Abschnitt geht es nicht um die Programmiersprache, sondern um eine wichtige Einstellung für den PHP-Interpreter. Es gibt zwei Arten, wie Apache und PHP zusammenarbeiten können: als Modul oder als CGI. Diese Einstellung wird in Kapitel 4 bei der Installation von Contao eventuell wichtig. Abbildung 3.11 zeigt links PHP als CGI und rechts PHP als Apache-Modul.

Webserver (Apache)

C G I

P H P

PHP als CGI

Webserver (Apache)

P H P

PHP als Modul

Abbildung 3.11 PHP als CGI und Modul

Beide Methoden haben verschiedene Vor- und Nachteile: 왘

Wenn der PHP-Interpreter über die CGI-Schnittstelle aufgerufen wird, sind Webserver und Interpreter zwei völlig getrennte Einheiten. Der Nachteil ist, dass der PHP-Interpreter immer wieder gestartet und beendet werden muss. Der Servercomputer verbringt dadurch einen nicht unerheblichen Teil seiner Rechenzeit einfach nur mit dem Starten und Beenden des PHP-Interpreters. Das klingt nicht besonders effektiv und ist es auch nicht, aber unter dem Namen FastCGI gibt es inzwischen eine schnellere CGI-Variante, die diesen Nachteil aufhebt.

왘

Wenn PHP als Apache-Modul betrieben wird, rücken Interpreter und Webserver buchstäblich enger zusammen. PHP wird quasi Teil des Servers und muss nicht jedes Mal neu gestartet werden, um einen Befehl auszuführen. Dadurch ist er natürlich eine ganze Ecke schneller als CGI, aber dafür laufen alle PHPProgramme unter dem Benutzernamen des Webservers, was – wie Sie bei der Installation von Contao sehen werden – wieder andere Nachteile mit sich bringt.

Viele Webhoster betreiben PHP als (Fast-)CGI, weil es sehr stabil ist und auf einem Webserver mit vielen Kunden relativ einfach zu verwalten ist. PHP-Programme laufen unter dem Namen des angemeldeten Benutzers und nicht unter dem des Webservers.

64

Der Webserver: Apache serviert Webseiten

Bei der Installation von Contao auf dem Webspace werden beide Möglichkeiten wieder erwähnt. Momentan ist nur wichtig, dass es sie gibt. Auf der Startseite von XAMPP gibt es in der Navigationsleiste einen Link namens phpinfo(), mit dem Sie sich unter anderem die Konfiguration des PHP-Übersetzers bei XAMPP anschauen können:

Abbildung 3.12 Unter XAMPP Lite läuft PHP als Apache-Modul.

In der sechsten Zeile ist bei Server API der Wert Apache 2.0 Handler eingetragen, und das bedeutet, dass der PHP-Interpreter als Apache-Modul betrieben wird. Wenn PHP als CGI oder FastCGI läuft, würden diese Buchstaben dort in irgendeiner Form auftauchen. Den eigenen Webspace erkunden: phpinfo.php So können Sie die PHP-Einstellungen auf Ihrem Webspace analysieren: 왘

Erstellen Sie mit einem Editor eine neue, komplett leere Datei.

왘

Schreiben Sie nur die Zeile in die Datei.

왘

Speichern Sie die Datei zum Beispiel als phpinfo.php.

왘

Laden Sie die Datei per FTP auf Ihren Webspace.

왘

Rufen Sie die Datei im Browser auf.

Und schon sehen Sie die PHP-Einstellungen. Die Datei sollten Sie danach wieder entfernen, denn die PHP-Einstellungen auf Ihrem Webspace gehen nur Sie und Ihren Provider etwas an.

65

3.4

3

XAMPP: Der Offline-Webspace

3.5

MySQL serviert SQL-Datenbanken

MySQL ist ein Datenbankserver für SQL-Datenbanken und sehr weit verbreitet. Es ist ebenfalls ein Open-Source-Projekt, arbeitet gut mit der Programmiersprache PHP zusammen und ist pfeilschnell:

Abbildung 3.13 mysql.de – die deutschsprachige Startseite zu MySQL

MySQL ist keine Datenbank, sondern ein Datenbankserver, der sich nach dem Starten als mysqld.exe im Arbeitsspeicher Ihres Computers befindet. Der Name ist übrigens nicht besonders originell. Ein Datenbankserver für SQL-Datenbanken namens MySQL ist ein bisschen so wie ein Hund, den man »MeinHund« nennt.

3.5.1

MySQL verwaltet mehrere Datenbanken

MySQL verwaltet meist mehrere Datenbanken und speichert die dazugehörigen Daten jeweils in einem eigenen Ordner auf der Festplatte. In XAMPP Lite ist das der Ordner c:\xampplite\mysql\data, in dem für jede Datenbank ein Ordner erstellt wird (Abbildung 3.14). Nach der Installation von XAMPP Lite gibt es drei Datenbanken und dementsprechend auch drei Ordner: cdcol für das Beispiel der CD-Verwaltung, mysql für den Server selbst und phpmyadmin für die MySQL-Benutzeroberfläche, die Sie gleich noch kennenlernen.

66

MySQL serviert SQL-Datenbanken

Abbildung 3.14 MySQL erstellt in »\data« pro Datenbank einen Ordner.

MySQL selbst ist von der Ausstattung her eher spartanisch, und so gibt es keinerlei Benutzeroberfläche. Sie müssten in der MySQL-Konsole also manuell SQL-Befehle eintippen, um zum Beispiel eine neue Datenbank zu erstellen. Wenn Sie nicht zufällig fließend SQL sprechen, macht das wenig Spaß.

3.5.2

SQL ist die Sprache zur Verwaltung von Datenbanken

SQL selbst ist eine Sprache zur Verwaltung von Datenbanken. Die drei Buchstaben stehen für Structured Query Language und werden im Deutschen meist »eskuh-ell« gesprochen. Im Englischen gibt es neben der Aussprache »es-kju-ell« noch die Variante »sie-kwell«, mit einem scharfen »ß« am Anfang (wie das Wort sequel). Mit SQL-Befehlen kann man Daten aus einer Datenbank holen oder in einer Datenbank speichern bzw. sie verändern. Hier ist ein einfaches Beispiel: SELECT title FROM tl_article WHERE id =36;

Dieser SQL-Befehl selektiert den Inhalt des Feldes title in der Datenbanktabelle tl_article, und zwar beim Datensatz mit der ID 36. Sie werden mit SQL-Befeh-

len kaum direkten Kontakt haben, aber SQL wird von Webanwendungen wie phpMyAdmin oder Contao im Hintergrund die ganze Zeit benutzt.

67

3.5

3

XAMPP: Der Offline-Webspace

3.6

phpMyAdmin verwaltet die Datenbanken von MySQL

Da die manuelle Eingabe von SQL-Befehlen nicht jedermanns Sache ist, enthält XAMPP Lite eine Webanwendung namens phpMyAdmin. Das Programm erleichtert das Leben eines jeden Webentwicklers, aber auch hier ist der Name zumindest für Einsteiger verwirrend. Das Programm ist eine in PHP geschriebene Webanwendung zur Administration von MySQL-Datenbanken und phpMySQLAdmin wäre wohl ein deutlicherer Name. Als Webanwendung wird phpMyAdmin über den Browser bedient: 왘

Geben Sie http://localhost/ ein, um die XAMPP-Startseite aufzurufen.

왘

Klicken Sie in der Navigation unten auf den Link phpMyAdmin.

Daraufhin erscheint die Startseite von phpMyAdmin. Falls Sie beim XAMPP-Sicherheitscheck ab Seite 58 ein Root-Passwort vergeben haben, müssen Sie in der Anmeldung als Benutzernamen »root« und das von Ihnen vergebene Passwort eintragen (Abbildung 3.15).

Abbildung 3.15 Die Startseite von phyMyAdmin

phpMyAdmin wird bei der Arbeit mit Contao im Idealfall nur benötigt, um vor der Installation von Contao eine Datenbank anzulegen. In dieser Datenbank werden dann vom Contao-Installtool automatisch die benötigten Tabellen und Felder angelegt. Sie können das Erstellen einer Datenbank am besten gleich einmal üben: 1. Geben Sie in das Eingabefeld unterhalb von Neue Datenbank anlegen den gewünschten Namen der Datenbank an, z. B. db_test. 2. Klicken Sie auf die Schaltfläche Anlegen.

68

XAMPP-Matrix – die Komponenten im Überblick

Fertig. Links in der Sidebar ist jetzt der Eintrag db_test (0) zu sehen, und auf der Festplatte wurde der Ordner c:\xampplite\mysql\data\db_test angelegt. Falls Sie die eben erstellte Datenbank wieder löschen möchten, ist auch das mit phpMyAdmin ganz einfach: 1. Klicken Sie auf der Startseite von phpMyAdmin links in der Übersicht auf die zu löschende Datenbank db_test. 2. Klicken Sie rechts oben auf den knallroten Link Löschen. Es erscheint die Frage, ob Sie den Befehl DROP DATABASE 'db_test' wirklich ausführen möchten. 3. Sie möchten! Bestätigen Sie die Frage mit einem Klick auf OK. Und schon ist die Datenbank wieder weg. Starten von phpMyAdmin Um phpMyAdmin zu starten, gibt es auch noch zwei Alternativen: 왘

Im XAMPP Control Panel genügt ein Klick auf die Schaltfläche Admin für den MySQLServer.

왘

Im Browser führt die URL http://localhost/phpmyadmin direkt dorthin.

Wichtig ist nur, dass Sie einen Weg kennen, um das Programm zu starten.

3.7

XAMPP-Matrix – die Komponenten im Überblick

Die folgende Abbildung zeigt eine Übersicht der XAMPP-Komponenten und ihrer wichtigsten Einstellungen:

Abbildung 3.16 Die XAMPP-Matrix – Überblick der Komponenten

Die Konfigurationsdateien sind nur der Vollständigkeit halber gelistet. Dort werden Sie normalerweise nichts ändern müssen.

69

3.7

In diesem Kapitel erfahren Sie alles über die Installation von Contao, zuerst lokal auf Ihrem Rechner und dann auf dem echten Webspace. Danach gibt es Hinweise zum Troubleshooting und die Anleitung zum Transfer einer Website von Ihrem Rechner auf den Online-Webspace.

4

Die Installation von Contao

In diesem Kapitel installieren Sie Contao – zunächst lokal auf dem mit XAMPP erstellten Offline-Webspace auf Ihrem Rechner und dann live auf einem OnlineWebspace.

4.1

Vorbereitung: Die Systemvoraussetzungen

Damit Contao reibungslos funktioniert, müssen auf dem Webspace folgende Voraussetzungen erfüllt sein: 왘

PHP ab Version 5.2

왘

MySQL ab Version 4.1 (Besser und schneller ist Version 5.x.)

Außerdem sollten zwei PHP-Erweiterungen installiert sein: 왘

GDlib, damit Contao hochgeladene Bilder bearbeiten kann

왘

SOAP zur Installation von Erweiterungen aus dem Backend heraus

Mit dem Contao-Systemdiagnosetool können Sie ganz einfach überprüfen, ob alle Voraussetzungen erfüllt sind. Ab Seite 83 wird geschildert, wie das gemacht wird. Contao herunterladen Vor einer Installation von Contao sollten Sie in der Regel die aktuelle Version herunterladen: 왘

http://www.contao.org/herunterladen.html

Auf dieser Seite steht immer die neueste Version zur Verfügung, und bei Bedarf gibt es noch ein paar weiterführende Links zum Thema.

71

4

Die Installation von Contao

4.2

Offline: Contao auf Ihrem Rechner installieren

Zum Kennenlernen von Contao installieren Sie es in diesem Abschnitt auf Ihrem Rechner, sodass Sie auch offline damit arbeiten können. Im Ordner contaobuch werden Sie eine leere Website erstellen, die Sie im Laufe der nächsten Kapitel nach und nach entwickeln. Schritt 1: Contao-Dateien in den Ordner »contaobuch« kopieren Im ersten Schritt erstellen Sie einen neuen Ordner für das neue Projekt und kopieren die Contao-Dateien in diesen Ordner. Online würde man das mit einem FTP-Programm machen, offline reichen der Windows Explorer oder Apples Finder. ToDo: Dateien in den Ordner »contaobuch« kopieren 1. Erstellen Sie einen Ordner namens contaobuch unterhalb der DocumentRoot des Apache: c:\xampplite\htdocs\contaobuch\ 2. Laden Sie die aktuelle Contao-Version von contao.org herunter. 3. Entpacken Sie das ZIP-Archiv in einen Ordner auf Ihrer Festplatte. 4. Öffnen Sie den Ordner contao-2.9.*, wobei das Sternchen für die aktuelle Versionsnummer steht. 5. Kopieren Sie die Dateien aus diesem Ordner in den Ordner contaobuch.

Der Ordner contaobuch sollte nach diesen Schritten ungefähr so aussehen wie in Abbildung 4.1.

Abbildung 4.1 Der Ordner »contaobuch« enthält die Dateien von Contao.

72

Offline: Contao auf Ihrem Rechner installieren

Im Ordner contaobuch liegen die index.php, einige Stylesheets und eine Datei mit dem etwas seltsamen Namen .htaccess.default. Außerdem gibt es die Ordner plugins, system, templates, tl_files und contao, in denen wiederum jede Menge Dateien und Unterordner enthalten sind. Alles zusammen ist Contao. Schritt 2: Datenbank erstellen mit phpMyAdmin Vor der eigentlichen Installation legen Sie mit phpMyAdmin zunächst eine Datenbank an. Auf Seite 68 haben Sie das im Abschnitt über phpMyAdmin testweise vielleicht schon einmal gemacht. ToDo: Datenbank erstellen mit phpMyAdmin 1. Öffnen Sie phpMyAdmin im Browser: http://localhost/phpmyadmin/ 2. Falls Sie bei der Installation von XAMPP dem MySQL-Benutzer root ein Passwort gegeben haben, müssen Sie sich jetzt anmelden. 3. Suchen Sie auf der Startseite von phpMyAdmin das Eingabefeld unterhalb der Überschrift MySQL localhost. 4. Geben Sie hier den Namen der Datenbank ein, die angelegt werden soll: »db_contaobuch« 5. Prüfen Sie eine Zeile tiefer, ob der Zeichensatz utf8_general_ci ist. 6. Erstellen Sie mit einem Klick auf Anlegen die Datenbank.

Wenn alles geklappt hat, sollte die Seite im Browser so aussehen wie in Abbildung 4.2.

Abbildung 4.2 phpMyAdmin – die Datenbank »db_contaobuch« wurde erzeugt.

73

4.2

4

Die Installation von Contao

Die Nachricht »Es wurden keine Tabellen in der Datenbank gefunden« ist völlig okay, denn das Erstellen der Tabellen in der Datenbank erledigt das Contao-Installationstool in Schritt 6. Der Datenbankname beginnt mit »db_« Die Datenbank muss nicht unbedingt db_contaobuch heißen, aber der Name ist auch nicht zufällig gewählt. Durch das Kürzel db_ am Anfang wissen Sie immer, dass der Name für eine Datenbank steht. Ohne das db_ könnte contaobuch auch ein Ordnername oder etwas völlig anderes sein.

Schritt 3: Das Passwort für das Installtool ändern Das Installationsprogramm liegt im Unterordner contaobuch/contao/ und heißt install.php. Um es zu starten, geben Sie im Browser folgende URL ein: 왘

http://localhost/contaobuch/contao/install.php

Wenn alles geklappt hat, erscheint die »GNU Lesser General Public License«. Nach einem Klick auf Lizenz akzeptieren beginnt dann die Installation, und zwar mit einer Passworteingabe für das Installtool selbst. Das Installtool kommt nicht nur bei der ersten Installation zum Einsatz, sondern auch bei späteren Updates. Deshalb bleibt es in der Regel auf dem Webspace liegen und wird mit einem Passwort geschützt. Falls Sie nicht die Lizenz sehen, gibt es folgende Möglichkeiten: 왘

Sie werden gebeten, Ihre FTP-Zugangsdaten einzugeben. Bei einer Installation auf einem Unix-basierten System (also auch auf Mac OS X) kann das durchaus passieren. Lesen Sie ab Seite 87 Abschnitt 4.4 über den FTP-Modus von Contao. Sie müssen vor der Installation von Contao noch etwas erledigen.

왘

Sie sehen eine Fehlermeldung 404 oder Not Found. Prüfen Sie die URL und die Pfadangabe im Dateisystem. Denken Sie daran, dass der erste einfache Slash nach localhost für den Ordner htdocs steht.

왘

Sie sehen eine Fehlermeldung Verbindung konnte nicht aufgebaut werden. Der Webserver ist nicht gestartet. Lesen Sie auf Seite 56 Abschnitt 3.2.3, »Testen, ob der Webserver funktioniert«.

Wenn die Ursache für die Meldung behoben wurde, geht es weiter zum folgenden ToDo.

74

Offline: Contao auf Ihrem Rechner installieren

ToDo: Das Passwort für das Installtool ändern 1. Rufen Sie im Browser das Installtool auf: http://localhost/contaobuch/contao/install.php 2. Bestätigen Sie die »GNU Lesser General Public License« mit einem Klick auf Lizenz akzeptieren. 3. Geben Sie bei der ersten Anmeldung das Standardpasswort »contao« (ohne Anführungsstriche) ein, und klicken Sie dann auf Anmelden. 4. Geben Sie im Feld Passwort ein neues Passwort ein. 5. Wiederholen Sie die Passworteingabe im Feld Bestätigung. 6. Notieren Sie das Passwort. Wenn Sie wollen, gleich hier: Passwort für das Installtool: ……………………………… 7. Klicken Sie auf Passwort speichern (Abbildung 4.3).

Abbildung 4.3 Passwort für das Installtool ändern

Zusätzliche Sicherheitsmaßnahmen zum Schutz der Installation Wenn jemand Zugriff auf das Installtool hat, kann er die komplette Website löschen. Falls Ihnen ein Passwort als Schutz nicht ausreicht, werden oberhalb der Passworteingabe zwei zusätzliche Sicherheitsmaßnahmen erwähnt: 왘

install.php umbenennen. Am besten in einen schlecht zu erratenden Dateinamen wie zum Beispiel 43r7za.php.

왘

install.php komplett vom Webspace entfernen. Falls das Installtool bei einem Update wieder benötigt wird, laden Sie es einfach wieder hoch.

Sie können den Zugriff auf den Ordner contao auch mit einer .htaccess schützen. Viele Webhoster stellen ein Hilfsprogramm zum Erstellen eines Verzeichnisschutzes bereit. Das sind aber wie gesagt alles reine Vorsichtsmaßnahmen.

75

4.2

4

Die Installation von Contao

Schritt 4: Einen Verschlüsselungsschlüssel erstellen Nach der Änderung des Passwortes erscheint in Grün die Meldung Das Standardpasswort wurde geändert und darunter gleich der nächste Schritt, Einen Verschlüsselungsschlüssel erstellen. In einem kleinen Browserfenster müssen Sie eventuell etwas nach unten scrollen, um den in Abbildung 4.4 dargestellten Schritt sehen zu können.

Abbildung 4.4 Verschlüsselungsschlüssel erstellen – einfach klicken

ToDo: Einen Verschlüsselungsschlüssel erstellen 1. Um einen zufälligen Verschlüsselungsschlüssel zu generieren, lassen Sie das Eingabefeld Verschlüsselungsschlüssel leer. 2. Klicken Sie einfach auf die Schaltfläche Schlüssel erstellen bzw. speichern direkt unterhalb des leeren Eingabefeldes.

Durch diesen Klick wird eine ziemlich lange, zufällige Zeichenfolge wie z. B. d548ea51fd715c7b41cbe32776f391c5 generiert und in der Datenbank gespeichert. Der Schlüssel findet nur intern Verwendung. Sie müssen ihn nirgendwo selbst eingeben und brauchen ihn deshalb momentan auch nicht unbedingt zu notieren. Der Verschlüsselungsschlüssel steht später auch im Backend Der während der Installation erzeugte Schlüssel wird in der Datenbank gespeichert und ist später bei Bedarf auch im Backend abrufbar: 왘

System 폷 Einstellungen 폷 Sicherheitseinstellungen

Dort heißt er übrigens Hashwert für Verschlüsselung. Sie sollten ihn nicht nachträglich ändern.

76

Offline: Contao auf Ihrem Rechner installieren

Schritt 5: Kontakt mit der Datenbank aufnehmen In diesem Schritt geben Sie die Zugangsdaten zur Datenbank ein, damit Contao eine Verbindung herstellen kann (Abbildung 4.5). Die in Rot erscheinende Meldung Keine Verbindung zur Datenbank möglich! ist kein Grund zur Sorge, da Sie ja noch gar nicht probiert haben, eine Verbindung herzustellen.

Abbildung 4.5 Zugangsdaten für die Datenbank eingeben

Im folgenden ToDo geben Sie die Zugangsdaten zur Datenbank ein. ToDo: Kontakt mit der Datenbank aufnehmen 1. Im Feld Treiber wird der gewünschte Datenbankserver gewählt. Mit Treiber ist das PHP-Modul gemeint, das Kontakt mit MySQL aufnimmt. Ideal ist MySQLi, mit »i« wie »improved« (verbessert) am Ende. Falls das nicht klappt, probieren Sie MySQL ohne das »i« hinten dran. 2. Im Feld Host geben Sie den Namen des Rechners ein, auf dem der Datenbankserver läuft: »localhost«. 3. Im Feld Benutzername tragen Sie »root« ein. Das ist der MySQL-Benutzer, der Zugriff auf die Datenbank hat.

77

4.2

4

Die Installation von Contao

ToDo: Kontakt mit der Datenbank aufnehmen (Forts.) 4. Im Feld Passwort tragen Sie das auf Seite 58 beim Sicherheitscheck von XAMPP vergebene Passwort für den MySQL-Benutzer root ein. Das Passwort erscheint bei der Eingabe im Klartext, um Tippfehler zu vermeiden. Haben Sie kein Passwort vergeben, lassen Sie das Feld leer. 5. Im Feld Datenbank tragen Sie den Namen der auf Seite 73 in Schritt 2 erstellen Datenbank ein: »db_contaobuch« 6. Die Felder Dauerhafte Verbindung, Zeichensatz und Portnummer lassen Sie unverändert. Der Zeichensatz UTF-8 heißt bei MySQL wirklich UTF8, ohne Bindestrich. »Korrigieren« Sie das nicht! 7. Überprüfen Sie Ihre Eingaben noch einmal. Wenn alles korrekt ist, bestätigen Sie sie mit einem Klick auf Einstellungen speichern (Abbildung 4.5).

Jetzt versucht das Installtool, Kontakt mit der Datenbank aufzunehmen. Wenn alles geklappt hat, erscheint wie in Abbildung 4.5 in grünen Lettern die Meldung Datenbankverbindung ok. Unterhalb der Schaltfläche Einstellungen speichern haben Sie noch die Möglichkeit zur Änderung der Kollation. Bei der Erstellung der Datenbank mit phpMyAdmin am Anfang der Installation haben Sie bereits sichergestellt, dass der Zeichensatz für die Datenbank auf utf8_general_ci steht und müssen hier nichts aktualisieren. Kollation: Zeichensatz und Sortierung Vereinfacht gesagt geht es bei der Kollation um den verwendeten Zeichensatz, die Sortierung der Daten in der Datenbank und solche Sachen. Die Einstellung utf8_general_ci bewirkt unter anderem, dass man bei der Anmeldung am Backend beim Benutzernamen nicht auf Groß- und Kleinschreibung achten muss (»ci« wie case insensitive): »k.jones«, »K.JONES« oder »K.Jones« funktioniert alles. Wenn Sie das nicht möchten, können Sie stattdessen »utf8_bin« verwenden.

Schritt 6: Die Datenbanktabellen anlegen Wenn das Installtool eine Verbindung mit der Datenbank hergestellt hat, kann es in diesem Schritt die von Contao benötigten Tabellen und Felder in der Datenbank einrichten. Die in Rot erscheinende Meldung Die Datenbank ist nicht aktuell! ist nicht schlimm, denn bei einer Erstinstallation ist die Datenbank ja noch komplett leer und deshalb natürlich nicht auf dem neuesten Stand.

78

Offline: Contao auf Ihrem Rechner installieren

ToDo: Tabellen aktualisieren und in der Datenbank anlegen 1. Scrollen Sie ein paar Bildschirmseiten langsam nach unten, bis die Schaltfläche Datenbank aktualisieren ins Bild kommt. 2. Prüfen Sie dabei, ob alle Kontrollkästchen vor den SQL-Befehlen Create Table '...' angekreuzt sind. 3. Klicken Sie auf die Schaltfläche Datenbank aktualisieren, um die angezeigten SQLBefehle auszuführen (Abbildung 4.6).

Abbildung 4.6

Neue Datenbanktabellen anlegen

Nach einem Klick auf Datenbank aktualisieren führt das Installtool die angezeigten SQL-Befehle aus und erzeugt die von Contao benötigten Tabellen und Felder in der Datenbank. Vorsicht, wenn sich mehrere Anwendungen diese Datenbank teilen Wenn das Contao-Installtool anbietet, »fremde« Tabellen aus der Datenbank zu entfernen, sollten Sie vorsichtig sein, falls die Datenbank auf Ihrem Server auch noch von anderen Anwendungen benutzt wird. SQL-Befehle zum Löschen wie DROP TABLE sollten Sie nur ankreuzen, wenn Sie sich mehr als hundertprozentig sicher sind, dass die Tabellen nicht benötigt werden.

79

4.2

4

Die Installation von Contao

Schritt 7: Kein Frontend-Template importieren Nach dem Anlegen der Datenbankstrukturen bietet Ihnen das Installtool an, ein Template zu importieren (Abbildung 4.7).

Abbildung 4.7 (K)ein Template importieren

Mit Template ist an dieser Stelle ein Frontend-Template gemeint. Das ist eine komplette, vorkonfigurierte Website, und ein Importieren überschreibt alle eventuell vorhandenen Daten in der Datenbank. Da Sie bei dieser Installation eine leere Site erstellen möchten, die im Laufe des Buches weiterentwickelt wird, importieren Sie hier bitte nichts und gehen gleich weiter zum nächsten Schritt. Für jedes Buchkapitel gibt es ein Frontend-Template auf der DVD Auf der Buch-DVD finden Sie im Ordner beispieldateien ab Kapitel 6 für jedes Kapitel ein Frontend-Template, sodass Sie buchstäblich bei jedem Kapitel anfangen können. Eine genaue Anleitung zur Vorgehensweise finden Sie auf der DVD in beispieldateien/ anleitung_frontend_templates.txt.

Schritt 8: Ein Administratorkonto anlegen Zum Abschluss der Installation erstellen Sie noch ein Administratorkonto. Falls Sie bezüglich Benutzernamen und Passwort keine besonderen Wünsche haben, können Sie für die lokale Installation der Beispielsite ruhig »k.jones« und »kevinjones« nehmen wie in der Online-Demo. Auf einem Online-Webspace wäre das keine so gute Idee. ToDo: Administratorkonto anlegen 1. Tragen Sie im Feld Benutzername einen Benutzernamen für den Administrator ein. 2. Im Feld Name geben Sie den vollen Namen des Administrators ein. 3. Das Feld E-Mail-Adresse muss ausgefüllt werden, auch wenn bei einer lokalen Installation kein Mailserver vorhanden ist, der Meldungen an den Admin schicken könnte. 4. Geben Sie ein Passwort ein, und bestätigen Sie es im Feld Bestätigung.

80

Offline: Contao auf Ihrem Rechner installieren

ToDo: Administratorkonto anlegen (Forts.) 5. Notieren Sie die Zugangsdaten für das Administratorkonto: Admin-Benutzername: …………………………… Name: …………………………… E-Mail-Adresse: …………………………… Admin-Passwort: ………………………………… 6. Klicken Sie auf Ein Administratorkonto erstellen.

Abbildung 4.8 zeigt die Eingabemaske im Browser.

Abbildung 4.8

Ein Administratorkonto anlegen

Wenn alles geklappt hat, können Sie sich mit einem Klick auf den Link Contao Backend-Login ganz rechts unten am Backend anmelden. In den nächsten Kapiteln lernen Sie das Backend genauer kennen. Wenn Sie mit http://localhost/contaobuch das Frontend der frisch installierten Website aufrufen, ist dort außer der Meldung »No pages found« noch nichts zu sehen. Das ist okay und wird bald geändert. Im Ordner auf der Festplatte befinden sich noch einige Dateien für die Beispielsite Music Academy, die für eine leere Site nicht benötigt werden: 왘

die Datei templates/music_academy.sql

왘

der Ordner tl_files/music_academy/

왘

basic.css, music_academy.css und print.css im Hauptordner

Diese Dateien und Ordner können Sie löschen, wenn Sie die Beispielsite Music Academy nicht installieren.

81

4.2

4

Die Installation von Contao

Ungeduldig? Kapitel 5, »Ein kurzer Rundgang im Backend« Falls Sie im Moment nur offline arbeiten möchten, können Sie die folgenden Abschnitte über die Installation auf einem Online-Webspace, die dabei möglichen Probleme und den Umzug einer lokalen Site ins Web auch später lesen. Dann springen Sie jetzt zu Seite 101 mit Kapitel 5, »Ein kurzer Rundgang im Backend«.

4.3

Online: Contao im Web installieren

Für die ersten Schritte und zur Entwicklung von Websites ist eine lokale Installation gut geeignet, aber früher oder später wird Contao auf einem online erreichbaren Webspace installiert.

4.3.1

Informationen über Webhoster im Forum

Hosting ist laut Wikipedia »die Unterbringung von Internetprojekten, die sich in der Regel auch öffentlich durch das Internet abrufen lassen«, und ein Webhoster oder Provider ist eine Firma, die die »Unterbringung von Internetprojekten« ermöglicht, indem sie Ihnen Webspace zur Verfügung stellt.

Abbildung 4.9

82

Das Forum »Erfahrungen mit Webhostern«

Online: Contao im Web installieren

Bevor Sie Contao auf einem Online-Webspace installieren, sollten Sie eventuell kurz im Forum nachschauen, ob andere Forenmitglieder im Bereich Erfahrungen mit Webhostern vielleicht bereits etwas über Erfahrungen mit Contao bei Ihrem Provider veröffentlicht haben (Abbildung 4.9).

4.3.2

Webspace prüfen: Das Contao-Systemdiagnosetool

Mit einem kleinen PHP-Programm können Sie prüfen, ob der Webspace alle Voraussetzungen für Contao erfüllt. Dazu laden Sie zunächst einmal die Datei system-check-2.9.x.zip mit der passenden Versionsnummer herunter: 왘

http://www.contao.org/den-live-server-konfigurieren.html

Entpacken Sie die ZIP-Datei. Darin enthalten ist die Datei contao-check.php, die Sie gleich benötigen. ToDo: Webspace testen mit »contao-check.php« 1. Kopieren Sie die Datei contao-check.php von Ihrer Festplatte per FTP in das Verzeichnis, in das Sie Contao installieren möchten. 2. Rufen Sie das Systemdiagnosetool im Browser auf. Falls Sie die Datei in das Hauptverzeichnis des Webservers (DocumentRoot) kopiert haben, geben Sie dazu folgende URL ein: http://ihre-domain.de/contao-check.php Ersetzen Sie ihre-domain.de dabei durch Ihre eigene Domain.

Falls die Datei nicht gefunden wird und Sie einen 404-Error bekommen, stimmt eventuell der Ordner nicht. Das Hauptverzeichnis für Webseiten heißt bei XAMPP htdocs, kann auf dem Webspace aber verschiedene Namen haben: webseiten, html, httpdocs, public_html oder etwas ganz anderes. Fast nichts ist unmöglich. Wenn es klappt, zeigt der Browser den Contao system check (Abbildung 4.10). Der Contao system check überprüft zwei Dinge: 왘

Im ersten Teil geht es um die PHP-Konfiguration. In Abbildung 4.10 ist hier alles hellgrün hinterlegt.

왘

Im zweiten Teil werden Dateiberechtigungen (»File permissions«) überprüft. Im Beispiel ist auch hier alles im grünen Bereich.

Weiter unten gibt es noch einen dritten Teil, in dem geprüft wird, ob alle von Contao benötigten Dateien (»Files«) vorhanden sind und die nötigen Berechtigungen haben. Da noch keine Dateien vorhanden sind, haben momentan alle einen hellroten Hintergrund. Diese Warnungen können Sie momentan ignorieren, aber nach der Installation sind sie sehr nützlich.

83

4.3

4

Die Installation von Contao

Abbildung 4.10 Der »Contao system check«

Safe Mode Hack empfohlen? Keine Panik – siehe Seite 87! Falls das Diagnosetool vermeldet, dass Sie einen Safe Mode Hack benötigen, erschrecken Sie nicht. Ab Seite 87 wird beschrieben, wie das geht.

4.3.3

Dateien auf den Webspace kopieren

Die Installation von Contao auf dem Webspace bei Ihrem Webhoster verläuft abgesehen von kleinen Unterschieden genau wie eine lokale Installation. Der erste wichtige Unterschied ist, dass Sie die Dateien mit einem FTP-Programm wie FileZilla oder WinSCP auf den Webspace kopieren. Nach dem Kopieren können Sie mit contao-check.php überprüfen, ob alle Dateien korrekt hochgeladen wurden. ToDo: Die Contao-Dateien auf den Webserver kopieren 1. Starten Sie Ihr FTP-Programm, und stellen Sie eine Verbindung zum Webspace her. 2. Kopieren Sie die Contao-Dateien in den gewünschten Ordner auf dem Webspace. Falls Contao nicht im Hauptverzeichnis installiert werden soll, müssen Sie zuerst einen entsprechenden Ordner anlegen.

84

Online: Contao im Web installieren

ToDo: Die Contao-Dateien auf den Webserver kopieren (Forts.) 3. Starten Sie nach dem Kopiervorgang contao-check.php, und überprüfen Sie im dritten Teil, Files, ob alle Dateien kopiert worden sind, welche Dateiberechtigungen (CHMOD) sie haben und wer der Besitzer (Owner) ist.

In Abbildung 4.11 steht der Status für alle gezeigten Dateien auf Validated. Alles okay.

Abbildung 4.11 Der Systemcheck überprüft die hochgeladenen Dateien.

Das Systemdiagnosetool erstellt auf dem Webspace den Ordner contao-check und die Datei contao-check.txt. Beide können Sie wieder löschen, denn sonst fragen Sie sich irgendwann später, woher diese kommen. Auch das Diagnosetool contaocheck.php selbst sollte nach Benutzung wieder entfernt werden. Andere ContaoAdmins und Hacker kennen das Tool auch und könnten dadurch wertvolle Informationen über das System erhalten. Versteckte Dateien: Wenn ».htaccess« nicht mitkopiert wurde Einige FTP-Programme übertragen standardmäßig keine versteckten Dateien. Besonders betroffen davon sind Dateien mit dem Namen .htaccess. Falls das Diagnosetool meldet, dass diese Dateien fehlen, liegt das wahrscheinlich an den Einstellungen in Ihrem FTP-Programm. Die .htaccess-Dateien sorgen dafür, dass bestimmte Dateien und Ordner wie z. B. die Log- oder Cache-Dateien nicht von jedem Besucher eingesehen werden können, und gewährleisten so die Sicherheit des Systems.

85

4.3

4

Die Installation von Contao

4.3.4

Zugangsdaten für die Datenbank

Wenn mit den Dateien alles in Ordnung ist, geht es weiter mit der Datenbank. Falls bereits eine Datenbank vorhanden ist, halten Sie die Zugangsdaten bereit, die in den Unterlagen stehen sollten, die Sie von Ihrem Webhoster bekommen haben: 왘

Datenbankname: ………………………………

왘

Benutzername: ………………………………

왘

Passwort: ………………………………

Auf dem Online-Webspace kann es noch zwei zusätzliche Details geben: 왘

Hostname: ……………………………… Wenn Contao und MySQL nicht auf demselben Rechner laufen, lautet der Hostname nicht localhost, sondern dbserver.provider.de oder ähnlich.

왘

Portnummer: …… Eventuell kommuniziert die MySQL-Datenbank nicht auf dem Standardport 3306. Das passiert selten, kann aber vorkommen.

Wenn Sie diese Informationen nicht finden können, fragen Sie einfach Ihren Webhoster. Falls es noch keine Datenbank gibt, müssen Sie mit phpMyAdmin oder einem vergleichbaren Tool vor der Installation eine Datenbank anlegen. Wie das geht, wird auf Seite 73 beschrieben.

4.3.5

Die Installation im Überblick

Die eigentliche Installation verläuft online genau wie die bereits beschriebene Offline-Installation. Das folgende ToDo zeigt eine kurze Zusammenfassung. ToDo: So installieren Sie Contao auf einem Online-Webspace 1. Starten Sie das Installationsprogramm von Contao. Liegt Contao nicht im Hauptverzeichnis, müssen Sie nach dem ersten einfachen Slash noch entsprechende Ordnernamen ergänzen: http://ihre-domain.de/contao/install.php 2. Wenn nach dem Aufruf des Installtools statt der Passworteingabe das Dialogfeld Dateien via FTP bearbeiten erscheint, informieren Sie sich ab Seite 87 zunächst über den Safe Mode Hack. 3. Das Installtool ist passwortgeschützt. Geben Sie zunächst das Standard-Passwort »contao« ein.

86

Safe Mode Hack: Der FTP-Modus von Contao

ToDo: So installieren Sie Contao auf einem Online-Webspace (Forts.) 4. Ändern Sie das Passwort für das Installtool, und notieren Sie es: Passwort für das Installtool (online): ……………………………… 5. Klicken Sie auf Passwort speichern. 6. Lassen Sie das Eingabefeld für den Verschlüsselungsschlüssel leer, und klicken Sie auf Schlüssel erstellen bzw. speichern. 7. Geben Sie die Zugangsdaten für die Datenbank ein, und klicken Sie auf Einstellungen speichern, um eine Verbindung zur Datenbank herzustellen. Lassen Sie die Kollation unverändert auf utf8_general_ci. 8. Aktualisieren Sie die Datenbanktabellen, indem Sie nach unten scrollen, die Schaltfläche Datenbank aktualisieren suchen und anklicken. 9. Importieren Sie (k)ein Frontend-Template. Bei der Erstinstallation ist das Importieren ungefährlich, aber bei einem späteren Import werden alle bereits bestehenden Daten in der Datenbank überschrieben.

Haben Sie ein Frontend-Template importiert, brauchen Sie kein Admin-Konto anzulegen, weil dies in einem Frontend-Template bereits enthalten ist. Der Standard-Admin von Contao-Installationen ist der Benutzer k.jones mit dem Passwort kevinjones. Falls Sie kein Frontend-Template importiert haben, müssen Sie noch ein AdminKonto eröffnen. Notieren Sie sich in beiden Fällen die Zugangsdaten: Admin-Benutzername (online): ……………………… Name: …………………………… E-Mail-Adresse: …………………………… Admin-Passwort (online): ……………………… Melden Sie sich danach am Backend an, um zu testen, ob alles geklappt hat. Nach dem Import eines Frontend-Templates sollte auch das Frontend bereits »in voller Blüte« erscheinen; ohne den Import eines Templates erscheint lediglich die Mitteilung »No pages found«, weil es noch keine Seiten gibt. Zugriff auf das Verzeichnis während der Entwicklung schützen Während der Entwicklung sollten Sie den Zugriff auf den Ordner schützen. Insbesondere Suchmaschinenrobots werden so vorerst draußen gehalten. Viele Webhoster stellen für einen solchen Verzeichnisschutz komfortable Tools zur Verfügung.

4.4

Safe Mode Hack: Der FTP-Modus von Contao

Dieser Abschnitt ist nur relevant, wenn das Intalltool Sie mit der Aufforderung zur Eingabe der FTP-Daten begrüßt oder wenn das Systemdiagnosetool die Mel87

4.4

4

Die Installation von Contao

dung You will most likely not be able to run Contao without the Safe Mode Hack. ausgibt. Vereinfacht gesagt kommt die Meldung, weil Contao seine eigenen Dateien nicht ändern darf. Das ist nötig, um zum Beispiel Konfigurationsdateien zu speichern oder mit dem integrierten Dateimanager Bilder und Dokumente zu verwalten. Der Grund dafür ist wahrscheinlich, dass PHP als Modul betrieben wird und unter einem anderen Benutzernamen läuft als der FTP-Benutzer, dem die Dateien gehören. Details in »Know-how: Dateiberechtigungen – das 1x1 zu 644« Wenn Sie genau wissen wollen, was es mit dem Safe Mode Hack auf sich hat, lesen Sie bitte Abschnitt 4.8, »Know-how: Dateiberechtigungen – das 1x1 zu 644«, ab Seite 97.

4.4.1

»Sie benötigen wahrscheinlich den Safe Mode Hack«

Abbildung 4.12 zeigt den Contao system check für einen Webspace, bei dem der Safe Mode Hack (SMH) benötigt wird. Mit vollem Namen heißt der SMH übrigens Dateien via FTP bearbeiten oder auch FTP für den Dateizugriff verwenden.

Abbildung 4.12 »Sie werden ziemlich sicher den SMH benötigen«

88

Safe Mode Hack: Der FTP-Modus von Contao

Nach der Einrichtung merken Sie nichts vom Safe Mode Hack Der SMH wird von Contao nur verwendet, wenn es Dateien auf dem Webspace verändern muss. Das kann zum Beispiel eine Änderung in der Konfiguration sein, wenn Bilder automatisch verkleinert werden oder im Dateimanager Dateien hochgeladen werden. Nach der Einrichtung arbeitet der SMH im Hintergrund, und Sie merken davon nichts.

4.4.2

Eine Alternative zum SMH: PHP als CGI oder Fast-CGI

Bei einigen Webhostern gibt es die Möglichkeit, mithilfe der .htaccess den PHPInterpreter nachträglich von Modul auf CGI/Fast-CGI umzustellen. Schauen Sie sich im Contao-Forum nach Erfahrungen mit Ihrem Provider um, oder fragen Sie ihn direkt. Das wäre eine Alternative zum SMH. Beim Webhoster all-inkl.com geht das zum Beispiel so: 왘

Benennen Sie die mitgelieferte Datei .htaccess.default im Hauptverzeichnis von Contao in .htaccess um. Die Datei muss punkthtaccess heißen, nichts davor, nichts dahinter und keine Leerstelle.

왘

Öffnen Sie die Datei im Editor, und schreiben Sie folgenden Befehl in die erste Zeile der Datei: AddHandler php-fastcgi .php

왘

Speichern Sie die Datei .htaccess, und laden Sie sie hoch.

왘

Rufen Sie erneut den contao-check.php auf.

Die Meldung bezüglich des SMH sollte verschwunden sein. Bei anderen Webhostern heißen die Befehle eventuell anders. Fragen Sie einfach nach. Die Datei ».htaccess« konfiguriert den Apache Die Datei .htaccess kann für viele verschiedene Dinge benutzt werden – unter anderem dazu, den Apache zu konfigurieren, ohne Zugriff auf dessen Konfigurationsdatei httpd.conf zu haben. Sie spielt auch eine wichtige Rolle beim Erzeugen von lesbaren URLs in Kapitel 18.1, »Lesbare Adressen: URLs umschreiben«.

4.4.3

Online: So richten Sie den Safe Mode Hack ein

Wenn Sie auf Ihrem Online-Webspace den Safe Mode Hack benötigen, erscheint beim Aufrufen des Installtool das Dialogfeld Dateien via FTP bearbeiten (Abbildung 4.13).

89

4.4

4

Die Installation von Contao

Abbildung 4.13 FTP-Zugangsdaten für den Safe Mode Hack eingeben

Tragen Sie in dieses Formular die ganz normalen FTP-Zugangsdaten ein, mit denen Sie sich auch mit Ihrem FTP-Programm bei Ihrem Webspace anmelden, und klicken Sie auf die Schaltfläche FTP-Einstellungen speichern. Wenn alles geklappt hat, müssen Sie im nächsten Schritt die Lizenz akzeptieren und können dann mit der eigentlichen Installation beginnen. Contao wird bei Bedarf im Hintergrund Dateien via FTP ändern und speichern, ohne dass Sie davon etwas merken. Falls es nicht geklappt hat, erscheint die Meldung »Keine Verbindung zum FTPServer möglich«, und Sie dürfen es noch einmal probieren. Besonders fehleranfällig ist die Eingabe im Feld Relativer Pfad zum Contao-Verzeichnis. Dieser Pfad muss aus Sicht des FTP-Programms angegeben werden und unbedingt mit einem Backslash enden. Sollten Sie sich nicht sicher sein, probieren Sie einfach aus, welcher Pfad der richtige ist: 왘

Starten Sie Ihr FTP-Programm.

왘

Loggen Sie sich mit den im Formular eingetragenen Daten ein.

왘

Schauen Sie, in welchem Verzeichnis Sie nach der Anmeldung landen.

왘

Falls Sie nicht im Contao-Ordner sind, merken Sie sich die Namen der Ordner auf dem Weg dorthin.

90

Safe Mode Hack: Der FTP-Modus von Contao

Wenn Sie zum Beispiel nach der FTP-Anmeldung im Hauptordner landen und danach erst in den Unterordner www wechseln müssen, um Contao zu finden, geben Sie im Installtool den relativen Pfad www/ ein, mit einem Backslash hinten dran. Anleitung für den Safe Mode Hack (SMH) im Forum Falls es irgendwelche Probleme geben sollte, gibt es im Forum einen Thread, der sich speziell mit dem SMH beschäftigt: 왘

Safe Mode Hack anlegen http://bit.ly/bZ2CzN

Dort wird auch beschrieben, wie Sie den SMH manuell in die Konfigurationsdatei eintragen und wie Sie testen können, ob er wirklich funktioniert.

4.4.4

Offline-Webspace: SMH bei einer lokalen Installation umgehen

Auf Unix-basierten Systemen kann es passieren, dass Sie auch bei einer lokalen Offline-Installation mit der Bitte um Eingabe der FTP-Zugangsdaten begrüßt werden. Da MAC OS X auch ein Unix-basiertes System ist, gilt das auch für MAMP oder XAMPP für den Mac. Prinzipiell gäbe es mehrere Möglichkeiten, das Problem zu lösen: 왘

Sie könnten einen lokalen FTP-Server einrichten und dann im Installtool die entsprechenden FTP-Zugangsdaten eingeben. Wenn Sie wissen, wie das geht, spricht nichts dagegen.

왘

Sie könnten versuchen, das PHP in MAMP oder XAMPP nicht als Modul, sondern als (Fast-)CGI zu betreiben. Auch hier gilt: Wenn Sie wissen, wie das geht, spricht nichts dagegen.

Am einfachsten ist es aber, den ganzen Webserver und damit auch das als Modul betriebene PHP unter Ihrem Benutzerkonto und mit Ihren Berechtigungen laufen zu lassen. Auf einem Online-Webspace ist dies jedoch nicht empfehlenswert, denn der Webserver hat nicht ohne Grund sein eigenes Benutzerkonto, aber offline auf Ihrem Rechner ist das eine gute und vergleichsweise einfache Lösung. So ändern Sie die Konfiguration des Apache: 왘

Suchen Sie zunächst die Konfigurationsdatei des Apache. Diese heißt in jedem Fall httpd.conf und liegt wahrscheinlich im Ordner etc/ unterhalb der MAMP/ XAMPP-Installation. Dieser Ordner ist nicht identisch mit dem Systemordner /etc, in dem Sie auf keinen Fall irgendetwas ändern sollten. Das kann den kompletten Rechner zerstören.

91

4.4

4

Die Installation von Contao

왘

Suchen Sie in der httpd.conf die Zeilen, in denen der Benutzername und die Benutzergruppe festgelegt wird, unter denen der Webserver läuft: User daemon Group daemon

왘

Ersetzen Sie in der ersten Zeile das »daemon« durch den Benutzernamen, mit dem Sie sich an Ihrem Computer anmelden. Die »Group« lautet wahrscheinlich »admin«. Mögliche Werte wären also: User peter Group admin

Geben Sie dabei statt peter bitte Ihren Benutzernamen ein. 왘

Um die Änderungen wirksam werden zu lassen, müssen Sie die httpd.conf speichern und den Apache einmal neu starten.

Wenn alles geklappt hat, können Sie die Offline-Installation jetzt auf Seite 74 mit dem Aufruf des Contao-Installtools fortsetzen, die Lizenz bestätigen und das Passwort ändern.

4.5

Alte PHP-Version: Parse error…

Contao benötigt mindestens die PHP-Version 5.2 und versteht in dieser Beziehung auch keinen Spaß. Sollten Sie beim Aufrufen des Installtools eine Fehlermeldung bekommen, die mit den Worten »Parse error: syntax error« (Abbildung 4.14) beginnt, läuft auf Ihrem Webspace ziemlich sicher eine alte PHP-Version.

Abbildung 4.14 Diese Fehlermeldung deutet auf eine alte PHP-Version hin.

Bei vielen Webhostern ist eine passende PHP-Version bereits von vornherein aktiviert, bei anderen muss sie erst eingeschaltet werden. Dazu gibt es im Prinzip zwei Möglichkeiten: 왘

Sie ändern die PHP-Version in der Verwaltungsoberfläche Ihres Webspace.

왘

Sie schalten die PHP-Version mithilfe der .htaccess um.

92

Sonstige potenzielle Probleme bei der Installation

Das Umschalten der PHP-Version mit der .htaccess geht so ähnlich wie das weiter oben beschriebene Umschalten vom PHP-Modul auf Fast-CGI. Sie müssen dazu in der .htaccess einen entsprechenden Befehl einfügen, der von Provider zu Provider variiert. Vielleicht gibt es im Contao-Forum Hinweise für Ihren Webhoster, vielleicht gibt es auch eine FAQ oder Wissensdatenbank, in der der Wechsel zu PHP5 beschrieben steht. Listing 4.1 zeigt Kandidaten zur Umschaltung auf PHP5 per .htaccess: AddHandler x-httpd-php5 .php AddHandler php5-cgi .php AddHandler php-cgi2 .php AddHandler php-fastcgi5 .php AddType x-mapp-php5 .php AddType application/x-httpd-php5 .php Action php /cgi-php5/php Listing 4.1

Möglichkeiten zur Aktivierung von PHP5

Am besten rufen Sie die folgende URL im Browser auf und kopieren die Zeilen aus Listing 4.1 von der Webseite. Damit vermeiden Sie Tippfehler. 왘

http://www.contao.org/den-live-server-konfigurieren.html

Probieren Sie immer nur jeweils eine Zeile aus, nicht mehrere auf einmal.

4.6

Sonstige potenzielle Probleme bei der Installation

Die häufigsten Probleme sind der SMH und die falsche PHP-Version, was allerdings kaum noch vorkommt, da PHP5 weit verbreitet ist. Bei weiteren Problemen wie dem Erscheinen wirrer Zeichen auf dem Bildschirm oder einer komplett weißen Seite gibt es folgende Anlaufpunkte: 왘

FAQ – Abschnitt »Installation« http://www.contao.org/haeufige-fragen.html

왘

Contao-Forum – Allgem. Installationsfragen http://bit.ly/9s5SmE

Im Forum können Sie lesen, suchen und Fragen stellen. Gerade Fragen zur Installation sind schon häufig gestellt worden. Die Suchfunktion hilft beim Finden. Wenn Sie trotz ausführlicher Suche nichts gefunden haben, nehmen Sie sich bitte die Zeit, um den Sachverhalt und die Fragen so präzise wie möglich zu formulieren. Der Name des Providers, der Tarif, die Contao-Version und eine Beschrei-

93

4.6

4

Die Installation von Contao

bung der bisherigen Maßnahmen gehören auf jeden Fall dazu. Bei einer lokalen Installation ist das Betriebssystem genauso wichtig wie die verwendeten Versionen von Apache, PHP und MySQL. Das kostet zwar alles Zeit und Mühe, und durch die Installationsprobleme ist man sowieso schon gefrustet, aber denken Sie bitte daran, dass die anderen Forumsteilnehmer die von Ihnen gestellten Fragen freiwillig und in ihrer Freizeit beantworten. Eine gut formulierte Frage erhöht die Chance auf eine gut formulierte Antwort. Wenn Sie sich die Zeit nehmen, den Sachverhalt genau zu beschreiben, sind andere eher dazu bereit, sich mit Ihrem Problem zu beschäftigen.

4.7

Umzug: Von XAMPP auf den Online-Webspace

Wenn Sie eine Website in einer lokalen Umgebung entwickelt haben, muss diese irgendwann auf den Online-Webspace umziehen. Dazu benötigen Sie nur ein bisschen Zeit, ein FTP-Programm zum Übertragen der Dateien und phpMyAdmin zum Exportieren und Importieren der Daten aus der Datenbank. Schritt 1: Dateien auf den Online-Webspace übertragen Dieser Schritt ist einfach: 왘

Starten Sie Ihr FTP-Programm.

왘

Stellen Sie eine Verbindung zum Online-Webspace her.

왘

Kopieren Sie alle Dateien der lokalen Contao-Installation in den gewünschten Ordner auf dem Online-Webspace.

Fertig. Damit sind alle benötigten Dateien an Ort und Stelle. Schritt 2: Die lokale Datenbank exportieren Um die Daten aus der Datenbank von Ihrem Rechner in die Datenbank auf dem Online-Webspace zu transferieren, exportieren Sie zunächst die Daten aus der lokalen Datenbank. Das Ergebnis ist ein SQL-Dump, eine Datei mit der Endung .sql, die jede Menge SQL-Befehle enthält. Diese Datei wird auf dem Online-Webspace wieder importiert. Los geht es aber erst einmal mit dem Exportieren der lokalen Datenbank: 왘

Starten Sie phpMyAdmin im Browser: http://localhost/phpmyadmin/.

왘

Öffnen Sie die gewünschte Datenbank, und klicken Sie oben auf das Register Exportieren.

94

Umzug: Von XAMPP auf den Online-Webspace

왘

Ändern Sie gegebenenfalls die Einstellungen wie in Abbildung 4.15 gezeigt.

왘

Klicken Sie rechts unten auf OK.

Abbildung 4.15 Die Datenbank der Website exportieren

Speichern Sie die Datei auf der Festplatte, und merken Sie sich Ordner und Dateinamen. Schritt 3: Den SQL-Dump auf dem Webspace importieren In diesem Schritt werden die exportierten Daten in die Datenbank auf dem Online-Webspace importiert: 왘

Starten Sie phpMyAdmin auf dem Online-Webspace. Die URL zum Starten von phpMyAdmin erfahren Sie von Ihrem Webhoster.

왘

Klicken Sie links in der Übersicht auf die Datenbank, in die die SQL-Datei importiert werden soll.

왘

Klicken Sie auf das Register Importieren.

95

4.7

4

Die Installation von Contao

왘

Wählen Sie mit einem Klick auf Durchsuchen die in Schritt 2 exportierte SQL-Datei aus, die Sie auf Ihrer Festplatte gespeichert haben.

왘

Klicken Sie rechts unten auf OK.

Abbildung 4.16 Datenbank auswählen und SQL-Datei importieren

Die SQL-Exportdatei wird jetzt auf den Server übertragen und ihr Inhalt in die ausgewählte Datenbank eingelesen. Wenn alles glattgeht, ist die Datenbank kurz danach mit den Daten aus dem SQL-Dump gefüllt worden. Schritt 4: Das Contao-Installtool starten Im vierten und letzten Schritt müssen Sie das Contao-Installtool starten und die letzten Feinheiten erledigen: 왘

Starten Sie das Contao-Installtool auf dem Online-Webspace.

왘

Geben Sie das Passwort für das Contao-Installtool ein, das Sie in der XAMPPInstallation auf Ihrem Rechner benutzt haben.

왘

Falls die Datenbank auf dem Online-Webspace einen anderen Namen oder andere Zugangsdaten hat, müssen Sie die Zugangsdaten zur Datenbank im Installtool aktualisieren.

왘

Prüfen Sie die anderen Einstellungen des Installtools.

Wenn alles okay ist, können Sie sich jetzt am Backend anmelden und die Website online administrieren. Der Umzug ist damit abgeschlossen.

96

Know-how: Dateiberechtigungen – das 1x1 zu 644

4.8

Know-how: Dateiberechtigungen – das 1x1 zu 644

Die meisten Webhoster haben Linux-Server, und unter Linux gibt es ein recht ausgeklügeltes Sicherheitssystem. Das folgende kurze Einmaleins zu Linux-Dateiberechtigungen lesen Sie als Neuling im Bereich Serververwaltung am besten ganz langsam und wenn Sie wirklich wach und aufnahmefähig sind. Los geht’s.

4.8.1

Besitzer, Benutzer und Berechtigungen: 644 und 755

Jeder Ordner und jede Datei hat unter Linux einen Besitzer (Owner). In der Regel ist das der Benutzer, der den Ordner oder die Datei erstellt hat. Dieser Besitzer kann bei Bedarf aber auch nachträglich geändert werden, und zwar mit dem Befehl chown (change owner). Außerdem gibt es für Ordner und Dateien Zugriffsberechtigungen (file permissions), mit denen festgelegt wird, wer was damit machen darf. Diese Berechtigungen kann man mit dem Befehl chmod (change mode) ändern. Auf einem Linux-Server gibt es neben dem Administrator oft noch jede Menge andere Benutzer. Auf einem Shared-Hosting-Server teilen sich viele Kunden einen Server, und in der Regel ist jeder Kunde ein Benutzer. Bei den Dateiberechtigungen werden die Benutzer in drei Klassen eingeteilt: 왘

in den Besitzer einer Datei

왘

in die Gruppe, zu der er gehört

왘

in alle anderen Benutzer auf dem Server

Auch bei den Zugriffsrechten gibt es drei Möglichkeiten, die jeweils eine unterschiedliche Punktzahl bekommen: Recht

Punkte

Lesen

4

Schreiben (ändern, speichern etc.)

2

Ausführen

1

Tabelle 4.1

Dateiberechtigungen unter Linux – Übersicht

Die Punkte für die Zugriffsrechte werden einfach addiert und für alle drei Benutzerklassen hintereinander geschrieben. Zwei weit verbreitete Beispiele sind die Kürzel 644 und 755:

97

4.8

4

Die Installation von Contao

왘

644 bedeutet, dass der Besitzer die Datei lesen und schreiben (4 + 2) darf, die Gruppe und alle anderen hingegen dürfen nur lesen. Das ist bei Dateien auf einem Webspace der Normalfall.

왘

755 heißt, dass der Besitzer alles darf, die Gruppe und alle anderen auf dem Server dürfen nur lesen und ausführen. Ordner haben online oft die Berechtigung 755.

777 bedeutet, dass jeder Benutzer auf dem Server alles damit machen darf. Dateiberechtigungen per FTP-Programm ändern Viele FTP-Programme können dazu benutzt werden, auf dem Webspace die Berechtigungen für Dateien und Ordner zu ändern. Klicken Sie einfach mal mit der rechten Maustaste auf eine Datei, und schauen Sie sich das Kontextmenü an. Vielleicht steht da etwas von CHMOD. Bei FileZilla heißt der Befehl übrigens ganz einfach Dateiberechtigungen...

4.8.2

PHP und Contao: Benutzerrechte, Modul und (Fast)CGI

So weit, so gut, aber warum ist das nun ein Problem? Contao muss, um reibungslos funktionieren zu können, Schreibrechte für seine eigenen Dateien haben, um diese ändern und speichern zu dürfen. Normalerweise wird Contao per FTP hochgeladen. Die dabei erstellten Ordner und Dateien gehören nach dem Hochladen zu Ihrem Benutzernamen, zum Beispiel w0091673. Der Webserver läuft aber unter einem anderen Benutzernamen, zum Beispiel unter wwwrun oder nobody. Spannend wird diese Geschichte nun, wenn der PHP-Interpreter ins Spiel kommt, denn Contao wird vom PHP-Interpreter ausgeführt hat, dieselben Zugriffsrechte, und deshalb ist es so wichtig, unter welchem Benutzernamen PHP läuft: 왘

Wenn der PHP-Interpreter unter einem anderen Benutzer läuft als der FTPBenutzer, dem die Dateien gehören, darf Contao seine eigenen Dateien nicht ändern. Das ist oft der Fall, wenn PHP als Modul läuft.

왘

Wenn der PHP-Interpreter und somit Contao unter dem Namen des FTPBenutzers laufen, gibt es keine Probleme. Das ist bei CGI und FastCGI normalerweise der Fall.

Bei einigen Webhostern gibt es auch Konfigurationen, bei denen PHP als Modul läuft und trotzdem kein Safe Mode Hack benötigt wird, wie zum Beispiel bei iNetRobots.com, der Firma von Contao-Gründer Leo Feyer, und anderen Contao-Partnern. Das ist natürlich im Grunde genommen ideal: Sie haben den schnellen Modulmodus und benötigen trotzdem keinen SMH.

98

Know-how: Dateiberechtigungen – das 1x1 zu 644

4.8.3

Was der Safe Mode Hack genau macht

Dateien haben als Standardzugriffsrecht meist den Wert »644« und Ordner »755«. Das bedeutet, dass sie nur vom Besitzer geändert werden können, alle anderen Benutzer auf dem Server dürfen sie nur lesen. Im Klartext: 왘

Wenn PHP unter einem anderen Benutzernamen läuft als der FTP-Benutzer, darf Contao bei den sicheren Zugriffsrechten 644 und 755 seine eigenen Dateien nicht ändern.

왘

Läuft PHP hingegen unter dem gleichen Namen wie der FTP-Benutzer, hat Contao dessen Rechte und alles funktioniert reibungslos.

Der Safe Mode Hack greift nun, wenn PHP unter einem anderen Benutzernamen als der FTP-Benutzer läuft, und bewirkt, dass Contao beim Ändern der Dateien eine FTP-Verbindung aufbaut und als FTP-Benutzer agiert. Das ist wie erwähnt ganz schön pfiffig und um Klassen besser als ein Sicherheitsloch namens »777«.

4.8.4

Sicherheitsloch: »Alles auf 777« ist keine gute Idee

Die »Triple Seven« von Boeing ist ein wunderbar geräumiges Flugzeug für Langstreckenflüge mit viel Beinfreiheit, die »Triple Seven« als Dateiberechtigung auf einem Webspace ist hingegen keine so gute Idee: Dateien und Ordner mit der Zugriffsberechtigung 777 dürfen von jedem Benutzer auf dem Servercomputer verändert werden. Beim Shared Hosting teilen Sie sich den Server mit vielen anderen Kunden, und ein irgendwo auf diesem Server installiertes bösartiges Programm darf dann auch bei Ihnen sein Unwesen treiben: 왘

777-Dateien können geändert oder gelöscht werden.

왘

777-Ordner sind eine Einladung für »Kuckuckseier«. Fremde Dateien mit dubiosen Inhalten, die in einem Ordner auf Ihrem Webspace liegen und von dort aus serviert werden, ohne dass Sie etwas davon ahnen.

Sie merken schon: 777 ist sehr bequem, aber keine gute Idee, außer für Ordner, in denen temporäre Dateien aufbewahrt werden, die regelmäßig gelöscht werden. Viele Webanwendungen haben aber kein Äquivalent zum Safe Mode Hack anzubieten und empfehlen deshalb, die Zugriffsrechte für bestimmte Dateien und Ordner auf 777 zu stellen, damit die Anwendung überhaupt funktioniert. Auch in Foren wird das manchmal ganz locker als Lösung für alle Probleme empfohlen: »Einfach alles auf 777 setzen, dann funzt das.«

99

4.8

4

Die Installation von Contao

Eine bequeme Lösung ist aber selten eine sichere. Der Contao system check sagt zu diesem Thema: Under no circumstances should you try to solve this problem by changing the file permissions! Versuchen Sie keinesfalls, das Problem durch eine Änderung der Dateiberechtigungen zu lösen! Die Meldung erscheint zwar in kleiner, hellgrauer Schrift, aber die Aussage ist deutlich: Just don’t do it. Vielleicht erzählt Ihnen in einem Forum ein freundlicher Experte, dass 777 nicht wirklich gefährlich sei. Überlegen Sie einfach, ob Sie auf Empfehlung dieses Experten zur Hauptverkehrszeit mit verbundenen Augen eine gut befahrene, mehrspurige Schnellstraße überqueren würden. Wenn nicht, dann ist 777 nichts für Sie. Sie sind dann nicht gutgläubig genug und besitzen zu wenig Risikobereitschaft.

100

In diesem Kapitel machen Sie einen kurzen Rundgang durch das Backend der frisch installierten, noch leeren Website. Dabei erledigen Sie gleich ein paar wichtige Einstellungen und lernen den Dateimanager und die Erweiterungsverwaltung kennen.

5

Ein kurzer Rundgang im Backend

Das Backend ist, wie in Kapitel 2, »Schnelldurchlauf: So funktioniert Contao«, erwähnt wurde, der Administrationsbereich von Contao. Im Backend wird aber nicht nur verwaltet, sondern auch richtig gearbeitet. Bevor Sie im nächsten Kapitel die erste eigene Site mit Contao erstellen, möchte ich Ihnen jetzt das Backend kurz vorstellen.

5.1

Überblick: Das Backend

Rufen Sie im Browser das Backend von Contao auf: 왘

http://localhost/contaobuch/contao/

Nach einer Anmeldung als Administrator sieht das Backend aus wie in Abbildung 5.1.

Abbildung 5.1 Das Backend nach einer Anmeldung als Administrator

101

5

Ein kurzer Rundgang im Backend

Das Backend ist sehr übersichtlich und in drei große Bereiche eingeteilt: 왘

Der Infobereich (oben) enthält die Benutzereinstellungen, eine Frontend-Vorschau, einen Link zur Backend-Startseite und die Abmeldung.

왘

Der Navigationsbereich (links) enthält fünf Gruppen mit Backend-Modulen, die in diesem Kapitel weiter unten kurz vorgestellt werden.

왘

Der Arbeitsbereich (rechts) zeigt jeweils Detailinformationen zum ausgewählten Backend-Modul.

Diese drei Bereiche werden im Folgenden kurz vorgestellt.

5.2

Ganz oben: Der Infobereich

Der Infobereich oben im Backend ist recht schmal und nicht besonders auffällig. Er enthält aber einige nützliche Links.

Abbildung 5.2 Der Infobereich im Backend

Links oben steht zunächst einmal die Versionsnummer von Contao. In der Zeile darunter gibt es, rechtsbündig ausgerichtet, vier Links: 왘

Benutzer zeigt, welcher Benutzer gerade angemeldet ist.

왘

Frontend-Vorschau öffnet das Frontend in einem neuen Tab oder Browserfenster. Dies ist insbesondere dann nützlich, wenn Sie mit verschiedenen Benutzern oder unveröffentlichten Elementen arbeiten.

왘

Startseite führt immer zurück zur Startseite des Backends.

왘

Mit einem Klick auf Abmelden können Sie, ja, genau das.

Nach einem Klick auf den Link Benutzer sehen Sie die Seite Persönliche Daten aus Abbildung 5.3. Auf dieser Seite kann jeder Benutzer seine persönlichen Einstellungen ändern, und zwar Name (den vollständigen, nicht den Benutzernamen), E-Mail-Adresse und Passwort-Einstellungen. Außerdem kann man hier auch die Backend-Einstellungen wie zum Beispiel die im Backend verwendete Sprache festlegen und den Cache leeren. In Abbildung 5.3 steht ganz oben groß, grün und mit einem Pfeil davor die ID des gerade bearbeiteten Datensatzes. Eine ähnliche Mitteilung werden Sie des Öfteren sehen, denn in Contao ist alles ein Datensatz, egal ob Benutzer, Seite, Artikel oder Inhaltselement, und jeder Datensatz hat eine ID.

102

Links: Der Navigationsbereich (Backend-Module)

Abbildung 5.3 »Persönliche Daten« von Administrator Kevin Jones

Ganz unten gibt es in Abbildung 5.3 zwei Schaltflächen zum Speichern: Speichern speichert die aktuellen Einstellungen in der Datenbank, lässt das Formular aber geöffnet. Speichern und schliessen macht genau das, was draufsteht. Der Aufbau des Arbeitsbereiches Der übersichtliche, zweispaltige Aufbau des Arbeitsbereiches ist typisch für Contao. Die einzelnen Rubriken können Sie mit einem Klick auf die grüne Überschrift ein- und ausblenden. Contao merkt sich diese Einstellungen, und zwar pro Benutzer.

5.3

Links: Der Navigationsbereich (Backend-Module)

Der Navigationsbereich ordnet die zur Verfügung stehenden Backend-Module in fünf Kategorien:

103

5.3

5

Ein kurzer Rundgang im Backend

왘

Inhalte. In dieser Kategorie befinden sich alle Module, die Inhalt für die Webseiten erzeugen: Artikel, Nachrichten und einiges mehr.

왘

Layout. Die Module in dieser Kategorie haben mit Struktur und Aussehen der Site zu tun.

왘

Benutzerverwaltung. Contao kennt Mitglieder (Frontend-Benutzer) und Benutzer (Backend-Benutzer).

왘

System enthält diverse Module zur Konfiguration und Wartung der ContaoInstallation.

왘

Benutzerfunktionen zeigt Module für den angemeldeten Benutzer.

Mit einem Klick auf das Minus- bzw. Plus-Zeichen vor dem Namen der Kategorie können Sie die Bereiche einfach ein- und ausblenden, je nachdem, wie Sie es gerade gern hätten. Die einzelnen Backend-Module lernen Sie im weiteren Verlauf des Buches ausführlich kennen.

5.4

Rechts: Der Arbeitsbereich

Der Arbeitsbereich trägt seinen Namen nicht zu Unrecht, denn nach der Auswahl des gewünschten Backend-Moduls links im Navigationsbereich geht es rechts an die Arbeit. Hier werden Sie einen Großteil Ihrer Zeit verbringen. Auf der Startseite enthält der Arbeitsbereich unter anderem eine Übersicht der wichtigsten Tastenkürzel. Mausfans dürfen natürlich auch weiterhin gern auf die entsprechenden Links und Schaltflächen klicken, aber die Tastaturkürzel sind eine echte Arbeitserleichterung. Windows

Mac

Aktion

(Alt)+ (s)

(Ctrl) + (s)

Speichern

(Alt)+ (c)

(Ctrl) + (c)

Speichern und schließen (Close)

(Alt)+ (e)

(Ctrl) + (e)

Speichern und bearbeiten (Edit)

(Alt)+ (n)

(Ctrl) + (n)

Neues Element

(Alt)+ (b)

(Ctrl) + (b)

Zurück (Back)

(Alt)+ (t)

(Ctrl) + (t)

Nach oben (Top)

(Alt)+ (f)

(Ctrl) + (f)

Frontend-Vorschau

(Alt)+ (q)

(Ctrl) + (q)

Abmelden (Quit)

Tabelle 5.1

104

Die wichtigsten Tastenkürzel im Backend

»System 폷 Einstellungen«

Probieren Sie es einfach einmal aus: 왘

Rufen Sie den Bereich Persönliche Daten auf (im Infobereich).

왘

(Alt)+ (c) entspricht einem Klick auf Speichern und schliessen.

Je nach Browser und Betriebssystem können diese Kürzel ein bisschen abweichen. So müssen Sie in Mozilla Firefox und Google Chrome unter Windows gleichzeitig (Alt) + (ª) drücken und gedrückt halten. Die (ª)-Taste wird übrigens manchmal auch (Shift) genannt und dient zum Großschreiben einzelner Buchstaben. Nacheinander gedrückt dient die Kombination (Alt) + (ª) unter Windows übrigens zum Wechseln zwischen installierten Tastaturlayouts (Englisch, Deutsch, Niederländisch etc.). Wenn Ihre Tastatur also plötzlich keine Umlaute ausgibt und »y« und »z« vertauscht sind, drücken Sie einfach noch ein- oder zweimal (Alt) + (ª). Mozilla Firefox: Kürzel nur mit (ALT)-Taste aufrufen Wenn Sie auch im Firefox die Tastenkürzel lieber nur mit der (Alt)-Taste eingeben möchten (statt mit (Alt) + (ª)), können Sie das ändern: 왘

Geben Sie im Firefox in der Adresszeile »about:config« ein.

왘

Bestätigen Sie die Meldung, dass Sie vorsichtig sein werden (und seien Sie es auch wirklich).

왘

Geben Sie oben im Filter die Zeichen »ui.« ein. Das steht für user interface, auf Deutsch Benutzeroberfläche, und danach sehen Sie nur noch Einstellungen, die mit diesen Zeichen beginnen.

왘

Doppelklicken Sie in der Zeile ui.key.chromeAccess auf den Wert, und ändern Sie ihn von »4« auf »5«.

왘

Ändern Sie in der Zeile ui.key.contentaccess darunter den Wert von »5« auf »4«.

Die Änderungen werden nach der Bestätigung mit OK ohne Speicherung und ohne Neustart des Firefox sofort wirksam. Probieren Sie es aus.

5.5

»System 폷 Einstellungen«

Im Backend-Modul System 폷 Einstellungen werden die wichtigsten Systemeinstellungen vorgenommen. Auch hier können Sie mit einem Klick auf den grünen Titel die einzelnen Rubriken ein- und ausblenden. In diesem Kapitel lernen Sie erst einmal die allerwichtigsten Bereiche kennen.

105

5.5

5

Ein kurzer Rundgang im Backend

5.5.1

Der »Titel der Webseite«

Gleich die allererste Option heißt Titel der Webseite (Abbildung 5.4).

Abbildung 5.4 Neulich im »Backend 폷 System 폷 Einstellungen«

Der hier eingegebene Titel der Webseite wird bei der Erstellung des für Suchmaschinen wichtigen title-Elements im Head einer Website verwendet, und zwar zusammen mit dem Titel der einzelnen Webseiten, den Sie später bei der Erstellung der Seiten definieren. Dabei benutzt Contao zuerst den Titel der Seite und dann nach einem Bindestrich den hier definierten »Titel der Webseite«. Im folgenden ToDo ändern Sie diesen Titel der Webseite. ToDo: »Titel der Webseite« ändern 1. Öffnen Sie das Backend-Modul System 폷 Einstellungen. 2. Ändern Sie den Titel in »Websites erstellen mit Contao«. 3. Klicken Sie weiter unten auf Speichern und schliessen (oder probieren Sie das oben beschriebene Tastaturkürzel (Alt) + (c)).

Klicken Sie nach dem Speichern rechts oben im Infobereich auf Startseite. Auf der Backend-Startseite sehen Sie links oben im Arbeitsbereich gleich zweimal den neuen Titel Websites erstellen mit Contao, einmal in Weiß und einmal in Grün (Abbildung 5.5). Der hier eingegebene Titel der Website kann später in einem sogenannten Startpunkt einer Webseite überschrieben werden. Mehr dazu finden Sie in Kapitel 6, »Die erste Website mit Contao«.

106

»System 폷 Einstellungen«

Abbildung 5.5 Der »Titel der Webseite« auf der Startseite des Backends

Webseite vs. Website Die Begriffe rund um das Webpublishing stammen aus dem Englischen, und bei der Übertragung ins Deutsche passieren manchmal seltsame Dinge. So wurde eine web page auf Deutsch zu einer Webseite, aber das englische web site als Bezeichnung für eine Menge zusammengehörender Webseiten hat keine wirklich gelungene deutsche Entsprechung gefunden. In der deutschen Übersetzung von Contao meint der Begriff Webseite denn auch nicht nur eine einzelne Webseite, sondern manchmal auch die Website. Diese doppelte Bedeutung von Webseite findet man im deutschsprachigen Web häufiger, aber bisweilen führt es zu Verwirrungen, wie hier bei Titel der Webseite. Ich werde an den entsprechenden Stellen darauf hinweisen oder gleich die Begriffe Site bzw. Website benutzen.

5.5.2

Das Format für Angaben von Datum und Zeit

Der nächste Bereich in System 폷 Einstellungen heißt Datum und Zeit.

Abbildung 5.6 »System 폷 Einstellungen 폷 Datum und Zeit«

Die Standardvorgabe ist dort Y-m-d, was auf einer Webseite als 2010-07-23 dargestellt wird. Dieses Datumsformat ist zwar sehr praktisch, aber eher ungewöhnlich. Mit einem Klick auf das rot umrandete Dreieck bekommen Sie eine kurze Hilfestellung zu den möglichen Datumsformaten. Für eine deutsche Website ist zum Beispiel d.m.Y nicht schlecht, was als 22.07.2010 dargestellt wird. Für die Uhrzeit ergibt H:i das Format 14:58.

107

5.5

5

Ein kurzer Rundgang im Backend

ToDo: Das Datumsformat einstellen 1. Öffnen Sie das Backend-Modul System 폷 Einstellungen. 2. Geben Sie als Datumsformat das Kürzel d.m.Y ein. 3. Das Zeitformat soll H:i sein. 4. Datums- und Zeitformat ist die Kombination: d.m.Y H:i 5. Zeitzone ist Europe/Berlin, wenn der Computer, auf dem der Webserver läuft, in Deutschland steht. 6. Speichern und schliessen.

Genau wie der Titel können die Einstellungen für Datum und Uhrzeit später in einem Startpunkt einer Webseite überschrieben werden. Speicherzeiten: Die Verfallszeit einer Session eventuell erhöhen Im Bereich Speicherzeiten regelt die Verfallszeit einer Session, wie lange Sie im Backend inaktiv sein können, bevor Sie sich wieder anmelden müssen. Gemessen wird in Sekunden, und die Standardeinstellung ist 3600. Falls Sie sich während der Lektüre dieses Buches im Backend zu oft wieder anmelden müssen, erhöhen Sie diese Zahl auf z. B. 36000. Später sollten Sie die letzte Null wieder entfernen.

5.6

Der Dateimanager: »System 폷 Dateiverwaltung«

In diesem Abschnitt lernen Sie die Dateiverwaltung von Contao kennen. Dahinter verbirgt sich ein Dateimanager, mit dem Sie ohne FTP-Programm Dateien von einem lokalen Rechner auf den Servercomputer übertragen und dort verwalten können. Der Zugriff des Dateimanagers ist aus Sicherheitsgründen auf den Upload-Ordner tl_files und dessen Unterordner begrenzt. Alle Dateien, die Sie für Ihre Website benötigen und die nicht zur Contao-Installation gehören, werden unterhalb dieses Ordners gespeichert: zum Beispiel Grafiken für das Theme, Fotos für Artikel oder zum Download angebotene PDFs. »tinymce.css« und »tiny_templates« gibt es schon Bereits vorhanden sind die Datei tinymce.css und ein Ordner namens tiny_templates. Mehr zu diesen beiden erfahren Sie in Kapitel 22.2, »Tipps und Tricks zum TinyMCE«, bei der Optimierung des Editors TinyMCE.

108

Der Dateimanager: »System 폷 Dateiverwaltung«

5.6.1

Ordner erstellen mit dem Dateimanager

In diesem Abschnitt erstellen Sie eine Ordnerstruktur zur Ablage von Dateien (Abbildung 5.7).

Abbildung 5.7 Empfohlene Ordnerstruktur unterhalb von »tl_files«

Diese Ordner werden Sie im weiteren Verlauf des Buches benutzen: 왘

In beispielsite/content/ bewahren Sie alle für den Inhalt der Beispielsite relevanten Medien, wie z. B. Fotos und Bilder, auf.

왘

Für beispielsite/downloads/ erstellen Sie in Kapitel 19.5 einen geschützten Download-Bereich.

왘

Der Ordner importieren ist eine Zwischenstation für alles, was im Verlaufe des Buches in Contao importiert wird.

왘

Im Unterordner themes/blaues_theme speichern Sie alle Dateien, die zu diesem Theme gehören.

Im folgenden ToDo erstellen Sie diese Ordnerstruktur. ToDo: Eine Ordnerstruktur für die Beispielsite anlegen 1. Öffnen Sie das Backend-Modul Dateiverwaltung. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Ordner. Daraufhin erscheinen am rechten Rand braun hinterlegte, leicht blinkende weiße Pfeile. 3. Klicken Sie auf den Pfeil neben Dateisystem, um einen Ordner auf der obersten Ebene einzufügen. 4. Geben Sie den Namen »beispielsite« ein. 5. Klicken Sie auf Speichern und schliessen. 6. Erstellen Sie auf diese Art und Weise die in Abbildung 5.7 dargestellte Ordnerstruktur.

109

5.6

5

Ein kurzer Rundgang im Backend

Falls nicht gleich alles auf Anhieb funktioniert, können Sie die Ordner mit dem blauen Pfeil verschieben und mit dem roten X löschen. Bevor Sie im nächsten Abschnitt ein paar Dateien hochladen, erstellen Sie noch schnell einen Ordner unterhalb von templates, den Sie später bei der Erstellung des ersten Themes benötigen. Dazu wechseln Sie in das Backend-Modul Templates, da der Dateimanager nur unterhalb des Ordners tl_files zuständig ist. ToDo: Einen neuen Ordner anlegen 1. Wechseln Sie in das Backend-Modul Templates. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Ordner. 3. Klicken Sie rechts neben Dateisystem auf das braune Symbol mit dem weißen Pfeil nach rechts. 4. Der Name des Ordners soll »blaues_theme« sein. 5. Speichern und schliessen Sie.

5.6.2

Dateien mit dem Dateimanager hochladen

Nach dem Erstellen der Ordnerstruktur laden Sie in diesem Abschnitt mit dem Dateimanager ein paar Dateien auf den Webspace hoch. Als Übungsobjekt dienen dabei ein Vorschaubild namens screenshot.jpg und zwei Grafiken mit einem Farbverlauf (engl. gradient). header_gradient.jpg enthält einen dunkelblauen Balken mit einem leichten blauen Farbverlauf darunter und wird in Kapitel 8, »Navigationen erstellen in Contao«, zur Gestaltung des Kopfbereichs eingesetzt. graydient.jpg ist ein grauer Farbverlauf und kommt erst in Kapitel 16 auf der Startseite zum Einsatz. Im folgenden ToDo laden Sie diese Grafiken hoch. ToDo: Dateien mit dem Dateimanager hochladen 1. Öffnen Sie das Backend-Modul Dateiverwaltung. 2. Klicken Sie oben im Arbeitsbereich auf Datei-Upload. 3. Wählen Sie den Ordner themes/blaues_theme/grafiken mit einem Klick auf den braun hinterlegten, blinkenden Pfeil daneben. 4. Wählen Sie per Durchsuchen die drei Grafikdateien von der Buch-DVD aus dem Ordner grafiken für Kapitel 5. 5. Klicken Sie auf Dateien hochladen und zurück.

110

Der Dateimanager: »System 폷 Dateiverwaltung«

Abbildung 5.8

Der Dateimanager mit den hochgeladenen Grafiken

Falls Sie die Vorschaubilder für die Grafiken nicht sehen möchten, können Sie diese in den Benutzereinstellungen deaktivieren. Dazu klicken Sie entweder oben im Infobereich auf den Benutzernamen oder links unten im Navigationsbereich auf Benutzerfunktionen 폷 Persönliche Daten. In beiden Fällen kommen Sie in eine Eingabemaske, in der Sie im Bereich Backendeinstellungen die Option Vorschaubilder anzeigen sehen und bei Bedarf ausstellen können. Wenn Sie Grafiken hochladen, werden diese automatisch auf 800 × 600 Pixel verkleinert. Die Standardeinstellungen für den Upload von Dateien können Sie im Backend-Modul System 폷 Einstellungen ändern, und zwar in den Bereichen Dateien und Bilder und Datei-Uploads. »FancyUpload« aktivieren Falls Sie oft mehrere Dateien auf einmal hochladen, können Sie in den Benutzereinstellungen (Persönliche Daten) das Häkchen bei FancyUpload aktivieren setzen. Daraufhin erscheint beim Hochladen von Dateien statt einzelner Durchsuchen-Felder ein FlashProgramm, mit dem Sie mehrere Dateien auf einmal hochladen können.

111

5.6

5

Ein kurzer Rundgang im Backend

5.7

Erweiterungen installieren

In der Einleitung haben Sie gelesen, dass wichtige Erweiterungen wie Nachrichten, Kalender und Newsletter im Kern von Contao integriert sind und sofort nach der Installation zur Verfügung stehen. Zusätzlich gibt es Hunderte von Erweiterungen, die die Funktionalität des Kerns fast beliebig erweitern und die sich komfortabel aus dem Backend heraus installieren lassen.

5.7.1

Die Erweiterungsliste auf »contao.org«

Die Erweiterungen zu Contao werden in einer zentralen Erweiterungsliste auf contao.org gesammelt, die auch unter dem Namen Extension Repository bekannt ist. Sie müssen also auf der Suche nach einer bestimmten Erweiterung nicht das ganze Web durchsuchen, sondern nur zu einer Adresse surfen: 왘

http://www.contao.org/erweiterungsliste.html

Abbildung 5.9

Der Erweiterungskatalog auf »contao.org«

Noch besser ist, dass Sie vom Backend aus Zugriff auf das Extension Repository haben und den Katalog durchsuchen können.

5.7.2

Erweiterungen aus dem Backend heraus installieren

Um den Erweiterungskatalog und die Erweiterungsverwaltung kennenzulernen, installieren Sie in diesem Abschnitt die Erweiterung [BackupDB] von Hagen

112

Erweiterungen installieren

Klemp, die eine bequeme Sicherung der Contao-Datenbank aus dem Backend heraus ermöglicht (siehe auch Kapitel 21.4, »Backups erstellen«).

Abbildung 5.10 Der Erweiterungskatalog im Backend

ToDo: Die Erweiterung »[BackupDB]« installieren 1. Öffnen Sie das Backend-Modul System 폷 Erweiterungskatalog. 2. Falls Sie die Erweiterung [BackupDB] nicht bereits sehen, geben Sie oben im Arbeitsbereich im Feld Suchen das Wort »backup« ein. 3. Klicken Sie in der Liste der gefundenen Erweiterungen auf die grünen Buchstaben [BackupDB], um sich Details zu dieser Erweiterung anzeigen zu lassen. 4. Klicken Sie nach dem Lesen der Infos links unten auf die Schaltfläche Installieren. 5. Auf der nächsten Seite sehen Sie eine kurze Zusammenfassung. Bestätigen Sie die Infos mit einem Klick auf Weiter. 6. Nach der Installation landen Sie im Backend-Modul Erweiterungsverwaltung, in dem die neue Erweiterung bereits angezeigt wird.

Nach diesem ToDo sieht das Backup-Modul System 폷 Erweiterungsverwaltung so aus wie in Abbildung 5.11.

Abbildung 5.11 Die Erweiterungsverwaltung mit der Erweiterung »[BackupDB]«

113

5.7

5

Ein kurzer Rundgang im Backend

In der Erweiterungsverwaltung erhalten Sie einen Überblick über die installierten Erweiterungen und können sie mit den Symbolen rechts daneben bearbeiten, löschen oder aktualisieren. Sobald im Erweiterungskatalog eine neuere Version der Erweiterung vorliegt, wird der Status von Aktuell auf Neue Version verfügbar gesetzt, und Sie können die Erweiterung mit einem Klick auf den grün hinterlegten weißen Haken ganz rechts aktualisieren. Backup erstellen Wenn Sie im Verlauf des Buches ein Backup von der Beispielsite erstellen möchten, finden Sie in Kapitel 21.4, »Backups erstellen«, eine kurze Anleitung dazu.

114

TEIL III Schritt für Schritt zur ersten Website

In diesem Kapitel erstellen Sie die erste Site mit Contao. Die Reise beginnt mit der Erstellung einer Seitenstruktur und geht über Themes und Seitenlayouts weiter zu Frontend-Modulen bis zum ersten Stylesheet. Sie endet mit einem Artikel sowie einem Blick auf ein Template. Den Abschluss bildet ein Überblick über das Zusammenspiel der Komponenten von Contao.

6

Die erste Website mit Contao

Anfangs kommen einem bei der Arbeit mit Contao Begriffe wie Seite, Theme, Seitenlayout, Frontend-Modul, Stylesheet, Artikel und Inhaltselement wie einzelne Puzzleteile vor, die oft nicht so richtig zusammenpassen wollen. Dieses Kapitel erläutert das Zusammenspiel dieser Komponenten und hilft Ihnen bei der Eingewöhnung.

6.1

»No pages found« – Die Seitenstruktur erstellen

Wenn Sie unter der Adresse http://localhost/contaobuch das Frontend der frisch installierten Beispielsite aufrufen, ist es recht übersichtlich. Links oben steht die Meldung »No pages found«, und sonst ist nichts zu sehen (Abbildung 6.1).

Abbildung 6.1 Das Frontend nach der Installation einer leeren Site

117

6

Die erste Website mit Contao

Das ist nicht gerade spektakulär, aber der Befund »No pages found« entspricht den Tatsachen, denn im Backend gibt es tatsächlich noch keine Seiten.

6.1.1

Der Startpunkt für eine neue Website

Die erste Seite, die Sie im Seitenbaum erstellen, ist gleich etwas ganz Besonderes, nämlich ein sogenannter Startpunkt einer Webseite. Mit Webseite ist in diesem Fall die Website gemeint, denn Contao kann in einer Installation mehrere Websites verwalten, und im Seitenbaum beginnt jede Site mit einem solchen Startpunkt. Mit Startpunkt ist übrigens nicht die Startseite für Besucher im Frontend gemeint. Ein Startpunkt dient lediglich zu Verwaltungszwecken im Backend und taucht im Frontend nicht auf. ToDo: Den »Startpunkt einer Webseite« erstellen 1. Rufen Sie das Backend von Contao auf, und melden Sie sich als Administrator an: http://localhost/contaobuch/contao/ 2. Öffnen Sie das Backend-Modul Seitenstruktur. 3. Klicken Sie im Arbeitsbereich oben auf Neue Seite. 4. Daraufhin erscheint eine Zeile mit dem in System 폷 Einstellungen vergebenen Titel der Webseite: Websites erstellen mit Contao. 5. Klicken Sie in dieser Zeile ganz rechts auf das blinkende braune Symbol mit dem Pfeil nach rechts, um eine neue Seite einzufügen. 6. Geben Sie im Feld Seitenname »Beispielsite Contaobuch« ein. 7. Wählen Sie als Seitentyp die Option Startpunkt einer Webseite. 8. Aktivieren Sie im Bereich Veröffentlichung weiter unten das Kontrollkästchen Seite veröffentlichen. 9. Bestätigen Sie die Einstellungen mit Speichern und Schliessen.

Abbildung 6.2 zeigt diese Einstellungen im Überblick. Das Häkchen bei Seite veröffentlichen ist wichtig, denn sonst wird zwar in der Datenbank eine Seite angelegt, diese bleibt aber offline. Nach dem Klick auf Speichern und Schliessen sieht der Seitenbaum im Backend so aus wie in Abbildung 6.3. Am rechten Seitenrand sehen Sie Symbole zur Bearbeitung der Seite. Wenn Sie mit der Maus kurz über einem Symbol verweilen, bekommen Sie einen kleinen Hinweis. Für den folgenden Abschnitt ist der gelbe Bleistift ganz links am wichtigsten. Ein Klick darauf öffnet die Seite zur Bearbeitung.

118

»No pages found« – Die Seitenstruktur erstellen

Abbildung 6.2 Den Startpunkt einer Webseite erstellen

Abbildung 6.3 Die Seitenstruktur mit dem Startpunkt einer Webseite

6.1.2

Sprachen-Fallback für den Startpunkt aktivieren

Viele der zahlreichen Einstellungen für einen Startpunkt, die Sie in Abbildung 6.2 sehen, werden erst wichtig, wenn in einer Contao-Installation mehrere Websites verwaltet werden. Eine Sache hingegen sollte sofort erledigt werden, damit sie

119

6.1

6

Die erste Website mit Contao

später nicht zu Problemen führt, und das ist der Sprachen-Fallback. Im folgenden ToDo ändern Sie diese Einstellung. ToDo: Sprachen-Fallback für den Startpunkt definieren 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie neben dem Startpunkt Beispielsite Contaobuch auf den gelben Bleistift, um die Seite zu bearbeiten. 3. Blenden Sie den Bereich DNS ein, in dem Sie auf die grüne Überschrift klicken. DNS steht für Domain Name System. 4. Lassen Sie das Feld Domainname frei. 5. Überprüfen Sie, ob im Feld Sprache der Wert »de« steht. 6. Aktivieren Sie das Kontrollkästchen Sprachen-Fallback. 7. Speichern Sie die Einstellungen mit Speichern und Schliessen.

Abbildung 6.4 Sprachen-Fallback für den Startpunkt definieren

Der Hintergrund dieser Einstellung ist, dass ein Browser dem Webserver mitteilt, in welcher Sprache er die Webseiten am liebsten hätte. Die bevorzugte Sprache kann man in jedem Browser einstellen, im Firefox zum Beispiel unter Extras 폷 Einstellungen 폷 Inhalt 폷 Sprachen. Ist im Startpunkt nur die Sprache de eingetragen, werden die Webseiten von Contao nur an Browser ausgeliefert, die sich als Sprache Deutsch wünschen. Ausländische Browser mit anderen Sprachwünschen bekämen die Meldung »No pages found«, da in der vom Browser gewünschten Sprache keine Seiten existieren. Sie selbst merken davon nichts, solange in Ihrem Browser de als erste Sprache eingestellt ist. Das Häkchen bei Sprachen-Fallback bewirkt, dass die Webseiten unterhalb dieses Startpunktes angezeigt werden, wenn es keine passende Sprache gibt.

120

»No pages found« – Die Seitenstruktur erstellen

6.1.3

Die Startseite für die Beispielsite erstellen

Nachdem der Startpunkt der Webseite jetzt eingerichtet ist, erstellen Sie in diesem Abschnitt die Startseite für die Besucher der Website. ToDo: Eine Startseite für die Beispielsite erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie im Arbeitsbereich oben auf Neue Seite. 3. Klicken Sie in der Zeile Beispielsite Contaobuch ganz rechts auf das blinkende braune Symbol mit dem Pfeil nach rechts, um die neue Seite als Unterseite des Startpunktes einzufügen. 4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname das Wort »Startseite«. 5. Prüfen Sie, ob bei Seitentyp die Option Reguläre Seite ausgewählt ist. 6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite veröffentlichen. 7. Sie können sich die zahlreichen anderen Optionen auf dieser Seite gerne anschauen, aber lassen Sie sie vorerst unverändert. Diese Optionen kommen später an die Reihe. 8. Beenden Sie die Bearbeitung mit einem Klick auf Speichern und Schliessen, um zum Seitenbaum zurückzukehren.

Nach diesem ToDo sieht der Seitenbaum so aus wie in Abbildung 6.5. Falls Sie nicht alle Seiten sehen, klicken Sie auf das Pluszeichen vor dem Startpunkt oder oben im Arbeitsbereich auf Alle öffnen/schliessen.

Abbildung 6.5 Der Seitenbaum mit Startpunkt und Startseite

Wie Sie sehen, hat die Startseite ein anderes Symbol und ist etwas nach rechts eingerückt. Wenn Sie auf das Minus-Zeichen vor dem Startpunkt Beispielsite Contaobuch klicken, sollte die Startseite nicht mehr zu sehen sein. Sehen Sie die Startseite trotzdem noch, befinden sich die Startseite und der Startpunkt auf einer

121

6.1

6

Die erste Website mit Contao

Ebene. Verschieben Sie dann die Startseite mit einem Klick auf den blauen Pfeil, und fügen Sie sie mit den braun hinterlegten Pfeilen an der richtigen Stelle wieder ein. Eine Seite ist auch nur ein Datensatz Wenn Contao eine Seite erstellt, dann ist das keine statische Webseite, die als Datei irgendwo auf dem Webspace gespeichert wird, sondern nur ein Datensatz in einer Datenbanktabelle. Deshalb heißt die Startseite hier auch nicht index.html oder index.php, sondern einfach nur Startseite. Eine im Browser sichtbare Webseite wird daraus erst durch das am Ende dieses Kapitels beschriebene Zusammenspiel aller Komponenten.

6.1.4

Die Seitenstruktur für die Beispielsite erweitern

Eine Contao-Website kann aus Hunderten oder Tausenden von Webseiten bestehen, aber zum Üben fangen Sie erst einmal mit vier Seiten an. Später werden es dann noch mehr. ToDo: Die Seitenstruktur für die Beispielsite erweitern 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie im Arbeitsbereich oben auf den Link Neue Seite. 3. Klicken Sie in der Zeile Startseite rechts auf das kleine braune Symbol mit dem Pfeil nach unten, um die neue Seite auf derselben Ebene wie die Startseite einzufügen. 4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname den Wert »Downloads«. 5. Prüfen Sie, ob bei Seitentyp Reguläre Seite ausgewählt ist. 6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite veröffentlichen. 7. Beenden Sie die Bearbeitung dieses Mal der Abwechslung halber mit einem Klick auf Speichern und neu. Sie bekommen dann sofort das Formular für die nächste neue Seite. 8. Erstellen Sie zwei weitere reguläre Seiten mit den Seitennamen »Kontakt« und »Impressum«. 9. Vergessen Sie nicht, die Seiten zu veröffentlichen. 10.Beenden Sie die Erstellung der letzten Seite mit einem Klick auf die Schaltfläche Speichern und Schliessen.

122

»No pages found« – Die Seitenstruktur erstellen

Nach diesem ToDo sieht der Seitenbaum im Backend so aus wie in Abbildung 6.6.

Abbildung 6.6 Der erweiterte Seitenbaum mit vier Seiten

Und so setzt sich dieser übersichtliche kleine Seitenbaum zusammen: 왘

Ganz oben steht die nicht anklickbare Überschrift Websites erstellen mit Contao. Das ist der Name für die gesamte Contao-Installation, den Sie in System 폷 Einstellungen festgelegt haben.

왘

Darunter gibt es einen Startpunkt der Webseite mit dem Namen Beispielsite Contaobuch. Das ist der Name der Website.

왘

Unterhalb des Startpunktes gibt es vier reguläre Webseiten: Startseite, Downloads, Kontakt und Impressum.

Diese vier Webseiten sollten übrigens alle auf derselben Ebene liegen und gerade untereinander stehen, mit keinerlei Einrückungen nach links oder rechts. Drei Klick-Tipps für die Arbeit mit dem Seitenbaum Bei der Arbeit mit dem Seitenbaum gibt es einige sehr hilfreiche Klicks: 왘

Ein Klick auf das Symbol vor dem Seitennamen zeigt eine Vorschau dieser Seite in einem neuen Tab oder Browserfenster an. Momentan kommt zwar nur die Meldung No layout specified, aber später werden Sie diese Vorschau oft benutzen.

왘

Ein Klick auf den Seitennamen verkürzt den Seitenbaum und beginnt ihn mit der angeklickten Seite. Die vorherigen Ebenen stehen als Navigationspfad hellgelb hervorgehoben über dem Seitenbaum.

왘

Ein Klick auf das letzte Symbol ganz rechts bringt Sie später direkt zur Bearbeitung der Artikel für diese Seite. Momentan gibt es da noch nicht so viel zu tun, aber später ist das sehr praktisch.

123

6.1

6

Die erste Website mit Contao

6.2

»No layout found« – Theme und Seitenlayout erstellen

Falls Sie nach der Erstellung des Seitenbaums das Frontend bereits im Browser betrachtet haben, sehen Sie zwar immer noch keine Webseite, aber die Meldung links oben hat sich geändert und lautet jetzt »No layout specified« (Abbildung 6.7).

Abbildung 6.7 »No layout specified« – neue Meldung im Frontend

Im Schnelldurchlauf am Anfang des Buches haben Sie gesehen, dass jede Seite aus dem Seitenbaum auf einem Seitenlayout basiert. Zur Beseitigung der Fehlermeldung benötigen Sie also ein Seitenlayout, und da ein solches Seitenlayout immer zu einem Theme gehört, müssen Sie zunächst einmal ein Theme erstellen.

6.2.1

Das erste Theme erstellen

Ein Theme bestimmt das Aussehen der Website und ist eine Sammlung aus Seitenlayouts, Stylesheets und Frontend-Modulen, die durch Templates und LayoutGrafiken ergänzt werden. Mit einem Theme kann man einer Site ein anderes Design geben, ohne den Inhalt zu verändern. Ein Theme muss zunächst einen Namen haben und wissen, in welchen Ordnern die dazugehörigen Dateien aufbewahrt werden. Das Theme, das Sie im folgenden ToDo erstellen, heißt schlicht und einfach Blaues Theme, da Blau die Farbe der Wahl für die Beispielsite ist, die Sie in den nächsten Kapiteln erstellen. ToDo: Ein neues Theme erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Klicken Sie im Arbeitsbereich oben auf den Link Neues Theme. 3. Geben Sie im Feld Theme-Titel »Blaues Theme« ein.

124

»No layout found« – Theme und Seitenlayout erstellen

ToDo: Ein neues Theme erstellen (Forts.) 4. Geben Sie im Feld Autor Ihren Namen ein. 5. Wählen Sie als Ordner themes/blaues_theme/. Dieser Ordner liegt unterhalb von tl_ files und enthält den Ordner mit den Layout-Grafiken. 6. Klicken Sie im Bereich Templates-Ordner auf Datei auswählen, und wählen Sie den Ordner blaues_theme. Dieser Ordner liegt unterhalb von templates und enthält speziell für das Theme angepasste Templates. 7. Wählen Sie als Bildschirmfoto folgende Datei aus: themes/blaues_theme/grafiken/screenshot.png 8. Beenden Sie die Erstellung des Themes mit Speichern und Schliessen.

Nach der Erstellung des Themes und dem Schließen des Dialogfeldes sieht das Backend-Modul Themes so aus wie in Abbildung 6.8.

Abbildung 6.8 Das frisch erstellte Theme im Backend

Unter »B« wie »Blaues Theme« wird das neue Theme gelistet. Das Bildschirmfoto hat eine Größe von 175 × 120 Pixel. Die Abbildung ist ihrer Zeit ein bisschen voraus, aber so wissen Sie schon einmal ungefähr, wohin die Reise geht. Rechts sehen Sie sieben Symbole, die zum Bearbeiten des Themes dienen. Das sind der Reihe nach: 왘

Bearbeiten der Theme-Einstellungen Der gelbe Bleistift steht für die Bearbeitung. Hier können Sie die Einstellungen für das aktuelle Theme ändern: Name, Autor und die zugewiesenen Ordner.

왘

Theme löschen Ein Klick auf das rote X löscht das Theme. Es erscheint eine Sicherheitsfrage, und danach wird gelöscht.

125

6.2

6

Die erste Website mit Contao

왘

Details zum Theme anzeigen Ein Klick auf das kleine »i« im blauen Kreis zeigt alle Details zum Theme in einer kleinen Übersicht.

왘

Stylesheets erstellen und bearbeiten Mit dem CSS-Symbol können Sie die Stylesheets für das Theme erstellen. Das werden Sie in diesem Kapitel auch noch tun.

왘

Frontend-Module erstellen und bearbeiten Ein Klick auf das fünfte Symbol führt Sie zur Bearbeitung der FrontendModule, die den Quelltext für das Frontend erzeugen. Auch das werden Sie in diesem Kapitel noch kennenlernen.

왘

Seitenlayouts erstellen und bearbeiten Ein Seitenlayout sorgt für die Darstellung der Seite. Direkt im Anschluss an diesen Abschnitt erstellen Sie das erste Seitenlayout.

왘

Theme exportieren Ein Theme zu »exportieren« bedeutet, dass alle Stylesheets, Frontend-Module, Seitenlayouts und auch die beiden zum Theme gehörenden Ordner in ein ZIPArchiv gepackt und lokal gespeichert werden. Dieses ZIP-Archiv kann auf einer anderen Contao-Site wieder importiert werden.

So viel zur Erstellung eines Themes. In den folgenden Abschnitten werden Sie der Reihe nach ein Seitenlayout, ein paar Frontend-Module und ein erstes Stylesheet erstellen.

6.2.2

Das erste Seitenlayout erstellen

Das erste Seitenlayout ist ein echter Klassiker: zentriert, 960 Pixel breit, mit 3 Spalten sowie einem Header und einem Footer. ToDo: Ein Seitenlayout erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts). 3. Klicken Sie im Arbeitsbereich rechts oben auf Neues Layout. 4. Geben Sie als Titel für das Layout »Standardlayout« ein. 5. Aktivieren Sie das Kontrollkästchen Standardlayout. 6. Aktivieren Sie im Bereich Kopf- und Fusszeile die Kontrollkästchen Kopfzeile einfügen und Fusszeile einfügen, vergeben Sie aber für beide keine Höhe. 7. Wählen Sie im Bereich Spaltenkonfiguration das dreispaltige Layout ganz rechts. Geben Sie für die Breite der linken und der rechten Spalte jeweils ##»182px« ein.

126

»No layout found« – Theme und Seitenlayout erstellen

ToDo: Ein Seitenlayout erstellen (Forts.) 8. Überspringen Sie die folgenden Bereiche, und prüfen Sie, ob im Bereich ExpertenEinstellungen das Seitentemplate fe_page und die Dokumentyp-Definition XHTML Strict eingestellt sind. 9. Aktivieren Sie in den Skript-Einstellungen das MooTools-Template moo_mediabox. Das ist ein JavaScript-Programm, das später zur Erzeugung einer sogenannten »Lightbox« benötigt wird. 10. Aktivieren Sie im Bereich Statisches Layout das gleichnamige Kontrollkästchen. Das Layout soll eine Gesamtbreite von »960px« haben, mit der Ausrichtung »zentriert«. 11. Beenden Sie die Bearbeitung mit Speichern und Schliessen.

Wenn Sie nach der Erstellung des Seitenlayouts ganz oben im Infobereich auf Frontend-Vorschau ((Alt) + (f)) klicken, wird ein neues Fenster geöffnet, in dem Sie einen gelben Balken und eine leere weiße Seite sehen (Abbildung 6.9).

Abbildung 6.9 Seitenlayout erstellt – leere Seite in der Frontend-Vorschau

Der gelbe Balken am oberen Bildschirmrand enthält einen Frame mit Bedienelementen für die Frontend-Vorschau, die später bei der Arbeit mit mehreren Benutzern und unveröffentlichten Elementen richtig praktisch werden. Mit einem Klick auf das X ganz rechts können Sie diesen Frame bei Bedarf entfernen. Dann sehen Sie nur noch die leere Webseite. Es ist vielleicht schwer zu glauben, aber diese leere Seite ist ein echter Fortschritt. Erstens gibt es keine störende Meldung mehr, und zweitens ist das Grundgerüst der Seite bereits da. Im Quelltext.

6.2.3

Ein kurzer Blick in den Quelltext

Der Quelltext ist nicht irgendwo auf dem Webspace gespeichert, sondern wird erst auf Anforderung des Browsers dynamisch von Contao erstellt. Da es bis jetzt noch keinerlei Artikel oder andere Inhalte gibt, wird die Seite leer ausgeliefert,

127

6.2

6

Die erste Website mit Contao

aber das Grundgerüst ist im Quelltext bereits vorhanden. Listing 6.1 zeigt die wichtigsten div-Elemente:









Listing 6.1 HTML-Grundgerüst der Startseite

Die fünf großen Layoutbereiche, die Contao standardmäßig zur Verfügung stellt, sind in Listing 6.1 hervorgehoben: 왘

Kopfzeile:

왘

Linke Spalte:

왘

Rechte Spalte:

왘

Hauptspalte:

왘

Fußzeile:

Bei Bedarf können Sie später auch eigene Layoutbereiche einrichten, aber meistens reichen diese fünf. Der Quelltext wird später genauer erläutert Falls Sie im Quelltext überraschende Dinge wie z. B. einen Styleblock oder seltsame Elemente wie finden, nehmen Sie sie erst einmal hin. In Kapitel 7, Webseiten gestalten: Contao und CSS, werden diese Dinge im Detail erläutert.

6.3

Das erste Frontend-Modul: »Navigation – Hauptnavi«

In Contao gibt es zwei Sorten von Modulen: 왘

128

Backend-Module finden Sie im Navigationsbereich des Backends. Sie dienen zur Verwaltung der Site und sind in die fünf Gruppen Inhalte, Layout, Benutzerverwaltung, System und Benutzerfunktionen aufgeteilt.

Das erste Frontend-Modul: »Navigation – Hauptnavi«

왘

Frontend-Module sind, vereinfacht gesagt, kleine PHP-Programme, die irgendetwas machen und als Ergebnis HTML-Quelltext für das Frontend ausgeben. Sie werden im Backend-Modul Themes verwaltet.

Wenn Sie irgendwo in Contao einfach nur das Wort Module lesen, sind fast immer Frontend-Module gemeint. In diesem Abschnitt erstellen Sie ein Frontend-Modul, das aus dem Seitenbaum eine Navigation erzeugt und das über das Seitenlayout so eingebunden wird, dass es in der linken Spalte erscheint.

6.3.1

Ein Navigationsmodul erstellen

Das Erstellen der Hauptnavigation besteht aus zwei Schritten: Zuerst müssen Sie das Modul erstellen und konfigurieren, danach wird im Seitenlayout festgelegt, in welchem Bereich das Modul erscheinen soll. ToDo: Ein Navigationsmodul erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie für »Blaues Theme« die Frontend-Module zur Bearbeitung (3. Symbol von rechts). 3. Klicken Sie im Arbeitsbereich oben auf Neues Modul. 4. Geben Sie im Feld Titel »Navigation – Hauptnavi« ein. 5. Lassen Sie das Feld Überschrift einfach leer, da die Navigation keine Überschrift haben soll. 6. Prüfen Sie, ob als Modultyp Navigationsmenü ausgewählt ist. 7. Lassen Sie alle anderen Optionen wie Startlevel, Stoplevel und Hardlimit unverändert, und denken Sie nicht zu viel darüber nach. Damit befassen Sie sich in Kapitel 8, »Navigationen erstellen in Contao«. 8. Überprüfen Sie, ob im Bereich Template-Einstellungen das Navigationstemplate nav_ default ausgewählt ist. 9. Klicken Sie auf Speichern und Schliessen.

Abbildung 6.10 zeigt die im ToDo gemachten Einstellungen im Überblick. Das Modul Navigation – Hauptnavi ist nach wenigen Klicks fertig zum Einsatz, aber noch gibt es im Browser nichts zu sehen, denn Contao muss noch wissen, in welchen Layoutbereich die Navigation eingebaut werden soll. Das Modul muss übrigens nicht unbedingt Navigation – Hauptnavi heißen, aber wenn alle Navigationsmodule mit Navigation beginnen, stehen sie später alle schön ordentlich untereinander und lassen sich so besser von anderen Modulen für Events, News, FAQ oder für das Layout unterscheiden.

129

6.3

6

Die erste Website mit Contao

Abbildung 6.10 Einstellungen für das Modul »Navigation – Hauptnavi«

Das Template nav_default Im Template nav_default wird festgelegt, welches HTML das Navigationsmodul erzeugen soll. Mehr dazu erfahren Sie am Ende dieses Kapitels. Momentan ist es nur wichtig, dass es ein solches Template gibt.

6.3.2

Das Navigationsmodul im Seitenlayout einbinden

In diesem Abschnitt wird das soeben erstellte Navigationsmodul mit dem Seitenlayout verbunden oder, wie es im Contao-Jargon heißt, »eingebunden«. Nach dem folgenden ToDo erscheint die Navigation im Frontend. ToDo: Das Navigationsmodul im Seitenlayout einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Klicken Sie rechts neben dem Standardlayout [Standard] auf den gelben Bleistift, um die Einstellungen zu bearbeiten. 3. Blenden Sie den Bereich Frontend-Module ein. Dort ist bereits eine Zeile vorhanden: Modul Artikel und Spalte Kopfzeile. 4. Ändern Sie diese Zeile, und wählen Sie in der Liste Modul Navigation – Hauptnavi und in der Liste Spalte die Linke Spalte. 5. Lassen Sie alle anderen Einstellungen unverändert. 6. Klicken Sie auf Speichern und Schliessen.

130

Das erste Frontend-Modul: »Navigation – Hauptnavi«

Jetzt weiß Contao, dass der vom Navigationsmodul erzeugte Quelltext in der linken Spalte dargestellt werden soll. Abbildung 6.11 zeigt, wie das in der Frontend-Vorschau aussieht.

Abbildung 6.11 Die Navigation erscheint in der linken Spalte.

Die vier Webseiten aus dem Seitenbaum werden als ungeordnete Liste dargestellt. Klicken Sie sich am besten einmal durch die Navigation. Der Titel der Webseiten ändert sich, und die jeweils aktuelle Seite ist kein Link mehr. Alles automatisch. Um ein bisschen Gefühl für die Flexibilität des Navigationsmoduls zu bekommen, erweitern Sie im folgenden ToDo die Seitenstruktur. ToDo: Die Seitenstruktur um die Seite »Nachrichten« erweitern 1. Schließen Sie die Frontend-Vorschau. 2. Fügen Sie im Backend-Modul Seitenstruktur unterhalb der Startseite eine neue Seite vom Typ Reguläre Seite ein. 3. Der Seitenname ist »Nachrichten«. 4. Aktivieren Sie weiter unten die Option Seite veröffentlichen. 5. Klicken Sie auf Speichern und Schliessen.

Die Navigation in der Frontend-Vorschau sieht jetzt so aus wie in Abbildung 6.12. In Contao erstellen Sie mit wenigen Klicks und ohne selbst zu programmieren eine sehr flexible Navigation. Gestaltet wird sie später per CSS.

131

6.3

6

Die erste Website mit Contao

Abbildung 6.12 Die Hauptnavigation bildet den Seitenbaum ab.

6.4

Frontend-Module für den Kopf- und den Fußbereich

In diesem Abschnitt erstellen Sie den Inhalt für die Kopf- und die Fußzeile der Webseiten. Dazu kommt ein Frontend-Modul namens Eigenes HTML zum Einsatz, in das Sie, wie der Name andeutet, eigenes HTML schreiben, das dann auf der Seite eingebunden wird.

6.4.1

Module für den Kopf- und den Fußbereich erstellen

In den folgenden ToDos erstellen Sie einen Kopfbereich und einen Fußbereich, die im nächsten Abschnitt in das Seitenlayout eingebunden werden. ToDo: Das Modul »Layout – Header« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Frontend-Module zur Bearbeitung (3. Symbol von rechts). 3. Klicken Sie im Arbeitsbereich oben auf Neues Modul. 4. Geben Sie im Feld Titel »Layout – Header« ein. 5. Wählen Sie als Modultyp den Eintrag Eigener HTML-Code, den Sie ganz am Ende der Liste in der Rubrik Verschiedenes finden. 6. Geben Sie in das Feld HTML-Code den folgenden Quelltext ein: Beispielsite

Websites erstellen mit Contao

7. Klicken Sie auf Speichern und Schliessen, um das Modul zu speichern.

So viel zum Header-Modul. Der Fußbereich folgt gleich im nächsten ToDo.

132

Frontend-Module für den Kopf- und den Fußbereich

ToDo: Das Modul »Layout – Footer« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Frontend-Module zur Bearbeitung. 3. Duplizieren Sie das Modul Layout – Header mit einem Klick auf das grüne Kreuz rechts neben dem gelben Bleistift. 4. Nach dem Kopieren erscheint rechts oben im Arbeitsbereich der Link Ablage leeren und darunter ein braunes Symbol mit einem weißen Pfeil nach unten. 5. Fügen Sie das Modul mit einem Klick auf diesen Pfeil nach unten ein. 6. Ändern Sie im Feld Titel in »Layout – Footer«. 7. Ändern Sie den Quelltext im Feld HTML-Code wie folgt:

Made with Contao.

8. Klicken Sie auf Speichern und Schliessen.

Im Backend sehen Sie jetzt die drei Module Layout – Footer, Layout – Header und Navigation – Hauptnavi. Hinter jedem der Module steht in eckigen Klammern und hellgrauer Schrift der Modultyp, auf dem das Modul basiert. Ablage leeren: Kopieren oder Verschieben abbrechen Um einen Kopier- oder Verschiebevorgang abzubrechen, klicken Sie einfach oben im Arbeitsbereich auf den Link Ablage leeren.

6.4.2

Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden

Nachdem Sie die beiden Module erstellt haben, müssen Sie sie in das Seitenlayout einbinden, damit Contao weiß, in welchem Layoutbereich sie erscheinen sollen. Die Entscheidung ist in diesem Fall ziemlich einfach, denn das Modul Layout – Header soll in der Kopfzeile stehen und Layout – Footer in der Fußzeile. ToDo: Die beiden Module im Seitenlayout einbinden 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts). 3. Klicken Sie im Arbeitsbereich rechts neben dem Seitenlayout Standardlayout auf den gelben Bleistift, um die Einstellungen zu bearbeiten. 4. Blenden Sie den Bereich Frontend-Module ein. 5. Klicken Sie im Bereich Eingebundene Module zweimal auf das grüne Kreuz rechts neben der Liste Spalte, um die vorhandene Zeile zweimal zu duplizieren. 6. Wählen Sie in der ersten Zeile aus der Liste Modul den Eintrag Layout – Header und in der Liste Spalte die Kopfzeile.

133

6.4

6

Die erste Website mit Contao

ToDo: Die beiden Module im Seitenlayout einbinden (Forts.) 7. Wählen Sie in der dritten Zeile aus der Liste Modul den Eintrag Layout – Footer und in der Liste Spalte die Fußzeile. 8. Lassen Sie alle anderen Einstellungen unverändert. 9. Klicken Sie auf Speichern und Schliessen.

Im Frontend sehen die Seiten jetzt so aus wie in Abbildung 6.13.

Abbildung 6.13 Die Startseite mit Header und Footer

Im nächsten Abschnitt machen Sie die Layoutbereiche auf der Webseite mit ein paar einfachen Styles sichtbar.

6.5

Das erste Stylesheet erstellen und zuweisen

Contao erzeugt schon jede Menge Quelltext, aber das schönste HTML nützt nichts ohne ein bisschen CSS, und es wird Zeit für das erste Stylesheet. Das Ziel dieses ersten Stylesheets ist es, das Backend-Modul zur Erstellung von Styles kennenzulernen und dabei mit ein paar Rahmenlinien die Layoutbereiche auf den Webseiten sichtbar zu machen. Ungewohnt: CSS schreiben per HTML-Formular Wenn Sie es gewohnt sind, CSS in einem Editor zu schreiben, sollten Sie sich schon einmal auf eine kleine Überraschung vorbereiten. Im Backend von Contao erstellen Sie Styles durch Ausfüllen eines HTML-Formulars. In Kapitel 7 erfahren Sie mehr über den Themenkomplex »Contao und CSS«, und wenn Sie möchten, können Sie das CSS dann auch wieder in einem Editor schreiben.

134

Das erste Stylesheet erstellen und zuweisen

6.5.1

Das erste Stylesheet im Backend erstellen

In diesem Abschnitt erstellen Sie das erste Stylesheet im Backend von Contao. Genau wie die Seitenlayouts und die Frontend-Module gehören auch die Stylesheets immer zu einem Theme. ToDo: Das erste Stylesheet im Backend erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Stylesheets zur Bearbeitung (4. Symbol von rechts). 3. Klicken Sie im Arbeitsbereich oben auf Neues Stylesheet. 4. Geben Sie im Feld Name das Wort »bildschirm« ein, und zwar ohne die Endung .css. 5. Aktivieren Sie für das Stylesheet den Medientyp screen. 6. Klicken Sie auf Speichern und Schliessen.

Der Medientyp definiert, für welche Medien das Stylesheet gilt, und die Auswahl Screen beschränkt die Gestaltung auf den Bildschirm. Das eben erstellte Stylesheet bildschirm wird also vom Browser zum Beispiel beim Ausdrucken der Webseite nicht verwendet. Über Conditional Comments Bei der Erstellung eines Stylesheets gibt es die Möglichkeit, einen Conditional Comment zu aktivieren. Das ist für Stylesheets gedacht, die nur an bestimmte Versionen des Internet Explorer ausgeliefert werden sollen. Da im Kern des Contao-Frameworks schon eine Patch-Datei namens iefixes.css für den IE enthalten ist, werden Sie nur selten noch ein ganzes Stylesheet für weitere Patches schreiben müssen. Mehr zur IE-Patchdatei finden Sie in Abschnitt 7.10, »Know-how: Das CSS-Framework von Contao«.

6.5.2

Stylesheet bearbeiten: Einen Style für »body« erstellen

Im folgenden ToDo erstellen Sie im neuen Stylesheet den ersten Style, der bei Contao Formatdefinition genannt wird und den Text im body der Webseiten gestaltet: 왘

Als Schriftart wird Verdana gewünscht. Falls diese nicht vorhanden ist, bieten Sie dem Browser der Reihe nach Arial, Helvetica oder irgendeine andere Schriftart ohne die Serifen genannten Häkchen an den Buchstaben (sans-serif) an.

왘

Die Schriftgröße wird etwas reduziert. Der Wert von »81.25 %« reduziert den Browser-Standardwert von 16px auf angenehm lesbare 13px.

Außerdem erzeugen Sie mit der CSS3-Eigenschaft overflow-y in modernen Browsern einen inaktiven Scrollbalken, der auch auf kurzen Webseiten angezeigt

135

6.5

6

Die erste Website mit Contao

wird. Das verhindert bei zentrierten Layouts ein Hin- und Herspringen der Seiten. Diese Formatierungsanweisungen erledigt das folgende ToDo. ToDo: Einen Style für »body« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Stylesheets zur Bearbeitung. 3. Öffnen Sie das Stylesheet bildschirm mit einen Klick auf den gelben Bleistift rechts daneben. Sie sehen dann einige Informationen zum Stylesheet wie Name, Änderungsdatum und die gewählten Medientypen. 4. Klicken Sie im Arbeitsbereich oben auf Neue Formatdefinition. Rechts oben im Arbeitsbereich erscheint daraufhin der Link Ablage leeren und darunter ein kleines braunes Symbol mit einem weißen Pfeil nach unten darin. 5. Klicken Sie auf dieses kleine braune Symbol, um den neuen Style am Anfang des Stylesheets einzufügen. Es erscheint ein Formular zur Definition des Styles. 6. Geben Sie im Feld Selektor den Selektor »body« ein (ohne Anführungsstriche). 7. Aktivieren Sie im Bereich Hintergrund das gleichnamige Kontrollkästchen. 8. Geben Sie als Hintergrundfarbe »d9d9d9« ein (ohne # davor). 9. Aktivieren Sie das Kontrollkästchen Schrift. 10. Geben Sie bei Schriftarten den Wert »Verdana, Arial, Helvetica, sans-serif« ein (ohne Anführungsstriche und ohne Semikolon am Ende). 11. Die Schriftgrösse soll den Wert »81.25« mit der Einheit % bekommen. 12. Geben Sie im Feld Eigener Code die folgende Anweisung ein: "overflow-y: scroll;" 13. Klicken Sie auf Speichern und Schliessen.

Fertig ist der erste Style. Falls Sie schon mal geschaut haben und sich wundern: Im Frontend ist noch keine Änderung zu sehen. Ja genau: Das Stylesheet ist noch nicht mit dem Seitenlayout verbunden. Bevor Sie das tun, erstellen Sie noch schnell zwei Styles mit einer weißen Hintergrundfarbe für #wrapper und einem rechten und linken Margin von jeweils 18px für #container. ToDo: Styles für »#wrapper« und »#container« erstellen 1. Öffnen Sie das Stylesheet bildschirm zur Bearbeitung. 2. Erstellen Sie eine neue Formatdefinition, indem Sie rechts neben dem Style für body auf das weiße Kreuz im grünen Kreis klicken. 3. Der Selektor soll »#wrapper« heißen. 4. Aktivieren Sie im Bereich Hintergrund das gleichnamige Kontrollkästchen.

136

Das erste Stylesheet erstellen und zuweisen

ToDo: Styles für »#wrapper« und »#container« erstellen (Forts.) 5. Geben Sie als Hintergrundfarbe »ffffff« ein (ohne # davor). 6. Speichern Sie die Einstellungen mit Speichern und neu. 7. Der Selektor für den neuen Style ist »#container«. 8. Aktivieren Sie im Bereich Abstand und Ausrichtung das Kontrollkästchen Margin, Padding und Ausrichtung. 9. Geben Sie bei Margin (Aussenabstand) im zweiten und vierten Eingabefeld die Zahl »18« ein. 10. Wählen Sie als Einheit aus der Liste den Wert px. 11. Klicken Sie auf Speichern und Schliessen.

Nach diesen Schritten sieht das Stylesheet im Backend aus wie in Abbildung 6.14.

Abbildung 6.14 Das Stylesheet »bildschirm« mit Formatdefinitionen

Der CSS-Validator des W3C und die Eigenschaft »overflow-y« Die Eigenschaft overflow-y ist nicht in CSS2.1 enthalten, und deshalb wird der CSS-Validator vom W3C meckern. Das ist nicht weiter schlimm, da der Validator kein Selbstzweck, sondern ein Hilfsmittel ist. Wenn aber ein grüner Balken vom Validator wichtiger ist als ein nicht hüpfendes Layout, sollten Sie die Eigenschaft overflow-y nicht einsetzen.

6.5.3

Das Stylesheet mit dem Seitenlayout verbinden

Um die Styles auf die Seite anzuwenden, verknüpfen Sie jetzt das Stylesheet bildschirm mit dem Seitenlayout.

137

6.5

6

Die erste Website mit Contao

ToDo: Das Stylesheet im Seitenlayout einbinden 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts). 3. Öffnen Sie das Standardlayout [Standard] zur Bearbeitung. 4. Blenden Sie den Bereich Stylesheets ein. 5. Aktivieren Sie das Stylesheet bildschirm. 6. Aktivieren Sie die Option tl_files/tinymce.css ignorieren. 7. Lassen Sie alle anderen Einstellungen unverändert. 8. Klicken Sie auf Speichern und Schliessen.

Jetzt sollte im Frontend das Stylesheet aktiv sein. Der Hintergrund der Seite ist grau, der Wrapper weiß, und der Text erscheint in Verdana (Abbildung 6.15).

Abbildung 6.15

Die Startseite mit dem Stylesheet »bildschirm«

Mehr zum Stylesheet tl_files/tinymce.css erfahren Sie übrigens in Kapitel 22.2 bei der Optimierung des Editors TinyMCE. Die Deaktivierung an dieser Stelle ist eine reine Vorsichtsmaßnahme, damit das Stylesheet nicht versehentlich am Layout mitwirkt. Stylesheet und Formatdefinitionen sind auch nur Datensätze Auch das Stylesheet und die darin enthaltenen Styles sind Datensätze in einer Datenbanktabelle. Contao erzeugt aus diesen Datensätzen im Hintergrund automatisch die Datei bildschirm.css im Hauptordner der Installation. Der Browser benutzt diese Datei zur Darstellung der Webseite. Mehr dazu erfahren Sie in Kapitel 7, »Webseiten gestalten: Contao und CSS«.

138

Das erste Stylesheet erstellen und zuweisen

6.5.4

Weitere Styles für Kopfbereich, Hauptspalte und Fußbereich

In diesem Abschnitt erstellen Sie zur Übung ein paar Styles für den Kopfbereich, die Hauptspalte und den Footer. Diese Styles machen hauptsächlich die Layoutbereiche auf den Webseiten mit ein paar Rahmenlinien sichtbar. ToDo: Styles für »#header« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Stylesheets zur Bearbeitung (4. Symbol von rechts). 3. Öffnen Sie das Stylesheet bildschirm zur Bearbeitung (gelber Bleistift). 4. Klicken Sie ganz rechts außen im Style für #wrapper auf das weiße Kreuz im grünen Kreis, um darunter ein neues Element einzufügen. 5. Geben Sie im Feld Selektor den Selektor #header ein. 6. Fügen Sie den Kommentar »Rahmenlinien oben und unten« hinzu. 7. Aktivieren Sie im Bereich Abstand und Ausrichtung das Kontrollkästchen Margin, Padding und Ausrichtung. 8. Definieren Sie im darunter erscheinenden Formular einen oberen margin von »1«. Wählen Sie aus der Liste rechts daneben als Einheit em. 9. Definieren Sie ein padding-left von 18px. 10. Aktivieren Sie etwas weiter unten im Bereich Rahmen das gleichnamige Kontrollkästchen. 11. Geben Sie im darunter erscheinenden Formular eine Rahmenbreite von »2« für oben und »1« für unten ein. Wählen Sie aus der Liste rechts daneben die Einheit px. 12. Wählen Sie als Rahmenstil aus der Liste den Wert solid. 13. Setzen Sie die Rahmenfarbe auf »89adcd« (Farbwert ohne # vorweg). 14. Klicken Sie auf Speichern und Schliessen.

Sie können gerne schon mal in die Frontend-Vorschau schauen, aber vor der nächsten Abbildung erstellen Sie noch schnell Styles für den Footer und die Hauptspalte. ToDo: Style für »#footer« erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Stylesheets. 2. Öffnen Sie das Stylesheet bildschirm zur Bearbeitung. 3. Klicken Sie rechts neben dem Style für #header auf das grüne Kreuz rechts neben dem gelben Bleistift, um den Style zu duplizieren. 4. Fügen Sie die Kopie mit einem Klick auf das ganz rechts neu erschienene braune Symbol mit dem Pfeil nach unten ein. 5. Ändern Sie den Selektor in »#footer«.

139

6.5

6

Die erste Website mit Contao

ToDo: Style für »#footer« erstellen (Forts.) 6. Lassen Sie den Kommentar unverändert. 7. Entfernen Sie die Werte für margin. Das linke padding von 18px soll erhalten bleiben. 8. Ändern Sie die Breite der Rahmenlinien, sodass diese oben 1px und unten 2px dick sind. 9. Klicken Sie auf Speichern und Schliessen.

Nach einem Blick in die Frontend-Vorschau, in der immer mehr blaue Linien auftauchen, geht es weiter mit einem Style für die Hauptspalte #main. ToDo: Style für »#main« erstellen 1. Öffnen Sie gegebenenfalls das Stylesheet bildschirm zur Bearbeitung. 2. Duplizieren Sie den Style für #header, und fügen Sie ihn direkt unterhalb ein (braunes Symbol mit weißem Pfeil). 3. Ändern Sie den Selektor in »#main«, um die Hauptspalte zu gestalten. 4. Ändern Sie den Kommentar in »Rahmenlinien links und rechts«. 5. Öffnen Sie den Bereich Margin, Padding und Ausrichtung. 6. Entfernen Sie die Werte bei Margin, und definieren Sie ein Padding links und rechts von jeweils 10px. 7. Ändern Sie die Breite der Rahmenlinien auf links 1px und rechts 1px. Oben und unten sollten keine Rahmenlinien vorhanden sein. 8. Aktivieren Sie das Kontrollkästchen Schrift, und geben Sie eine Zeilenhöhe von »1.7« ein (line-height ohne Einheit). 9. Definieren Sie im Bereich Eigener Code eine Mindesthöhe von 300px: »min-height: 300px;« 10. Klicken Sie auf Speichern und Schliessen.

Das Stylesheet sieht im Backend etwa so aus wie in Abbildung 6.16. Die Reihenfolge der Formatdefinitionen können Sie per Drag & Drop verändern: einfach mit der Maus draufklicken und ziehen. Die mit diesen Styles formatierten Webseiten sehen inzwischen so aus wie in Abbildung 6.17, in der die Rahmenlinien die Begrenzungen der im Seitenlayout definierten Bereiche sichtbar machen.

140

Das erste Stylesheet erstellen und zuweisen

Abbildung 6.16

Das Stylesheet wächst und gedeiht.

Abbildung 6.17 Die Startseite mit sichtbar gemachten Layoutbereichen

141

6.5

6

Die erste Website mit Contao

6.6

Der erste Artikel und ein Inhaltselement

In diesem Abschnitt machen Sie den ersten Abstecher in die Gruppe Inhalte, in der Sie nach der Erstellung und Freischaltung der Site wahrscheinlich die meiste Zeit zubringen werden. In dieser Gruppe sind alle Backend-Module versammelt, die mit der Erstellung von Inhalten zu tun haben. Das wichtigste steht gleich am Anfang und heißt Artikel.

6.6.1

Der Artikelbaum: Die Übersicht über alle Artikel

Contao zeigt Ihnen im Backend-Modul Inhalte 폷 Artikel mit dem Artikelbaum eine Übersicht aller vorhandenen Artikel, die auf den ersten Blick eine verblüffende Ähnlichkeit mit dem Seitenbaum hat. Falls der Artikelbaum bei Ihnen nicht wie in Abbildung 6.18 in voller Länge zu sehen ist, klicken Sie im Arbeitsbereich oben auf den Link Alle öffnen/schliessen.

Abbildung 6.18 Der Artikelbaum – Übersicht über die Artikel

Bei genauerem Hinsehen ist der Artikelbaum eine erweiterte Version des Seitenbaums aus dem Backend-Modul Seitenstruktur. Der Artikelbaum zeigt alle in diesem Kapitel erstellten Seiten und darunter jeweils einen gleichnamigen Artikel mit dem hellgrauen Zusatz [Hauptspalte] und einigen Symbolen zur Bearbeitung daneben. Wenn Sie sich wundern, woher diese Artikel stammen: Contao erstellt beim Anlegen einer Seite automatisch einen gleichnamigen Artikel in der Hauptspalte. Da diese Kombination im Alltag mit Abstand am häufigsten benötigt wird, ist das eine sehr praktische Sache.

142

Der erste Artikel und ein Inhaltselement

6.6.2

Die Einstellungen für einen Artikel

Nach einem Klick auf den gelben Bleistift rechts neben dem Artikel Startseite [Hauptspalte] sehen Sie unterhalb der Bedienelemente zum Filtern und Suchen die Artikel-Einstellungen und den Hinweis Keine Einträge gefunden. Mit Einträge sind Inhaltselemente gemeint, und das stimmt, denn in diesem Artikel gibt es noch keine Inhaltselemente (Abbildung 6.19).

Abbildung 6.19 Die Einstellungen für den Artikel »Startseite«

Zur Bearbeitung der Artikel-Einstellungen klicken Sie wie immer auf den gelben Bleistift. Daraufhin erscheint das in Abbildung 6.20 dargestellte Formular.

Abbildung 6.20 Die wichtigsten Einstellungen für einen Artikel

143

6.6

6

Die erste Website mit Contao

Die wichtigsten Einstellungen für einen Artikel sind die folgenden: 왘

Titel: Der Artikeltitel erscheint im Artikelbaum und wird als Überschrift verwendet, wenn der Teasertext angezeigt wird. Ohne aktivierten Teaser erscheint dieser Titel nicht auf der Webseite.

왘

Autor: Hier geben Sie den Autor des Artikels ein. Vorgegeben ist der momentan angemeldete Benutzer.

왘

Artikelalias wird meist leergelassen und von Contao automatisch generiert. Kann benutzt werden, um einen Artikel direkt aufzurufen.

왘

Anzeigen in: Hier können Sie auswählen, in welchem Layoutbereich der Artikel dargestellt werden soll. Damit der Artikel dort auch wirklich erscheint, muss dem Bereich im Backend-Modul Seitenlayouts das Modul Artikel zugewiesen werden.

왘

Falls Sie Suchbegriffe eingeben, erscheinen diese automatisch im Meta-Element keywords, allerdings gibt es kaum noch eine Suchmaschine, die diese tatsächlich auswertet.

왘

Artikel veröffentlichen: Sobald Sie das Kontrollkästchen aktivieren, wird der Artikel im Frontend angezeigt (sofern auch die dazugehörige Seite veröffentlicht ist). Bei einer Live-Site kann es durchaus sinnvoll sein, dass Sie das erst tun, wenn der Artikel fertig ist. Mit der Frontend-Vorschau oben im Infobereich können Sie sich auch unveröffentlichte Artikel anschauen.

왘

Mit den Feldern Anzeigen von und Anzeigen bis können Sie das Erscheinen eines Artikels zeitlich eingrenzen.

In dieser Aufzählung nicht erwähnte Einstellungen wie Teasertext und die Kontrollkästchen zur Syndikation in den Experten-Einstellungen kommen später noch dran. Abkürzung: Rechtsklick zur Bearbeitung der Artikel-Einstellungen Wenn Sie im Artikelbaum mit der rechten Maustaste auf den gelben Bleistift neben einem Artikel klicken, erscheint im Kontextmenü der Befehl Artikel – Einstellungen bearbeiten, mit dem Sie direkt zu den Einstellungen für den Artikel gelangen.

6.6.3

Inhaltselemente zu einem Artikel hinzufügen

In Abschnitt 2.9 haben Sie gelesen, dass Artikel aus Inhaltselementen bestehen und die eigentlichen Inhalte in diesen Inhaltselementen gespeichert werden. In diesem Abschnitt fügen Sie dem Artikel ein erstes Inhaltselement hinzu. Da der Inhalt des Textes momentan keine große Rolle spielt, benutze ich durchgehend

144

Der erste Artikel und ein Inhaltselement

sogenannten Blindtext. Der bekannteste ist wahrscheinlich »Lorem ipsum ...«, den Sie z. B. von http://lipsum.com herunterladen können. Im folgenden ToDo fügen Sie dem Artikel ein Inhaltselement hinzu: eine Überschrift mit ein bisschen Text darunter. ToDo: Ein Inhaltselement zu einem Artikel hinzufügen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Artikel. 2. Klicken Sie im Arbeitsbereich rechts auf den gelben Bleistift neben dem Artikel Startseite [Hauptspalte]. 3. Klicken Sie im Arbeitsbereich oben auf den Link Neues Element. Danach erscheint oben rechts in den Artikel-Einstellungen ein kleines braunes Symbol mit einem Pfeil nach unten. 4. Klicken Sie auf das kleine braune Symbol, um das Inhaltselement direkt nach den Artikel-Einstellungen einzufügen. 5. Prüfen Sie, ob in der Liste Elementtyp der Eintrag Text ausgewählt ist. 6. Geben Sie im Feld Überschrift den Text »Willkommen auf der Beispielsite« ein. 7. Wählen Sie aus der Liste daneben die Überschriftebene h1. 8. Unterhalb der Überschrift sehen Sie den Editor TinyMCE, in den Sie Fließtext eingeben und formatieren können. 9. Geben Sie im Editor zwei kurze Absätze beliebigen Blindtext ein. 10. Klicken Sie auf Speichern und Schliessen.

Nach dem Speichern kehren Sie zur Seite mit den Einstellungen für den Artikel zurück. Darunter erscheint jetzt, wie in Abbildung 6.21 zu sehen, das soeben erstellte Inhaltselement. Falls Sie statt der beiden Absätze nur wenige Zeilen Text sehen, klicken Sie auf den grünen Pfeil links unten, um das ganze Inhaltselement anzuzeigen. Artikel und Inhaltselement erscheinen noch nicht im Frontend, da die Artikel noch nicht im Seitenlayout eingebunden sind. Details zu Inhaltselementen folgen später In Contao gibt es für viele Inhaltstypen wie Überschriften, Texte (mit Bildern und ohne), Bildergalerien, Tabellen, Listen und vieles mehr vorgefertigte Elemente. Wann man welche wie wo am besten einsetzt, erfahren Sie in Kapitel 9, »Inhaltselemente für Text und Bilder«, und 10, »Weitere nützliche Inhaltselemente«.

145

6.6

6

Die erste Website mit Contao

Abbildung 6.21 Das erste selbst erstellte Inhaltselement

6.6.4

Den Artikel mit dem Seitenlayout verbinden

Das folgende ToDo bindet Artikel in das Seitenlayout ein und sorgt dafür, dass der eben erstellte Artikel in der Hauptspalte erscheint. ToDo: Den Artikel im Seitenlayout einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Öffnen Sie Standardlayout [Standard] zur Bearbeitung. 3. Blenden Sie den Bereich Frontend-Module ein. Hier sind momentan drei Zeilen für Header, Hauptnavigation und Footer zu sehen. 4. Duplizieren Sie die zweite Zeile, Navigation – Hauptnavi, in Linke Spalte, indem Sie auf das grüne Kreuz rechts daneben klicken. 5. Wählen Sie in der neuen Zeile aus der Liste Modul den Eintrag Artikel und aus der Liste Spalte die Hauptspalte. 6. Lassen Sie alle anderen Einstellungen unverändert. 7. Klicken Sie auf Speichern und Schliessen.

Contao ordnet die Zeilen nach dem Speichern in der Reihenfolge, in der sie im Quelltext auftreten. Viel wichtiger ist aber, dass nach diesen Schritten der Artikel im Frontend in der Hauptspalte erscheint (Abbildung 6.22).

146

Templates: Das HTML für den Quelltext

Abbildung 6.22 Der Artikel erscheint in der Hauptspalte.

Die eben im Seitenlayout erstellte Zuweisung, dass das Modul Artikel in der Spalte Hauptspalte erscheinen soll, gilt übrigens nicht nur für den eben erstellten Artikel, sondern auch für alle weiteren. Mehrere Artikel werden auf der Webseite untereinander dargestellt, und zwar in der im Artikelbaum festgelegten Reihenfolge.

6.7

Templates: Das HTML für den Quelltext

Zum Abschluss dieses Kapitels lernen Sie noch Templates kennen.

6.7.1

Es gibt verschiedene Arten von Templates

Der Begriff Template meint in Contao zum Teil sehr verschiedene Dinge. Zunächst einmal gibt es eine grobe Unterscheidung in zwei große Gruppen: 왘

Frontendtemplates – Endung .sql Ein Frontendtemplate ist eine Datei mit der Endung .sql und eine komplette Website inklusive Inhalt, Stylesheets, Benutzer und allem drum und dran und wird auch Websitetemplate genannt. Ein Frontendtemplate wird mit dem Installtool importiert, und das Importieren überschreibt alle in der Datenbank

147

6.7

6

Die erste Website mit Contao

vorhandenen Daten. Sie können in einer bestehenden Installation also nicht mal eben so ein neues Frontendtemplate ausprobieren. Neues Frontendtemplate = Inhalt weg. 왘

Alle anderen Templates – Endung .tpl Alle anderen Templates sind Dateien mit der Endung .tpl und erzeugen HTML für das Frontend, das vollständig auf solchen Templates basiert.

Templates mit der Endung .tpl kann man wiederum in drei Untergruppen aufteilen, die für unterschiedliche Bereiche einer Webseite zuständig sind: 왘

Seitentemplates wie fe_page.tpl Seitentemplates sind für die HTML-Struktur einer ganzen Webseite zuständig und werden im Contao-Jargon manchmal auch Layouts genannt, was aber eher missverständlich sein dürfte. In der Regel gibt es pro Website nur ein einziges Seitentemplate, und sofern nichts wirklich Wichtiges dagegenspricht, sollte dass fe_page.tpl sein.

왘

Modultemplates wie nav_default.tpl Modultemplates kümmern sich um das HTML für ein Frontend-Modul oder ein Inhaltselement und werden auch Views genannt. Es gibt sehr viele Modultemplates, denn in Contao basiert die HTML-Ausgabe für alle Module und Inhaltselemente auf einem Template.

왘

Subtemplates wie news_short.php Subtemplates sind sehr viel seltener als Modultemplates und werden auch Partials genannt. Sie sind für einen Teil der HTML-Ausgabe eines Moduls zuständig. Beispiele für Subtemplates finden Sie z. B. in Kapitel 13, »Die Erweiterung »Nachrichten««.

Templates werden gut versteckt in den Unterordnern von system\modules aufbewahrt. Dort hat jedes Modul einen Unterordner namens templates. Geändert und angepasst werden Templates aber niemals direkt in diesen Ordnern, sondern immer über das Backend-Modul Templates. Gleich folgt mehr dazu, aber zunächst werden wir noch einen Blick auf das HTML der Navigation. Templates vs. Frontend-Templates Wenn ich in diesem Buch von Templates spreche, meine ich immer die Dateien mit der Endung .tpl. Ein Frontend-Template mit der Endung .sql wird als Frontend-Template oder Website-Template bezeichnet.

148

Templates: Das HTML für den Quelltext

6.7.2

Das HTML der Navigation im Quelltext

Der Quelltext für die Navigation wird vom Modultemplate nav_default.tpl erzeugt:

Navigation überspringen

• Startseite
• Nachrichten
• Downloads
• Kontakt
• Impressum

 

Listing 6.2 Die vertikale Navigation im Quelltext

Und so ist die Navigation aufgebaut: 왘

Die Navigation ist im Quelltext von einem div mit den Klassen .mod_navigation und .block umgeben.

왘

Am Anfang und am Ende befindet sich ein zweiteiliger Skiplink, der mit der Klasse .invisible ausgeblendet wird.

왘

Den Kern der Navigation ist eine ungeordnete Liste mit der Klasse .level_1.

왘

Die Listenpunkte dieser Liste enthalten alle einen Hyperlink.

왘

Der aktive Navigationspunkt bekommt im li die Klasse .active zugewiesen. Außerdem wird der Link durch ein span ersetzt, das ebenfalls die Klasse .active hat.

왘

Der erste und der letzte Listenpunkt haben zusätzlich noch die Klassen .first bzw. .last.

Es handelt sich also um eine klassische ungeordnete Liste mit einem umgebenden div und einem integrierten Skiplink. Durch die geschickte Vergabe der Klassen

im HTML ist es später ziemlich leicht, die Navigation per CSS nach Wunsch zu

149

6.7

6

Die erste Website mit Contao

stylen. Die seltsamen URLs wie z. B. index.php/startseite.html werden Sie in Kapitel 18, »Die Optimierung für Suchmaschinen«, ändern. und aufgefallen sind: Das sind Anweisungen für die interne Suchmaschine von Contao, damit diese die Navigation nicht mit in den Suchindex aufnimmt.

6.7.3

Backend-Modul »Templates«: Templates update-sicher anpassen

In der Konfiguration für das Frontend-Modul Navigation – Hauptnavi wird festgelegt, dass Contao das Template nav_default verwenden soll. Dahinter verbirgt sich eine Datei namens nav_default.tpl, die im Ordner system\modules\frontend\ templates\ aufbewahrt wird. Der Name nav_default.tpl setzt sich wie folgt zusammen: Das Template (tpl) ist die Normaleinstellung (default) für die HTML-Ausgabe der Navigation (nav). Templates in Ordnern unterhalb des Systemordners sollten Sie unter keinen Umständen ändern. Erstens ist es gefährlich, mit der bloßen Hand in einen laufenden Motor zu greifen, und zweitens werden Änderungen in diesem Ordner beim nächsten Update von Contao überschrieben. Für update-sichere Änderungen an Templates gibt es das Backend-Modul Templates, das im Ordner \templates direkt unterhalb des Hauptordners eine Kopie des Original-Templates aus dem Systemordner anlegt. Diese Kopie können Sie nach Belieben untersuchen, bearbeiten und verändern. Bei einem Update lässt Contao die Templates in diesem Ordner in Ruhe. Contao sucht ein Template zunächst im Ordner \templates, wo die von Ihnen geänderten Templates aufbewahrt werden. Gibt es das gesuchte Template dort, wird es benutzt. Gibt es das gesuchte Template nicht, läuft Contao schnell weiter zum Systemordner und nimmt das Original. Langer Rede kurzer Sinn: 왘

Um sich das Template nav_default.tpl anzuschauen, öffnen Sie nicht das Original aus dem Systemordner im Editor. Das ist viel zu gefährlich.

왘

Sie erstellen mit dem Backend-Modul Templates eine Kopie von nav_ default.tpl und untersuchen diese Kopie.

Genau das machen Sie im folgenden ToDo.

150

Templates: Das HTML für den Quelltext

ToDo: Eine Kopie des Seitentemplates »nav_default.tpl« erstellen 1. Öffnen Sie in der Gruppe Layout das Backend-Modul Templates. 2. Klicken Sie im Arbeitsbereich oben auf den Link Neues Template. 3. Wählen Sie in der beeindruckend langen Liste der templates das Template nav_ default.tpl aus der Gruppe Frontend. 4. Das Zielverzeichnis soll der Ordner templates/blaues_theme sein. 5. Klicken Sie auf die Schaltfläche Template erstellen.

Nach diesem ToDo erscheint im Backend-Modul Templates ein Template mit dem Namen nav_default.tpl. Rechts daneben gibt es fünf Symbole: 왘

Der gelbe Bleistift dient zum Umbenennen des Templates.

왘

Mit dem grünen Kreuz können Sie eine Kopie des Templates erstellen.

왘

Der blaue Pfeil dient dazu, das Template in einen anderen Ordner zu verschieben.

왘

Ein blau-weißes Symbol dient zum Bearbeiten des Templates in einem Editor.

왘

Last, but not least gibt es ein rotes X: Damit löschen Sie das Template.

Abbildung 6.23 zeigt das Template und die fünf Symbole im Backend.

Abbildung 6.23 Eine Kopie des Modultemplates« nav_default.tpl«

Im Dateisystem auf Ihrem Webspace wurde im Ordner templates direkt unterhalb des Root-Ordners die Datei nav_default.tpl erstellt, und zwar mit einem Speicherdatum, das noch nicht allzu lange her sein dürfte. Das Originaltemplate nav_default.tpl liegt nach wie vor ungeändert im Systemordner. Wenn also nach der Untersuchung des Templates im nächsten Abschnitt wider Erwarten etwas völlig danebengehen sollte und Contao im Frontend keine Navigation mehr darstellt, dann löschen Sie einfach im Backend-Modul Templates die Kopie von nav_default.tpl, und alles ist wieder so wie vorher.

151

6.7

6

Die erste Website mit Contao

6.7.4

Ein kurzer Blick in das Template »nav_default.tpl«

Falls Sie noch nie eine PHP-Anweisung wie gesehen haben, erschrecken Sie sich bitte nicht: 왘

PHP-Anweisungen beginnen im Quelltext mit .

왘

PHP-Anweisungen werden vom PHP-Interpreter abgearbeitet und durch Quelltext ersetzt.

Der Befehl echo hat nichts mit der Akustik in gebirgigen Gegenden zu tun, sondern ist PHP für »Schreibe in den Quelltext«. Die Anweisung schreibt also einfach das Wort Hallo in den Quelltext, ohne die Anführungsstriche. Das Grundprinzip des Quelltextes in nav_default.tpl ist wie folgt: 왘

Zuerst wird eine ungeordnete Liste erstellt. Diese Liste bekommt die Ebene der Seite in der Seitenstruktur gleich als Klasse mitgeliefert. Für die erste Ebene lautet das Ergebnis

.

왘

Nach
folgt ein foreach, und vor
steht das entsprechende endforeach. Das bedeutet nichts anderes, als dass der ganze Block dazwischen für jeden Menüpunkt wiederholt wird. For each heißt für jeden. Programmierer nennen das eine Schleife.

왘

Bei der Erstellung der Listenpunkte li innerhalb der Schleife wird zwischen aktiven und nicht aktiven Menüpunkten unterschieden: 왘

Die Bedingung if ($item['isActive']) lautet frei übersetzt »Wenn das Ding aktiv ist«, also wenn der Menüpunkt für die gerade dargestellte Seite steht.

왘

In dem Fall wird im Listenpunkt statt eines Hyperlinks ein span erzeugt, und sowohl das li als auch das span bekommen die Klasse active (und noch ein paar andere, falls welche definiert wurden).

왘

Ist der Menüpunkt nicht aktiv, gilt der Block unterhalb von else.

왘

Hier wird ein li mit einem Hyperlink a erstellt, bei dem abgefragt wird, ob Klassen wie accesskey oder tabindex eingebaut werden sollen.

Das ist der Aufbau des Templates für die Navigation. Wie gesagt: Wenn Sie PHPBefehle vorher noch nie gesehen haben, wirkt das ein bisschen – sagen wir mal – unübersichtlich. Wer mit PHP vertraut ist, wird keine Schwierigkeiten haben, hier seine eigenen Änderungen und Wünsche umzusetzen.

152

Das Contao-Prinzip: Altogether now

Backend-Modul Templates: Die Kopie von »nav_default.tpl« löschen Sie haben in diesem Abschnitt das Prinzip der Templates kennengelernt und dabei eine Kopie des Templates nav_default.tpl erstellt. Diese Kopie benötigen Sie vorerst nicht mehr, und Sie sollten sie gleich wieder löschen. Contao benutzt dann wieder das Original aus dem Systemordner.

6.8

Das Contao-Prinzip: Altogether now

Die erste Seite ist erstellt. Sie ist zwar weder fertig noch besonders hübsch, aber auch so eine provisorische Seite ist für ein CMS bereits harte Arbeit. Die folgende Übersicht zeigt, was dabei genau passiert. Los geht es immer mit dem Aufruf der URL im Browser: 왘

Der Besucher gibt im Browser eine URL ein: http://localhost/contaobuch/

왘

Der Browser braust daraufhin los, sucht den Webserver und findet ihn auf demselben Rechner.

왘

Der Webserver schaut in den Ordner htdocs/contaobuch, sieht, dass dort Contao zuständig ist, und sagt Bescheid, dass da eine Seite gewünscht wird. Wenn möglich auf Deutsch.

왘

Contao prüft die Seitenstruktur. Dort gibt es einen Startpunkt mit der Sprache de. Passt.

왘

Zu diesem Startpunkt gehören mehrere Seiten. Contao nimmt, weil in der URL keine bestimmte Seite gewünscht wurde, die erste Reguläre Seite unterhalb des Startpunktes, die den Status veröffentlicht hat, und das ist die Startseite.

왘

Zur Darstellung dieser Seite im Frontend benutzt Contao ein Theme, das aus Seitenlayouts, Stylesheets und Frontend-Modulen besteht.

왘

Da für die Startseite nichts anderes definiert wurde, nimmt Contao als Seitenlayout das Standardlayout [Standard].

왘

Das Seitenlayout definiert die Layoutstruktur der Webseite: 왘

Die Seite hat ein zentriertes, dreispaltiges Layout. Breite 960px.

왘

Die linke und rechte Spalte haben eine Breite von jeweils 182px.

왘

Es gibt einen Kopf- und einen Fußbereich.

왘

Gestaltet wird die Seite mit dem Stylesheet bildschirm.

153

6.8

6

Die erste Website mit Contao

왘

Außerdem legt das Seitenlayout fest, welche Module in welchem Layoutbereich (Spalte) erscheinen: 왘

Das HTML aus dem Modul Layout – Header kommt in die Kopfzeile.

왘

Das Modul Navigation – Hauptnavi erscheint in der linken Spalte. Welches HTML das Modul erzeugt, wird über das Template nav_default geregelt.

왘

Das Modul Artikel sorgt dafür, dass Artikel, die zur Seite gehören, den Status veröffentlicht haben und der Hauptspalte zugeordnet sind, auch tatsächlich in der Hauptspalte erscheinen.

왘

Das HTML aus dem Modul Layout – Footer erscheint in der Fußzeile.

Mit all diesen Informationen erstellt Contao den Quelltext der Webseite, den der Webserver dann an den Besucher ausliefert. Fazit: Ohne Seitenstruktur geht in Contao gar nichts, aber der eigentliche Drehund Angelpunkt ist das Seitenlayout. Es verbindet die Seitenstruktur, FrontendModule, Stylesheets und Artikel miteinander, sodass aus all diesen Komponenten im Browser eine scheinbar ganz normale Webseite wird. Eigentlich ist es ganz einfach, wenn man es einmal begriffen hat.

154

In diesem Kapitel erfahren Sie alles über die Arbeit mit CSS in Contao: interne Stylesheets, externe Stylesheets und wie man die beiden am besten kombiniert. Zum Schluss lernen Sie das Contao-CSS-Framework im Detail kennen.

7

Webseiten gestalten: Contao und CSS

Dieses Kapitel erläutert die verschiedenen Möglichkeiten, wie Contao und CSS zusammenarbeiten können. Los geht es zunächst mit einer kleinen Übersicht.

7.1

Übersicht: Contao und CSS

Zunächst eine kleine Übersicht über das CSS-Framework von Contao und ein paar Anmerkungen über den Unterschied zwischen den Begriffen interne Stylesheets und externe Stylesheets.

7.1.1

Gestatten: Das CSS-Framework von Contao

Contao verfügt über ein eingebautes CSS-Framework, mit dem sich nahezu alle gewünschten Webdesigns umsetzen lassen, und Sie haben dieses CSS-Framework bei der Erstellung der Beispielsite in Kapitel 6 bereits benutzt. Im Backend-Modul Themes 폷 Seitenlayouts haben Sie festgelegt, wie das Layout aussehen soll. Header, Footer, Spaltenkonfiguration, Breite und Ausrichtung wurden dabei bequem per Mausklick definiert. Contao hat aus diesen Angaben im Hintergrund das entsprechende HTML und CSS erzeugt, sodass in allen Browsern ein stabiles Layout angezeigt wird. Aus Benutzersicht gibt es im Backend-Modul Seitenlayouts vier Bereiche, die für die Arbeit mit dem CSS-Framework relevant sind: 왘

Kopf- und Fusszeile

왘

Spaltenkonfiguration

왘

Stylesheets

왘

Statisches Layout (Breite und Ausrichtung)

155

7

Webseiten gestalten: Contao und CSS

Gerade beim Kennenlernen von Contao ist die Benutzung dieses eingebauten Frameworks sehr zu empfehlen, denn Sie müssen dann zur Erstellung eines Layouts weder ein eigenes Seitentemplate anlegen noch das für die Layoutstruktur benötigte CSS selbst schreiben.

7.1.2

Stylesheets bearbeiten: Interner oder externer Editor?

Wenn Sie das eingebaute CSS-Framework verwenden, gibt es in Contao zwei grundsätzlich verschiedene Möglichkeiten, das CSS zur Gestaltung der Webseiten zu schreiben: 왘

Interne Stylesheets (siehe ab Abschnitt 7.2, Seite 156) Interne Stylesheets werden im Backend-Modul Themes 폷 Stylesheets erstellt, in der Datenbank gespeichert und in der Regel mit dem internen CSS-Editor bearbeitet. Existierende Stylesheet-Dateien können importiert werden und die Erweiterung [csseditor] ermöglicht die Arbeit im Quelltext.

왘

Externe Stylesheets (siehe Abschnitt 7.7, Seite 176) Externe Stylesheets sind ganz normale Stylesheet-Dateien, die in einem ganz normalen Editor bearbeitet werden. Nachdem Sie die Arbeit mit internen Stylesheets kennengelernt haben, erfahren Sie in diesem Abschnitt, wie man externe Stylesheets am besten in Contao einbindet.

Natürlich kann man interne und externe Stylesheets auch miteinander kombinieren, und in der Praxis ist diese ab Seite 182 beschriebene Zusammenarbeit oft die effektivste Lösung. Aber zunächst einmal geht es um eine Spezialität von Contao: interne Stylesheets.

7.2

Arbeiten mit internen Stylesheets

Das Backend-Modul Themes 폷 Stylesheets, mit dem Sie im vorherigen Kapitel bereits die ersten Styles erstellt haben, speichert die Stylesheets und die darin enthaltenen Formatdefinitionen in der Datenbank. Aus diesen Datensätzen werden im Hintergrund CSS-Dateien im Root-Ordner der Installation generiert, die der Browser zur Darstellung der Webseiten benutzt. Abbildung 7.1 stellt diesen Sachverhalt dar.

Backend-Modul THEMES • STYLESHEETS

Datensätze in Datenbank

CSS-Datei im Hauptordner

Abbildung 7.1 Interne Stylesheets werden in der Datenbank gespeichert.

156

Arbeiten mit internen Stylesheets

Sie können sich die im Hauptordner automatisch erzeugten CSS-Dateien wie bildschirm.css in einem normalen CSS-Editor anschauen und bearbeiten. Die Änderungen werden nach dem Speichern sogar im Browser angezeigt, und alles scheint in Ordnung zu sein. Aber früher oder später gibt es bei dieser Methode eine Überraschung, denn bei der nächsten automatischen Generierung des Stylesheets im Backend werden die Änderungen, die Sie im externen Editor vorgenommen haben,wieder überschrieben. Der in Abbildung 7.1 dargestellte Weg von der Datenbank zur CSS-Datei ist eine Einbahnstraße. Die Bearbeitung von internen Stylesheets in einem externen Editor ist zwar grundsätzlich möglich, aber mit Vorsicht zu genießen und wird erst weiter hinten in diesem Kapitel beschrieben. Konzentrieren Sie sich zunächst darauf, den internen Editor kennenzulernen. Interne Stylesheets ohne Dateiendung, externe mit ».css« Da im Folgenden manchmal ein Stylesheet in der Datenbank und manchmal eine CSSDatei auf dem Webspace gemeint ist, gilt folgender Grundsatz: 왘

»Das Stylesheet bildschirm« ohne die Endung .css meint ein Stylesheet im Backend oder in der Datenbank.

왘

»Das Stylesheet bildschirm.css« mit der Endung .css meint eine CSS-Datei in einem Ordner auf dem Webspace.

7.2.1

Der interne CSS-Editor: CSS per HTML-Formular

Erstellt und bearbeitet werden die Formatdefinitionen im Backend-Modul Themes 폷 Stylesheets mit einem HTML-Formular, das Sie in Abschnitt 6.5, »Das erste Stylesheet erstellen und zuweisen«, bereits kennengelernt haben. Dazu müssen Sie zweimal auf ein Bleistift-Symbol klicken: 왘

Der erste Klick öffnet das Stylesheet zur Bearbeitung.

왘

Der zweite Klick dient dazu, den Style selbst zu bearbeiten.

Abbildung 7.2 zeigt die Bearbeitung der Formatdefinition für body. CSS per HTML-Formular zu schreiben ist zwar ungewohnt, hat aber den Vorteil, dass später bei der Pflege der Webseiten auch unerfahrene, mit der genauen Syntax von CSS nicht vertraute Benutzer Änderungen am CSS vornehmen können.

157

7.2

7

Webseiten gestalten: Contao und CSS

Abbildung 7.2 Der interne CSS-Editor – CSS per HTML-Formular

7.2.2

Übung: Header und Footer mit dem internen CSS-Editor gestalten

In diesem Abschnitt ändern und erweitern Sie das bereits vorhandene interne Stylesheet bildschirm, um den internen Editor besser kennenzulernen. Sie können bei der Bearbeitung eines Styles vorherige Versionen wiederherstellen, indem Sie im Arbeitsbereich ganz rechts oben die gewünschte Version auswählen und dann auf die Schaltfläche Wiederherstellen klicken. Denken Sie auch an die Tastenkürzel für Speichern ((Alt) + (s)) und Speichern und Schliessen ((Alt) + (c)). ToDo: Styles im Stylesheet »bildschirm« erstellen und bearbeiten 1. Öffnen Sie im Stylesheet bildschirm den Style #header. 2. Ergänzen Sie ein padding von »18px« für alle vier Seiten. 3. Ergänzen Sie als Hintergrundfarbe »89adcd«. 4. Deaktivieren Sie das Kontrollkästchen Rahmen, um die Rahmenlinien zu entfernen. Sollten Sie es später wieder aktivieren, sind die alten Werte dann sofort wieder da. Das ist sehr praktisch zum schnellen Testen. 5. Beenden Sie die Bearbeitung mit Speichern und Schliessen. 6. Klicken Sie neben dem Style für #header ganz rechts auf das weiße Kreuz im grünen Kreis, um darunter einen neuen Style einzufügen.

158

Arbeiten mit internen Stylesheets

ToDo: Styles im Stylesheet »bildschirm« erstellen und bearbeiten (Forts.) 7. Geben Sie als Selektor »#header h1« ein. 8. Setzen Sie den oberen Margin für die Überschrift auf »0«. 9. Speichern und Schliessen Sie ((Alt) + (c)). 10. Öffnen Sie den Style für #main, und entfernen Sie die Rahmenlinien, indem Sie wieder das Kontrollkästchen Rahmen deaktivieren. 11. Klicken Sie auf Speichern und Schliessen. 12. Öffnen Sie den Style für #footer. 13. Definieren Sie ein unteres margin von 1em. 14. Definieren Sie ein padding von 18px für oben, rechts und links und 9px für unten. 15. Geben Sie als Hintergrundfarbe z. B. »89adcd« ein. 16. Entfernen Sie die Rahmenlinien für den Footer. 17. Setzen Sie im Bereich Schrift die Schriftfarbe auf 000. 18. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo sieht die Startseite im Browser ungefähr so aus wie in Abbildung 7.3.

Abbildung 7.3 Das Frontend mit gestyltem Header und Footer

Mit ein bisschen Übung ist der interne Editor richtig gut und besonders für ungeübte CSS-Schreiberlinge, die nicht täglich Styles schreiben, eine echte Hilfe. Aber er hat auch seine Grenzen:

159

7.2

7

Webseiten gestalten: Contao und CSS

왘

Bei den Boxmodell-Eigenschaften ist nur eine Einheit für alle Seiten möglich. Eine Mischung wie padding-left:18px und padding-top:1em kann man per Formular nicht eingeben.

왘

Bei Rahmenlinien ist im Formular nur eine Farbe pro Style möglich. Getrennte Farben für oben und unten sind zum Beispiel nicht möglich.

Für solche und andere Fälle gibt es ganz unten im internen Editor das Feld Eigener Code. Dort können Sie alles reinschreiben, was Sie möchten – solange es valides CSS ist.

7.2.3

Tipps für die Arbeit mit dem internen CSS-Editor

Um Ihnen die Eingewöhnung etwas zu erleichtern, zeige ich Ihnen im Folgenden zunächst ein paar einfache Tricks zur Arbeit mit dem internen Editor. Am effektivsten ist eine Kombination aus Maus- und Tastaturbedienung: 왘

Blenden Sie die einzelnen Bereiche per Maus mit einem Klick auf die grüne Überschrift je nach Bedarf ein- und aus.

왘

Ein Sprung in einen anderen Bereich geht am einfachsten mit der Maus. Innerhalb eines Bereiches hingegen ist die Tastatur schneller: (ÿ) springt weiter ins nächste Feld, (ª) + (ÿ) bringt Sie wieder zurück.

왘

Bei einer Dropdown-Liste für Einheiten können Sie den gewünschten Wert einfach per Buchstabe eingeben: Drücken Sie (p) für px oder (e) für em.

왘

Per Tastatur können Sie eine Auswahlliste mit (Alt) + (Pfeil¼) ausklappen. Mit (Pfeil½) bzw. (Pfeil¼) wählen Sie den gewünschten Eintrag, und mit (Enter) bestätigen Sie diesen.

Tastaturfans lassen beim Bearbeiten der Styles die linke Hand in ständiger Bereitschaft links unten über der (Alt)-Taste schweben: 왘

(Alt) + (s) speichert. Auch mal eben zwischendurch. (Alt) + (c) speichert, schließt das Formular und kehrt zur Liste der Styles zurück.

왘

(Alt) + (f) startet die Frontend-Vorschau. (Strg) + (w) schließt sie wieder.

왘

(Alt) + (n) öffnet nach dem Speichern die Eingabemaske für die nächste Formatdefinition.

왘

(Alt) + (b) entspricht einem Klick auf den grünen Zurück-Pfeil rechts oben im Arbeitsbereich und geht zur vorherigen Seite zurück, ohne die Änderungen zu speichern.

Mit diesen Kürzeln geht die Arbeit im internen Editor nach kurzer Zeit buchstäblich locker von der Hand.

160

Arbeiten mit internen Stylesheets

In einigen Browsern gibt es etwas andere Tastenkombinationen In einigen Browsern und auf dem Mac funktionieren diese Tastenkürzel ein bisschen anders. In Abschnitt 5.4 ab Seite 104, »Rechts: Der Arbeitsbereich«, wird das näher erläutert.

7.2.4

Integration von internen Stylesheets in »Seitenlayouts«

Bei der Verwendung von internen Stylesheets können Sie im Backend-Modul Seitenlayouts alle vier relevanten Bereiche nutzen, um ein Seitenlayout zu erstellen. Sie können 왘

eine Kopf- und Fußzeile generieren.

왘

die Spaltenkonfiguration definieren.

왘

die Stylesheets ins Seitenlayout einbinden.

왘

im Bereich »Statisches Layout« die Breite und Ausrichtung des Layouts festlegen.

Interne Stylesheets arbeiten also perfekt mit dem CSS-Framework von Contao zusammen. Abbildung 7.4 zeigt diesen Sachverhalt in der Übersicht.

Abbildung 7.4 Integration von internen Stylesheets in Seitenlayouts

»Stylesheets zusammenfassen«: Als eine Datei ausliefern Im Backend-Modul Seitenlayouts können Sie im Bereich Stylesheets mit einem simplen Mausklick auf Stylesheets zusammenfassen alle internen Stylesheets in einer Datei zusammenfassen, um die Ladezeit der Seiten zu verbessern.

161

7.2

7

Webseiten gestalten: Contao und CSS

7.3

Interne Stylesheets: CSS-Dateien importieren

Stylesheets, die als CSS-Datei bereits fix und fertig vorliegen, müssen Sie nicht Style für Style in den internen Editor übertragen. Mit der Funktion CSS importieren können Sie diese bequem in die Datenbank importieren. Zu importierende Stylesheet-Dateien müssen zunächst unterhalb von tl_files gespeichert werden. Das Importieren selbst verwandelt die externe CSS-Datei in ein internes in der Datenbank gespeichertes Stylesheet, das mit dem internen CSSEditor bearbeitet werden kann.

7.3.1

Das Reset-Stylesheet »basic.css« herunterladen

Viele Webdesigner benutzen ein im Laufe der Zeit gereiftes Reset-Stylesheet zur Normalisierung der Abstände von margin und padding und zur grundlegenden Formatierung der Webseiten. In diesem Abschnitt lernen Sie die CSS-Importfunktion anhand eines auf www.contao.org erhältlichen Reset-Stylesheets namens basic.css kennen, das sich gut für die Arbeit mit Contao eignet. Im folgenden ToDo laden Sie das zu importierende Stylesheet herunter und speichern es im Ordner tl_files/importieren, in dem alle zu importierenden Dateien zwischengelagert werden. ToDo: Das Reset-Stylesheet »basic.css« herunterladen und speichern 1. Surfen Sie zur Downloadseite auf www.contao.org: http://www.contao.org/herunterladen.html 2. Laden Sie unter der Überschrift Das CSS Framework erweitern das Reset-Stylesheet (2,3kb) herunter. 3. Speichern Sie das Stylesheet basic.css in tl_files/importieren.

In den nächsten Abschnitten importieren Sie dieses Stylesheet in die Datenbank und lernen es dabei genauer kennen.

7.3.2

Das Reset-Stylesheet »basic.css« importieren

Im folgenden ToDo importieren Sie basic.css, ändern den Medientyp auf screen und verbinden es dann als erstes zu ladendes Stylesheet mit dem aktuellen Seitenlayout.

162

Interne Stylesheets: CSS-Dateien importieren

ToDo: Das Reset-Stylesheet »basic.css« importieren und einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Stylesheets. 2. Klicken Sie im Arbeitsbereich oben rechts auf CSS importieren. 3. Aktivieren Sie in der Zeile Dateisystem ganz rechts das Kontrollkästchen Auswahl ändern. Contao zeigt Ihnen daraufhin den Inhalt des Ordners tl_files. 4. Wechseln Sie in den Unterordner importieren, und aktivieren Sie das Kontrollkästchen für basic.css. 5. Klicken Sie auf die Schaltfläche CSS-Import. Jetzt wird das Stylesheet in die Datenbank importiert. 6. Klicken Sie mit der rechten Maustaste auf den gelben Bleistift neben dem Stylesheet basic [all], und wählen Sie den Befehl Stylesheet-Einstellungen bearbeiten. 7. Ändern Sie den Medientyp von all auf screen, und beenden Sie die Bearbeitung mit Speichern und zurück. 8. Um das Stylesheet mit einem Seitenlayout zu verbinden, öffnen Sie im BackendModul Themes 폷 Seitenlayouts das Standardlayout [Standard] zur Bearbeitung. 9. Aktivieren Sie im Bereich Stylesheets das Kontrollkästchen für das Stylesheet basic. 10. Ändern Sie die Reihenfolge der Stylesheets mit den grünen Pfeilen nach unten bzw. oben, sodass das Stylesheet basic zuerst geladen wird. 11. Speichern Sie die Änderungen mit Speichern und Schliessen.

Nach einer Aktualisierung sieht das Frontend im Browser danach ungefähr so aus wie in Abbildung 7.5. Die Schriftarten haben sich geändert, die Aufzählungspunkte in der Navigation sind verschwunden und bei einigen Elementen wurden die Außen- und Innenabstände (margin und padding) entfernt.

Abbildung 7.5 Die Startseite der Beispielsite mit »basic.css«

163

7.3

7

Webseiten gestalten: Contao und CSS

Nach dem Importieren stehen die Styles im Backend übersichtlich untereinander und haben rechts einen Satz Symbole zur Bearbeitung (Abbildung 7.6).

Abbildung 7.6 Das importierte Stylesheet »basic« im Backend

Die Symbole selbst sind zum größten Teil selbsterklärend: 왘

Der gelbe Bleistift öffnet den Style zur Bearbeitung.

왘

Das grüne Kreuz dient zum Duplizieren des Styles.

왘

Der blaue Pfeil dient zum Verschieben eines Styles. Der Style wird in die Ablage kopiert und kann auch in einem anderen Stylesheet wieder eingefügt werden.

왘

Das rote X löscht den Style.

왘

Das grüne Auge blendet einen Style vorübergehend aus.

왘

Das blau hinterlegte »i« zeigt alle Eigenschaften und Werte des Styles auf einen Blick und ist übersichtlicher als das HTML-Formular.

왘

Das weiße Kreuz im grünen Kreis ganz rechts außen fügt unterhalb des Styles eine neue Formatdefinition ein.

Sehr praktisch ist der »Augen-Klick«, mit dem Sie einen Style kurz ausblenden können, um dessen Auswirkung im Frontend zu studieren:

164

Interne Stylesheets: CSS-Dateien importieren

왘

Wenn Sie auf das grüne Auge klicken, wird es grau, um zu signalisieren, dass der Style inaktiv ist.

왘

Nach dem Neuladen zeigt der Browser die Webseite ohne diesen Style.

Bei jeder Änderung, also auch bei einem Klick auf das Auge, erzeugt Contao im Hintergrund in Windeseile das Stylesheet basic.css im Hauptordner aufs Neue, sodass die Browser immer die aktuelle Version benutzen. Wenn Sie genau wissen möchten, ob und wann Contao ein Stylesheet generiert hat, können Sie das im Backend-Modul System-Log nachschauen. Achten Sie auf die in Grün erscheinende Meldung »Generated style sheet«. Einschränkungen beim Importieren von Stylesheets Der Import eines Stylesheets verläuft in den meisten Fällen recht reibungslos, aber manchmal sind ein paar vorbereitende Maßnahmen hilfreich, damit es beim Import keine Probleme gibt: 왘

Farbnamen wie white werden in das Feld Eigener Code importiert. Am besten ersetzen Sie Farbnamen vor dem Importieren durch hexadezimale Werte wie #ffffff. Die Kurzform #fff geht auch.

왘

Auch andere Keywords wie z. B. das small in font-size: small bereiten Schwierigkeiten und sollten ebenfalls besser durch Zahlwerte ersetzt werden (13px oder 81.25 %).

왘

Kurzschreibweisen werden teilweise nicht richtig verstanden. Die Werte für border sollten z. B. immer die Reihenfolge 1px solid #ccc haben (width, style, color). Andere Reihenfolgen werden nicht korrekt erkannt, auch wenn sie valide sind.

왘

Ironie am Rande: Die Anweisung @import geht beim Import verloren.

Sie sollten das interne Stylesheet also einmal in Ruhe daraufhin anschauen, ob nach dem Importieren noch alles stimmt.

7.3.3

Das Reset-Stylesheet »basic.css« im Detail

In diesem Abschnitt werfen Sie einen kurzen Blick auf das Stylesheet basic.css, das Sie eben importiert haben. Es besteht aus vier großen Teilen. Teil 1 ist nur ein einziger Style, der das margin und padding für zahlreiche Elemente auf 0 setzt (Reset): /* Reset margins */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ol, ul, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea { margin: 0; padding: 0; } Listing 7.1

Der »Reset« – Teil 1 des Reset-Stylesheets »basic.css«

165

7.3

7

Webseiten gestalten: Contao und CSS

Im zweiten Teil folgt nach dem Kommentar /* Format basic elements */ eine Grundformatierung. Diese besteht aus zwölf Styles mit grundlegenden Formatierungen für Tabellen, Hyperlinks und andere Elemente: /* Format basic elements */ table {border-collapse: collapse; border-spacing: 0;} caption, th, td {text-align: left; vertical-align: top;} abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor: help; } blockquote, q {quotes: none;} fieldset, img {border: 0;} li {list-style-type: none;} sup {vertical-align: text-top;} sub {vertical-align: text-bottom;} del {text-decoration: line-through;} ins {text-decoration: none;} a {color: #00f;} :focus {outline: 0;} Listing 7.2

Die »Grundformatierung« – Teil 2 von »basic.css«

Der dritte Teil des Stylesheets beginnt nach dem Kommentar /* Font settings */ und umfasst neun Styles mit einer grundlegenden Schriftformatierung: /* Font settings */ body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 12px; color: #000; } input, button, textarea, select { font-family: inherit; font-size: 99 %; font-weight: inherit; } pre, code { font-family: "Lucida Console", Monaco, monospace; font-size: 12px; } h1, h2, h3, h4, h5, h6 { font-size: 100 %;

166

Das Suchen und Filtern von Styles in internen Stylesheets

font-weight: normal; } h1 {font-size: 22px;} h2 {font-size: 20px;} h3 {font-size: 18px;} table {font-size: inherit;} caption, th {font-weight: bold;} Listing 7.3

»Schriftformatierung« – Teil 3 des Reset-Stylesheets »basic.css«

Im letzten Teil werden nach dem Kommentar /* Default margins */ für einige Elemente noch ein paar Standardabstände definiert: /* Default margins */ h1, h2, h3, h4, h5, h6 {margin-top: 1em;} h1, h2, h3, h4, h5, h6, p, pre, blockquote, table, ol, ul, form { margin-bottom: 12px; /* Should match the font size */ } Listing 7.4

»Standardabstände« – Teil 4 des Reset-Stylesheets »basic.css«

So viel zum Inhalt des Reset-Stylesheets basic.css. Andere Reset-Stylesheets Sie können natürlich auch Ihr eigenes Reset-Stylesheet importieren oder sich ein anderes Reset-Stylesheet ausleihen. Neben dem Klassiker von Eric Meyer gibt es noch ein paar andere interessante Beispiele: 왘

die Übersicht: »Vier CSS-Resets« (Dr. Web) http://www.drweb.de/magazin/vier-css-resets/

왘

die einfache Variante: »CSS Reset – a simpler option« (Russ Weakley) http://www.maxdesign.com.au/articles/css-reset/

왘

kein Reset: »Setting rather than Resetting …« (Thierry Koblentz) http://bit.ly/dqvh64

7.4

Das Suchen und Filtern von Styles in internen Stylesheets

In diesem Abschnitt zeige ich noch zwei einfache, aber effektive Hilfsmittel zur Arbeit mit dem Backend-Modul Themes 폷 Stylesheets: das Suchen und Filtern von Styles.

167

7.4

7

Webseiten gestalten: Contao und CSS

7.4.1

Styles mit bestimmten Selektoren suchen

Wenn ein Stylesheet zur Bearbeitung geöffnet ist, sehen Sie ganz oben im Arbeitsbereich die in Abbildung 7.7 hervorgehobene Zeile zum Suchen und Filtern von Styles.

Abbildung 7.7 »Suchen« und »Filtern« – oben im Arbeitsbereich

Rechts am Rand sehen Sie, dass momentan 24 Styles angezeigt werden. Die beiden goldfarbenen Pfeile ganz außen bewirken, dass die Anzeige des Stylesheets nach einer Suche und Filterung entsprechend geändert wird (entspricht (Enter)). Sie können die Anzeige der Styles mit einer Suche nach einer Kategorie, einem Kommentar oder einem Selektor einschränken. Die Auswahl Kategorie lernen Sie im nächsten Abschnitt beim Filtern kennen, einen Kommentar haben Sie bisher noch nicht eingegeben, also probieren Sie im folgenden ToDo die Suche nach einem bestimmten Selektor. ToDo: So suchen Sie im Stylesheet nach bestimmten Selektoren 1. Wählen Sie oben im Arbeitsbereich in der Auswahlliste des Feldes Suchen den Eintrag Selektor. 2. Geben Sie im Eingabefeld nach dem Gleichheitszeichen den Selektor »body« ein. 3. Drücken Sie (Enter), oder klicken Sie auf die beiden Pfeile ganz rechts. 4. Es werden nur noch zwei Styles angezeigt, die beide den Selektor body enthalten. Beachten Sie dabei, dass die beiden Suchfelder hellgelb hinterlegt sind, um anzuzeigen, dass ein Suchfilter aktiv ist. 5. Ändern Sie die Suche, und suchen Sie zum Beispiel nach dem Selektor »h1«. Im Stylesheet basic gibt es fünf Styles mit h1. 6. Um wieder alle Styles zu sehen, entfernen Sie den Suchfilter wieder, indem Sie mit einem Doppelklick den Selektor im Suchfeld markieren, (ENTF) drücken und das Löschen mit (Enter) bestätigen.

168

Das Suchen und Filtern von Styles in internen Stylesheets

7.4.2

Filtern nach Kategorie

Wenn Sie einen Style zur Bearbeitung öffnen, sehen Sie gleich im ersten Bereich, Selektor und Kategorie, ein Eingabefeld namens Kategorie (Abbildung 7.8).

Abbildung 7.8 Das Eingabefeld »Kategorie« beim Bearbeiten von Styles

In diesem Feld können Sie Styles durch Zuweisen einer Kategorie wie zum Beispiel Layout, Navigation oder Formulare gruppieren und anschließend in der Übersicht mit dem Filter nur jeweils eine Kategorie anzeigen lassen. Im Reset-Stylesheet basic eignen sich als Kategorie zum Beispiel die vier Teile Reset, Grundformatierung, Schriftformatierung und Standardabstände. Diese Kategorien werden den Styles zugewiesen, und danach können Sie per Klick eine bestimmte Kategorie anzeigen lassen. Alle anderen Styles werden dann vorübergehend ausgeblendet, was die Übersicht bei längeren Stylesheets enorm erhöht. Zur Zuweisung der Kategorien müssten Sie normalerweise jeden Style einzeln öffnen, die Kategorie eingeben und den Style wieder speichern. Das ist nicht sehr erquicklich, und deshalb lernen Sie im folgenden ToDo quasi nebenbei eine echte Arbeitserleichterung kennen: die Funktion Mehrere bearbeiten. Diese Funktion gibt es in Contao an vielen Stellen, und sie erleichtert das Leben eines ContentManagers ungemein. ToDo: Kategorien mit der Funktion »Mehrere bearbeiten« zuweisen 1. Öffnen Sie gegebenenfalls das Stylesheet basic zur Bearbeitung. 2. Klicken Sie im Arbeitsbereich rechts oben auf Mehrere bearbeiten. 3. Aktivieren Sie auf der folgenden Seite das Kontrollkästchen Alle auswählen. 4. Scrollen Sie ganz nach unten, und klicken Sie auf Bearbeiten. 5. Aktiveren Sie auf der folgenden Seite die Kontrollkästchen für die Felder Selektor und Kategorie, und klicken Sie dann unten auf Weiter.

169

7.4

7

Webseiten gestalten: Contao und CSS

ToDo: Kategorien mit der Funktion »Mehrere bearbeiten« zuweisen (Forts.) 6. Auf der folgenden Seite sehen Sie für alle 24 Styles jeweils die Felder Selektor und Kategorie untereinander. 7. Weisen Sie den ersten Style der Kategorie »Reset« zu. 8. Die nächsten zwölf von table bis inklusive :focus bekommen die Kategorie »Grundformatierung«. 9. Die Kategorie »Schriftformatierung« wird den nächsten neun Styles zugewiesen, von body bis einschließlich caption, th. 10. Die letzten beiden Formatdefinitionen bekommen die Kategorie »Standardabstände«. 11. Speichern Sie die Änderungen mit Speichern und Schliessen.

Nach diesem ToDo können Sie in der Stylesheet-Übersicht mit der Liste Filtern jeweils nur eine der vier Kategorien anzeigen lassen. Abbildung 7.9 zeigt den Filter mit der Kategorie »Schriftformatierung«.

Abbildung 7.9 Der Filter mit der Kategorie »Schriftformatierung« in Aktion

Um den Filter wieder außer Kraft zu setzen, wählen Sie in der Auswahlliste die Option Kategorie und klicken danach auf den goldenen Doppelpfeil ganz rechts außen.

170

Die Erweiterung »[csseditor]«

7.5

Die Erweiterung »[csseditor]«

Den internen CSS-Editor von Contao haben Sie bereits kennengelernt. In diesem Abschnitt möchte ich Ihnen die Erweiterung [csseditor] vorstellen, die die Arbeit im Quelltext von internen Stylesheets ermöglicht. Die Erweiterung [csseditor] ist vollständig kompatibel mit dem internen CSS-Editor (der Bearbeitung von CSS über das HTML-Formular), sodass Sie beliebig zwischen den beiden wechseln können.

7.5.1

Die Erweiterung »[csseditor]« installieren und kennenlernen

Im folgenden ToDo installieren Sie zunächst die Erweiterung [csseditor]. ToDo: Die Erweiterung »[csseditor]« installieren 1. Öffnen Sie das Backend-Modul System 폷 Erweiterungskatalog. 2. Geben Sie oben im Arbeitsbereich im Feld Suchen »css« ein. 3. Klicken Sie in der Ergebnisliste auf das grüne [csseditor]. 4. Installieren Sie die Erweiterung mit einem Klick auf die Schaltfläche Installieren am unteren Fensterrand. 5. Bestätigen Sie die Installation mit einem Klick auf Weiter. 6. Klicken Sie nach erfolgreicher Installation auf Weiter. 7. Bestätigen Sie die Meldung »Die Datenbank ist aktuell« mit OK.

Nach erfolgreicher Installation sehen Sie im Modul Erweiterungsverwaltung das Modul [csseditor]. Nach der Installation der Erweiterung gibt es in System 폷 Einstellungen einen neuen Bereich namens CSS Editor settings, in dem Sie z. B. die Schriftart und die Fenstergröße für den Editor einstellen können. Außerdem ist bei der Bearbeitung der Stylesheets im Backend-Modul Themes 폷 Stylesheets ein neues Symbol aufgetaucht (Abbildung 7.10). Um den Quelltext eines internen Stylesheets zu bearbeiten, klicken Sie statt auf den gelben Bleistift auf das blau-weiße Symbol rechts daneben. Abbildung 7.11 zeigt das Stylesheet bildschirm im [csseditor]. Die Symbolleiste oberhalb des Editorfensters enthält einige nützliche Befehle: zu einer bestimmten Zeile springen, Suchen und Ersetzen, Syntax-Highlighting einund ausschalten und neu laden, und im Vollbildmodus arbeiten.

171

7.5

7

Webseiten gestalten: Contao und CSS

Abbildung 7.10 Die neuen Symbole öffnen Stylesheets im »[csseditor]«.

Abbildung 7.11 Das Stylesheet »bildschirm« in »[csseditor]«

172

Die Erweiterung »[csseditor]«

7.5.2

Interne Stylesheets extern bearbeiten

Die Erweiterung [csseditor] ermöglicht noch eine Variante der CSS-Bearbeitung, die viele Autoren gerne einsetzen: 왘

Sie bearbeiten die von Contao generierten Stylesheets im Hauptordner mit einem externen Editor.

왘

Anschließend kopieren Sie das CSS über [csseditor] wieder zurück in die Datenbank.

Dieser Weg erleichert das »Zurück in die Datenbank« der editierten Styles. Drei einfache (Strg)-Kombinationen reichen aus: 1. Markieren Sie im externen Editor mit (Strg) + (a) alle Styles. 2. Kopieren Sie sie mit (Strg) + (c) in die Zwischenablage, 3. Fügen Sie sie mit (Strg) + (v) in den [csseditor] ein. Die Erweiterung [csseditor] speichert die Styles dann in der Datenbank, genau wie es bei einem CSS-Import der Fall wäre. Ein potenzieller Nachteil dieses Workflow ist es, dass die im Hauptordner von Contao generierten CSS-Dateien sehr platzsparend formatiert sind und weder Kommentare noch Kategorien enthalten. Wenn diese Stylesheets bearbeitet und zurück in die Datenbank kopiert werden, bleiben Kommentare und Kategorien meist früher oder später auf der Strecke. Teamwork: »[csseditor]« und »Firebug« oder »Web Developer Toolbar« Wenn Sie mit dem Firefox und den Add-Ons Firebug oder Web Developer Toolbar arbeiten, können Sie sich sogar den externen Editor sparen. Beide Add-Ons bieten Ihnen die Möglichkeit, das CSS direkt im Browser zu editieren und die Auswirkungen der Styles ohne Speicherung direkt im Browser zu sehen.

7.5.3

Einschränkungen bei der Arbeit mit »[csseditor]«

Quelltextfans werden aufatmen und sich ein Stück weit zu Hause fühlen, aber beim Speichern im [csseditor] gelten ähnliche Einschränkungen wie beim internen Editor, die hier nicht unerwähnt bleiben sollen: 왘

Die Reihenfolge der Deklarationen innerhalb eines Styles wird nach dem Speichern geändert. Das ist zwar nicht schlimm, aber wissenswert.

왘

Sie können für Boxmodell-Eigenschaften im [csseditor] zwar für oben, unten, links und rechts getrennte Einheiten eingeben, diese erscheinen nach dem Speichern in der Datenbank aber nicht mehr korrekt.

173

7.5

7

Webseiten gestalten: Contao und CSS

왘

Untereinander stehende, doppelte Deklarationen mit unterschiedlichen Werten zum Testen kann man zwar hinschreiben, beim Speichern wird aber die zuerst notierte Deklaration gelöscht.

왘

Mit einem Klick auf das Auge vorübergehend ausgeblendete Styles werden im [csseditor] nicht angezeigt. So weit ist das okay. Beim Speichern werden sie aber gelöscht. Oops.

Trotz dieser (und vielleicht noch anderer) Einschränkungen ist die Erweiterung [csseditor] bei der Bearbeitung von internen Stylesheets im Backend ein sehr nützliches Werkzeug.

7.6

Übung: Gestaltung der Navigation per CSS

Nach dieser Einführung in die Arbeit mit internen Stylesheets und dem BackendModul Themes 폷 Stylesheets gibt es jetzt eine kleine Übung für zwischendurch. Die Navigation in der linken Spalte soll mit den folgenden Styles gestaltet werden, wobei die Kommentare nur zur Erläuterung dienen und nicht unbedingt übertragen werden müssen: /* ============================= Vertikale Navigation ========================== */ #left div.mod_navigation { float: left; width: 142px; font-size: 12px; margin: 32px 0 0 0; } #left .mod_navigation ul{ background-color: #fff; padding: 0; margin: 0; } #left .mod_navigation li{ margin: 0; list-style-type: none; } /* Menüpunkte gestalten */ #left .mod_navigation a, #left .mod_navigation span { display: block; text-decoration: none; background-color: #ADCBE6;

174

Übung: Gestaltung der Navigation per CSS

color: #000; padding: 8px 8px 8px 18px; border-top: 1px solid #fff; } /* Rollover und TAB-Fokus */ #left .mod_navigation a:hover, #left .mod_navigation a:focus { background: #2D5B85; color: #fff; } /* Aktiven Menüpunkt hervorheben */ #left .mod_navigation span.active, #left .mod_navigation .trail { background: #2D5B85; color: #fff; } /* Patches: hasLayout für IE6 */ * html .mod_navigation ul, * html .mod_navigation a, * html .mod_navigation span { height:1px; } Listing 7.5

Das CSS für die vertikale Navigation

Das ToDo ist kurz und bündig und liefert als Ergebnis ein Stylesheet zur Gestaltung der Navigation mit den Styles aus Listing 7.5. ToDo: Erstellen Sie ein internes Stylesheet für die Navigation 1. Erstellen Sie mit den Styles aus Listing 7.5 ein internes Stylesheet mit dem Namen navigation. 2. Definieren Sie den Medientyp screen für das Stylesheet. 3. Weisen Sie das Stylesheet dem Seitenlayout zu. 4. Die Reihenfolge der Stylesheets soll wie folgt sein: basic, navigation, bildschirm.

Bei der Erstellung von internen Stylesheets haben Sie mehrere Möglichkeiten: 왘

Sie können das CSS direkt im internen Editor im HTML-Formular eingeben. Das übt, und Sie lernen den Editor dabei kennen.

왘

Sie können das Stylesheet in Ihrem Lieblingseditor als Datei erstellen und dann importieren.

왘

Sie können das Stylesheet navigation.css von der Buch-DVD importieren.

Die Website sieht nach dieser Übung so aus wie in Abbildung 7.12.

175

7.6

7

Webseiten gestalten: Contao und CSS

Abbildung 7.12

Die gestylte Navigation im Frontend

Im Backend-Modul Themes 폷 Stylesheets gibt es jetzt die drei Stylesheets basic, navigation und bildschirm, die im Seitenlayout genau in dieser Reihenfolge eingebunden werden. Der »Augen-Klick«: Auswirkungen einzelner Styles analysieren Bei internen Stylesheets können Sie wie erwähnt ganz bequem die Auswirkungen der einzelnen Styles in einem Stylesheet analysieren: 왘

Öffnen Sie das Stylesheet navigation im Backend.

왘

Klicken Sie auf das grüne Auge, um einen Style zu neutralisieren.

왘

Laden Sie das Frontend im Browser neu, und schon sehen Sie die Seite ohne den Style.

So können Sie Style für Style die Auswirkungen der einzelnen Styles untersuchen und müssen nicht immer erst auskommentieren und dann speichern.

7.7

Externe Stylesheets: CSS außerhalb der Datenbank

Wer es gewohnt ist, sein CSS von Hand zu schreiben, fühlt sich bei der Arbeit mit dem HTML-Formular eventuell an den Titel eines modernen Westerns erinnert: »Der sich den Wolf klickt«. Und auch die Erweiterung [csseditor] mit ihren Einschränkungen und den viel zu großen Einzügen kommt Quelltext-CSSlern eher vor wie »Wohnung renovieren durch den Briefschlitz«.

176

Externe Stylesheets: CSS außerhalb der Datenbank

Beides kann für viele den gewohnten CSS-Editor nicht ersetzen, egal wie er heißt. In diesem Abschnitt möchte ich Ihnen deshalb zeigen, wie man mit externen Stylesheets arbeitet, die in einem beliebigen Editor geschrieben, als Datei mit der Endung .css gespeichert und dann mit einem Seitenlayout in Contao verbunden werden.

7.7.1

Vorgehensweise: Die Arbeit mit externen Stylesheets

Es gibt viele verschiedene Möglichkeiten, um bei Contao mit externen Stylesheets zu arbeiten, aber ich empfehle Ihnen folgende Vorgehensweise: 왘

Speichern Sie alle Stylesheets in einem Ordner unterhalb von tl_files zusammen mit den Layout-Grafiken für das Theme.

왘

Laden Sie in einem zentralen Stylesheet mit dem passenden Namen zentrale.css mit der Anweisung @import die drei Stylesheets basic.css, navigation.css und bildschirm.css.

왘

Binden Sie das zentrale Stylesheet zentrale.css in Contao ein.

Mit diesem Setup werden die Styles zur Formatierung der Webseiten nicht mehr in der Datenbank gespeichert, sondern in ganz normalen CSS-Dateien unterhalb des Ordners tl_files auf dem Webspace. Das Backend-Modul Themes 폷 Stylesheets ist bei diesem Setup zwar komplett arbeitslos, aber die externen Stylesheets arbeiten problemlos mit dem CSS-Framework von Contao zusammen. Die im Backend-Modul Themes 폷 Seitenlayout in den Bereichen Kopf- und Fusszeile, Spaltenkonfiguration und Statisches Layout definierten Einstellungen für das Layout funktionieren auch mit externen Stylesheets. Sie kombinieren also die Freiheit der manuellen CSS-Bearbeitung mit dem Komfort der Abteilung Seitenlayouts. Schritt 1: Stylesheets nach »tl_files/...« kopieren Die externen Stylesheets sollten auf jeden Fall in einem Ordner unterhalb von tl_files/ liegen, damit sie auch über die Dateiverwaltung von Contao zugänglich sind. Dadurch haben Sie drei Möglichkeiten zur Bearbeitung von Styles. Sie können 왘

die Styles lokal im Editor bearbeiten und per FTP hochladen.

왘

die Styles im Editor per FTP direkt auf dem Webspace bearbeiten.

왘

die Styles direkt in der Dateiverwaltung von Contao editieren.

Da Stylesheets immer auch zu einem Theme gehören, speichern Sie die Dateien am besten im entsprechenden Theme-Ordner.

177

7.7

7

Webseiten gestalten: Contao und CSS

Im folgenden ToDo deaktivieren Sie die internen Stylesheets im Seitenlayout und kopieren die von Contao generierten Stylesheets aus dem Hauptordner in tl_files/ themes/blaues_theme. ToDo: Die drei Stylesheets in den Theme-Ordner kopieren 1. Öffnen Sie im Backend das Modul Themes 폷 Seitenlayouts. 2. Öffnen Sie das Seitenlayout Standardlayout [Standard]. 3. Deaktivieren Sie im Bereich Stylesheets die Kontrollkästchen vor den drei Stylesheets. 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie den Hauptordner der Contao-Installation in einem Dateimanager. 6. Kopieren Sie die drei Stylesheets basic.css, navigation.css und bildschirm.css in den Ordner tl_files/themes/blaues_theme/.

Die automatisch generierten Stylesheets im Hauptordner sind sehr platzsparend und komprimiert formatiert, sodass Sie diese vor einer weiteren Bearbeitung im eigenen CSS-Editor erst einmal übersichtlicher gestalten sollten. Durch das Deaktivieren der drei internen Stylesheets im Seitenlayout sind die Webseiten im Frontend momentan vorübergehend ungeschminkt, da die externen Stylesheets noch nicht mit dem Seitenlayout verbunden sind. Aber das wird sich gleich ändern. Schritt 2: Ein zentrales Stylesheet erstellen Die Erstellung eines zentralen Stylesheets ist nicht zwingend notwendig, erleichtert aber den Umgang mit den Stylesheets, da Sie in Contao nur ein Stylesheet einbinden müssen: 왘

Im Backend von Contao binden Sie das zentrale Stylesheet ein.

왘

Die drei Stylesheets werden in zentrale.css mit @import importiert.

왘

In zentrale.css können Sie im Editor bequem festlegen, welche Stylesheets geladen werden.

Besonders in der Entwicklungsphase ist diese Flexibilität von Vorteil, aber die Sache hat auch einen kleinen Nachteil: Da der Internet Explorer die Angabe eines Medientyps am Ende von @import nicht versteht, muss diese mit der Anweisung @media in den einzelnen Stylesheets erfolgen. Das wird im folgenden ToDo gleich mit erledigt.

178

Externe Stylesheets: CSS außerhalb der Datenbank

Eine Anmerkung noch vorweg: Speichern Sie die Dateien mit dem Zeichensatz UTF-8 oder UTF-8 ohne BOM, also nicht alsANSI oder ISO-8859-x oder sowas. Contao verwendet durchgängig UTF-8. ToDo: Zentrales Stylesheet erstellen und Medientypen definieren 1. Erstellen Sie in einem ganz normalen Editor ein neues Stylesheet. 2. Speichern Sie das Stylesheet als zentrale.css in dem Ordner namens tl_files/themes/ blaues_theme/. 3. Fügen Sie die folgenden Zeilen CSS hinzu: @import url(basic.css); @import url(bildschirm.css); @import url(navigation.css);

4. Öffnen Sie die drei Stylesheets basic.css, navigation.css und bildschirm.css in einem Editor. 5. Fügen Sie ganz am Anfang der drei Stylesheets folgende Zeile hinzu: @media screen {

6. Fügen Sie ganz am Ende der drei Stylesheets folgende Zeile hinzu: } /* Ende @media */

7. Speichern Sie alle drei Stylesheets.

Im Frontend hat sich noch nichts geändert, aber wie Abbildung 7.13 zeigt, liegen die Stylesheets im Ordner blaues_theme bereit.

Abbildung 7.13 Die vier Stylesheets im Theme-Ordner

Beachten Sie die Bearbeitungssymbole rechts neben den Stylesheets: Der gelbe Bleistift dient hier nur zur Umbenennung der Dateien; zur Bearbeitung der Stylesheets direkt in der Dateiverwaltung klicken Sie auf das blau-weiße Symbol (2. Symbol von rechts). Sie können im Notfall also problemlos von überall eingreifen und die externen Stylesheets in der Dateiverwaltung von Contao bearbeiten. Dazu benötigen Sie weder eine lokale Kopie des Stylesheets noch einen FTP-Zugang.

179

7.7

7

Webseiten gestalten: Contao und CSS

Schritt 3: Das zentrale Stylesheet im Seitenlayout einbinden Die Kontrollkästchen zur Aktivierung der Stylesheets im Seitenlayout Standardlayout[Standard] gelten nur für die in der Datenbank gespeicherten internen Stylesheets und nicht für die externen CSS-Dateien. Um ein externes Stylesheet mit Contao zu verbinden, gibt es zwei Möglichkeiten: 왘

Im Seitenlayout gibt es im Bereich Experten-Einstellungen ein Feld namens Zusätzliche Head-Tags, in das Sie beliebige Elemente eingeben können, die bei der Erstellung der Seite kurz vor eingebunden werden.

왘

Im Seitentemplate fe_page.tpl können Sie den Weg zu zentrale.css bildlich gesprochen fest verdrahten.

Ein potenzieller Nachteil der Einbindung von externen Stylesheets im Seitenlayout ist, dass Sie den Link zum Stylesheet in jedem Seitenlayout pflegen müssen. Bei einer komplexen Site mit vielen Seitenlayouts ist das sehr umständlich, und deshalb binden Sie die externen Stylesheets gleich direkt im Seitentemplate fe_ page.tpl ein. Im folgenden ToDo erstellen Sie mit dem Backend-Modul Templates eine Kopie des Seitentemplates fe_page.tpl und fügen in dieser Kopie den Link zum zentralen Stylesheet ein. ToDo: Das zentrale Stylesheet direkt im Seitentemplate einbinden 1. Öffnen Sie das Backend-Modul Templates. 2. Klicken Sie rechts oben auf Neues Template. 3. Wählen Sie aus der Liste das Seitentemplate fe_page.tpl. 4. Speichern Sie die Kopie im Zielverzeichnis templates/blaues_theme. 5. Klicken Sie auf das blau-weiße Symbol zum Bearbeiten von fe_page.tpl. 6. Fügen Sie nach der PHP-Anweisung in Zeile 13 ein paar neue Zeilen ein. 7. Geben Sie in einer der neuen Zeilen den folgenden Quelltext ein, um Contao den Weg zum zentralen Stylesheet zu zeigen (in einer Zeile):

8. Beenden Sie die Bearbeitung mit Speichern und Schliessen.

Wenn alles geklappt hat, sieht das Frontend in Abbildung 7.14 wieder genauso aus wie mit den internen Stylesheets in Abbildung 7.12.

180

Externe Stylesheets: CSS außerhalb der Datenbank

Abbildung 7.14 Die Beispielsite mit externen Stylesheets

Mit diesem Setup können Sie ganz normale Stylesheets in einem ganz normalen Editor bearbeiten und mit der Datei zentrale.css bequem verwalten. Mehr zu »$this->framework« und »$this->stylesheets« Im Quelltext von fe_page.tpl sind Ihnen eventuell einige PHP-Schnipsel aufgefallen, insbesondere die folgenden zwei:

Mehr zu diesen PHP-Anweisungen erfahren Sie in Abschnitt 7.10, »Know-how: Das CSS-Framework von Contao«.

7.7.2

Integration von externen Stylesheets in »Seitenlayouts«

Bei der Verwendung von externen Stylesheets können Sie im Backend-Modul Seitenlayouts fast alle relevanten Bereiche des CSS-Frameworks nutzen. Sie können 왘

eine Kopf- und Fußzeile generieren.

왘

die Spaltenkonfiguration definieren.

왘

die Breite und Ausrichtung des Layouts festlegen.

Externe Stylesheets arbeiten also problemlos mit dem CSS-Framework von Contao zusammen, allerdings können Sie die Stylesheets nicht per Mausklick ins Seitenlayout einbinden, sondern müssen dazu das Feld Zusätzliche Head-Tags be-

181

7.7

7

Webseiten gestalten: Contao und CSS

nutzen oder die Stylesheets direkt im verwendeten Seitentemplate einbinden. Abbildung 7.15 zeigt das in der Übersicht.

Abbildung 7.15 Einbindung von externen Stylesheets in Seitenlayouts

7.8

Teamwork: Interne und externe Stylesheets zusammen

Sie haben in diesem Kapitel bis jetzt zwei grundlegend verschiedene Methoden im Umgang mit CSS bei Contao kennengelernt: 왘

Interne Stylesheets werden im internen Editor bearbeitet, in der Datenbank gespeichert und über das Backend-Modul Seitenlayouts eingebunden. Contao generiert automatisch CSS-Dateien im Hauptordner.

왘

Externe Stylesheets werden unterhalb des Ordners tl_files gespeichert, mit einem externen Editor bearbeitet und manuell in das Seitenlayout oder in das Seitentemplate eingebunden.

In diesem Abschnitt geht es um zwei Varianten der Zusammenarbeit von internen und externen Stylesheets. Die erste Möglichkeit ist ein »Nacheinander«: 왘

Die arbeitsintensive Entwicklungsphase erfolgt im externen Editor.

왘

Vor dem Launch werden die externen Stylesheets dann importiert, gecheckt und kategorisiert.

Die externen Stylesheets werden vom Webspace entfernt, und nach dem Launch der Site werden die Stylesheets intern weitergepflegt.

182

Fazit: Jeder kann so arbeiten wie er gerne möchte

Die zweite Variante ist hingegen mehr ein »Miteinander«: 왘

Die Site wird mit externen Stylesheets gestaltet.

왘

Zusätzlich werden interne Stylesheets erstellt und benutzt.

Diese Möglichkeit ist zum Beispiel von Vorteil, wenn ein Kunde oder ein Redakteur selbst Hand an die Gestaltung der Website anlegen möchte oder soll, mit der Syntax von CSS aber nicht vertraut ist. Bei der Einbindung der Stylesheets sollte die Reihenfolge so festgelegt werden, dass die internen Stylesheets nach den externen eingebunden werden, damit sie diese im Rahmen der Kaskade überschreiben. Im Klartext: Es empfiehlt sich eventuell, die externen Stylesheets nicht im Seitenlayout einzubinden, sondern im Seitentemplate, da dort die Reihenfolge individuell bestimmt werden kann.

7.9

Fazit: Jeder kann so arbeiten wie er gerne möchte

Die Möglichkeiten von Contao bei der Bearbeitung von CSS könnte man mit den Worten »alles kann, nichts muss« zusammenfassen, und jeder kann seinen eigenen Workflow finden: Mit internen Stylesheets, externen Stylesheets oder einer Mischung aus beiden. Sie müssen dabei drei Entscheidungen treffen: 왘

Editor: Wie möchte ich das CSS bearbeiten?

왘

Speicherort: Wo sollen die Styles gespeichert werden?

왘

Einbindung: Wie werden die Stylesheets in Contao eingebunden?

Abbildung 7.16 zeigt die unterschiedlichen Kombinationsmöglichkeiten.

Abbildung 7.16 Contao und CSS – die Übersicht

183

7.9

7

Webseiten gestalten: Contao und CSS

Mein persönlicher Favorit ist übrigens die Arbeit mit externen Stylesheets (Nr. 3), zumindest während der Entwicklungsphase, an der intensiv am CSS gearbeitet wird. Nach der Fertigstellung des Layouts kann man die externen Stylesheets importieren und mit internen Stylesheets (Nr. 1) weiterarbeiten. Das CSS-Framework erweitern: Arbeiten mit Layoutrastern (Grids) Falls Sie gerne mit Grids arbeiten, gibt es für Contao ein Grid-Stylesheet, das das Arbeiten mit einem 960px breiten Raster ermöglicht: 왘

Das CSS-Framework erweitern – gridpx.css http://www.contao.org/herunterladen.html

Das Stylesheet erweitert das interne CSS-Framework von Contao und ist nur 1,8 KB groß. Voraussetzung ist das Reset-Stylesheet basic.css, das Sie bereits nutzen. gridpc.css stellt ein prozentbasiertes Raster zur Verfügung. In einem Vortrag auf dem Usertreffen 2009 hat Leo Feyer die grundlegende Funktionsweise der Grid-Erweiterung erläutert: 왘

Vortrag »Das TYPOlight CSS-Framework« von Leo Feyer (PDF) http://www.contao.org/usertreffen-2009.html

Wenn Sie lieber mit einem externen CSS-Framework wie YAML, 960GS oder Blueprint arbeiten, finden Sie in Abschnitt 22.4, »Layouts für Fortgeschrittene«, ein paar Tipps zur Kooperation von Contao mit externen CSS-Frameworks.

7.10

Know-how: Das CSS-Framework von Contao

Der Benutzer sieht vom Contao-CSS-Framework nur die Einstellungen im Seitenlayout. Technisch gesehen besteht das Framework im Kern aus drei Dateien: 왘

dem Seitentemplate fe_page.tpl für die HTML-Struktur

왘

dem Stylesheet system/contao.css als Fundament

왘

dem Stylesheet system/iefixes.css mit Patches für IE 6 und 7

In diesem Abschnitt wird erklärt, wie diese Dateien zusammenarbeiten.

7.10.1 Das HTML-Grundgerüst von Contao in »fe_page.tpl« Das Fundament des CSS-Frameworks von Contao ist das Seitentemplate fe_ page.tpl. Mit diesem Template lassen sich sehr viele verschiedene Layouts realisieren, und einer der größten Fehler von Contao-Einsteigern ist es, gleich zu Beginn ein eigenes Seitentemplate zu erstellen und fe_page zu ignorieren.

184

Know-how: Das CSS-Framework von Contao

Das Seitentemplate fe_page stellt, wie Sie in Abschnitt 6.2, »»No layout found« – Theme und Seitenlayout erstellen«, bereits gesehen haben, fünf Layoutbereiche zur Verfügung: 왘

Kopfzeile: #header

왘

Linke Spalte: #left

왘

Rechte Spalte: #right

왘

Hauptspalte: #main

왘

Fußzeile: #footer

Ein Blick in den Quelltext der dreispaltigen Beispielsite zeigt, dass dort im body folgendes HTML-Grundgerüst existiert:

 

 



Navigation überspringen
• Kontakt


217

8.7

8

Navigationen erstellen in Contao


• Impressum
• Sitemap
 

verhindert, dass die interne ContaoSuchmaschine die Navigation indiziert. Umschlossen wird die ungeordnete Liste wieder von einem div-Element, das dieses Mal die Klasse mod_customnav hat. Der Rest ist ganz normal: Nach dem Skiplink folgt eine ungeordnete Linkliste mit Klassen, die Sie zur Gestaltung nutzen können. Schritt 4: Den Kopfbereich vorbereiten Im Ordner tl_files/themes/blaues_theme/grafiken wartet eine Grafik mit dem Namen header_gradient.jpg auf ihren Einsatz. Die Grafik gibt dem Header einen leichten Farbverlauf (»gradient«) und oben einen dunkelblauen Balken, in dem die Metanavigation erscheinen wird. Zur Vorbereitung des Kopfbereiches passen Sie im folgenden ToDo das obere Padding an und binden die Grafik ein. ToDo: Die Abstände für den Header anpassen 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Passen Sie das oberen Padding und die Hintergrundformatierung für den Kopfbereich an wie im folgenden Listing beschrieben: #header {

background: #89ADCD url(grafiken/header_gradient.jpg) repeat-x left top; padding: 48px 0 0 0; margin-top: 1em; }

3. Speichern Sie das Stylesheet.

218

Metanavigation: Eine »Individuelle Navigation«

Nach diesem Schritt sieht der Header aus wie in Abbildung 8.18.

Abbildung 8.18

Der Kopfbereich mit Hintergrundgrafik

Schritt 5: Die Metanavigation gestalten Jetzt fehlt nur noch die Gestaltung der Metanavigation. Die Links sollen nebeneinander erscheinen, und zwar oben rechts im Kopfbereich. Dazu benutzen Sie im folgenden ToDo eine absolute Positionierung. ToDo: Die Metanavigation positionieren und gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie am Ende folgenden Style zur Positionierung der Metanavigation ein: /* ====================================== Metanavigation ====================================== */ #header .mod_customnav { position: absolute; top: –44px; right: 18px; font-size: 12px; }

3. Der folgende Style floatet die Listenelemente: #header .mod_customnav li { float: left; width: auto; list-style-type: none; margin: 0 ; }

219

8.7

8

Navigationen erstellen in Contao

ToDo: Die Metanavigation positionieren und gestalten (Forts.) 4. Jetzt werden die Links und das span-Element gestaltet: #header .mod_customnav a, #header .mod_customnav span { display: block; text-decoration: none; color: #fff; padding: 4px ; margin-left: 9px; } #header .mod_customnav a:hover, #header .mod_customnav a:focus { background: #89adcd; color: #000; } #header .mod_customnav span.active { background-color: #89adcd; color: #000; }

5. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Im Browser sehen die Webseiten nach diesem ToDo so aus wie in Abbildung 8.19.

Abbildung 8.19

Die fertige Metanavigation

Mit diesem Schritt ist das Navigationsgerüst für die Beispielsite fertig. Sie haben ohne Programmierung eine horizontale Hauptnavigation, eine vertikale Unternavigation und eine individuelle Metanavigation erstellt, die allesamt per CSS positioniert und gestaltet werden.

220

Sitemap: Das Inhaltsverzeichnis der Website

Die relativ absolute Positionierung Die Werte für die Eigenschaften zur Ausrichtung wie top und right orientieren sich am inneren div der Kopfzeile, weil dieses div die Klasse .inside hat, der im FrameworkStylesheet system/contao.css der Wert position:relative zugewiesen wird. Falls Sie den Trick mit der Kombination von absoluter und relativer Positionierung nicht kennen, können Sie sich in »Little Boxes 1« genauer darüber informieren: 왘

Absolute Positionierung kombiniert mit relativer Positionierung http://bit.ly/a5O4Kf

Diese Kombination ist eine nützliche Grundlagentechnik zur Positionierung.

8.8

Sitemap: Das Inhaltsverzeichnis der Website

Eine Sitemap ist eine Navigationshilfe, die einem Besucher alle für ihn verfügbaren Seiten der Site auflistet. Gerade für Erstbesucher ist eine solche Sitemap oft eine große Hilfe. Bei Contao gibt es natürlich ein entsprechendes Modul, das eine Sitemap automatisch generiert. Das Procedere ist dabei wie schon fast gewohnt: Zuerst erstellen Sie ein Modul, dann binden Sie es ein, und zum Schluss wird es gestaltet. Schritt 1: Ein Modul zur Erstellung einer Sitemap Das Modul zur Erstellung einer Sitemap gehört zu den Navigationsmodulen, und das Eingabeformular sieht so aus wie in Abbildung 8.20. Dieses Eingabeformular sollte inzwischen ziemlich selbsterklärend sein. Eine Wurzelseite als Startpunkt benötigen Sie nur, falls Sie keinen Startpunkt einer Website haben, und das Anzeigen geschützter bzw. versteckter Seiten sollte man sich gut überlegen. Wirklich wichtig ist hier die Definition der Referenzseite: Unterseiten werden automatisch übernommen, übergeordnete Seiten werden nicht angezeigt. Für eine komplette Sitemap bietet sich der Startpunkt einer Website als Referenzseite an, und genau das machen Sie im folgenden ToDo.

221

8.8

8

Navigationen erstellen in Contao

Abbildung 8.20

Das Eingabeformular zur Erstellung einer Sitemap

ToDo: Das Modul »Navigation – Sitemap« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Frontend-Module zur Bearbeitung. 3. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 4. Geben Sie als Titel »Navigation – Sitemap« ein. 5. Wählen Sie aus der Liste Modultyp den Eintrag Sitemap. 6. Wählen Sie als Referenzseite den Startpunkt der Website. 7. Lassen Sie alle anderen Optionen unverändert. 8. Klicken Sie auf Speichern und Schliessen.

Das Modul existiert und wird im nächsten Schritt eingebunden. Schritt 2: Das Modul »Navigation – Sitemap« einbinden Bis jetzt haben Sie alle Navigationsmodule über das Seitenlayout mit den Webseiten verbunden, sodass die Module auf allen Seiten erscheinen. Um ein Modul nur auf einer Seite anzuzeigen, binden Sie es stattdessen in einen Artikel ein.

222

Sitemap: Das Inhaltsverzeichnis der Website

Dazu erstellen Sie auf der gewünschten Seite im gewünschten Artikel ein Inhaltselement vom Typ Modul und wählen dort das zuvor erstellte Navigationsmodul aus. Genau das machen Sie im folgenden ToDo. ToDo: Das Modul »Navigation – Sitemap« in einem Artikel einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Sitemap [Hauptspalte] zur Bearbeitung. 3. Fügen Sie unterhalb der h1-Überschrift ein bisschen beschreibenden Text ein. 4. Erstellen Sie darunter ein Neues element. 5. Wählen Sie als elementtyp den Eintrag Modul. 6. Wählen Sie den Eintrag Navigation – Sitemap (ID xx) aus der Liste Modul. 7. Klicken Sie auf Speichern und Schliessen.

Im Browser gibt es nach diesem ToDo eine bereits funktionierende, aber noch ungestaltete Sitemap (Abbildung 8.21).

Abbildung 8.21 Eine funktionierende, aber noch ungestaltete Sitemap

223

8.8

8

Navigationen erstellen in Contao

Schritt 3: Das HTML für das Modul »Navigation – Sitemap« Bevor Sie die Sitemap mit einigen wenigen Styles gestalten, werfen Sie wie immer einen Blick auf das vom Modul erzeugte HTML. Listing 8.3 zeigt einen Ausschnitt daraus.


• Downloads

Lesetipps

Zielseite

... ... ...

228

Weitere Navigationsmodule


• < Themen
• Nach oben
• Weitere Elemente >

Listing 9.5

Ausschnitt aus dem HTML einer Galerie

Eine Klammer um alles bildet das inzwischen bekannte div für das Inhaltselement, das dieses Mal die Klassen ce_gallery und block bekommt. Die Vorschaubilder werden in einer HTML-Tabelle aufbewahrt, die folgende besondere Charakteristika aufweist: 왘

Die Zeilen tr sind durchnummeriert. Die erste Zeile bekommt die Klasse row_ 0. Die Nummerierung beginnt also bei null.

왘

Gerade Zeilen bekommen die Klasse even, ungerade die Klasse odd.

왘

Die Spalten td werden analog dazu nummeriert, beginnend mit col_0.

왘

Die Breite der Spalten wird mit dem Attribut style definiert.

왘

Der Abstand nach rechts wird mit einem padding-right für das div mit der Klasse image_container festgelegt.

왘

Die Links zur Großansicht haben das Attribut rel="lightbox[lb15]", wobei der Wert [lb15] von Contao gewählt wird. Alle Bilder einer Galerie bekommen denselben Wert.

255

9.5

9

Inhaltselemente für Text und Bilder

Bei der Erstellung des Inhaltselements können Sie dem Element im Bereich Experten-Einstellungen wie immer auch noch eine besondere ID oder Klasse mit auf den Web geben. Galerie und »gallery« Achten Sie im CSS darauf, dass die Galerie im Englischen mit Doppel-»l« geschrieben wird: ce_gallery. Im Deutschen hat eine Galerie nur eines.

9.5.3

Beschriftung von Galerien: »meta.txt«

In Contao können für alle Dateien unterhalb des Ordners tl_files sogenannte Meta-Informationen hinterlegt werden. Die zusätzlichen Informationen werden in einer Datei namens meta.txt gespeichert, die im selben Ordner liegen muss wie die Dateien, für die diese Informationen gedacht sind. Die meta.txt dient zur Beschriftung von Bildergalerien und Downloads. Der Aufbau der meta.txt ist recht einfach. Sie kann drei Dinge enthalten: 왘

einen alternativen Text (Bildbeschreibung)

왘

einen Link (URL)

왘

eine Bildunterschrift (Caption)

Die drei Optionen werden jeweils durch einen senkrechten Schrägstrich getrennt, auch Pipe-Symbol genannt. Unter Windows erzeugen Sie das Symbol mit (Alt_Gr) und der Taste ganz links unten neben dem Y; auf dem Mac mit (Alt) + (7)). Der alternative Text wird in einer Mediabox übrigens auch als Bildbeschreibung verwendet. Listing 9.6 zeigt ein Beispiel für die Möglichkeiten in der meta.txt: bild1.jpg bild2.jpg bild3.jpg bild4.jpg

= = = =

Alternativer Alternativer Alternativer Alternativer

Text Text | URL Text | URL | Bildunterschrift Text | | Bildunterschrift

Listing 9.6

Aufbau einer »meta.txt«

Wenn Sie wie in der vierten Zeile einen alternativen Text und eine Bildunterschrift, aber keinen Link eingeben möchten, geben Sie einfach zwei senkrechte Striche ohne etwas dazwischen ein. Das folgende ToDo erstellt die meta.txt für die Bildergalerie auf der Seite Text und Bilder.

256

Das Inhaltselement »Galerie«: »ce_gallery«

ToDo: »meta.txt« für die Bildergalerie erstellen 1. Erstellen Sie eine neue, leere Datei in einem Editor. 2. Geben Sie die folgenden Beschreibungen ein: foto03.jpg foto04.jpg foto05.jpg foto06.jpg

= = = =

NYC (Harlem) | | Buchstabhausen Hotel California in Fresno | | Skyline No Line on the Horizon. Highway One. | | Im Nebel Montery Beach. Erholung pur. | | Am Strand

3. Speichern Sie die Datei als UFT-8 unter dem Namen meta.txt im Ordner tl_files/beispielsite/content/fotos/.

Im Frontend erscheint jetzt die Bildunterschrift unterhalb der Bilder (Abbildung 9.14).

Abbildung 9.14

Galerie mit Bildunterschriften aus »meta.txt«

Um die Bildunterschriften in der Galerie zu gestalten, suchen Sie im Stylesheet bildschirm.css den Style zur Gestaltung von caption und entfernen Sie am Anfang des Selektors das .ce_image. Der verbleibende Selektor heißt dann .image_container .caption und gestaltet auch die Bildunterschriften für die Galerie. Sie können die Bilder in der meta.txt in einer beliebigen Reihenfolge auflisten. Wenn die Galerie die Reihenfolge aus der meta.txt übernehmen soll, können Sie das im Inhaltselement Galerie festlegen: 왘

Öffnen Sie das Inhaltselement Galerie zur Bearbeitung.

왘

Blenden Sie gegebenenfalls den Bereich Bildeinstellungen ein.

왘

Wählen Sie bei Sortieren nach die Option Meta Datei (meta.txt).

왘

Klicken Sie auf Speichern.

257

9.5

9

Inhaltselemente für Text und Bilder

Wenn Sie danach in der meta.txt die Reihenfolge verändern, wirkt sich dies direkt auf die Bildergalerie aus. Es gibt zur Erstellung von Meta-Infos auch eine Erweiterung namens [MetaCreator]. Mehrsprachige Bildbeschriftungen Auf mehrsprachigen Websites können Sie für jede Sprache eine eigene Datei hinterlegen, wobei das Sprachkürzel einfach im Dateinamen angegeben wird. Für Englisch wäre das zum Beispiel meta_en.txt. Ist für eine Sprache keine Datei vorhanden, nimmt Contao die meta.txt.

9.6

Das Inhaltselement »Top-Link«: «ce_toplink»

Das Inhaltselement Top-Link fügt einem Artikel einen Nach oben-Link hinzu, mit dem der Besucher auf einer langen Seite per Mausklick wieder nach oben an den Anfang der Seite springen kann. Das Eingabeformular ist sehr übersichtlich und möchte nur einen Text zur Beschriftung des Links haben (Abbildung 9.15).

Abbildung 9.15

Das Eingabeformular für das Inhaltselement »Top-Link«

Mit diesem Formular fügen Sie im folgenden ToDo unten auf der Seite Text und Bilder nach dem Abenteuer des Lorem Ipsum einen Top-Link ein. ToDo: Top-Link einfügen 1. Öffnen Sie den Artikel Text und Bilder zur Bearbeitung. 2. Erstellen Sie am Ende des Artikels ein neues Inhaltselement vom Typ Top-Link.

258

Das Inhaltselement »Top-Link«: «ce_toplink»

ToDo: Top-Link einfügen (Forts.) 3. Fügen Sie als Link-Text den Text »[Nach oben]« ein. Die eckigen Klammern davor und dahinter dienen nur zur Dekoration. 4. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo steht im Quelltext der Webseite folgendes HTML:

Listing 9.7

Das Inhaltselement »Top-Link« im HTML

Der Kommentar

[Nach oben]





Pflichtfeld Ihr Name*




Pflichtfeld Ihre E-Mail-Adresse*




Pflichtfeld

300

Das Kontakformular gestalten

Ihre Nachricht*




Eine Kopie der Nachricht an mich senden




Listing 11.3

Ein Fieldset im Quelltext

11.3.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld Das Formularfeld Passwortfeld fügt einem Formular zwei einzeilige Eingabefelder hinzu: eines für das Passwort selbst und eines zur Bestätigung.

Pflichtfeld Passwort *




306

Formularfelder: Die Feldtypen im Formulargenerator

Pflichtfeld Bestätigung *


Listing 11.4

Das HTML für ein Passwortfeld und sein Bestätigungsfeld

Passwortfelder verwenden die Klassen text und password, Bestätigungsfelder bekommen zusätzlich die Klasse confirm.

11.3.5

Das Select-Menü: Auswahllisten per Klick

Ein Select-Menü erstellt eine ganz normale Auswahlliste mit den HTML-Elementen select, option und zur Gruppierung der Option optgroup. In einer Auswahlliste kann in der Regel wie bei einem Radio-Button-Menü nur eine Option ausgewählt werden. Für den Benutzer hat eine Auswahlliste gegenüber einem Radio-Button-Menü Nachteile, denn die Optionen sind erst nach einem Klick zu sehen. Für bis zu ungefähr vier oder fünf Einträge ist deshalb das Radio-Button-Menü oft die bessere Alternative. Der Formulargenerator unterstützt Sie beim Erstellen einer Auswahlliste mit einem Assistent, den Sie im Bereich Optionen finden. Abbildung 11.10 zeigt ein Beispiel. Die Symbole zum Kopieren, Verschieben und Löschen erklären sich von selbst, der Rest folgt gleich. Der Feldname taucht im Quelltext als Attribut name im select-Element wieder auf, die Feldbezeichnung als label sichtbar auf der Webseite. Der Wert wird im Element option als Attribut value eingetragen, und die Bezeichnung ist der für den Besucher sichtbare Text in der Auswahlliste. Die Option Standard bewirkt bei einer Auswahlliste, dass der aktivierte Eintrag bei einer nicht ausgeklappten Liste angezeigt wird, und erscheint im HTML als Attribut selected="selected" zum Element option. Sinnvollerweise sollte nur ein Eintrag aktiviert sein. Die Option Gruppe macht die Gruppierung von Listeneinträgen zum Kinderspiel. Die Einträge »Ohne Versandkosten« und »Mit Versandkosten« werden im Quelltext zum HTML-Element optgroup und damit zu einer nicht anklickbaren Überschrift. Je länger die Liste ist, desto wichtiger ist die Gruppierung.

307

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.10 Das Eingabeformular für den Feldtyp »Select-Menü«

Listing 11.5 zeigt den Quelltext des Select-Menüs aus Abbildung 11.10. In welchem Land wohnen Sie?

--- Bitte auswählen ---

Deutschland Österreich Schweiz

Niederlande Belgien Frankreich


Listing 11.5

308

Ein Select-Menü im Quelltext

Formularfelder: Die Feldtypen im Formulargenerator

Im Frontend sieht die Auswahlliste so aus wie in Abbildung 11.11.

Abbildung 11.11 Das Select-Menü im Frontend

Checkbox-Menü statt Mehrfachauswahl Ein Select-Menü bietet auch die Option der Mehrfachauswahl, bei der die Liste offen daliegt und als Fläche dargestellt wird. Um mehrere Einträge auszuwählen, muss ein Besucher eine je nach Betriebssystem und Browser unterschiedliche Maus-Tastatur-Kombination verwenden, die die Bedienung der Mehrfachauswahl eher umständlich macht. Ein ganz normales Checkbox-Menü ist fast immer die bessere Alternative.

11.3.6 Das Radio-Button-Menü: Optionsfelder deluxe Ein Radio-Button-Menü erzeugt runde anklickbare Formularelemente und ähnelt einer Auswahlliste, denn in beiden kann man jeweils nur eine Option auswählen. Radio-Buttons heißen die Dinger übrigens, weil sie mit ein bisschen Fantasie wie die Druckknöpfe zur Senderwahl an alten Dampfradios aussehen. Wurde ein Knopf gedrückt, sprang der vorher ausgewählte automatisch raus. Auch bei den Radio-Buttons kann immer nur einer ausgewählt sein. Die deutsche Übersetzung Optionsfeld ist da etwas nüchterner. Optionsfelder sind echte Herdentiere und erscheinen immer nur in Gruppen, von denen wie gesagt immer nur eine Option aktiv ist. Der Feldname wird im HTML bei allen Optionsfeldern dieses Menüs als Wert für das Attribut name verwendet. Dadurch wissen die Optionfelder, dass sie als Gruppe zusammengehören. Die Bezeichnung aus dem Eingabeformular steht übrigens ganz am Anfang in einem label, das sich auf die ID des div.radio_container bezieht, der die Optionsfelder umgibt, und somit für die ganze Gruppe gilt.

309

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.12 Das Eingabeformular für ein Radio-Button-Menü

Die Option Standard bewirkt bei einem Radio-Button-Menü, dass das entsprechende Optionsfeld bereits angekreuzt ist. Wenn Sie hier kein Feld aktivieren, ist im Frontend auch kein Optionsfeld vorgegeben. Sollte das Radio-Button-Menü ein Pflichtfeld sein, muss der Besucher vor dem Abschicken mindestens eine Option ankreuzen. Ansonsten gibt es eine Fehlermeldung. Die Option Gruppe hat bei einem Radio-Button-Menü keinerlei Auswirkungen auf den Quelltext. Die Zusammengehörigkeit der Optionsfelder erfolgt wie gesagt bereits dadurch, dass alle Optionsfelder eines Menüs den Wert aus Feldname bekommen. Listing 11.6 zeigt das komplette HTML zum Menü aus Abbildung 11.12.

Pflichtfeld In welchem Land wohnen Sie?*



Deutschland

310

Formularfelder: Die Feldtypen im Formulargenerator



Österreich

Schweiz


Listing 11.6 Ein Radio-Button-Menü im Quelltext

Die Kombinationen aus Optionsfeld und Beschriftung werden jeweils von einem span umgeben, was sich beim Gestalten als äußerst praktisch erweist. Das RadioButton-Menü aus Listing 11.6 sieht im Frontend so aus wie in Abbildung 11.13.

Abbildung 11.13 Ein Radio-Button-Menü im Frontend

Dieses Menü wurde mit nur zwei Styles formatiert, was nebenbei gesagt zeigt, wie wohlüberlegt das vom Formulargenerator erzeugte HTML ist: .radio_container label { display: inline; /* label neben dem input-Feld */ cursor: pointer; /* Mauszeiger wird zur Hand */ } .radio_container span { display: block; margin-top: 8px; } Listing 11.7

Das CSS für das Radio-Button-Menü

Die label-Elemente innerhalb von div.radio_container werden inline dargestellt, damit sie hinter den runden Optionsfeldern stehen und nicht darunter. Um deutlich zu machen, dass sie tatsächlich anklickbar sind, wird der Mauszeiger zur Klickhand, sobald er über dem Element schwebt.

311

11.3

11

Kontakt: Formulare erstellen mit Contao

Um die Kombinationen aus Optionsfeld und dazugehöriger Beschriftung untereinander zu stellen, wird das span drumherum als Block dargestellt und mit einem kleinen Außenabstand nach oben versehen.

11.3.7

Das Checkbox-Menü: Kontrollkästchen deluxe

Im Gegensatz zu Optionsfeldern sind Checkboxen erstens eckig und zweitens notorische Einzelgänger. Auch wenn sie optisch meist als Gruppe auftreten, bleibt im Grunde jedes Kontrollkästchen für sich, weshalb man immer keines, eines, mehrere oder auch alle ankreuzen kann. Abgesehen davon sind sich Radio-Button-Menüs und Checkbox-Menüs recht ähnlich.

Abbildung 11.14 Das Eingabeformular für ein Checkbox-Menü

Das Eingabeformular funktioniert genau wie bei einem Radio-Button-Menü. Der Feldname dient als Wert für das Attribut name="werbung[]". Falls Sie sich über die beiden eckigen Klammen dahinter wundern: Sie erleichtern die Auswertung der Formulardaten in einem Programm, weil damit automatisch ein sogenanntes Array erzeugt wird. Falls Ihnen das nichts sagt, ist das nicht schlimm. Es funktioniert trotzdem. Die Feldbezeichnung ist ein label oberhalb des Checkbox-Menüs, die Bezeichnung im Assistenten steht hingegen direkt neben den einzelnen Kontrollkästchen. Genau wie bei den Optionsfeldern bewirkt ein Kreuz bei Standard, dass

312

Formularfelder: Die Feldtypen im Formulargenerator

die entsprechende Checkbox angekreuzt im Frontend erscheint. Gruppe hat auch hier keinerlei Auswirkungen. Listing 11.8 zeigt das HTML für das Checkbox-Menü aus Abbildung 11.14. Woher kennen Sie Contao?



Internet

Fersehwerbung

Was anderes.


Listing 11.8

Das HTML für ein Checkbox-Menü

Der Aufbau entspricht ziemlich genau dem eines Radio-Buttons-Menüs und auch beim CSS von Abbildung 11.15 wurde gegenüber einem Radio-Button-Menü nur .radio_container durch .checkbox_container ersetzt (siehe Listing 11.7).

Abbildung 11.15 Ein Checkbox-Menü im Frontend

11.3.8 »Datei-Upload«: Besucher können Dateien hochladen Das Formularfeld Datei-Upload fügt dem Formular ein Feld hinzu, mit den ein Besucher eine Datei von seinem Rechner auf den Webspace hochladen kann. Dabei können Sie für jedes Upload-Feld einzeln festlegen, welche Dateitypen erlaubt sind und in welchem Ordner die Dateien gespeichert werden sollen.

313

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.16 Das Eingabeformular für den Feldtyp »Datei-Upload«

Die maximale Dateigröße können Sie im Feld Maximale Eingabelänge eingeben, und zwar in Byte und innerhalb des Limits, das im Backend-Modul System 폷 Einstellungen im Bereich Datei-Uploads festgelegt wird. Das HTML dafür ist sehr einfach: Schicken Sie uns Ihre Datei:


Listing 11.9

Das HTML für das Formularfeld »Datei-Upload«

Wenn die Beschriftung wie in Abbildung 11.17 in einer eigenen Zeile stehen soll, erreichen Sie das mit einem einfachen label {display:block}.

Abbildung 11.17 Das Formularfeld »Datei-Upload« im Frontend

11.3.9 Die Sicherheitsfrage zur Spamvermeidung Genau wie in der richtigen Welt gibt es auch im Internet nicht nur nette Menschen, und einige dieser üblen Zeitgenossen betreiben den automatisierten Missbrauch von Formularen aller Art mithilfe sogenannter Spam-Bots.

314

Formularfelder: Die Feldtypen im Formulargenerator

Ein Mittel gegen diesen Missbrauch ist ein sogenanntes Captcha, was eine Verballhornung des englischen capture (Gefangennahme) ist. Captcha ist aber auch die Abkürzung von Completely Automated Public Turing test to tell Computers and Humans Apart, frei übersetzt »vollautomatisierter Mensch-Maschine-Test in der Tradition des englischen Informatikers Alan Turing«. Oft ist ein Captcha eine Grafik mit mehr oder weniger schlecht lesbaren Zeichen darauf, die für Menschen erkennbar sein sollen, für Maschinen aber nicht. Allerdings habe ich bei diesem Mensch-Maschine-Test schon des Öfteren die Buchstaben falsch geraten und bin daraufhin als Maschine eingestuft worden. Contao implementiert einen solchen Mensch-Maschine-Test beim Formulartyp Sicherheitsabfrage als einfache Rechenaufgabe. Maschinen können zwar rechnen, verstehen aber die Aufgabe nicht. Wird sie nicht richtig gelöst, wird das Formular nicht abgeschickt. Die Sicherheitsabfrage kann im Backend nur mit einer Beschriftung wie z. B. »Spamschutz« versehen werden und ist automatisch ein Pflichtfeld.

Abbildung 11.18 Die Sicherheitsabfrage im Frontend

Im HTML sieht eine Sicherheitsabfrage so aus:

Pflichtfeld Spamschutz * Bitte addie ren Sie 6 u nd 8.

Bitte a ddie ren Sie 6 und 8.
Listing 11.10

Das Formularfeld »Sicherheitsabfrage« im Quelltext

315

11.3

11

Kontakt: Formulare erstellen mit Contao

Der Feldtyp Sicherheitsabfrage benutzt die Klassen captcha für das Eingabefeld und captcha_text für die Rechenaufgabe. Sowohl die Rechenaufgabe als auch die Beschriftung sind als Sonderzeichen kodiert, um es den Spam-Bots nicht allzu leicht zu machen. Kontaktformular auch mit Spamschutz? Um das im vorherigen Abschnitt erstellte Kontaktformular mit einem Spamschutz zu versehen, müssen Sie im Formulargenerator lediglich ein Formularfeld vom Typ Sicherheitsabfrage hinzufügen.

11.4

Sinnvolle Erweiterungen zur Arbeit mit Formularen

Wenn Sie viel mit Formularen arbeiten, gibt es einige Tipps und Erweiterungen, die das Leben diesbezüglich etwas leichter machen. Zunächst einmal hat das Contao-Forum einen speziellen Bereich für Fragen zu Formularen: 왘

eigener Bereich zu Formularen im Contao-Forum http://bit.ly/b4ns3N

Außerdem gibt es zwei sehr nützliche kleine Erweiterungen: 왘

[helpmessage] Hilfsnachricht bei Formularfeldern http://bit.ly/cDlEG3 Zeigt einen individuellen Hinweistext für ein Formularfeld in einem kleinen Popup-Fensterchen, das erscheint, wenn ein Besucher in das Feld klickt. Zum Beispiel bei Kontakt- oder Suchformularen.

왘

[conditionalselectmenu] Abhängiges Select-Menü http://bit.ly/d3gd6d Select-Menü, das dynamisch seine Optionen ändert, je nachdem, was in seinem übergeordneten Menü ausgewählt wurde.

Eine größere Erweiterung, die sich Betreiber aller formularintensiven Sites auf jeden Fall näher anschauen sollten, ist der Extended Form Generator: 왘

[efg] Extended Form Generator http://bit.ly/cNqNTE

왘

eigener Bereich zum EFG im Contao-Forum http://bit.ly/cfVRY7

Mit dieser Erweiterung dürften fast alle Formularwünsche abgedeckt sein.

316

In diesem Kapitel erstellen Sie eine interne Suchmaschine, mit der Besucher die Beispielsite durchsuchen können.

12

Suchfunktion: Die Beispielsite durchsuchen

Genau wie ein Kontaktformular gehört eine Suchfunktion zur Standardausstattung einer modernen, benutzerfreundlichen Website, denn eine Website ist kein Selbstzweck und wird in erster Linie für die Besucher gebaut. In dem Wort Besucher steckt das Wort suchen schon drin, und genau wie im Baumarkt gibt es auf Websites zwei Arten von Besuchern: Die einen laufen umher, lesen die Hinweisschilder und versuchen, die Holzschrauben selbst zu finden, die anderen fragen den nächstbesten Mitarbeiter nach dem kürzesten Weg. Eine Suchfunktion ist dieser nächstbeste Mitarbeiter. Für eine funktionierende Suchfunktion sind die verschiedensten Zutaten nötig, die wie immer auf die richtige Art und Weise zubereitet werden müssen. Hier ist das Rezept im Überblick: Das Ergebnis sieht am Ende des Kapitels so aus wie in Abbildung 12.1.

Abbildung 12.1 Die Suchseite (1.) und das Suchformular (2.)

317

12

Suchfunktion: Die Beispielsite durchsuchen

왘

Zunächst erstellen Sie die Suchseite, auf der ein Modul eingebunden wird, das auf dem treffend benannten Modultyp »Suchmaschine« basiert. Diese Seite kann nach der Erstellung bereits zur Suche benutzt werden.

왘

Danach erstellen Sie dann ein Suchformular, das auf allen Seiten rechts außen in der horizontalen Navigation angezeigt wird. Eine mit diesem Formular ausgeführte Suche ruft dann die Suchseite automatisch auf.

12.1

Teil 1: Eine Suchseite erstellen

Im Folgenden beginnen Sie mit der Erstellung der Suchseite, für die Sie die folgenden Zutaten benötigen: 왘

eine neue, im Menü zunächst sichtbare Seite, die später versteckt wird

왘

ein Modul vom Typ Suchmaschine

왘

die Einbindung des Moduls auf dieser Seite über Artikel

Danach wird die Suchseite noch gestaltet, damit sie übersichtlicher wird. Schritt1: Die Suchseite im Seitenbaum erstellen Der erste Schritt ist ganz simpel die Erstellung einer neuen Seite im Seitenbaum. Diese Seite wird später im Menü versteckt und durch das Suchformular im Kopfbereich automatisch aufgerufen. Sie bleibt vorerst zum Testen aber sichtbar. Nach dem folgenden ToDo sieht der Seitenbaum für die Beispielsite so aus wie in Abbildung 12.2. ToDo: Die Suchseite im Seitenbaum erstellen 1. Öffen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite ganz unten im Seitenbaum ein. 4. Im Beispiel ist der Seitenname der Seite »Suchen«, aber Optimisten können sie auch gerne »Finden« nennen. Der Name der Seite ist nicht wirklich wichtig. 5. Seitentyp: Reguläre Seite. 6. Aktivieren Sie die Option Seite veröffentlichen. 7. Klicken Sie auf Speichern und Schliessen.

318

Teil 1: Eine Suchseite erstellen

Abbildung 12.2 Die Suchseite im Seitenbaum

Schritt 2: Das Modul »Anwendung – Suchfunktion« Nach der Erstellung der Suchseite machen Sie in diesem Schritt Bekanntschaft mit einem neuen Modultyp, der den treffenden Namen Suchmaschine trägt. Dieser Modultyp hat es in sich und macht zwei Dinge auf einmal: Er erzeugt auf der Suchseite ein Suchformular und präsentiert direkt darunter das Suchergebnis. In diesem Abschnitt erstellen Sie damit ein Modul namens Anwendung – Suchfunktion. Abbildung 12.3 zeigt den ersten Teil der Konfiguration im Überblick. Der Titel wird nur zur internen Verwaltung benötigt. Interessanter ist der Bereich Modul-Konfiguration. Der Modultyp Suchmaschine unterscheidet die zwei Abfragetypen Finde alle Wörter (UND-Suche) und Finde irgendein Wort (ODER-Suche). Sofern es keinen guten Grund dagegen gibt, sollten Sie als Standard-Abfragetyp die Option Finde alle Wörter verwenden. Die Ungenaue Suche findet auch Wortteile und erhöht dadurch die Trefferzahl. Die Kontext-Spannweite bestimmt, wie viele Zeichen links und rechts von einem gefundenen Suchbegriff angezeigt werden, und die Gesamte Kontextlänge beschränkt genau diese. Die Voreinstellungen sind beide sinnvoll und sollten nur bei einem konkreten Anlass geändert werden.

319

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.3 Eingabeformular für den Modultyp »Suchmaschine«, Teil 1

Elemente pro Seite beschränkt die Anzeige der Suchergebnisse pro Seite. Sind mehr Treffer vorhanden, erzeugt Contao unten auf der Seite automatisch eine Paginierung. Die Voreinstellung 0 zeigt alle Treffer auf einer Seite. Suchformular-Layout. Das einfache Formular besteht nur aus einem Textfeld und einer Absende-Schaltfläche, das erweiterte Formular bietet dem Suchenden darunter noch zwei Radio-Buttons zur Änderung des Abfragetyps (Finde alle Wörter oder Finde irgendein Wort). Abbildung 12.4 zeigt den zweiten Teil der Konfiguration. Dem Modultyp Suchmaschine können Sie im unteren Teil des Eingabeformulars gleich zwei Seiten zuweisen, eine Weiterleitungsseite und eine Referenzseite. Das Prinzip der Weiterleitungsseite kennen Sie bereits, und es funktioniert hier genauso wie immer. Mit der Weiterleitungsseite sagen Sie dem Modul, welche Seite es aufrufen soll. Auf dieser Seite muss ein Modul vom Typ Suchmaschine eingebunden sein. Die Referenzseite können Sie auf großen Sites benutzen, um nur einen Teil der Site zu durchsuchen. Wenn die ganze Site durchsucht werden soll, wählen Sie entweder gar keine Referenzseite oder den Startpunkt.

320

Teil 1: Eine Suchseite erstellen

Abbildung 12.4 Eingabeformular für den Modultyp »Suchmaschine«, Teil 2

Im folgenden ToDo erstellen Sie ein Modul für die Beispielsite. ToDo: Das Modul »Anwendung – Suchfunktion« erstellen 1. Öffnen Sie im Backend-Modul themes die Frontend-Module zur Bearbeitung. 2. Klicken Sie im Arbeitsbereich oben auf Neues Modul. 3. Titel: »Anwendung – Suchfunktion« 4. Wählen Sie als Modultyp den Eintrag Suchmaschine. 5. Ändern Sie in der Modul-Konfiguration das Suchformular-Layout in Erweitertes Formular. Lassen Sie die anderen Einstellungen unverändert (wie in Abbildung 12.3). 6. Wählen Sie als Weiterleitungsseite die in diesem Kapitel erstellte Seite Suchen.

321

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

ToDo: Das Modul »Anwendung – Suchfunktion« erstellen (Forts.) 7. Wählen Sie als Referenzseite den Startpunkt einer Webseite. 8. Das Template sollte search_default.tpl sein. 9. Klicken Sie auf Speichern und Schliessen.

Schritt 3: Das Modul »Anwendung – Suchfunktion« einbinden Nach der Erstellung muss das Modul wie immer eingebunden werden. Da es nur auf der Suchseite erscheinen soll, bietet sich die Einbindung in einem Artikel auf der Suchseite an. Nach dem folgenden ToDo wird die Suchseite bereits funktionieren. ToDo: Das Modul »Anwendung – Suchfunktion« einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Suchen [Hauptspalte] zur Bearbeitung. 3. Erstellen Sie ein Inhaltselement Text mit einer h1-Überschrift »Suchergebnisse«, dem Satz »Sie haben folgende Suche eingegeben: » und der CSS-Klasse »seitenanfang«. 4. Klicken Sie auf Speichern und neu. 5. Fügen Sie unterhalb des Textes ein neues Inhaltselement ein. 6. Wählen Sie als Elementtyp Modul. 7. Wählen Sie aus der Liste Modul den Eintrag Anwendung – Suchfunktion (ID xx). 8. Klicken Sie auf Speichern und Schliessen.

Die Suchfunktion sucht und funktioniert nach diesem ToDo im Prinzip auch schon. Auf der Suchseite wartet bereits ein Suchformular auf Sie. Falls bei Ihnen nichts gefunden wird, lesen Sie bitte den Hinweiskasten vor der Abbildung 12.5, in der der Suchbegriff »Roxanne« eingegeben wurde, für den die Suchmaschine genau einen Treffer auf der Seite Videos gefunden hat. Falls etwas nicht gefunden wird: Den Suchindex neu aufbauen Contao indiziert jede Seite automatisch, sobald sie von einem Besucher im Browser aufgerufen wird, und speichert die auf der Seite enthaltenen Wörter in der Datenbank. Das Suchmodul durchsucht also nicht die Webseiten, sondern die Datenbank, und liefert die URLs der Seiten zurück, die als Treffer gefunden wurden. Wenn Sie Ihre Suchmaschine ausprobieren und bestimmte Begriffe nicht gefunden werden, obwohl sie definitiv vorhanden sind, schauen Sie mal im Backend-Modul Systemwartung vorbei. Dort gibt es zwei nützliche Funktionen, mit denen Sie den Inhalt der für die Suche relevanten Datenbanktabellen per Fernsteuerung kontrollieren können: 왘

Daten bereinigen: tl_search und tl_search_index

왘

Suchindex neu aufbauen

Spätestens nach diesen Schritten sollte alles klappen.

322

Teil 1: Eine Suchseite erstellen

Abbildung 12.5 Die Site-Suchmaschine – ungestaltet, aber sie funktioniert.

Schritt 4: Das HTML des Moduls »Anwendung – Suchfunktion« Auf der Suchseite wird vom Modul Anwendung – Suchfunktion in der Hauptspalte das in Listing 12.1 dargestellte HTML erzeugt.

Listing 12.1 Das HTML von Suchformular und Suchergebnis

Beim Suchformular ist bemerkenswert, dass wie bei Suchmaschinen üblich die Methode GET verwendet wird, was im Klartext bedeutet, dass die Suchbegriffe Teil der URL und in der Adresszeile des Browsers zu sehen sind. Das Eingabefeld für die Suchbegriffe hat den Namen keywords (der wichtig ist und weiter unten wieder auftaucht) und zeigt nach einer Suche die verwendeten Suchbegriffe an. In der Ergebnisliste unterhalb des Formulars steht die Anzahl der Ergebnisse in einem Absatz p mit der Klasse header. Darunter werden die Suchtreffer aufgelistet. Die URL am Anfang ist von einem h3 umgeben, der Textauszug ist p mit der Klasse context, der Suchbegriff ist mit einem span.highlight ausgezeichnet, und die URL am Ende wird wiederum in p mit der Klasse url aufbewahrt. Dieses HTML wird im nächsten Schritt gestaltet. Schritt 5: Das CSS zur Gestaltung der Suchseite Die Gestaltung der Suchseite ist nicht schwierig, aber doch etwas aufwendiger, da eine Menge verschiedener HTML-Elemente beteiligt sind. Das folgende ToDo macht einen Vorschlag zur Formatierung, den Sie natürlich gerne verändern können. ToDo: Die Suchseite gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende des Stylesheets unterhalb der Gestaltung des Kontaktformulars folgenden Kommentar ein: /* ====================================== Suche – Ergebnisseite ====================================== */

3. Gestalten Sie das Suchformular auf der Seite mit folgenden Styles: .mod_search input.text { padding: 3px; } .mod_search .radio_container { margin: 1em 0; } .mod_search .radio_container label { margin-right: 10px; }

324

Teil 1: Eine Suchseite erstellen

ToDo: Die Suchseite gestalten (Forts.) 4. Die Anzahl der Suchtreffer können Sie mit folgender Regel formatieren: #main .mod_search p.header { text-align: right; background-color: #ADCBE6; border-top: 2px solid #86ADCD; padding: 0.5em; margin-top: 2em; }

5. Die anklickbare h3-Überschrift könnte wie folgt aussehen: #main .mod_search h3 { font-size: 16px; } #main .mod_search h3 a:link { color: #0000FF; background: none; padding-left: 0; } #main .mod_search h3 a:visited { color: #800080; background: none; padding-left: 0; } .mod_search h3 .relevance { font-size: 10px; font-weight: normal; }

6. Der Textauszug, die Suchbegriffe und die URL darunter werden mit den folgenden Styles gestaltet: .mod_search p.context { margin: 0; } .mod_search .highlight { font-weight: bold; } .mod_search p.url { color: #008000; }

7. Zum Schluss werden die Suchergebnisse ein bisschen gepolstert und abwechselnd eingefärbt: .mod_search .even, .mod_search .odd { padding: 0.5em; } .mod_search .odd { background-color: #d9d9d9; margin: 1em 0; }

8. Speichern Sie das Stylesheet.

Mit diesem CSS sieht die Suchseite im Browser ungefähr so aus wie in Abbildung 12.6.

325

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.6 Die fertig gestaltete Suchseite

12.2

Teil 2: Das Suchformular erstellen und einbinden

Die interne Suchmaschine funktioniert bereits, aber was noch fehlt, ist ein Suchformular, mit dem man die Site von jeder Seite aus durchsuchen kann. In diesem Abschnitt erstellen Sie ein solches Suchformular, platzieren es im Kopfbereich rechts neben der Hauptnavigation und verstecken dann die Suchseite, sodass sie nicht mehr im Menü erscheint.

326

Teil 2: Das Suchformular erstellen und einbinden

Abbildung 12.7 Das fertige Suchformular im Kopfbereich

Schritt 1: Ein Suchformular mit dem Formulargenerator erstellen Zunächst erstellen Sie mit dem Formulargenerator ein einfaches Suchformular. Als Weiterleitungsseite wählen Sie die Seite Suchen, und als Übertragungsmethode wird wie bei Suchformularen üblich GET verwendet. ToDo: Das Suchformular mit dem Formulargenerator erstellen 1. Öffnen Sie das Backend-Modul formulargenerator. 2. Klicken Sie oben im Arbeitsbereich auf Neues Formular. 3. Der Titel ist »Suchformular«. 4. Wählen Sie als Weiterleitungsseite die in diesem Kapitel erstellte Seite Suchen. 5. Aktivieren Sie Tabellenloses Layout. 6. Die Übertragungsmethode ist GET. 7. Geben Sie dem Formular eine CSS-Id namens »suchformular«. 8. Klicken Sie auf Speichern und Schliessen.

Das Formular existiert. Jetzt fehlen ihm nur noch ein Eingabefeld und eine Schaltfläche zum Abschicken der Suche.

327

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.8 Das Eingabeformular zur Erstellung des Suchformulars

Schritt 2: Ein Textfeld zum Suchformular hinzufügen In diesem Schritt fügen Sie dem Formular ein Textfeld und einen Submit-Button hinzu. Da der Submit-Button direkt neben dem Eingabefeld stehen wird, erstellen Sie im folgenden ToDo beide in einem einzigen Formularelement. ToDo: Ein Textfeld zum Suchformular hinzufügen 1. Öffnen Sie das Backend-Modul formulargenerator. 2. Öffnen Sie das eben erstellte Suchformular zur Bearbeitung. 3. Klicken Sie oben im Arbeitsbereich auf Neues Feld und anschließend auf den braunen Pfeil nach unten. 4. Wählen Sie als Feldtyp Textfeld. 5. Der Feldname muss »keywords« lauten (ohne Anführungsstriche). Durch diesen Feldnamen weiß Contao, dass es sich um eine Suche handelt.

328

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Ein Textfeld zum Suchformular hinzufügen (Forts.) 6. Die Feldbezeichnung sollten Sie frei lassen. Das ist eine Beschriftung für das Formular, und das ist beim Suchformular nicht nötig. 7. Wählen Sie als Eingabeprüfung die Option Erweiterte alphanumerische Zeichen. 8. Aktivieren Sie im Bereich Absende-Schaltfläche das Kontrollkästchen vor AbsendeSchaltfläche hinzufügen. 9. Die Bezeichnung der Absende-Schaltfläche ist »Suchen«. 10. Klicken Sie auf Speichern und Schliessen.

Im Backend sieht das Suchformular danach so aus wie in Abbildung 12.9.

Abbildung 12.9 Das Textfeld zum Suchen im Formulargenerator

Alternative: Suchformular mit dem Modul »Eigenes HTML« erstellen Falls Ihnen der Formulargenerator nicht zusagt oder Sie ganz besondere Vorstellungen vom Suchformular haben, die sich damit nicht umsetzen lassen, können Sie das HTML für das Formular auch selbst schreiben. Erstellen Sie dazu einfach ein neues FrontendModul vom Typ Eigenes HTML. Achten Sie bei der Formularerstellung darauf, dass der Name des Eingabefeldes keywords lauten muss. Wenn Sie ein solches Frontend-Modul manuell erstellen, können Sie Schritt 3 überspringen und gleich mit Schritt 4 weitermachen, der Einbindung des Formulars in das Seitenlayout.

Schritt 3: Ein Frontend-Modul mit dem Suchformular erstellen Das Suchformular soll auf allen Seiten rechts neben der horizontalen Navigation erscheinen, und der ideale Weg dahin wäre eine Einbindung ins Seitenlayout. Es gibt aber ein Problem: In einem Seitenlayout können nur Artikel und Frontend-Module eingebunden werden, und das Suchformular ist weder ein Artikel

329

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

noch ein Modul. Für solche Situationen gibt es den Modultyp Formular, der ein Formular ganz einfach in ein Modul integriert, das dann anschließend in das Seitenlayout eingebunden wird. Im folgenden ToDo erstellen Sie zunächst einmal das Modul mit dem Formular. ToDo: Ein Frontend-Modul mit dem Suchformular erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Der Titel des Moduls soll »Anwendung – Suchformular« sein. 4. Wählen Sie als Modultyp Formular. 5. Wählen Sie im Bereich Include-Einstellungen in der Liste Formular den Eintrag Suchformular. 6. Klicken Sie auf Speichern und Schliessen.

Das war’s schon: kurz, aber wichtig. Schritt 4: Das Modul im Seitenlayout einbinden Nach der Integration des Suchformulars in ein Frontend-Modul binden Sie das neu erstellte Modul in diesem Schritt in das Seitenlayout ein. Abbildung 12.10 zeigt, wie der Bereich Frontend-Module im Seitenlayout danach aussieht.

Abbildung 12.10 Das Seitenlayout mit dem eingebundenen Suchformular

Im folgenden ToDo binden Sie das Modul Anwendung – Suchformular ein und verstecken dann die Suchseite im Menü.

330

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Das Modul »Suchformular« im Seitenlayout einbinden 1. Öffnen Sie im Backend-Modul Themes die Seitenlayouts zur Bearbeitung. 2. Öffnen Sie das Standardlayout [Standard] zur Bearbeitung. 3. Duplizieren Sie im Bereich Frontend-Module – Eingebundene Module die Zeile Navigation – Metanavi – Kopfzeile. 4. Ändern Sie die untere der beiden Zeilen so, dass das Modul Anwendung – Suchformular in die Kopfzeile eingebunden wird. 5. Klicken Sie auf Speichern und Schliessen. 6. Öffnen Sie das Backend-Modul Seitenstruktur. 7. Öffnen Sie die Seite Suchen zur Bearbeitung. 8. Aktivieren Sie das Kontrollkästchen Im Menü verstecken. 9. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo sollte wie in Abbildung 12.11 das Suchformular im Kopfbereich erscheinen und auch bereits funktionieren. An der Gestaltung feilen Sie in Schritt 5 und 6 noch ein bisschen.

Abbildung 12.11 Das Suchformular im Kopfbereich – ungestaltet

Schritt 5: Das HTML für das Suchformular Das HTML für das Suchformular ist ziemlich »straightforward«, wie man auf Neudeutsch so schön sagt, und hat keinerlei Besonderheiten, die nicht schon an anderer Stelle erwähnt worden wären:

331

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

Listing 12.2 Das HTML für das Suchformular

Falls das
unterhalb des Suchformulars ungewünschte Abstände verursacht oder sonst irgendwie stören sollte, können Sie es mit der CSS-Regel #suchformular br {display:none;} ausblenden. Das ist einfacher, als es im Template zu entfernen. Schritt 6: Das Suchformular im Kopfbereich positionieren Zur Positionierung des Suchformulars könnte man natürlich die horizontale Navigation nach links und das Suchformular nach rechts floaten, aber stabiler ist es, das Formular mit absoluter Positionierung rechts unten in den Kopfbereich zu platzieren. Jeder Layoutbereich von Contao hat ein div mit der Klasse inside, das im ResetStylesheet basic.css die Anweisung position:relative; erhält. Dadurch wird div.inside im Kopfbereich im folgenden ToDo automatisch zum Bezugspunkt für die absolute Positionierung des Formulars. ToDo: Das Suchformular im Kopfbereich positionieren 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie unterhalb der Gestaltung der Suchseite folgenden Kommentar ein: /* ====================================== Das Suchformular positionieren ====================================== */

3. Gestalten Sie das Suchformular mit den folgenden Styles: #header #suchformular { margin: 0; } #header #suchformular .text { width: 100px; }

332

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Das Suchformular im Kopfbereich positionieren (Forts.) 4. Positionieren Sie das Suchformular im Kopfbereich rechts unten: #header .mod_form { position: absolute; right: 0; bottom: 0; padding: 5px; }

5. Speichern Sie das Stylesheet bildschirm.css.

Mit diesen wenigen Styles sitzt das Suchformular an der richtigen Stelle (Abbildung 12.12).

Abbildung 12.12 Das fertig gestaltete Suchformular

Falls die Hauptnavigation wächst ... Wenn ein Objekt absolut positioniert wird, ist der CSS-Autor dafür verantwortlich, dass sich Elemente nicht überlappen. Sollten in der ersten Menü-Ebene noch neue Seiten hinzukommen, wird die horizontale Navigation sich irgendwann mit dem absolut positionierten Suchformular überschneiden. Was immer dann passiert, ist ziemlich sicher nicht wünschenswert. Um eine Überschneidung zu verhindern, können Sie den Style für die ungeordnete Liste in navigation.css um eine maximale Breite von 780px ergänzen: #header .mod_navigation ul { float: left; width: auto; max-width: 780px; margin-bottom: 0; }

333

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

Falls die Hauptnavigation dann zu breit wird, erfolgt ein Umbruch und die Navigation wird zweizeilig. Das ist vielleicht nicht hübsch, aber besser als nicht bedienbar, weil die Menüpunkte hinter dem Suchformular verschwinden.

12.3

Die Syntax der Suchfunktion im Überblick

Die Syntax der internen Suchmaschine orientiert sich an Suchmaschinen wie Google, sodass Ihre Besucher bei der Bedienung kaum Schwierigkeiten haben werden. Hier eine Zusammenfassung der wichtigsten Punkte: 왘

UND- bzw. ODER-Suche Eine Suche nach lorem ipsum listet standardmäßig nur Seiten als Treffer auf, auf denen beide Begriffe vorkommen. Gesucht wird als nach lorem AND ipsum. Diese UND-Suche heißt in Contao »Finde alle Wörter«. Wem das zu wenig ist, der kann die Leiden der jungen Wörter erhöhen und die Option »Finde irgendein Wort« aktivieren. Das bewirkt die Suche lorem OR ipsum und listet alle Seiten als Treffer auf, auf denen einer der beiden Suchbegriffe vorkommt.

왘

Phrasensuche »mit Anführungszeichen« Eine Suche nach "lorem ipsum" geht einen Schritt weiter als die UND-Suche. Contao listet nur Seiten als Treffer auf, auf denen die beiden Begriffe direkt hintereinander stehen.

왘

Platzhalter-Suche mit Sternchen * Um auch Teile von Wörtern zu finden, können Sie ein Sternchen als Platzhalter verwenden. Eine Suche nach web* findet alle Begriffe, die mit diesen Buchstaben beginnen. Herr oder Frau Weber werden dabei genauso gefunden wie eine Webanwendung.

왘

Suchbegriff erzwingen mit einem Pluszeichen + Das Erzwingen von Suchbegriffen ermöglicht die Verfeinerung von ODERSuchen, indem Sie sagen können, dass ein Begriff unbedingt vorkommen muss, der andere aber nur eventuell.

왘

Suchbegriff ausschließen mit einem Minuszeichen Eine Suche nach -web consulting design findet alle Seiten, auf denen die Begriffe consulting und/oder design stehen, aber nicht das Wort web.

Viel Spaß beim Suchen mit der internen Suchmaschine von Contao.

334

In diesem Kapitel erfahren Sie, wie Sie ein News-System erstellen, das die Beiträge chronologisch sortiert auf der Webseite ausgibt. Außerdem fügen Sie Bilder in Teaser und Beiträge ein, erstellen einen Feed und aktivieren die Kommentarfunktion. Zum Schluss bauen Sie eine Navigation, mit der man Beiträge monatsweise auswählen kann.

13

Die Erweiterung »Nachrichten«

Die Nachrichten-Erweiterung besteht aus einem Backend-Modul, vier FrontendModulen und diversen Modul- und Subtemplates. Nachrichten werden im Frontend umgekehrt chronologisch ausgegeben und können falls gewünscht von den Besuchern kommentiert werden. Typischerweise gibt es dabei eine Übersichtsseite mit kurzen Anlesetexten (Teasern) und einem Link »Weiterlesen …«, der zur Einzeldarstellung der Nachricht führt. Abbildung 13.1 zeigt eine solche NewsSeite im Browser.

Abbildung 13.1 Die Seite »Nachrichten« mit Teasern und Monatauswahl

335

13

Die Erweiterung »Nachrichten«

Chronologisch umgekehrte Sortierung, Teaser, Kommentarfunktion. Die Aufzählung erinnert an einen Blog und wer will, kann mit der Nachrichten-Erweiterung einen Blog betreiben.

13.1

Übersicht: Die Zutaten für das Nachrichtensystem

Nachrichtenbeiträge sind anders als Artikel. Sie sind einfacher aufgebaut und bestehen nicht aus Inhaltselementen, sondern nur aus einem Teaser und dem Text des Beitrags, eventuell garniert mit einer Grafik. Beiträge werden auch nicht innerhalb der Seitenstruktur aufbewahrt, sondern in einem speziell erstellten Nachrichtenarchiv. Um auf der Beispielsite ein einfaches News-System auf die Beine zu stellen, benötigen Sie folgende Zutaten: 왘

Zwei Seiten. Eine Seite für die Nachrichtenübersicht mit den Teasern und eine zur Darstellung der Beiträge nach einem Klick auf »Weiterlesen …«. Die Teaser werden auf der bereits vorhandenen Seite Nachrichten ausgegeben, es fehlt also nur noch eine zweite Seite für die einzelnen Beiträge.

왘

Ein Nachrichtenarchiv. Das Archiv wird im Backend-Modul Inhalte 폷 Nachrichten erstellt und dient zum Schreiben und zur Aufbewahrung der Nachrichtenbeiträge.

왘

Zwei Frontend-Module. Ein Modul vom Typ Nachrichtenarchiv erzeugt die Übersicht, ein zweites Modul vom Typ Nachrichtenleser ist für die Darstellung der vollständigen Beiträge zuständig.

왘

Zwei Artikel. Um die Module auf den beiden Seiten auszugeben, wird auf jeder Seite ein Artikel erstellt, in dem mit dem Inhaltselement Modul das HTML der beiden Frontend-Module angezeigt wird.

Los geht’s mit der Erstellung des Nachrichtenarchivs.

13.2

Das Backend-Modul »Nachrichten«: Beiträge erstellen

Bevor Sie auf der Seite Nachrichten Beiträge anzeigen können, muss es erst einmal welche geben. Zur Erstellung und Verwaltung von Nachrichten dient das Backend-Modul Inhalte 폷 Nachrichten.

336

Das Backend-Modul »Nachrichten«: Beiträge erstellen

13.2.1

»Newsarchiv«: Ein Nachrichtenarchiv erstellen

Ein Archiv dient zur Erstellung und Aufbewahrung von Nachrichten. Wenn Sie im Backend-Modul Nachrichten oben im Arbeitsbereich auf Neues Archiv klicken, sehen Sie das Eingabeformular aus Abbildung 13.2.

Abbildung 13.2 Das Eingabeformular zur Erstellung eines Nachrichtenarchivs

Der Titel ist der Name, unter dem das Archiv geführt wird, und die Weiterleitungsseite ist die Seite, die nach einem Klick auf »Weiterlesen …« aufgerufen wird. Auf dieser Seite muss ein Modul vom Typ Nachrichtenleser zur Anzeige eines Beitrags eingebunden sein. Im Bereich Kommentare können Sie die Kommentarfunktion für jedes Archiv einzeln aktivieren. Der Zugriffsschutz kann ein Archiv schützen, sodass es nur für bestimmte Benutzergruppen zu sehen ist. Die Option Feed erstellen erstellt auf Wunsch einen RSS- oder Atom-Feed, sodass Besucher die Nachrichten mit einem Feedreader abonnieren können. Im folgenden ToDo erstellen Sie ein Nachrichtenarchiv namens Newsarchiv.

337

13.2

13

Die Erweiterung »Nachrichten«

ToDo: Ein Nachrichtenarchiv erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Klicken Sie oben im Arbeitsbereich auf Neues Archiv. 3. Vergeben Sie den Titel »Newsarchiv«. 4. Eine Weiterleitungsseite gibt es noch nicht, und sie wird erst später eingerichtet. Lassen Sie diesen Punkt vorerst unverändert. 5. Lassen Sie auch die folgenden Optionen Kommentare, Zugriffsschutz und RSS-Feed unverändert. 6. Klicken Sie auf Speichern und Schliessen.

Jetzt haben Sie eine Lagerhalle zur Aufbewahrung der Teaser und Beiträge. Sie können beliebig viele solcher Archive erstellen und sie alle unterschiedlich konfigurieren, zum Beispiel ein Archiv für öffentliche Nachrichten auf der Webseite und ein weiteres mit Zugriffsschutz in einem internen Bereich nur für Mitarbeiter. Aber für den Anfang reicht dieses eine.

13.2.2

Nachrichtenbeiträge schreiben

Nach der Erstellung des Archivs benötigen Sie auf der Beispielsite ein paar Nachrichtenbeiträge, die später auf der Webseite ausgegeben werden. Das Eingabeformular zur Erstellung neuer Nachrichten ist ziemlich lang, weshalb ich es im Folgenden in zwei Schritten vorstelle. Öffnen Sie zunächst das Archiv zur Bearbeitung (gelber Bleistift), und klicken Sie im Arbeitsbereich oben auf Neuer Beitrag. Im ersten Teil des Formulars geht es um Titel, Autor und das Erstellungsdatum der Nachricht (Abbildung 13.3).

Abbildung 13.3 Titel, Autor und Datum der Nachricht eingeben

338

Das Backend-Modul »Nachrichten«: Beiträge erstellen

Der Titel ist die Überschrift der Nachricht. Die Überschriftsebene wird automatisch vergeben. In der Nachrichtenübersicht ist das h2, in der Einzelansicht h1. Der Nachrichtenalias wird in der Regel freigelassen und von Contao automatisch erzeugt. Aus dem Alias wird die URL erstellt, unter der ein einzelner Beitrag permanent abrufbar ist (auch »Permalink« genannt). Der Autor ist standardmäßig der im Backend angemeldete Benutzer. Das Datum ist das Erstellungsdatum des Artikels. Contao gibt das aktuelle Datum vor, aber Sie können es manuell oder mit einem Klick auf den Datumswähler ändern. In welchem Datumsformat das Datum hier ein- und auf der Webseite ausgegeben werden soll, legen Sie in System 폷 Einstellungen fest. Falls die Uhrzeit nicht stimmen sollte, überprüfen Sie ebenfalls in System 폷 Einstellungen im Bereich Datum und Zeit die eingestellte Zeitzone. Europe/Berlin sollte da stehen. Oder Amsterdam. Unterhalb dieser allgemeinen Daten beginnt, wie in Abbildung 13.4 dargestellt, die Erstellung des eigentlichen Beitrags.

Abbildung 13.4 Teasertext und Nachrichtentext für den Beitrag

Die Unterüberschrift wird nur in der Einzelansicht angezeigt und oft einfach freigelassen. Wichtiger sind die beiden Eingabefelder Teasertext und Nachrichten-

339

13.2

13

Die Erweiterung »Nachrichten«

text darunter. Teasertext ist ein einfaches Formularfeld für einen kurzen Anlesetext, der auf der Übersichtsseite angezeigt wird. Der Teasertext ist ein Köder, mit dem der Leser zum Lesen des Beitrags animiert werden soll. Auf der Webseite steht oberhalb des Teasertextes der Titel, und unterhalb folgt ein Link zum »Weiterlesen …«. Der Nachrichtentext ist der Text des Beitrags, den Sie im TinyMCEEditor eingeben und formatieren können. Unterhalb des Editors gibt es noch Optionen zum Hinzufügen eines Bildes und diverser andere Dinge, aber wirklich wichtig sind die Einstellungen im Bereich veröffentlichung. Erst wenn das Kontrollkästchen vor Beitrag veröffentlichen angekreuzt ist, wird der Beitrag auch wirklich auf der Webseite ausgegeben (sofern der Artikel mit dem Modul und die dazugehörige Seite auch veröffentlicht sind). Im folgenden ToDo erstellen Sie die zwei Nachrichtenbeiträge. ToDo: Zwei Nachrichtenbeiträge erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Öffnen Sie das Newsarchiv mit einem Klick auf den gelben Bleistift. 3. Klicken Sie oben im Arbeitsbereich auf Neuer Beitrag, um den ersten Beitrag zu erstellen. 4. Geben Sie den Titel »Der allererste Beitrag« ein. 5. Geben Sie im Feld Teasertext den folgenden Text ein: »Wie fühlt es sich eigentlich an, ein Blindtext zu sein? Man gibt sich Mühe, möglichst interessant zu wirken, und wird trotzdem fast immer einfach ignoriert. Hier der Bericht von einem, der es wissen muss.« 6. Geben Sie als Nachrichtentext etwas Blindtext ein (z. B. aus Abbildung 13.5). 7. Aktivieren Sie das Kontrollkästchen vor Beitrag veröffentlichen. 8. Klicken Sie auf Speichern und neu. 9. Erstellen Sie einen zweiten Beitrag mit dem vielsagenden Titel »Der zweite Beitrag«. 10. Teasertext: »Blindtexte sind keine Blindfische. Einige haben die Zeichen der Zeit begriffen und gemerkt, dass man heute mit nichtssagenden Buchstaben nicht mehr weit kommt. Hier ein Beispiel.« 11. Geben Sie als Nachrichtentext etwas Blindtext ein (z. B. aus Abbildung 13.5). 12. Aktivieren Sie das Kontrollkästchen Beitrag veröffentlichen. 13. Klicken Sie auf Speichern und Schliessen.

Im Backend enthält das Newsarchiv jetzt zwei Beiträge (Abbildung 13.5). Unterhalb der Archiv-Einstellungen sehen Sie den Titel und den Nachrichtentext der zwei Beiträge und rechts am Rand die üblichen Symbole zum Bearbeiten. Der Teasertext erscheint in dieser Übersicht nicht.

340

Beiträge auf den Webseiten ausgeben

Abbildung 13.5 Das Archiv »Newsarchiv« mit zwei Beiträgen

Nur Teasertext = Kein »Weiterlesen ...«-Link Wenn ein Beitrag nur einen Teasertext hat und das Feld Nachrichtentext leer bleibt, wird kein »Weiterlesen …«-Link angezeigt und die Überschrift des Beitrags ist auch nicht anklickbar.

13.3

Beiträge auf den Webseiten ausgeben

In diesem Abschnitt sorgen Sie dafür, dass die beiden Beiträge auf der Seite Nachrichten ausgegeben werden.

13.3.1

Eine neue Seite zur Anzeige eines Beitrags (Einzelansicht)

Sie benötigen zunächst einmal zwei Webseiten: eine für die Übersicht aller Beiträge und eine für die Einzelansicht. Die Seite Nachrichten ist im Seitenbaum bereits vorhanden. Auf dieser Seite wird die Nachrichtenübersicht ausgegeben, eine Liste mit Überschrift, Teaser und ein paar Meta-Informationen wie Datum und Autor.

341

13.3

13

Die Erweiterung »Nachrichten«

Was noch fehlt, ist die zweite Seite, die nach einem Klick auf Weiterlesen … den kompletten Beitrag anzeigt. Diese zweite Seite wird als Unterseite zu Nachrichten angelegt und soll nicht im Menü erscheinen. Außerdem wird sie in den Einstellungen für das Archiv Newsarchiv als Weiterleitungsseite eingetragen. ToDo: Die Seiten zur Ausgabe der Nachrichtenbeiträge vorbereiten 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite als Unterseite zu Nachrichten ein, indem Sie rechts daneben auf den blinkenden, braunen Pfeil nach rechts klicken. 4. Die Seite soll folgende Eigenschaften haben: Seitenname: »Beitrag anzeigen« (ohne Anführungsstriche) Seitenalias: »news« (erscheint später in der URL) 5. Aktivieren Sie Im Menü verstecken im Bereich Experten-Einstellungen. 6. Aktivieren Sie das Kontrollkästchen Seite veröffentlichen. 7. Klicken Sie auf Speichern und Schliessen. 8. Öffnen Sie das Backend-Modul Nachrichten. 9. Öffnen Sie die Einstellungen für das Newsarchiv zur Bearbeitung, indem Sie z. B. mit der rechten Maustaste auf den gelben Bleistift klicken und dann im Kontextmenü mit der linken Maustaste den Befehl Archiv-Einstellungen bearbeiten auswählen. 10. Wählen Sie als Weiterleitungsseite die frisch erstellte Seite Beitrag anzeigen. 11. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo ist zwar noch immer nichts im Frontend zu sehen, aber dafür gibt es im Seitenbaum eine neue, im Menü versteckte Seite (Abbildung 13.6).

Abbildung 13.6 Neue Seite zur Anzeige eines Nachrichtenbeitrags

Der nächste Schritt zur Ausgabe der Nachrichtenbeiträge im Frontend ist die Erstellung der beiden Frontend-Module zur Erzeugung des Quelltextes.

342

Beiträge auf den Webseiten ausgeben

13.3.2 Das Modul »Nachrichten – Teaser anzeigen [Nachrichtenarchiv]« In diesem Abschnitt erstellen Sie das Frontend-Modul zur Ausgabe der Übersicht auf der Seite Nachrichten. Dieses Modul basiert auf dem Modultyp Nachrichtenarchiv, wodurch der Begriff Nachrichtenarchiv je nach Kontext für zwei völlig verschiedene Dinge steht: Er meint entweder die Lagerhalle im Backend-Modul Nachrichten oder ein Frontend-Modul zur Ausgabe von Beiträgen für einen bestimmten Zeitraum. Das im folgenden ToDo erstellte Modul vom Typ Nachrichtenarchiv zeigt die Teaser der Beiträge aus dem Nachrichtenarchiv Newsarchiv im Frontend an. ToDo: Das Modul »Nachrichten – Teaser anzeigen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Erstellen Sie ein Neues Modul mit dem Titel »Nachrichten – Teaser anzeigen« und der h1-Überschrift »Nachrichten«. 3. Wählen Sie als Modultyp aus der Liste Nachrichtenarchiv. 4. Aktivieren Sie im Bereich Nachrichtenarchive das Kontrollkästchen vor Newsarchiv. 5. Wählen Sie in der Liste Kein Zeitraum ausgewählt die Option Alle Beiträge anzeigen. 6. Lassen Sie alle anderen Optionen unverändert. 7. Die elemente pro Seite ist 0, um alle Beiträge aus dem Archiv anzuzeigen. Das Archivformat soll »Monat« sein. 8. Im Bereich Template-Einstellungen sollen die Meta-Felder Datum und Autor aktiviert sein, und Nachrichtentemplate ist das Template news_latest. 9. Klicken Sie auf Speichern und Schliessen.

Das ausgefüllte Eingabeformular sieht kurz vor dem Speichern so aus wie in Abbildung 13.7. Dieses Modul wird etwas weiter unten in einem Artikel in der Hauptspalte der Seite Nachrichten eingebunden. Anzahl der Beiträge pro Seite begrenzen Wenn Sie sehr viele Beiträge haben, können Sie die Anzahl der Elemente pro Seite begrenzen. Contao erstellt dann automatisch eine Paginierung: Unten auf der Seite wird ein div mit der Klasse pagination eingefügt, das einen Absatz mit dem Text »Seite x von y« enthält. Darunter werden in einer ungeordneten Liste anklickbare Hyperlinks bereitstellt, um zu einer bestimmten Seite zu springen.

343

13.3

13

Die Erweiterung »Nachrichten«

Abbildung 13.7 Das Eingabeformular für »Nachrichten – Teaser anzeigen«

13.3.3 Das Modul »Beitrag anzeigen [Nachrichtenleser]« Jetzt fehlt noch ein Modul zur Darstellung des Beitragstextes. Zu diesem Zweck gibt es in Contao den Modultyp Nachrichtenleser. ToDo: Das Modul »Nachrichten – Beitrag anzeigen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Erstellen Sie ein Neues Modul mit dem Titel »Nachrichten – Beitrag anzeigen«. 3. Wählen Sie als Modultyp den Eintrag Nachrichtenleser. 4. Aktivieren Sie bei Nachrichtenarchive das Kontrollkästchen vor Newsarchiv. 5. Im Bereich Template-Einstellungen sollen die Meta-Felder Datum und Autor aktiviert sein. 6. Als Nachrichtentemplate wählen Sie news_full. 7. Klicken Sie auf Speichern und Schliessen.

344

Beiträge auf den Webseiten ausgeben

Das ausgefüllte Eingabeformular sieht kurz vor dem Speichern etwa so aus wie in Abbildung 13.8.

Abbildung 13.8

Die Eingabemaske für »Nachrichten – Beitrag anzeigen«

Die Seiten sind vorhanden, die Module sind erstellt. Jetzt müssen die Module nur noch wissen, wo sie aktiv werden sollen.

13.3.4 Einbinden des Moduls »Nachrichten – Teaser anzeigen« Das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] soll nur auf einer Seite dargestellt werden, und deshalb binden Sie es im folgenden ToDo in einem Artikel auf der Seite ein. ToDo: Artikel für das Modul »Nachrichten – Teaser anzeigen« 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Nachrichten [Hauptspalte] zur Bearbeitung (gelber Bleistift). 3. Löschen Sie bereits vorhandene Inhaltselemente, und erstellen Sie ein Neues Element. 4. Wählen Sie als Elementtyp den Eintrag Modul. Daraufhin erscheint darunter eine Liste der vorhandenen Frontend-Module. 5. Die h1-Überschrift Nachrichten ist bereits im Modul definiert worden.

345

13.3

13

Die Erweiterung »Nachrichten«

ToDo: Artikel für das Modul »Nachrichten – Teaser anzeigen« (Forts.) 6. Wählen Sie aus dieser Liste das Modul Nachrichten – Teaser anzeigen (ID xx). Beachten Sie, dass danach rechts daneben ein gelber Bleistift erscheint, mit dem Sie bei Bedarf das Modul direkt von hier aus konfigurieren können. 7. Vergeben Sie die CSS-Klasse »seitenanfang«. 8. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo gibt es endlich etwas im Browser zu sehen, auch wenn die Darstellung noch nicht perfekt ist (Abbildung 13.9).

Abbildung 13.9

Die Newsübersicht im Frontend – noch ungestaltet

Sie sehen die beiden Nachrichtenbeiträge in umgekehrt chronologischer Reihenfolge. Das hat funktioniert. Datum und Autor sind noch viel zu weit weg von den Überschriften, aber zu sehen ist bereits, dass sowohl die Überschrift als auch Weiterlesen ... anklickbar sind. Ein Klick darauf zeigt allerdings eine leere Seite, da es noch keine Einzelansicht gibt. Die kommt jetzt.

13.3.5 Einbinden des Moduls »Nachrichten – Beitrag anzeigen« Das Modul Nachrichten – Beitrag anzeigen [Nachrichtenleser] zur Ausgabe eines einzelnen Beitrags ist bereits vorhanden, und im folgenden ToDo binden Sie es in einen Artikel auf der Seite Beitrag anzeigen ein.

346

Beiträge auf den Webseiten ausgeben

ToDo: Artikel zur Ausgabe eines einzelnen Beitrags erstellen 1. Öffnen Sie im Backend-Modul Artikel den Artikel Beitrag anzeigen [Hauptspalte] zur Bearbeitung. 2. Erstellen Sie ein neues Inhaltselement vom Typ Modul. 3. Wählen Sie aus der Liste der vorhandenen Module den Eintrag Nachrichten – Beitrag anzeigen (ID xx). Rechts daneben erscheint wieder ein gelber Bleistift, mit dem Sie bei Bedarf das Modul von hier aus konfigurieren können. 4. Vergeben Sie die CSS-Klasse »seitenanfang«. 5. Klicken Sie auf Speichern und Schliessen.

Aus technischer Sicht ist nach diesem ToDo alles in Butter: Die Seite Nachrichten zeigt eine Übersicht aller Nachrichtenbeiträge, und ein Klick auf eine Überschrift oder den Link Weiterlesen … bringt den Besucher zur Einzelansicht eines Beitrags (Abbildung 13.10).

Abbildung 13.10 Ein Beitrag in der Einzelansicht

In der Einzelansicht gelangt man über den Link Zurück oder über den Hauptmenüpunkt Nachrichten wieder zur Übersicht zurück. Bleibt nur noch ein bisschen Gestaltungsarbeit. Der letzte Teil der URL dieses Beitrags sieht übrigens wie folgt aus: 왘

index.php/news/items/der-zweite-beitrag.html

347

13.3

13

Die Erweiterung »Nachrichten«

Diese URL setzt sich der Reihe nach wie folgt zusammen: 왘

index.php ist der eigentliche Name der Seite und nur vorübergehend dabei. Dieses Fragment wird in Abschnitt 18.1, »Lesbare Adressen: URLs umschreiben«, verschwinden.

왘

news ist der Seitenalias der Seite »Beitrag anzeigen« und kann dort ganz einfach geändert werden.

왘

items teilt dem Modul Nachrichtenleser mit, dass er eine bestimmte Nachricht ausgeben soll, und kann nicht so einfach geändert werden.

왘

der-zweite-beitrag ist der Alias des Beitrags Der zweite Beitrag.

왘

.html ist der im Backend-Modul System 폷 Einstellungen definierte URL-Suffix.

Falls die Nachricht nicht existiert, erzeugt das Modul Nachrichtenleser eine Fehlermeldung und die Fehlernummer 404, die Sie mit einer entsprechenden Seite abfangen können (siehe Abschnitt 18.4, »Abfangjäger: 404 und 403«). Die Frontend-Vorschau zeigt auf Wunsch nicht veröffentlichte Beiträge Um einen noch nicht veröffentlichten Beitrag im Frontend sehen zu können, nutzen Sie die Frontend-Vorschau ganz oben im Arbeitsbereich ((Alt) + (f)). Die Frontend-Vorschau zeigt das Frontend als Teil eines Frameset. Im oberen Frame gibt es hellgelb hinterlegt einige Bedienelemente. Wenn Sie in der Liste Unveröffentlichte Elemente den Eintrag anzeigen auswählen und dann auf die Schaltfläche Anwenden klicken, sehen Sie im unteren Frame auch unveröffentlichte Beiträge im Frontend.

13.4

HTML und CSS: Teaser und Beiträge gestalten

Um die Ausgabe der Nachrichtenbeiträge auf den beiden Seiten zu formatieren, werfen Sie zunächst einen Blick auf das HTML und erstellen dann die entsprechenden Styles.

13.4.1 Das HTML des Moduls »Nachrichten – Teaser anzeigen« Das HTML für die News-Übersicht wird vom Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] erzeugt, das dabei zwei Templates benutzt: Das Modultemplate mod_newsarchive.tpl und das Subtemplate news_latest.tpl. Listing 13.1 zeigt die wichtigsten Passagen aus dem Quelltext.

348

HTML und CSS: Teaser und Beiträge gestalten

Listing 13.1

HTML vom Modul »Nachrichten – Teaser anzeigen« (Auszug)

Die indexer-Kommentare am Anfang und am Ende bewirken, dass der Quelltext dazwischen nicht in die Contao-Suchmaschine gelangt. Um doppelte Suchergebnisse zu verhindern, wird standardmäßig nicht der Teasertext indiziert, sondern nur die Einzelansicht eines Beitrags. Umgeben ist die gesamte News-Übersicht von einem div-Element mit der Klasse mod_newsarchive. Der Klassenname für das div der einzelnen Beiträge wird vom zweiten Template abgeleitet und lautet für das Template news_latest.tpl ganz einfach layout_latest. Außerdem bekommt ein Beitrag einige zusätzliche Klassen wie first und even. Die Meta-Informationen zu Datum und Autor stehen in einem eigenen Absatz mit der Klasse info, gefolgt von einer h2-Überschrift mit einem Link, in dem das title-Attribut die Beitragsüberschrift wieder aufgreift, genau wie das unsichtbare span-Element im Weiterlesen …-Link. Hintergrund dieser Maßnahme ist, dass die Links für Screenreader so aussagekräftiger sind. Stände in den Links nur das Wort »Weiterlesen« ohne die Beitragsüberschrift dahinter, wäre nicht klar, was eigentlich weitergelesen werden kann. Der Teasertext steht in einem Absatz mit der Klasse teaser. Der Link zum Weiterlesen … hat ebenfalls einen eigenen Absatz mit der Klasse more. Übersicht der Templates und CSS-Klassen Eine Übersicht über alle Modultypen und Templates finden Sie am Ende dieses Kapitels ab Seite 368.

349

13.4

13

Die Erweiterung »Nachrichten«

13.4.2 Das CSS für das Modul »Nachrichten – Teaser anzeigen« Dieses HTML kann mit dem CSS aus dem folgenden ToDo einfach, aber wirksam gestaltet werden. ToDo: Die Teaser auf der Seite »Nachrichten« per CSS gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende des Stylesheets folgenden Kommentar hinzu: /* ====================================== Nachrichten – Teaser und Beitrag anzeigen ====================================== */

3. Gestalten Sie mit folgendem Style die einzelnen Beiträge: .mod_newsarchive .layout_latest { border-top: 1px dotted #d9d9d9; border-bottom: 1px dotted #d9d9d9; margin: 2em 0 3em 0 }

4. Formatieren Sie die Zeile mit den Meta-Informationen: .mod_newsarchive .info { font-size: 11px; }

5. Gestalten Sie die Beitragsüberschriften und die Links darin mit den folgenden CSSRegeln: .mod_newsarchive h2 { font-size: 18px; line-height: 1; margin-top:0; } .mod_newsarchive h2 a { color: #000; text-decoration: none; }

6. Gestalten Sie falls gewünscht die Unterstreichung der Links: .mod_newsarchive a { text-decoration: none; } .mod_newsarchive a:hover, .mod_newsarchive a:focus { text-decoration: underline; }

7. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Nach diesem ToDo wird die Übersicht auf der Seite Nachrichten ihrem Namen etwas gerechter und wirkt etwas übersichtlicher (Abbildung 13.11).

350

HTML und CSS: Teaser und Beiträge gestalten

Abbildung 13.11 Die formatierten Teaser auf der Seite »Nachrichten«

13.4.3 Das HTML des Moduls »Nachrichten – Beitrag anzeigen« Nach der Formatierung der Teaser kommt jetzt die Einzelansicht an die Reihe, die vom Modul Nachrichten-– Beitrag anzeigen [Nachrichtenleser] erzeugt wird, und zwar von den Templates mod_newsreader und news_full.tpl. Der Quelltext sieht so aus wie der Auszug in Listing 13.2.

Der zweite Beitrag

27.07.2010 20:00 von Kevin Jones

Überall dieselbe alte Leier. [...]

Denn esse est percipi […]

Listing 13.2

Das HTML vom Modul »Nachrichten – Einzelansicht«

351

13.4

13

Die Erweiterung »Nachrichten«

Umgeben ist der Beitrag von einem div mit der Klasse mod_newsreader. Darin befindet sich ein zweites div, dessen Klassenname sich wieder vom zweiten Template ableitet (layout_full) und das außerdem diverse andere nützliche Klassen bekommt, die man bei der Gestaltung auswerten kann. Erwähnenswert ist, dass der Titel des Beitrags in der Einzelausgabe von h2 zu h1 befördert wird. Der Rest des Quelltextes birgt keinerlei Überraschungen.

13.4.4 Das CSS für das Modul »Nachrichten – Beitrag anzeigen« Dieses HTML benötigt im folgenden ToDo nur zwei Styles. ToDo: Einen kompletten Beitrag per CSS gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie nach den CSS-Regeln für die News-Übersicht den folgenden Style zur Gestaltung der Einzelansicht ein: .mod_newsreader .info { font-size: 11px; }

3. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Mit diesem einfachen Style sieht ein einzelner Beitrag im Browser jetzt so aus wie in Abbildung 13.12.

Abbildung 13.12 Ein formatierter News-Beitrag in der Einzelansicht

352

Bilder zu Teasern und Beiträgen hinzufügen

Damit ist das Nachrichtensystem funktionstüchtig, und es geht weiter mit dem Hinzufügen von Bildern. Datum und Autor lieber unterhalb des Beitrags? Um die Meta-Informationen wie Datum und Autor unterhalb des Teasers oder des Beitrags anzuzeigen, müssen Sie die Templates news_latest.tpl bzw. news_full.tpl ändern. Dazu erstellen Sie im Backend-Modul Templates eine Kopie des gewünschten Templates im Ordner blaues_theme (siehe dazu Seite 150 ff.). Um die Meta-Informationen zu verschieben, öffnen Sie die eben erstellte Template-Kopie im Editor und markieren ziemlich am Anfang die folgenden Zeilen:

[diverse PHP-Anweisungen ]

Schneiden Sie diese Zeilen aus, und fügen Sie sie vor dem am Ende des Templates wieder ein. Klicken Sie auf Speichern, und testen Sie den Code im Browser. Falls etwas schiefgeht, löschen Sie einfach das angepasste Template aus dem Ordner blaues_ theme. Contao benutzt dann automatisch wieder das Original aus dem Systemordner.

13.5

Bilder zu Teasern und Beiträgen hinzufügen

Bilder in Nachrichtenbeiträgen funktionieren im Prinzip genauso in Artikeln. Im folgenden ToDo fügen Sie ein Bild zu einem Beitrag hinzu, das dann sowohl im Teaser als auch in der Einzelansicht erscheint. ToDo: Ein Bild zu einem Beitrag hinzufügen 1. Kopieren Sie die Datei lorem_ipsum.jpg von der Buch-DVD in den Ordner beispielsite/ content/bilder. 2. Öffnen Sie im Backend-Modul Nachrichten das Newsarchiv. 3. Öffnen Sie den Beitrag »Der allererste Beitrag« zur Bearbeitung. 4. Aktivieren Sie das Kontrollkästchen Ein Bild Hinzufügen unterhalb des Editorfensters. 5. Wählen Sie die Datei lorem_ipsum.jpg als Quelldatei: Alternativer Text: »Lorem Ipsum« Bildbreite: 150 Bildabstand nach rechts: 10px Grossansicht/Neues Fenster: aktivieren Bildausrichtung: linksbündig 6. Klicken Sie auf Speichern und Schliessen.

353

13.5

13

Die Erweiterung »Nachrichten«

Im Browser erscheint das Bild sowohl in der News-Übersicht im Teaser als auch im kompletten Beitrag (Abbildung 13.13).

Abbildung 13.13 Nachricht mit Bild in der Einzelansicht

Im Teaser erscheinen die im Beitrag hinzugefügten Bilder nur mit dem Template news_latest.tpl. Die anderen für eine Listendarstellung geeigneten Templates, news_short.tpl und news_simple.tpl, stellen in den Teasern standardmäßig keine Bilder dar. Die Größe für das Bild haben Sie im Nachrichtenbeitrag selbst bestimmt, und sie gilt für Einzelansicht und Teaser. Manchmal soll das Bild im Teaser aber etwas kleiner dargestellt werden als in der Einzelansicht, und auch dazu gibt es eine Möglichkeit. Im Backendbereich Themes 폷 Module gibt es in den Einstellungen für das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] ganz unten rechts zwei Felder mit der Beschriftung Bildbreite und Bildhöhe. Ein hier eingegebener Wert gilt für alle von diesem Modul dargestellten Bilder und überschreibt die im Beitrag selbst eingegebene Bildgröße. So wird gewährleistet, dass Bilder in den Teasern immer gleich groß sind. Diese Tatsache nutzen Sie im folgenden ToDo, um das Bild im Teaser kleiner darzustellen als in der Einzelansicht.

354

Bilder zu Teasern und Beiträgen hinzufügen

ToDo: Bildgröße für die Teasertexte definieren 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Öffnen Sie das Modul Nachrichten-– Teaser anzeigen [Nachrichtenarchiv]. 3. Tragen Sie im Feld Bildbreite den Wert 75 ein. Das sind immer Pixel. 4. Klicken Sie auf Speichern und Schliessen.

Mit dieser Einstellung werden alle mit dem Modul Nachrichten – Teaser anzeigen dargestellten Bilder auf eine Breite von 75px verkleinert.

Abbildung 13.14 Ein Teaser mit einem 75px breiten Bild

TinyMCE auch für den Teasertext Der Teasertext wird in einer schlichten Textarea eingegeben. Falls Sie den TinyMCE auch gerne zur Formatierung von Teasertexten benutzen würden, müssen Sie in der Datei system/config/dcaconfig.php folgende Einträge machen (jeweils in einer Zeile): // TinyMCE für Teasertexte auf der Seite Nachrichten $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE');

Diese Änderung ist update-sicher, da die Datei dcaconfig.php bei einem Update von Contao nicht überschrieben wird.

355

13.5

13

Die Erweiterung »Nachrichten«

13.6

Einen Feed zum Abonnieren der Beiträge erstellen

Falls Sie möchten, dass Ihre Besucher die Nachrichtenbeiträge in einem Feedreader abonnieren oder sogar auf einer anderen Webseite einbinden können, genügt in den Einstellungen für das Nachrichtenarchiv ein Klick auf das Kontrollkästchen Feed erstellen.

Abbildung 13.15 Einstellungen für das »Newsarchiv« – Feed erstellen

Contao erzeugt im Hauptordner der Installation eine Datei namens beispielsitecontaobuch-feed.xml. In dieser Datei sind je nach Einstellung die Teasertexte oder die kompletten Beiträge enthalten. Damit der Feed von anderen Browsern und Programmen automatisch erkannt wird, binden Sie ihn im folgenden ToDo ins Seitenlayout ein. Dadurch wird im unsichtbaren -Bereich des Quelltextes ein entsprechendes HTML-Element erzeugt. ToDo: Einen Feed für die Beispielsite erstellen 1. Öffnen Sie das Backend-Modul Nachrichten. 2. Öffnen Sie die Archiv-Einstellungen für das Newsarchiv zur Bearbeitung (rechter Mausklick auf den gelben Bleistift). 3. Aktivieren Sie das Kontrollkästchen Feed erstellen. 4. Wenn Ihnen bei Feed-format die Optionen RSS 2.0 und Atom nicht so viel sagen, lassen Sie die Einstellung RSS 2.0 unverändert. 5. Tragen Sie als Feed-Sprache »de« oder »de_DE« für Deutsch ein. Wenn Sie Ihre Beiträge in einer anderen Sprache verfassen, finden Sie zum Beispiel bei SelfHTML eine Übersicht über die Länderkürzel: http://de.selfhtml.org/diverses/sprachenlaenderkuerzel.htm

356

Einen Feed zum Abonnieren der Beiträge erstellen

ToDo: Einen Feed für die Beispielsite erstellen (Forts.) 6. Wählen Sie bei den Export-Einstellungen, ob der Feed nur Teasertexte oder Komplette Beiträge enthalten soll. 7. Ändern Sie falls gewünscht die Maximale Anzahl an Beiträgen. 8. Die Basis-URL ist in der Regel die URL zum Contao-Hauptordner. 9. Feed-Alias ist der gewünschte Dateiname für die XML-Datei, die Contao erzeugt. Bitte geben Sie nur den Vornamen ein, zum Beispiel »beispielsite-contaobuchfeed«. Die Endung .xml kommt automatisch. 10. Last, but not least können Sie eine kurze Feedbeschreibung eingeben. 11. Klicken Sie auf Speichern und Schliessen. 12. Öffnen Sie in Themes 폷 Seitenlayouts das Standardlayout [Standard] zur Bearbeitung. 13. Aktivieren Sie im Bereich RSS/Atom-Feeds das Kontrollkästchen Newsarchiv. 14. Klicken Sie auf Speichern und Schliessen.

Wenn jetzt ein Besucher mit einem Browser wie dem Firefox auf Ihren Seiten vorbeikommt, erscheint oben rechts in der Adressleiste das orangefarbene RSSSymbol und der Feed kann abonniert werden. Mit den »dynamischen Lesezeichen« (so heißt ein Feed im Firefox) sieht das so aus wie in Abbildung 13.16.

Abbildung 13.16 Der Newsfeed im Firefox

357

13.6

13

Die Erweiterung »Nachrichten«

13.7

Die Kommentarfunktion

Das Web ist ein interaktives Medium, und so gibt es im Nachrichten-Modul von Contao auch eine sehr einfach zu bedienende Kommentarfunktion.

13.7.1

Die Kommentarfunktion aktivieren

Ihren Besuchern eine Kommentierung der Beiträge zu ermöglichen, ist einfacher, als Sie vielleicht denken: Sie müssen lediglich im Backend-Modul Nachrichten in den Einstellungen für das Newsarchiv die Kommentare aktivieren (Abbildung 13.17).

Abbildung 13.17 Kommentare in den Archiv-Einstellungen aktivieren

Die Optionen zur Konfiguration der Kommentarfunktion sind selbsterklärend, und wenn Sie sich im Browser einen Beitrag in der Einzelansicht anschauen, ist das Kommentarformular bereits eingebaut und einsatzbereit (Abbildung 13.18). ToDo: Kommentarfunktion aktivieren 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Klicken Sie rechts auf den gelben Bleistift für das Newsarchiv, und wählen Sie aus dem Kontextmenü Archiv-Einstellungen bearbeiten. 3. Aktivieren Sie das Kontrollkästchen Kommentare aktivieren. 4. Klicken Sie auf Speichern und Schliessen.

Und schon erscheint im Browser unterhalb des Beitrags in der Einzelansicht ein Kommentarformular (Abbildung 13.18). Die Gestaltung des Formulars basiert bis jetzt auf wenigen Styles aus dem Reset-Stylesheet basic.css.

358

Die Kommentarfunktion

Abbildung 13.18

Das Kommentarformular unterhalb des Beitrags

13.7.2 Kommentare schreiben und überprüfen Das Kommentarformular ist wie gesagt bereits betriebsbereit: Pflichtfelder sind mit einem Sternchen gekennzeichnet, und eine Sicherheitsabfrage mit einer Rechenaufgabe für Spammer ist auch mit an Bord. Und es gibt auch schon eine Formularüberprüfung. Wenn ein Besucher nicht alle Pflichtfelder ausfüllt, bekommt er entsprechende Meldungen (Abbildung 13.19), die weiter unten noch ansprechend gestaltet werden.

Abbildung 13.19

Das Formular wird auch bereits überprüft.

359

13.7

13

Die Erweiterung »Nachrichten«

Wenn die Besucher das Formular korrekt ausfüllen, werden die Kommentare zwischen der Überschrift Einen Kommentar schreiben und dem Formular angezeigt (Abbildung 13.20). Falls Sie in den Archiv-Einstellungen die Option Kommentare moderieren aktiviert haben, müssen Sie die Kommentare noch vorher freischalten.

Abbildung 13.20 Kommentare werden unter dem Beitrag gelistet.

13.7.3 Kommentare und Fehlermeldungen gestalten Das Formular ist von der Gestaltung her okay, und so fehlen nur noch ein paar Styles für die Kommentare und die Fehlermeldungen. Zunächst werfen Sie dazu wie immer einen kurzen Blick auf das HTML. Die Darstellung der Kommentare basiert auf dem in Listing 13.3 gezeigten HTML.

Kommentar von Peter | 27.07.2010

Ich finde es toll, dass dieser Blindtext nicht nur Lückenfüller sein will und auf die Webstandards hinweist. Das verdient Unterstützung, die ich hiermit zum Ausdruck bringen möchte.

Listing 13.3

Das HTML zur Auflistung von Kommentaren

Im folgenden ToDo geben Sie diesem HTML eine dezente Formatierung und gestalten auch gleich die Fehlermeldungen, die wie beim Kontaktformular in einem Absatz mit der Klasse error stehen.

360

Die Kommentarfunktion

ToDo: Aufgelistete Kommentare und Fehlermeldungen gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie unterhalb der Gestaltung der Nachrichten folgende Styles zur Formatierung von Meta-Informationen und Kommentaren ein: .ce_comments .info { font-size: 11px; padding: 3px 0 0; border-top: 1px dotted #d9d9d9; } div.comment { border-bottom: 1px dotted #d9d9d9; margin-bottom: 3em; }

3. Fehlermeldungen werden mit der folgenden CSS-Regel hervorgehoben: .ce_comments p.error { background: #FFC0CB; padding: 3px; border: 1px solid #f00; margin-top: 1em; margin-bottom: 0; }

4. Speichern Sie das Stylesheet.

Nach diesem ToDo sieht der Kommentarbereich unterhalb eines Nachrichtenbeitrags ungefähr so aus wie in Abbildung 13.21.

Abbildung 13.21 Der gestaltete Kommentarbereich

361

13.7

13

Die Erweiterung »Nachrichten«

13.7.4 Kommentare im Backend verwalten Die Verwaltung der Kommentare erfolgt im Modul Inhalte 폷 Kommentare. Hier werden alle Kommentare zentral gesammelt (Abbildung 13.22) und können mit den üblichen Symbolen bearbeitet, gelöscht oder deaktiviert werden.

Abbildung 13.22 Kommentarverwaltung im Backend

Anzahl der Kommentare in der Übersicht anzeigen Auf der Seite Nachrichten werden in jedem Teaser Datum und Autor angezeigt. Falls Sie die Kommentarfunktion aktiviert haben und es bereits den einen oder anderen Kommentar gibt, können Sie dort auch die Anzahl der Kommentare anzeigen: Öffnen Sie in Themes 폷 Frontend-Module das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] zur Bearbeitung, und aktivieren Sie im Bereich Meta-Felder das Kontrollkästchen Kommentare. Das war’s. Jetzt wird neben dem Autor die Anzahl der Kommentare pro Beitrag angezeigt. Falls Ihnen die Ausgabe (x Kommentare) nicht gefällt, öffnen Sie system/config/ langconfig.php im Editor und fügen folgende Zeile hinzu: $GLOBALS['TL_LANG']['MSC']['commentCount']

= ' | Kommentare: %s';

Nach dem Speichern erhalten Sie dann: Datum von Autor | Kommentare: x.

362

Navigation: Beiträge monatsweise auswählen

13.8

Navigation: Beiträge monatsweise auswählen

Die Nachrichtenfunktion auf der Beispielsite ist komplett und einsetzbar. Wenn Sie allerdings regelmäßig Beiträge schreiben, wird die Sache irgendwann unübersichtlich, und ältere Beiträge sind für die Besucher schwierig zu finden. In diesem Abschnitt erweitern Sie das bestehende Nachrichtensystem deshalb um die in Abbildung 13.23 in der linken Spalte gezeigte Monatauswahl. Dieses Menü listet automatisch alle Monate auf, in denen Beiträge geschrieben wurden. Ein Klick auf einen bestimmten Monat zeigt dann in der Hauptspalte eine Übersicht der Beiträge aus diesem Monat.

Abbildung 13.23 Das Menü zur Auswahl eines Monats

Für dieses Monatsmenü benötigen Sie ein zusätzliches Frontend-Modul vom Typ Nachrichtenarchiv-Menü. Damit das Monatsmenü in der linken Spalte aber überhaupt ein paar Monate anzeigen kann, erstellen Sie im folgenden ToDo zunächst noch ein paar Beiträge mit einem Datum aus der Vergangenheit. ToDo: Ein paar ältere Beiträge erstellen 1. Öffnen Sie im Backend-Modul Nachrichten das Newsarchiv. 2. Erstellen Sie einige kurze Beiträge. 3. Wichtig ist, dass Sie im Feld Datum zurückliegende Monate eingeben, denn das Monatsmenü zeigt nur Monate, in denen es auch Beiträge gibt. Der Inhalt der Beiträge spielt keine Rolle. 4. Rufen Sie die Seite Nachrichten im Browser auf, und prüfen Sie, ob die neu erstellten Beiträge dort unter den anderen Beiträgen gelistet werden.

363

13.8

13

Die Erweiterung »Nachrichten«

13.8.1 Das Modul »Monat auswählen [Nachrichtenarchiv-Menü]« Auf der Basis des Modultyps Nachrichtenarchiv-Menü erstellen Sie ein Modul namens Monat auswählen, das in der linken Spalte erscheint und alle Monate auflistet, in denen Beiträge geschrieben wurden. Ein Klick in dieser Monatsauswahl übergibt den ausgewählten Monat an die Seite Nachrichten, die bereits ein Modul vom Typ Nachrichtenarchiv enthält, das die Teaser für den ausgewählten Monat auf der Seite darstellt. Dieses Modul ist sehr flexibel: Ist ein Monat ausgewählt, zeigt es die Beiträge aus diesem Monat; ist hingegen kein Monat ausgewählt, listet es alle Beiträge auf. ToDo: Das Modul »Nachrichten – Monat auswählen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Geben Sie als Titel »Nachrichten – Monat auswählen« ein. 4. Wählen Sie als Modultyp den Eintrag Nachrichtenarchiv-Menü. 5. Aktivieren Sie unter Nachrichtenarchive das Newsarchiv. 6. Als Archivformat soll der Eintrag Monat ausgewählt sein. 7. Die Sortierreihenfolge soll absteigend sein, damit die neuesten Monate oben stehen. 8. Weiterleitungsseite ist die Seite Nachrichten. 9. Klicken Sie auf Speichern und Schliessen.

13.8.2 Das Modul »Nachrichten – Monat auswählen« einbinden Das Modul Nachrichten – Monat auswählen soll auf den beiden Seiten Nachrichten und Beitrag anzeigen in der linken Spalte erscheinen. Im folgenden ToDo erstellen Sie dazu ein neues Seitenlayout, das Sie anschließend den beiden Nachrichtenseiten zuweisen. ToDo: Ein Seitenlayout für die Nachrichten erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Erstellen Sie eine Kopie des Standardlayouts, indem Sie rechts daneben auf das grüne Kreuz klicken (zweites Symbol von links). 3. Fügen Sie die Kopie mit einem Klick auf das braune, blinkende Symbol mit dem Pfeil etwas weiter oben ein. 4. Ändern Sie den Titel in »Nachrichten«. 5. Lassen Sie alle anderen Einstellungen unverändert. 6. Suchen Sie im Bereich Frontend-Module die Zeile Navigation – Unternavi in Linke Spalte.

364

Navigation: Beiträge monatsweise auswählen

ToDo: Ein Seitenlayout für die Nachrichten erstellen (Forts.) 7. Ändern Sie diese Zeile, sodass statt der Unternavigation das Modul Nachrichten – Monat auswählen in der linken Spalte eingebunden wird. 8. Klicken Sie auf Speichern und Schliessen.

So weit, so gut. Wenn Sie im Frontend nachschauen, werden Sie sehen, dass Sie noch nichts sehen, denn es fehlt noch eine Klitzekleinigkeit: Die Nachrichtenseiten müssen noch erfahren, dass sie mit dem neuen Seitenlayout gestaltet werden sollen. Im folgenden ToDo weisen Sie der Seite Nachrichten das neue Seitenlayout zu. Die Unterseite Beitrag anzeigen erbt dieses automatisch. ToDo: Das Seitenlayout den Nachrichtenseiten zuweisen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Öffnen Sie die Seite Nachrichten zur Bearbeitung 3. Aktivieren Sie das Kontrollkästchen vor Ein Layout zuweisen. 4. Wählen Sie aus der Liste Seitenlayout den Eintrag Blaues Theme – Nachrichten. 5. Klicken Sie auf Speichern und Schliessen.

Nach diesem Schritt ist auf beiden Seiten alles tutti paletti. Es ist nicht hübsch, aber die Monatauswahl ist vorhanden, und es funktioniert alles.

Abbildung 13.24 Links das Menü und rechts die Beiträge – unformatiert

13.8.3 Das HTML des Moduls »Nachrichten – Monat auswählen« Um mit der Gestaltung der Monatauswahl in der linken Spalte zu beginnen, werfen Sie wie immer zunächst einen Blick auf das HTML. Dort steht eine verschachtelte, ungeordnete Liste, umgeben von einem div mit der Klasse mod_newsmenu (Listing 13.4).

365

13.8

13

Die Erweiterung »Nachrichten«

Listing 13.4

Das HTML für das Monatsmenü in der linken Spalte

Erwähnenswert ist, dass die Jahreszahl zwar in einem Listenelement mit der Klasse year aufbewahrt wird, aber keine Überschrift ist. Die Links in der Hauptspalte sitzen in Listenelementen unterhalb der Liste mit der Klasse level_2.

13.8.4 Das CSS für das Modul »Nachrichten – Monat auswählen« Dieses HTML können Sie zum Beispiel mit dem CSS aus dem folgenden ToDo gestalten. Da das Monatsmenü in gewisser Weise mit zur Navigation zählt, werden die Styles im folgenden ToDo im Navigationsstylesheet gespeichert. Die Gestaltung orientiert sich am vertikalen Untermenü auf den anderen Seiten. ToDo: Das Monatsmenü gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie am Ende des Stylesheets unterhalb der Gestaltung für die Metanavigation folgenden Kommentar ein: /* ====================================== Nachrichten – Monat auswählen ====================================== */

366

Navigation: Beiträge monatsweise auswählen

ToDo: Das Monatsmenü gestalten (Forts.) 3. Das umgebende div-Element wird nach links gefloatet, und die Listenpunkte sollen keine Aufzählungszeichen haben: #left div.mod_newsmenu { float: left; width: 142px; font-size: 12px; margin: 0; } #left .mod_newsmenu li { list-style-type: none; margin: 0; }

4. Die Jahreszahl soll etwas größer und fett sein. Diese Angaben müssen wegen der Vererbung für die innere Liste zurückgesetzt werden, die außerdem auch noch ein margin-top für den Abstand zur Jahreszahl bekommt: #left .mod_newsmenu li.year { font-size: 14px; font-weight: bold; padding: 0 0 1em 0; } #left .mod_newsmenu .level_2 { font-size: 12px; font-weight: normal; margin: 1em 0 0 0; }

5. Zum Schluss werden noch die Links und die aktiven Menüpunkte gestaltet: #left .mod_newsmenu a, #left .mod_newsmenu span { display: block; text-decoration: none; background-color: #ADCBE6; color: #000; padding: 9px; border-top: 1px solid #fff; } #left .mod_newsmenu a:hover, #left .mod_newsmenu a:focus { background: #2D5B85; color: #fff; } #left .mod_newsmenu span.active { background: #2D5B85; color: #fff; }

6. Speichern Sie das Stylesheet.

367

13.8

13

Die Erweiterung »Nachrichten«

Mit diesem Styling sieht das Monatsmenü etwas ansprechender aus, wie Abbildung 13.25 zeigt.

Abbildung 13.25 Die fertig gestaltete Nachrichtenabteilung

Die Nachrichtenabteilung ist voll funktionsfähig: Es gibt eine Übersicht aktueller Nachrichten mit Überschrift und Teaser, eine Einzelansicht für die kompletten Beiträge und ein Menü zur Auswahl bestimmter Monate.

13.9

Übersicht: Nachrichten, Modultypen und Templates

In diesem Kapitel haben Sie für die Erweiterung Nachrichten bereits einige Modultypen und Templates kennengelernt, aber es gibt noch mehr. Contao stellt insgesamt vier Modultypen, sieben Modultemplates, vier Subtemplates und jede Menge CSS-Klassen zur Verfügung. Sie haben also die Qual der Wahl, weswegen die folgende Übersicht Ihnen die Auswahl ein bisschen erleichtern soll.

13.9.1 Die Modultypen und die Modultemplates »mod_news*.tpl« Zur Darstellung von Teasern und Beiträgen gibt es vier verschiedene Modultypen, deren Darstellung auf bestimmten Templates beruht. Diese Modultemplates werden im Contao-Handbuch auch Views genannt und haben Namen, die mit dem Kürzel mod_news beginnen und mit .tpl enden. Contao weist den Modulen automatisch das richtige Modultemplate zu. Tabelle 13.1 zeigt eine Übersicht von Modultypen, zugehörigen Modultemplates und den entsprechenden CSS-Klassen:

368

Übersicht: Nachrichten, Modultypen und Templates

Modultyp

Modultemplates

CSS-Klasse

Nachrichtenarchiv

mod_newsarchive.tpl mod_newsarchive_empty.tpl

mod_newsarchive

Nachrichtenleser

mod_newsreader.tpl

mod_newsreader

Nachrichtenarchivmenü

mod_newsmenu.tpl mod_newsmenu_year.tpl mod_newsmenu_day.tpl

mod_newsmenu mod_newsmenu table.minicalendar

Nachrichtenliste

mod_newslist.tpl

mod_newslist

Tabelle 13.1

Übersicht über Modultypen, Modultemplates und CSS-Klassen

Der Modultyp Nachrichtenarchiv wird benutzt, um eine Liste von Teasern mit weiterführenden Links auszugeben. Ein Klick auf einen weiterführenden Link übergibt den ausgewählten Beitrag an eine Weiterleitungsseite, auf der ein Modul vom Typ Nachrichtenleser vorhanden sein muss. Dieser Nachrichtenleser stellt immer nur den Beitragstext dar. Der Modultyp Nachrichtenarchivmenü stellt ein Menü bereit, mit dem die Beiträge für einen Tag, einen Monat oder ein Jahr aufgerufen werden können. Bei einem Klick auf einen Menüpunkt wird der ausgewählte Zeitraum an eine Weiterleitungsseite übergeben, die ein Modul vom Typ Nachrichtenarchiv enthalten sollte. Eine kleine Besonderheit ist übrigens das Nachrichtenarchivmenü für einen Tag, denn im Gegensatz zu Monats- und Jahresarchiven wird dabei zur Darstellung des Menüs keine verschachtelte Liste benutzt, sondern ein Minikalender, den Sie im Kapitel über die Kalender-Erweiterung Events noch kennenlernen. Der Modultyp »Nachrichtenleser« Der Nachrichtenleser ist in vielerlei Hinsicht identisch mit dem Nachrichtenarchiv. Bei der Gestaltung der Startseite folgt ein Beispiel für den Einsatz der Nachrichtenliste (siehe Abschnitt 16.2, »Inhalt für die Hauptspalte: Newsbeiträge und Termine«).

13.9.2 Die vier Subtemplates »news_*.tpl« Außer den sieben Modultemplates gibt es noch vier Subtemplates, die für die Gestaltung der einzelnen Beiträge zuständig sind. Im Gegensatz zu den Modultemplates, die Contao automatisch zuweist, können die Subtemplates vom Benutzer ausgewählt werden. Die vier Subtemplates werden im Contao-Handbuch als Partials bezeichnet und heißen news_*.tpl.

369

13.9

13

Die Erweiterung »Nachrichten«

Tabelle 13.2 gibt einen Überblick über die Eigenschaften der Subtemplates: news_full.tpl

news_latest.tpl

news_short.tpl

news_simple.tpl

Meta-Infos

ja

ja

ja

nur Datum

Titel...

als Text

als Link

als Link

als Link

Unterüberschrift

ja

–

–

–

Teasertext

ja

ja

ja

–

»Weiterlesen…«

–

ja

ja

ja

Nachrichtentext

ja

–

–

–

Bild

ja

ja

–

–

Modultyp

Nachrichtenleser

Nachrichtenarchiv und -liste

CSS-Klasse

layout_full

layout_latest

Tabelle 13.2

layout_short

layout_simple

Die Eigenschaften der vier Subtemplates in der Übersicht

Eine Anmerkung zur Tabelle noch: Natürlich können Sie news_full.tpl auch für die Ausgabe der Modultypen Nachrichtenliste und Nachrichtenarchiv einsetzen, aber dann werden die Beitragstexte ausgegeben und nicht die Teaser. Contao als vollwertiger Blog? Die Nachrichten-Erweiterung von Contao kann durchaus als einfacher Blog eingesetzt werden, aber zu einem vollwertigen Blog fehlen viele Funktionen wie Kategorisierung, Pingbacks und dergleichen mehr. Zum Teil können diese Funktionen mit Erweiterungen wie z. B. [tags], [tags_news] oder [pingback] nachgerüstet werden, und es wird bestimmt noch weitere Erweiterungen zum Bloggen geben, aber Contao konzentriert sich von Haus aus eher auf eine seitenbasierte Struktur.

370

In diesem Kapitel erstellen Sie für die Beispielsite eine Terminverwaltung und eine Liste häufig gestellter Fragen nebst deren Antworten.

14

Die Erweiterungen »Kalender« und »FAQ«

Eine Navigation, Inhalte, Formulare sowie eine Suchfunktion benötigt so ziemlich jede Website, und auch eine chronologisch umgekehrt sortierte Seite mit aktuellen Meldungen ist weit verbreitet. Kalender und FAQ hingegen sind ebenfalls sehr nützliche Funktionen, werden aber wohl nicht auf jeder Site benötigt. Nichtsdestotrotz werden diese Erweiterungen im Folgenden kurz vorgestellt. Nicht benötigte Backend-Module können Sie deaktivieren Wenn Sie für Ihre Site das eine oder andere Backend-Modul nicht benötigen, können Sie es in System 폷 Einstellungen im Bereich Inaktive Erweiterungen deaktivieren. Inaktive Module werden von Contao nicht geladen und darum im Navigationsbereich auch nicht mehr angezeigt. Dadurch schlagen Sie gleich zwei Fliegen mit einer Klappe: Contao wird noch ein bisschen schneller, und der Navigationsbereich wirkt aufgeräumter.

14.1

Die Erweiterung »Kalender«: Termine verwalten

Die Kalender-Erweiterung besteht aus dem Backend-Modul Events, vier Frontend-Modulen und diversen Modul- und Subtemplates. Ein Event ist wörtlich genommen ein »Ereignis« oder eine »Veranstaltung«, wird aber auch synonym mit Termin gebraucht. Die Kalender-Erweiterung bietet also eine Terminverwaltung und dient dazu, für Benutzer der Website relevante Termine im Backend an einer Stelle zu sammeln und dann in verschiedenster Form im Frontend wieder auszugeben. Das kann ein großer Kalender sein, ein Mini-Kalender, eine Terminliste oder auch die Detailansicht eines einzigen Termins. In diesem Abschnitt lernen Sie den großen Kalender und die Detailansicht kennen.

371

14

Die Erweiterungen »Kalender« und »FAQ«

14.1.1

Die Erweiterung »Kalender« in der Übersicht

Eine schöne Sache an Contao ist, dass die Bedienkonzepte durchgehend konsistent aufgebaut sind. Wenn Sie wissen, wie das Nachrichtenmodul funktioniert, wird Ihnen der Umgang mit Events und FAQ keine Schwierigkeiten bereiten. Daher sind die Beschreibungen in diesem Kapitel etwas gestraffter, und es gibt nicht für jeden Teilschritt ein ToDo. Das Ziel dieses Abschnitts ist es, auf der Seite Kalender einen Kalender mit den im Backend-Modul Events eingegebenen Terminen auszugeben. Die Termine im Kalender sind anklickbar, und ein Klick auf einen Termin zeigt diesen in der Detailansicht (Abbildung 14.1).

Abbildung 14.1 Ein Kalender und die Einzelansicht eines Termins

Die Erweiterung Kalender funktioniert wie gesagt im Prinzip genauso wie die in Kapitel 13 beschriebene Nachrichten-Erweiterung. Bei beiden gibt es im Backendbereich Inhalte eine Lagerhalle zum Erstellen und Verwalten von Einträgen. Bei der Nachrichten-Erweiterung ist das ein Archiv mit Beiträgen, bei der Kalender-Erweiterung ein Kalender mit einzelnen Events (d. h. Terminen). Die im Kalender gespeicherten Events werden mit dem treffend benannten Modultyp Kalender im Frontend als Hyperlinks in einer Kalenderansicht ausgegeben. Wenn Sie im Kalender auf einen Event klicken, ruft Contao eine Weiterleitungsseite mit dem Modultyp Eventleser auf, das einen einzelnen Event in der Detailansicht zeigt wie in der Nachrichten-Erweiterung bei Teasern und Beiträgen. Um auf Ihrer Website eine Terminverwaltung mit Kalender und Detailansicht anzulegen, müssen Sie vier Backend-Module in der richtigen Reihenfolge besuchen, dort jeweils ein, zwei Dinge erledigen, und schon sind Sie fertig.

372

Die Erweiterung »Kalender«: Termine verwalten

Schritt 1: Seite erstellen in »Layout 폷 Seitenstruktur« Im Backend-Modul Layout 폷 Seitenstruktur benötigen Sie nur zwei Seiten. Auf der bereits vorhandenen Seite Erweiterungen > Kalender wird der Kalender dargestellt, und auf der im Menü versteckten Unterseite Termin anzeigen, die im folgenden ToDo erstellt wird, erscheinen die einzelnen Termine. ToDo: Die Seite »Termin anzeigen« erstellen 1. Öffnen Sie das Backend-Modul Layout 폷 Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite als Unterseite zur Seite »Kalender« ein, indem Sie am Ende der Zeile auf den braunen, blinkenden Pfeil nach rechts klicken. 4. Der Seitenname ist »Termin anzeigen«. 5. Aktivieren Sie Im Menü verstecken und Seite veröffentlichen. 6. Klicken Sie auf Speichern und Schliessen.

Die benötigten Seiten existieren nun. Jetzt wird im nächsten Schritt ein Kalender mit ein paar Events erstellt. Schritt 2: Kalender erstellen in »Inhalte 폷 Events« Im Backend-Modul Events erstellen Sie einen neuen Kalender mit dem Namen Terminkalender, in dem die Events erstellt und verwaltet werden. ToDo: Den Kalender »Terminkalender« erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Events. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Kalender. 3. Der Titel ist »Terminkalender«. 4. Als Weiterleitungsseite tragen Sie die in diesem Kapitel erstellte und im Menü versteckte Unterseite Termin anzeigen ein. 5. Klicken Sie auf Speichern und Schliessen.

Schritt 3: Events erstellen im Kalender Die Erstellung eines Kalenders funktioniert ähnlich wie die eines Nachrichtenarchivs, aber beim Eingeben eines neuen Events im Backend-Modul Inhalte 폷 Events gibt es ein paar erwähnenswerte Unterschiede. Anders als ein Newsbeitrag ist ein Event nicht immer an eine bestimmte Uhrzeit gebunden. Wer möchte, kann auch eine Zeit hinzufügen, aber ein Event hat auf jeden Fall ein Startdatum. Bei mehrtägigen Events kann man auch noch ein Enddatum angeben. Teaser bleiben beim Kalendersystem in diesem Kapitel leer.

373

14.1

14

Die Erweiterungen »Kalender« und »FAQ«

Abbildung 14.2 Das Eingabeformular zur Erstellung von Events, Teil 1

Der Event-Text ist der Text, der später in der Einzelansicht angezeigt wird. Hier können Sie auch Ein Bild hinzufügen, genau wie bei Artikeln und Nachrichtenbeiträgen. So viel zum ersten Teil des Eingabeformulars. Abbildung 14.3 zeigt unteren Teil. Anders als beim Fernsehprogramm sind Wiederholungen bei Events eher angenehm. Mit der Option Event wiederholen können Sie ein wiederkehrendes Event erstellen und die Wiederholung auch gleich fest einplanen. Im Feld Intervall legen Sie fest, in welchen Abständen der Termin wiederholt wird; bei Wiederholungen tragen Sie deren Anzahl ein. Anlagen zu einem Event sind Dateien, die in der Detailansicht des Termins (Modultyp Eventleser) zum Download angeboten und in einem RSS-Feed als Enclosures (engl. für »Anlagen«) verlinkt werden werden.

374

Die Erweiterung »Kalender«: Termine verwalten

Abbildung 14.3 Das Eingabeformular zur Erstellung von Events, Teil 2

Sehr nützlich kann bei Events auch eine Änderung des Weiterleitungsziels sein. Hier legen Sie fest, welche Seite bei einem Klick auf den Termin im Kalender aufgerufen werden soll. Standardmäßig ist das die in den Kalender-Einstellungen festgelegte Weiterleitungsseite, aber Sie können hier auch eine interne Seite, einen bestimmten Artikel oder eine externe Seite als Weiterleitungsziel festlegen. So kann ein Klick auf einen Kalendereintrag zum Beispiel direkt auf den Artikel oder die Seite zu einem bestimmten Produkt oder zu einer bestimmten Veranstaltung führen. ToDo: Ein paar Events erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Events. 2. Öffnen Sie den Terminkalender zur Bearbeitung, und erstellen Sie ein Event nach folgendem Muster: Titel: »Das erste Event« Startdatum: ... (Am besten mit dem Datumspicker) Event-Text: Ein bisschen Blindtext Ihrer Wahl 3. Vergessen Sie nicht, den Event zu veröffentlichen. 4. Sie können gerne auch experimentieren und einen Zeitraum angeben, mehrere Events pro Tag speichern oder mehrtägige Events erstellen.

375

14.1

14

Die Erweiterungen »Kalender« und »FAQ«

Schritt 4: »Layout 폷 Themes 폷 Frontend-Module« In diesem Schritt erstellen Sie beiden Frontend-Module, die das HTML für den Kalender und einen einzelnen Termin erzeugen. Das Modul für den Kalender heißt Events – Kalender anzeigen [Kalender]; die Woche beginnt am Montag; und die Weiterleitungsseite heißt Termin anzeigen. Für die Einzelansicht erstellen Sie das Modul Events – Termin anzeigen [Eventleser]. ToDo: Zwei Module zur Ausgabe der Events erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Frontend-Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Der Titel ist »Events – Kalender anzeigen«. 4. Wählen Sie aus der Liste Modultyp den Eintrag »Kalender«. 5. Aktivieren Sie den Kalender Terminkalender. 6. Erster Wochentag ist bei uns in der Regel Montag. 7. Als Weiterleitungsseite tragen Sie die in diesem Kapitel erstellte und im Menü versteckte Unterseite Termin anzeigen ein. 8. Klicken Sie auf Speichern und neu. 9. Der Titel des zweiten Moduls ist »Events – Termin anzeigen«. 10. Wählen Sie aus der Liste Modultyp den Eintrag »Eventleser«. 11. Aktivieren Sie den Kalender Terminkalender. 12. Das Event-Template ist »event_full« zur Darstellung des ganzen Events. 13. Klicken Sie auf Speichern und Schliessen.

Jetzt fehlt nur noch wie immer die Einbindung dieser Frontend-Module. Schritt 5: Frontend-Module einbinden in »Inhalte 폷 Artikel« Auf der Seite Kalender binden Sie in dem gleichnamigen Artikel das Modul Events – Kalender anzeigen (ID xx) ein. Im Artikel auf der Unterseite Termin anzeigen binden Sie das Modul Events – Termin anzeigen (ID xx) ein. ToDo: Frontend-Module in Artikeln einbinden 1. Öffnen Sie das Backend-Modul Inhalte 폷 Artikel. 2. Öffnen Sie im Artikelbaum den Artikel Kalender [Hauptspalte] (gelber Bleistift). 3. Falls noch keine h1-Überschrift »Kalender« vorhanden ist, erstellen Sie bitte eine, und zwar mit der CSS-Klasse »seitenanfang«. 4. Fügen Sie darunter ein Inhaltselement vom Typ Modul ein. 5. Wählen Sie aus der Liste Modul den Eintrag Events – Kalender anzeigen (ID xx).

376

Einen Kalender gestalten

ToDo: Frontend-Module in Artikeln einbinden (Forts.) 6.

Klicken Sie auf Speichern und Schliessen.

7. Öffnen Sie im Artikelbaum den Artikel Termin anzeigen [Hauptspalte]. 8. Fügen Sie ein Inhaltselement vom Typ Modul ein. 9. Wählen Sie aus der Liste Modul den Eintrag Events – Termin anzeigen (ID xx). 10. Geben Sie dem Inhaltselement die CSS-Klasse »seitenanfang«. 11. Klicken Sie auf Speichern und Schliessen.

Fertig. Schon haben Sie eine einfache Terminverwaltung. Sie sieht zwar noch nicht genauso aus wie in Abbildung 14.4, aber sie funktioniert bereits.

Abbildung 14.4 Der ungestaltete, aber funktionierende Kalender

14.2

Einen Kalender gestalten

Der Kalender funktioniert bereits, wird aber jetzt noch ein wenig gestaltet. Dazu werfen Sie wie immer zunächst einen Blick auf das HTML.

14.2.1

Das HTML vom Frontend-Modul »Kalender«

Das HTML für einen Kalender wird vom Modul cal_default.tpl erzeugt und kann dort bei Bedarf auch angepasst werden. Umgeben von einem div mit der Klasse mod_calendar, ist der eigentliche Kalender eine HTML-Tabelle mit einem Kopfbereich (thead) und einem Textbereich (tbody).

377

14.2

14

Die Erweiterungen »Kalender« und »FAQ«

Listing 14.2 zeigt zunächst den Kopfbereich des Kalenders.

Listing 14.1

Der Kopfbereich des Kalenders

In der ersten Zeile des Kopfbereichs stehen drei Monatsnamen (th.head). Der aktuelle Monat steht in der Mitte (current), der vorherige als Link ganz links (previous) und der folgende Monat rechts außen (next). In der zweiten Zeile werden die Wochentage aufgelistet (th.label). Das Wochenende ist besonders gekennzeichnet (weekend), um bei der Gestaltung per CSS genügend Ansatzpunkte zu haben. Listing 14.2 zeigt den Textbereich der Tabelle in .

Zurück

E-Mail-Adresse





E-Mail-Adresse



{{link::anmelden}}

Angemeldet als: {{user::username}} | {{link::abmelden}}

Anmeldung

Benutzername
Passwort

Angemeldet bleiben



150