Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 15. Juni 2017

Simbla 2017: Dynamische Seiten aus dem Homepage-Baukasten

Der Website Builder Simbla setzt sich in eini­gen Punkten von sei­nem Wettbewerb ab. Am deut­lichs­ten merkt der Kunde das in Sachen Datenbankanbindung. Das neue Feature „Dynamic Pages” ist ein wei­te­res Highlight aus Simblas Funktionsumfang.

Der Simbla Website Builder ist Leserinnen und Lesern des Dr. Web Magazins schon seit eini­gen Jahren ein Begriff. Immer wie­der stell­ten wir den Baukasten und sei­nen rasan­ten Fortschritt in Sachen Features vor. Alle Links zu unse­ren ent­spre­chen­den Artikeln fin­dest du am Ende die­ses Beitrags.

Simblas Konzept der Datenbankanbindung ist dabei der Ansatz, der uns hier in der Redaktion am meis­ten begeis­tert. Über eine ein­fa­che gra­fi­sche Benutzeroberfläche legst du Datenbanken nebst Inhalten in einer der­art intui­ti­ven Weise an, dass das selbst von nahe­zu voll­stän­dig Ahnungslosen unfall­frei zu erle­di­gen ist. Profis freu­en sich über die kom­for­ta­ble und fle­xi­ble Lösung.

Datenbanken anlegen und verwalten mit Simbla

Durchdacht ist, dass der Datenbank-Bereich als sepa­ra­te Säule unab­hän­gig von der eigent­li­chen Website-Optik besteht. Das ent­spricht der Vorgehensweise kon­ven­tio­nel­ler Datenbank-Systeme, die ja eben­falls nicht im Zusammenhang mit einem kon­kre­ten Ausgabe-Medium betrie­ben wer­den. So kannst du dich also zunächst, von opti­schen Aspekten unbe­ein­flusst, um dei­ne Inhalte küm­mern.

Datenbanken musst du nicht lan­ge suchen.

Nachdem du eine Datenbank ange­legt hast, defi­nierst du Nutzer, Rollen, sowie Tabellen. Für den öffent­li­chen Zugriff über die Website sorgt dabei der Standardnutzer „Public“. Du kannst aber auch wei­te­re Benutzer ein­rich­ten, die bei­spiels­wei­se nur nach einem Login Zugriff haben.

Die Rechtevergabe ist hin­rei­chend dif­fe­ren­ziert. So ist es bei­spiels­wei­se mög­lich, dem Nutzer „Public“ nur Leserechte für eine Datenbank zuzu­wei­sen und ande­ren Nutzern auch Schreibrechte. Dabei ste­hen dir als Rechte „find“ zum Suchen, „get“ zum Anzeigen, „crea­te“ zum Erstellen, „update“ zum Aktualisieren und „dele­te“ zum Löschen eines Datensatzes zur Verfügung. Neben der Einrichtung ein­zel­ner Nutzer und Deklaration jeweils indi­vi­du­el­ler Rechte-Sets, kann es sich schnell loh­nen, mit soge­nann­ten Rollen über­grei­fen­de Berechtigungsszenarien für eine gleich­ar­ti­ge Gruppe von Nutzern zu set­zen.

HInreichend dif­fe­ren­zier­te Rechtevergabe per Klick.

Ist die­ses Thema erle­digt, wid­mest du dich der Erstellung der erfor­der­li­chen Datentabellen, also der eigent­li­chen Inhalte. Bequem fügst du Spalten hin­zu und defi­nierst die Art der Spalte. Möglich sind unter ande­rem Zeichenketten, Zahlen, Arrays, boole­sche Werte und Dateien. Im Gegensatz zu ande­ren Datenbanken wie MySQL las­sen sich Dateien wie Bilder und Dokumente ganz bequem über einen eige­nen Typ in eine Tabelle inte­grie­ren und spä­ter abru­fen. Außerdem erhältst du bei Bilddateien eine Vorschau.

