Willkommen auf den EWA-Praktikumsseiten

Die Seite wird erstellt Kjell Schenk

Kunst und Unterhaltung

Deutsch

Like
Teilen
Einbetten
Vollbild
Folien
HTML Herunterladen
PDF Herunterladen
Missbrauch

←

WEITER LESEN

→

Transkription von Seiteninhalten

Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten

Willkommen auf den EWA-Praktikumsseiten

                    Willkommen auf den EWA-Praktikumsseiten
Auf den folgenden Seiten finden Sie die Aufgaben der jeweiligen Praktikumseinheiten sowie allgemeine Informationen
zu Inhalt und Ablauf des Praktikums.

Allgemeine Informationen
  • Vorbemerkung zum Praktikum
  • Anforderungen an die zu entwickelnde Webanwendung
  • Technische Hinweise

Praktikumstermine
  • Selbststudium I: Anforderungsanalyse und Selbststudium von HTML (→ zu Hause)
  • Termin 1: PHP - Webserver Setup und Erzeugung von Webseiten mit PHP
  • Termin 2: PHP - Objektorientierte Seitenklassen und Datenbankzugriffe
  • Termin 3: Sessionmanagement, Sicherheit und AJAX-Vorbereitung
  • Termin 4: Client-seitige Interaktion mit JavaScript, AJAX und JSON
  • Selbststudium II: Responsives Design
  • Termin 5: Abnahme
Diese Unterlagen wurden mit MkDocs, Markdown und Visual Studio Code erstellt und mit dem individuell angepassten
Material Theme for MkDocs gerendert.

                     © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                Seite 1

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Semesterthema webbasierter Pizzaservice bzw. Onlineshop
GitLab
Wir erstellen für Sie GitLab-Repositories -- in der Regel für Zweier-Teams. Diese Repos müssen Sie verwenden.
Veröffentlichen Sie darin zu jedem Praktikum unter Ihrem Namen Ihren Beitrag zum Praktikum. Jede und jeder muss
in gitlab nachweislich die Praktikumsaufgaben bearbeitet haben.
 Warnung
Die GitLab-Repositories werden ohne Vorwarnung nach ca. 6 Monaten (zu Beginn des nächsten Semesters) gelöscht. Wenn Sie Ihr
Prakikumsergebnis dauerhaft aufbewahren möchten, müssen Sie sich selbst darum kümmern!

Die Aufgabe
Im Lauf des Semesters soll eine integrierte webbasierte Anwendung in Form eines Pizzaservice (das ist die Standard-
Applikation) oder eines Webshops nach eigener Wahl entwickelt werden.
Der Pizzaservice bzw. Webshop soll die folgenden technischen Eigenschaften aufweisen:
Clientseitig:
• Responsive Webseiten mit HTML und CSS
• Nutzereingaben mittels Formularen
• Client-seitige Interaktion mit JavaScript
• Aktualisierung von Statusinformationen mittels AJAX und JSON
Serverseitig:
• Apache Webserver
• Dynamische Seitengenerierung mit PHP
• Anbindung einer MariaDB-Datenbank
• Nutzung der Seitenklassenarchitektur
• Generierung von JSON-Daten
Der Schwerpunkt liegt vor allem auf einer Software-technisch sauberen Umsetzung.
Wichtig hierbei ist Standardkonformität, Barrierefreiheit, Responsivität, Trennung der Verantwortlichkeiten (engl.
"Separation of Concerns") und die Einhaltung der bewährten Regeln guter Softwaretechnik.
Es geht in EWA nicht um Homepage-Bastelei oder die Verwendung von "Fertigteilen"!
 Warnung
• Nicht die Funktionalität steht im Vordergrund, sondern die Integration der verschiedenen Techniken und die Vorgehensweise.
• Die reine Umsetzung der Funktionalität des Shopsystems reicht nicht für die Abnahme! Die objektorientierte Umsetzung mit
Seitenklassen ist ein Pflichtbestandteil!
• Die Aufgabe muss mit den in der Veranstaltung behandelten (grundlegenden) Techniken gelöst werden! Der Einsatz von Frameworks wie
bspw. jQuery ist nicht gestattet!

Organisatorisches
 Warnung
Die Praktikumsaufgabe beinhaltet zwei größere Blöcke, die Sie im Selbststudium erarbeiten sollen: Selbststudium I: Anforderungen und HTML
und Selbststudium II: Responsives Design. Den HTML-Teil müssen Sie vor dem ersten Praktikumstermin bearbeiten. Den CSS-Teil
spätestens bis zum letzten Praktikumstermin.

Lösungsbeispiele
Pizzaservice
Eine Studierendenlösung aus dem Sommersemester 2018

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Übersichtsseite

Bestellseite

                  © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 3

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Übersichtsseite beim Kunden

Bäckerseite

                    © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 4

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Fahrerseite
Servershop
Ein Studierendenprojekt aus dem Semester 2018/2019

Startseite mit Login

                       © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 5

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Katalogansicht

                 © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 6

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Einkaufswagen

Warenkorbansicht

                   © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 7

Semesterthema webbasierter Pizzaservice bzw. Onlineshop

Statusanzeige beim Kunden

Statusanzeige Shop

                     © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da   Seite 8

Anforderungen an die Webanwendung

Anforderungen an die Webanwendung
 Hinweis
Die Anforderungen sind aus Sicht des Pizzaservice beschrieben. Wenn Sie einen eigenen Webshop entwickeln, dann müssen Sie die
Anforderungen entsprechend übertragen (bspw. kann anstelle der Bäckerseite eine Versandabteilungs- oder Kommissionierungsseite etc.
erstellt werden). Die Anforderungen hinsichtlich Aufbau und Funktionsweise gelten dann analog für die Seiten des eigenen Webshops.

Aufbau der Webanwendung
Der Pizzaservice bzw. Onlineshop soll folgende vier Webseiten enthalten (gilt entsprechend auch für einen
alternativen Webshop):
• Bestellung
• Kunde (die Aktualisierunglogik wird in Termin 4 implementiert)
• Pizzabäcker
• Fahrer
Der Pizzaservice soll mit standardkonformem HTML5 und CSS Level 3 dargestellt werden.
Als Webserver wird Apache 2 verwendet und als Datenbank MariaDB.
Die Abnahme erfolgt auf Ihren Laptops oder den Laborrechnern mit mindestens zwei gängigen Browsern.
Für die PHP-Entwicklung müssen Seiten-Templates (siehe Termin 2: PHP – Objektorientierte Seitenklassen und
Datenbankzugriffe) verwendet werden, die vorgegeben sind.

Funktion der einzelnen Seiten
Die folgende Designskizze zeigt grob den erwarteten Inhalt und die Bedienelemente der zu entwickelnden Webseiten.
Es sollen 4 getrennte Seiten entwickelt werden: Bestellung, Pizzabäcker, Kunde und Fahrer.

Designskizze - nur Funktionen, kein Layout

Anforderungen an die Webanwendung

