Online-Tabellen – Teil 2

Einleitung

In Teil 1  wird eine Online-Tabelle zum Download angeboten. Hier erfolgt eine detailliertere Beschreibung der Dateistruktur und der Entwicklung. Auftretende Herausforderungen und sonstige hilfreiche Informationen werden am Ende gegeben.

Die vorgestellte Tabelle funktioniert nicht für Toucheingabe und ist daher ungeeignet für Tablets und Smartphones, weshalb in Teil3 eine Alternative mit folgenden weiteren Eigenschaften vorgestellt wird.

  • Keine Datenbank notwendig, stattdessen Datenablage im JSON Format in Dateien
  • Zwei Benutzerlevel

Datei- und Datenstruktur

Das Projekt besitzt folgende Dateistruktur:

  • media
    Ordner mit den jQuery und Datatable Dateien
  • index.php
    Zeigt Tabelle ohne Editiermöglichkeiten und bietet Möglichkeit zum Einloggen. Wenn der Benutzer bereits eingeloggt ist, wird auf fullaccess.php umgeleitet
  • fullaccess.php
    Zeigt Tabelle mit Editiermöglichkeiten und bietet Möglichkeit zum Ausloggen. Wenn der Benutzer nicht eingeloggt ist, wird auf index.php umgeleitet
  • mysql.php
    Wird in die anderen php Dateien eingebunden. Das einbinden führt zum automatischen Einloggen in die Datenbank. Zudem werden Funktionen zum Zugriff auf die Datenbank bereitgestellt. Bei Verwendung einer anderen Datenbank sind hier Datenbankname, Benutzer, Passwort usw. zu ändern
  • UpdateData.php
    Wird von fullaccess.php aufgerufen. Kann Datensätze in der Datenbank ändern, wenn der Benutzer angemeldet ist.
  • DeleteData.php
  • Wird von fullaccess.php aufgerufen. Kann Datensätze in der Datenbank löschen, wenn der Benutzer angemeldet ist.
  • AddData.php
    Wird von fullaccess.php aufgerufen. Kann neue Datensätze in der Datenbank erstellen, wenn der Benutzer angemeldet ist.

Die MySQL Datenbank beinhaltet zwei Tabellen:

  • teilnehmer
    Daten zur Anzeige in der Tabelle
  • user
    Daten den Beutzerverwaltung

Entwicklung

Basis des Projektes bilden das Beispiel customize-buttons. Es zeigt wie sich mittels JavaScript (jQuery Datatable) und HMTL eine dynamische Datentabelle erstellen lässt und sich Zeilen löschen und hinzufügen lassen. Für die index.php wurden die Funktionaltität für löschen und einfügen entfernt, da nicht eingeloggte Nutzer keine Editierfunktion erhalten sollten.

Der erstellte HTML Quellcode läuft vollständig im Webbrowser. Der Inhalt der Tabelle ist Teil des HTML Textes. Nun muss eine Möglichkeit geschaffen werden, die Datenbankinhalte in die Tabelle zu schreiben. Auf der Seite server_side wird beschrieben wie sich Inhalte auf Seite des Webservers mittels PHP und JSON erzeugen lassen. Ich habe eine reine PHP basierte Variante gewählt. Beim Aufruf der Seite ruft der Webserver die Datenbank ab und erstellt daraus eine HTML Seite.

Folgender Quellcodeauszug aus Index.php zeigt das Auslesen der Datenbank und die sequenzielle Erstellung des PHP Quellcodes.

Der erzeugte HTML Text wird in der Variable $return abgelegt von dort in den restlichen HTML Text der Seite eingefügt. Beim Seitenaufruf wird der dynamisch erstellte HTML Text Webbrowser gesendet.

Die Variante mit JSON hat wohl einen geringeren Ressourcenverbrauch, wurde aber aus Zeitgründen nicht umgesetzt.

Die Index.php lässt keine Änderungen der Daten zu, somit genügt die bisher beschriebene Tabellenfunktionalität. Es fehlt nur noch die Funktion zum Einloggen und das Umleiten nach fullaccess.php, falls der Nutzer bereits eingeloggt ist. Unter login-systeme sind verschiedene Login Systeme beschrieben. Hier wurde die Variante Fortgeschritten gewählt, da Funktionalität genügt und die Profi Variante Webspace mit zusätzlichen Eigenschaften benötigt.

Nach dem Einloggen wird man auf fullaccess.php umgeleitet. Hier sollte neben dem einfachen Löschen und Anlegen von Zeilen auch das Editieren innerhalb der Tabelle möglich sein. Daher wurde der Code aus dem Beispiel Editable eingearbeitet, welche diese Funktionalität bereitstellt.

Änderungen finden nur im Speicher des Webbrowser statt und werden bisher nicht an die Datenbank zurückgeschrieben. Ein Neuladen der Seite führt dazu, dass alle Änderungen verloren sind.

Eine Anleitung für das Löschen von Einträgen ist unter delete-record zu finden. Das Vorgehen ist für Editieren/Update und Einfügen ähnlich. Im HTML Quellcode können php Dateien angegeben werden, welche bei Update, Löschen und Anlegen aufgerufen werden. In diesen php Dateien sind die notwendigen Datenbankzugriffen zu realisieren.

Hilfreiche Informationen