Ganz auto­ma­tisch wer­den die Spalten „Id“, „createdAt“ und „updatedAt“ erstellt und gepflegt. Mit Hilfe der gra­fi­schen Benutzeroberfläche ist das Anlegen und Verwalten von Datenbanken spie­lend ein­fach. Im Handumdrehen legst du neue Zeilen an und füllst die­se mit Inhalt.

Willst du eine Tabelle ander­wei­tig ver­wen­den, expor­tierst du die­se mit einem Klick ins CSV-Format. Lediglich ein­ge­bun­de­ne Dateien wer­den beim Export igno­riert. Im CSV-Format las­sen sich Daten genau­so auch impor­tie­ren.

Von der Datenbank zur dynamischen Web-App

Nun wäre eine Datenbank rela­tiv nutz­los, könn­ten wir sie nicht in unse­re Website inte­grie­ren. Auch die­se Funktionalität hat Simbla intui­tiv gelöst. Die Einbindung ist sehr ein­fach und bequem.

Zunächst musst du die Datenbank in den Einstellungen dei­ner Website aus­wäh­len. Unmittelbar danach ste­hen dir alle Inhalte die­ser Datenbank inner­halb des Design-Editors zur Verfügung. An die­ser Stelle kom­men die soge­nann­ten App Widgets ins Spiel. Diese vor­ge­fer­tig­ten Inhaltselemente sor­gen für vor­de­fi­nier­te Datenbankverbindungen für bestimm­te Zwecke.

Dank der umfang­rei­chen Möglichkeiten erstellst du ohne gro­ßen Aufwand und ohne Kenntnisse in Programmierung und Datenbankabfragen ein­fa­che und auch kom­ple­xe Website-Applikationen. Egal, ob es sich Registrierungsformulare oder die Ausgabe von Inhalten in Tabellenform han­delt, die App Widgets dyna­mi­sie­ren dei­ne Website.

Dynamic Pages: Simbla wird zum CMS

Besonders die brand­neue App Widget-Kombination aus „Dynamic Grid” und „Dynamic Pages” kann dei­ner Website einen wah­ren Schub in Sachen Dynamisierung ver­set­zen. Denn mit Hilfe die­ser Widgets sorgst du dafür, dass Simbla dei­ne Inhalte als Grid-Übersicht anzeigt und für jeden Datensatz aus dei­ner Datenbank eine sepa­ra­te Seite erzeugt, die die Details des jewei­li­gen Satzes dar­stellt.

Die Konfigurations-Dialoge sind durch­weg ver­ständ­lich.

Schritt 1: Das dynamische Grid

Der ers­te Schritt besteht dar­in, im Simbla-Editor ein dyna­mi­sches Grid anzu­le­gen. Dies erfolgt voll­stän­dig gra­fisch und erfor­dert kei­ner­lei Programmierung in SQL oder ande­ren Sprachen. Bei der Definition des­sen, was im Grid ange­zeigt wer­den soll, kannst du Filter zur Einschränkung der Datenmenge zum Einsatz brin­gen. Ebenfalls mög­lich ist die Verwendung eines Suchfeldes, so dass nur die vom Besucher gewünsch­ten Inhalte Eingang in das Grid fin­den. Zudem defi­nierst du die Zahl der Resultate pro Seite und die auf- oder abstei­gen­de Sortierung nach einem eben­falls zu wäh­len­den Datenfeld.

Neuzugang in der Toolbox, das dyna­mi­sche Grid.

Im Seitendesign kannst du nun kon­kre­te Inhalte in der Form von Variablen set­zen, die die von zwei­fach geschweif­ten Klammern ein­ge­schlos­sen wer­den, also etwa {{Feldname}}. Diese Variablen sind frei for­ma­tier­bar. Vor allem kannst du den Rest der Seite ganz nach dei­nen Vorstellungen gestal­ten. Einschränkungen ent­ste­hen durch den Einsatz des „Dynamic Grid” kei­ne.