• Pizzabestellung
Hier kann der Kunde gewünschte Pizzen aus der Speisekarte auswählen und in einen Warenkorb übernehmen.
Es wird der Preis der Bestellung angezeigt und es kann eine Lieferadresse angegeben werden.
• Kunde
Hier kann ein Kunde sehen, in welchem Zustand seine Pizzen sind ( bestellt, im Ofen, fertig, unterwegs).
Er sieht nur seine Bestellung – und keine Aufträge von anderen Kunden.
• Pizzabäcker
Hier werden die bestellten Pizzen angezeigt. Der Pizzabäcker kann den Status für jede Pizza von " bestellt" auf
" im Ofen" bzw. " fertig" setzen.
übernimmt der Fahrer eine Pizza, so verschwindet sie aus der Liste des Bäckers.
• Fahrer
Hier werden Bestellungen mit den einzelnen Pizzen, Preis und Lieferadresse angezeigt. Der Fahrer kann den
Status der Lieferungen verändern. Eine Lieferung ist entweder " fertig", " unterwegs" oder " geliefert".
Bestellungen tauchen erst beim Fahrer auf, wenn alle zugehörigen Pizzen fertig sind.
Ausgelieferte Bestellungen verschwinden aus der Liste.

Sonstige Anforderungen
• Es werden nur Bestellungen akzeptiert, die mindestens einen Artikel enthalten und bei denen die Lieferadresse
nicht leer ist.
• Das Einfügen einer Pizza in den Warenkorb soll über einen Klick auf das Pizzasymbol in der Speisekarte erfolgen
• Im Warenkorb können mehrere Pizzen ausgewählt und gelöscht werden, oder auch alle Pizzen auf einmal.
• Die Seiten Pizzabäcker, Kunde und Fahrer sollen sich automatisch aktualisieren.
• Wenn eine neue Pizza in die Datenbank mit den angebotenen Pizzen eingetragen wird, so wird diese nach dem
Neuladen der Bestellseite angezeigt und die Preisberechnung des Warenkorbs funktioniert ohne Änderungen am
Code.
• Die Bestellseite verwendet ein responsives Layout und passt ihre Darstellung für schmale Handybildschirme an.
Versuchen Sie das Layout so umzusetzen, wie es in der Designskizze dargestellt ist.
• Es gibt zu Testzwecken eine weitere Webseite Übersicht, welche (für einfache Tests) Links zu den 4 Webseiten
beinhaltet. Diese Seite existiert nur zu Testzwecken und darf deshalb mit statischem HTML erstellt werden.
 Hinweis
Alternativ können Sie auch eine Navigationsleiste bzw. ein Navigationsmenu in die Web-Applikation integrieren, dann müssen Sie keine
separate Übersichtsseite implementieren. Achten Sie aber bitte darauf, dass man diese Leiste bequem entfernen kann - sie soll nämlich
nicht ausgeliefert werden.

Selbststudium I: Anforderungsanalyse und Selbststudium von HTML (→ zu Hause)

Selbststudium I: Anforderungsanalyse und Selbststudium von
HTML (→ zu Hause)
 Hinweis
Lernziele
 Sie verstehen sämtliche Anforderungen an das Shopsystem (Pizzaservice o.ä.) bzw. haben Ungereimtheiten und Inkonsistenzen zur
Klärung mit dem/der Dozenten/in dokumentiert
 Sie können statische HTML Seiten erstellen
 Sie verstehen die Grundstruktur einer HTML Seite
 Sie kennen die wichtigsten Elemente und die Funktionsweise von Formularen
 Warnung
Selbständige Vorbereitung:
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. Verwenden Sie
z.B. die folgende Kurzreferenz für einen schnellen Überblick über die Anweisungen.
4. Installieren Sie einen HTML-Editor (IDE) Ihrer Wahl. Verwenden Sie einen Editor mit Syntax-Hervorhebung für
HTML, CSS und PHP (z.B. Notepad++), indem Sie den Code / die HTML-Tags etc. selbst erstellen können.
Verwenden Sie bitte keine "Luxuseditoren", die HTML & Co. verbergen.
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

Selbststudium I: Anforderungsanalyse und Selbststudium von HTML (→ zu Hause)

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 folgenden Grafik:

                   © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                  Seite 12

Selbststudium I: Anforderungsanalyse und Selbststudium von HTML (→ zu Hause)

 1. Berücksichtigen Sie bei der Umsetzung die nachstehenden Hinweise:
       • Verwenden Sie das folgende (standardkonforme) Grundgerüst für Ihre HTML-Dateien:
          
              Text des Titels
          
              Eigentlicher Inhalt
          
       • Verwenden Sie als Codierung UTF-8 und speichern Sie alle Dateien im Dateiformat UTF-8 (ohne BOM)
       • Erstellen Sie nur die "HTML-Rohform", d.h., keine Formatierung in HTML, kein CSS, kein JavaScript etc.
       • Verwenden Sie strukturierende Tags wie  statt  für die Seitenstruktur
       • Schreiben Sie Umlaute und das €-Zeichen direkt in Ihre Dateien (verwenden Sie also z.B. das "ä" und nicht das
        benannte Zeichen ä)
       • Achten Sie auf ordentliche Formatierung des HTML-Quelltextes!
       • Verwenden Sie HTML-Tabellen nur um tabellarische Daten auszugeben (und keinesfalls als Layouttool zur
        Anordnung von Elementen)!
 2. Realisieren Sie zunächst auch diejenigen Inhalte statisch, die später dynamisch aus der Datenbank generiert
    werden sollen
       • Tragen Sie Beispieldaten ein – so dass klar ist, was später generiert werden muss
       • Trennen Sie im Code statische Inhalte von Inhalten, die später aus Inhalten der der Datenbank erzeugt werden
Ü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 oder https://
    html5.validator.nu/ und korrigieren Sie etwaige Fehler und Warnungen.
 2. Selektieren Sie eines der Elemente im Warenkorb und schicken Sie das Formular ab an das Echo-Skript https://
    echo.fbi.h-da.de/ oder nutzen Sie einen HTTP-Traffic–Analyzer-Dienst wie https://pipedream.com/.
    Analysieren Sie die übertragenen Daten hinsichtlich Korrektheit und Vollständigkeit.
          Hinweis
      Bedenken Sie, dass ein Formular nur Daten für Formularelemente überträgt, die ein name-Attribut haben und die selektiert sind!
      Außerdem brauchen Sie üblicherweise ein , das die Formularelemente umschließt!

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

                        © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                                       Seite 13

Termin 1: PHP: Webserver Setup und Erzeugung von Webseiten mit PHP

Termin 1: PHP: Webserver Setup und Erzeugung von Webseiten mit
PHP
 Lernziele
 Sie können einen Webserver installieren und so konfigurieren, dass er Ihre Shopseiten ausliefert
 Sie können HTML-Code mittels PHP erzeugen
 Sie verstehen die grundlegende Funktionsweise der dynamischen Generierung von Webseiten
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 - Erledigen Sie diese Aufgaben VOR dem Übungstermin
 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. Es gibt zwei Möglichkeiten wie Sie die Software für EWA installieren können: Entweder als
