Image

Inhaltsverzeichnis

1Contao: Ein CMS stellt sich vor

1.1Ein Blick auf Contao

1.2Die wichtigsten Funktionen

1.3Das kann Contao

1.3.1Contao erweitern

1.3.2Designs, wie ich sie will

1.3.3Rechteverwaltung

1.3.4Formulare für jeden Zweck im Handumdrehen

1.3.5Der integrierte CSS-Editor

1.3.6Mobile Seiten sind kein Problem

1.3.7Automatische Updates für mehr Sicherheit

1.3.8CSS- und JavaScript-Frameworks

1.4Hierfür ist Contao das perfekte System

1.5Der Erstkontakt: Contao direkt online ausprobieren

1.5.1Ein Blick ins Backend

1.5.2So ist das mit der Seitenstruktur

2Eine lokale Testumgebung aufsetzen und Contao installieren

2.1XAMPP und MAMP installieren

2.1.1Die Installation für Windows-Freunde: XAMPP

2.1.2MAMP für Mac OS-Anwender

2.2Contao auf dem Testserver installieren

2.2.1Eine Datenbank wird benötigt

2.2.2Contao herunterladen und die Verzeichnisstruktur anlegen

2.2.3Endlich: die Contao-Installation auf dem Testserver

3So arbeitet Contao

3.1Das Backend ist Ihre Schaltzentrale

3.2Das perfekte Arbeitsprinzip im Backend

3.2.1Änderungen übernehmen

3.2.2Kopieren und verschieben

3.2.3Hilfreiche Icons gibt es auch

3.2.4Contao lässt sich auch über die Tastatur bedienen

3.2.5Mehrere Datensätze gleichzeitig bearbeiten

3.3Die persönlichen Benutzereinstellungen

3.4Die wichtigsten Einstellungen der Website vornehmen

3.4.1Der Titel der Website

3.4.2Zeit und Datum einstellen

3.4.3Wichtige Grundeinstellungen

3.4.4Das Backend anpassen

3.4.5Schicke Adressen für das Frontend

3.4.6Den Datenschutz nicht vergessen

3.4.7Nicht benötigte Backend-Module ausschalten

3.4.8Die Suchfunktion

3.4.9Speicherzeiten

3.4.10E-Mails verschicken

3.5Die Dateiverwaltung

3.5.1Die Verzeichnisstruktur anpassen

3.5.2Dateien synchronisieren

Raspberry Pi als Contao-Testsystem ohne Internet

4Seiten anlegen und verwalten

4.1Das sind Seiten, das sind Artikel

4.1.1Inhalte verstehen

4.1.2Module, das Salz in der Suppe

4.1.3Jetzt kommt das Design ins Spiel

4.1.4Frontend-Templates

4.2Die Seitenstruktur anlegen

4.2.1Und jetzt kommen die anderen Seiten dran

4.3Themes und Seitenlayouts erstellen

4.3.1Ein Theme anlegen

4.3.2Seitenlayouts im Handumdrehen erstellen

4.3.3Das Seitenlayout zuweisen

4.3.4So arbeiten die Templates

4.3.5Ein neues Template anlegen

5Artikel erstellen und Inhalte einfügen

5.1Jetzt kommt Leben in die Startseite

5.1.1Dem Artikel ein Bild spendieren

5.1.2Artikel nur für bestimmte Personen freigeben

5.1.3Inhalte zeitgesteuert veröffentlichen

5.1.4WYSIWYG…bitte was?

5.1.5Einen völlig neuen Artikel anlegen

5.1.6Mit Teasertexten arbeiten

5.2Inhaltselemente in die Artikel einfügen

5.2.1Überschriften für die Strukturierung

5.2.2Texte einfügen

5.2.3HTML

5.2.4Aufzählungen

5.2.5Tabellen einfügen

5.2.6Codefragmente darstellen

5.2.7Inhalte platzsparend über ein Akkordeon präsentieren

5.2.8Content Slider

5.2.9Hyperlinks einfügen

5.2.10Top-Link

5.2.11Bilder gehören auch dazu

5.2.12Bildergalerien

5.2.13Video/Audio

5.2.14YouTube-Videos einbinden

5.2.15Downloads anbieten

5.2.16Externe Elemente über Include einbinden

5.2.17Kommentare

5.3So verbreiten Sie die Artikel über Facebook & Co.

5.4Module sind das Herzstück

5.4.1Eine Suchfunktion integrieren

5.4.2Den Copyright-Hinweis notieren

5.4.3Module ins Seitenlayout einbinden

5.4.4Module schützen

5.4.5Weitere Standardmodule selbst testen

5.5Damit die Artikel auch tatsächlich angezeigt werden

6Backend-Benutzer

6.1Das sind Benutzer, das sind Mitglieder

6.2Das leistet die Benutzerverwaltung

6.3Benutzergruppen anlegen

6.3.1Die Module freigeben

6.3.2Pagemounts und Filemounts

6.3.3Einzelne Felder freigeben

6.3.4Benutzergruppen deaktivieren/aktivieren

6.4So werden Benutzer erstellt

6.4.1Individuelle Einstellungen für jeden Benutzer

6.4.2Den Benutzer wechseln

6.4.3Die Zugriffsrechte festlegen

7Die Mitgliederverwaltung

7.1Mitgliedergruppen anlegen

7.2Mitglieder anlegen

7.3Die Seiten zum An- und Abmelden erstellen

7.3.1Notwendige Seiten anlegen

7.4Die notwendigen Module erstellen

7.4.1Das Modul für die Anmeldung

7.4.2So klappt die automatische Abmeldung

7.4.3Ein Link zur Anmeldung

7.4.4Log-in-Namen und Abmelden-Link einbinden

7.4.5Die Module einbinden

7.4.6So wird der Log-in-Bereich komfortabler

7.4.7Änderung der persönlichen Daten ermöglichen

7.4.8Die offene Registrierung

7.5Einen Download-Bereich für registrierte Benutzer einrichten

7.5.1Ein Verzeichnis angeben

7.5.2Den Download-Bereich einrichten

