Brace Data - Google Tabelle als CMS
Beispiel
Auswertung
Dateneingabe
Grundlagen des Einbaus
Mit gridspree.io hat man die Möglichkeit:
-
eine Google Spreadsheets Tabelle (selektiv) in einer nPage Textseite auszugeben
-
eine Google Spreadsheets Tabelle über ein Formular mit Werten zu füllen
In beiden Fällen erfolgt dies über eine Script-Ausruf mit einem eindeutigen Schlüssel. Details werden im Folgenden dargestellt.
Auswertung
Eine bereits existierende Google Spreadsheets Tabelle kann mit
<script src="https://gridspree.io/ss/READ_KEY.js"></script>
<script type="x-gridspree-template">
<ul>
{{#rows}}
<li>
{{Price}},
{{Title}},
{{Quantity}}
</li>
{{/rows}}
</ul>
</script>
eingefügt werden. Der READ_KEY wird individuell festgelegt (siehe unten). Der HTML-Code zur Strukturierung der Ausgabe kann individuell gestaltet werden.
Dateneingabe
Neue Datensätze können wie folgt hinzugefügt werden:
<form action="https://gridspree.io/ss/WRITE_KEY" method="POST">
<input type="text" name="Price">
<input type="text" name="Title">
<input type="text" name="Quantity">
<input type="submit" value="Send">
</form>
Auch der WRITE_KEY wird individuell festgelegt. Die übrige Struktur des Formulars richtet sich nach der Struktur der Google Spreadsheets Tabelle.
Datenbereitstellung und Keys ermitteln
Grundlage der Verwendung von gridspree.io ist:
-
dass man überhaupt einen Google-Account hat
-
dass man über diesen Google Account eine Tabelle mi einer Datenstruktur angelegt hat
Diese beiden Schritte sind nicht Gegenstand dieser Darstellung sondern werden vorausgesetzt.
1. Schritt: Startseite Gridspree.io aufrufen
Zunächst ruft man https://gridspree.io auf und klickt auf das Feld GET STARTED
2. Schritt: (optional) Bei Google anmelden
Wenn man zum aktuellen Zeitpunkt gerade nicht bei Google angemeldet ist, dass wird man zunächst zum Login für den Google Account weitergeleitet.
Alternativ kann man hier auch einen Google-Account erstellen.
3. Schritt: Zugriff von Gridspree genehmigen
In einem Zwischenschritt muss man Gridspree.io den Zugriff auf das Google-Konto genehmigen.
4. Schritt: Spreadsheet zu Gridspree.io hinzufügen
Wenn man bisher noch nie eine Google Tabelle zu Gridspree.io hinzugefügt hat, dann ist die nachfolgende Übersicht leer und man kann mit einem Klick auf ADD SPREADSHEET eine im Google Account vorhandene Tabelle hinzufügen.
Dazu wird eine entsprechende Übersicht angezeigt:
In bestimmten Fällen ist es übersichtlicher, dabei auf die Listenansicht umzuschalten:
5. Schritt: Anzeige der Lese- und Schreibschlüssel
Nach dem Hinzufügen wird der Lese-Schlüssel und eine Musterstruktur zum Einbau in die eigene Website angezeigt:
Analog dazu erhält man auch einen Schreibschlüssel mit dem HTML-Code für ein Beispiel-Formular:
Für alle hinzugefügten Tabellen hat man in dieser Übersicht Zugriff auf die Schlüssel:
Übersicht über alle einzelnen Seiten dieser Website
Diese Website enthält eine Reihe von Tests zu verschiedenen Themen der Webseitengestaltung. Es gibt daher einige Seiten ohne Navigationsmöglichkeit, auf anderen Seiten ist die Navigation nicht vollständig. Diese Sitemap soll daher allen Besuchern eine Übersicht zu allen Inhalten geben von der aus man zu den einzelnen Seiten navigieren kann.
Darüber hinaus wird diese Inhaltsübersicht immer dann angezeigt, wenn eine Seitenadresse zu dieser Website aufgerufen wird, die nicht (mehr) existiert).
Auf dieser Website werden eine Vielzahl von Design-Styles verwendet. Nachfolgend eine Übersicht zu den Design-Styles, jeweils mit Link zu einer Beispiel-Seite (oder mehreren)
-
Style01 (Standard) - Willkommen, Erklärungen, Test der Bildschirmbreite, Verzeichnis der Testumgebungen , Gästebuch , Kontaktformular, Galerie "Galerie der Navigationen Teil 1", Galerie "Galerie der Navigationen Teil 2", Galerie "Galerie der Navigationen Teil 3", Linkliste , Diverse Zeichen, Symbole und Pictogramme, - Google Adsense; responsive
-
HTML5Up-aerial, HTML5Up Aerial Testseite 1; responsive
-
Font Awesome, Font Awesome Testseite 1
-
Feedreader, Feedreader Demo 1 - Google Adsense; responsive
-
Dropdown-CSS3-Only, Dropdown-CSS3-Only Demo 1
-
Animiert-Responsiv-Dropdown, Animiert-Responsiv-Dropdown Demo 1 - Google Adsense; responsive
-
Apfel-CSS3, Apfel-CSS3 Demo 1
-
Aqua-Tabbed, Aqua-Tabbed Demo 1
-
Prettify-Test, Prettify-Test Style Testseite 1 mit nPage Script - Google Adsense; responsive
-
Bubble-Wrap-Vertical, Bubble-Wrap-Vertikal-Demo 1
-
Cherry-Responsive, Cherry-Responsive Demo 1 - Google Adsense; responsive
-
Dropdown-CSS3-Only-nPage-Script, Dropdown-CSS3-Only nPage Script Demo 1
-
Animiert-Responsiv-Dropdown-nPage-Script, Animiert-Responsiv-Dropdown-mit-nPage-Script Demo 1 - Google Adsense; responsive
-
Responsive-tabellen-01, Testseite responsive Tabellen - Google Adsense; responsive
-
Galerieanpassung, Angepasste Galerie 01 , Angepasste Galerie 02, Angepasste Galerie 03 - Google Adsense; responsive
-
css3-muster, CSS3 Muster
-
Responsive-Site-Menu, Responsive-Site-Menu Test 01; responsive
-
Flat-jQuery-Responsive-Menu, Flat-jQuery-Responsive-Menu Demo 1 - Google Adsense; responsive
-
Wie Bootstrap 01, Testseite zu Wie Bootstrap 01 - Google Adsense; responsive
-
Cherry-Responsive-nPage-Script, Cherry-Responsive-mit-nPage-Script Demo 1 - Google Adsense; responsive
-
Canvas-mit-aenderbarer-Groesse, Canvas mit änderbarer Größe; responsive
-
BootM-01, BootM responsive 01 - Google Adsense; responsive
-
BootM-01-nPage-Script. BootM responsive 01 nPage Script - Google Adsense; responsive
Seitentitel
Letzte Aktualisierung
24.05.2015 20:50:23
25.08.2015 10:28:30
25.08.2015 10:28:27
24.08.2015 08:55:38
24.08.2015 22:04:47
31.08.2015 00:52:58
31.08.2015 00:53:02
24.08.2015 22:05:39
24.08.2015 23:36:40
24.08.2015 23:36:48
01.09.2015 11:48:32
14.07.2014 11:02:55
26.05.2015 09:35:08
24.08.2015 11:54:56
03.09.2015 10:06:01
01.09.2015 13:26:49
11.08.2015 11:24:29
28.06.2014 12:12:07
25.05.2015 22:36:09
28.06.2014 12:12:43
21.09.2015 08:57:52
28.06.2014 22:28:31
07.07.2014 18:08:23
11.11.2014 13:27:44
28.08.2015 00:19:44
28.04.2015 23:19:41
12.08.2015 23:36:30
12.08.2015 23:34:29
28.04.2015 23:27:30
03.09.2015 11:48:37
03.09.2015 11:47:47
03.09.2015 11:49:10
21.09.2015 08:02:57
22.09.2015 10:17:22
21.09.2015 12:03:38
20.03.2016 22:07:46
Extras
-
-
-
-
-
28.04.2015 23:44:19
25.05.2015 21:22:44
11.08.2015 11:25:19
26.05.2015 14:58:36
25.08.2015 13:59:05
27.08.2015 13:18:49