Frontendentwicklung mit HTML, CSS und Java-Script – Übung mit Lösungsvideo
Programmierung eines einfachen Hotel- und Bettenplanungs-System – Klassenarbeit: Schulhof-Programmierung – Übung
Einfaches Hotel- Jugendherberge – Bettenplanungs-System programmieren – nur wie eigentlich?
Bettenbelegungs-Plan – Einfache Code-Entwicklung und Übung
Übung- Programmierung – Frontend-Entwicklung
Screenshot – Berechnungs-Terminal mit visueller Darstellung von Preis, Zimmer, Belegungsgrad und vollautomatisierter Gesamtberechnung, wieviele Betten noch in dem Zimmer frei sind.
Programmierung eines einfachen Bettenbelegungsplans.
Übung – Klassenarbeit – Was war die Aufgabe?
Frontend-Entwicklung – Übung – Klassenarbeit
Programmiere ein kleines Programm von einem Jugendhostel, wo du ca. 30 Betten und 5 Zimmer einplanen kannst. Die Zimmer sollen visuell dargestellt werden können. Wie würdest du das ganze angehen? Es soll auch automatisch abgespeichert werden. ( ohne Login und Backend) – Nur Frontend.
Video – Lösung ( 38 min)
Bitte beachten:
Bitte beachte, dass es viele Möglichkeiten gibt, ein solches System aufzubauen und zu entwickeln. Die Video-Ansätze sind also nur als einfache Beispiele zu werten, auch wäre es zeitlich auch zu aufwendig, das ganze vollständig zu erklären. Die Videos sollen helfen, ggf. Hintergründe, oder Techniken kennenzulernen und es selbst zu versuchen, eigene kleine Projekte zu entwickeln, um so einen hohen Lerneffekt zu haben.
Hier noch einmal alle Probleme und Funktionen, die in das System eingebaut worden sind
Frontend-Entwicklung
Punkt 1 – Hotel- Jugend-Herberge- Bettenplanung
Entwicklung eines Grundgerüstes – Grafische Darstellung der einzelnen Zimmer, mit verschiedener Hotel- oder Jugendherberge-Betten-Anzahl. Rein technisch gesehen wurde darauf geachtet, dass die Bilder natürlich zoombar sind, das heißt, der User klickt auf die Bilder und hat dann eine schöne Vergrößerung. Die Zoomfähigkeit der Bilder wurde in unserem Falle mit Java-Script realisiert. Der User kann alle Bilder bequem oben gleich auf der Seite anklicken.
Punkt 2 Hotel- Jugend-Herberge- Bettenplanung
Die Berechnungs-Terminals – Vollautomatisierte Berechnung mit visueller Darstellung der Hotelbetten – Belegt oder Frei ?
Die Sache mit den Betten und den Funktionen
Smileys & Betten-Berechnung- Vollautomatisiert
1 Zimmer = 1 „Terminal“ Berechnung und Visuelle Darstellung und Preis-Eintragung möglich
In den einzelnen grafischen Berechnungs-Terminals mit den Smileys, die die Zimmer darstellen, wurde eine farbliche Gestaltung gewählt. Programmiertechnisch sollte hier der Ansatz gewählt werden, dass wenn ein Gast kommt und ein Zimmer wird vergeben, man nur noch auf den Smiley klicken muss und schon werden 2 Funktionen vollautomatisiert angezeigt. Die erste Funktion, durch anklicken des grünen Smileys, wird der Smiley sofort rot, das heißt, das Zimmer ist vergeben. Zeitgleich und exakt in diesem Moment wird unter dem Smiley eine vollautomatisierte Berechnung geschaltet, die das Bett von der Gesamtanzahl abzieht. Beispiel. Das Jugendherberg- Zimmer hat 7 Betten. Ein Gast kommt, der User klickt auf den Smiley, der Smiley wird rot eingefärbt, das Bett wird abgezogen und in der Berechnung in Sekundenschnelle angezeigt. Die Gesamtanzahl der Betten wird angezeigt und wieviel Betten in dem Raum noch zur Verfügung stehen.
Die Sache mit den Smileys ( Betten) – Technischer Ansatz
Rein technisch gesehen, sind die Smileys keine Bilder also kein jpg, oder png sondern im Prinzip, reiner CSS-Code. Dies wurde natürlich gezielt so gewählt, da man ein Bild zwar vergrößern kann, verkleinern kann, aber es sich nicht in Sekundenschnelle in andere Farben verändern lässt. Das heißt, wie im Video gezeigt, durch die Wahl dass die Smileys reiner Code sind, haben Sie natürlich die Möglichkeit in wenigen Sekunden das komplette System, z. B. die Smileys mit einer einzigen Farbänderung alle Smileys von gelb zu rot zu verändern, wie es auch im Video gezeigt wird. Theoretisch wäre es natürlich auch möglich im Frontend ein zusätzliches Terminal einzubauen, wo der User auch ohne in den Code gehen zu müssen, über ein „Steuerungs-Terminal“ die Farbgestaltung oder andere Funktionen direkt auf der Oberfläche zu tätigen.
Weitere Herausforderungen und Status-Anzeigen
Im obigen Beispiel sehen Sie, die farbliche Veränderung. Hier wurde im Code die Farbe umgestellt, so dass die freien Betten jetzt gelb sind und die roten belegt. Das ganze völlig unabhängig von der automatisierten Bettenberechnung darunter.
Was bedeutet die lila 1 in der Grafik von Zimmer 3?
Hier wurde zusätzlicher Programmieraufwand betrieben und eine weitere Funktion eingebaut in dem Code, so dass der User in dem Moment, wo er das letzte Bett vergibt vollautomatisiert zusätzlich ein kleiner Text eingeblendet wird, „Komplett ausgebucht“.
Was bedeutet die Eintragung 2 schwarz in der Grafik?
Was ist ein Ursprungsstatus:
Ein Ursprungsstatus kann hier durch anklicken des „x“ eingestellt werden, wenn Sie in Sekundenschnelle alle Betten wieder freischalten möchten. Ein mühsames, mehrmaliges deaktivieren in die Farbe gelb wird hier vermieden. Mit einem Klick, sind bei diesem Zimmer alle Betten wieder farblich freigeschaltet.
In das System ließen sich noch genügend weitere einbauen und es macht natürlich Spaß so etwas zu entwickeln. Der hohe Zeitaufwand ist allerdings nicht zu unterschätzen… -.)
Viel Spaß weiterhin mit Schulhof-Programmierung !
zurück zur Übersicht