Simbla 2017: Dynamische Seiten aus dem Homepage-Baukasten

Der Website Builder Simbla setzt sich in einigen Punkten von seinem Wettbewerb ab. Am deutlichsten merkt der Kunde das in Sachen Datenbankanbindung. Das neue Feature „Dynamic Pages” ist ein weiteres Highlight aus Simblas Funktionsumfang.

Der Simbla Website Builder ist Leserinnen und Lesern des Dr. Web Magazins schon seit einigen Jahren ein Begriff. Immer wieder stellten wir den Baukasten und seinen rasanten Fortschritt in Sachen Features vor. Alle Links zu unseren entsprechenden Artikeln findest du am Ende dieses Beitrags.

Simblas Konzept der Datenbankanbindung ist dabei der Ansatz, der uns hier in der Redaktion am meisten begeistert. Über eine einfache grafische Benutzeroberfläche legst du Datenbanken nebst Inhalten in einer derart intuitiven Weise an, dass das selbst von nahezu vollständig Ahnungslosen unfallfrei zu erledigen ist. Profis freuen sich über die komfortable und flexible Lösung.

Datenbanken anlegen und verwalten mit Simbla

Durchdacht ist, dass der Datenbank-Bereich als separate Säule unabhängig von der eigentlichen Website-Optik besteht. Das entspricht der Vorgehensweise konventioneller Datenbank-Systeme, die ja ebenfalls nicht im Zusammenhang mit einem konkreten Ausgabe-Medium betrieben werden. So kannst du dich also zunächst, von optischen Aspekten unbeeinflusst, um deine Inhalte kümmern.

Datenbanken musst du nicht lange suchen.

Nachdem du eine Datenbank angelegt hast, definierst du Nutzer, Rollen, sowie Tabellen. Für den öffentlichen Zugriff über die Website sorgt dabei der Standardnutzer „Public“. Du kannst aber auch weitere Benutzer einrichten, die beispielsweise nur nach einem Login Zugriff haben.

Die Rechtevergabe ist hinreichend differenziert. So ist es beispielsweise möglich, dem Nutzer „Public“ nur Leserechte für eine Datenbank zuzuweisen und anderen Nutzern auch Schreibrechte. Dabei stehen dir als Rechte „find“ zum Suchen, „get“ zum Anzeigen, „create“ zum Erstellen, „update“ zum Aktualisieren und „delete“ zum Löschen eines Datensatzes zur Verfügung. Neben der Einrichtung einzelner Nutzer und Deklaration jeweils individueller Rechte-Sets, kann es sich schnell lohnen, mit sogenannten Rollen übergreifende Berechtigungsszenarien für eine gleichartige Gruppe von Nutzern zu setzen.

HInreichend differenzierte Rechtevergabe per Klick.

Ist dieses Thema erledigt, widmest du dich der Erstellung der erforderlichen Datentabellen, also der eigentlichen Inhalte. Bequem fügst du Spalten hinzu und definierst die Art der Spalte. Möglich sind unter anderem Zeichenketten, Zahlen, Arrays, boolesche Werte und Dateien. Im Gegensatz zu anderen Datenbanken wie MySQL lassen sich Dateien wie Bilder und Dokumente ganz bequem über einen eigenen Typ in eine Tabelle integrieren und später abrufen. Außerdem erhältst du bei Bilddateien eine Vorschau.

Ganz automatisch werden die Spalten „Id“, „createdAt“ und „updatedAt“ erstellt und gepflegt. Mit Hilfe der grafischen Benutzeroberfläche ist das Anlegen und Verwalten von Datenbanken spielend einfach. Im Handumdrehen legst du neue Zeilen an und füllst diese mit Inhalt.

Willst du eine Tabelle anderweitig verwenden, exportierst du diese mit einem Klick ins CSV-Format. Lediglich eingebundene Dateien werden beim Export ignoriert. Im CSV-Format lassen sich Daten genauso auch importieren.

Von der Datenbank zur dynamischen Web-App

Nun wäre eine Datenbank relativ nutzlos, könnten wir sie nicht in unsere Website integrieren. Auch diese Funktionalität hat Simbla intuitiv gelöst. Die Einbindung ist sehr einfach und bequem.

Zunächst musst du die Datenbank in den Einstellungen deiner Website auswählen. Unmittelbar danach stehen dir alle Inhalte dieser Datenbank innerhalb des Design-Editors zur Verfügung. An dieser Stelle kommen die sogenannten App Widgets ins Spiel. Diese vorgefertigten Inhaltselemente sorgen für vordefinierte Datenbankverbindungen für bestimmte Zwecke.

Dank der umfangreichen Möglichkeiten erstellst du ohne großen Aufwand und ohne Kenntnisse in Programmierung und Datenbankabfragen einfache und auch komplexe Website-Applikationen. Egal, ob es sich Registrierungsformulare oder die Ausgabe von Inhalten in Tabellenform handelt, die App Widgets dynamisieren deine Website.

Dynamic Pages: Simbla wird zum CMS

