Zum Inhalt

Selbststudium I: Anforderungsanalyse & HTML

Wichtig

Es wird erwartet, dass jede(r) Studierende diese Aufgaben selbständig und vollständig vor dem ersten Praktikumstermin erledigt!

Aufgaben

Einarbeitung

  1. Lesen Sie die komplette Praktikumsaufgabe, um einen Eindruck davon zu bekommen, was Sie im Laufe des Semesters erwartet.
  2. Vergewissern Sie sich, dass Sie alle im Kapitel Vorbemerkungen genannten Informationen verstanden haben
  3. Es wird erwartet, dass Sie auch ohne nennenswertes Vorwissen HTML-Code schreiben können.
  4. Installieren Sie eine IDE Ihrer Wahl. Verwenden Sie ein Tool mit Syntax-Hervorhebung für HTML, CSS, JavaScript und PHP (z.B. Notepad++, Visual Studio Code, PhpStorm), in dem Sie den Code / die HTML-Tags etc. selbst erstellen können.

Anforderungsanalyse

  1. Stellen Sie sicher, dass Sie die Anforderungen der Aufgabe "Pizzaservice" (sowohl vom Auftraggeber als auch sonstige Vorgaben) genau verstanden haben.
  2. Dokumentieren Sie offene Punkte zur Klärung.
  3. Überlegen Sie sich, ob Sie lieber den Standard-Pizzaservice oder ein alternatives Shopsystem implementieren wollen

Rohform der Bestellseite mit statischem HTML

  1. Realisieren Sie die Bestellseite mit HTML5 (Die übrigen Seiten müssen Sie noch nicht implementieren). Die Seite ist statisch und zeigt lediglich die verschiedenen HTML-Elemente an. Funktionen wie die Pizza anzuklicken, Preise berechnen, Datenbankanbindung o.ä. werden erst in späteren Praktikumsterminen ergänzt. Da Sie noch kein CSS verwenden (sollen), sollte die Seite ungefähr so aussehen wie in der Beispielausgabe

  2. Berücksichtigen Sie bei der Umsetzung die nachstehenden Hinweise:

    • Verwenden Sie das folgende (standardkonforme) Grundgerüst für Ihre HTML-Dateien:

      <!DOCTYPE html>
<html lang="de">  
<head>
    <meta charset="UTF-8" />
    <!-- für später: CSS include -->
    <!-- <link rel="stylesheet" href="XXX.css"/> -->
    <!-- für später: JavaScript include -->
    <!-- <script src="XXX.js" defer></script> -->
    <title>Text des Titels</title>
</head>
<body>
    <p>Eigentlicher Inhalt</p>
</body>
</html>

    • Erstellen Sie nur die "HTML-Rohform", d.h., keine Formatierung in HTML, kein CSS, kein JavaScript etc.

    • Verwenden Sie semantisches HTML.
    • Verwenden Sie HTML-Tabellen nur um tabellarische Daten auszugeben (und keinesfalls als Layouttool zur Anordnung von Elementen)!
    • Für den Warenkorb nutzen Sie bitte ein select-tag mit dem multiple Attribute https://www.w3schools.com/tags/tag_select.asp
    • Der Inhalt vom Warenkorb samt Adresse soll mit einem Formular abgeschickt werden können.
    • Das Formular darf nur abgeschickt werden wenn eine Adresse vorhanden ist.

  3. Realisieren Sie zunächst auch diejenigen Inhalte statisch, die später dynamisch aus der Datenbank generiert werden sollen.

Beispielausgabe


Ohne Styling und mit statischen Daten

Überprüfung der Ergebnisse

  1. Testen Sie Ihre Seite mit unterschiedlichen Browsern und validieren Sie die Standardkonformität mittels eines "HTML5 Validators". Besonders bei unerwartetem Verhalten des Browsers gibt ein Validator wertvolle Hinweise auf die mögliche Ursache der Probleme. Nutzen Sie https://validator.w3.org/#validate_by_input und korrigieren Sie etwaige Fehler und Warnungen.

  2. Selektieren Sie mehrere Elemente im Warenkorb und schicken Sie das Formular ab an das Echo-Skript https://echo.hofmann-thomas.de

  3. Analysieren Sie die übertragenen Daten hinsichtlich Korrektheit und Vollständigkeit.
  4. Stellen Sie sicher, dass das Formular nur ausgelöst wird wenn alle benötigten Eingabefelder ausgefüllt sind.

Hinweise zum Umgang mit Formularen

  • Bedenken Sie bitte, dass ein Formular nur Daten für Formularelemente überträgt, die ein name und value-Attribut haben!
  • Außerdem brauchen Sie üblicherweise ein <form>, das die Formularelemente umschließt!
  • Werden mehrere Optionen in einem Selectfeld ausgewählt muss der name eine eckige Klammer bekommen warenkorb[].
  • Sie können in einem Selectfeld mehrere Elemente markieren, indem Sie diese mit gedrückter Umschalttaste (Shift) anklicken.

Ergebnisse

Die folgenden Ergebnisse müssen für eine erfolgreiche Durchführung vorliegen:

Ergebnisse

  • Statische, validierte HTML-Seite für die Bestellung mit funktionierendem Formular.
  • Echo-Skript zeigt die erwarteten Daten an.