Wissen, wie’s geht.

Leseprobe

Mit Contao können Sie umfangreiche Websites gestalten, die sowohl am Desktop als auch mobil eine gute Figur machen. Peter Müller führt Sie in die Grundlagen ein und erstellt mit Ihnen in dieser Lese- probe eine erste Website. Außerdem können Sie einen Blick in das vollständige Inhalts- und Stichwortverzeichnis des Buches werfen.

»Ein Rundgang im Backend« »Die ersten Schritte zur Website« »Contao und CSS«

Inhalt

Index

Der Autor

Leseprobe weiterempfehlen

Peter Müller Contao – Das umfassende Handbuch 803 Seiten, gebunden, mit CD, 4. Auflage 2014 39,90 Euro, ISBN 978-3-8362-3016-2

www.galileo-press.de/3682 Kapitel 5 Ein kurzer Rundgang im Backend

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

Die Themen im Überblick: ̈ Überblick: die wichtigsten Bereiche im Backend, Seite 125 ̈ Das Backend-Modul »System • Einstellungen«, Seite 131 ̈ Der Dateimanager: »System • Dateiverwaltung«, Seite 134 ̈ Der Erweiterungskatalog, Seite 140

Das Backend ist der Administrationsbereich von Contao. Bevor Sie im nächsten Kapi- tel beginnen, die erste eigene Site mit Contao zu erstellen, möchte ich Ihnen zu- nächst das Backend kurz vorstellen.

5.1 Überblick: die wichtigsten Bereiche im Backend

Rufen Sie im Browser das Backend von Contao für die noch leere Beispielsite im Ord- ner contaobuch auf: ̈ localhost/contaobuch/contao

Wenn Sie mit MAMP arbeiten, ergänzen Sie gegebenenfalls wie immer die Portnum- mer 8888. Nach einer Anmeldung als Administrator sieht das Backend so aus wie in Abbil- dung 5.1.

125 5 Ein kurzer Rundgang im Backend 5.1 Überblick: die wichtigsten Bereiche im Backend

̈ Benutzer zeigt, welcher Benutzer gerade angemeldet ist. Ein Klick darauf öffnet den Bereich Persönliche Daten, der gleich im Anschluss genauer erklärt wird. ̈ Frontend-Vorschau öffnet das Frontend in einem neuen Tab oder Browser- fenster. Die Frontend-Vorschau ist besonders nützlich, wenn Sie später mit ver- schiedenen Benutzern oder unveröffentlichten Elementen arbeiten. ̈ Startseite führt immer zurück zur Startseite im Backend. ̈ Mit einem Klick auf Abmelden können Sie – ja, genau das.

Nach einem Klick auf den Link Benutzer sehen Sie das Dialogfeld Persönliche Da- ten aus Abbildung 5.3. In diesem Formular kann der gerade angemeldete Benutzer seine persönlichen Daten wie Name (den vollständigen, nicht den Benutzernamen), E-Mail-Adresse und Passwort ändern. Außerdem kann er hier auch die Backend- Einstellungen wie z. B. die im Backend verwendete Sprache festlegen und den Abbildung 5.1 Das Backend nach einer Anmeldung als Administrator Cache leeren. Im Bereich Backend-Theme gibt es neben dem Backendmotiv default, das stan- Falls Sie von zwei rot hinterlegten Meldungen begrüßt werden, sollten Sie zunächst dardmäßig aktiv ist, auch noch die Option flexible, bei dem sich das Backend der Brei- Den Cache aufbauen sowie den Wartungsmodus Deaktivieren, indem Sie auf die te des Browserfensters anpasst. Damit kann man mit dem Backend auch auf kleine- entsprechenden Schaltflächen klicken. ren Bildschirmen gut arbeiten. Das Backend ist sehr übersichtlich und in drei große Bereiche eingeteilt: 1 Der Infobereich (oben) enthält die Benutzereinstellungen, eine Frontend-Vor- schau, einen Link zur Backend-Startseite und die Abmeldung. 2 Der Navigationsbereich (links) enthält nach der Installation von Contao vier Grup- pen mit Backend-Modulen, die weiter hinten in diesem Kapitel kurz vorgestellt werden. 3 Der Arbeitsbereich (rechts) zeigt jeweils Detailinformationen zum ausgewählten Backend-Modul, das im Navigationsbereich grün hervorgehoben wird.

Diese drei Bereiche werden im Folgenden kurz vorgestellt.

5.1.1 Ganz oben im Backend: der Infobereich Der Infobereich oben im Backend ist recht schmal und nicht besonders auffällig. Er enthält aber einige nützliche Links (siehe Abbildung 5.2).

Abbildung 5.2 Der Infobereich im Backend

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

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

126 127 5 Ein kurzer Rundgang im Backend 5.1 Überblick: die wichtigsten Bereiche im Backend

Ganz unten in Abbildung 5.3 gibt es zwei Schaltflächen zum Speichern: ̈ Speichern speichert die aktuellen Einstellungen in der Datenbank, lässt das For- mular aber geöffnet. ̈ Speichern und schliessen macht genau das, was draufsteht.

Ganz oben in Abbildung 5.3 sehen Sie übrigens einen großen grünen Pfeil und dahin- Abbildung 5.4 Die Backend-Module sind in Gruppen unterteilt. ter eine eindeutige fortlaufende Nummer, die ID des gerade bearbeiteten Datensat- zes. Eine ähnliche Mitteilung werden Sie des Öfteren sehen, denn in Contao ist im Nicht im Bild ist die Gruppe Entwicklertools, die Sie in diesem Buch nicht benöti- Grunde alles ein Datensatz, egal, ob Benutzer, Seite, Artikel oder Inhaltselement, und gen werden. Wenn Sie später Erweiterungen von Drittanbietern installieren, fügen jeder Datensatz hat eine ID. diese auch oft neue Backend-Module oder ganze Gruppen von Backend-Modulen hinzu. Dann kann es im Navigationsbereich auch mehr als die momentan vorhande- Der Aufbau des Arbeitsbereichs nen Gruppen geben. Der übersichtliche, zweispaltige Aufbau des Arbeitsbereichs ist typisch für Contao. Die einzelnen Rubriken können Sie mit einem Klick auf die grüne Überschrift ein- und aus- blenden. Contao merkt sich diese Einstellungen – und zwar pro Benutzer. 5.1.3 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 Ar- 5.1.2 Links: der Navigationsbereich (Backend-Module) beit. Hier werden Sie einen Großteil Ihrer Zeit verbringen. Der Navigationsbereich enthält die Backend-Module. Sie bilden die Summe aller Auf der Startseite enthält der Bereich Backend-Tastaturkürzel einen Link, der in Funktionen, die Contao Ihnen zum Erstellen und Pflegen Ihrer Website bereitstellt, einem neuen Tab oder Browserfenster eine Übersicht der wichtigsten Tastenkürzel und werden hier in die folgenden Kategorien einsortiert: auflistet. ̈ Inhalte: In dieser Kategorie befinden sich alle Backend-Module, die Inhalt für die Mausfans dürfen natürlich auch weiterhin gern auf die entsprechenden Links und Webseiten erzeugen: Artikel, Nachrichten und einiges mehr. Schaltflächen klicken, aber die Tastenkürzel sind eine echte Arbeitserleichterung. ̈ Layout: Die Backend-Module in dieser Kategorie haben mit der Struktur und dem Tabelle 5.1 zeigt eine kleine Übersicht der nützlichsten Kürzel. Aussehen der Site zu tun. ̈ Benutzerverwaltung: Contao unterscheidet Mitglieder (Frontend-Benutzer) Windows Mac Aktion und Benutzer (Backend-Benutzer). (Alt) + (S) (ctrl) + (alt) + (S) Speichern ̈ System: Hier finden Sie diverse Module zur Konfiguration und Wartung der Con- (Alt) + (C) (ctrl) + (alt) + (C) Speichern und schließen (Close) tao-Installation. (Alt) + (E) (ctrl) + (alt) + (E) Speichern und bearbeiten (Edit) Mit einem Klick auf das Minus- bzw. Pluszeichen vor dem Namen der Gruppe kön- nen Sie die Module darunter aus- und einblenden. Das jeweils ausgewählte Backend- (Alt) + (N) (ctrl) + (alt) + (N) Neues Element Modul wird hellgrün hervorgehoben. (Alt) + (B) (ctrl) + (alt) + (B) Zurück (Back) In Abbildung 5.4 ist die Gruppe Layout ausgeklappt, und darin wurde das Modul Sei- (Alt) + (T) (ctrl) + (alt) + (T) Nach oben (Top) tenstruktur aktiviert, das in hellgrüner Schrift dargestellt wird. Die einzelnen Backend-Module lernen Sie im weiteren Verlauf des Buches nach und nach kennen. (Alt) + (F) (ctrl) + (alt) + (F) Frontend-Vorschau

(Alt) + (Q) (ctrl) + (alt) + (Q) Abmelden (Quit)

Tabelle 5.1 Die wichtigsten Tastenkürzel bei der Arbeit im Backend

128 129 5 Ein kurzer Rundgang im Backend 5.2 Das Backend-Modul »System • Einstellungen«