7.5.3Testen des Download-Bereichs

8Die perfekte Navigation

8.1Menüs sind auch nur Module

8.2Ein erster Blick auf die Menüarten von Contao

8.3Ein horizontales Menü einbinden

8.4Drop-down-Menüs erstellen

8.5Auch vertikale Menüs sind möglich

8.6Das Stylesheet definieren

8.7Vertikale und horizontale Menüs kombinieren

8.8Festlegen, welche Einträge im Menü angezeigt werden sollen

8.9Wissen, wo man ist: Brotkrumen-Menüs

8.10Von einer Seite zur nächsten springen

8.11Sitemaps liefern den absoluten Durchblick

9Mit Extensions noch mehr aus Contao herausholen

9.1Contao und der Erweiterungskatalog

9.1.1Die Erweiterungen installieren

9.1.2So wird man unliebsame Erweiterungen wieder los

9.2Formulare für alle Fälle

9.2.1Die Formularfelder anlegen

9.2.2Die Daten in der Datenbank speichern

9.2.3Ein typisches Kontaktformular

9.2.4Die Dankesseite mit Inhalten füllen

9.3Eine Suchfunktion einbinden

9.4Google Maps einbinden

9.4.1Die Karte einbinden

9.4.2Weitere Optionen nutzen

10Das individuelle Design

10.1Hier gibt es Themes

10.1.1Kostenlose Themes für jedermann

10.2Themes installieren

10.3Responsives Design

10.4Inhalte anpassen

10.4.1CSS verwenden

10.4.2Ein Blick auf die internen Stylesheets

10.4.3Der CSS-Editor von Contao

10.4.4CSS-Klassen und -IDs

10.4.5Die richtigen Elemente finden

11Suchmaschinenoptimierung, Sicherheit und die Provider

11.1Suchmaschinenoptimierung

11.1.1Ein paar Worte zum Thema SEO vorweg

11.1.2Suchmaschinenfreundliche URLs

11.1.3Ein SEO-Herzstück: der Titel der Webseite

11.1.4Von Aliasen und Suffixen

11.1.5Allgemeine Metaangaben setzen

11.1.6Suchmaschinen mit der robots.txt steuern

11.1.7Fehlerseiten abfangen

11.1.8XML-Sitemaps

11.2Die Geschwindigkeit der Website erhöhen

11.2.1Testen Sie Ihre Seite

11.2.2Requests verringern

11.2.3CSS optimieren

11.2.4Grafiken fürs Web

11.2.5ETags und Komprimierung

11.2.6FastCGI einsetzen

11.3Sicherheit und Backups

11.3.1Sicherheitsrisiken auf der Spur

11.3.2Mailinglisten

11.3.3Sichere Passwörter

11.3.4Updates einspielen

11.3.5Das manuelle Update

11.3.6Den Live-Update-Service nutzen

11.3.7Backups erstellen

11.4So kommt Contao zum Provider

11.4.1Der Safe Mode Hack

Stichwortverzeichnis

Image

Contao: Ein CMS stellt sich vor

Content-Management-Systeme (CMS) gibt es zuhauf. Seit vielen Jahren buhlen TYPO3, WordPress, Joomla! & Co. um die Gunst von Entwicklern und Anwendern. Mit Contao, das früher übrigens TYPOLight hieß, gibt es einen weiteren Mitstreiter auf dem Markt. Das System ist schlank, seitenbasiert und auch für größere Projekte geeignet. Kein Wunder, dass Contao immer beliebter wird.

1.1Ein Blick auf Contao

Mit der anfänglichen Namenswahl TYPOLight hat sich der damalige Alleinentwickler des Systems, Leo Feyer, sicherlich keinen Gefallen getan. Denn für viele Interessenten suggerierte dieser Name, TYPOLight sei eine Art kleiner Bruder von TYPO3, biete nur einen eingeschränkten Funktionsumfang und eigne sich nur für kleine Projekte. Das stimmt aber nicht. Deshalb kam es im Jahr 2010 zur Umbenennung von TYPOLight in Contao. Und dabei ist es bis heute geblieben.

Sie haben sich also für Contao entschieden, um Ihre Website damit erstellen und verwalten zu können. Dieses Buch führt Sie Schritt für Schritt in die Arbeit mit diesem Content-Management-System ein. Zunächst geht es aber darum, was ein CMS eigentlich ist und was Contao auszeichnet.

»Contao ist ein Content-Management-System auf Open-Source-Basis.« – ein Satz, der gleich zwei Fragen aufwirft:

ImageWas ist eigentlich ein CMS?

ImageWas ist Open Source?

Ein CMS ist ein Inhaltsverwaltungssystem, mit dem sich Inhalt (Content) erstellen, bearbeiten und organisieren lässt, auf Wunsch durch mehrere Benutzer.

Wenn Sie eine Website auf Basis eines CMS wie Contao erstellen, können Sie diese also selbst jederzeit verwalten, neue Inhalte hinzufügen und aktualisieren. Die Inhalte selbst werden in Contao über einen Editor angelegt, der in seiner Funktionsweise an Word erinnert. Dadurch lassen sie sich bequem formatieren, ohne dass man HTML-Kenntnisse etc. besitzen muss. Das ist ein riesiger Vorteil gegenüber der Erstellung von Webseiten quasi per Hand auf Basis von HTML. Dank eines CMS kann also jeder seine Website betreiben, ohne sich erst mit HTML befassen zu müssen.

Und was verbirgt sich hinter dem Begriff Open Source? Darunter versteht man Software, deren Quellcode frei zugänglich ist. Klingt sperrig, ist für Sie als Anwender aber enorm wichtig. Denn Open Source bedeutet, dass Sie die Software kostenlos verwenden dürfen.

Contao ist ebenfalls Open Source und wird unter der General Public License (GNU GPL) vertrieben. Sie können Contao also kostenlos herunterladen und einsetzen. Ausführliche Informationen zur GNU GPL finden Sie auf der Seite http://www.gnu.de.

1.2Die wichtigsten Funktionen

