Contao (Teil 8): Frontend-Module einbinden

Dank der Frontend-Module lässt sich eure Webseite um zahlreiche Funktionalitäten erweitern. Dabei bringt Contao schon viele dieser Module mit. Wie sich diese nutzen lassen, ist Gegenstand dieses Tutorials. Es werden zunächst zwei Module erstellt und anschließend in das Seitenlayout eingebunden. Außerdem erfahrt ihr, wie sich Module nur für bestimmte Benutzer und Mitglieder freischalten lassen. Und zu guter Letzt wird noch einmal ein Blick darauf geworfen, welche Frontend-Module Contao von Hause aus bereits mitbringt.

Wir empfehlen:
Contao CMS-Training

Im Contao-Core sind bereits viele Module enthalten. In diesem Tutorial werden zwei Dinge erledigt: Ihr bindet zunächst ein vordefiniertes Modul ein, mit dem sich eine Suchfunktion für die Seite erstellen lässt. Anschließend wird ein Modul mit eigenem HTML-Code erstellt, das Copyright-Hinweise in den Fußbereich der Seite einbindet.

Eine Suchfunktion integrieren

Im Kopfbereich der Seite soll ein Suchfeld zu sehen sein. Das lässt sich in Contao ganz einfach über ein Frontend-Modul umsetzen. Ruft Layout>Themes auf und klickt auf das Symbol Die Frontend-Module des Themes ID xx bearbeiten.

In dem sich daraufhin öffnenden Dialogfenster wird auf Neues Modul geklickt. Jetzt werden allgemeine Angaben zum Modul erwartet. Als Titel kann man beispielsweise Suche angeben. Entscheidend ist das Feld Modultyp. Denn hierüber legt man letztendlich fest, um was für ein Modul es sich handelt. Im aktuellen Fall wird dort Suchmaschine eingestellt.

Anschließend ist der neue Bereich Modul-Konfiguration zu sehen. Welche Optionen hier verfügbar sind, ist von Modul zu Modul verschieden. Beim Suchmaschine-Modul kann man beispielsweise den Abfragetyp, das Suchformular-Layout und die Anzahl der Elemente pro Seite bestimmen.

Übernehmt die Einstellungen unverändert mit Speichern und schließen.

Den Copyright-Hinweis notieren

In den Fußbereich der Seite wird ein Copyright-Hinweis eingefügt. Der könnte im einfachsten Fall folgendermaßen aussehen:

Copyright by PSD-Tutorials.de

Erledigt wird das wieder anhand eines Moduls. Ruft dazu erneut Layout>Themes auf und klickt auf Die Frontend-Module des Themes xx bearbeiten. Anschließend wird Neues Modul aufgerufen. Als Titel kann man Copyright notieren. Im Feld Modultyp stellt man Eigener HTML-Code ein. In das Feld HTML-Code wird Folgendes geschrieben:

<h3>Copyright by PSD-Tutorials.de</h3>

Mit Speichern und schließen übernimmt man die Einstellungen. Daraufhin landet man in der Modul-Übersicht, in der jetzt zwei Module zu sehen sein sollten.

Die Module in das Seitenlayout einbinden

Wer das Frontend aufruft, wird eine weiße Seite zu sehen bekommen. Tatsächlich wurden die Module zwar angelegt, allerdings müssen diese noch ins Seitenlayout eingebunden werden. Erst dann sind sie auch im Frontend zu sehen.

Um die Module einzubinden, ruft man Layout>Themes auf. In dem sich öffnenden Dialogfenster wird auf das Symbol Die Seitenlayouts des Themes ID xx bearbeiten geklickt.

Es öffnet sich ein weiteres Dialogfenster, in dem ihr bei Standard-PSD-Layout (oder wie auch immer euer Layout heißt) auf das Stiftsymbol klickt. Daraufhin ist die Konfiguration des Seitenlayouts zu sehen. Entscheidend ist in diesem Fenster der Bereich Frontend-Module.

