Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » (Kostenlose) Services » Simbla 2017: Dynamische Seiten aus dem Homepage-Baukasten

Simbla 2017: Dynamische Seiten aus dem Homepage-Baukasten

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dieter Petereit
  • 15. Juni 2017
Bookmarke mich
Share on pocket

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Agenturpartner

SEO Galaxy

Udler

Warscher – Digital Experts

Horgen

Evergreen Media

Innsbruck

Haurand Webdesign

Aachen

Webagentur klickbeben

Innsbruck

Alle Agenturpartner

Jobs

Junior Webdesigner/ Mediengestalter

Innsbruck

Copywriter – Vollzeit

Remote

Junior Online Marketing Manager

München

WordPress Developer – Vollzeit

Remote

SEA Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun.

 →   

Good Web Design: Best Practices für moderne Designer

Good Web Design ist ein Dienst, der sich der Sammlung der besten Landing Pages verschrieben hat. Dabei fokussieren sich die Macher auch auf Details, etwa

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.