Wann lohnt sich eigentlich ein CMS wie Contao? Man soll bekanntermaßen nicht mit Kanonen auf Spatzen schießen. Das gilt auch für den Einsatz eines Content-Management-Systems. Prinzipiell ist es so: Wer eine kleine Website erstellen will, auf der sich die Inhalte nur selten ändern, kann zu einer statischen Webseite greifen.

Was eine statische Seite ist

Statische Seite klingt nicht schön, zugegeben. Hinter dieser Bezeichnung verbirgt sich eine Webseite, bei der der HTML-Code quasi per Hand geschrieben wird. Bei jeder notwendigen Änderung muss man also die betreffende HTML-Datei in einem Editor öffnen und darin die gewünschten Anpassungen vornehmen. Anschließend muss die Datei per FTP auf den Server geladen werden. Das ganze Prozedere ist natürlich enorm aufwendig. Richtig schwierig wird es, wenn sich beispielsweise die Navigationsstruktur ändert. Dann müssen in aller Regel sämtliche Dateien des Projekts verändert werden. Gleiches gilt für Designveränderungen. Wer seiner Seite ein neues Design geben will, muss ebenfalls jede einzelne Datei anpassen. Und das ist nicht schön, glauben Sie es mir.

Prinzipiell sind also statische Seiten nicht unbedingt ideal. Es gibt allerdings durchaus Einsatzgebiete, in denen sie ihre Daseinsberechtigung haben. Ein Beispiel dafür sind sogenannte Webvisitenkarten. Stellen Sie sich den Webauftritt einer Bäckerei vor. Welche Informationen sind dort in der Regel zu finden?

ImageÖffnungszeiten

ImageAdresse

Imagegegebenenfalls Informationen über Produkte und Zusatzstoffe

Diese Informationen sind weder tagesaktuell, noch werden sie sich häufig ändern. Eine solche Website lässt sich üblicherweise sehr gut als statische Variante umsetzen.

Werden Webseiten jedoch umfangreicher und ist mit häufigen Aktualisierungen zu rechnen, kommen Content-Management-Systeme ins Spiel.

Es gibt noch mehr

In diesem Buch liegt der Fokus – das verwundert bei dem Namen sicherlich wenig – auf Contao. Selbstverständlich gibt es noch viele weitere gute CM-Systeme. Beispielhaft seien dafür TYPO3, WordPress, Drupal und Joomla! genannt. Diese Systeme spielen in diesem Buch allerdings keine Rolle, es wird also auch keinen Vergleich mit ihnen geben. Das liegt vor allem an der Komplexität dieses Themas. Ausführliche Informationen und einen genialen CMS-Vergleich finden Sie aber beispielsweise auf der Seite http://www.visual4.de/open-source-cms-system/cms-vergleich-joomla-wordpress-typo3-drupal-contao-plone.html.

CM-Systeme ermöglichen die Verwaltung der Website, ohne dass man sich unbedingt mit HTML auskennen muss. Denn in einem CMS sind Design und Inhalt vollständig voneinander getrennt. Das ist ein riesiger Vorteil zur manuellen Variante. In einem CMS kann man sich ganz auf die Erstellung der Inhalte konzentrieren und Artikel schreiben. Hinzu kommt die Möglichkeit, verschiedene Benutzer und Benutzergruppen anzulegen, die jeweils ganz bestimmte Rechte besitzen, also verschiedene Dinge anstellen dürfen. So gibt es üblicherweise einen Administrator, den Chef im Ring sozusagen, der alles darf. Dieser Administrator legt dann beispielsweise Benutzer an, die nur auf ganz bestimmten Seiten Inhalte erstellen dürfen.

Ein erstes Beispiel soll zeigen, wie detailliert sich das in Contao einstellen lässt. Die folgende Abbildung zeigt das sogenannte Backend, also den Administrationsbereich.

Image

Bild 1.1: Das ist Ihr künftiges Königreich.

Eingeloggt hat sich hier ein Benutzer mit Administratorrechten. Das erkennt man sehr schön an den zahlreich zur Verfügung stehenden Optionen. Das Backend eines normalen Redakteurs, dem nur einige wenige Bearbeitungsmöglichkeiten freigeschaltet wurden, präsentiert sich da schon deutlich bescheidener.

Image

Bild 1.2: Hier gibt es viel weniger Optionen.

Mitleid muss man nun allerdings nicht mit diesem Redakteur haben. Tatsächlich werden ihm nämlich nur die Optionen angeboten, die er auch tatsächlich braucht.

Plötzlich Englisch

Sie brauchen sich übrigens nicht zu wundern, dass die gezeigte Website englischsprachig ist. Es ist die Beispielseite von Contao, die standardmäßig in Englisch verfasst ist. Die Beispielseite gibt es übrigens auch direkt online. So können Contao-Interessenten gleich mal testen, wie sich das System anfühlt. Mehr zur Onlinedemo gibt es dann im weiteren Verlauf dieses Kapitels. Eine deutsche Version der Beispielseite existiert allerdings nicht.

Die meisten Redakteure finden es übrigens super, wenn ihnen nur wenige Funktionen zur Verfügung stehen. So können sie nämlich in der Gewissheit leben, bei einem Fehler nicht das gesamte Projekt lahmzulegen.

Ein paar technische Aspekte zum Verständnis

Der Computer, auf dem Sie arbeiten und mit dem Sie Webseiten aufrufen, wird Client genannt. Der Rechner, auf dem ein Webserverprogramm läuft und auf dem Ihre Webseite letztendlich liegt, ist der Server. Der Client (in der Regel Ihr Browser) schickt – wenn eine Webseite aufgerufen wird – eine Anfrage an den Server. Der Server nimmt diese Anfrage entgegen, verarbeitet sie weiter und sendet das Ergebnis zurück an den Client.

Puh, das klingt furchtbar technisch, ist aber ein ganz entscheidendes Prinzip bei der Arbeit mit Contao. Und das war es auch schon, was das Fachchinesisch betrifft, versprochen!

1.3Das kann Contao