Klickt zwei Mal auf das Plussymbol. Lasst das erste Auswahlfeld unverändert. Im zweiten Feld wird Suche eingestellt. In dem daneben stehenden Feld wählt man Kopfzeile.

Weiter geht es mit den beiden Auswahlfeldern darunter. Im linken Feld stellt man Copyright ein. Im Feld daneben wird Fußzeile ausgewählt. Insgesamt sollte der Bereich Eingebundene Module jetzt folgendermaßen aussehen:

Übernehmt die Einstellungen mit Speichern und schließen. Ein anschließender Blick ins Frontend der Seite liefert jetzt eine erste echte Ausgabe.

Das ist also die Basis für die weiteren Arbeiten mit Contao.

Module schützen

Im weiteren Verlauf dieser Tutorial-Reihe gibt es noch ausführliche Informationen zu den Themen Benutzer- und Mitgliederverwaltung in Contao. Ich möchte allerdings bereits an dieser Stelle auf die Möglichkeit hinweisen, Module nur für bestimmte Benutzergruppen sichtbar zu machen. Das ist äußerst praktisch, schließlich könnt ihr so beispielsweise bestimmte Funktionalitäten nur solchen Mitgliedern anzeigen, die sich tatsächlich registriert und eingeloggt haben.

Um die Einstellungen der Module diesbezüglich anzupassen, ruft man Layout>Themes auf und klickt auf Die Frontend-Module des Themes ID xx bearbeiten. Wählt in der daraufhin angezeigten Modul-Übersicht das betreffende Modul und klickt auf das Stiftsymbol. Entscheidend ist in dem sich öffnenden Dialogfenster der Bereich Zugriffsschutz.

Wenn tatsächlich bereits Gruppen definiert wurden, aktiviert man hier das Kontrollkästchen Modul schützen und kann dann die gewünschte Gruppe bzw. die betreffenden Gruppen auswählen. Das Modul wird anschließend tatsächlich nur noch diesen Gruppen präsentiert.

Die wichtigsten Standard-Module

Zum jetzigen Zeitpunkt wurden zwei Module eingebunden. Dabei handelt es sich einmal um die Suche und einmal um das Modul vom Typ Eigener HTML-Code. Tatsächlich bietet Contao aber noch eine Vielzahl weiterer Module. Welche das sind, wird an dieser Stelle noch einmal ausführlich unter die Lupe genommen. Dabei wird es allerdings keine Auflistung aller Module geben, vielmehr geht es darum, euch einen Überblick darüber zu verschaffen, was bei Contao eigentlich alles bereits von Hause aus mit an Bord ist.

Wenn ihr Layout>Themes aufruft und auf Die Frontend-Module des Themes ID xx bearbeiten klickt, könnt ihr anschließend über Neues Modul ein weiteres Frontend-Modul generieren. Über das Feld Modultyp kann man den Typ des neuen Moduls angeben.

Die Anzahl der Einträge in dem Auswahlfeld ist durchaus beeindruckend. Und tatsächlich bietet Contao Module für Menüs, Sitemaps, Benutzerregistrierung, FAQs usw. Viele der Module bzw. deren Bedeutungen sind sicherlich weitestgehend selbsterklärend. Sollte das bei einem der aufgeführten Module einmal nicht der Fall sein, könnt ihr dieses einfach probehalber erstellen und in das Seitenlayout einbinden. So kann man dann ganz einfach die betreffenden Module testen. Ohnehin wird euch auch im Rahmen dieser Tutorial-Reihe noch das ein und andere Modul begegnen.

Ihr solltet euch die Module aber dennoch einmal detailliert ansehen. Denn tatsächlich stellen diese zahlreiche Funktionalitäten zur Verfügung, die während der täglichen Arbeit wertvolle Dienste leisten. Gerade Contao-Neueinsteiger, die nichts von den Frontend-Modulen wissen, versuchen, selbst Funktionalitäten zu erstellen, die man tatsächlich ganz einfach mit den Core-Frontend-Modulen einbinden kann. Verschafft euch also unbedingt einen Überblick darüber, welche Module mit an Bord sind und was diese leisten.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training