Brace Data - Google Tabelle als CMS

Beispiel

Auswertung

Dateneingabe

Grundlagen des Einbaus

Mit gridspree.io hat man die Möglichkeit:

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:

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

Startseite Gridspree.io aufrufen

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.

Bei Google anmelden - erster Schritt

Bei Google anmelden - zweiter Schritt

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.

Zugriff von Gridspree 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.

 

Spreadsheet zu Gridspree.io hinzufügen

Dazu wird eine entsprechende Übersicht angezeigt:

Tabelle für Gridspree auswählen

In bestimmten Fällen ist es übersichtlicher, dabei auf die Listenansicht umzuschalten:

Auswahl in Listenansicht

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:

Leseschlüssel und Musterstruktur

Analog dazu erhält man auch einen Schreibschlüssel mit dem HTML-Code für ein Beispiel-Formular:

Schreibschlüssel und Musterstruktur und alle Schlüssel

Für alle hinzugefügten Tabellen hat man in dieser Übersicht Zugriff auf die Schlüssel:

Übersicht aller hinzugefügten Tabellen

Ü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)

  1. Style01 (Standard) - Willkommen, Erklärungen, Test der BildschirmbreiteVerzeichnis der TestumgebungenGä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
  2. HTML5Up-aerial, HTML5Up Aerial Testseite 1; responsive
  3. Font Awesome, Font Awesome Testseite 1
  4. Feedreader, Feedreader Demo 1 - Google Adsense; responsive
  5. Dropdown-CSS3-Only, Dropdown-CSS3-Only Demo 1
  6. Animiert-Responsiv-Dropdown, Animiert-Responsiv-Dropdown Demo 1 - Google Adsense; responsive
  7. Apfel-CSS3, Apfel-CSS3 Demo 1
  8. Aqua-Tabbed, Aqua-Tabbed Demo 1
  9. Prettify-Test, Prettify-Test Style Testseite 1 mit nPage Script - Google Adsense; responsive
  10. Bubble-Wrap-Vertical, Bubble-Wrap-Vertikal-Demo 1
  11. Cherry-Responsive, Cherry-Responsive Demo 1 - Google Adsense; responsive
  12. Dropdown-CSS3-Only-nPage-Script, Dropdown-CSS3-Only nPage Script Demo 1
  13. Animiert-Responsiv-Dropdown-nPage-Script, Animiert-Responsiv-Dropdown-mit-nPage-Script Demo 1 - Google Adsense; responsive
  14. Responsive-tabellen-01, Testseite responsive Tabellen - Google Adsense; responsive
  15. Galerieanpassung, Angepasste Galerie 01 , Angepasste Galerie 02Angepasste Galerie 03 - Google Adsense; responsive
  16. css3-muster, CSS3 Muster
  17. Responsive-Site-Menu, Responsive-Site-Menu Test 01; responsive
  18. Flat-jQuery-Responsive-Menu, Flat-jQuery-Responsive-Menu Demo 1 - Google Adsense; responsive
  19. Wie Bootstrap 01, Testseite zu Wie Bootstrap 01 - Google Adsense; responsive
  20. Cherry-Responsive-nPage-Script, Cherry-Responsive-mit-nPage-Script Demo 1 - Google Adsense; responsive
  21. Canvas-mit-aenderbarer-Groesse, Canvas mit änderbarer Größe; responsive
  22. BootM-01, BootM responsive 01 - Google Adsense; responsive
  23. 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