Es stellen sich natürlich ein paar Fragen, wenn man beginnt, mit Contao zu arbeiten: Was kann dieses System eigentlich, und welche Funktionen weist es auf? Auf den folgenden Seiten wird ein Blick auf die wichtigsten Funktionen geworfen, die Contao zu bieten hat. Ausführliche Informationen gibt es dann im weiteren Verlauf dieses Buchs. Es schadet aber erfahrungsgemäß nicht, wenn man gleich am Anfang weiß, wohin die Reise mit dem System gehen kann.

1.3.1Contao erweitern

Contao bringt von Haus aus schon eine enorme Funktionsvielfalt mit. Das werden Sie in Kürze merken. Aber das System kann zunächst einmal selbstverständlich nicht jede Funktion, die möglicherweise von irgendjemandem benötigt wird, direkt umsetzen. An diesem Punkt betreten die Erweiterungen die Contao-Bühne. Dank dieser sogenannten Extensions lässt sich Contao um nahezu jede erdenkliche Funktionalität erweitern.

Einen Eindruck von den Möglichkeiten, die die Extensions bieten, können Sie sich auf der Seite https://contao.org/de/extension-list.html verschaffen.

Image

Bild 1.3: Hier gibt es fast alles, was das Herz begehrt.

Bei Drucklegung dieses Buchs gab es bereits mehr als 1.500 Erweiterungen. Hier eine kleine Auswahl der Einsatzgebiete, die von Contao-Erweiterungen abgedeckt werden können:

ImageFormulare

ImageNewsletter

ImageBildergalerien

ImageSuchmaschinenoptimierung

ImageBesucherzähler

ImageShopsysteme

ImageMitgliederverwaltung

ImageVideoverwaltung

ImageFacebook-Button

ImageBackup-Tools

Imagekomfortablere Inhaltsverwaltung

ImageSuchfunktion

ImageBlog

ImageNews

ImageFAQ-Bereich

Sie sehen schon, wie leistungsfähig man Contao durch den Einsatz von Erweiterungen machen kann.

1.3.2Designs, wie ich sie will

Für das Aussehen von Contao-Websites sind die sogenannten Themes verantwortlich. Dank dieser Themes lässt sich das Design der Seiten im Handumdrehen verändern.

Image

Bild 1.4: Ein System, verschiedene Designs.

In den meisten CM-Systemen gibt es entweder Themes (WordPress) oder Templates (Joomla!). Bei Contao existiert beides. Ein Contao-Theme liefert das vollständige Design der Seite und lässt sich über den Theme-Manager oder das Installtool importieren. Es beinhaltet eine Kombination aus Seitenlayouts, Stylesheets und Frontend-Modulen. Im Gegensatz dazu enthält ein Template eben nicht nur das Design, sondern auch gleich noch sämtliche Inhalte und die Seitenstruktur. Genau hier liegt das Problem. Denn wird ein solches Template importiert, gehen alle zuvor in der Contao-Installation erstellten Inhalte verloren. Themes lassen sich hingegen auch dann installieren, wenn es bereits Inhalte gibt, ohne dass diese überschrieben werden.