Je nach Browser und Betriebssystem können diese Kürzel etwas abweichen, und Sie 5.2 Das Backend-Modul »System • Einstellungen« müssen einfach ein paar Varianten ausprobieren. In Chrome (und in Firefox) unter System Einstellungen Windows müssen Sie zum Beispiel statt nur (Alt) gleichzeitig (Alt) + (ª) drücken Im Backend-Modul • werden die wichtigsten Systemeinstel- und gedrückt halten, da (Alt) unter Windows für den Aufruf der Menüleiste reser- lungen vorgenommen. Auch hier können Sie mit einem Klick auf den grünen Titel viert ist. die einzelnen Rubriken ein- und ausblenden. In diesem Kapitel lernen Sie erst einmal die allerwichtigsten Bereiche kennen. Probieren Sie es einfach einmal aus: ̈ Rufen Sie oben im Infobereich die Option Benutzer: k.jones auf. 5.2.1 Der »Titel der Webseite« ̈ Speichern und schliessen Sie die Eingabemaske per Tastatur. Gleich die allererste Option heißt Titel der Webseite (siehe Abbildung 5.5), womit Nacheinander gedrückt, dient die Kombination (Alt) + (ª) (links) unter Windows die gesamte Website gemeint ist und nicht eine einzelne Seite. Genau genommen, übrigens zum Wechseln zwischen installierten Tastaturlayouts (Englisch, Deutsch, gelten die in diesem Bereich gemachten Einstellungen nicht nur für eine Website, Niederländisch etc.). Wenn Ihre Tastatur also plötzlich keine Umlaute ausgibt und sondern für die gesamte Contao-Installation. »y« und »z« vertauscht sind, drücken Sie einfach noch ein- oder zweimal (Alt) + (ª). Da Contao in einer Installation mehrere Websites verwalten kann, können Sie die Mit einem kleinen Trick können Sie den Firefox (Win) dazu bringen, dass er die Kür- hier gemachten Einstellungen bei Bedarf für jede Website im sogenannten Start- zel im Backend von Contao nur mit (Alt) versteht: punkt (engl. Root Page) überschreiben. Was genau ein solcher Startpunkt ist, erfahren ̈ Geben Sie in Firefox in der Adresszeile »about:config« ein. Sie im nächsten Kapitel bei der Erstellung der ersten Website mit Contao. ̈ 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 diese Zeichen enthalten. ̈ Doppelklicken Sie in der Zeile ui.key.chromeAccess auf den Wert, und ändern Sie ihn von »4« auf »5«. Abbildung 5.5 Neulich im Backend-Modul »System • Einstellungen« ̈ Ändern Sie in der Zeile ui.key.contentaccess darunter den Wert von »5« auf Der hier eingegebene Titel der Webseite wird bei der Erstellung des für Suchma- »4«. schinen wichtigen title-Elements im Head einer Webseite verwendet, und zwar zu- Die Änderungen werden nach der Bestätigung mit OK ohne Speicherung und ohne sammen mit dem Titel der einzelnen Webseiten, den Sie später bei der Erstellung der Neustart von Firefox sofort wirksam. Probieren Sie es aus. Die Backend-Kürzel sollten Seiten definieren. Dabei benutzt Contao zuerst den Titel der Seite und dann nach ei- jetzt mit (Alt) funktionieren. Dafür müssen Sie zum Aufrufen des Menüs die Kombi- nem Bindestrich den hier definierten Titel der Webseite. nation (Alt) + (ª) drücken. Im folgenden ToDo ändern Sie diesen Titel der Webseite.

»Zuletzt bearbeitet«: Die Versionierung von Contao ToDo: »Titel der Webseite« ändern Zuletzt bearbei- Unterhalb des Tastaturkürzel-Links sehen Sie übrigens den Bereich 1. Öffnen Sie das Backend-Modul System • Einstellungen. tet. Dort werden auf der Startseite später die verschiedenen Versionen der zuletzt be- 2. Ändern Sie den Titel der Webseite in »Websites erstellen mit Contao«. arbeiteten Datensätze angezeigt. Sie können diese Datensätze hier auf der Startseite Speichern und schliessen direkt aufrufen und sogar mit früheren Versionen vergleichen. Das ist im Alltag sehr 3. Klicken Sie weiter unten auf (oder probieren Sie das praktisch, aber momentan ist dort wahrscheinlich noch nichts zu sehen, da Sie ja noch weiter oben beschriebene Tastenkürzel, zum Beispiel (Alt) + (C)). nichts gemacht haben.

130 131 5 Ein kurzer Rundgang im Backend 5.2 Das Backend-Modul »System • Einstellungen«

Falls Sie nach dem Speichern der Einstellungen nicht sowieso schon auf der Backend- zulässig. Für eine deutsche Website ist z. B. d.m.Y nicht schlecht, was als 13.07.2014 Startseite landen, klicken Sie einmal rechts oben im Infobereich auf den Link Start- dargestellt wird. Für die Uhrzeit ergibt H:i das Format 22:00. seite . Die im folgenden ToDo vorgenommenen Einstellungen für Datum und Uhrzeit gel- Auf der Backend-Startseite sehen Sie links oben im Arbeitsbereich gleich zweimal ten genau wie der Titel der Webseite für die gesamte Contao-Installation und können den neuen Titel »Websites erstellen mit Contao«, einmal in Weiß und darunter in später ebenfalls in einem Startpunkt zum Beispiel für eine englische oder niederlän- Grün (siehe Abbildung 5.6). dische Website überschrieben werden.

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. Dazu müssen Sie nicht scrollen, sondern können einfach »Ber- lin« in das Suchfeld tippen und den angezeigten Eintrag dann per Maus oder Tas- Abbildung 5.6 Der neue »Titel der Webseite« auf der Backend-Startseite tatur auswählen. 6. Speichern Sie die Änderungen mit einem Klick auf die Schaltfläche Speichern oder zum Beispiel mit dem Tastenkürzel (Alt) + (S). Verwirrende Begriffe: »Webseite« vs. »Website«

Die Begriffe rund um das Webpublishing stammen aus dem Englischen, und bei der Nach diesem ToDo sollte der Bereich Datum und Uhrzeit etwas so aussehen wie in Übertragung ins Deutsche passieren manchmal seltsame Dinge. So wurde eine Web Abbildung 5.7. 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 nicht immer eine einzelne Webseite, sondern manchmal auch die Website. Diese doppelte Bedeu- tung von Webseite findet man im deutschsprachigen Web häufiger, aber bisweilen führt sie zu Verwirrungen, wie hier beim Titel der Webseite. Ich werde an den entsprechenden Stellen darauf hinweisen oder gleich die eindeuti- Abbildung 5.7 »System • Einstellungen • Datum und Zeit« geren Begriffe Website bzw. die Kurzform Site benutzen.

Speicherzeiten: die »Verfallszeit einer Session« erhöhen Im Bereich Speicherzeiten regelt die Verfallszeit einer Session, wie lange Sie im Back- 5.2.2 Das Format für Angaben von Datum und Zeit end inaktiv sein können, bevor Sie sich wieder anmelden müssen. Gemessen wird in System Einstellungen Datum und Zeit Der nächste Bereich in • heißt . Die Stan- Sekunden, und die Standardeinstellung ist 3600, also eine Stunde. dardvorgabe ist dort das Format Y-m-d, was auf einer Webseite als 2014-07-13 darge- Falls Sie sich während der Lektüre dieses Buches im Backend zu oft wieder anmelden stellt wird. Dieses Datumsformat ist zwar sehr praktisch und universell verständlich, müssen, erhöhen Sie diese Zahl auf z. B. 36000. Später sollten Sie die letzte Null wieder aber trotzdem eher ungewöhnlich. entfernen. Mit einem Klick auf das rot umrandete Dreieck bekommen Sie eine kurze Hilfestel- lung zu den möglichen Datumsformaten. Im Backend sind nur numerische Formate

132 133 5 Ein kurzer Rundgang im Backend 5.3 Der Dateimanager: »System • Dateiverwaltung«

5.3 Der Dateimanager: »System • Dateiverwaltung« ̈ Für den Ordner beispielsite/downloads/ erstellen Sie in Abschnitt 21.7 einen ge- schützten Downloadbereich. In diesem Abschnitt lernen Sie die Dateiverwaltung von Contao kennen. Dahin- ̈ Im Unterordner themes/theme_one speichern Sie alle Dateien, die zu diesem ter verbirgt sich ein Dateimanager, mit dem Sie ohne FTP-Programm Dateien von Theme gehören. einem lokalen Rechner auf den Servercomputer übertragen und dort verwalten können. Was es mit diesen Themes auf sich hat, erfahren Sie in Abschnitt 6.2. Im folgenden Der Zugriff des Dateimanagers ist aus Sicherheitsgründen auf den Ordner files und ToDo erstellen Sie erst einmal die Ordnerstruktur aus Abbildung 5.8. seine Unterordner begrenzt. Alle Dateien, die Sie für Ihre Website benötigen und die nicht zur Contao-Installation gehören, wie zum Beispiel Fotos für Artikel oder zum ToDo: Die Ordnerstruktur für die Beispielsite erstellen Download angebotene PDFs, sollten Sie unterhalb dieses Ordners speichern. 1. Öffnen Sie das Backend-Modul System • Dateiverwaltung. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Ordner. Daraufhin erscheinen »tinymce.css« und »tiny_templates« gibt es schon diverse neue Dinge im Arbeitsbereich: Bereits vorhanden sind die Datei tinymce.css und ein Ordner namens tiny_templates. – Am rechten Rand sehen Sie braun hinterlegte weiße Pfeile mit dem Hinweis Mehr zu diesen beiden erfahren Sie in Abschnitt 26.1 bei der Optimierung des Editors Legen Sie als Nächstes die (neue) Position des Elements fest. TinyMCE. – Rechts oben ist ein braun hinterlegtes x mit der Beschriftung Ablage leeren, mit dem Sie die Aktion abbrechen können. Um einen Ordner auf der obersten Ebene einzufügen, klicken Sie in der Zeile mit Dateisystem 5.3.1 Ordner erstellen mit dem Dateimanager dem Wort rechts am Rand auf das kleine braune Klemmbrett mit dem weißen Pfeil nach rechts. In diesem Abschnitt erstellen Sie eine Ordnerstruktur zur Ablage von Dateien (siehe 3. Geben Sie den Namen »beispielsite« ein, und lassen Sie die Eingabefelder im Be- Abbildung 5.8). reich Meta-Informationen leer. 4. Klicken Sie auf Speichern und schliessen. 5. Erstellen Sie auf diese Weise die in Abbildung 5.8 dargestellte Ordnerstruktur.

Falls nicht gleich alles auf Anhieb funktioniert, können Sie die Ordner mit dem blau- en Pfeil verschieben und mit dem roten X löschen. In der Contao-Installation liegen die neuen Ordner unterhalb des Ordner files. Die Pfadangabe für den Ordner beispiel- site lautet also files/beispielsite.

