Sie sind auf Seite 1von 42

Crashkurs für Contao

Dein perfekter Einstieg in Contao!

Crashkurs für Contao

© Copyright 2019 Contao Academy | Christian Feneberg

Alle Rechte vorbehalten. Kein Teil dieses E-Books darf reproduziert oder in irgendeiner Form übermittelt werden, weder elektronisch, mechanisch oder in sonst irgendeiner Form. Sie dürfen den Inhalt, oder Auszüge davon, nicht verkaufen, weitergeben oder sonst wie vervielfältigen. Kein Teil dieses Dokuments darf ohne vorherige schriftliche Genehmigung des Verfassers publiziert, reproduziert oder in irgendeiner Form übermittelt werden, weder elektronisch, mechanisch oder in sonst irgendeiner Form oder sonst wie gewerblich genutzt werden.

Haftungsausschluss Die Informationen in diesem E-Book sind persönliche Ansichten und Erfahrungen des Autors und wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Der Autor übernimmt keine juristische Verantwortung oder Haftung für eventuell verbliebene Fehler und deren Folgen. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.

Kontakt Contao Academy Christian Feneberg Hochstraß 2 87437 Kempten

Internet: https://contao-academy.de E-Mail: support@contao-academy.de

Veröfentlicht am 04. Februar 2019 Titelbild: iStock #515596706 | Urheber: vgajic

Inhalt

Crashkurs für Contao

Allgemeines

 

3

Über Contao

 

3

Die Zielgruppe von Contao

 

4

Funktionen und Vorteile von Contao Wichtige Links

 

5

 

8

Erste Schritte

 

9

Die Contao Demo

 

9

Contao installieren

 

10

Welches Hosting für Contao? Contao Backend Login

 

12

 

13

Übersicht Backend Symbole in Contao Aufau einer Website

 

14

 

15

 

17

Was erwartet dich?

 

17

Systemeinstellungen

 

18

Anlegen der Seitenstruktur Seitenlayout erstellen

 

19

 

23

Seitenlayout mit Seiten verknüpfen Frontend-Module anlegen

 

28

 

29

CSS und Contao

 

33

Neue Inhaltselemente anlegen Dateien hochladen

 

35

 

39

Erweiterungen

 

40

Funktionsumfang von Contao erweitern Schluss

40

41

Wie geht es weiter?

 

41

Allgemeines

Über Contao