lokale Installation oder als Docker-Container. Details finden Sie unter Technische Hinweise.
EWA-Projekt
Als Praktikumsvorbereitung wurde ein GitLab-Projekt für Sie angelegt. Dieses Projekt gibt die Struktur vor, in der Sie Ihr EWA-Praktikum lösen
sollen. Ihre Praktikumsaufgabe lösen Sie - je nach Praktikumstermin - im vorbereiteten Verzeichnis unterhalb des Ordners src/Praktikum. Ihre
HTML-Datei verschieben Sie also in das Verzeichnis src/Praktikum/Prak1. Bitte halten Sie sich unbedingt an diese Struktur, sonst findet Ihr
Betreuer Ihre Lösung nicht. Das Projekt enthält auch ein Setup für Docker, das sowohl Sie als auch Ihre Betreuer nutzen können.

 Warnung
Sorgen Sie dafür, dass Sie die Vorbereitung zu Beginn der Übung zeigen können!

Aufgaben (im Praktikumstermin)
Genaue Prüfung der HTML-Seite
1. Wenn Ihre Webseite die Prüfung mit dem HTML-Validator
https://validator.w3.org/#validate_by_input oder https://html5.validator.nu/
fehlerfrei besteht (vgl. Vorbereitung), dann laden Sie den HTML-Code Ihrer Bestellseite hoch zu HTML-Lint
http://www.htmllint.net/en/html-lint/htmllint.html. Analysieren Sie die Meldungen und korrigieren Sie den HTML-
Code entsprechend. Versuchen Sie, alle Meldungen zu beseitigen.
2. Schicken Sie das Formular auf Ihrer Bestellseite ab an das Echo-Skript https://echo.fbi.h-da.de/. Zeigen Sie
das Ergebnis Ihrem Betreuer.
Wenn Sie ein Formularelement verwenden, das mehrere Einträge übertragen kann (wie z.B. ), dann
hängen Sie an das name-Attribut dieses Elements zwei Arrayklammern ( []) an, damit auch mehrere Werte
übertragen werden.
Auslieferung der HTML-Seite mit PHP
1. Erstellen Sie eine PHP-Seite bestellung.php und versuchen Sie, den für die Darstellung im Browser
gewünschten HTML-Code der jeweiligen Seite mit PHP zu erzeugen. (Tipp: Verwenden Sie die Heredoc-Notation .
Beachten Sie unbedingt die Warnung zur strengen Syntax der Heredoc-Notation).
2. "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/Prak1/.
3. Testen Sie, ob der HTML-Code korrekt erzeugt wurde, indem Sie den Quellcode aus dem Browser kopieren und
mittels des HTML5-Validators erneut überprüfen!
Entwicklung der übrigen Seiten des Pizzaservices

Termin 1: PHP: Webserver Setup und Erzeugung von Webseiten mit PHP

 1. Setzen Sie analog die übrigen Seiten Bäcker, Fahrer und Kunde um. Zuerst erstellen Sie die HTML-Rohform,
    prüfen die Standardkonformität und die Funktion der Formulare wie oben beschrieben. 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).
 2. Passen Sie die Seiten so an, dass sie über den PHP-Interpreter und den Webserver ausgeliefert werden. Prüfen Sie
    den erzeugten HTML-Code erneut mit einem Validator.
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
   Generierung von 4 validen und standardkonformen HTML5-Seiten mit PHP
   Auslieferung von Webseiten über den Webserver und den PHP-Interpreter

                        © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                              Seite 15

Termin 2: PHP: Objektorientierte Seitenklassen und Datenbankzugriffe

Termin 2: PHP: Objektorientierte Seitenklassen und
Datenbankzugriffe
 Lernziele
 Sie können die objektorientierte Programmierung mit PHP umsetzen
 Sie verstehen die grundlegende Funktionsweise der Seiten- und Blockklassenarchitektur
 Sie können mit PHP und MySQLi Datenbankzugriffe realisieren und Webseiten mit Inhalten aus der Datenbank erzeugen (lesend und
schreibend).

Ziel dieser Einheit ist die Entwicklung von sauberem, d.h., gut wartbarem, strukturiertem und objektorientiertem PHP-
Code. Hierzu setzen wir vordefinierte Seiten- und Blockklassen ein. Ferner stellen wir in dieser Einheit die
Datenbankanbindung zur Web-Applikation her um Daten zu lesen und zu schreiben.

Vorbereitung
 Vorbereitung
Erledigen Sie diese Aufgaben VOR dem Übungstermin
Voraussetzung: Die vier in Termin 1 erstellten PHP-Seiten werden ordnungsgemäß vom Webserver ausgeliefert und erzeugen
standardkonformen HTML-Code.
1. Laden Sie die Zulieferung für das Praktikum von der EWA-Moodleseite herunter und machen Sie sich mit dem Inhalt vertraut:
• PageTemplate.php dient als Vorlage für die Seiten Bestellung.php, Kunde.php, Baecker.php und Fahrer.php
• Page.php ist die gemeinsame Basisklasse dieser 4 Seiten-Klassen und soll die Datenbank öffnen und schließen und den HTML-
Rahmen erzeugen
• EWA_PageTemplates.pdf enthält eine Dokumentation von Page.php und von PageTemplate.php.
2. Versuchen Sie mit der Dokumentation und dem Quellcode das Zusammenspiel der verschiedenen Klassen zu verstehen. Klären Sie
folgende Fragen:
• Wo erfolgt der eigentliche Aufruf zur Erstellung einer HTML-Seite?
• Was tun die Methoden getViewData(), generateView() und processReceivedData()? In welcher Reihenfolge werden sie
aufgerufen?
• Wo wird der HTML-Rahmen mit und erzeugt? Wo wird er ausgegeben?
3. • Wenn Sie die Dockerlösung verwenden, wurde die zugelieferte Datei automatisch importiert und die Datenbank "pizzaservice" ist
bereits angelegt. Wenn Sie ohne Docker arbeiten, müssen Sie aus dem Ordner mariadb.setup die Dateien 01-
Pizzaservice_Database.sql, 02-Pizzaservice_Database_Entries.sql und 99-Permissions.sql in dieser Reihenfolge mit
phpMyAdmin importieren, um die Datenbank zu erstellen und zu füllen.
• Wenn der Webserver und der Datenbankserver (MariaDB) laufen, rufen Sie phpMyAdmin auf durch http://127.0.0.1/phpmyadmin.
• Analysieren Sie die Tabellenelemente mit Primär und Fremdschlüsseln. Beachten Sie auch die Einträge, die bereits in den Tabellen
enthalten sind. Falls Einträge automatisch erzeugt werden, so ist dies in Klammern hinter dem Attribut angegeben (z.B.
auto_increment).
article: article_id (auto_increment), name, picture, price
ordered_article: ordered_article_id (auto_increment), ordering_id, article_id, status
ordering: ordering_id (auto_increment), address, ordering_time (current_timestamp)
Tipp: Mit dem "Designer" in phpMyAdmin (im Menü unter "mehr") können Sie die Beziehungen grafisch darstellen lassen