5.3.2 Dateien mit dem Dateimanager hochladen Nach dem Erstellen der Ordnerstruktur laden Sie in diesem Abschnitt mit dem Datei- manager ein paar Dateien auf den Webspace hoch. Als Übungsobjekte dienen dabei Abbildung 5.8 Die für die Beispielsite empfohlene Ordnerstruktur ein Vorschaubild für das Theme namens screenshot.png und zwei kleine Grafiken na- mens plus.gif und minus.gif aus den Beispieldateien, die Sie am besten schon mal be- Diese Ordner werden Sie im weiteren Verlauf des Buches benutzen: reithalten. ̈ In beispielsite/content/ bewahren Sie alle für den Inhalt der Beispielsite relevanten Im folgenden ToDo laden Sie zunächst die Grafiken plus.gif und minus.gif hoch, und Medien wie z. B. allgemeine Grafiken und Fotos auf. zwar mit dem Standard-Uploader von Contao.

134 135 5 Ein kurzer Rundgang im Backend 5.3 Der Dateimanager: »System • Dateiverwaltung«

ToDo: Dateien mit dem Dateimanager hochladen (Standard-Uploader) ToDo: Dateien per Drag & Drop hochladen (DropZone) 1. Öffnen Sie das Backend-Modul System • Dateiverwaltung. 1. Öffnen Sie die Benutzereinstellungen mit einem Klick auf den Link Benutzer 2. Klicken Sie oben im Arbeitsbereich auf Datei-Upload. k.jones oben im Infobereich. 3. Wählen Sie den Ordner themes/theme_one/ mit einem Klick auf den braun hin- 2. Aktivieren Sie im Bereich Backend-Einstellungen • Datei-Uploader die Option terlegten Pfeil daneben. DropZone, und bestätigen Sie die Änderung mit Speichern und schliessen. 4. Klicken Sie im Bereich Datei-Upload auf die Schaltfläche Dateien suchen. 3. Öffnen Sie falls nötig die Dateiverwaltung. 5. Wechseln Sie in den Ordner mit den entpackten Beispieldateien. 4. Klicken Sie in der Zeile mit dem Ordner themes/theme_one ganz rechts außen 6. Öffnen Sie den Ordner /beispieldateien/grafiken/theme_one. auf den grünen Kreis mit dem weißen Kreuz ( ). 7. Markieren Sie die Grafiken plus.gif und minus.gif, und klicken Sie auf Öffnen. 5. Im Bereich Datei-Upload sehen Sie jetzt ein gestricheltes Rechteck mit der Be- schriftung Hier klicken oder Dateien ablegen. Hier haben Sie zwei Möglich- 8. Klicken Sie im Bereich Datei-Upload auf die Schaltfläche Dateien hochladen keiten: und zurück. – Normal: Klicken öffnet ein Dialogfeld zum Auswählen der Dateien. 9. Die Dateien werden jetzt hochgeladen, und danach kommen Sie zurück zur Da- teiverwaltung. Sollte das nicht automatisch passieren, klicken Sie rechts oben auf – Drag & Drop: Ziehen Sie die Dateien mit der Maus auf diesen DropZone ge- den Link Zurück, um zur Dateiverwaltung zu gelangen. nannten Bereich. Die Dateien werden automatisch hochgeladen und bekom- men rechts oben ein grünes Häkchen, wenn der Vorgang abgeschlossen wurde. Suchen Sie im Explorer oder Finder in den Beispieldateien für das Buch im Ordner Nach diesem ToDo befinden sich die beiden Grafiken in der Dateiverwaltung im Ord- grafiken/theme_one die Grafik screenshot.png, und ziehen Sie sie auf die Drop- ner themes/theme_one. Zone. Sie können auch mehrere Dateien auf einmal hochladen. Der erfolgreiche Contao bietet Ihnen als Alternative zum Standard-Uploader mit der Option Dropzone Upload einer Datei wird durch ein grünes Häkchen signalisiert. einen sehr bequemen Upload per Drag & Drop, den Sie aber in den Benutzereinstel- 6. Klicken Sie rechts oben auf den Link Zurück, um wieder zur Dateiverwaltung zu lungen erst aktivieren müssen (Abbildung 5.9). gelangen.

Nach diesem ToDo liegen alle drei Grafiken im Ordner themes/theme_one. Abschlie- ßend noch zwei kurze Anmerkungen: ̈ Falls der Upload per Drag & Drop bei Ihnen aus irgendeinem Grund nicht funktio- nieren sollte, ist das zwar schade, aber kein Beinbruch. Stellen Sie in den Benutzer- einstellungen einfach wieder den Standard-Uploader ein. ̈ Falls Sie die Vorschaubilder für die Grafiken nicht sehen möchten, können Sie die- se in den Benutzereinstellungen deaktivieren. Dazu klicken Sie oben im Infobe- reich auf den Link Benutzer: k.jones. Sie kommen dann in eine Eingabemaske, in der Sie bei Bedarf im Bereich Backend-Einstellungen die Option Vorschau- bilder anzeigen ausstellen können. Abbildung 5.9 Dateiverwaltung mit DropZone und hochgeladener Datei Mit dem Upload per Drag & Drop macht das Hochladen der Dateien richtiggehend Im folgenden ToDo möchte ich Ihnen DropZone kurz vorstellen. Spaß.

136 137 5 Ein kurzer Rundgang im Backend 5.3 Der Dateimanager: »System • Dateiverwaltung«

Fazit: Wenn Sie im Ordner files Ordner oder Dateien per FTP, Windows-Explorer oder Limits für große Grafiken Finder hochladen, löschen oder ändern, sollten Sie nicht vergessen, danach in der Da- Standardmäßig können Sie Grafiken bis zu 3.000 × 3.000 Pixel hochladen, die beim teiverwaltung auf Synchronisieren zu klicken. Hochladen automatisch auf 800 × 600 verkleinert werden. Diese Standardeinstellungen können Sie bei Bedarf im Backend-Modul System • Ein- stellungen ändern, und zwar in den Bereichen Dateien und Bilder und Datei- 5.3.4 Template-Ordner erstellen im Backend-Modul »Templates« Uploads. In diesem Abschnitt erstellen Sie im Ordner /templates einen Unterordner mit dem Namen theme_one, den Sie im nächsten Kapitel in Abschnitt 6.2.1 benötigen. In die- sem Ordner werden die speziell für das Theme One angepassten Templates gespei- 5.3.3 »Synchronisieren«: Abgleich zwischen Datenbank und Ordner »files« chert. Die Dateiverwaltung von Contao können Sie dazu nicht einsetzen, denn die ist nur für Aktionen unterhalb des Ordners files zuständig, und deshalb erstellen Sie den Contao hat seit der Version 3 ein datenbankgestütztes Dateisystem, bei dem alle un- Ordner templates/theme_one direkt im Backend-Modul Layout • Templates. terhalb des Ordners files vorhandenen Ordner und Dateien in der Datenbank erfasst werden. ToDo: Einen neuen Template-Ordner anlegen Dadurch können Sie Dateien und Ordner nachträglich umbenennen oder verschie- 1. Wechseln Sie in das Backend-Modul • Templates. ben, und eine Verknüpfung in Inhaltselementen und Frontend-Modulen bleibt trotz- 2. Klicken Sie oben im Arbeitsbereich auf Neuer Ordner. dem erhalten. Das klingt vielleicht nicht sonderlich spektakulär, ist im Alltag eines 3. Klicken Sie rechts neben Dateisystem auf das kleine braune Klemmbrett mit dem Online-Redakteurs aber buchstäblich Gold wert. weißen Pfeil nach rechts. Wenn Sie Dateien und Ordner wie in diesem Abschnitt über die Dateiverwaltung be- 4. Der Name des Ordners soll theme_one sein. arbeiten, erfasst Contao die Änderungen automatisch in der Datenbank, und alles ist 5. Klicken Sie auf Speichern und schliessen ((Alt) + (C)). okay.

Wenn Sie Ordner und Dateien im Ordner files hingegen per FTP oder mit dem Win- Nach diesem ToDo gibt es im Backend-Modul Layout • Templates einen Unterord- dows-Explorer (PC) oder dem Finder (Mac) bearbeiten, bekommt Contao das nicht ner mit dem Namen theme_one (Abbildung 5.11). mit. Damit diese Änderungen trotzdem in der Datenbank erfasst werden, müssen Sie den Ordner files und die Datenbank manuell abgleichen. Das machen Sie mit einem Klick auf den Link Synchronisieren oben in der Dateiverwaltung. Nach dieser Aktion erhalten Sie eine Meldung über die während der Synchronisie- rung erfolgten Änderungen (Abbildung 5.10). Abbildung 5.11 Der Ordner »theme_one« im Backend-Modul »Templates«

Es gibt zwei Ordner mit dem Namen »theme_one« Sie haben jetzt zwei Ordner mit dem schönen Namen theme_one: ̈ In files/themes/theme_one werden Grafiken und andere Dateien gespeichert, die zum Theme One gehören. Das können z. B. auch externe Stylesheets oder SCSS-Da- teien sein. ̈ Abbildung 5.10 Dateisystem und Datenbank synchronisieren templates/theme_one ist ausschließlich für geänderte Templates. Falls Ihnen der Unterschied noch nicht so besonders viel sagt, ist das nicht weiter schlimm. Das wird im Laufe der nächsten Kapitel mehr als deutlich.

138 139 5 Ein kurzer Rundgang im Backend 5.4 Der Erweiterungskatalog und die Erweiterungsverwaltung

