Zum Inhalt

Termin 1: Statische Webseiten & Partials

In dieser Einheit geht es darum, sich mit den Grundprinzipien der Seitengenerierung mittels PHP und der zugrunde liegenden technischen Infrastruktur (Webserver, PHP-Interpreter, etc.) auseinander zu setzen.

Vorbereitung

Selbststudium HTML

Erledigen Sie die komplette Aufgabe Selbststudium I vor dem ersten Termin.

Installation und Konfiguration

Installieren und konfigurieren Sie Ihre Umgebung. Die Software für EWA wird mit Docker bereitgestellt. Dabei werden ein Container für Webserver/PHP, ein Container für die Datenbank und ein Container für die grafische Datenbankoberfläche gestartet.

Stellen Sie sicher, dass Docker und Docker Compose auf Ihrem System installiert und funktionsfähig sind.

EWA-Repository

Als Praktikumsvorbereitung wurde ein GitLab-Repository für Sie angelegt. Dieses Repository gibt die Struktur vor, in der Sie Ihr EWA-Praktikum lösen sollen. Ihre Praktikumsaufgabe lösen Sie im src/Praktikum` Ordner.

Formulare und Eingabetypen

Machen Sie sich mit HTML-Formularen vertraut und sehen Sie sich an,
wie die verschiedenen Eingabetypen darin verwendet werden. Besonders wichtig sind dabei: <input type="radio"> und <select> … </select>

Aufgaben

Auslieferung der HTML-Seite mit PHP

  1. Erstellen Sie eine PHP-Seite order.php und versuchen Sie, den HTML-Code vom Selbststudium jetzt mit PHP zu erzeugen.
  2. Lagern Sie dabei Head und Footer in separate Dateien, sogenannte Partials, aus und binden Sie diese mit require in order.php ein.
  3. Machen Sie sich Gedanken welche Teile vom HTML genau da dazu gehören.
  4. Welche weiteren Teile der Seite kann man eventuell noch auslagern?
  5. Partial-Dateien können in einem /partials/-Ordner organisiert werden.
  6. "Deployen" Sie die Seite im Praktikum-Ordner und stellen Sie sicher, dass die PHP-Seite korrekt aufgerufen werden kann. Sie sollten Ihr Verzeichnis und die PHP-Datei "sehen" können mit http://127.0.0.1/Praktikum/ oder http://localhost/Praktikum/.
  7. Testen Sie, ob der HTML-Code den oder.php erzeugt immer noch valide ist, indem Sie den Quellcode aus dem Browser kopieren (Rechtsklick -> "Seitenquelltext anzeigen") und mittels des HTML5-Validators überprüfen!

Hinweis

Auch wenn die Seite im Moment noch genauso aussieht wie eine reine HTML-Datei, geschieht im Hintergrund schon etwas Entscheidendes:

Der Browser bekommt jetzt kein statisches HTML mehr, sondern dieses wird von PHP erzeugt und wir haben jetzt die Werkzeuge dort dynamische Inhalte einzufügen. Das mag aktuell unspektakulär wirken – ist aber ein wichtiger Schritt hin zu interaktiven und dynamischen Webseiten.

Entwicklung der übrigen Seiten des Pizzaservices

  1. Setzen Sie analog die übrigen Seiten Bäcker, Fahrer und Kunde um. (baker.php, customer.php und driver.php)
  2. Zuerst erstellen Sie die HTML-Rohform, prüfen die Standardkonformität und die Funktion der möglichen Formulare mittels Echo-Skript.
  3. Im Gegensatz zur Inhaltsskizze sollen die Formulare auf der Fahrer- und Bäckerseite zunächst über einen Submit-Button abgeschickt werden. Später ersetzen Sie dieses Verhalten mit JavaScript, sodass die Statusänderungen ohne zusätzlichen Button übernommen werden.
  4. Prüfen Sie den erzeugten HTML-Code erneut mit einem Validator.
  5. Für diese Seiten macht es Sinn bestehende Partials wiederzuverwenden, welche wären das?
  6. Erstellen Sie eine Navigation, um zwischen den Seiten hin und her navigieren zu können. Nutzen Sie hierfür das <nav>-Element und <a href=""></a>-Links.

Die folgende Abbildung ist kein Layout-Vorschlag

  • Die Skizze zeigt nur grob, welche Inhalte und Funktionen auf den einzelnen Seiten vorkommen sollen.
  • Sie ist keine Vorlage für das spätere Design oder Layout der Seiten.
  • Nutzen Sie keine Tabellen nur deshalb, weil die Skizze tabellarisch aussieht.
  • Es ist völlig in Ordnung, wenn die Elemente zunächst untereinander angeordnet sind.

Achtung: Nur Inhaltsskizze - kein Layout!

Meilenstein

Stand jetzt sind die Seiten des Pizzaservices als PHP-Seiten umgesetzt, validiert und über eine Navigation erreichbar. Die Inhalte sind noch statisch; im nächsten Schritt folgen MVC-Architektur, Routing und dynamische Daten.

Nachbereitung

Setzen Sie noch eventuell fehlende Teile der obigen Aufgabe innerhalb von 7 Tagen um, um Feedback via Gitlab-Issues zu Ihrem Code zu erhalten.

Ergebnisse

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

Ergebnisse

  • Lauffähige Installation und Konfiguration des Apache Webservers mit PHP
  • Auslieferung der Webseiten erfolgt über den Webserver und den PHP-Interpreter
  • 4 PHP-Seiten, die validen, standardkonformen HTML5-Code erzeugen;
  • Eine Navigation
  • Webseiten sind mit sinnvollen HTML5-Elementen strukturiert
  • Sie haben alle Seiten in sinnvolle Partials aufgeteilt
  • Formulare schicken Daten an die Echo-Seite (https://echo.hofmann-thomas.de) und zeigen die erwarteten Daten