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 im Selbststudium. Sie haben anschließend eine Liste mit Fragen zu unklaren Anforderungen und die Bestellseite in der HTML-Rohform.

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 für die Darstellung im Browser gewünschten HTML-Code der jeweiligen Seite mit PHP zu erzeugen.
    • Alternativ können Sie auch den order.php Endpunkt index.php nennen falls sie diesen als Landingpage nutzen wollen.
  2. Lagern Sie dabei Head und Footer in separate Dateien, sogenannte Partials, aus und binden Sie diese mit require_once oder require in order.php ein.
  3. Machen Sie sich Gedanken welche Teile der Seite genau da dazu gehören.
  4. Welche weiteren Teile der Seite kann man eventuell noch auslagern?
  5. "Deployen" Sie die Seite im Projektverzeichnis Ihrer Installation 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.
  6. Testen Sie, ob der HTML-Code korrekt erzeugt wurde, indem Sie den Quellcode aus dem Browser kopieren ("Seitenquelltext anzeigen") und mittels des HTML5-Validators erneut ü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 Designskizze sollen die Fahrer- und die Bäckerseite aber bis auf Weiteres über einen Submit-Button abgeschickt werden (Später werden Sie diese Lösung mit JavaScript so anpassen, dass sie den Anforderungen entspricht).
  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 besser zwischen den Seiten hin und her navigieren zu können. Nutzen sie hierfür das <a href=""></a>-Tag.

Achtung: Designskizze - nur Funktionen, 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 bis zum Abgabetermin um.

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