5.4 Der Erweiterungskatalog und die Erweiterungsverwaltung Noch besser ist, dass Sie vom Contao-Backend aus direkten Zugriff auf das Extension Repository haben und den Erweiterungskatalog durchsuchen können. In der Einleitung haben Sie gelesen, dass wichtige Erweiterungen wie Nachrichten, Kalender und Newsletter bereits im Kern von Contao integriert sind und sofort nach Der Nachfolger der Erweiterungsverwaltung heißt »Composer« der Installation zur Verfügung stehen. Vielleicht erinnern Sie sich, dass Ihnen das Installtool gegen Ende der Installation im Zusätzlich gibt es in der Erweiterungsliste auf contao.org mehr als 1.500 Erweiterun- Bereich Erweiterungsverwaltung angeboten hat, den sogenannten Composer-Client gen (engl. Extensions), die die Funktionalität des Kerns fast beliebig erweitern und zu installieren. sich komfortabel aus dem Backend heraus installieren lassen. Der Composer Client ist der designierte Nachfolger der Erweiterungsverwaltung und Bei der Installation der Music Academy in Kapitel 4, »Schnelldurchlauf: So funktio- wird gegen Ende des Buches in Abschnitt 27.4 kurz vorgestellt. Bis dahin bleiben Sie niert Contao«, haben Sie aus dem Backend von Contao bereits auf die Erweiterungs- aber erst einmal bei der Standard-Erweiterungsverwaltung. verwaltung zugegriffen. Jetzt möchte ich Ihnen dieses tolle Tool ein bisschen detail- lierter vorstellen. 5.4.2 Eine Erweiterung aus dem Backend heraus installieren 5.4.1 Der Erweiterungskatalog auf »contao.org« Um den Erweiterungskatalog und die Erweiterungsverwaltung kennenzulernen, in- stallieren Sie in diesem Abschnitt die Erweiterung [BackupDB], die unter anderem Die Erweiterungen zu Contao werden auf contao.org in einem zentralen Erweite- eine bequeme Sicherung der Contao-Datenbank aus dem Backend heraus ermöglicht rungskatalog gesammelt, der auch als Erweiterungsliste oder Extension Repository (siehe auch Abschnitt 23.4). (kurz ER) bekannt ist. Sie müssen also auf der Suche nach einer bestimmten Erweiterung nicht das halbe Web durchsuchen, sondern nur zu einer Adresse surfen: ̈ contao.org/erweiterungsliste.html

Abbildung 5.13 Der Erweiterungskatalog im Backend von Contao

Im folgenden ToDo installieren Sie die Erweiterung.

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 Ar- beitsbereich 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 Instal- lieren.

Abbildung 5.12 Die Erweiterungsliste auf »contao.org«

140 141 5 Ein kurzer Rundgang im Backend

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 (Abbildung 5.14).

Nach diesem ToDo sieht das Backend-Modul System • Erweiterungsverwaltung etwa so aus wie in Abbildung 5.14.

Abbildung 5.14 Die Erweiterungsverwaltung mit einer installierten Erweiterung

In der Erweiterungsverwaltung erhalten Sie einen Überblick über die installierten Er- weiterungen und können diese mit den Symbolen rechts daneben bearbeiten, lö- schen oder aktualisieren. Sobald im Erweiterungskatalog eine neuere Version der Erweiterung vorliegt, wird der Status auf Neue Version verfügbar gesetzt, und Sie können die Erweiterung mit ei- nem Klick auf das grün hinterlegte weiße Häkchen ganz rechts aktualisieren.

Erweiterungskatalog: alle Erweiterungen anzeigen Standardmäßig zeigt der Erweiterungskatalog im Backend nur Erweiterungen an, die von den Autoren für die von Ihnen verwendete Contao-Version explizit freigegeben wurden. Falls Sie auch potenziell nicht kompatible Versionen sehen möchten, aktivieren Sie in System • Einstellungen ganz unten im Bereich Extension Repository das Kontroll- kästchen Inkompatible Erweiterungen anzeigen. Ein Wort der Warnung: Wer inkompatible Erweiterungen installiert, sollte genau wis- sen, was er tut, denn die Installation kann die Systemintegrität beeinträchtigen oder gefährden. Auf gut Deutsch: Das kann danebengehen.

142 Kapitel 6 Die ersten Schritte zur eigenen Website

In diesem Kapitel gehen Sie die ersten Schritte zur eigenen Website mit Contao. Die Reise beginnt mit der Erstellung einer Seitenstruktur und geht über Themes und Seitenlayouts weiter zu Frontend-Modulen, ei- nem Artikel und einer Navigation. Sie endet mit einem Blick in den Quelltext, einem Exkurs zu Templates und einem Überblick über das Zusammenspiel der Komponenten in Contao.

Die Themen im Überblick: ̈ »Keinen Startpunkt gefunden« – die Seitenstruktur erstellen, Seite 144 ̈ »Kein Layout angegeben« – Theme und Seitenlayout erstellen, Seite 150 ̈ Frontend-Module für den Kopf- und den Fußbereich, Seite 155 ̈ Der erste Artikel und zwei Inhaltselemente, Seite 158 ̈ Ein Frontend-Modul für die Navigation: »Nav – Main«, Seite 166 ̈ Ein kurzer Blick in den Quelltext, Seite 170 ̈ Templates erstellen das HTML für den Quelltext, Seite 172 ̈ Das Contao-Prinzip: altogether now, Seite 180

Anfangs kommen einem bei der Arbeit mit Contao Begriffe wie Seite, Theme, Seiten- layout, Artikel, Inhaltselement, Frontend-Modul und Template wie einzelne Puzzle- teile vor, die nicht so richtig zusammenpassen wollen. Dieses Kapitel erläutert das Zusammenspiel dieser Komponenten und hilft Ihnen bei der Eingewöhnung. Abbildung 6.1 zeigt, wie die Startseite der Beispielsite am Ende von Kapitel 16, »Ein neues Seitenlayout für die Startseite«, aussieht. Nur damit Sie schon mal ungefähr wissen, wohin die Reise gehen wird.

143 6 Die ersten Schritte zur eigenen Website 6.1 »Keinen Startpunkt gefunden« – die Seitenstruktur erstellen

Abbildung 6.2 Das Frontend mit der Meldung »Keinen Startpunkt gefunden«

Das ist nicht gerade spektakulär, aber der Befund entspricht den Tatsachen, denn im Backend gibt es tatsächlich noch keinen Startpunkt einer Webseite (engl. root page). Genau genommen, gibt es überhaupt noch gar 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 die im Frontend monierte fehlende »root page«, die im deutschsprachigen Backend Startpunkt einer Webseite genannt wird. Mit Webseite ist in diesem Fall übrigens die Website gemeint. Ein Startpunkt ist übrigens nicht identisch mit der Startseite für Besucher im Frontend. Ein solcher Startpunkt dient lediglich zu Verwaltungszwecken im Backend Abbildung 6.1 Die Startseite der Beispielsite – Stand Ende und taucht im Frontend nicht auf.

6.1 »Keinen Startpunkt gefunden« – die Seitenstruktur erstellen ToDo: Den »Startpunkt einer Webseite« erstellen 1. Rufen Sie das Backend von Contao auf, und melden Sie sich als Administrator an: Der erste Schritt auf dieser Reise besteht darin, dass Sie das Frontend der Installation localhost/contaobuch/contao/ (bei MAMP mit Port 8888). aus Abschnitt 3.2 im Browser aufrufen. Zur Erinnerung: 2. Öffnen Sie das Backend-Modul Layout • Seitenstruktur. Dort steht momentan ̈ Frontend: localhost/contaobuch/ nur Keine Einträge gefunden. ̈ Backend: localhost/contaobuch/contao/ 3. Klicken Sie oben im Arbeitsbereich auf Neue Seite. Daraufhin erscheint eine Zeile mit dem Titel der Webseite »Websites erstellen mit Contao«, den Sie während Bei MAMP müssen Sie wie immer den Port 8888 hinzufügen. der Installation in System • Einstellungen vergeben haben. Sollte im Frontend der Hinweis erscheinen: »Wir sind gleich zurück«, ist der War- 4. Oberhalb dieser Zeile steht der Hinweis Legen Sie als Nächstes die (neue) Posi- tungsmodus noch aktiv. In diesem Fall melden Sie sich am Backend an und Deakti- tion des Elements fest. Klicken Sie dazu ganz rechts auf das braune Klemmbrett vieren in der roten nicht zu übersehenden Meldung oben den Wartungsmodus, in- mit dem weißen Pfeil nach rechts, um eine neue Seite einzufügen. dem Sie auf die entsprechende Schaltfläche klicken. 5. Jetzt erscheint das Dialogfeld aus Abbildung 6.3. Geben Sie im Feld Seitenname 1 Ohne Wartungsmodus steht mitten auf der Seite die Meldung Keinen Startpunkt »Startpunkt Beispielsite Contaobuch« ein . Der Seitenname dient nur zur Ver- gefunden (Abbildung 6.2). waltung im Backend.

144 145 6 Die ersten Schritte zur eigenen Website 6.1 »Keinen Startpunkt gefunden« – die Seitenstruktur erstellen