Datenbanktabellen im Designer
Analysieren Sie das zugelieferte Datenmodell für den Pizzaservice mit phpMyAdmin
• Sie dürfen das Datenbankschema nicht verändern, sondern müssen es so verwenden wie es zugeliefert wird!
• Falls Sie zusätzliche Einträge in der Datenbank anlegen wollen (z.B. neue Einträge für die Speisekarte), so tun Sie das bitte in der Datei
02-Pizzaservice_Database_Entries.sql im Verzeichnis mariadb.setup. Nur dann sieht auch Ihr Betreuer/Ihre Betreuerin diese
Einträge in der Docker-Umgebung. Die vorhandenen Einträge lassen Sie bitte unverändert. Achten Sie genau auf die korrekte Syntax
der Einträge, ansonsten startet Ihr Datenbank-Server nicht mehr.
4. Versuchen Sie, Ihre Bäckerseite so umzubauen, dass sie die Seitenklassen sinnvoll verwendet und weiterhin ordentlichen HTML-Code
erzeugt. Beachten Sie dabei die Hinweise in der eigentlichen Aufgabe weiter unten. Falls Sie auf Probleme stoßen, die Sie nicht selbst
beheben können, klären wir das in der Übung. Es sollte aber erkennbar sein, dass Sie es ernsthaft versucht haben.

Termin 2: PHP: Objektorientierte Seitenklassen und Datenbankzugriffe

 Warnung
Hinweis:Sorgen Sie dafür, dass Sie diese Vorbereitung zu Beginn der Übung zeigen können!

Aufgaben
Am besten führen Sie die folgenden Aufgaben zuerst vollständig für eine der Seiten (z.B. die Bäckerseite) durch. So
stellen Sie sicher, dass Sie alle Themen verstanden haben und korrekt umsetzen können bevor Sie die übrigen Seiten
angehen.
Dynamische Seitengenerierung mittels Seitenklassen
1. Legen Sie eine Kopie der Klasse PageTemplate.php für jede Seite an, die Sie erstellen wollen und benennen Sie
die Dateien entsprechend (also insgesamt Bestellung.php, Kunde.php, Baecker.php und Fahrer.php). Ändern
Sie auch die Klassennamen und Verweise auf die Klasse innerhalb der Dateien.
2. Verteilen Sie Ihren HTML-Code aus der vorherigen Übung in die zuständigen Methoden der neuen Klasse und die
generischen Teile in die Klasse Page.php. Die Kommentare in den Dateien helfen dabei. Rufen Sie die Seite über
den Webserver ab und korrigieren Sie die Fehler.
 Hinweise
• Beim Testen und Debuggen hilft eine Fehlerausgabe. Verwenden Sie den PHP-Befehl error_reporting(E_ALL).
• HTML-Ausgaben erfolgen ausschließlich in der Methode generateView() der Seitenklassen!
• Funktionalität, die von allen Klassen benötigt wird, wird in der Basisklasse Page umgesetzt (z.B. die Anbindung an die Datenbank).
• Die Ausgabe größerer HTML-Abschnitte ist mit der Heredoc-Notation besonders einfach. Achten Sie darauf, dass die Endmarke in
der ersten Spalte beginnen muss und dahinter höchstens noch ein ; folgen darf.
• Die Kundenseite setzen Sie vorerst so um, dass alle bestellten Pizzen angezeigt werden. Die Einschränkung auf die Pizzen des
jeweiligen Kunden erfolgt erst in der nächsten Übung durch Sessionmanagement.

3. Schreiben Sie Hilfs-Methoden oder zusätzliche Klassen nach Bedarf. Auch die Methoden der gegebenen Klassen
dürfen zusätzliche Parameter bekommen. Vermeiden Sie aber unbedingt Änderungen an der Signatur von
Methoden der Klasse Page.
4. Prüfen Sie, ob die neuen PHP-Seiten als Ausgabe die ursprünglichen statischen HTML-Seiten erzeugen und ob
dieser Code immer noch standardkonform ist.
Datenbankzugriff mittels MySQLi
1. Analysieren Sie den Konstruktor der Klasse Page.php. Der Konstruktor baut die Datenbankverbindung auf,
verwendet dabei den vordefinierten User public und setzt das korrekte Encoding.
2. Implementieren Sie die Datenbankzugriffe (SELECT, INSERT INTO, UPDATE) in den zuständigen Methoden der
Klassen und ersetzen Sie die statischen Codeteile durch Daten, die Sie von der Datenbank abfragen.
• Der Zugriff auf die Datenbank erfolgt objektorientiert über die Klasse MySQLi.
• Zugriff auf die Datenbank erfolgt nur in getViewData() und processReceivedData().
3. Testen und validieren Sie die generierten Seiten.
 Tipps zur Umsetzung
