Datumsangaben mit separaten Auswahlmenüs eintragen

Vorwort

Ein typischer Anwendungsfall: Ihre Website benötigt ein Anfrageformular, welches die übermittelten Daten in einer MySQL-.Datenbank speichern sowie dem Besucher ermöglichen soll, unter anderem auch das Datum des gewünschten Meetings festlegen zu können.

Als Entwickler eines Onlineformulars mit Anbindung an eine Datenbank hat man beim Thema “Datumsangaben speichern” mehrere Möglichkeiten zur Auswahl:

simples HTML-Textfeld

Ein simples HTML-Textfeld, in welches der Besucher das Datum manuell einträgt..

Dummerweise wirft diese Billig-Lösung gleich mehrere gravierende Probleme auf:

a) die von einer MySQL-Datenbank standardmäßig verwendeten internen Formate einer Datumsangabe in einem sog. “date”-Feld ist, wie im Bild angezeigt, alles andere als benutzerfreundlich für Besucher aus dem deutschen Sprachraum :: MySQL erwartet eine Jahr-Monat-Tag – Angabe im yyyy-mm-dd (2011-12-31) oder yy-mm-dd (11-12-31) – Format, und beide Varianten werden Ihrem Besucher erfahrungsgemäß kaum vertraut sein.

b) die vor Eintragung der Formulardaten zwingend erforderliche Validierung eines simplen Textfelds ist zwar mit PHP möglich, das Resultat (“bitte korrigieren Sie die Angaben in Feld X”) wird Ihren Besucher im Fall eines inkorrekt eingetragenen Datumsformats eher abschrecken.

ein typischer Datepicker

Websites, die zeitgemäß wirken wollen, präsentieren ihren Besucher für gewöhnlich einen sog. “Datepicker”, welcher eine Datumsauswahl deutlich vereinfacht und weitgehend intuitiv zu bedienen ist.

Leider hat auch diese “coole” Lösung in der Praxis ihre Schattenseiten:

a) Besucher mit Sehbehinderungen oder eingeschränkter Motorik werden unter Umständen mit der Bedienung eines Datepickers Probleme bekommen.

b) Datepicker funktionieren nur, wenn der Browser Javascript unterstützt, was bedeutet, dass sich diese Lösung bei “sicherheitskritischen” Anwendungen, die allen Besuchern zur Verfügung stehen müssen und sich nicht auf technische Eventualitäten verlassen dürfen, eigentlich von selbst verbietet.

Müßig zu erwähnen, dass ein im Browser nicht angezeigter Datepicker dazu führt, dass der Besucher alternativ eine manuelle Eingabe zu tätigen hat, was wiederum bedeutet, dass der Entwickler auf jeden Fall für eine Validierung des Datum-Textfelds zu sorgen hat und die damit einhergehenden Probleme (s.o.) prinzipiell unvermeidbar sind.

Was tun ?

Als einzig sichere und barrierefreie Lösung, die standardmäßig auch keine zusätzliche Validierung erfordert und insofern auch die tatsächlich “preiswerteste” darstellt, bietet sich an, dem Besucher eine intuitive Datumsauswahl mittels mehrerer vordefinierter HTML-Auswahllisten zu ermöglichen:


drei Auswahllisten

Die in folgendem Bild angezeigte Code-Ansicht des “Monate”-Menüs belegt, warum Auswahllisten verlässliche Garanten einer fehlerfreien Datenspeicherung darstellen :: für jeden im Browser angezeigten Monat wird ein entsprechender nicht sichtbarer und vom Besucher nicht manipulierbarer Wert (“value”) definiert.

Im konkreten Fall besteht dieser Wert aus einer zweistelligen Zahl (01-12), welche dem von MySQL erwarteten “mm” – Format entspricht und bei Absenden des Formulars in der Datenbank gespeichert wird:


der Code des Monate - Auswahlmenüs

Ziel dieses Tutorials

Da Dreamweaver hinreichend brauchbare “Datensatz einfügen” bzw. “Datensatz aktualisieren” Serververhalten bietet, wird auf diesen aufgebaut und erläutert, mit welchen simplen PHP-basierten Mitteln die vom Besucher ausgewählten Werte der separaten Auswahllisten vor einer Speicherung in der Datenbank in einem einzigen “Gesamtwert” zusammengefasst werden, welcher eine vollständige und syntaktisch korrekte MySQL-Datumsangabe darstellt.

Des Weiteren wird erläutert, wie eine gespeicherte Datumsangabe in einer “Datensatz aktualisieren”-Seite in ihre einzelnen Bestandteile zerlegt werden kann, um diese der betreffenden Auswahllisten als vorselektierten Wert zu übermitteln.

Zu einem späteren Zeitpunkt werde ich vielleicht noch “einen drauflegen” und die vorher erläuterte Tag/Monat/Jahr – Datumsangabe um eine weitere Auswahlliste mit Zeitangaben im hh:mm (15:30) – Format erweitern.

Vorausgesetzte Kenntnisse

a) Formularerstellung mit Dreamweaver

b) allgemeine Erfahrung mit Dreamweavers PHP_MySQL Server Behaviors “Datensatz einfügen” und “Datensatz aktualisieren”

c) rudimentäre PHP-Kenntnisse

d) Anlegen einer MySQL-Tabelle mit z.B. phpMyAdmin

Dieses Tutorial geht natürlich davon aus, dass ein lokaler PHP/MySQL – Testserver installiert und betriebsfähig ist. ;-)


Themenübersicht dieses Tutorials

> Datumsangaben mittels Auswahllisten

MySQL-Tabelle und Formular anlegen

Datensatz eintragen

Datenliste erstellen

Datensatz aktualisieren

Tutorial-Kommentar
Ihre Emailadresse wird nicht veröffentlicht