Das Häkchen bei Seite veröffentlichen ist wichtig, denn sonst wird zwar in der 6. Prüfen Sie, ob als Seitentyp die Option Startpunkt einer Webseite ausgewählt Datenbank eine Seite angelegt, sie bleibt aber offline. ist 2. Das Feld Seitenalias ist momentan nicht wichtig und wird beim Speichern von Contao automatisch ausgefüllt. Nach dem Klick auf Speichern und schliessen sieht der Seitenbaum im Backend 7. Blenden Sie den Bereich Meta-Informationen ein, und geben Sie im Feld Seiten- so aus wie in Abbildung 6.4. Am rechten Seitenrand sehen Sie Symbole zur Bearbei- titel den Text »Beispielsite Contaobuch« ein 3. Der Seitentitel erscheint im tung der Seite. Wenn Sie mit der Maus kurz über einem Symbol verweilen, bekom- Frontend als Teil des « ...... 639 21.7.3 Schritt 3: Das Inhaltselement »Downloads« konfigurieren ...... 673 20.3.3 Die Beschreibung der Seite: »« ...... 642 21.8 Weitere Möglichkeiten zur Mitgliederverwaltung ...... 676 20.4 Abfangjäger: 404 und 403 ...... 644 21.8.1 Das Modul »Passwort vergessen« ...... 676 20.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit ...... 644 21.8.2 Das Modul »Persönliche Daten« ...... 677 20.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein? ...... 646 21.8.3 Die automatische Registrierung für Mitglieder ...... 678 20.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie ...... 648 20.5 Eine XML-Sitemap für Google & Co...... 650 20.5.1 Die Google Webmaster-Tools ...... 650 22 Benutzer: im Backend angemeldete Mitarbeiter 679 20.5.2 Eine XML-Sitemap in Contao erstellen ...... 650 22.1 Benutzerverwaltung: die Übersicht ...... 679 22.2 Die Benutzergruppe »Redakteure – Nachrichten« ...... 681 21 Mitglieder: im Frontend angemeldete Besucher 653 22.2.1 Schritt 1: Name eingeben und erlaubte Module freigeben ...... 681 22.2.2 Schritt 2: Pagemounts und Filemounts einrichten ...... 682 21.1 Mitglieder und Benutzer: der Unterschied ...... 653 22.2.3 Schritt 3: Rechte für Erweiterungen – »Nachrichten-Rechte« ...... 683 22.2.4 Schritt 4: Erlaubte Felder – Berechtigungen für 21.2 Mitgliedergruppen und Mitglieder einrichten ...... 655 die Tabelle »tl_news« ...... 684 21.2.1 Mitgliedergruppen einrichten ...... 655 21.2.2 Neue Mitglieder erstellen ...... 655 22.3 Die Benutzerin »Helen Lewis« einrichten ...... 686 22.3.1 Schritt 1: Benutzername und Passwort ...... 686 21.3 Seiten für die An- und Abmeldung erstellen ...... 656 22.3.2 Schritt 2: Benutzergruppen und Rechtevererbung ...... 687 21.4 Frontend-Module für die An- und Abmeldung erstellen ...... 658 22.3.3 Schritt 3: Testen – ein Klick, und Kevin Jones ist Helen Lewis ...... 688 21.4.1 Die Frontend-Module zur Anmeldung im Überblick ...... 658 22.4 Die Benutzergruppe »Redakteure – Artikel« ...... 690 21.4.2 Modul Nr. 1: Das Anmeldeformular – »[Login-Formular]« ...... 659 22.4.1 Die Benutzergruppe »Redakteure – Artikel« einrichten ...... 690 21.4.3 Modul Nr. 2: Die Abmeldung – »[Automatischer Logout]« ...... 660 22.4.2 Benutzer der Benutzergruppe »Redakteure – Artikel« zuweisen ...... 691 21.4.4 Modul Nr. 4: Der Link zur Anmeldeseite – »[Eigener HTML-Code]« ... 661 21.4.5 Modul Nr. 4: Anmeldename und Abmeldelink – 22.5 Zugriffsrechte für Seiten und Artikel setzen ...... 693 »[Eigener HTML-Code]« ...... 662 22.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf ...... 693 22.5.2 Zugriffsrechte für die freigegebenen Seiten setzen ...... 694 21.5 Die erstellten Module einbinden ...... 663 21.5.1 Die Frontend-Module zum An- und Abmelden in Artikeln einbinden ...... 663 21.5.2 Die Links zur An- und Abmeldung im Fußbereich einbinden ...... 665 23 Wartung: die Website im Alltag 697 21.6 Die Frontend-Module gestalten ...... 667 21.6.1 Das HTML für die Links und das Formular zur Anmeldung ...... 667 23.1 Das »System-Log« schreibt mit ...... 697 21.6.2 Das CSS für die Links und das Formular zur Anmeldung ...... 668 23.2 Die »Systemwartung« im Überblick ...... 698 21.6.3 Testen, ob An- und Abmeldung funktionieren ...... 669 23.2.1 »Systemwartung«: Suchindex neu aufbauen ...... 698 21.7 Einen geschützten Downloadbereich einrichten ...... 670 23.2.2 »Systemwartung«: Daten bereinigen ...... 700 21.7.1 Schritt 1: Zugriffsschutz für die Seite »Downloads« einrichten ...... 671 23.2.3 Cache leeren für Redakteure: »Persönliche Daten – Daten bereinigen« ...... 702

22 23 Inhalt Inhalt

23.3 Den »Cache-Flow« in Contao kontrollieren ...... 703 24.2 Einige Quellen für Contao-Themes ...... 721 23.3.1 Cache as cache can: Cache gibt es in Contao und im Browser ...... 703 24.2.1 Einsatzgebiete: Wozu man Themes einsetzen kann ...... 721 23.3.2 Der »Cache-Modus« von Contao in »System • Einstellungen« ...... 703 24.2.2 Der Contao Theme-Store: »themes.contao.org« ...... 722 23.3.3 Die »Cache-Einstellungen« in der Seitenstruktur definieren ...... 704 24.2.3 RockSolid Themes: rocksolidthemes.com ...... 723 23.4 Backups erstellen: Datenbank und Dateien sichern ...... 705 24.2.4 Weitere Websites mit Contao-Themes ...... 724 23.4.1 Die MySQL-Datenbank sichern ...... 705 24.3 Die Beispielsite im Look der »Music Academy« ...... 724 23.4.2 Die Daten auf dem Webspace sichern ...... 706 24.3.1 Schritt 1: Theme im Backend importieren ...... 724 23.5 Updates: die Versionsnummern von Contao ...... 707 24.3.2 Schritt 2: Theme »Music Academy« aktivieren ...... 726 23.5.1 Das Bugfix-Release: 3.3.x ...... 707 24.4 Über die Anpassung von Themes ...... 728 23.5.2 Das Minor-Release: 3.x.0 ...... 707 24.4.1 Was im neuen Theme fehlt ...... 728 23.5.3 Das Major-Release: x.0.0 ...... 708 24.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt ...... 728 23.5.4 »Long-Term-Support«: LTS-Releases werden länger unterstützt ...... 708 24.4.3 Reparatur: Anpassung von in Artikeln eingebundenen Modulen ...... 730 23.5.5 Sollte ich eine funktionierende Contao-Website updaten? ...... 709 24.5 Frontend-Templates: Theme plus Seiten, Inhalte und Benutzer ...... 731 23.5.6 Checkliste vor einem Update ...... 710 24.5.1 »Theme« vs. »Frontend-Template« ...... 731 23.6 Der »Live Update«-Service im Backend von Contao ...... 711 24.5.2 Frontend-Templates sind nützlich zum »Einfrieren« von Websites ... 731 23.6.1 Mit dem »Contao-Check« prüfen, ob der Webspace geeignet ist ...... 711 24.5.3 In den Beispieldateien: ein Frontend-Templates für 23.6.2 Das »Live Update« kann auch bestehende Installationen (fast) jedes Kapitel ...... 732 reparieren ...... 711 24.6 Sicherheitshinweise (nicht nur für Contao) ...... 733 23.6.3 Das »Live Update« macht auch ein Datenbank-Backup ...... 712 24.6.1 Das potenzielle Problem ...... 734 23.6.4 Machen Sie vor dem ersten »Live Update« ein Komplett-Backup ...... 712 24.6.2 Vertrauenswürdige Quellen ...... 734 23.6.5 Eine »Live Update ID« erwerben ...... 712 24.6.3 Ein Theme prüfen ...... 734 23.7 Das manuelle Update per FTP ...... 713 24.6.4 Backend-Benutzer: Angriff von innen ...... 734 23.7.1 Schritt 1: Backup von Datenbank und Dateien ...... 713 23.7.2 Schritt 2: Aktuelle Contao-Version herunterladen und entpacken ..... 713 23.7.3 Schritt 3: Das entpackte Archiv vorbereiten ...... 714 TEIL VI Tipps und Tricks 23.7.4 Schritt 4: Das Archiv auf den Webspace kopieren und synchronisieren ...... 714 25 Tipps und Tricks bei der Arbeit mit Inhalten 737 23.7.5 Schritt 5: Datenbank mit dem Installtool aktualisieren ...... 715 23.8 Webstatistiken mit Google Analytics und Piwik ...... 715 25.1 Text im Fußbereich mit dem TinyMCE pflegen ...... 737 25.2 Recycling: Inhalte auf mehreren Seiten wiederholen ...... 740 25.2.1 »Verknüpfungen«: zum Einfügen auf einzelnen Seiten ...... 740 25.2.2 »Frontend-Module«: zum Einfügen auf allen Seiten 24 Themes und Frontend-Templates 717 eines Seitenlayouts ...... 742

24.1 Ein Theme bestimmt das Aussehen der Website ...... 717 25.3 Artikelteaser auf Übersichtsseiten ...... 742 24.1.1 Der Theme-Manager verwaltet bekannte Komponenten ...... 717 25.3.1 Teasertexte für die drei Artikel erstellen ...... 743 24.1.2 »Theme One« von der Beispielsite exportieren und analysieren ...... 719 25.3.2 Die Teasertexte auf der Seite »Artikel« einbinden ...... 744 24.1.3 All-in-one: das Innenleben einer CTO-Datei ...... 719 25.3.3 Das HTML für die Teasertexte auf der Seite »Artikel erstellen« ...... 745 24.1.4 Ein Blick in die Datei »theme_one.cto« ...... 720 25.3.4 Alternative zur Teaserliste: automatische Weiterleitung auf 24.1.5 Was nicht in einem Theme enthalten ist: Inhalte, Seiten usw...... 720 die erste Unterseite ...... 747

24 25 Inhalt Inhalt

