Der zweite Teil der AJAX-Unterrichtssequenz befasst sich mit den serverseitigen Elementen der Anwendung. Dabei handelt es um die MySQL-Datenbank und die PHP-Scripte zur Interaktion mit der Datenbank und der Kommunikation mit den Clients.Diese Unterrichtsstunden haben zum Ziel die serverseitigen Komponenten der Webanwendung (MySQL-Datenbank und PHP-Skripte) zu implementieren. Die Basis dafür ist die Demoanwendung, die im Hinblick auf dieses Ziel zu analysieren ist. Die Lerngruppe erarbeitet das Datenmodel (Datenbanktabellen und Tabellenfelder) sowie die Anwendungs- und Kommunikationsfälle (Use Cases), mit denen die Anwendungslogik realisiert werden kann. Verwendung von Skripten Die Implementierung der PHP-Skripte soll von den Lernenden selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden. Um Zeit zu sparen, bietet es sich hier an, arbeitsteilig vorzugehen: Die zu implementierenden Skripte werden auf Gruppen aufgeteilt. Das ist ohne Lernverlust möglich, weil die Skripte weitgehend gleichartig strukturiert sind. Die Lehrperson kann situationsabhängig entscheiden, ob Teile der Demoanwendung vorgegeben werden. Didaktische Reduktion PHP ist eine mächtige und objektorientierte Programmiersprache, von der im Rahmen dieses Projekts nur ein vergleichsweise kleiner Teil benötigt und behandelt wird. Eine Hilfsklasse namens MySQL_class in der die PHP-Funktionen des MySQL Application Interface (API) gekapselt sind, wird vorgegeben. Diese Klasse erleichtert die Implementierung der erforderlichen Datenbankoperationen. Als konkretes Beispiel für die Anwendung dieser Klasse dient das Skript register.php, mit dem neue Benutzer in der Datenbank registriert werden. Ablauf der Unterrichtseinheit Das Datenmodel der Anwendung Die Schülerinnen und Schüler erstellen eine MySQL-Datenbank, indem sie die serverseitig erforderlichen Daten erarbeiten und entsprechend umsetzen. Serverseitige Kommunikationskomponenten Die Schülerinnen und Schüler lernen verschiedene Komponenten eines PHP-Scripts kennen und versuchen, eine Server-Client-Kommunikation aufzubauen. Implementierung der Kommunikationskomponenten Die Schülerinnen und Schüler programmieren in der PHP-Programmiersprache und beginnen die Funktionsweise des Scripts zu verstehen. Fachkompetenz Die Schülerinnen und Schüler sollen die Funktionalität der Anwendung analysieren und ausgehend von den Ergebnissen eine MySQL-Datenbank entwickeln und implementieren. PHP-Skripte implementieren, die mit der Datenbank und den Clients kommunizieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. eine zur Verfügung gestellte PHP-Klasse für die Interaktion mit der Datenbank integrieren und benutzen. Thema AJAX II: Implementierung der serverseitigen Komponenten Autor Dr. Ralf Seliger Fach Web-Programmierung, Informationstechnik, Informatik Zielgruppe Informationstechnische Assistentinnen und Assistenten (Oberstufe) Zeitraum etwa 12 Unterrichtsstunden Medien Computer, Internet Technische Voraussetzungen Rechnerraum mit Internetzugang und Beamer Fachliche Lernvoraussetzungen Die Lernenden sollen über praktische Kenntnisse in der prozeduralen Programmierung verfügen. Planung Verlaufsplan AJAX II Die Entwicklung des Datenmodells für die Webanwendung Tic Tac Toe bis zur Implementierung der Datenbank gliedert sich in vier Schritte: Analyse der Anwendungsfälle (Use Cases) der Anwendung (Registrierung, Anmeldung, Angebotsabgabe, Angebotsannahme, Spiel, Reset) Erarbeitung der für die Organisation der Anwendungsfälle serverseitig erforderlichen Daten Realisierung in Form einer relationalen MySQL-Datenbank Implementierung der Datenbank Einrichtung Die entwickelte Datenbank wird mithilfe der Webanwendung phpMyAdmin auf dem Server implementiert. Gleichzeitig wird ein Datenbankbenutzer mit den erforderlichen globalen Rechten SELECT, INSERT, UPDATE und DELETE eingerichtet. Falls erforderlich, sind die Lernenden darauf hinzuweisen, dass mit geeigneten Maßnahmen dafür zu sorgen ist, dass sich niemand doppelt anmelden kann. Komponentenerstellung Um die serverseitigen Funktionalitäten der Webanwendung in möglichst übersichtliche, klar voneinander abgegrenzte Pakete beziehungsweise Module zu unterteilen, sollte für jeden Anwendungsfall eine eigene so genannte Kommunikationskomponente erstellt und in Form eines PHP-Skripts implementiert werden. So wird zudem verhindert, dass zu stark divergierende Ergebnisse entstehen. Komponententabelle Aus den erarbeiteten Anwendungsfällen ergeben sich unmittelbar die folgenden Komponenten: Komponente Zweck register.php Registrierung eines neuen Benutzers login.php Anmeldung eines registrierten Benutzers offer.php Veröffentlichung eines Spielangebots accept.php Annahme eines veröffentlichten Angebots move.php Verarbeitung eines ankommenden Spielzugs resetGame.php Zurücksetzen des Zustands der Anwendung poller.php Beantwortung der periodischen Client Requests Polling-Komponente Die Polling-Komponente poller.php ist dafür zuständig, serverseitig diese regelmäßig eintreffenden Requests entgegen zu nehmen, zu verarbeiten und zu beantworten. Darüber hinaus soll sie die Datensätze von Benutzern entfernen, die längere Zeit keine Requests mehr gesendet haben und somit offline sind (Demoanwendung: drei Sekunden bei einem Polling-Intervall von einer Sekunde). Insgesamt ist die Polling-Komponente deutlich aufwändiger und komplexer als die übrigen Komponenten. Für die Client-Server-Kommunikation wird das Hypertext Transfer Protocol (HTTP) verwendet: Die Clients senden Requests zum Server; die Requests werden vom Server beantwortet. Der Server hat keine Möglichkeit, die Clients aktiv anzusprechen und ihnen Daten zu übertragen; er beantwortet ausschließlich Requests. Es ist daher erforderlich, dass die Clients den Server in regelmäßigen Intervallen ansprechen (Polling), um über den aktuellen Zustand der Anwendung informiert zu werden (aktuell angemeldete Benutzer, aktuell vorliegende Spielangebote, Angebotsannahmen, ein neuer Zug des aktuellen Gegners) Nachdem die zu programmierenden Komponenten im Unterricht anhand der Anwendungsfälle identifiziert wurden, sollen die Lernenden mithilfe des folgenden Aufgabenblatts die Input- und Outputdaten sowie die Algorithmen entwickeln, die in den Komponenten zu implementieren sind. Die Datei util.php, welche die Klasse MySQL_class enthält, ist den Lernenden zur Verfügung zu stellen. Assoziative Arrays Ein wichtiger Aspekt der Programmiersprache PHP sind die "Assoziativen Arrays". Im Gegensatz zu nummerisch indizierten Arrays kann man auf die Elemente (Werte beziehungsweise Values) assoziativer Arrays mithilfe von Strings (Schlüssel beziehungsweise Keys) zugreifen. Dies sollte für die Verarbeitung der Datenbankabfragen ausgenutzt werden, weil es die Lesbarkeit des Codes stark verbessert. Testcode für die PHP-Scripte Die korrekte Funktionsweise der Skripte kann während der Entwicklung zum Beispiel mithilfe eines einfachen XHTML-Formulars getestet werden. Das folgende Listing zeigt den XHTML-Code des Testformulars für das Anmeldeskript login.php: Nach Absendung des Formulars zeigt ein Blick in die Datenbank mit phpMyAdmin sowie auf das zurück gelieferte XML-Dokument, ob das Skript login.php wie gewünscht funktioniert. Für die anderen Skripte ist das Formular entsprechend zu modifizieren. Informationsblätter Als konkretes Beispiel für die Implementierung kann das ausführlich kommentierte Skript register.php herangezogen werden, das auf dem folgenden Infoblatt exemplarisch abgedruckt ist und auf dem auch die Hilfsklasse MySQL_class dokumentiert wird. Programmierung Als Konsequenz der Tatsache, dass die Client-Server-Kommunikation mithilfe von AJAX (Asynchronous JavaScript and XML) realisiert wird, müssen die serverseitigen Komponenten XML-Dokumente produzieren und zurückliefern. Als Root-Element des XML-Dokuments wird in der Demoanwendung in allen Skripten verwendet. Grundsätzlich ist die Namenswahl natürlich beliebig. Es ist jedoch auf Konsistenz zwischen Client und Server zu achten. Hinweis Wenn ein anderer Name für den Root-Tag gewählt werden sollte, muss dies auch in der Datei util.php geändert werden. Innerhalb der XML-Elemente sind etwa unterschiedliche Benutzernamen durch definierte Zeichen wie zum Beispiel senkrechte Striche ( | ) voneinander zu trennen, damit sie clientseitig wieder voneinander getrennt werden können.