Die verlinkten Beispiele sollten den Quellcode in ausreichender Form erklären. Bei der Erstellung ist mir aufgefallen, dass einige Sachverhalte kaum beschrieben sind. Auf diese wird hier eingegangen.

Konsistente  Datenhaltung

Änderungen der Daten im Webbrowser werden an den Webserver weitergegeben. Wichtig dabei ist, dass der Webbrowser eine Datenänderung nur übernimmt, wenn diese vom Webserver durchgeführt werden konnte. Da die Parameterübergabe und die Intepretation des Rückgabewertes nur unzureichend erklärt sind und sich zudem zwischen den Änderungsvorgängen unterscheiden erfolgt eine kurze Erklärung.

Löschen (DeleteData.php)

Mittels $_REQUEST lassen sich Informationen zur Änderung erfragen

  • $_REQUEST[‚id‘]
    Indexnummer der zu löschenden Zeile

War das Löschen erfolgreich, ist der Text „ok“ als HTML Body zurückzugeben. Im Fehlerfall, kann eine Fehlertext zurückgegeben werden, welcher dann im Webbrowser angezeigt wird.

Update (UpdateData.php)

Mittels $_REQUEST lassen sich Informationen zur Änderung erfragen

  • $_REQUEST[‚value‘]
    Neuer Wert
  • $_REQUEST[‚columnName‘]
    Spaltenname des neuen Wertes
  • $_REQUEST[‚id‘]
    Zeilenindex des neuen Wertes

War das Schreiben erfolgreich, ist der neue Wert als HTML Body zurückzugeben. Im Fehlerfall, kann eine Fehlertext zurückgegeben werden, welcher dann im Webbrowser angezeigt wird.

Einfügen (AddData.php)

Mittels $_REQUEST lassen sich Informationen zur Änderung erfragen

  • $_REQUEST[‚Spaltenname‘]
    Liefert für einen Spaltennamen den Wert welcher zu setzen ist

War das Einfügen erfolgreich, ist der Zeilenindex der hinzugefügten Zeile als HTML Bodyzurückzugeben. Im Fehlerfall, kann eine Fehlertext zurückgegeben werden, wobei zu beachten ist, dass der Fehler im Webbrowser nur erkannt wird, wenn der HTML Header den Fehler 404 oder 405 liefert.

Es ist anzumerken, dass eine vollständige Konsistenz nicht erreicht werden kann, da zwei Webbrowser gleichzeitig zugreifen können und der eine die Änderung des anderen erst nach dem Neuladen sieht.

Angepasste Sortierung

Bei den europäischen Datumsangaben ist eine einfache alphabetische Sortierung meist nicht ausreichend, da dafür das Jahr vorne stehen müsste.

Bei Datatables lassen sich daher verschiedene Sortierungen einstellen. Hier wurde für die erste Spalte „date-euro“ als Sortierung gewählt. Mit „bSearchable“ wird die Spalte von der Suche ausgenommen. Die nachfolgenden null Werte zeigen für die folgenden Spalten an, dass hier keine Eigenschaftsänderungen durchzuführen sind.

Die Sortierung „date-euro“ ist keine Sortierung die von DataTable bereitgestellt wird, sondern eine eigene Funktion die noch zu definieren ist.

Die Funktion dateHeight erzeugt aus dem Datumstext einen vergleichbaren Wert. Das Array mit Sortierfunktion wird dann um zwei auf dateHeight aufbauende Funktionen für die aufsteigende und absteigende Suche erweitert.

Validierung

Die Validierung erfolgt im Webbrowser, da Information über Falscheingaben schon während der Eingabe erfolgen kann.

Beim Anlegen eines neuen Datensatzes öffnet sich ein Dialog. Folgender Quellcode erzeugt die Validierung dieser Eingabe.

Unter „rules“ werden die Regeln festgelegt und unter „messages“ lassen sich die Standardmeldungen bei verletzen der Regeln durch eigene Texte ersetzen. Es gibt viele vorgefertigten Regeln wie „required“, „digits“ usw. Eine Übersicht liefert methods. Eigene Methoden lassen sich einbinden. So wurde custom_float  eine Abfrage auf Gleitkommawert eingefügt, welche unter „rules“ verwendet wird.

Die Inline Validierung beim Ändern von Werten in der Tabelle erfolgt mittels

Die Methoden sind hierbei die Gleichen. Ein flexibler aber auch komplexer Ansatz wird in inline-validation vorgestellt.

Anmerkung zu aoColumns

Wie gezeigt lassen sich die Spalteneigenschaften mittels aoColumns verändern. Analysiert man fullaccess.php ist zu erkennen, dass die aoColumns zweimal verwendet wird. Grund hierfür ist, dass bestimmte Eigenschaften nur wirken, wenn Sie an der richtigen Stelle angegeben werden. Eine Grobeinordnung ist

  • $(document).ready( function (){$(„#example“).dataTable({„aoColumns“:…});)}
    Hier sind die Eingenschaften anzugeben, welche die Ansicht beeinflussen.
  • $(document).ready( function (){$(„#example“).dataTable().makeEditable({„aoColumns“:…});)}
    Hier sind die Eingenschaften anzugeben, welche die inline Editierung beeinflussen.

Schreibe einen Kommentar

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