25.4 Mehrere Artikel auf einer Seite ...... 748 26.6.3 Begrenzt nützlich: mehrere Domains in einer Contao-Installation .... 774 25.4.1 Methode 1: Nur ein Artikel pro Seite und Spalte ...... 748 26.6.4 Domainumleitung: www.domain.de zu domain.de (oder 25.4.2 Methode 2: Mehrere komplette Artikel pro Seite und Spalte ...... 748 umgekehrt) ...... 774 25.4.3 Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte ...... 749 26.6.5 Zusammenfassung: mehrere Websites in mehreren Sprachen ...... 775 25.4.4 Die Frontend-Module »Artikelliste« und »Artikelnavigation« ...... 751 26.7 Die Inserttags im Überblick ...... 776 25.5 Die Erweiterung für Google Maps: [dlh_googlemaps] ...... 751 26.7.1 Inserttags für Link-Elemente ...... 776 25.5.1 Die Erweiterung [dlh_googlemaps] im Überblick ...... 752 26.7.2 Benutzereigenschaften: Inserttags für Frontend-Benutzer ...... 778 25.5.2 Schritt 1: Eine Karte erstellen in »Inhalte • Google Maps« ...... 753 26.7.3 Seiteneigenschaften: Inserttags für alles rund um Seiten ...... 779 25.5.3 Schritt 2: Karten-Elemente – eine Info-Sprechblase hinzufügen ...... 753 26.7.4 Umgebungsvariablen ...... 780 25.5.4 Schritt 3: Das Inhaltselement »Google Map« in Contao 26.7.5 Include-Elemente ...... 780 einbinden ...... 754 26.7.6 Verschiedenes: Datum, E-Mail und Sprachen ...... 781 25.5.5 Gewusst wie: die manuelle Ermittlung der Geo-Koordinaten ...... 754

27 Einige Erweiterungen von Drittanbietern 785 26 Tipps und Tricks zur Systemverwaltung 757 27.1 Nützliche Helfer im Backend ...... 785 26.1 Tipps und Tricks zum TinyMCE ...... 757 27.1.1 »EasyThemes« ist auch bei nur einem Theme nützlich ...... 785 26.1.1 Vordefinierte CSS-Klassen im TinyMCE-Stylesheet 27.1.2 »Sticky Backend Footer« fixiert die Speichern-Leiste im »files/tinymce.css« ...... 758 Arbeitsbereich ...... 787 26.1.2 Die Schrift im TinyMCE gestalten im Stylesheet 27.2 Kleine Erweiterungen für das Frontend ...... 788 »files/tinymce.css« ...... 759 27.2.1 »Social Images«: Bilder für soziale Netze bereitstellen ...... 788 26.1.3 Textbausteine im TinyMCE: Inhalte aus der Vorlage einfügen ...... 760 27.2.2 Mehrspaltige Inhalte im Inhaltsbereich ...... 788 26.2 Layouts für Fortgeschrittene ...... 761 27.3 Isotope, MetaModels und ungefähr 1.632 weitere Erweiterungen … ...... 790 26.2.1 »Sticky Footer« ohne Änderungen am Seitentemplate »fe_page« .... 761 27.3.1 »Isotope eCommerce« – ein Shop-System für Contao ...... 790 26.2.2 »Fullpage-Layout«: Header und Footer so breit wie 27.3.2 »MetaModels« – Datenstrukturen jenseits des Seitenbaums ...... 791 das Browserfenster ...... 762 27.4 Ausblick: Erweiterungsverwaltung wird Composer ...... 792 26.2.3 Seitenlayout: eigene Layoutbereiche erstellen und aktivieren ...... 763 26.2.4 Seitentemplate Marke Eigenbau: »fe_irgendwas« ...... 764 26.2.5 Contao mit anderen CSS-Frameworks nutzen ...... 765 26.3 Die Systemkonfiguration: »localconfig.php« ...... 766 Index ...... 795 26.4 Die Sprachkonfiguration: »langconfig.php« ...... 767 26.4.1 Ein Beispiel: »Mehr …« statt »Weiterlesen …« ...... 768 26.4.2 Der Aufbau der Einträge in der »langconfig.php« ...... 768 26.4.3 Ein zweites Beispiel: Die Überschrift »Einen Kommentar schreiben« ändern ...... 769 26.5 Infos zu Datenbanktabellen: »dcaconfig.php« ...... 770 26.6 Mehrere Websites in einer Contao-Installation ...... 772 26.6.1 Jede Website muss einen eigenen Startpunkt haben ...... 772 26.6.2 Mehrsprachige Websites ...... 772

26 27 Index

Index

.htaccess Navigationsbereich ...... 128 Apache-Konfiguration (htaccess) ...... 97 persönliche Daten ändern ...... 127 Backup machen (htaccess) ...... 706 Rechtesystem ...... 121 PHP als CGI ...... 97 Seitenlayouts ...... 115 RewriteBase (htaccess RewriteBase) ...... 630 Seitenstruktur ...... 111, 144, 150, 228 URL umschreiben (htaccess) ...... 628 Stylesheets ...... 117 403 – Forbidden ...... 648 Systemeinstellungen ...... 131 404 – Nicht Gefunden ...... 645 Tastenkürzel ...... 129 404 – Not Found ...... 646 Template-Ordner erstellen ...... 139 Themes ...... 113 A Vorschaubilder ausstellen ...... 137 Backend-Module Ablage leeren (Backend) ...... 157 Definition ...... 155 Administrator Module deaktivieren ...... 447 Konto ändern ...... 680 Übersicht ...... 128 Konto erstellen ...... 79 Bearbeitung mehrerer Datensätze ...... 231, 638, Passwort vergessen ...... 82 641, 665, 695 Akkordeon (Inhaltselement) ...... 312, 323 Beiträge Apache ...... 57 als PDF speichern ...... 412 Arbeitsbereich (Backend) ...... 129 auf Facebook empfehlen ...... 412 Artikel ...... 117 auf Twitter empfehlen ...... 412 als PDF speichern ...... 298 ausdrucken ...... 412 Artikel-Einstellungen ...... 159, 298 Benutzer ...... 679 auf Facebook empfehlen ...... 298 Admin-Konto erstellen ...... 680 auf Twitter empfehlen ...... 298 Begrüßungsmail ...... 689 ausdrucken ...... 298 Benutzer einrichten ...... 686 besteht aus Inhaltselementen ...... 119 und Zugriffsrechte ...... 693 im Seitenlayout einbinden ...... 163 Unterschied zu Mitgliedern ...... 653 mehrere in einer Spalte ...... 742 Benutzerfunktionen Teaser anzeigen ...... 742 Daten bereinigen ...... 702 Artikelteaser einsetzen ...... 742 rückgängig ...... 112 Auswahllisten (Formulare) ...... 365 Benutzergruppe Auto_item aktivieren ...... 414, 457 erlaubte Module freigeben ...... 681 Page- und Filemounts ...... 682 B Rechte für Erweiterungen ...... 683 Zugriffsrechte setzen ...... 693 Backend Benutzerrechte vs. Gruppenrechte ...... 687 Arbeitsbereich ...... 129 Bild (Inhaltselement) ...... 279 Artikel ...... 117 Bild-Einstellungen ...... 282, 283 Aufbau ...... 110 An Rahmen anpassen ...... 283 Benutzer ...... 121 exaktes Format ...... 283 Benutzereinstellungen ...... 127 Proportional ...... 282 Benutzerpasswort ändern ...... 128 Bilder Benutzerverwaltung ...... 653, 679 Bild-Einstellungen ...... 282, 283, 589 Dateiverwaltung ...... 134 maximale Frontend-Breite ...... 284 für Redakteure ...... 121 Bildergalerie Infobereich ...... 126 Bildunterschriften ...... 290 Mehrere bearbeiten ...... 164

795 Index Index