Die Themes, die es gibt, sind größtenteils im Contao Theme-Store (https://themes.contao.org/de) aufgeführt. Eine Auswahl kostenloser Themes finden Sie beispielsweise auf der Seite http://www.contao-theme.de/artikelliste/kategorie/kostenlos-themes.html. Ausführliche Informationen zum Thema Themes gibt es außerdem in Kapitel 10 dieses Buchs.

1.3.3Rechteverwaltung

Für Websites, an denen mehrere Personen arbeiten, ist eine ausgefeilte Rechteverwaltung wichtig. Nur so lässt sich festlegen, wer welche Inhalte bearbeiten darf. Contao ist auch auf diesem Sektor bestens gerüstet. So lassen sich abgespeckte Backends für Redakteure ebenso einfach wie geschützte Frontend-Bereiche erstellen.

Contao erlaubt das Anlegen von Benutzern und Mitgliedern. Benutzer können auf das Backend der Seite zugreifen und beispielsweise Inhalte anlegen und verwalten. Was die jeweiligen Benutzer dabei dann tatsächlich dürfen, können Sie – schließlich sind Sie als Administrator der König im Backend – explizit bestimmen.

Etwas anders sieht die Sache bei den Mitgliedern aus. Diese dürfen ausschließlich auf das Frontend zugreifen. Dafür stellt man ihnen üblicherweise ein Log-in-Formular zur Verfügung.

Image

Bild 1.5: Contao-Demo-Website: Die Mitglieder dürfen sich einloggen.

Nach der Anmeldung können die Mitglieder dann zum Beispiel auf Seiten und Downloads zugreifen, von denen »normale« Seitenbesucher nichts mitbekommen. (Auch hier noch einmal der Hinweis, dass die Beispiel-Website von Contao in Englisch verfasst ist.)

1.3.4Formulare für jeden Zweck im Handumdrehen

Selbstverständlich werden Sie in Ihre Website Formulare einfügen wollen, und sei es bloß ein einfaches Kontaktformular. In Contao lassen sich Formulare ganz einfach und ohne HTML-Kenntnisse erstellen. Tatsächlich hat das System nämlich von Haus aus einen Formulargenerator an Bord.

Image

Bild 1.6: Auch komplexere Formulare sind möglich.

Dank des Formulargenerators können Sie also Formulare erstellen, ohne dass Sie sich mit HTML beschäftigen müssen. Vorgestellt wird der Generator ausführlich in Kapitel 9.

1.3.5Der integrierte CSS-Editor

Eine der Besonderheiten von Contao ist der CSS-Editor, der fest im System verankert ist.

Keine Angst vor CSS

An dieser Stelle begegnet Ihnen möglicherweise das erste Mal der Begriff CSS. Dahinter verbergen sich die Cascading Style Sheets. Was ist denn das? Etwas Ähnliches wie die Formatvorlagen in Word. Wenn Sie eine Textpassage markieren und dann mit der Formatvorlage Überschrift auszeichnen, bekommt die Überschrift ein ganz bestimmtes Schriftbild zugewiesen. So können Sie schnell sämtliche Überschriften im Dokument formatieren. Gefällt Ihnen später das Aussehen der Überschriften nicht mehr, müssen Sie nur die Formatvorlage ändern. Word passt dann alle Überschriften automatisch der veränderten Vorlage entsprechend an. Und so etwas gibt es mit CSS auch für Websites.

Dank des integrierten Editors lässt sich die Webseite individuell mittels CSS gestalten, und zwar ganz ohne CSS-Kenntnisse.

Der Editor ist so aufgebaut, dass die Eigenschaften auch für Laien verständlich aufbereitet sind. Sicherlich ist das ein großer Vorteil im Vergleich zu vielen anderen Systemen. Denn dort muss man, wenn man denn die CSS-Syntax verändern will, zumeist manuell in die CSS-Dateien eingreifen. Und eben das ist nicht jedermanns Sache.

1.3.6Mobile Seiten sind kein Problem

Selbstverständlich unterstützt Contao die Darstellung von Webseiten auf Smartphones und Tablets.

Image

Bild 1.7: Die Demo-Website »Music Academy« auf dem iPhone.

Contao hilft Ihnen bei der Optimierung der Website für mobile Geräte auf unterschiedliche Art und Weise. Zunächst einmal lassen sich sogenannte Media Queries definieren. Mit deren Hilfe kann man Stylesheets beispielsweise in Abhängigkeit von Bildschirmgröße und -auflösung laden. Außerdem bietet Contao die Möglichkeit, für jede Seite neben einem normalen Seitenlayout auch ein Layout für mobile Seiten zu definieren.

Image

Bild 1.8: Alternative Seitenlayouts lassen sich definieren.

Zudem setzt Contao automatisch das Meta-Viewport-Tag. Das hilft letztendlich bei der Steuerung des Zoomverhaltens auf iPhone & Co.

1.3.7Automatische Updates für mehr Sicherheit

Die Sicherheit eines Systems wie Contao lässt sich nur durch ständige Updates gewährleisten. Diese werden bei Contao regelmäßig und pünktlich geliefert. In Contao gibt es Major-, Minor- und Bugfix-Versionen sowie die Long-Term-Support-Releases. Major-Releases stellen immer einen Versionssprung wie von Contao 2 auf Version 3 dar und sollen etwa alle zwei Jahre veröffentlicht werden. Die Minor-Releases (3.1 auf 3.2) erscheinen unregelmäßig alle paar Wochen. Bugfix-Releases, mit denen Fehler behoben und kleinere Korrekturen vorgenommen werden, gibt es bei Bedarf. Angekündigt wird deren Veröffentlichung im Twitter-Account des Contao-Hauptentwicklers (https://twitter.com/leofeyer).

Die Long-Term-Support-Releases werden über einen Zeitraum von mindestens 18 Monaten mit Updates versorgt. Aktuell ist man bei Version 2.11. Version 3.x ist hingegen die momentane Major-Version von Contao.

Es gibt verschiedene Möglichkeiten, das System immer auf dem aktuellen Stand zu halten. Zunächst einmal lassen sich Updates manuell durchführen. Alternativ kann man auf das sogenannte Live Update zurückgreifen. Dabei aktualisiert man das System, ohne selbst die Contao-Archive herunterladen zu müssen. Das Live Update ist allerdings nicht kostenlos. Für die notwendige Contao-Live-Update-ID werden bei einer Domain 9,90 Euro fällig. Zwei Domains kosten dann beispielsweise 11,89 Euro. Sinnvoll ist diese Variante natürlich vor allem für all diejenigen, die mehrere Contao-Installationen betreiben.

Hat man die Live Update ID gekauft, kann man die Updates ganz bequem einspielen.

Image

Bild 1.9: Die gewünschte Version wird gewählt.

Wer allerdings glaubt, dass man hier lediglich immer die neueste Version einspielen kann, täuscht sich. Tatsächlich bekommt man eine ganze Menge mehr für sein Geld geboten.

So kann man beispielsweise auf sämtliche Contao-Versionen up- und downgraden. Sie haben eine 3er-Installation, wollen aber mal wissen, wie sich die 2er anfühlt? Kein Problem dank Live Update.

Um die Sicherung der Datenbank muss man sich vor dem Update nicht kümmern. Contao erstellt im Vorfeld ein Backup von ihr. Wieder ein Punkt, der für die automatische Lösung spricht.

Sehr interessant ist darüber hinaus der direkte und vollautomatische Vergleich der veränderten Templates mit den Originaldateien.

Image

Bild 1.10: Die Dateien werden verglichen.

Diese Veränderungen sind sehr übersichtlich dokumentiert.

1.3.8CSS- und JavaScript-Frameworks

Moderne Websites setzen vermehrt auf CSS- und JavaScript-Frameworks. Solche Frameworks werden auch in Contao genutzt. So ist im Lieferumfang von Contao bereits ein auf Holy Grail basierendes CSS-Framework enthalten. Zudem werden die derzeit wohl beliebtesten JavaScript-Frameworks jQuery und MooTools unterstützt. Die Sache mit den Frameworks klingt sperrig, zugegeben. Dennoch sind es enorm hilfreiche Tools. So kann man beispielsweise im Handumdrehen Bilder-Slider erstellen. Dabei wechseln die Bilder einer Galerie automatisch und mit hübschen Übergängen. Herrlich, wenn sich auf der Webseite etwas bewegt und schick aussieht, oder?

Wer eine solche Anwendung »von Hand« per JavaScript erstellen will, braucht schon einiges an Know-how. In Contao erledigt man so etwas per Mausklick.

1.4Hierfür ist Contao das perfekte System

Immer wieder hört man, Contao sei nur für kleine Projekte geeignet. Diese Aussage trifft heute weniger zu als jemals zuvor. Tatsächlich ist Contao ein robustes System, mit dem sich auch große Websites, die stark frequentiert sind, aufbauen lassen. Wie, Sie glauben mir nicht? Dann werfen Sie doch einfach mal einen Blick auf die Seite https://contao.org/de/case-studies.html. Dort sind zahlreiche Fallstudien aufgeführt, die zeigen, wie Contao in den unterschiedlichsten Projekten eingesetzt wird.

Image

Bild 1.11: Lassen Sie sich von den Projekten inspirieren.

Prinzipiell ist Contao für jede Art von Website geeignet. Wer ein gutes System braucht, das validen Code liefert und eine leistungsstarke Benutzerverwaltung besitzt, liegt damit goldrichtig.

Contao kann aber mehr. Wer will, kann mit Contao nämlich auch echte Onlineshops aufbauen. Dafür gibt es verschiedene Shoplösungen wie beispielsweise Contao webShop, chShop und acquistoShop.

Mittlerweile existiert tatsächlich eine stattliche Anzahl an Shops, die auf einer dieser Lösungen und somit letztendlich auch auf Contao basieren. Einen Eindruck davon können Sie sich auf der Seite http://www.contao-webshop.de/referenzen.html verschaffen.

1.5Der Erstkontakt: Contao direkt online ausprobieren

Bevor man sich ausführlich mit einem neuen System befasst, ist natürlich zunächst einmal interessant, wie dieses CMS aussieht, wie es sich »anfühlt« und wie es überhaupt funktioniert. Dafür eignet sich eine Onlinedemo von Contao hervorragend, die unter http://demo.contao.org angeboten wird.

Was Sie dort sehen, ist »Music Academy«. Es handelt sich dabei um ein Template, das geeignet ist, die Funktionsweise von Contao ausführlich zu testen. Viele Einsteiger installieren das Beispieltemplate aus diesem Grund.

Klicken Sie sich ruhig einmal durch die Frontend-Seiten. So können Sie bereits einiges davon mitnehmen, was an Contao so interessant ist.

Besonders interessant sind dabei die Einträge unterhalb von The academy.

Image

Bild 1.12: Hier findet man interessante Funktionen.

Denn dahinter verbergen sich Hyperlinks, die einige Dinge aufrufen, die einen zweiten und dritten Blick wert sind. Los geht es mit dem Punkt News.

Image

Bild 1.13: Neuigkeiten wurden veröffentlicht.

Hinter diesem Eintrag verbirgt sich das Nachrichten-Modul, das fester Bestandteil von Contao ist. Dank dieses Moduls können Sie über das Backend Nachrichten erstellen, die im Frontend der Seite in umgekehrter chronologischer Reihenfolge angezeigt werden. Die Nachrichten lassen sich außerdem in einem Archiv übersichtlich präsentieren.

Für die Nachrichten selbst lassen sich Teasertexte erstellen. Erst wenn ein Besucher einen davon anklickt, ist der vollständige Text zu sehen.

Image

Bild 1.14: Die gesamte Meldung ist zu sehen.

Weiter geht es mit dem Calendar.

Image

Bild 1.15: Ist er nicht praktisch, der Kalender?

Der Name lässt es bereits vermuten. Und tatsächlich verbirgt sich dahinter ein Kalender, hinter dem wiederum das Events-Modul steckt. Mit diesem Modul bietet Contao beispielsweise die Möglichkeit, eine durchaus ansprechende Terminverwaltung in Webseiten zu integrieren. Dabei kann man die Termine in einen Kalender eintragen. Die einzelnen Termine sind wiederum anklickbar und präsentieren anschließend ausführlich, was zu ihnen notiert wurde.

Image

Bild 1.16: So sieht ein typischer Eintrag aus.

Was darf auf einer Webseite eigentlich nicht fehlen? Bilder natürlich. Und mittlerweile wollen Bilder nicht nur angezeigt, sie wollen in Szene gesetzt werden. Werfen Sie dafür einen Blick auf den Punkt Impressions.

Image

Bild 1.17: Eine Bildergalerie ist zu sehen.

Hier wird eine Bildergalerie präsentiert. Solche Galerien lassen sich in Contao sehr einfach umsetzen. Sie müssen lediglich die Bilder auf den Server laden und die Galerie konfigurieren. Für alles andere – also beispielsweise auch für die Generierung der kleinen Vorschaubilder – sorgt Contao still und heimlich im Hintergrund.

Klickt man eines der Bilder an, öffnet es sich in Originalgröße in einem Lightbox-Fenster.

Image

Bild 1.18: Die Lightbox setzt das Bild ansprechend in Szene.

Voraussetzung dafür ist die Aktivierung eines der beiden mitgelieferten JavaScript-Frameworks (jQuery oder MooTools). Beide lassen sich kinderleicht mit wenigen Mausklicks aktivieren.

Folgen Sie nun dem Link Courses.

Image

Bild 1.19: Übersichtliche Präsentation der Kurse in einer Tabelle.

Auf den ersten Blick sieht das Ganze nach einem normalen Artikel aus. Aber der Teufel liegt im Detail. Lassen Sie Ihre Augen zunächst in den oberen Bereich des Artikels wandern. Dort gibt es gleich mehrere Symbole zu bestaunen.

Drucker, PDF, Facebook, Twitter und Google+

Diese Symbole können bei Bedarf jedem Artikel zugewiesen werden. So kann man also beispielsweise ganz individuell entscheiden, welche Inhalte via Facebook geteilt werden sollen.

Lassen Sie uns weiter auf der Artikelseite verweilen und die Tabelle betrachten.

Image

Bild 1.20: Noch sieht es nach einer schnöden Tabelle aus.

Zugegeben, es gibt aufregendere Dinge als Datentabellen. Die vorliegende Tabelle hat es aber durchaus in sich. Und damit meine ich nicht ihren Inhalt, sondern die Funktionen, die sie zu bieten hat. Eine Tabelle mit Funktionen?

In der Tabelle sind Kurse aufgeführt, die momentan nach ihrem Beginn sortiert sind. Klickt man jetzt aber beispielsweise in der Kopfzeile auf Students, ändert sich die Sortierung.

Image

Bild 1.21: Die Sortierreihenfolge wurde verändert.

Tatsächlich orientiert sich die Sortierung nun an der Anzahl der Studenten, die an den jeweiligen Kursen teilnehmen. Damit aber noch nicht genug. Wird erneut auf Students geklickt, verändert sich die Sortierreihenfolge erneut.

Image

Bild 1.22: Die Sortierreihenfolge wurde umgedreht.

Jetzt sind zuerst die Kurse zu sehen, an denen die meisten Studenten teilnehmen. Solche sortierbaren Tabellen lassen sich in Contao ganz einfach umsetzen.

Okay, zugegebenermaßen sind Google und Bing große Klasse. Aber wäre es nicht schön, wenn Sie als Seitenbetreiber Ihre ganz individuelle Suchmaschine betreiben könnten? Nun werden Sie natürlich mit Ihrer Website nicht in Konkurrenz mit den großen Suchanbietern treten wollen. Ein durchaus erfüllbarer Wunsch ist aber, eine Suchfunktion in Ihre Website zu integrieren, über die sich Ihre Website durchsuchen lässt. Und was soll ich sagen? Auch das ist mit Contao ein Kinderspiel.

Wie eine solche Suchfunktion aussehen kann, können Sie sich unter dem Menüpunkt Search ansehen.

Die Suchfunktion ist durchaus komfortabel. So kann man zunächst einmal entscheiden, ob in der Trefferliste alle eingegebenen Suchbegriffe aufgeführt sein sollen. Aber auch andere Dinge wie Wildcards, Phrasensuche und die Verwendung von Pluszeichen für die besondere Gewichtung eines Suchbegriffs sind möglich.

Image

Bild 1.23: So sieht die Suche aus.

Die Ergebnisliste orientiert sich dann ebenfalls an denen großer Suchdienste.

Image

Bild 1.24: Eine übersichtliche Trefferliste wird geboten.

So wird im oberen Fensterbereich zunächst einmal die Anzahl der Suchtreffer angezeigt. Ebenso ist dort zu sehen, wie lange die Suchanfrage gedauert hat. In den eigentlichen Suchtreffern sind die verwendeten Suchbegriffe dann jeweils hervorgehoben. Auch das ist natürlich eine nette Funktion. Sie sehen also, dass die Suche durchaus komfortabel ist.

Contao ermöglicht den Aufbau geschützter Seitenbereiche. Das sind solche, auf die ausschließlich registrierte und eingeloggte Mitglieder zugreifen dürfen. Auf der Demowebsite steht ein solcher Mitgliederbereich zur Verfügung.

Image

Bild 1.25: Eine Log-in-Maske gibt es ebenfalls.

Melden Sie sich, um den Mitgliederbereich zu betreten, mit den folgenden Zugangsdaten an:

ImageUsername = d.evans

ImagePassword = donnaevans

Nach erfolgreicher Anmeldung sind Sie Mitglied des Violinenkurses. Herzlichen Glückwunsch dazu, auch wenn Sie vielleicht gar nicht Violine spielen. Lassen wir die Musik aber kurz beiseite und widmen wir uns dem sich Ihnen nach der Anmeldung bietenden Gesamtbild.

Image

Bild 1.26: Eine neue Seite wird angezeigt.

Was ist hier passiert? Unterhalb von Courses ist der neue Eintrag Violin Master Class hinzugekommen. Und dieser Eintrag wird tatsächlich nur solchen Personen angezeigt, die der betreffenden Mitgliedergruppe angehören. Somit lassen sich also Seitenbereiche aufbauen, die speziell für bestimmte Personenkreise optimiert sind. Eine feine Sache, nicht wahr? Die Mitgliederverwaltung ist dabei übrigens äußerst komfortabel. So gibt es unter anderem eine Passwort-vergessen-Funktion.

Image

Bild 1.27: Wenn man mal das Passwort vergessen hat …

Hierüber kann man sich also auch dann wieder einloggen, wenn man mal die Zugangsdaten vergessen hat. Auch das ist eine wichtige Funktion, die das System direkt von Haus aus mitbringt.

Inhalte werden in Contao stets in Form von Artikeln gespeichert. Dabei ist jeder Artikel immer einer Seite zugeordnet. Auch das lässt sich wieder sehr schön anhand eines Beispiels zeigen. Werfen Sie dazu einen Blick ins Frontend der Seite unter The academy/Teachers (http://demo.contao.org/en/teachers.html).

Image

Bild 1.28: Diese Lehrer arbeiten am Institut.

Es handelt sich dabei also um die Seite Teachers. Innerhalb von Teachers gibt es mehrere Artikel. Welche das sind, kann man im Backend-Modul Artikel sehen.

Der Zugriff aufs Backend

Im nächsten Abschnitt wird übrigens gezeigt, wie Sie auf das Backend zugreifen können.

Rufen Sie dazu im Backend Inhalte/Artikel auf und klicken Sie auf den Seitennamen Teachers.

Image

Bild 1.29: Ist das Ihr erster Kontakt mit dem Backend?

In der sich öffnenden Übersicht befinden sich die zur Seite Teachers gehörenden Artikel. Und wie im Frontend sind auch hier natürlich drei Artikel aufgeführt:

ImageTeachers

ImageHelen Lewis

ImageJames Wilson

Somit kann man im Backend also sehr schön die im Frontend dargestellte Struktur sehen.

Elemente ausblenden

Übrigens werden nicht alle im Backend vorhandenen Artikel zwangsläufig im Frontend angezeigt. Wenn Sie beispielsweise einen Artikel vorübergehend mal nicht mehr brauchen, können Sie ihn per Mausklick deaktivieren. Er ist dann im Frontend nicht mehr sichtbar, im Backend kann man auf ihn aber nach wie vor zugreifen. Wird der Artikel später wieder benötigt, lässt er sich genauso einfach wiederherstellen.

Über die Stiftsymbole lassen sich die einzelnen Artikel bearbeiten.

Deutlich ist bislang geworden, dass eine Seite einen oder mehrere Artikel enthalten kann. Ein Artikel wiederum besteht zumeist aus mehreren Inhaltselementen. Typische Inhaltselemente sind Text, Tabellen, Bilder etc. Die Inhaltselemente lassen sich innerhalb der Website an vordefinierten Positionen einfügen. Um sich anzeigen zu lassen, welche Inhaltselemente in einem Artikel enthalten sind, klickt man auf dessen Stiftsymbol in der Artikelübersicht. Auf der sich öffnenden Seite sind zunächst einmal allgemeine Metainformationen zum jeweiligen Inhaltselement zu sehen.

Image

Bild 1.30: Das sind die sogenannten Metadaten.

Hier können Sie also unter anderem erkennen, von wem und wann der entsprechende Inhalt angelegt wurde. Interessant ist das natürlich vor allem bei einem Mehrbenutzersystem. Ging nämlich beispielsweise mal etwas schief, kann man so ruck, zuck den »Schuldigen« aufspüren.

Der untere Seitenbereich ist für die Anzeige der Inhaltselemente verantwortlich. Im Fall des Artikels Helen Lewis sind das exakt zwei Elemente:

ImageText

ImageModul

Die Reihenfolge der Inhaltselemente lässt sich per Drag-and-drop variieren. Auch das ist ein enormer Vorteil. Sie wollen plötzlich ein Bild unterhalb eines Texts anzeigen und nicht mehr darüber? Kein Problem, das geht bei Contao per Drag-and-drop.

Bearbeiten lassen sich die Inhaltselemente jeweils einzeln. Dazu klickt man bei dem betreffenden Element auf das Stiftsymbol. Im Fall des Textelements Helen Lewis kann man anschließend die Überschrift und den eigentlichen Text anpassen. Dieses Öffnen einzelner Inhaltselemente mag auf den ersten Blick ungewohnt erscheinen, ist aber durchaus praktisch. So kann man sich beim Bearbeiten nämlich tatsächlich immer auf das jeweilige Element konzentrieren, ohne riesige Eingabemasken bearbeiten zu müssen.

1.5.1Ein Blick ins Backend

Okay, genug im Frontend getummelt. Jetzt geht es in den zentralen Bereich der Webseite, nämlich ins Backend. Für Sie als Administrator ist das Backend der Dreh- und Angelpunkt. Denn über das Backend haben Sie Zugriff auf alle relevanten Funktionen und Optionen, die Contao zu bieten hat.

Bei der Demowebsite rufen Sie die folgende Adresse auf, um sich ins Backend einzuloggen: http://demo.contao.org/contao/

Daraufhin wird eine Log-in-Maske angezeigt. Stellen Sie unbedingt im Feld Backend-Sprache den Eintrag Deutsch ein. Ich gehe nämlich auf den folgenden Seiten davon aus, dass bei Ihnen ein deutschsprachiges Backend angezeigt wird.

Los geht es also mit dem Erstkontakt zum Backend.

Image

Bild 1.31: Loggen Sie sich ins Backend ein.

Über diese Maske loggt man sich in das Backend der Seite ein. Bei der Demoanwendung lautet die Benutzername-Passwort-Kombination k.jones und kevinjones.

Loggt man sich als Kevin Jones in das Backend ein, ist man dort als Administrator unterwegs, wodurch man tatsächlich Zugriff auf alle Funktionen der Seite hat. Richtet man andere Benutzer ein, können diesen abgestufte Benutzerrechte zugewiesen werden, sodass sie nicht alle Elemente im Backend zu sehen bekommen.

Viele Köche und der Brei

Sie kennen das alte Sprichwort mit den vielen Köchen, die den Brei verderben? So ist es auch bei Contao. Erfahrungsgemäß ist es nie gut, wenn es mehrere Administratoren gibt, denn diese kommen sich oftmals ins Gehege. Üblicherweise gibt es daher jeweils nur einen Chef im Ring bzw. einen Administrator.

Direkt nach dem Log-in als Kevin Jones werden allgemeine Informationen zur aktuellen Contao-Installation angezeigt.

Image

Bild 1.32: So sieht das Backend aus.

Dazu gehören zunächst einmal Dinge wie die Inhalte, die zuletzt bearbeitet wurden.

Im linken Fensterbereich sind schön übersichtlich die Backend-Module aufgelistet. Darüber bekommt man Zugriff auf alle Funktionen des Backends. Diese Module bilden das Herzstück von Contao, und Sie werden es mit ihnen ab sofort immer wieder zu tun bekommen.

Sehen Sie sich ruhig ein wenig im Backend um. Klicken Sie sich durch die einzelnen Funktionen und sehen Sie sich das System gut an. Auf diese Weise werden Sie rasch feststellen, wie intuitiv Contao eigentlich ist.

Es kann nichts kaputtgehen

Übrigens wird die Demowebsite nach einer bestimmten Zeit automatisch zurückgesetzt. Es kann also nichts kaputtgehen, wenn Sie irgendwo klicken bzw. Einstellungen vornehmen. Trauen Sie sich und testen Sie Contao auf Herz und Nieren!

1.5.2So ist das mit der Seitenstruktur

Wie eingangs beschrieben, handelt es sich bei Contao um ein seitenbasiertes CMS. Die Seitenstruktur, die im Backend angelegt wird, verwendet Contao beispielsweise für die Navigation im Frontend. So sieht man im Backend gleich, wie die Struktur der Navigation im Frontend letztendlich aussehen wird.

Wie eng die Seitenansichten in Backend und Frontend zusammenhängen, können Sie ganz einfach testen.

ImageDazu rufen Sie Layout/Seitenstruktur auf und navigieren über die Pluszeichen bis zum Punkt The academy.

Image

ImageDort klicken Sie bei News auf das Symbol Seite ID X veröffentlichen/unveröffentlichen.

ImageIm Frontend ist die Seite dann tatsächlich nicht mehr zu sehen.

So direkt arbeiten also Backend und Frontend zusammen.

Am Ende dieses Kapitels sollten Sie einen ersten Eindruck von Contao gewonnen haben. Hat Ihnen gefallen, was Sie gesehen haben? Prima, dann können wir jetzt direkt und ohne Umschweife in die Arbeit mit Contao einsteigen.