13 Wochen Projekt – Sitzplan Maker (Woche 6)

Sitzplan Maker

Der Sitzplan Maker


In der letzten Woche des 13 Wochen Projekts hatte ich mir vorgenommen, einen auf HTML5 basierenden Sitzplan-Maker zu programmieren, der meiner Freundin helfen soll, einen Sitzplan für ihre Schulklassen zu erstellen. Welche Erfahrungen ich mit den verschiedenen HTML5 Elementen gesammelt habe, erfahrt ihr in diesem Artikel.

HTML5? Moment mal!

Vor einigen Monaten habe ich hier im Blog noch gegen HTML5 gewettert und jetzt mache ich selbst eine Anwendung mit HTML5. Wie passt das zusammen? Auch wenn sich HTML5 noch nicht flächendeckend nutzen lässt, sollte man sich als Webentwickler frühzeitig damit beschäftigen, sodass man darin fit ist, wenn es soweit ist. Nur wenn man schon mal mit den neuen Funktionen gearbeitet hat, hat man sie im Hinterkopf und kann sie einsetzen. Auch heute schon kann es sein, dass man als Entwickler auf eine unkritische Komfort-Funktion stößt, die man mit HTML5 umsetzen kann und IE-Nutzer halt darauf verzichten müssen.

Drag & Drop

Die Hauptaufgabe beim Sitzplan-Maker war es, Tische per Drag & Drop auf ihre gewünschte Position bewegen zu können. Ursprünglich hatte ich geplant, in diesen Artikel ein kleines Tutorial zu Drag & Drop mit HTML5 zu packen. Während der Umsetzung musste ich jedoch feststellen, dass das freie Verschieben eines Elements überraschend kompliziert ist. Das liegt nicht unbedingt daran, dass die Funktionalität schlecht umgesetzt ist, sondern sehr mächtig ist und das freie Verschieben offenbar nicht die Standardanwendung zu sein scheint. Daher verweise ich an dieser Stelle einfach auf das gute englische Tutorial bei HTML5 rocks, mit dem ich mir diese Sache angeeignet habe.

Tische drehen

Jeder Entwickler kennt das. Am Anfang klingt eine Aufgabe recht überschaubar und wenn man dann dem Kunden die ersten Ergebnisse präsentiert, fällt diesem ein, dass er gerne noch die ein oder andere Funktion haben möchte. Wenn der „Kunde“ die eigene Freundin ist, erst recht ;). So erfuhr ich dann, dass man die Tische auch drehen können muss. Da wollte ich schon die Hände über dem Kopf zusammenschlagen, erinnerte mich aber an einen kleinen Artikel bei staticfloat, wie man eine komplette Webseite auf den Kopf stellen kann. Dafür gibt es die CSS3-Eigenschaft transform, die z.B. so aussieht:

div.table { transform:rotate(90deg); }

transform ist sehr mächtig und kann noch viel mehr, wie man bei W3 Schools nachlesen kann. Für meinen Sitzplan reichte mir rotate und so fügte ich noch eine JavaScript-Funktion ein, mit der der Tisch bei einem Klick gedreht wird.

Status speichern

Eine spannende Sache war auch das Speichern des Sitzplans. Es mussten die Positionen, Drehung und Namen der Kinder gespeichert und bei einem erneuten Aufruf wieder geladen werden. Auch hier wollte ich auf HTML5 setzen und die neue localStorage benutzen. Anders als beim Drag & Drop war ich von der einfachen Bedienung überrascht, die wie folgt aussieht:

localStorage.setItem(key, value); //Wert speichern
localStorage.getItem(key); //Wert auslesen
localStorage.removeItem(key); //Wert löschen
localStorage.clear(); //alle Werte der Domain löschen

Das wars schon. Die Daten werden pro Domain gespeichert und der key muss natürlich eindeutig sein. Das Ganze funktioniert sogar im IE8. Ein Nachteil ist, dass nur Strings gespeichert werden können. Ergänzend dazu gibt es noch das Objekt sessionStorage, welches die gleichen Methoden hat und die mächtigeren WebDatabases, welche über SQL benutzt werden können. Dazu gibt es ebenfalls ein Tutorial bei HTML5 rocks.

Grundsätzlich sollte man als Entwickler daran denken, dass diese Werte beim User gespeichert werden und von diesem verändert werden können. Für sicherheitskritische Anwendungen sind diese daher nicht geeignet.

Fazit und Ausblick

Auch wenn diese Woche ziemlich voll war, bin ich zufrieden mit dem Ergebnis. Ich habe einige HTML5-Methoden gelernt, die ich in Zukunft bestimmt nochmal einsetzen kann und dabei noch etwas nützliches erstellt. Hier noch der Link zum Sitzplan-Maker. Das Drehen der Tische funktioniert momentan nur im Firefox, ließe sich aber auch für andere Browser nachrüsten.

In dieser Woche geht es dann um die Einarbeitung ins ZEND-Framework. Ich hoffe, dass ich mich darin soweit einarbeiten kann, dass ich dann in der nächsten Woche ein kleines Projekt damit umsetzen kann. Ich wünsche euch allen und natürlich insbesondere den anderen Teilnehmern am 13 Wochen Projekt eine schöne Woche.

2 thoughts on “13 Wochen Projekt – Sitzplan Maker (Woche 6)
  1. Der Code ist ja doch noch recht überschaubar. Da hätte ich bzgl. der Drag&Drop-API schlimmeres erwartet. 😉 Der lokale Browser-Speicher (localStorage) wird beim Löschen des Browser-Caches wohl aber mit geleert oder?

    Für diese Woche hast du dir ja echt was vorgenommen mit der Einarbeitung in ZEND. Hatte ich auch schon mal vor, aber aufgegeben und bin bei symfony hängengeblieben.

    Grüße Stephan

  2. Hallo Stephan,

    danke für deinen Kommentar. Ja, der Code ist überschaubar, aber für die scheinbar triviale Aufgabe divs frei zu verschieben, doch ziemlich umfangreich. Ich denke mal, da wird es demnächst jquery-Plugins für geben.

    Das mit dem Cache ist eine gute Frage. Ich habe es gerade mal ausprobiert und zumindest im FF wird die localStorage mit den Cookies zusammengefasst. Also bei einem Leeren des Caches bleiben die Daten erhalten, bei gelöschten oder deaktivierten Cookies nicht.

    Ja, mal gucken wie es mit ZEND läuft. Ich hatte vor einigen Jahren schon mal ein Tutorial dazu durchgearbeitet, war dann aber auch nicht dran geblieben.

    Eine schöne Woche und viele Grüße,
    Jonas

Kommentieren

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