Contao (Teil 22): Notwendige Module für die Mitgliederverwaltung

Im ersten Schritt wird das Login-Modul angelegt. Um das Modul zu erstellen, ruft man Themes>Die Frontend-Module des Themes>ID xx bearbeiten auf und klickt auf Neues Modul. Entscheidend ist zunächst das Feld Modultyp.




Wählt unter Benutzer den Eintrag Login-Formular.

Nehmt außerdem die folgenden Einstellungen für das Modul vor:

• Titel = Mitglieder-Login
• Überschrift = Anmeldung
• Autologin erlauben aktivieren (Dadurch können Mitglieder, wenn sie das wünschen, angemeldet bleiben. Sobald eine Browsersitzung abläuft, wird von Contao automatisch eine neue erstellt. Das Passwort muss dann nicht erneut eingegeben werden). Aktiviert man die Option, wird im Anmeldeformular ein Kontrollkästchen mit der Beschriftung Angemeldet bleiben angezeigt.
• Anzahl an Spalten = Eine Spalte (Dadurch wird das Formular ohne Layouttabelle angelegt. Stellt man hingegen Zwei Spalten ein, verwendet Contao für die Darstellung des Formulars eine Tabelle).

Mit Speichern und schließen werden die Einstellungen übernommen.

Das Abmelden-Modul

Um es vorwegzunehmen: Das Abmelden-Modul selbst ist im Frontend der Seite nicht zu sehen. Dennoch muss man das Modul anlegen, um den Besucher nach dem Logout auf der aktuellen Seite zu behalten. Legt das Modul über Themes>Die Frontend-Module des Themes>ID xx bearbeiten>Neues Modul an und weist ihm die folgenden Einstellungen zu:

• Titel = Mitglieder-Abmeldung
• Modultyp = Automatischer Logout
• Zur zuletzt besuchten Seite aktivieren

Weitere Angaben sind hier nicht nötig. Das Modul kann also mit Speichern und schließen erstellt werden.

Link zum Login

Damit sich die Mitglieder direkt einloggen können, solltet ihr einen entsprechenden Link anbieten, über den das Anmeldeformular aufgerufen wird. Dieser Link ist ausschließlich für Gäste sichtbar. Sobald sich ein Gast erfolgreich eingeloggt hat, ist er Mitglied und der Link wird ausgeblendet. (Alternativ dazu könnt ihr natürlich das Login-Modul auch direkt einbinden. Das bleibt im Endeffekt euch überlassen).

Der Link wird über ein Modul erstellt. Damit das Modul später korrekt arbeitet, müsst ihr zunächst den Alias der Seite Anmelden ermitteln. Das geschieht über Seitenstruktur. Klickt dort den Namen von Anmelden an. Den Alias seht ihr im Feld Seitenalias.




Merkt euch diesen Alias, ruft Themes>Die Frontend-Module des Themes>ID xx bearbeiten auf und klickt auf Neues Modul. Diesem neuen Modul werden die folgenden Eigenschaften zugewiesen:

• Titel = Mitglieder-Login-Link
• Modultyp = Eigener HTML-Code
• Nur Gästen anzeigen aktivieren

Entscheidend ist das Feld HTML-Code.




Denn hier definiert man den Link auf die Seite Anmelden. Und an dieser Stelle kommt der Seitenalias ins Spiel. Der Code könnte folgendermaßen aussehen:

<!-- indexer::stop -->
<div>
 <a href="{{link_url::anmelden}}">Zur Anmeldung</a>
</div>
<!-- indexer::continue -->

Mit Speichern und schließen wird das Modul erstellt.

Angemeldet als anzeigen

Das zuvor erstellte Modul bzw. der darin angezeigte Link ist ausschließlich für Gäste sichtbar. Nachdem die sich eingeloggt haben, ist der Link verschwunden. An dessen Stelle soll ein Hinweis nach dem Schema Herzlich willkommen Benutzername zu sehen sein, wobei anstelle von Benutzername der tatsächliche Benutzername des Mitglieds angezeigt wird. Zudem ist ein Link zu sehen, über den sich die Mitglieder vom Frontend der Seite abmelden können.

Öffnet dazu Layout>Themes>Die Frontend-Module des Themes>ID xx bearbeiten und klickt auf Neues Modul. Dem neuen Modul weist man die folgenden Eigenschaften zu:

• Titel = Mitglieder-Logout-Link
• Modultyp = Eigener HTML-Code
• Modul schützen aktivieren und die gewünschten Gruppen auswählen

Entscheidend ist wieder das Feld HTML-Code. Dessen Inhalt könnte folgendermaßen aussehen:

<!-- indexer::stop -->
 <div>
 Herzlich willkommen {{user::username}} … {{link::abmelden}}
 </div>
 <!-- indexer::continue -->

Mit Speichern und schließen werden die Einstellungen übernommen.

Die Module einbinden

Nachdem die Module erstellt wurden, muss man diese noch ins Seitenlayout einbinden, damit sie auch tatsächlich im Frontend sichtbar sind. Öffnet dazu Inhalte>Artikel, klickt bei Anmelden [Hauptspalte] auf das Stiftsymbol und anschließend auf Neues Element. Legt die gewünschte Position fest und stellt als Elementtyp den Wert Modul ein.




Aus dem daraufhin neu angezeigten Feld Modul wird das Modul Mitglieder-Login ausgewählt. Weitere Einstellungen sind nicht nötig, das Modul kann also mit Speichern und schließen erstellt werden.

Ruft erneut Inhalte>Artikel auf, klickt bei Abmelden [Hauptspalte] auf das Stiftsymbol und folgt anschließend dem Link Neues Element. Nachdem die Position gewählt wurde, wird Modul als Elementtyp eingestellt. Aus dem daraufhin angezeigten Feld Modul wählt man Mitglieder-Abmeldung.




Auch das kann wieder mit Speichern und schließen übernommen werden.

Damit die Besucher der Seite die Links zum An- und Abmelden auch tatsächlich sehen, bindet man diese am besten in den Seitenbereich der Seite ein. (Ihr könnt die Links natürlich auch im Fuß- oder Kopfbereich anzeigen, das bleibt im Endeffekt euch überlassen). Die notwendigen Einstellungen dazu nimmt man unter Layout>Themes>Die Seitenlayouts des Themes>ID xx bearbeiten vor. Über das Stiftsymbol wird die Bearbeitungsmaske des betreffenden Layouts geöffnet. Entscheidend ist hier der Bereich Eingebundene Module.




Legt zunächst über das Plussymbol zwei neue Einträge an. Diesen beiden Einträgen weist man die folgenden Einstellungen zu:

• Mitglieder-Login-Link = Linke Spalte
• Mitglieder-Logout-Link = Linke Spalte

Die Übersicht sollte dann folgendermaßen aussehen:




Mit Speichern und schließen werden die Einstellungen übernommen. Damit sind die notwendigen Schritte erledigt, um einen geschützten Seitenbereich einzurichten. Um die Funktionalität zu testen, solltet ihr einen anderen Browser verwenden, als den, mit dem ihr momentan am Backend angemeldet seid. Ansonsten würdet ihr euch nämlich, wenn ihr euch im Frontend abmeldet, tatsächlich auch vom Backend abgemeldet.

Dieses Tutorial hat gezeigt, wie einfach sich ein Login-Bereich einrichten lässt. Selbstverständlich gibt es noch weitere Dinge, mit denen sich dieser Bereich komfortabler gestalten lässt. So kann man beispielsweise auch noch eine Passwort-vergessen-Funktion einbinden. Das und noch einige andere Sachen werden dann im nächsten Tutorial beschrieben.