Online-Tabellen – Teil 1

Einleitung

Für einen Sportverband habe ich eine editierbare Online-Tabelle erstellt um eine Übersicht über die aktiven Sportler zu erhalten. Eine Testversion ist unter http://roy77.bplaced.net zu sehen. Die Tabelle ist dynamisch, somit werden Änderung an Sortierung, Suchfilter usw. ohne neuladen der Seite angezeigt. Die Daten können von allen gelesen, aber erst nach Login editiert werden. Durch Klicken auf einen Wert in der Tabelle, lässt sich dieser direkt editieren.

Demobild

Je nach Anwendung ist es nicht notwendig eine eigene Online-Tabelle zu programmieren. Für einfachere Anwendungen mit unkritischen Daten erlauben Webdienste wie zum Beispiel www.bullsheet.de eine sehr schnelle Erstellung einer Online-Tabelle.

Sollte das hier beschriebene vorgehen nicht den eigenen Anforderungen entsprechen, kann eine Websuche mit „crud“ (Create, read, update and delete) als Schlüsselwort weitere hilfreiche Informationen liefern.

Grundkonzept

Der Webserver sendet beim Seitenaufruf den kompletten Datenbestand zum Webbrowser. Im Webbrowser ist auf dem Datenbestand eine Suche und Sortierung möglich. Änderungen am Datenbestand werden parallel im Webserver und Webbrowser durchgeführt, dadurch wird ein Neuladen vermieden. Nachteilig ist dabei, dass Änderungen durch einen anderen Nutzer erst nach dem Neuladen angezeigt werden.

Grundaufbau

Die Suche nach einer dynamischen Tabelle führt zu https://datatables.net einem jQuery Plugin mit sehr umfangreichen Funktionen zur Anzeige und Manipulation von Tabellen. DataTables ist wie jQuery in Javascript realisiert und wird daher im Webbrowser ausgeführt.

Die Teilnehmerdaten werden in einer MySQL Datenbank gehalten. Der Datenaustausch zwischen Datenbank und DataTable erfolgt im Webserver mittels PHP.

Des Weiteren wurde ein Login System mittels PHP implementiert welches erst nach einem erfolgreichen Login eine Änderung der Daten erlaubt. Dazu wurden die Beispiele von login-systeme als Basis verwendet.

Als Webspace kann ich http://www.bplaced.net empfehlen. Hier habe ich kostenlosen werbefreien Webspace ohne Trafficbegrenzung erhalten und die Erreichbarkeit hat meinen Ansprüchen bisher genügt. Natürlich gibt es viele Alternativen.

Installation

Eine Installation ist für Neueinsteiger in den Bereich Webprogrammierung schwierig, weshalb eine umfangreiche Anleitung notwendig wäre. Um einen einfachen Zugang zu schaffen, habe ich das Projekt in den portablen Webserver von www.usbwebserver.net integriert.

Nach entpacken der Datei USBWebserver_Datatable kann der Webserver mittels „ usbwebserver.exe“ gestartet werden. Es öffnet sich eine GUI. Durch Klick auf Localhost wird der Standard Webbrowser geöffnet und die Tabelle angezeigt. Natürlich kann nach Start des Webservers mit dem beliebigen die Tabelle über die URL http://localhost:8080/ erreicht werden.

Zugang zum Editieren der Tabelle ist mittels

  • Benutzer: Karl
  • Passwort: geheim

möglich.

Detaillierte Beschreibung des Projektes erfolgt in Teil 2.

Download

USBWebserver_Datatable

Schreibe einen Kommentar

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