Array mit Canvas Elementen Sichern

[1unitedpower]

Naja dann mal Butter bei die Fische, also es geht darum, das man sich quasi eine Patenschaft für ein Stück rasen sichern kann und den auf der Seite sich reservieren. Daher ist es ein Muss, denk ich mal, das der König von England weiß, was sich der Bulle von Tölz schon reserviert hat.

Ja, das ist dann wohl wirklich sinnvoll und sogar notwendig.

Mit cookies hätte ja jeder nutzer nur seinen eigenen zustand für sich gespeichert oder?

Die Beobachtung ist richtig. In deinem Fall müsstest du wohl auf serverseitige Technologien zurückgreifen.

Welche serverseitige Technologie würde sich denn in dem Fall anbieten?

Mit PHP hast du ja laut eigener Aussage schon Erfahrung, wenn auch nur sehr wenig. Der verbreiteste Software-Stack, dürfte also ein Apache-Webserver für die grundlegende HTTP-Funktionalität, eine MySQL-Datenbank zum dauerhaften Speichern der Zustände und PHP für die Programmlogik sein. Das Trio wird wegen seiner Popularität oft auch einfach als LAMP-Stack bezeichnet, das L steht für Linux.

In groben Zügen, musst du zuerst ein MySQL-Datenbankschema entwerfen, dass alle relevanten Informationen speichern kann. Das werden mehrere Tabellen werden, beispielsweise eine Tabelle für Raseflächen, eine Tabelle für Paten und eine verknüpfende Tabelle für Partnerschaften.

Deine PHP-Anwendung, wird die Daten aus dieser Datenbank auslesen und darauf aufbauend eine HTML-Seite erzeugen. Die HTML-Seite sollte die Informationen darüber enthalten, welche Rasenflächen schon reserviert sind und ein Formular für die noch zu vergebenen Rasenflächen enthalten. Das kann beispielsweise eine Checkbox für jede noch verfügbare Rasenfläche sein.

Von der Darstellung her sind Checkboxen natürlich nicht so ansprechend, wie die <canvas>-Visualisierung, mit der du dir offensichtlich schon viel Mühe gegeben hast. Aber darauf musst du auch nicht verzichten, du kannst schließlich deine <canvas>-Animation mit den Checkboxen aus dem Formular über JavaScript synchronisieren indem du entsprechende EventHandler beim Formular und bei beim <canvas> registrierst, die Änderungen festellen und angleichen können. Etwas fortschrittlicher wäre es, die Synchronisierung nicht direkt zwischen Formular und Canvas vorzunehmen, sondern ein Model zu implementieren, das die Zustände an einer zentralen Stelle verwaltet. Formular und Canvas müssen dann immer nur den Zustand des Models reflektieren und manipulieren. Formular und Canvas wären auf diese Weise entkoppelt.

Der Nutzer kann das Formular dann ausfüllen und wieder an den Webserver schicken. Deine PHP-Anwendung muss die Formulardaten dann entgegennehmen und in der Datenbank speichern. Bevor sie das macht, sollte sie die Daten aber unbedingt auf Gültigkeit prüfen: Ist die Rasenfläche, die der Nutzer ausgewählt hat, wirklich noch verfügbar? Gibt es eine solche Rasenfläche überhaupt? Du kannst dich nicht darauf verlassen, dass deine PHP-Anwendung nur gültige Eingabedaten enthält, du musst immer auch mit falschen Eingaben rechnen.

Wenn du dich in JavaScript sicherer fühlt als in PHP, dann könnte auch ein Node.js-Server die richtige Wahl für dich sein, um die serverseitige Logik zu implementieren. An dem konzeptionellen Vorgehen aus den obenstehenden Ausführungen ändert sich dadurch eigentlich nichts. Viele Node.js-Entwickler bevorzugen allerdings dokumentbasierte Datenbanken gegenüber relationalen Datenbanksystemen wie MySQL. Dort werden Daten nicht als Tabellen modelliert, sondern über hiarachiche Strukturen, meistens JSON- oder XML-basiert.

Wenn du die Reservierungen der Rasenflächen in Echtzeit mit den Anzeigen der Surfer synchronisieren möchtest, dann kannst du eine Websocket-Verbindung zwischen Server und Client aufbauen. Das ist wage formuliert, eine andauernde Verbindung, über die sich Server und Client gegenseitig Nachrichten schicken können. Für solche interaktiven Szenarien wärst du mit Node.js auf jeden Fall besser bedient als mit PHP.

Die Tatsache mit den parallel laufenden Anwendungen könnte ich ja umgehen wenn ich bei jeder Auswahl den Zustand Speichere und die Darstellung aktualisiere. Der Zugriff auf die Seite wird nicht so enorm sein und die Reservierung muss danach erst durch eine weitere Seite zu der man weitergeleitet wird bestätigt dort könnte man abschließend nochmal kontrollieren ob alles verfügbar ist was man angewählt hat.

Gut, du hast dir offensichtlich schon mehr Gedanken dazu gemacht, als ich es am Anfang vermutet hatte. Das ist schön zu lesen.