Webentwicklung - Meilenstein 2

Es geht um die gruppenweise Bearbeitung eines Software-Webprojekts, welches in verschiedenen Meilensteinen im Laufe des Semesters von Ihnen erweitert werden wird.

Ihre Webanwendung dient der Verwaltung von "Dingen". Was ein "Ding" ist, können Sie selbst bestimmen und wird gruppenweise mit dem Dozenten besprochen.
Es könnte sich hierbei um Filme, Events, Sanitärartikel, Party-Locations, Fachbücher, Stundenpläne, Cocktails oder Katzenrassen etc. handeln.
Somit würden Sie eine Webanwendung für eine Videothek, einen Event-Veranstalter, eine Hochschulbuchbörse, den städtischen Kleintierzüchterverein oder eine Cocktailbar etc. entwickeln. Hierbei sind Ihnen keinerlei Grenzen gesetzt.

Aufgabe

Hierfür werden folgende vier Webseiten benötigt:

  • Startseite (landing page) mit kurzer Vorstellung des von Ihnen gewählten fiktiven Unternehmens und was Ihnen sonst noch so einfällt
  • Navigationsbereich auf der Startseite, über den alle weiteren Webseiten erreicht werden können (mittels Anker-Elementen)
  • Die Startseite soll eine Überschriftszeile (oben), einen Navigationsbereich (links), einen Hauptbereich (rechts) und einen Fußbereich (unten) besitzen
    • Für die Nerds unter Ihnen: Hierzu sollen ausschließlich HTML-Tabellen zum Einsatz kommen, aber (noch) kein CSS
  • Angebotsseite mit HTML-Tabelle aller verfügbaren "Dinge" (ca. drei Stück) mit Name, Foto und einer beliebigen zusätzlichen Eigenschaft (beispielsweise einer Beschreibung des Dings)
  • Kontaktseite, auf der Kunden ihre Fragen zu den von Ihnen angebotenen Dingen stellen können. Hierzu dient ein HTML-Kontaktformular, das folgende Elemente enthält:
    • Dropdownfeld mit der Liste aller verfügbaren "Dinge"
    • Eingabefeld für die zu stellende Frage durch den Kunden
    • Eingabefeld für die eMail-Adresse des Kunden
    • Einen Button, um diese Eingaben abzuschicken
  • Nachfolgeseite, auf der die vom Kunden zuvor im Kontaktformular eingegebenen bzw. ausgewählten Informationen aufgelistet werden
    • Das ist eine der Herausforderungen dieses Meilensteins, da wir darüber in der Vorlesung nicht gesprochen haben
    • Es lässt sich aber durch etwas Recherche im Internet und ein paar Zeilen JavaScript-Code lösen
    • Und nein, die Informationen sollen nicht mittels einer JavaScript-Dialogbox (mit der alert()-Methode) aufgelistet werden, sondern mittels DOM-Manipulation
    • Ab SoSe 2018: Die im Kontaktformular eingetragene eMail-Adresse des Kunden soll in einem Cookie abgelegt werden; auf der Kontaktseite soll sie beim nächsten Besuch des Kunden im entsprechenden Eingabefeld automatisch eingetragen sein

Abgabe

Die Abgabe besteht aus der Live-Demonstration Ihres Webprojekts auf einem Notebook während der Übungszeit, sowie einer elektronischen Abgabe des HTML-Codes mit darin enthaltenen <!-- HTML-Kommentaren -->.

Der HTML-Code wird in einem Git-Repository der Hochschule abgelegt (bitte nicht als GitHub-Projekt!). Ihr Dozent benötigt natürlich (lesenden) Zugriff auf das Projekt. Kreieren Sie zur Abgabezeit einen Git-Branch. Der Timestamp des letzten Commits in diesem Branch darf nicht nach dem vereinbarten Abgabetermin erfolgen. Anderenfalls kassieren Sie einen Notenabzug.