erstellen ...... 285 mehrere Websites ...... 772 ce_table ...... 309 Double Opt-In ...... 481 HTML-Struktur ...... 289 Minor-Release ...... 707 ce_text ...... 262 DropZone ...... 136 Blog ...... 398, 446 offline installieren ...... 70 ce_toplink ...... 295 boldt-media.de ...... 710 online installieren ...... 82 image_container ...... 277 E Bootstrap (Framework) ...... 765 Suchfunktion erstellen ...... 375 CSS-Klassen: Kalender ...... 457, 461 Browser Systemvoraussetzungen ...... 69 CSS-Klassen: Module Entwicklungsumgebung Ǟ XAMPP/MAMP Präfixe für CSS3 ...... 547 Themes ...... 113 mod_article ...... 262 Erweiterung Viewport ...... 563 Überblick Funktionsweise ...... 121, 180 mod_articlenav ...... 259 [news_categories] ...... 436 Buch Einstieg in CSS ...... 526, 560 und CSS3 ...... 545 mod_booknav ...... 258 [rocksolid-columns] ...... 617 Buch Flexible Boxes ...... 522, 563 Contao Check ...... 83 mod_breadcrumb ...... 257 [social_images] ...... 301, 413 Bugfix-Release ...... 707 contao.org ...... 39, 70, 88, 91, 140, 710 mod_customnav ...... 248 [tags] ...... 436 contaobuch.de ...... 44 mod_eventreader ...... 459 dk_mmenu ...... 567 C Contao-Community ...... 43 mod_lostPasswort ...... 676 Erweiterungen Contao-Forum ...... 43 mod_navigation ...... 176 [backup_db] ...... 705 Cache Contao-Template ...... 172 mod_personalData ...... 677 [BackupDB] ...... 141, 705 Cache-Modus wählen ...... 703 Content-Management-System ...... 37 mod_quicklink ...... 256 [ce_page_teaser] ...... 746 Cachezeit festlegen ...... 704 Copyright-Hinweis ...... 739 mod_quicknav ...... 256 [changelanguage] ...... 773 Daten bereinigen ...... 504, 700 CSS mod_sitemap ...... 253 [dlh_googlemaps] ...... 752 deaktivieren ...... 504 Dopplung von div ...... 526 Navigationsmenü ...... 234 [dlstats] ...... 675 CAPTCHA ...... 373 horizontale Navigation ...... 238 submenu ...... 235 [efg] ...... 362 Checkbox-Menü ...... 370 horizontales Dropdown ...... 241 trail ...... 235 [inputvar] ...... 360 Checkliste vor Update ...... 710 im Debugmodus unkomprimiert ...... 194 CSS-Klassen: Nachrichten ...... 444, 445 [x_backend_notes] ...... 228, 705 chmod ...... 99, 100 overflow:hidden ...... 284, 535 CSS-Klassen: Newsletter ...... 479 installieren ...... 140 chown ...... 99 Style-Block im ...... 528 CSS-Klassen: Sonstige zur Mitgliederverwaltung ...... 678 CMS vertikale Navigation ...... 234 float_left ...... 277 Erweiterungen (Core) Brauchen Sie ein CMS? ...... 37 CSS importieren ...... 221 pagination ...... 408 Events (Kalender) ...... 448 erfordert Know-how ...... 39 CSS3 pdf_link ...... 299 FAQ ...... 464 Funktionsweise ...... 48 Browser-Präfixe ...... 547 CSV-Datei importieren ...... 305 Formulargenerator ...... 341 und URLs ...... 626 Eigenschaften (Übersicht) ...... 546 Nachrichten ...... 397 Was ist das? ...... 37 Geschichte ...... 545 D Newsletter ...... 469 Composer ...... 141, 792 und IE 8 ...... 548 Erweiterungen auf contao.org ...... 140 Contao und interne Stylesheets ...... 547 Dateiberechtigungen ...... 95, 99 Events Ǟ Kalender Bedeutung des Namens ...... 37 CSS3Pie ...... 192, 548 Dateimanager ...... 134 Extension Repository ...... 140 bei Github ...... 533 CSS-Editor von Contao ...... 215 Dateiverwaltung ...... 134 Bugfix-Release ...... 707 CSS-Framework ...... 183, 519 Dateien hochladen ...... 135 F Cache-Einstellungen ...... 703 Formulare ...... 356, 432 DropZone ...... 136 Changelog ...... 533 Holy Grail ...... 532, 561 Ordner erstellen ...... 134 Facebook ...... 298, 412 Composer ...... 141 Media Query ...... 536, 561, 620 synchronisieren ...... 138 FAQ ...... 464 Contao Check ...... 83 responsive ...... 536, 620 Datenbank fe_page ...... 172, 524, 764 CSS-Framework ...... 519 responsives Layout ...... 561 erstellen ...... 66, 72, 90 Feed für Nachrichten ...... 425 Dateiverwaltung ...... 134 CSS-Grid-Frameworks ...... 612, 613 exportieren (SQL-Dump) ...... 93, 705 Fehlermeldungen Erweiterungen installieren ...... 140 CSS-Klassen: Events ...... 457, 461 Kollation ...... 77 403 Forbidden ...... 648 Erweiterungsliste ...... 140 CSS-Klassen: FAQ ...... 466 Tabellen anlegen ...... 77 404 Not found ...... 646 geeigneter Webspace ...... 82 CSS-Klassen: Formulare ...... 362 Datenbank (relational) Kein Layout angegeben ...... 150 Hosting ...... 82 CSS-Klassen: Framework Begriffe ...... 62 Keinen Startpunkt gefunden ...... 144, 147 Inserttags (Übersicht) ...... 776 block ...... 239, 284 SQL ...... 64 No layout specified ...... 150 Konfigurationsdateien ...... 766 clear ...... 535 dcaconfig.php ...... 706, 770 No pages found ...... 144, 147 Live Update ...... 711 invisible ...... 535 Debugmodus ...... 173, 194 Filemount ...... 682 Log-Dateien ...... 697 CSS-Klassen: Inhaltselemente DIFF (Versionierung) ...... 217 Firefox Major-Release ...... 708 ce_comments ...... 431 Document Root ...... 57 Tastenkürzel ändern ...... 130 manuelles Update ...... 713 ce_image ...... 280 Flexible Images ...... 589

796 797 Index Index

Floats clearen ...... 535 HTML {{link_url::ID}} ...... 270 Kontrollkästchen (Formulare) ...... 370 Folder-URLs ...... 635 div-Struktur ...... 170, 524 {{link::abmelden}} ...... 662 Kopiervorgang abbrechen (Backend) ...... 157 Formatdefinitionen Ǟ Styles embed ...... 324 {{link::ID}} ...... 474 Formulare iframe ...... 324 {{link:ID}} ...... 661 L Anmeldeformular gestalten ...... 667 meta-Elemente ...... 642 {{page:rootTitle}} ...... 640 Formularfelder title ...... 639 {{user::username}} ...... 662 langconfig.php ...... 706, 767 Checkbox-Menü ...... 367, 370 HTML5 für Datum ...... 781 Layoutbereiche Datei-Upload ...... 372 neue Strukturelemente ...... 522 für E-Mail-Adressen ...... 781 eigene erstellen ...... 763 Erklärung ...... 364 picture ...... 591 für Include-Elemente ...... 780 Lightbox ...... 274 Fieldset ...... 364 und Contao ...... 522 für Link-Elemente ...... 776 Little Boxes ...... 257, 323, 526, 535 Passwortfeld ...... 365 vereinfachte Schreibweise ...... 521 für Mitglieder ...... 778 Live Update ...... 711 Radio-Button-Menü ...... 368 HTML5 oder XHTML ...... 523 für Sprachen ...... 781 localconfig.php ...... 706, 766 Select-Menü ...... 365 HTTP für Umgebungsvariablen ...... 780 Lokale Installation ...... 70 Sicherheitsabfrage ...... 373 Request und Response ...... 644 Übersicht ...... 776 Überschrift ...... 364 Status Codes ...... 645 Installation M Übersicht ...... 362 Admin-Konto anlegen ...... 79 Formulargenerator ...... 341 I Contao Check ...... 83 Mac – Contao installieren ...... 54 Foundation (Zurb) ...... 765 Datenbanktabellen anlegen ...... 77 Major-Release ...... 708 Frontend ...... 108 Inaktive Backend-Module ...... 447 Datenbankverbindung prüfen ...... 76 MAMP HTML-Grundgerüst ...... 170, 524 ...... 177 Frontend-Template importieren ...... 78 installieren ...... 54 Frontend-Module ...... 113, 155 Infobereich (Backend) ...... 126 FTP-Zugangsdaten eingeben ...... 98 ist Offline-Webspace ...... 48 Frontend-Template ...... 78, 172, 731 Inhaltselemente ...... 119 Installtool bei Online-Installation ...... 90 Umzug auf Online-Webspace ...... 93 Frontend-Vorschau ...... 670 Akkordeon ...... 312 Live Update ...... 711 Manuelles Update (FTP) ...... 713 FTP-Modus ...... 95 Artikel ...... 337 manuelles Update ...... 713 Media Query ...... 536, 561, 620 Funktion Mehrere bearbeiten ...... 164 Artikel-Teaser ...... 337 offline ...... 70 Mediabox ...... 273 Funktionen Bild ...... 279 online ...... 82 Mehrere bearbeiten ...... 231, 638, 641, 665, 695 Feed abonnieren ...... 425 Code ...... 335 Passwort für Installtool ...... 74 Mehrsprachige Website ...... 772 Kommentarfunktion ...... 428 Content-Slider ...... 506 potenzielle Probleme ...... 74, 92, 95 meta Kontaktformular ...... 341 Download ...... 337 Systemvoraussetzungen ...... 69 description ...... 642 Suchfunktion ...... 375 Downloads ...... 337 Umzug auf Online-Webspace ...... 93 keywords ...... 644 Formular ...... 337, 350 Verschlüsselungsschlüssel ...... 74 robots ...... 642 G Galerie ...... 285 Installtool viewport ...... 562 HTML ...... 323 FTP-Zugangsdaten eingeben ...... 98 Meta-Navigation ...... 245 Galerie (Inhaltselement) ...... 285 Hyperlink ...... 297 Passwort ändern ...... 74 Meta-Viewport-Tag ...... 562 Github ...... 533 in Events ...... 449 Passwort vergessen ...... 766 Minor-Release ...... 707 Google in Nachrichten ...... 398 schützen ...... 75 Mitglieder ...... 653 Google Analytics ...... 715 Include-Elemente ...... 336 An- und Abmeldung ...... 669 Google Maps ...... 751 Inhaltselement ...... 337 J Mitgliederregistrierung ...... 678 Google-Konto ...... 650, 715 Kommentare ...... 336 neue erstellen ...... 655 Webmaster-Tools ...... 650 Modul ...... 337 jQuery Passwort vergessen ...... 676 Grid-Layouts ...... 612, 613 Tabelle ...... 303 Colorbox ...... 274 Persönliche Daten ändern ...... 677 Gruppenrechte ...... 687 Text ...... 161, 266 j_accordion ...... 313 Unterschied zu Benutzern ...... 653 Top-Link ...... 294 und MooTools ...... 274 Mitgliedergruppen ...... 655 H Überschrift ...... 263 Mitgliederverwaltung ...... 676 initconfig.php ...... 706 K Mobile Seitenlayouts ...... 561 Hard Limit ...... 232 Inserttags mod_cache ...... 629 Holy Grail ...... 532, 561 :{{page:pageTitle}} ...... 640 Kalender ...... 448 mod_rewrite ...... 628 Hosting ...... 82 {{date::Y}} ...... 739 Kollation ...... 77 Module HTC-Dateien ...... 548 {{env::request}} ...... 297 Kommentare ...... 336, 428 Artikelnavigation ...... 228, 258 htdocs ...... 57 {{insert_article::ID}} ...... 737, 742 Kontaktformular erstellen ...... 341 Automatischer Logout ...... 660 {{insert_content::ID}} ...... 737, 742 Buchnavigation ...... 228, 258

798 799 Index Index