Das dyna­mi­sche Grid gestal­test du nach dei­nen Wünschen.

Das Ergebnis die­ser Arbeit ist ein sich selbst popu­lie­ren­des Grid mit den von dir gefil­ter­ten oder dei­nen Besuchern gesuch­ten Inhalten dei­ner Datenbank. Das ist eine schö­ne Sache, stellt aber nur die hal­be Lösung dar.

Schritt 2: Die dynamischen Seiten

Denn jetzt kom­men unse­re „Dynamic Pages” ins Spiel. Diese set­zen ihrer­seits am Grid an und erwei­tern es. Mit die­sem zusätz­li­chen Widget erhält jeder Inhalt unse­res dyna­mi­schen Grids einen Link zu einer Detailseite, auf der du dann – wie­der­um voll­kom­men frei – gestal­ten kannst, was und in wel­cher Optik der Besucher sehen soll.

Ein gutes Beispiel für die Verwendung der Widget-Kombo ist die­ses Escape Room Directory. Escape Rooms sind eine neue Form von Gruppenspiel. Man lässt sich als Kleingruppe in einem Raum ein­sper­ren und muss sich dann inner­halb von 60 Minuten befrei­en. Dazu ist es erfor­der­lich, aller­lei Aufgaben zu bewäl­ti­gen und Rätsel zu lösen. Escape Rooms gibt es über­all auf der Welt und es wer­den schnell mehr.

Das Escape Room Directory star­tet mit dem Suchfeld als Ausgangspunkt.

Damit ist ein Verzeichnis die­ser unge­wöhn­li­chen Spielstätten genau die rich­ti­ge Aufgabe für ein dyna­mi­sches Grid mit ange­häng­ten dyna­mi­schen Seiten. Denn der Designer muss kei­ner­lei Hand mehr anle­gen, wenn das Layout steht. Allein jeder zusätz­li­che Datenbankeintrag sorgt dafür, dass auto­ma­tisch eine wei­te­re Seite dyna­misch gene­riert und über die Grid-Ansicht zugäng­lich gemacht wird.

Innerhalb des „Dynamic Pages” Widgets defi­nierst du in ers­ter Linie die URL-Struktur, die der Anzeige der Detailseiten hin­ter­legt sein soll. Sollte es sich um Inhalte han­deln, die nur regis­trier­ten oder ander­wei­tig berech­tig­ten Besuchern zugäng­lich machen willst, nimmt du hier die ent­spre­chen­de Einschränkung auf auto­ri­sier­te Rollen vor.

Das Template für die Detailseite gestal­test du völ­lig frei. Nur die Variablen musst du ein­set­zen.

Für die Detailseiten legst du in dei­ner Website eine neue Seite an, die als Vorlage, als Template für die Optik der Detailansicht dient. Auch die­se kannst du natür­lich frei desi­gnen. Die Inhalte aus der Datenbank fügst du in drei­fach geschweif­ten Klammern ein, also zum Beispiel mit {{{Feldname}}}. Dein Template ver­knüpfst du dann mit der glei­chen Datentabelle, di du zuvor schon für das Grid gewählt hat­test und akti­vierst die Checkbox „Dynamic Pages” in den Einstellungen. Mehr ist nicht zu tun.

Fazit: Dynamische Inhalte können nicht einfacher integriert werden

Mit der neu­en Kombination aus „Dynamic Grid” und „Dynamic Pages” bie­tet der Simbla Website Builder eine fle­xi­ble Lösung für die Darstellung grö­ße­rer Datenmengen auf der Basis ein­zel­ner Seiten. Das habe ich bis­lang beim Wettbewerb so nicht gese­hen. Auch ist mir kei­ne ande­re Lösung geläu­fig, die Datenbankinhalte auf die­se ein­fa­che und kom­for­ta­ble Weise ohne jeg­li­chen Programmieraufwand netz­taug­lich macht.

Unsere übri­gen Beiträge zu Simbla fin­dest du hier, hier und hier.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.