Allgemeines Über Contao Erfinder & Hauptentwickler Leo Feyer Crashkurs für Contao Aktuelle Hauptentwickler (Stand:

Erfinder & Hauptentwickler Leo Feyer

Crashkurs für Contao

Aktuelle Hauptentwickler (Stand: 04.01.2019) Leo Feyer, Martin Auswöger, Andreas Schempp, Yanick Witschi, David Greminger, Jim Schmid

Contao in Zahlen (Stand: 23.11.2017) Downloads: 1.314.472 (Quelle: contao.org) Erweiterungen: 1.981 (Quelle: contao.org) Marktanteile: DE: 3,81% (#4), AT: 3,8% (#5), CH: 3,09% (#6) (cmscrawler.com)

Beliebtheit von Contao Laut einer Webworker-Umfrage von 2014 liegt Contao auf Platz 3 der beliebtesten Content-Management-Systeme. Quelle: Webkrauts (http://webkrauts.de/artikel/2014/jetzt-wissen-wir-es)

Im Magazin Screenguide (#28) belegte Contao Platz 1 bei einem CMS-Vergleich zwischen 6 populären Open-Source-Systemen. Mit Contao ließ sich die Beispielseite am schnellsten umsetzen, obwohl der Tester Gernot Schulmeister vorher noch nie mit Contao gearbeitet hatte.

Wichtige Contao Meilensteine 2006: Erstes TYPOlight Release 2010: TYPOlight wird in Contao umbenannt 2010: Contao 2.11 wird als letzte 2er Version veröfentlicht 2012: Contao 3 wird veröfentlicht 2015: Contao 3.5 und Contao 4 werden veröfentlicht 2017: Contao 4.4 LTS mit neuem Backend-Theme wird veröfentlicht 2018: Contao Manager 1.0 nutzt "Composer Cloud Resolver"

Die Zielgruppe von Contao

Crashkurs für Contao

Für wen ist Contao? Contao ist ein Programm für Webmaster, die damit interaktive Webseiten erstellen und verwalten möchten. Contao ist aber auch ein Tool für Entwickler, die eigene Module auf der Basis eines durchdachten Systems erstellen möchten. Und Contao ist genauso eine Software für Redakteure und Anwender, welche die Inhalte Ihrer Internetpräsenz selbständig erstellen und verwalten möchten. (Quelle: Keynote Leo Feyer - Contao Konferenz 2016)

Für welche Websites eignet sich Contao? Im Prinzip kannst du mit Contao jede beliebige Art von Website umsetzen. Es können damit sehr kleine aber auch sehr große und umfangreiche Websites realisiert werden. So kannst du mit Contao z.B. einen Online-Shop, ein News- Portal, eine Immobilienverwaltung oder einen umfangreichen Produkt-Katalog erstellen. Oder du nutzt Contao als Basis für komplexe Web-Apps. Allerdings sind hier Erweiterungen und umfangreiche Programmierkenntnisse nötig.

Aus meiner Sicht eignet sich Contao durch den seitenbasierten Aufau besonders gut für Unternehmens-Websites. Diese lassen sich mit Contao schnell und professionell erstellen.

Blogs mit Contao? Contao bietet die Möglichkeit mit Hilfe des Newsmoduls einen Blog zu erstellen. Allerdings fehlen aus meiner Sicht ein paar Funktionen, die bei einem Blogsystem dazu gehören. Durch Erweiterungen lassen sich allerdings ein Großteil der fehlenden Funktionen nachrüsten.

Darf ich Contao für kommerzielle Projekte verwenden? Ja, die GNU Lesser General Public License (LGPL), unter der Contao seit der Version 2.5.0 lizenziert ist, erlaubt die Verwendung des Systems für kommerzielle Projekte. Zu beachten ist dabei, dass die Copyright-Hinweise sowohl in den Contao-Dateien als auch auf der Anmeldeseite des Backends nicht entfernt oder verändert werden dürfen. (Quelle: contao.org)

Welche Vorkenntnisse sind nötig? Aufgrund der geringen Anzahl an fertigen Themes, verfügst du idealerweise über Basiswissen zum Erstellen von Websites, sowie gute Kenntnisse in HTML und CSS.

Crashkurs für Contao

Funktionen und Vorteile von Contao

Hier ein paar ausgewählte Highlights:

Seitenbasiertes CMS

• Übersichtlicher Aufau dank hierarchischer Seitenstruktur

• Einfaches bearbeiten, verschieben, kopieren und löschen der Seiten

• Seiten lassen sich per Klick aus- und einblenden

• Zeitgesteuertes Veröfentlichen von Seiten

• Navigation wird automatisch aus Seitenstruktur generiert

Inhalte werden in Elemente aufgeteilt

• Eigene Elemente für Texte, Bilder, Tabellen, Listen, …

• Einfaches bearbeiten, verschieben, löschen und kopieren der einzelnen Elemente

• Texte werden mit dem Rich Text Editor TinyMCE einfach formatiert

• Kurze Einarbeitungszeit für Redakteure und Anwender

Zentrale Dateiverwaltung

• Übersichtliche Strukturierung dank Unterordner

• Meta-Daten können für Bilder und Dateien vergeben werden

• Einfacher Upload per Drag & Drop

• Datenbankgestütztes Dateisystem ermöglicht nachträgliches Umbenennen der Dateien

• Geschützte Verzeichnisse anlegen

Layoutbuilder und integriertes CSS-Framework

• 1, 2 oder 3 Spalten-Layouts mit wenigen Klicks erstellen

• Unterstützt mehrere Layouts

• Layouts lassen sich gezielt den einzelnen Seiten zuordnen

• Statische und responsive Layouts möglich

• CSS-Framework lässt sich nach Bedarf ganz oder teilweise deaktivieren

• Basiert auf dem Holy-Grail-Layout (Hauptspalte zuerst)

• Optional ist ein 12-Spalten Grid-System nutzbar

• Einfaches einbinden von Google-Webfonts

• Externe CSS-Dateien lassen sich einfach im Layout einbinden

• jQuery und Mootools per Klick aktivieren

• Interner CSS-Editor zum Erstellen von Stylesheets direkt im Backend

Templates

Crashkurs für Contao

• Barrierefreier HTML5-Code

• Modular Aufau

• Quellcode mit schema.org ausgezeichnet

• Templates für alle Inhaltselemente und Module bereits enthalten

• Templates lassen sich individuell je Element und Modul anpassen

• Angepasste Templates werden bei Contao-Updates nicht überschrieben

Integrierter Formulargenerator

• Individuelle Formulare mit wenigen Klicks erstellen

• Alle gängigen Eingabefelder möglich

• Automatisches validieren der Eingaben

• Tabellenloses Layout

• Integrierter Spamschutz

• Speichern der Eingaben in einer Tabelle möglich

Suchmaschinenoptimiert

Moderner und optimierter HTML5-Code

• Sprechende URLs

Titel und Beschreibung je Seite frei konfigurierbar

Sitemap.xml wird automatisch generiert

Bilder lassen sich einfach mit ALT-Tags ergänzen

Performance optimiert

• Hochwertiger Programmcode

• Schlankes Kern-System

• Intelligenter Cache-Modus integriert

• HTML-Markup komprimieren

• CSS und JS-Dateien automatisch komprimieren und kombinieren

• Automatische Optimierung von Vorschau-Bildern

Einfach erweiterbar

• Backend lässt individuell erweitern

• Umfangreiches Framework für Programmierer

• Basiert auf dem Symfony-Framework

• Große Auswahl an freien Erweiterungen

• Nutzt den Composer zur Paketverwaltung

Umfangreiche Rechteverwaltung

• Zugrifsrechte werden für Benutzer und -gruppen vergeben

• Zugrif kann auf Seiten, Formulare und Module beschränkt werden

• Backend lässt sich dadurch für Redakteure stark vereinfachen und auf die nötigen Funktionen reduzieren

Responsive Webdesign

Crashkurs für Contao

• Responsive CSS-Framework enthalten

• Responsive Image-Funktion

• Separates Seitenlayout für mobile Endgeräte möglich

• Einbinden eigener und fremder Frameworks möglich (z.B. Bootstrap)

Weitere coole Features

• Mehrere Elemente können gleichzeitig bearbeitet werden

Inhalte per Drag&Drop sortieren

Versionierung und Wiederherstellen von Inhalten

Importieren und Exportieren von Themes (Designs)

• Geschützte Mitgliederbereiche erstellen

• Native Unterstützung von SCSS und LESS

• Schutz der E-Mail-Adressen vor Bots

• Integriertes Slider-Modul für Bilder und Inhalte

• Bildergalerie mit Lightbox-Efekt

• Einfaches Bereitstellen von Downloads

• Übersichtliches Backend

• Volltext Suchfunktion

• Integriertes Kalender-Modul

• Integriertes News/Blog-Modul

• Integriertes Newsletter-Modul

• Integriertes FAQ-Modul

• Einfaches Update per Composer / Contao Manager

• Barrierefrei

• Mehrsprachigkeit

• Mehrere Domains mit einer Installation verwalten

• Einfaches Integrieren von Video und Audiodateien

• Einfaches Integrieren von YouTube und Vimeo Videos

Contao bietet LTS-Versionen LTS-Releases (Long-Term-Support-Releases) sind Langzeit-Releases, die über die Dauer von 4 Jahren Support erhalten. Dabei gibt es 3 Jahre Bugfixes gefolgt von einem Jahr Security-Fixes.

Die LTS-Versionen gewährleisten so einen zuverlässigen Betrieb und eine Planungssicherheit über einen längeren Zeitraum.

Crashkurs für Contao

Wichtige Links

Projektwebsite Die zentrale Anlaufstelle für das Contao Projekt. https://contao.org

GitHub Quellcode von Contao, Tickets zur Fehlerbehebung https://github.com/contao

Contao Release-Plan Hier findest du eine Übersicht der aktuellen und geplanten Contao-Releases. https://contao.org/de/release-plan.html

Contao-Check Hilfetool mit dem die Kompatibilität des Servers getestet werden kann. https://github.com/contao/check

Ofzielle Contao Demo Demo-Installation um Contao zu testen. http://demo.contao.org/contao

Ofzieller Contao Verein Mit deiner Mitgliedschaft unterstützt du aktiv die Weiterentwicklung von Contao. https://association.contao.org

Social-Media-Kanäle

Contao Jahrbuch Das Praxisbuch für Entscheider, Entwickler & Agenturen. https://www.contao-jahrbuch.de

Weitere Links zu Contao:

Erste Schritte

Die Contao Demo

Crashkurs für Contao

Wenn du Contao ansehen möchtest, ohne dass du gleich selbst einen Installation durchführst, dann kannst du dazu die ofzielle Contao Online-Demo nutzen. http://demo.contao.org/contao

die o f zielle Contao Online-Demo nutzen. http://demo.contao.org/contao © 2019 Contao Academy | contao-academy.de 9

Crashkurs für Contao

Contao installieren

Voraussetzungen Contao benötigt einen Webserver wie Apache oder NGINX mit PHP- und MySQL-Support.

Minimale Anforderungen Contao 4.4

• PHP-Version 5.6

• MySQL 5.0.3

Minimale Anforderungen ab Contao 4.5

• PHP-Version 7.1

• MySQL 5.5.7 (Option innodb_large_prefix aktiv)

Tipp:

Wenn möglich solltest du immer die aktuellste PHP-Version einsetzen.

Contao-Installation durchführen Es gibt mehrere Möglichkeiten Contao zu installieren. Für Einsteiger ist die die Installation per Contao Manager empfohlen.

Was ist der Contao Manager? Der Contao Manager ist ein zusätzliches Tool, welches eine grafische Oberfläche zur einfachen Verwaltung einer Contao-Installation bietet. Alternativ können auch alle Befehle direkt über den Composer auf der Kommandoziele des Server per SSH ausgeführt werden. (Ofzielle Doku unter: https://docs.contao.org/books/manager/de/)

Schritt 1: Hosting konfigurieren:

In Contao 4 werden alle öfentlich erreichbaren Dateien im Unterorder

bereitgestellt. Erstelle deswegen auf deinem Server einen neuen Ordner web

/web
/web

und setze das Wurzelverzeichnis (Document Root) der Domain auf diesen Unterordner (z.B. über das Admin-Panel des Hosting-Providers).

Beispiel: example.com zeigt auf das Verzeichnis /www/example/web

Schritt 2: Contao Manager installieren

1. Contao Manager von contao.org herunterladen

2. Per FTP-Programm (z.B. FileZilla, WinSCP) mit dem Webserver verbinden

3. Neuen Unterordner

4. Datei

web

anlegen (falls noch nicht erledigt)

contao-manager.phar

web

per FTP-Programm auf den Server in das

übertragen

neu erstellte Verzeichnis

5.

contao-manager.phar

in

contao-manager.phar.php

Crashkurs für Contao

umbenennen

(Wichtig: Bitte erst nach dem Upload umbenennen!)

Schritt 3: Contao Manager einrichten

1. Contao Manager aufrufen (http://www.example.com/contao-manager.phar.php)

2. Neues Benutzerkonto anlegen (Benutzername + Passwort)

3. Schaltfläche [Benutzerkonto erstellen] klicken

4. Hosting-Anbieter konfigurieren durch Klick auf [Konfigurieren]

5. Vordefinierte Konfiguration auswählen oder [Andere…] und eine individuelle Konfiguration zum PHP-Binary eintragen Wichtig: Haken bei „Composer Cloud Resolver“ aktiv lassen!

6. Anschließend [Speichern] klicken

Schritt 4: Contao-Installation ausführen

1. Nach der erfolgreichen Systemprüfung [Installation starten] klicken

2. Version ändern (nur nötig, wenn die LTS-Version gewünscht wird)

3. Schaltfläche [Contao installieren] klicken

4. Warten bis die Meldung "Installation abgeschlossen!" angezeigt wird

Schritt 5: Datenbankverbindung erstellen

1. Schaltfläche: [Datenbank aktualisieren] klicken

2. [Lizenz akzeptieren] klicken

3. Passwort für Installtool festlegen

4. Datenbankverbindung eingeben (Host, Benutzer, Passwort, Datenbank) und [Einstellungen speichern]

5. [Datenbank aktualisieren] klicken und Tabellen anlegen lassen

6. Administratorkonto für die Anmeldung im Contao-Backend erstellen

7. Fertig!

Hinweis:

Eine ausführliche Installationsanleitung mit Video findest du unter:

Alternative: Contao 4 per Composer installieren Falls du gerne über die Kommandozeile des Server arbeitest und einen SSH- Zugang zu deinem Hosting besitzt, kannst du Contao auch ohne den Contao Manager installieren.

Wie das funktioniert siehst du in diesem YouTube Video:

Crashkurs für Contao

Welches Hosting für Contao?

Contao 4 hat im Gegensatz zu Contao 3.5 erhöhte Anforderungen an das Hosting. Solltest du Probleme mit der Installation oder Ausführung von Contao haben, dann kann es auch an deinem Hosting liegen.

Am häufigsten gibt es Probleme, weil zu wenig RAM zur Verfügung steht. "PHP Fatal error: Allowed memory size of XXX bytes exhausted"

Sehr gute Erfahrung hab ich mit den folgenden Anbietern:

Hostingwerk Tarif: All-In https://hostingwerk.de

All-Inkl Tarif: Premium https://all-inkl.com

WebGo Tarif: CMS-Power oder SSD Business https://www.webgo.de

Cyon (Schweiz) Tarif: ab Single https://www.cyon.ch/

Eine Übersicht welche Hoster mit Contao 4 getestet wurden und was zu bechten ist, findest du unter: https://github.com/contao/contao-manager/wiki

Crashkurs für Contao

Contao Backend Login

Um die Verwaltungsoberfläche (Backend) von Contao zu erreichen, musst du in der Adresszeile deines Browsers deine Domain und dann den Zusatz /contao eingeben.

Das sieht dann z. B. so aus:

http://www.meine-coole-domain.de/contao

Als Ergebnis erscheint die Anmeldeseite von Contao.

/contao Als Ergebnis erscheint die Anmeldeseite von Contao. © 2019 Contao Academy | contao-academy.de 13

Übersicht Backend

Crashkurs für Contao

Übersicht Backend Crashkurs für Contao (1) Infobereich Das Glockensymbol zeigt wichtige Hinweise an. Über [ Vorschau

(1) Infobereich Das Glockensymbol zeigt wichtige Hinweise an. Über [Vorschau] öfnet sich die Frontend-Vorschau und über ein Dropdown gelangst du zum Benutzer-Profil und kannst dich vom Backend abmelden.

(2) Navigationsbereich

INHALTE: Verwaltung der Inhalte deiner Website

LAYOUT: Verwaltung der Seitenstruktur, sowie Einstellungen für Layout, Module und Templates

BENUTZERVERWALTUNG: Rechte- und Zugrifsverwaltung für Backend- und Frontend-Benutzer

SYSTEM: Dateiverwaltung, Einstellungen, Systemwartung, System-Log

(3) Arbeitsbereich Der Inhalt in diesem Bereich ändert sich abhängig vom ausgewählten Menüpunkt.

(4) Fußzeile Zeit dir die aktuell verwendete Contao-Version an.

Crashkurs für Contao

Symbole in Contao

Im Backend findest du immer wieder die folgenden Symbole.

Ansicht Artikel

du immer wieder die folgenden Symbole. Ansicht Artikel Ansicht Inhaltselemente © 2019 Contao Academy |

Ansicht Inhaltselemente

wieder die folgenden Symbole. Ansicht Artikel Ansicht Inhaltselemente © 2019 Contao Academy | contao-academy.de 15

Ansicht Seitenstruktur

Crashkurs für Contao

Ansicht Seitenstruktur Crashkurs für Contao Hinweis: Wenn du länger mit dem Mauszeiger über einem Symbol bleibst,

Hinweis:

Wenn du länger mit dem Mauszeiger über einem Symbol bleibst, dann wird dir ein Hilfetext eingeblendet.

Crashkurs für Contao

Aufau einer Website

Was erwartet dich?

Ich erkläre dir im Folgenden die wichtigsten Schritte beim Einsatz von Contao. Auf alle Details kann ich nicht eingehen, allerdings solltest du mit diesen Infos eine erste kleine Website mit Contao erstellen können.

eine erste kleine Website mit Contao erstellen können. Umfangreicher Basiskurs für Contao 4: Wenn du eine

Umfangreicher Basiskurs für Contao 4:

Wenn du eine ausführliche Schritt für Schritt Anleitung mit allen Details suchst, dann empfehlen wir dir unseren Contao 4 Basiskurs.

Dieser Basiskurs besteht aus 21 Modulen mit insgesamt 195 Videos und ist somit das derzeit größte verfügbare Videotraining für Contao.

Systemeinstellungen

Navigation: „System > Einstellungen“

Crashkurs für Contao

Folgende Einträge sollten hier angepasst werden:

1. Titel der Website

2. Datum und Zeitformat (d.m.Y bzw. d.m.Y H:i)

3. E-Mail-Adresse des Systemadministrators

(d.m.Y bzw. d.m.Y H:i) 3. E-Mail-Adresse des Systemadministrators © 2019 Contao Academy | contao-academy.de 18

Crashkurs für Contao

Anlegen der Seitenstruktur

Die Seitenstruktur ist das zentrale Element in Contao. Ohne eine Seitenstruktur bekommst du im Frontend nur eine Fehlermeldung zu sehen. Bevor also Layout, Module und Inhalte erzeugt werden, musst du eine Seitenstruktur anlegen. Diese kann später natürlich problemlos erweitert werden.

Navigation: „Layout > Seitenstruktur“

Startpunkt einer Website erstellen Zunächst muss ein neuer Knotenpunkt für die Website angelegt werden. Dazu klickst du auf [Neue Seite] und dann auf den [Pfeil].

klickst du auf [ Neue Seite ] und dann auf den [ Pfeil ]. Hinweis :

Hinweis:

Weitere Startpunkte benötigst du nur für mehrsprachige Websites oder Multidomains. In den meisten Fällen reicht ein Startpunkt.

Die folgende Einstellungen sind nötig:

Crashkurs für Contao

1. Seitentyp: „Startpunkt einer Webseite

2. Seitenname: erscheint nur im Backend

3. Seitentitel: erscheint im Browsertitel als Zusatz auf jeder Seite

4. Sprache: „de“ und Haken bei „Sprachen-Fallback“ setzen

5. Haken setzen bei „Seite veröfentlichen

6. [Speichern und schließen] klicken

„ Seite verö f entlichen “ 6. [ Speichern und schließen ] klicken © 2019 Contao

Crashkurs für Contao

Reguläre Seiten anlegen Nachdem wir nun unseren Startpunkt angelegt haben, können wir darunter unsere gewünschten Seiten anlegen.

Du klickst erneut auf [Neue Seite]. Um die Position zu bestimmen, wählst du das Icon, bei dem der Pfeil nach rechts zeigt.

wählst du das Icon, bei dem der Pfeil nach rechts zeigt. Folgende Einstellungen sind für eine

Folgende Einstellungen sind für eine reguläre Seite nötig:

1. Seitentitel: Name der Seite, welcher in der Navigation erscheint

2. Seitenalias: wird im Browser gemeinsam mit dem Domainnamen zur Seiten-URL angezeigt (Tipp: Bei der Startseite sollte aus technischen Gründen der alias immer auf „index“ konfiguriert sein)

3. Haken setzen bei "Seite veröfentlichen"

sein) 3. Haken setzen bei " Seite verö f entlichen " © 2019 Contao Academy |

Crashkurs für Contao

Außerdem sind individuelle Metadaten für die Googlesuche sinnvoll:

• Seitentitel (wenn nichts eingetragen = Seitenname)

• Beschreibung der Seite

Hinweis:

Um sofort die nächste Seite anzulegen, klickst du am Ende auf die Schaltfläche (Button) [Speichern & Neu]. So öfnet sich direkt erneut die Eingabemaske um eine neue Seite anzulegen.

3. 404 Fehlerseite anlegen Zum Schluss legst du noch eine Seite vom Typ „404 Seite nicht gefunden“ an.

noch eine Seite vom Typ „ 404 Seite nicht gefunden “ an. Beispiel für eine Seitenstruktur

Beispiel für eine Seitenstruktur So könnte am Ende eine einfache Seitenstruktur aussehen.

Seitenstruktur So könnte am Ende eine einfache Seitenstruktur aussehen. © 2019 Contao Academy | contao-academy.de 22

Crashkurs für Contao

Seitenlayout erstellen

Wenn du deine Website jetzt im Frontend aufrufst, erscheint die Meldung „No layout specified“. Genau darum kümmern wir uns nun.

No layout specified “. Genau darum kümmern wir uns nun. Bevor du ein Layout anlegen kannst,

Bevor du ein Layout anlegen kannst, benötigst du ein Theme. Vor diesem Schritt macht es allerdings noch Sinn eine Dateistruktur anzulegen, in welcher die Theme- und Benutzerdaten abgelegt werden.

Dateistruktur anlegen

Klicke dazu in der Navigation auf „System > Dateiverwaltung

dazu in der Navigation auf „ System > Dateiverwaltung “. Anschließend klickst du auf [ Neuer

“.

Anschließend klickst du auf [Neuer Ordner] und erstellst eine passende Ordnerstruktur. Wichtig ist die Trennung zwischen klassischem Inhalt und den Dateien für das Layout.

Hier ein Vorschlag:

Crashkurs für Contao

Hier ein Vorschlag: Crashkurs für Contao Ordner ö f entlich machen Damit auf die Dateien innerhalb

Ordner öfentlich machen Damit auf die Dateien innerhalb der Ordner zugegrifen werden kann, muss der Ordner auf "Öfentlich" konfiguriert sein

kann, muss der Ordner auf " Ö f entlich" konfiguriert sein © 2019 Contao Academy |

Crashkurs für Contao

Theme erstellen Nun kannst du dein Theme erstellen. Klicke dazu in der Navigation auf „
Theme erstellen
Nun kannst du dein Theme erstellen. Klicke dazu in der Navigation auf „
Layout
> Themes
“.

Um ein neues Theme anzulegen klickst du dann auf [Neues Theme] .

Folgende Einstellungen sind nötig:

1. Theme-Titel (nur im Backend sichtbar)

2. Autor (nur im Backend sichtbar)

3. Ordner auswählen, den du gerade angelegt hast

3. Ordner auswählen, den du gerade angelegt hast Layout erstellen Jetzt kannst du endlich dein Layout

Layout erstellen Jetzt kannst du endlich dein Layout erstellen. Klicke dazu auf das 3. Symbol von Rechts.

Layout erstellen. Klicke dazu auf das 3. Symbol von Rechts. Anschließend auf [ Neues Layout ].

Anschließend auf [Neues Layout].

Hier gibt es wieder diverse Einstellungen:

Crashkurs für Contao

1. Titel: Name sinnvoll vergeben, so dass du später am Name erkennst, wofür dieses Layout ist

2. Zeilen: Auswählen ob Kopf- und Fußzeile benötigt wird

3. Spalten: Anzahl der Spalten auswählen

benötigt wird 3. Spalten : Anzahl der Spalten auswählen Hinweis Die Höhe der Kopf- und Fußzeile

Hinweis Die Höhe der Kopf- und Fußzeile lässt du am besten leer und definierst diese direkt im CSS.

Webfonts Hier kannst du direkt die gewünschte Google-Webfont eintragen.

Webfonts Hier kannst du direkt die gewünschte Google-Webfont eintragen. © 2019 Contao Academy | contao-academy.de 26

Crashkurs für Contao

Stylesheets und CSS-Framework festlegen

CSS-Framework (1) Hier kannst du festlegen, welche Standard-CSS-Definitionen von Contao eingebunden werden sollen. Sinnvoll sind hier „CSS-Reset“, „Layout-Builder“ und wenn gewünscht „Responses Layout“.

Zum Schluss kannst du per Drag & Drop noch die Reihenfolge verändern. Das Style "CSS-Reset" sollte zuerst geladen werden.

Interne und externe Stylesheets (2) Contao bietet einen internen CSS-Editor. D.h. du kannst dein komplettes CSS direkt in Contao schreiben. Mehr zum internen CSS-Editor findest du weiter hinten im Dokument. Alternativ kannst du deine externen CSS-Dateien ins Layout einfügen.

kannst du deine externen CSS-Dateien ins Layout einfügen. Frontend-Module Im Moment gibt es noch keine

Frontend-Module Im Moment gibt es noch keine Frontend-Module, deswegen lässt du die Einstellung noch unverändert. Wir kommen später auf diesen Punkt zurück.

noch unverändert. Wir kommen später auf diesen Punkt zurück. © 2019 Contao Academy | contao-academy.de 27

Crashkurs für Contao

Seitenlayout mit Seiten verknüpfen

Wenn du dein erstes Seitenlayout erfolgreich erstellt hast, musst du dieses nun

den Seiten zuordnen. Dazu wechselst du in den Bereich „

Seitenstruktur“.

Layout >

Du kannst für jede Seite ein eigenes Layout festlegen. Es ist allerdings ratsam so wenig Layouts wie möglich zu erstellen.

Derzeit hast du nur das Layout „Default“ angelegt. Du ordnest vorerst allen Seiten diese zu. Da sich die Einstellung für das Layout automatisch auf die untergeordneten Seiten vererbt, stellst du das Layout beim obersten Knotenpunkt ein.

In unserem Fall beim „Startpunkt unserer Website“.

So geht’s Klicke jetzt auf das Stiftsymbol um die Einstellungen der Seite zu bearbeiten. Anschließend wählst du im Bereich „Layout-Einstellungen“ das vorher angelegt Layout "Default" aus.

“ das vorher angelegt Layout " Default " aus. Wenn du nun deine Website im Frontend

Wenn du nun deine Website im Frontend aufrufst, sollte jetzt die Fehlermeldung verschwunden sein. Allerdings erscheint nur eine weiße Seite, da im Moment noch keine Inhalte und Module angelegt sind.

Crashkurs für Contao

Frontend-Module anlegen

Contao bietet bereits ohne Erweiterungen einen großen Funktionsumfang. In der Regel werden diese über Module konfiguriert und dann ins Layout eingebunden. Zusätzlich können mit Modulen diverse wiederkehrende Inhalte in das Layout integriert werden.

Du legst nun für deine Website die folgenden Module an:

• Logo

• Navigation

• Footer-Text

Modul für das Logo anlegen Bevor du hier beginnen kannst, solltest du die Bilddatei deines Logos mit dem Dateimanager hochladen. Wie der Dateimanager funktioniert findest du weiter hinten im Buch unter „Dateien hochladen“.

Anschließend wechselst du in den Bereich „

das Zahnrad-Symbol links neben dem Layout-Symbol an.

Layout > Themes

“. Hier klickst du

Layout-Symbol an. Layout > Themes “. Hier klickst du Im nächsten Schritt klickst du auf [

Im nächsten Schritt klickst du auf [Neues Modul].

Für das Logo bietet uns Contao kein fertiges Modul an, deswegen wählst du den Modultyp „Eigener HTML-Code“ und vergibst zunächst einen Titel.

Anschließend schreibst du den HTML-Code für das Logo in das Code-Fenster hinein. Als kleine Besonderheit verwende ich für den Link zur Startseite den Inserttag ({{env::path}}.

Details für den HTML-Code findest du in der folgenden Abbildung.

Crashkurs für Contao

Crashkurs für Contao Hinweis : Mehr über Inserttags findest du unter:

Hinweis:

Mehr über Inserttags findest du unter:

https://docs.contao.org/books/manual/4.4/de/04-inhalte-verwalten/

inserttags.html

Crashkurs für Contao

Modul für Navigation anlegen Zusätzlich zum Logo erstellen wir noch ein Modul für die Navigation.

Dazu klickst du erneut auf [Neues Modul] und machst die folgenden Einstellungen:

1. Modultyp: Navigationsmenü

2. Titel: Name vergeben

3. CSS-ID: „navmain“ vergeben, damit wir später im CSS gezielt auf dieses Modul zugreifen können

später im CSS gezielt auf dieses Modul zugreifen können Hinweis: Wenn bestimmte Seiten von der Navigation

Hinweis:

Wenn bestimmte Seiten von der Navigation ausschließen möchtest, dann kannst du das mit der Einstellung „im Menü versteckt“ erreichen.

Crashkurs für Contao

Modul für Footer Im Fußbereich fügen wir ein weiteres Modul mit unserem Copyright hinzu. Dazu legen wir erneut ein [Neues Modul] an und machen die folgenden Einstellungen:

[ Neues Modul ] an und machen die folgenden Einstellungen: Module dem Layout zuordnen Nun hast

Module dem Layout zuordnen Nun hast du 3 neue Module angelegt. Damit diese auf deiner Website angezeigt werden, musst du diese erst einem Layout zuordnen. Dazu bearbeitest du jetzt das bereits angelegte Layout „Default“.

Zu finden unter „

Stiftsymbol

Layout > Themes > Symbol Seitenlayouts > Bearbeiten mit

Du gehst nun bis zum Abschnitt „Frontend-Module“.

Hier kannst du mit dem [grünen Plus]“ neue Zeilen für deine Module erzeugen. Anschließend wählst du das Modul und die gewünschte Spalte aus.

Das Ergebnis sieht dann wie folgt aus:

Spalte aus. Das Ergebnis sieht dann wie folgt aus: Nun sollst du im Frontend dein Logo,

Nun sollst du im Frontend dein Logo, die Navigation und den Footer-Text sehen. Jetzt fehlen natürlich noch die Inhalte und dein CSS-Design.

Crashkurs für Contao

CSS und Contao

Contao bietet dir zwei Möglichkeiten, wie du dein CSS einbinden kannst. Entweder als externe CSS-Datei oder über den internen CSS-Editor.

Interne CSS-Editor nutzen Der große Vorteil des internen CSS-Editors besteht darin, dass du direkt online dein CSS-Code bearbeiten kannst. D.h. du benötigst keine weiteren Tools um die CSS-Dateien zu erstellen. Außerdem werden alle Anweisungen in der Datenbank gespeichert, wodurch eine Versionierung möglich ist.

Zu finden ist der Editor unter: „

möglich ist. Zu finden ist der Editor unter: „ Layout > Themes > Icon CSS “

Layout > Themes > Icon CSS

Hier kannst du dann mehrere Stylesheets anlegen. Vergleichbar mit einzelnen CSS-Dateien. Innerhalb der Stylesheets legst du dann die Formatdefinitionen an.

Der interne CSS-Editor kein Muss. Entscheide einfach selbst, ob du lieber externes CSS nutzt oder den internen Editor verwenden willst. Allerdings ist fraglich ob der internete CSS-Editor weiterentwickelt wird.

Externes CSS nutzen (Empfehlung) Ich selbst nutze ausschließlich externe CSS-Dateien und schreibe die CSS- Anweisungen mit einem Editor (z.B. PHPStorm oder Atom).

Die erstellten CSS-Dateien werden dann per FTP in einen beliebigen Ordner

unter

eingebunden.

/files/XXX

(z.B.

/files/system/css

) gespeichert und ins Layout

Hinweis:

Contao kann sowohl CSS, als auchSCSS und LESS Dateien verarbeiten.

Crashkurs für Contao

Stylesheets mit dem Layout verknüpfen Damit Contao das interne bzw. externe Stylesheet auch auf deine Seite anwendet, musst du dies noch mit dem Layout verknüpfen. Dazu öfnest du

wieder dein „Default-Layout“. („

Bearbeiten “)

Layout > Icon Seitenlayouts > Stiftsymbol zum

Hier musst du nun das „Interne Stylesheet (1)“ aktivieren bzw. die "externe CSS- Datei (2)" auswählen. Wenn du mehrere Stylesheets angelegt hast, kannst du auch die Reihenfolge per Drag & Drop verändern.

Da du internes und externes CSS mixen kannst, hast du die Möglichkeit die „Ladereihenfolge (3)“ festzulegen.

die Möglichkeit die „Ladereihenfolge (3)“ festzulegen. Wenn du diesen Schritt erledigt hast, sollten auch deine

Wenn du diesen Schritt erledigt hast, sollten auch deine Stylesheets auf deiner Website verwendet werden.

Crashkurs für Contao

Neue Inhaltselemente anlegen

Inhalte werden bei Contao unter dem Menüpunkt „Artikel“ angelegt.

bei Contao unter dem Menüpunkt „ Artikel “ angelegt. Nach einem Klick auf [ Artikel ]

Nach einem Klick auf [Artikel] findest du die komplette Seitenstruktur vor dir. Außerdem befindet sich unter jeder Seite bereits ein Artikel.

befindet sich unter jeder Seite bereits ein Artikel. Es ist auch möglich mehrere Artikel anzulegen. Die

Es ist auch möglich mehrere Artikel anzulegen. Die Artikel können dann nach Bedarf unterschiedlichen Layout-Bereichen (z.B. Hauptspalte, Kopfzeile, linke Spalte, Fußzeile) zugeordnet werden.

Crashkurs für Contao

Inhaltselemente anlegen In Contao gibt es verschiedene Inhaltselemente, welche innerhalb von Artikeln angelegt werden können. Um ein neues Inhaltselement anzulegen, wählst du zunächst einen Artikel aus und klickst auf das „Stiftsymbol“.

einen Artikel aus und klickst auf das „ Stiftsymbol “. Anschließend wählst du [ Neues Element

Anschließend wählst du [Neues Element] (1) und gibst die Position an. Alternativ kannst du auch einfach [den grünen Kreis mit dem weißen Plus] (2) anklicken.

du auch einfach [ den grünen Kreis mit dem weißen Plus] (2) anklicken. © 2019 Contao

Crashkurs für Contao

Element erstellen Wähle nun den gewünschten Elementtyp aus, der am besten für deinen Inhalt passt.

Elementtyp aus, der am besten für deinen Inhalt passt. Du kannst innerhalb eines Artikels beliebig viele

Du kannst innerhalb eines Artikels beliebig viele unterschiedliche Elemente einfügen.

Crashkurs für Contao

Am häufigsten wird das „Text-Element“ zum Einsatz kommen.

Die Texte werden mit dem Rich-Text-Editor "TinyMCE" erstellt und formatiert.

werden mit dem Rich-Text-Editor "TinyMCE" erstellt und formatiert. © 2019 Contao Academy | contao-academy.de 38

Crashkurs für Contao

Dateien hochladen

Contao verfügt über eine zentrale Dateiverwaltung. Damit du z.B. ein Bild in einem Inhaltselement verwenden kannst, musst du dieses zuerst mit der Dateiverwaltung hochladen.

Die Dateiverwaltung findest du unter „

System > Dateiverwaltung

“.

Der Dateiupload funktioniert wie folgt:

1. Datei-Upload oder das Plus-Symbol beim Zielordner anklicken

2. Position festlegen

3. Datei auswählen und hochladen

4. „Zurück“ klicken

3. Datei auswählen und hochladen 4. „Zurück“ klicken Hinweis : Ab Contao 4.6 kannt du die

Hinweis:

Ab Contao 4.6 kannt du die Dateien direkt per Drag&Drop auf den entsprechnenden Ordner in der Dateiverwaltung schieben und hochladen.

Erweiterungen

Crashkurs für Contao

Funktionsumfang von Contao erweitern

Für Contao gibt es eine große Auswahl an Erweiterungen. Du kannst Erweiterungen über den Contao Manager installieren.

Eine Erweiterung installieren Dazu rufst du den Contao-Manager über den Browser auf:

http://www.example.com/contao-manager.phar.php

Browser auf: http://www.example.com/contao-manager.phar.php 1. [ Pakete installieren ] auswählen 2. Erweiterung suchen

1. [Pakete installieren] auswählen

2. Erweiterung suchen (z.B.slider) und [Prüfen & Installieren] klicken

3. [Änderungen anwenden] auswählen

4. Installation abwarten

5. [Installtool] aufrufen und einloggen

6. [Datenbank aktualisieren] (wenn nötig)

7. [Bestätigen & Schließen] im Contao Manager auswählen

8. Backend von Contao einloggen

9. Die neue Erweiterung ist installiert und je nach Erweiterung erscheint nun im Backend ein neuer Menüpunkt

Schluss

Crashkurs für Contao

Wie geht es weiter?

Dieser Crashkurs sollte dir beim ersten Einstieg helfen.

Wenn du mehr über Contao lernen möchtest, dann empfehle ich dir eine Mitgliedschaft in der Contao Academy oder den Contao 4 Basiskurs zu kaufen.

Damit gelingt dir ein wesentlich schnellerer Einstieg in Contao. Anhand von Schritt für Schritt Vidoes siehst du wie eine Website mit Contao umgesetzt wird. Außerdem kannst du dich jederzeit mit deinen Fragen an unseren Support wenden und wir versuchen dir zeitnah zu helfen.

Mehr über die Contao Academy erfährst du hier:

Dein Feedback Ich hofe dir hat dieses E-Book weitergeholfen und freue mich über Feedback jeglicher Art. Schreibe mir einfach eine E-Mail an support@contao-academy.de.

Ich wünsche dir viel Spaß mit Contao

Ich wünsche dir viel Spaß mit Contao Christian Feneberg – Gründer Contao Academy – © 2019

Christian Feneberg – Gründer Contao Academy –