Definition ...... 155 Meta-Navigation ...... 245 S Styles ...... 188 Eigener HTML-Code ...... 155, 661 Navigationspfad ...... 257 Stylesheets ...... 183 erzeugen Quelltext ...... 113 Sitemap ...... 250 Safe Mode Hack (SMH) ...... 95, 98, 101 basic.css (Reset) ...... 194 für Kopf- und Fußbereich ...... 155 vertikal zwei Ebenen ...... 231 Seitenalias ...... 637 CSS-Framework ...... 519 Individuelle Navigation ...... 227, 246 Navigation erstellen ...... 166 Seitenlayouts ...... 115 das CSS-Framework ...... 183 Login-Formular ...... 659 Navigationsbereich (Backend) ...... 128 Ausgabeformat ...... 153, 523 externes CSS importieren ...... 221 Navigationsmenü ...... 114, 166, 227, 232, 244 Newsletter ...... 469 für mobile Seiten ...... 561 im Backend bearbeiten ...... 188 Navigationsmodule ...... 226 abonnieren ...... 481 neu erstellen ...... 153 im Debugmodus unkomprimiert ...... 194 Navigationspfad ...... 227, 257 Double Opt-In ...... 481 TinyMCE-Stylesheet ...... 760 im Seitenlayout einbinden ...... 192 Passwort vergessen ...... 676 Frontend-Module ...... 479, 482 zweispaltig ...... 486 Integration in Seitenlayouts ...... 765 Persönliche Daten ...... 677 im Frontend anzeigen ...... 478 Seitenname ...... 637 intern vs. extern ...... 184 Quicklink ...... 227 kündigen ...... 481 Seitenstruktur ...... 144 internes Stylesheet erstellen ...... 186 Quicknavigation ...... 227 automatische Weiterleitung ...... 747 SCSS ...... 117 Sitemap ...... 227 O Beispielsite erweitern ...... 149, 228 system/contao.css ...... 531 Modultemplates ...... 172 Cachezeit festlegen ...... 704 tinymce.css ...... 758, 760 MooTools Optionsfelder (Formulare) ...... 368 im Menü verstecken ...... 231 Stylesheets, intern moo_accordion ...... 313 Ordner-URLs ...... 635 und Navigation ...... 111 CSS-Dateien bereinigen ...... 700 moo_mediabox ...... 273 Seitentemplates ...... 172, 764 CSS-Import ...... 221 MooTools laden ...... 273 P Seitentitel ...... 639 im Backend bearbeiten ...... 184 und jQuery ...... 274 Select-Menü ...... 365 Tipps zum CSS-Editor ...... 215 Multi-Domain ...... 774 Pagemount ...... 682 SEO ...... 625 und CSS3 ...... 547 Music Academy Paginierung ...... 408 Aufbau der URL bei Events ...... 457 Subtemplates ...... 172 Beispielsite ...... 103 Papierdenken ...... 560 Aufbau der URL bei Nachrichten ...... 413, 414 Suchfunktion ...... 375 installieren ...... 104 Passwort ändern (Admin) ...... 680 Auto_item aktivieren ...... 414, 457 Suchindex neu aufbauen ...... 698 Theme importieren ...... 724 Passwort vergessen Google Sitemap ...... 650 Suchmaschinenoptimierung Ǟ SEO MySQL für Admin-Konto ...... 82 Seitentitel definieren ...... 639 Suchsyntax ...... 396 Datenbank erstellen ...... 66 für Installtool ...... 766 Servicenavigation Ǟ Meta-Navigation Synchronisieren ...... 138 serviert Datenbanken ...... 61 für Mitglieder ...... 676 Sicherheit Syndikation ...... 298, 301, 412, 413 und phpMyAdmin ...... 64 pathconfig.php ...... 767 Hinweise zu Themes ...... 733 SyntaxHighlighter ...... 335 PDF ...... 298, 412 Installtool schützen ...... 75 Systemeinstellungen ...... 131 N PHP Spamschutz ...... 373 Anmeldedauer ...... 133 als CGI ...... 60, 97 XAMPP-Sicherheitscheck ...... 54 Cache-Modus ...... 703 Nachrichten ...... 397 als Modul ...... 60, 95 Sidebar Datums- und Zeitformat ...... 132 Anzahl Beiträge pro Seite ...... 408 Interpreter ...... 49, 60, 95, 101 auf Startseite ...... 495 Inaktive Backend-Module ...... 447 Archiv erstellen ...... 399 php.net ...... 59 Lesetipps ...... 502 maximale Frontend-Breite ...... 284 Beitrag erstellen ...... 401 phpMyAdmin ...... 64 Quicklink-Navigation ...... 502 Speicherzeiten ...... 133 Meta-Info unterm Beitrag ...... 422 Datenbank erstellen ...... 66, 72, 90 Submit ausblenden ...... 503 Titel der Webseite ...... 131 Teaser anzeigen ...... 407 Datenbank exportieren ...... 93, 705 zufälliges Bild ...... 495 Verschlüsselungsschlüssel ...... 75 Übersicht ...... 398 Piwik ...... 716 Sitemap ...... 650 Zugriffsrechte (Standard) ...... 694 und Inhaltselemente ...... 398 Social Media System-Log ...... 697 Nachrichtenbeitrag R Beiträge weitersagen ...... 412 Systemvoraussetzungen ...... 69 Aufbau der URL ...... 413 Sortierbare Tabelle ...... 311 Systemwartung Radio-Button-Menü ...... 368 Bilder hinzufügen ...... 422 Spamschutz ...... 373 Daten bereinigen ...... 504, 700, 702 Rastersysteme (Layout) ...... 612, 613 Nur mit Teaser ...... 411 Sprachen-Fallback ...... 147, 772 Suchindex neu aufbauen ...... 698 Weiterleitung zu Seite, Artikel oder URL ... 411 Responsives Webdesign SQL Entstehung ...... 560 Navigation SQL-Dump erstellen ...... 93 T basiert auf Seitenstruktur ...... 111 Zutaten ...... 561 SQL (Sprache) ...... 64 Breadcrumb ...... 257 RewriteBase ...... 630 Startlevel ...... 232 Tabelle (Inhaltselement) ...... 303 Buchnavigation ...... 258 RewriteRule ...... 629 Startpunkt einer Website ...... 145, 772 Teaser Ǟ horizontal und vertikal ...... 244 Rich Text Editor (RTE) TinyMCE Statische Webseiten ...... 48 Bilder hinzufügen ...... 422 horizontal zwei Ebenen ...... 237 RSS-Feed ...... 425 Stoplevel ...... 232 für Artikel ...... 742

800 801 Index Index

für Nachrichten ...... 407, 409, 416 tinymce.css ...... 758, 760 ist Offline-Webspace ...... 48 Z Meta-Info unterhalb ...... 422 Top-Link (Inhaltselement) ...... 294 Sicherheitscheck ...... 54 Übersicht gestalten ...... 418 Twitter ...... 298, 412 Umzug auf Online-Webspace ...... 93 Zugriffsrechte Template-Marker (Debugmodus) ...... 173 Webserver testen ...... 52 für Seiten und Artikel ...... 693 Templates U XML in Systemeinstellungen ...... 694 analytics_google ...... 715 Feed-Datei ...... 425 Linux ...... 100 Änderung geht nicht ...... 504 Unsemantic (CSS-Framework) ...... 765 XML-Dateien bereinigen ...... 700 Übersicht anzeigen lassen ...... 695 Debugmodus ...... 173 Update XML-Sitemap (Google) ...... 650 Unterschied zu Zugriffsschutz ...... 693 Definitionen ...... 172 Checkliste ...... 710 Zugriffsschutz ...... 671, 693 fe_page ...... 172, 524, 764 Live Update ...... 711 Y für Downloads ...... 670 Frontend-Templates ...... 172, 731 manuell (FTP) ...... 713 nav_default ...... 176, 179, 248 Sollte ich updaten? ...... 709 YAML (CSS-Framework) ...... 765 Template-Marker ...... 173 Vortrag (PDF) ...... 710 Unterordner erstellen ...... 139 URLs umschreiben XHTML und HTML5 ...... 523 flache URLs ...... 633 Text ein- und ausblenden ...... 312 Ordner-URLs ...... 635 Textbausteine erstellen ...... 760 URL-Suffix ...... 637 Theme-Manager ...... 717 Themes ...... 717 V aktivieren in Seitenlayouts ...... 726 anpassen ...... 728 Verschieben abbrechen (Backend) ...... 157 cto-Datei ...... 719 Versionen vergleichen (Backend) ...... 130, 217 Einsatzgebiete ...... 721 Versionierung ...... 130 enthaltene Komponenten ...... 717 Videos einbinden ...... 323 exportieren ...... 719 Viewport ...... 563 Fehler nach Importieren ...... 728 importieren ...... 724 W Music Academy importieren ...... 724 Webpublishing, statisch ...... 48 neu erstellen ...... 151 Webseite vs. Website ...... 132 nicht enthalten ...... 720 Webserver Quellen für ...... 721 404 – Nicht Gefunden ...... 645 Sicherheitshinweise ...... 733 Antwortnummern ...... 644 Symbole zur Bearbeitung ...... 152 Document Root ...... 57 Template-Ordner erstellen ...... 139 htdocs ...... 57 und Multi-Site-Installationen ...... 721, 774 mod_rewrite ...... 628 von RockSolid ...... 723 serviert Webseiten ...... 57 $this->framework ...... 527 startet nicht ...... 52 $this->head ...... 529 Status Codes ...... 644 $this->stylesheets ...... 528 testen ...... 52 Tickets bei Github ...... 533 Website-Template ...... 172 TinyMCE ...... 268 Webspace prüfen mit Contao Check ...... 83 CSS-Klassen anzeigen ...... 758 Weiterleitung, 301 permanent ...... 747 HTML-Elemente markieren ...... 268 Windows – Contao installieren ...... 50 Hyperlinks erstellen ...... 269 WYSIWYG-Editor ...... 268 im Überblick ...... 268 neue Version ...... 267 Textbausteine ...... 760 X Textgröße Editorfenster ...... 759 XAMPP tiny_templates ...... 760 Control Panel ...... 51 und Fußbereich ...... 737 installieren (Windows) ...... 50 Vorlagen (Templates) ...... 760

802 803 Wissen, wie’s geht.

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und ist als Autor des CSS-Bestsellers »Little Boxes« bekannt, der es versteht, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen.

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit Peter Müller allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht- lich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor Contao – Das umfassende Handbuch und beim Verlag. 803 Seiten, gebunden, mit CD, 4. Auflage 2014 39,90 Euro, ISBN 978-3-8362-3016-2 Teilen Sie Ihre Leseerfahrung mit uns! www.galileo-press.de/3682