Besonders die brandneue App Widget-Kombination aus „Dynamic Grid” und „Dynamic Pages” kann deiner Website einen wahren Schub in Sachen Dynamisierung versetzen. Denn mit Hilfe dieser Widgets sorgst du dafür, dass Simbla deine Inhalte als Grid-Übersicht anzeigt und für jeden Datensatz aus deiner Datenbank eine separate Seite erzeugt, die die Details des jeweiligen Satzes darstellt.

Die Konfigurations-Dialoge sind durchweg verständlich.

Schritt 1: Das dynamische Grid

Der erste Schritt besteht darin, im Simbla-Editor ein dynamisches Grid anzulegen. Dies erfolgt vollständig grafisch und erfordert keinerlei Programmierung in SQL oder anderen Sprachen. Bei der Definition dessen, was im Grid angezeigt werden soll, kannst du Filter zur Einschränkung der Datenmenge zum Einsatz bringen. Ebenfalls möglich ist die Verwendung eines Suchfeldes, so dass nur die vom Besucher gewünschten Inhalte Eingang in das Grid finden. Zudem definierst du die Zahl der Resultate pro Seite und die auf- oder absteigende Sortierung nach einem ebenfalls zu wählenden Datenfeld.

Neuzugang in der Toolbox, das dynamische Grid.

Im Seitendesign kannst du nun konkrete Inhalte in der Form von Variablen setzen, die die von zweifach geschweiften Klammern eingeschlossen werden, also etwa {{Feldname}}. Diese Variablen sind frei formatierbar. Vor allem kannst du den Rest der Seite ganz nach deinen Vorstellungen gestalten. Einschränkungen entstehen durch den Einsatz des „Dynamic Grid” keine.

Das dynamische Grid gestaltest du nach deinen Wünschen.

Das Ergebnis dieser Arbeit ist ein sich selbst populierendes Grid mit den von dir gefilterten oder deinen Besuchern gesuchten Inhalten deiner Datenbank. Das ist eine schöne Sache, stellt aber nur die halbe Lösung dar.

Schritt 2: Die dynamischen Seiten

Denn jetzt kommen unsere „Dynamic Pages” ins Spiel. Diese setzen ihrerseits am Grid an und erweitern es. Mit diesem zusätzlichen Widget erhält jeder Inhalt unseres dynamischen Grids einen Link zu einer Detailseite, auf der du dann – wiederum vollkommen frei – gestalten kannst, was und in welcher Optik der Besucher sehen soll.

Ein gutes Beispiel für die Verwendung der Widget-Kombo ist dieses Escape Room Directory. Escape Rooms sind eine neue Form von Gruppenspiel. Man lässt sich als Kleingruppe in einem Raum einsperren und muss sich dann innerhalb von 60 Minuten befreien. Dazu ist es erforderlich, allerlei Aufgaben zu bewältigen und Rätsel zu lösen. Escape Rooms gibt es überall auf der Welt und es werden schnell mehr.

Das Escape Room Directory startet mit dem Suchfeld als Ausgangspunkt.

Damit ist ein Verzeichnis dieser ungewöhnlichen Spielstätten genau die richtige Aufgabe für ein dynamisches Grid mit angehängten dynamischen Seiten. Denn der Designer muss keinerlei Hand mehr anlegen, wenn das Layout steht. Allein jeder zusätzliche Datenbankeintrag sorgt dafür, dass automatisch eine weitere Seite dynamisch generiert und über die Grid-Ansicht zugänglich gemacht wird.

Innerhalb des „Dynamic Pages” Widgets definierst du in erster Linie die URL-Struktur, die der Anzeige der Detailseiten hinterlegt sein soll. Sollte es sich um Inhalte handeln, die nur registrierten oder anderweitig berechtigten Besuchern zugänglich machen willst, nimmt du hier die entsprechende Einschränkung auf autorisierte Rollen vor.

Das Template für die Detailseite gestaltest du völlig frei. Nur die Variablen musst du einsetzen.

Für die Detailseiten legst du in deiner Website eine neue Seite an, die als Vorlage, als Template für die Optik der Detailansicht dient. Auch diese kannst du natürlich frei designen. Die Inhalte aus der Datenbank fügst du in dreifach geschweiften Klammern ein, also zum Beispiel mit {{{Feldname}}}. Dein Template verknüpfst du dann mit der gleichen Datentabelle, di du zuvor schon für das Grid gewählt hattest und aktivierst die Checkbox „Dynamic Pages” in den Einstellungen. Mehr ist nicht zu tun.

Fazit: Dynamische Inhalte können nicht einfacher integriert werden

Mit der neuen Kombination aus „Dynamic Grid” und „Dynamic Pages” bietet der Simbla Website Builder eine flexible Lösung für die Darstellung größerer Datenmengen auf der Basis einzelner Seiten. Das habe ich bislang beim Wettbewerb so nicht gesehen. Auch ist mir keine andere Lösung geläufig, die Datenbankinhalte auf diese einfache und komfortable Weise ohne jeglichen Programmieraufwand netztauglich macht.

Unsere übrigen Beiträge zu Simbla findest du hier, hier und hier.