• Nutzen Sie den Debugger oder var_dump($variable) für die schnelle Testausgabe zwischendurch
• number_format($zahl, $nachkommastellen) formatiert $zahl
• $mysqli->insert_id liefert die Autoincrement-ID nach INSERT INTO
• Tabellen- und Feldnamen in SQL-Statements klammert man am besten in Hochkommata ein: ` (Gravis / accent grave)
• Passen Sie die Formulare so an, dass sie ihre Daten nicht mehr an das Echo-Skript schicken, sondern an die tatsächliche Zielseite.
Prüfen Sie mit phpMyAdmin ob die Datenbankeinträge korrekt erstellt werden.
• Eine geschickte Datenbankabfrage (z.B. mit einem JOIN oder ORDER BY) kann Ihnen viel Implementierungsaufwand ersparen.

Auflösung von Blockierungen bei Aktualisierungen

Termin 2: PHP: Objektorientierte Seitenklassen und Datenbankzugriffe

Wenn eine Webseite mit einem Formular erneut geladen wird, das zuvor mittels POST Daten gesendet hat, dann bringt
der Browser oft ein (recht unverständliches) Popup und blockiert dadurch die Aktualisierung.

Popup durch Reload mit POST-Daten
Lösen Sie diese Blockierung mit dem PRG-Pattern aus der Vorlesung auf:
  • POST: Schicken Sie das POST-Formular an sich selbst ab - das heißt, an die Seite, die das Formular erzeugt hat
    und verarbeiten Sie die POST-Daten in processReceivedData()
  • REDIRECT: leiten Sie mit dem PHP-Befehl header('Location: http://Zielseite.php'); die; auf die
    eigentliche Zielseite um - aber dieses Mal ohne Daten.
  • GET: Jetzt lädt sich die Seite ohne übermittelte Daten und kann ohne Blockierung aktualisiert werden.
Achten Sie aber darauf, dass der "Redirect" wirklich nur dann ausgeführt wird, wenn Sie auch tatsächlich Daten
empfangen haben - ansonsten entsteht eine Endlosschleife.
Hinweis: Das Umstellen der Datenübermittlung auf GET ist keine zulässige Lösung!

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
   Implementierung der Seiten    Bestellung.php, Kunde.php, Baecker.php und Fahrer.php mittels Seitenklassen.
       • Die "Speisekarte" auf der Bestellseite wird mit den Daten aus den Datenbank erzeugt
       • Die Daten, welche die Bestellseite abschickt, werden in der Datenbank abgelegt.
       • Die Bäckerseite zeigt die bestellten Pizzen. Ein veränderter Status einer Pizza kann mit den Radio-Buttons oder über einen Submit-
         Button abgeschickt werden und wird in die Datenbank übernommen.
       • Die Fahrerseite zeigt die Bestellungen, die bereit für die Auslieferung sind. Ein veränderter Status einer Bestellung kann abgeschickt
         werden und wird in die Datenbank übernommen.
       • Die Fahrerseite und die Bäckerseite aktualisieren sich alle 10 Sekunden
   Implementierung der Datenbankzugriffe mittels     MySQLi

                        © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                                            Seite 18

Termin 3: Sessionmanagement, Sicherheit und AJAX-Vorbereitung

Termin 3: Sessionmanagement, Sicherheit und AJAX-Vorbereitung
 Lernziele
 Sie können ein einfaches Sessionmanagement mit PHP implementieren, um nutzerspezifische Daten zu verarbeiten
 Sie beherrschen grundlegende Verfahren zur Absicherung einer Web-Applikation gegen Angriffe wie SQL-Injection und Cross-Site-
Scripting
 Sie können mittels PHP JSON-Daten erzeugen und ausliefern
In dieser Einheit implementieren Sie eine leichtgewichtige Form des Sessionmanagements. Zusätzlich sichern Sie Ihre
Web-Applikation gegen grundlegende Angriffe auf eine Webseite ab. Ferner implementieren Sie die Serverseite zur
Aktualisierung der Kundenseite mittels AJAX.

Vorbereitung
 Vorbereitung
Erledigen Sie diese Aufgaben VOR dem Übungstermin
Voraussetzung: Die vier in Termin 2 erstellten Seitenklassen implementieren die vollständige Datenbankanbindung des Webservices und
erzeugen mit den Datenbankinhalten standardkonformen HTML-Code.
1. Machen Sie sich die Funktionsweise von Sessions in PHP klar und überlegen Sie sich, wo man Sessions einsetzen muss.
2. Machen Sie sich vertraut mit den Angriffen und den Gegenmaßnahmen zu Cross Site Scripting und SQL-Injection.

 Warnung
Sorgen Sie dafür, dass Sie die Vorbereitung zu Beginn der Übung zeigen können!

Aufgaben
Sessionmanagement
1. Der Kunde soll auf seiner Statusseite nur diejenigen Pizzen sehen, die er selbst zuletzt bestellt hat.
Implementieren Sie dieses Feature mittels Sessionverwaltung.
Tipp: Speichern Sie die letzte BestellungID in der Session und fragen Sie nur Pizzen mit dieser Bestellnummer
aus der Datenbank ab
2. Prüfen Sie, ob die Kundenseite sich tatsächlich so verhält wie erwartet. Was passiert, wenn keine Pizza
zurückgeliefert wird?
Sicherheit
1. Verhindern Sie SQL-Injection mit Hilfe von real_escape_string. Überlegen Sie an welchen Stellen der
Anwendung ein solcher Angriff möglich wäre und verhindern Sie es.
Test: geben Sie / ' " \ als Lieferadresse ein; diese Zeichen müssen auf der Fahrerseite genau so erscheinen.
2. Verhindern Sie Cross Site Scripting mit Hilfe von htmlspecialchars. Überlegen Sie an welchen Stellen der
Anwendung ein solcher Angriff möglich wäre und verhindern Sie es.
Test : geben Sie xxx als Lieferadresse ein; dies muss genau so in der Datenbank und in der Ausgabe auf
der Fahrerseite erscheinen
3. Ein Hacker könnte versuchen, Ihren PHP-Code zum Absturz zu bringen, indem er beim Aufruf der Webseite
unerwartete Parameter übergibt oder erwartete Parameter des Fomulars löscht. Welche Seitenklassen kann das
betreffen? Stellen Sie mit dem Befehl isset() sicher, dass solche Angriffe scheitern.
4. Testen und validieren Sie die generierten Seiten.
Serverseitige Implementierung der Statusupdates der Kundenseite
In der finalen Lösung der Kundenseite sollen die Statusinformationen zu den Pizzen übertragen werden, ohne dass
jedesmal die gesamte Seite neu geladen wird. Dafür muss es auf der Serverseite eine PHP-Seite geben, die genau
diese Rohdaten liefert (in einem Standardformat wie JSON).
 Hinweis
Das Einbauen der vom Browser empfangenen Daten in die Kundenseite erfolgt erst in der nächsten Übung.

Erstellen Sie basierend auf PageTemplate.php eine neue Seitenklasse mit Namen KundenStatus.php. Diese Seite soll
keine HTML-Ausgabe erzeugen, sondern "nur" die Statusdaten der bestellten Pizzen im JSON-Format zurückliefern.

Termin 3: Sessionmanagement, Sicherheit und AJAX-Vorbereitung

Bitte beachten Sie folgende Hinweise:
1. Passen Sie die Inhalte der Standardmethoden der Seitenklassen an:
• processReceivedData(): bleibt leer, da keine Formulardaten empfangen werden sollen
• getViewData(): Hier können Sie wie gewohnt die Daten von der Datenbank abfragen und z.B. als Array
bereitstellen
• generateView(): Da keine HTML-Seite erzeugt werden soll, kommentieren Sie die Zeilen
generatePageHeader() und generatePageFooter() aus. Stattdessen können Sie hier aber die gewünschten
Daten zurückliefern (siehe unten).
2. Überlegen Sie sich, welche Daten KundenStatus.php von der Datenbank benötigt, um die korrekten
Statusinformationen zurück zu liefern. Fragen Sie diese Daten gezielt bei der Datenbank ab. Verwenden Sie
analog zur Aufgabe von oben Sessionmanagement um die gewünschte Bestellung herauszufiltern.
3. Die Datenbankabfrage liefert ein Recordset, dessen Objekte nur mit den Methoden vom MySQLi abgefragt
werden können. Deshalb ist es für die Übertragung an den Browser ungeeignet. Wandeln Sie das Recordset in ein
einziges Array um, das - analog zum Recordset - ein assoziatives Array für jede Ergebniszeile enthält (also ein
Array von assoziativen Arrays).
4. Das Datenformat JSON bietet die Möglichkeit, komplexe Datenstrukturen und Objekte zu einem String zu
serialisieren und anschließend wieder zusammenzusetzen. Das ist sehr praktisch, wenn man komplexe
Datensätze z.B. von PHP an einen Webbrowser schicken will.
• Als erste Ausgabe (also zu Beginn der Methode generateView) müssen Sie den Nachrichtenheader auf
JSON setzen:
header("Content-Type: application/json; charset=UTF-8");
Achtung! Wenn Ihre Anwendung noch PHP-Fehler enthält, werden die Fehlermeldungen jetzt als (unleserliche)
JSON-Meldungen ausgegeben. In diesem Fall verwenden Sie zur Fehlersuche den normalen PHP-Header.
• Den serialisierten JSON-String erzeugen Sie mittels
$serializedData = json_encode($Array_mit_Daten_aus_Recordset);
• Versenden Sie den serialisierten JSON-String als Antwort mit echo $serializedData!
5. Testen Sie die korrekte Funktionsweise von KundenStatus.php mittels eines direkten Aufrufs im Browser. Je nach
Browser wird die Antwort leserlich oder auch nicht dargestellt. Sie können in einem Online JSON Editor
analysieren, ob die Antwort dem ursprünglichen Array entspricht.

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
 Einsatz von Sessionmanagement auf der Kundenseite und im Kundenstatus
 Implementierung von KundenStatus.php basierend auf den Seitenklassen.
 Versenden der Statusdaten durch KundenStatus.php mittels JSON
 Absicherung der Web-Applikation gegen SQL-Injection und Cross-Site-Scripting (XSS)

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM
 Lernziele
 Sie können mittels ECMAScript nicht-triviale Überprüfungen der eingegebenen Formulardaten implementieren
 Sie können mittels ECMAScript das DOM einer Seite manipulieren
 Sie können Anwendungsszenarien (bspw. das Füllen eines Warenkorbs) in entspr. DOM-Manipulationslogik übersetzen
 Sie können AJAX-Aufrufe erzeugen und HTTP Responses mittels Handler verarbeiten
 Sie können JSON-Daten clientseitig verarbeiten
In dieser Einheit geht es um die client-seitige Implementierung der Interaktion zwischen BenutzerIn und Anwendung.
Hierfür setzen wir ECMAScript ein und modifizieren damit die angezeigten Webseite mit Hilfe des DOM (=Document
Object Model) – bspw. zum Befüllen des Warenkorbs. Ferner steht in dieser Einheit auch die asynchrone
Kommunikation zwischen Server und Client mittels AJAX und JSON im Vordergrund, so dass Statusänderungen auf
der Kundenseite ohne Neuladen der Seite sichtbar werden.

Vorbereitung
 Vorbereitung
Erledigen Sie diese Aufgaben VOR dem Übungstermin
Voraussetzungen:
1. Ihre vier Seiten sind weitgehend vollständig und voll funktional. Es fehlen nur noch das Design und die Interaktionsmöglichkeit mit dem
Warenkorb (Einfügen / Löschen / Preisberechnung).
2. Zusätzlich haben Sie eine Klasse KundenStatus implementiert, die serverseitig die Daten für die Kundenseite liefert.
Aufgabe:
1. Machen Sie sich mit ECMAScript und DOM vertraut. Versuchen Sie als Vorbereitung ernsthaft die Aufgabe "Clientseitige Interaktion durch
ECMAScript" (s.u.) zu lösen.

Aufgaben
Clientseitige Interaktion durch ECMAScript

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM

1. Implementierung der Bestellfunktionalität mittels ECMAScript
Binden Sie eine gemeinsame ECMAScript-Datei für alle Ihre Webseiten ein und implementieren Sie anschließend
die folgenden Funktionen auf der Bestellseite:
• Ein Klick auf ein Pizzabild trägt diese Pizza in den Warenkorb ein;
bspw. 3 Pizzen bestellen → 3-mal klicken
• Der Preis der Pizzen im Warenkorb wird berechnet und angepasst, wenn sich der Warenkorb ändert (durch
Einfügen oder Löschen).
Tipp: xxx.toFixed(2) macht aus einer Zahl xxx einen String mit 2 Nachkommastellen und vermeidet
Rundungsfehler!
• "Beleben" Sie die Buttons zum Löschen der Einträge im Warenkorb - sowohl "Alle löschen" als auch -
"(Mehrfach-)Auswahl löschen" (mit Festhalten von STRG bei der Auswahl)
• Die Bestellung wird nur abgeschickt, wenn eine Lieferadresse angegeben ist und sich mindestens ein Element
im Warenkorb befindet. Der Bestellknopf ist deaktiviert, wenn die Adresse fehlt oder keine Pizza im
Warenkorb ist.
• Wenn Sie für den Warenkorb ein verwendet haben, werden nur die selektierten Pizzen abgeschickt.
Das ist nicht kundentauglich. Selektieren Sie beim Abschicken der Bestellung automatisch alle Pizzen im
Warenkorb.
 Hinweise
• Verwenden Sie nur DOM-konforme Attribute und Funktionen und keine browserspezifischen Spezialitäten (Vorsicht mit Vorlagen aus
dem Netz !)
• Verwenden Sie "use strict"; in allen Funktionen
• Verwenden Sie NICHT den Befehl innerhtml()
• Achten Sie auf Groß-Klein-Schreibung und die exakte Schreibweise bei DOM-Aufrufen
• Testen Sie die Skripte mit unterschiedlichen Browsern und Lint-Tools
• Daten, die Sie nicht anzeigen wollen, aber für die Berechnung brauchen, können unsichtbar in data-Attributen im Seiten-DOM
gespeichert und mittels ECMAScript ausgelesen werden.

 Bei Problemen mit DOM oder ECMAScript
• Nutzen Sie den eingebauten "Debugger" Ihres Browser (Aufruf mit F12).
• Im Reiter Konsole finden Sie Hinweise auf Fehler im Code, die der Browser nicht anzeigt. Wenn Ihr Code nichts funktioniert, steht
hier wahrscheinlich der Grund dafür.
• Im Reiter DOM können Sie das DOM zu einem Tag anzuschauen. Eine ID für den Tag hilft enorm bei der Suche!
• Der Inspektor zeigt Ihnen die Stelle im Browserfenster, die Sie im Code auswählen.
• Im Browserfenster können Sie im Rechte-Maus-Menü Element untersuchen auswählen und sehen den zugehörigen Quellcode
im Debugger.
• Prüfen Sie Ihr ECMAScript mit ESLint für ECMAScript 6 oder JSLint.

2. Abschicken von Formularen ohne Submit-Button
Auf der Bäcker- und Fahrerseite wird eventuell noch ein Submit-Button verwendet, um die Seite abzuschicken.
• Ändern Sie die Seiten so ab, dass sie abgeschickt werden, wenn ein Radiobutton angeklickt wird.
Tipp: Dazu geben Sie dem , das die Radiobuttons umschließt, eine ID (z.B. ) und
verwenden diese ID und onclick bei den Radiobuttons um das Formular beim Anklicken abzuschicken:

• Entfernen Sie die Submit-Buttons.
Aktualisierung der Kundenseite mittels AJAX und JSON
Die Kundenseite soll den Status der Pizzen aktualisieren ohne jedesmal die gesamte Seite neu zu laden. Zwischen
Server und Client werden dann nur noch die reinen Daten ausgetauscht und kein HTML-Code mehr. Die Daten werden
mit ECMAScript und DOM in die Webseite "eingebaut". Das Anfordern der Daten erfolgt mit AJAX und die Übertragung
erfolgt im JSON-Format.
Anschließend aktualisiert die Kundenseite ( Kunde.php) mittels ECMAScript und AJAX den Status aller
Bestellpositionen, ohne die Seite jeweils neu laden zu müssen. D.h., sobald sich der Status einer Bestellposition auf
der Bäcker- oder Fahrer-Seite ändert, soll sich diese Änderung auch auf der Kundenseite widerspiegeln.

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM

Die serverseitige Implementierung, welche die Daten liefert, haben Sie bereits in der letzten Übung implementiert
( KundenStatus.php).

                       © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                 Seite 23

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM

1. Schreiben Sie eine EcmaScript-Methode, welche die gelieferten Daten auswertet und über das DOM in die
  Kundenseite einfügt.
     • Rufen Sie die Seite KundenStatus.php während einer laufenden Bestellung in einem Browserfenster auf und
      speichern Sie den gelieferten JSON-String für spätere Tests als Konstante in Ihrer Methode.
     • Binden Sie zu Beginn des HTML- der Kundenseite eine separate JS-Datei ein. Also mit ...
      ...
     • Implementieren Sie die ECMAScript-Methode process(), die als Parameter einen (JSON-)String erhält, den
      String mit JSON.parse auspackt und mittels DOM in die Kundenseite einfügt.
      Achtung! Bei bestimmten Datenformaten erkennt ECMAScript, dass Sie JSON-Daten empfangen und
      konvertiert die Daten automatisch. Dann darf man JSON.parse nicht mehr aufrufen, sonst gibt es einen
      Fehler!
      Tipp: Schreiben Sie Hilfsfunktionen, die wiederkehrende Teile der DOM-Erzeugung vereinfachen (z.B. das
      Erzeugen einer einzelnen Statuszeile).
     • Zu Testzwecken rufen Sie diese Methode in onload() der Kundenseite mit dem konstanten JSON-String von
      oben auf und prüfen das Ergebnis.
     • Berücksichtigen Sie unbedingt auch den Fall, dass als Ergebnis keine Pizza zurückgeliefert wird.
2. Implementieren Sie die Logik zum Datenaustausch mit AJAX
  Nachdem nun serverseitig die Funktion zum Liefern der Daten und clientseitig die Funktion zum Verarbeiten der
  Daten vorliegt, müssen Sie die Aufrufe "nur noch" kombinieren.
     • Dazu müssen Sie mit ECMAScript einen XMLHttpRequest erstellen, konfigurieren und abschicken.
     • Erzeugen Sie einen XMLHttpRequest und definieren die Funktion requestData(), die den eigentlichen AJAX-
      Aufruf macht:
           // request als globale Variable anlegen (haesslich, aber bequem)
           var request = new XMLHttpRequest();

           function requestData() { // fordert die Daten asynchron an
           request.open("GET", "KundenStatus.php"); // URL für HTTP-GET
           request.onreadystatechange = processData; //Callback-Handler zuordnen
           request.send(null); // Request abschicken
           }
     • und zusätzlich die (generische) Methode processData() welche die erfolgreiche Antwort herausfiltert und
      dann die Funktion process() zur Verarbeitung der Daten aufruft.
        function processData() {
          if(request.readyState == 4) { // Uebertragung = DONE
             if (request.status == 200) {   // HTTP-Status = OK
               if(request.responseText != null)
                 process(request.responseText);// Daten verarbeiten
               else console.error ("Dokument ist leer");
             }
             else console.error ("Uebertragung fehlgeschlagen");
          } else ;          // Uebertragung laeuft noch
        }

                   © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                  Seite 24

Termin 4: Client-seitige Interaktion mit ECMAScript, AJAX und DOM

 3. Führen Sie die Aktualisierung mit AJAX alle 2 Sekunden durch
       • Die Anfrage nach den aktuellen Zuständen einer Bestellung erfolgt mittels zyklisch ausgeführten AJAX-
        Aufrufen (=Polling) durch folgende ECMAScript-Funktion:
         window.setInterval (myfunction, time_in_milliseconds)
        Dabei repräsentiert myfunction eine ECMAScript-Funktion, die zyklisch aufgerufen werden soll. In unserem
        Fall ist das die Funktion requestData() von oben, welche jeweils einen AJAX-Request anlegt und abschickt.
       • Das Polling soll erst starten, nachdem die Seite Kunde.php komplett vom Browser geladen und geparst
        wurde. Bauen Sie den Aufruf im onload-Handler ein.
          Hinweis
      Falls die Aktualisierung immer wieder die gleichen Daten liefert, könnte das am Cache Ihres Browsers liegen. Bauen Sie dann die
      folgenden Codezeilen ganz am Anfang von processReceivedData() in Ihre KundenStatus.php ein:
        header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
        header("Expires: Sat, 01 Jul 2000 06:00:00 GMT"); // Datum in der Vergangenheit
        header("Cache-Control: post-check=0, pre-check=0", false); // fuer IE
        header("Pragma: no-cache");
        session_cache_limiter('nocache'); // VOR session_start()!
        session_cache_expire(0);

Nachbereitung
Setzen Sie noch eventuell fehlende Teile der obigen Aufgabe bis zum Abgabetermin um. Entwickeln Sie spätestens bis
zum nächsten Praktikumstermin auch das responsive Design für Ihren Webservice (siehe Selbststudium II:
Responsives Design).

Ergebnisse
Die folgenden Ergebnisse müssen für eine erfolgreiche Durchführung der Praktikumseinheit vorliegen:
     Ergebnisse
     Vollständige Implementierung der Bestellseite mit Berechnungen und Prüfungen durch valides ECMAScript und DOM
   Vollständige Implementierung der zyklischen Aktualisierung der Kundenseite über AJAX und JSON
   Der komplette Bestelldurchlauf verläuft jetzt wie vom Kunden gefordert (→ ausgiebiges Testen erforderlich)

                        © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                                        Seite 25

Selbststudium II: Responsives Design mit CSS (→ zu Hause)

       Selbststudium II: Responsives Design mit CSS (→ zu Hause)
     Warnung
  Selbständige Vorbereitung:
  Es wird erwartet, dass jede Gruppe diese Aufgaben selbständig und vollständig vor dem letzten Praktikumstermin (→ Abgabe!) erledigt hat!
  Die Ergebnisse müssen zu Beginn des letzten Praktikumstermins vorliegen!

     Lernziele
     Sie kennen die Basiselemente von CSS zur Gestaltung eines Designs
    Sie können ein responsives Webdesign mit CSS und Media Queries erstellen
    Sie können ein selbst erstelltes Design Schema in Ihre Webseiten einbinden
    Sie kennen Syntax und Logik der Formulierung von CSS Selektoren
Ziel dieser Einheit ist die Entwicklung eines Design Schemas für Ihre Web-Applikation mittels CSS Level 3 und Media
Queries. Hierzu setzen wir vor allem auf die Entwicklung eines responsiven Designs, bei welchem sich die in einer
Seite enthalten UI-Elemente in Abhängigkeit des Ausgabegerätes und der Viewportgröße derart anordnen bzw.
darstellen, dass eine hohe User Experience (UX) gewährleistet ist.
     Hinweise
    • Sie können für das Design Ihres Shopsystems ein CSS-Framework wie Bootstrap oder Material Components for the Web verwenden, um
      ein besonders ausgefeiltes Design zu erhalten. Bitte beachten Sie jedoch, dass dies erstens nicht gefordert ist, und zweitens Sie in der
      Klausur nicht auf CSS-Frameworks zurückgreifen dürfen und stattdessen die CSS-Stilregeln "von Hand" erstellen müssen.
    • Diese Aufgabe kann und sollte parallel und iterativ-inkrementell zu den anderen Terminen durchgeführt werden.

Aufgaben
Entwicklung eines Design-Schemas
Entwickeln Sie ein ansprechendes Style Sheet für Ihre Web-Applikation und binden Sie es in alle Ihre HTML-Seiten ein
  • Überlegen Sie sich zu diesem Zweck ein Design-Schema mit Farben, Schriftarten, Schriftgrößen, Abständen,
    Rändern, Ausrichtung, etc.
  • Verwenden Sie keine physische Formatierung in HTML und auch kein style-Attribut
  • Setzen Sie die verschiedenen Maßeinheiten sinnvoll ein. Das Layout soll hinsichtlich Fenstergröße und
    Schriftgröße dynamisch sein!
  • Prüfen Sie das Ergebnis mit dem CSS-Validator
  • Testen Sie Ihr Style Sheet mit unterschiedlichen Browsern und Auflösungen. Nutzen Sie die Funktion
    "Bildschirmgrößen testen" im Debugger Ihres Browsers
  • Validieren Sie die Standardkonformität mittels eines "CSS Validators". Besonders bei unerwartetem Verhalten des
    Browsers gibt der Validator wertvolle Hinweise auf die mögliche Ursache der Probleme. Nutzen Sie https://
    jigsaw.w3.org/css-validator/#validate_by_input und korrigieren Sie etwaige Fehler und Warnungen.
Responsives Layout und Mobile-First-Ansatz
Realisieren Sie das Layout der Seite Bestellung.php nach dem Mobile-First-Ansatz. Das heißt, Sie entwickeln das
Layout der Seite zuerst im Hinblick auf eine gute User Experience (UX) auf dem Handy und erst dann für einen PC-
Bildschirm.
  • Entwickeln Sie ein Stylesheet (bzw. erweitern Sie Ihr bisher erstelltes Stylesheet) für den Einsatz auf
    Mobiltelefonen durch die Verwendung von Media Queries.
  • Passen Sie die Komposition der Elemente dynamisch der Viewportgröße und Orientierung an. Ordnen Sie die
    Elemente so an, dass man zur Bedienung der Seite möglichst wenig Scrollen muss.
  • Testen Sie die Darstellung mit den "Web Developer Tools" Ihres Browsers oder auf einem Mobiltelefon

Ergebnisse
     Ergebnisse
     Erstellung eines Design Schemas mit ansprechender Optik
   Umsetzung des Design Schemas durch valides CSS
   Demonstration eines responsiven Webdesigns mit Media Queries am Beispiel der Bestellseite

                          © Ralf Hahn, Ute Trapp und Stefan Zander 2021, EWA, h_da                                                           Seite 26

Termin 5: Abnahme mit responsivem Design

Termin 5: Abnahme mit responsivem Design
Allgemeines
 Warnung
Die 5. Übung dient ausschließlich der Abnahme Ihrer Applikation, d.h., es sind keine Implementierungsarbeiten mehr erlaubt!

Vorbereitung
 Vorbereitung
Erledigen Sie diese Aufgaben VOR dem Übungstermin
1. Voraussetzung zur Abnahme:
Ihre vier Seiten sind vollständig und voll funktional. Die Abnahme überprüft das Gesamtprojekt - das heißt alle Ergebnisse aus den
vorangegangenen Übungen funktionieren im Zusammenspiel.
• Sie haben mittlerweile auch ein responsives Design entwickelt und umgesetzt
• Gehen Sie vor Beginn der Übung die Checkliste durch und stellen Sie sicher, dass alle Punkte erfüllt sind.
• Sehen Sie auch nochmal im Kapitel Anforderungen an die zu entwickelnde Web-Applikation nach, dass Sie keine Anforderung
vergessen oder übersehen haben!
• Die Abnahme findet an einem Ihrer Entwicklungsrechner statt. Stellen Sie sicher, dass sich darauf 2 unterschiedliche Browser und der
konfigurierte Webserver befinden.
2. Bei der Abnahme wird die Funktionstüchtigkeit Ihrer Applikation überprüft. Dazu...
• ...öffnen Sie Ihre Webanwendung in zwei unterschiedlichen Browsern und ordnen die Browserfenster nebeneinander an.
• ...öffnen Sie parallel auch die Datenbank (→ phpmyadmin) und entfernen Sie vorab alle Daten von alten Bestellungen.
• ...sollten Sie Ihren Code verstehen und erklären können
• ...sollten Sie insgesamt gut vorbereitet sein und inhaltliche bzw. technische Fragen sicher beantworten können.
• ...wird überprüft, ob der Bestellprozess fehlerfrei durchgeführt werden kann und ob Sie alle Anforderungen umgesetzt haben

Checkliste für die Abnahme
Für eine erfolgreiche Abnahme müssen alle Punkte erfüllt sein!
 Checkliste
1. Allgemeines
 Konsequente Verwendung der PHP-Seitenklassen für alle Seiten
 Alle generierten Seiten werden vom W3C Validator als fehlerfrei erkannt und "HTML Lint" zeigt keine Meldungen mit
Schwierigkeitsgrad > 2.
 Die Web-Applikation ist gesichert gegen Cross-Site-Scripting (XSS) und gegen SQL-Injection
 Erfasste Daten werden (bis auf Angriffsversuche) unverändert in die Datenbank geschrieben
 Es gibt entweder eine Übersichtsseite oder eine ausblendbare Navigationsleiste mit Links zu den 4 Hauptseiten.
2. Funktion
 Eine direkt in die Datenbank eingetragene Pizza erscheint nach einem Reload auf der Speisekarte
 Der Warenkorb erlaubt das Löschen von einzelnen Pizzen und von allen Pizzen und rechnet korrekt
 Die Bestellung kann erst abgeschickt werden, wenn sich mindestens eine Pizza im Warenkorb befindet und das Adressfeld nicht leer
ist. Vorher ist der "Bestellen"-Knopf deaktiviert.
 Wenn man 2 Bestellungen in verschiedenen Browsern abschickt, sieht der jeweilige Browser (Kunde) nur die eigene Bestellung.
 Die Kundenseite wird nach der Bestellung geöffnet und aktualisiert sich ohne Neuladen (mit AJAX). Statusänderung auf der Bäcker-
oder Fahrerseite werden kurz darauf auf der Kundenseite angezeigt.
 Das Formular der Bestellseite wird an die Bestellseite abgeschickt und nach der Verarbeitung der Bestellung an die Kundenseite
weitergeleitet (PRG-Pattern). Es gibt keine Blockade beim manuellen Reload der Seite (mit F5).
 Die Fahrer- und Bäckerseite laden sich alle 10 Sekunden neu
 Die Bäckerseite zeigt alle bestellten Pizzen
 Fertig gebackene Pizzen verschwinden erst von der Bäckerseite, wenn der Fahrer die Bestellung ausliefert
 Bestellungen verschwinden nach der Auslieferung von der Fahrerseite
 HTML-Tags im Adressfeld einer Bestellung (XSS) werden auf der Fahrerseite nicht ausgeführt
3. Layout
 Ansprechendes Design
 Auf der Bestellseite verwenden Sie Media Queries um ansprechende Layouts für mindestens 2 Bildschirmformate umzusetzen. Der
Warenkorb rutscht je nach Bildschirmbreite und Ausrichtung neben oder unter die Speisekarte
 Keine Verwendung von absoluten Maßeinheiten (außerhalb von Media Queries)

Nachbereitung

Sie können auch lesen