Gutes aus Jever
von Matthias Eilers
Teil 2: Viel mehr als nur Kontaktdaten
Im ersten Teil dieser Reihe, habe ich am 31. März das Projekt #gutesausjever vorgestellt. Heute möchte ich den Aufbau der Adressliste Schritt für Schritt zur Nachahmung beleuchten.
Schritt 1: Contao installieren
Insbesondere für die unter Euch, die nicht aus dem Contao-Universum stammen wird dieser Teil ggf. etwas fordernd sein.
Contao ist das Open Source Content Management System im D-A-CH-Raum. Also in Deutschland, Österreich und in der Schweiz sehr stark verbreitet. Wir nutzen und entwickeln für dieses System seit mehr als zehn Jahren. Als Contao-Premium-Partner für Entwicklung und Design setzen wir für unsere Kunden und uns hundertprozentig auf Contao. Contao ist sowohl sehr gut geeignet für Websites kleinerer und mittlerer Unternehmen als auch passend für Großunternehmen oder große Internetportale inkl. Mehrsprachigkeit. Contao setzt auf Barrierefreiheit und bringt vieles von Haus aus mit, wie beispielsweise umfassende Rechteeinstellungen für Redakteure. Tausende, größtenteils kostenlose Erweiterungen, wie beispielsweise unsere con4gis Bausteine, machen fast alles möglich. Was nicht dabei ist kann bei einer Contao-Partneragenturen zur Entwicklung beauftragt werden.
Für die Installation von Contao braucht Ihr als erstes einen Webspace auf Eurem Server, Rechner oder bei Eurem Hoster. Der Aufbau hängt vom System und/oder vom Anbieter ab. Wichtig ist, dass die Umgebung unter PHP >= 7.2 läuft, dass eine aktuelle Maria-DB bzw. MySQL Datenbank vorhanden ist und das die Systemvoraussetzungen gegeben sind: Speicherplatz, RAM-Speicher und auch die Zugriffsmöglichkeiten sollten dem heutigen Standard entsprechen. In den meisten Fällen ist das aber kein Problem. Zusätzlich solltet Ihr nach der Installation für ein SSL-Zertifikat sorgen. Für bestimmte Zugriffe auf verschiedene Dienste ist ein Zertifikat inzwischen unabdingbar. Macht es gleich richtig, dann bleiben entsprechende Fehlermeldung aus. In den allermeisten Fällen könnt Ihr inzwischen Let's Encrypt Zertifikate nutzen.
Hier geht es zur Installationsanleitung: Contao installieren
Und hier zum Download: Contao herunterladen
Nehmt für den Anfang immer die jeweils aktuellste LTS-Version (zurzeit 4.9). LTS-Versionen sind stabil und werden über Jahre gepflegt.
Damit schließe ich das Thema "Contao installieren" hier ab. Wenn Du Hilfe brauchst, kannst du Dich gerne bei der Küstenschmiede melden.
Schritt 2: con4gis Data installieren
Unser Data Baustein ist entstanden, um zügig über das Contao Backend eine eigene Datenbank mit eigenen Feldern aufbauen zu können. Beispielsweise um eine Adressliste zu generieren. Wie das geht erfahrt Ihr nach der Installation. Wichtig ist, dass Ihr inzwischen Contao 4.9 installiert habt. Ihr könnt den Manager bedienen, Ihr wisst was das Installtool ist und Ihr habt Euch schon mal als Administrator im Backend angemeldet. Das alles ist Voraussetzung für die nächsten Schritte.
Öffnet den Contao Manager erneut in Eurem Browser und wechselt in den Bereich "Entdecken". Dort gebt Ihr in das Feld "Erweiterungen suchen" folgendes ein: con4gis/data
Nach dem Ihr das Paket gefunden habt, klickt Ihr auf hinzufügen und wechselt in den Menüpunkt Pakete. Dort könnt Ihr jetzt Eure Umgebung aktualisieren. Der Data-Baustein hat ein paar Abhängigkeiten im Bauch. So werden auch die Bausteine Core, Projects und Maps automatisch mit installiert. Nach der Installation muss die Datenbank aktualisiert werden und dann hat Eure Contao Anwendung alles für unsere Adressliste im Bauch. Auf ins Backend. Es kann losgehen.
Schritt 3: Die Datenpflege vorbereiten
Im Backend solltet Ihr jetzt das neue con4gis Dashboard in der Contao-Navigation sehen. Das bitte öffnen. Im Dashboard werden installierte con4gis Bausteine aufgelistet. Dort beim Data-Baustein ganz rechts auf den Favoriten-Stern klicken. Jetzt tauchen die zugehörigen Module nicht nur im Dashboard sondern auch in der Contao-Navigation auf, was eine schnellere Navigation über mehrere Module möglich macht.
Ihr solltet jetzt folgendes in der Navigation sehen:
Tipp: Über die "Einstellungen" oben im Dashboard könnt Ihr entscheiden, ob der Bausteinname in der Navigation dargestellt werden soll oder nicht. Bei mehreren favorisierten Bausteinen ist es sinnvoll diesen so wie hier mit [data] anzeigen zu lassen.
Erklärung:
- Datenerfassung => Datenpflege (z.B. Betrieb "Krabbenpalast")
- Eigene Felder => Benutzerdefinierte Datenbankfelder (z.B. Icon als Onlineshop-Auszeichnung)
- Kategorien => Daten müssen kategorisiert werden (z.B. Fischfilet Fachgeschäft)
- Verzeichnisse => Optionale weitere Strukturebene (z.B. Gastronomie)
Contao sortiert die Menüpunkt seit Kurzem alphabetisch. Wir werden für das Einrichten Eures Branchenverzeichnisses die logische Reihenfolge verwenden.
Schritt 4: Eigene Felder definieren
Als aller erstes müsst Ihr Euch überlegen, ob Ihr überhaupt eigene Felder benötigt. Insbesondere für Adressdaten liefern wir bereits einiges an Felder mit. Was schon da ist könnt Ihr sehen, wenn Ihr mal testweise unter Kategorien eine Kategorie anlegt. Dort seht Ihr eine Feldliste. Alle diese Felder sind bereits vorhanden. Früher oder später werdet Ihr aber eigene Felder haben wollen.
Wenn Ihr ein erstes eigenes Feld anlegt, werdet Ihr diese Maske sehen:
Die drei wichtigsten Eingabefelder sollten immer gefüllt werden. Der Name wird gebraucht um das Feld an den verschiedenen Stellen zu verknüpfen (z.B. in der Kategorie). Der Datenbank-Alias entspricht dem Feldnamen in der Datenbank und der Typ dem Feldtyp. Über den Typ kommen dann auch viele weitere Eingabefelder hinzu.
Wichtig zu wissen ist, dass Ihr über diese Maske echte Datenbankfelder in Eure Datenerfassung bringt. D.h. Ihr müsst nach der Pflege über den Contao Manager den Cache leeren und die Datenbank über das Installtool aktualisieren.
So, jetzt aber ein Beispiel in zwei Teilen. Und zwar bringen wir ein Icon als Auszeichnung und Filter hinzu. Als erstes seht Ihr die Backend-Optionen, d.h. die möglichen Anpassungen für das Feld innerhalb der Datenerfassung:
Es wird also ein neues Feld erzeugt, welches kein Pflichtfeld aber über das Contao Backend filterbar ist. Der Beschreibungstext wird für die späteren Redakteure in der Datenerfassung als Feldbeschreibung angezeigt. Für Menschen die in Contao Zuhause sind gut nachvollziehbar. Für das Frontend kommen wir jetzt wieder zum con4gis/data-Spezifischen:
Wenn für das Frontend keine Bezeichnung gesetzt ist, wird automatisch die Feldbezeichnung oben verwendet. Heute wollen wir uns auf die Adressliste konzentrieren. Das Thema Karte / Popup kommt dann in Teil 3. D.h. wir möchten das das Icon, das im Frontend angezeigt wird, auch filterbar ist. In den Details soll das Icon nicht angezeigt werden, da wir dort direkt einen Link zum Onlineshop über die Datenerfassung einpflegen (dazu gleich mehr). Ganz unten geben wir noch ein Font Awesome Icon für die Darstellung in der Liste und für den Filterbutton an.
Nach dem Speichern muss, wie bereits erwähnt, der Cache geleert und die Datenbank aktualisiert werden. Wichtig ist auch, dass die das Feld über das Auge veröffentlicht. Ansonsten taucht es in der Kategorieauswahl noch nicht auf.
Schritt 5: Die erste Branchenkategorie
Das neue Feld sollte jetzt in der Datenbank vorhanden sein. Wir wechseln jetzt in das Backend-Modul "Kategorien".
Wir erstellen die Kategorie "Fischfilet Fachgeschäft", ordnen und aktivieren die Felder. Zum Beispiel so:
Die Eingaben in den Kategorieeinstellungen wirken sich an einigen Stellen aus. Uns geht vorerst um die Sortierung im Backend. D.h. so wie Ihr die Felder hier sortiert werden diese auch bei der Datenerfassung im entsprechenden Modul dargestellt. Dazu gleich mehr. Wenn Ihr "Nur veröffentlichte Elemente anzeigen" aktiviert, dann taucht an den entsprechenden Elementen in der Datenerfassungs-Liste das Auge-Icon zum de-/aktivieren auf. Ihr müsst dann die entsprechenden Datensätze immer aktivieren. Wenn die Checkbox hier aber nicht gesetzt wird, dann werden alle Daten der Kategorie im Frontend direkt veröffentlicht. Ganz unten könnt Ihr noch ein Schema für die Felder auswählen, dadurch werden entsprechende Properties nach Schema.org gesetzt.
Jetzt haben wir unsere Kategorie. Für eine wirkliche Branchenliste brauchen wir aber noch ein Branchenverzeichnis.
Schritt 6: das Branchenverzeichnis
Das Branchenverzeichnis ist prinzipiell nur eine weitere Strukturebene, dafür müssen wir nicht viel tun. Wir wechseln in das Modul "Verzeichnisse" und füllen einen ersten Eintrag aus:
Name eintragen. Gültige Kategorien verknüpfen. Fertig ist unser erstes Branchenverzeichnis.
Schritt 7: Die Datenpflege
Tipp: Bevor wir unseren Krabbenpalast einpflegen hier schon mal der Hinweis, dass alle erfassten Daten in einer Tabelle (tl_c4g_data_element) landen. D.h. solltet Ihr bereits eine Datenquelle haben, dann könnt Ihr diese auch importieren. Bspw. über einen CSV-Import mit con4gis/import. Dafür solltet Ihr die Felder der Datenerfassung aber erst einmal kennen.
Alle möglichen Felder hier zu beschreiben führt zu weit. Fangen wir mal mit den allgemeinen Daten an:
Das Feld Kategorie entspricht der Hauptkategorie des Betriebs.
Tipp: Insbesondere für Filialen bei denen die Kontaktdaten immer gleich sind, haben wir das Elternelement eingeführt. Ist dieses gesetzt, werden nicht gefüllte Felder aus dem Elternelement übernommen.
Weiter geht es mit der Beschreibung, die Kartenanbindung wird wie gesagt erst Thema in Teil 3:
Alle Felder die gefüllt und über Kategorie und Frontend-Modul veröffentlicht sind, werden an den verschiedenen Stellen im Frontend dargestellt. Als nächstes kämen die Kontaktdaten. Wir machen aber gleich mal weiter mit unserem Icon-Feld:
Unser Feld "Icon für Auszeichnung Onlineshop" ist hier eine Checkbox die dafür sorgt, dass der Krabbenpalast die Auszeichnung erhält und auch im Frontend filterbar ist, wenn es darum geht Betriebe mit Onlineshop zu finden.
Weiter unten habe ich noch einen Link zum Shop gesetzt. Dieser wird in den Details dargestellt. Auch hier kann man Font Awesome benutzen hinter dem </i> steht noch ein Textbeispiel: zum Shop. Also so: <i class="fas fa-shopping-cart"></i> Zum Shop
Das Feld Benutzergruppe ist für die Frontend-Pflege, die heute aber kein Thema ist. Die anderen Felder sind hoffentlich selbsterklärend. Ich denke Ihr habt die Datenerfassung und was damit zusammenhängt, die Eigenen Felder, Kategorien und Verzeichnisse verstanden. Damit schließe ich das Thema Datenpflege jetzt ab. Jetzt müssen wir das Ganze nur noch in die Website bringen.
Schritt 8: Auf ins Frontend
Wir wechseln zu den Frontend-Modulen (Themes -> Zahnräder). Dort erstellen wir ein neues Modul vom Typ "(data) Auflistung ohne Schreibzugriff":
Auch hier im Modul gibt es zahlreiche Einstellungen. Hier wieder nur ein Auszug:
Hier können wir unsere Branchenverzeichnisse, aber auch einzelne Kategorien verknüpfen. Außerdem können wir die Liste über verschiedene Parameter beeinflussen. Wie beispielsweise die Feldliste:
Hinweis: con4gis/data baut auf con4gis/projects auf. Über projects, unser Frontend Framework, sind noch viel mehr Konfigurationen für die Liste möglich, die wir nach und nach auch für die Backend Konfiguration in Data ergänzen werden. Es lohnt sich also die Weiterentwicklung im Auge zu behalten. Bspw. über den con4gis Twitterkanal. Bei Ideen gerne auch mal bei uns nachhaken, ggf. gibt es schon eine Lösung mittels con4gis.
Das Modul binden wir in einen Artikel ein und schauen uns das Ergebnis im Frontend an:
So sieht die aktuelle Ansicht im Frontend aus. Die Einträge werden entsprechend aufgelistet. Oben der Filterbutton, der aktiv nur Adressen auflistet mit Onlineshop. Die Detail-Ansicht sieht wie folgt aus:
Das war Teil 2. Eines von vielen Beispielen wie Ihr con4gis/data nutzen könnt. Es müssen keine Adressdaten sein. Es können auch Jobs, Produkte oder irgendetwas anderes sein. Viel Erfolg beim Testen. Teil 3 kommt dann in der nächsten Woche. Da gucken wir uns den Krabbenpalast in der Karte an.
Weiterführende Links: