Der dritte und letzte Teil der Unterrichtsreihe befasst sich mit den clientseitigen Funktionen der Webanwendung. Diese Funktionen dienen dazu, Zustandsveränderungen des serverseitigen Modells auf die grafische Benutzeroberfläche abzubilden. Der dritte Teil der Unterrichtssequenz hat das Ziel, die clientseitigen Kommunikationskomponenten der Webanwendung (JavaScipt-Skripte) zu implementieren und zu einer funktionsfähigen AJAX-Webanwendung zu integrieren. Dabei handelt es sich um eine sehr anspruchsvolle Aufgabe, die die Lernenden mit vielen vermutlich neuen Aspekten der Sprache JavaScript konfrontiert. Architekturprinzip der Webanwendung Tic Tac Toe Jeder serverseitigen Komponente, die in Form eines PHP-Skripts vorliegt, wird genau ein clientseitiger Partner in Form eines JavaScript-Skripts gegenübergestellt. Diese beiden Teilkomponenten kommunizieren via XMLHttpRequest miteinander, wenn eine Benutzeraktion dies erfordert. Die Integration der Komponenten erfolgt clientseitig mithilfe globaler Variablen. Eine Möglichkeit dies zu tun zeigt die Demoanwendung. Funktionsweise Wenn die Lernenden schließlich die grundsätzliche Funktionsweise der Client-Server-Kommunikation via XMLHttpRequest sowie eine mögliche Form der Umsetzung verstehen, kann die konkrete Implementierung der Komponenten und deren Integration in Angriff genommen werden. Dies soll von den Schülerinnen und Schülern selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden. Didaktische Reduktion Der Code zur Erzeugung des XMLHttpRequest-Objekts sowie die Methoden für die programmatische Benutzung dieses Objekts innerhalb der clientseitigen Kommunikationskomponenten werden den Lernenden in Form des ContentLoader-Objekts (Datei: contentloader.js) bereitgestellt. Dieses Objekt muss von den clientseitigen Komponenten erzeugt und seine Methoden auf geeignete Art und Weise aufgerufen werden. Als konkretes Beispiel dafür wird die Register-Komponente zur Registrierung neuer Benutzer ebenfalls vorgegeben (Datei: register.js). Ablauf der Unterrichtseinheit Das AJAX-Kommunikationsmodell In dieser Unterrichtsstunde erarbeiten die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt. Implementierung der clientseitigen Komponenten In der letzten Stunde der dreiteiligen Unterrichtssequenz setzen die Schülerinnen und Schüler die AJAX-Webanwendung für das Spiel "Tic Tac Toe" komplett um. Fachkompetenz Die Schülerinnen und Schüler sollen JavaScript-Objekte mit geeigneten Event Handlern entwickeln, die mit den serverseitigen Komponenten via XMLHttpRequest kommunizieren. die Komponenten clientseitig zu einer funktionierenden Anwendung integrieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. englischsprachige Fachtexte übersetzen und verstehen. zur Verfügung gestellte JavaScript-Bibliotheken integrieren und benutzen. Thema AJAX III: Clientseitige Funktionen Autor Dr. Ralf Seliger Fach Web-Programmierung, Informationstechnik, Informatik Zielgruppe Informationstechnische Assistentinnen und Assistenten (Oberstufe) Zeitraum etwa 16 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 III Begriffsdefinitionen und Unterschiede Anhand der Übersetzung des englischen Originaltextes, mit dem der Begriff AJAX von Jesse James Garrett im Jahr 2005 geprägt wurde, sollen sich die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt erarbeiten. Darüber hinaus erläutert der Autor sehr anschaulich die Unterschiede zur herkömmlichen Client-Server-Kommunikation. Registrierung neuer Benutzer Die Komponente Register registriert neue Benutzer in der Datenbank des Servers, wenn der gewünschte Benutzername noch nicht vergeben ist. Diese Komponente wird den Lernenden vorgegeben, damit sie sich anhand einer Codeanalyse die grundsätzliche Funktionsweise und das Zusammenwirken der client- und serverseitigen Kommunikationskomponenten erschließen können. Umsetzung Gegenstand der folgenden Aufgabenstellungen ist die schrittweise Implementierung der clientseitigen Kommunikationskomponenten und ihre Integration zu der vollständigen Webanwendung Tic Tac Toe. Auf den Aufgabenblättern bekommen die Lernenden jeweils Hinweise, mit welchen JavaScript-Sprachelementen das Problem auf jeden Fall lösbar ist. Zur konkreten Umsetzung werden jedoch noch Recherchen auf den einschlägigen Webseiten erforderlich sein. Am einfachsten dürfte die Implementierung der Spiellogik mithilfe einiger globaler Variablen sein (siehe Demoanwendung). Clientseitige Validierung der Formulardaten Es ist nur sinnvoll, Daten zum Server zu übertragen, nachdem diese plausibilisert worden sind. So ist zu überprüfen, ob tatsächlich ein Benutzername und ein Kennwort in das Loginformular eingetragen wurden. In Bezug auf das Registrierungsformular ist zusätzlich zu überprüfen, ob das Kennwort und seine Wiederholung identisch sind. Die clientseitigen Kommunikationskomponenten werden zweckmäßigerweise in der folgenden Reihenfolge implementiert. Die Polling-Komponente ist dabei laufend um zusätzliche Funktionalitäten zu ergänzen. Register (vorgegeben) Login Poller Offer (Poller ergänzen) Accept (Poller ergänzen) Move (Poller ergänzen) ResetGame

Im Rahmen einer dreiteiligen Unterrichtssequenz soll eine komplexe AJAX-unterstützte Web-2.0-Anwendung handlungsorientiert entwickelt werden.Als Beispiel dient das Spiel Tic Tac Toe, das nach erfolgreicher Implementierung der Anwendung von jeweils zwei Spielenden an beliebigen Computern über das Internet gespielt werden kann. Zielgruppe der Unterrichtssequenz ist die Oberstufe eines Bildungsganges für Informationstechnische Assistentinnen und Assistenten. Bei dem Lerngegenstand handelt es sich um eine typische Web-2.0-Anwendung. Sie ist für die Schülerinnen und Schüler der Zielgruppe praktisch relevant, weil die Bedeutung von AJAX-unterstützten Webanwendungen in der Informationstechnik in Zukunft weiter zunehmen wird.Die Schülerinnen und Schüler sind bereit und in der Lage, eine komplexe Webanwendung zu implementieren, indem sie moderne Internet-Technologien und Software-Werkzeuge zielorientiert miteinander kombinieren und anwenden. Sie orientieren sich bei der Entwicklung an dem Model-View-Controller-Prinzip, um das Datenmodell der Anwendung von der Benutzerschnittstelle zu trennen. Dreiteilung der Unterrichtseinheit Die Schülerinnen und Schüler sollen die Demoanwendung weitgehend selbstständig reproduzieren. Der gesamte Entwicklungsprozess wird in drei Hauptabschnitte gegliedert, die sich im Wesentlichen an der MVC-Architektur orientieren (Teil 1 behandelt die Ansicht, Teil 2 das Modell und Teil 3 die Steuerung). Auf diesem Wege werden sich die Schülerinnen und Schüler das Wesen und die Merkmale der Model-View-Controller-Architektur sukzessive selbstständig erschließen. AJAX I: Realisierung der grafischen Benutzerschnittstelle Der erste Teil der dreiteiligen Unterrichtssequenz befasst sich mit der Erstellung der aktiven grafischen Benutzerschnittstelle mithilfe von XHTML, CSS und JavaScript. AJAX II: Implementierung der serverseitigen Komponenten Der zweite Teil der AJAX-Unterrichtssequenz hat die serverseitigen Elemente der Anwendung zum Thema. AJAX III: Clientseitige Funktionen Der dritte und letzte Teil der Unterrichtsreihe beschäftigt sich mit den clientseitigen Funktionen der Webanwendung. Häusliche Entwicklungsarbeit Um das Projekt zu einem erfolgreichen Ergebnis zu führen, ist es unabdingbar, dass sich die Schülerinnen und Schüler auch zu Hause mit dem Projekt befassen. In der Praxis bedeutet das, dass im wöchentlichen Unterricht lediglich die Grundlage für die häusliche Entwicklungsarbeit der jeweils folgenden Woche gelegt wird. Nützlich ist dabei, wenn die Lerngruppe auch während dieser Zeit Gelegenheit hat, Fragen zu stellen und Probleme zu diskutieren (etwa via E-Mail oder mithilfe einer Lernplattform wie Moodle . Es ist unerlässlich, dass für die Unterrichtsgespräche ein gemeinsames Vokabular zur Verfügung steht, das sowohl Lehrkraft als auch Schülerinnen und Schüler sicher beherrschen. Insbesondere handelt es sich dabei um die folgenden Begriffe: Klassen, Objekte, Attribute und Methoden Der Punktoperator zum programmatischen Zugriff auf Attribute und Methoden eines Objekts Ereignisse (Events) und Ereignis-Behandlungsroutinen (Event Handler) Darüber hinaus ist es erforderlich, dass die Schülerinnen und Schüler über praktische Kenntnisse in der prozeduralen Programmierung (vorzugsweise mit C) verfügen. Elemente und Begriffe wie die folgenden dürfen keine Fremdwörter sein, sondern sollten von den Schülerinnen und Schülern aktiv für die Implementierung von Algorithmen angewendet werden können. Datentypen, globale oder lokale Variablen, Wertzuweisungen Arrays Funktionen for-, while- und do-, while-Schleifen if-, else if-, else- und switch-/case-Kontrollstrukturen Diese Kenntnisse stellen eine notwendige Grundlage für die erfolgreiche Arbeit mit JavaScript und PHP im Rahmen der gesamten Unterrichtssequenz dar. Demoversion Eine Demoversion liegt vor und muss vor Beginn der Unterrichtssequenz auf dem Lehrerarbeitsplatz funktionsfähig installiert sein. Dazu gehört auch die weiter unten beschriebene Entwicklungssoftware. Zeitplanung Insgesamt orientiert sich der Unterricht am Modell der vollständigen Handlung . Besonders für die verschiedenen Planungsphasen (Beschaffung und Konfiguration der Entwicklungswerkzeuge, Analyse der Funktionalitäten der Demoanwendung) sollte hinreichend viel Zeit eingeplant werden. Entwicklung und Implementierung der Webanwendung Die folgenden Ausführungen, Informations- und Arbeitsblätter sind der Versuch, die Entwicklung und Implementierung der Webanwendung sowohl fachlich als auch didaktisch in möglichst folgerichtige Schritte aufzuteilen, so dass die Anwendung von den Lernenden innerhalb von etwa 40 Unterrichtsstunden programmiert werden kann. In Hinblick auf die Zweckmäßigkeit der gewählten Aufteilung kann es durchaus unterschiedliche Meinungen geben. Da der gesamte, weitgehend kommentierte Quellcode der getesteten und funktionsfähigen Demoanwendung vorliegt, kann jederzeit von dem vorgeschlagenen Weg abgewichen werden. Lehrkraft als Berater Unabdingbar ist allerdings, dass die Lehrperson den Code und die Funktionsweise der Demoanwendung sehr gut kennt, um den Lernenden nötigenfalls Hinweise und Hilfestellungen geben zu können. Freier Aufbau der Implementierungen möglich Es ist dagegen nicht notwendig, dass die Schülerinnen und Schüler den Code der Demoanwendung 1:1 reproduzieren. Sowohl serverseitig als auch clientseitig sind, bedingt durch den Sprachumfang von JavaScript und PHP, viele unterschiedliche Implementierungen denkbar.

Der erste Teil der dreiteiligen Unterrichtssequenz befasst sich mit der Erstellung der aktiven grafischen Benutzerschnittstelle mithilfe von XHTML, CSS und JavaScript. Bei der folgenden Unterrichtseinheit handelt es sich um den ersten von drei Teilen einer umfangreichen handlungsorientierten Unterrichtssequenz, deren Gegenstand die Entwicklung und Umsetzung einer AJAX-unterstützten Webanwendung nach dem Model-View-Controller Prinzip ist. Als Beispiel dient das ebenso bekannte wie einfache Spiel "Tic Tac Toe". Die Lernenden implementieren eine komplexe Webanwendung, indem sie moderne Internet-Technologien und Software-Werkzeuge zielorientiert miteinander kombinieren und anwenden. Schwerpunkte Der erste Teil der Unterrichtssequenz hat zwei Schwerpunkte: Zum einen geht es um die Beschaffung und Konfiguration der erforderlichen Entwicklungswerkzeuge, zum anderen soll die grafische Benutzerschnittstelle so vollständig wie möglich implementiert werden. Dazu gehört die statische Strukturierung und Formatierung der Seite mit XHTML und CSS sowie die dynamische Umschaltung zwischen verschiedenen Ansichten (Registrierungsdialog und Logindialog) mit JavaScript. Umsetzung Die Implementierung soll von den Schülerinnen und Schülern weitgehend selbstständig mithilfe der zur Verfügung stehenden Informationsquellen erfolgen. In Bezug auf die konkrete Gestaltung, zum Beispiel der Farben, Rahmen, Positionierung, werden keine zwingenden Vorgaben gemacht. Hier dürfen die Lernenden ihre Kreativität ausleben. Abhängig von der Leistungsfähigkeit der Lerngruppe kann die Lehrperson situationsabhängig entscheiden, ob Teile der Demoanwendung vorgegeben werden. Ablauf der Unterrichtseinheit Entwicklung der Webanwendung Die Schülerinnen und Schüler beschäftigen sich mit der Struktur einer Webanwendung und lernen die vom Autor empfohlene Konfiguration kennen. Das User Interface Die Schülerinnen und Schüler schauen sich die Demoanwendung an, anhand derer sie selbstständig eine Benutzerschnittstelle erstellen. Fachkompetenz Die Schülerinnen und Schüler sollen die Benutzerschnittstelle mithilfe geeigneter XHTML-Elemente strukturieren. die Benutzerschnittstelle mit Cascading Style Sheets (CSS) formatieren. Benutzerinteraktionen mithilfe von Event Handlern und dem Document Object Model (DOM) implementieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. die erforderlichen Entwicklungswerkzeuge beschaffen, konfigurieren und benutzen. Thema AJAX I: Realisierung der grafischen Benutzerschnittstelle 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 I Um sicherzustellen, dass die Lerngruppe die grundsätzliche Funktionsweise einer Webanwendung versteht und erläutern kann, dient die Aufgabe auf Arbeitsblatt 1. Komponenten Die Schülerinnen und Schüler sollen sich über die für das Projekt erforderliche Entwicklungs- und Support-Software Gedanken machen. Dabei stellen sie bereits die ersten Planungsüberlegungen für die spätere Realisierung an. Als Grundlage für die Überlegungen dient das Ergebnis der ersten Aufgabe und die folgende Aufgabenstellung. Empfohlene Konfiguration Natürlich gibt es eine Vielzahl von Möglichkeiten, eine leistungsstarke Entwicklungsplattform zu konfigurieren. Die Demoversion der Anwendung wurde jedenfalls unter Windows XP mithilfe der folgenden lizenzfreien Komponenten erstellt: XAMPP Dieses Softwarepaket enthält neben einigen anderen Anwendungen einen Apache Webserver, einen PHP Interpreter, ein MySQL Datenbankmanagementsystem und die Webanwendung phpMyAdmin zur manuellen Datenbankadministration. FFW Firefox Webbrowser mit den Extensions IE Tab, Firebug und Web Developer: Der bei der Firefox-Installation optionale DOM Inspector muss aktiviert werden (benutzerdefinierte Installation wählen). HTML-Editor Phase5 optional Versionsverwaltungssystem Subversion optional TortoiseSVN Eine grafische Benutzeroberfläche für Subversion (optional) XAMPP-Paket Das XAMPP-Paket bietet den Vorteil, dass der Webserver, das Datenbankmanagementsystem, der PHP-Interpreter und phpMyAdmin fertig konfiguriert und aufeinander abgestimmt installiert werden. Firefox Browser Der Internet Explorer ist für Entwicklungszwecke nur eingeschränkt zu gebrauchen. Stattdessen sollte der Firefox Browser benutzt werden, der die Installation von Extensions erlaubt, die unverzichtbar für die Entwicklung von Webanwendungen sind. Insbesondere handelt es sich dabei um den Debugger Firebug und die Web Developer Toolbox. Sehr wichtig ist auch der DOM-Inspector, mir dem man sich das Document Object Model einer XHTML-Seite anschauen kann. Mit der Extension IE-Tab kann bei Bedarf das Erscheinungsbild der Seite im Internet Explorer überprüft werden. HTML-Editor Phase5 Der optionale HTML-Editor Phase5 erleichtert die Arbeit unter anderem deshalb, weil er für HTML, JavaScript und PHP Syntax Highlighting Funktionen bereitstellt. Grundsätzlich würde aber ein normaler Texteditor wie zum Beispiel Notepad ausreichen. Subversion Schließlich sei das Versionsverwaltungssystem Subversion erwähnt, das als ausdrücklich empfohlene Option anzusehen ist. Insbesondere bei Anwendungen, die aus vielen unterschiedlichen Dateien bestehen, ist eine Versionskontrolle wichtig, um jederzeit in der Lage zu sein, alte Entwicklungsstadien wieder herzustellen. Demoversion Da der Quellcode der Anwendung in lesbarer Form vorliegt, sollte die Demoanwendung nicht auf den Rechnern der Lernenden installiert werden. Es ist somit erforderlich, dass die Lehrperson die Demoanwendung vorführt und die Funktionalität bis zur Durchführung der Anmeldung mit Hilfe eines Beamers demonstriert. Programmiersprachen Der XHTML-, CSS- und JavaScript-Sprachumfang ist außerordentlich groß. Aus diesem Grund ist es ratsam, den Unterricht auf die für die Anwendung erforderlichen Elemente, Styles und Funktionen zu beschränken. Das vorrangige Ziel der gesamten Unterrichtssequenz ist die Entwicklung der Webanwendung nach dem Model-View-Controller Konzept und weniger die Schaffung eines vollständigen Überblicks über die verwendeten Technologien. Analyse der Ansicht Im ersten Abschnitt sollen die Schülerinnen und Schüler aufgrund der Demoanwendung diejenigen Elemente identifizieren, aus denen die Ansicht besteht, und recherchieren, mit welchen Mitteln sie realisiert und gestaltet werden können. Implementierung der statischen Ansicht Jetzt geht es um die Implementierung und CSS-Formatierung der identifizierten XHTML-Elemente. Als Ergebnis sollen die Schülerinnen und Schüler individuelle XHTML-Dateien und Stylesheets produzieren. Der während dieser Phase produzierte Code ist keinesfalls als endgültig aufzufassen. Es wird im Laufe der weiteren Entwicklung oftmals erforderlich sein, ihn zu modifizieren, zu erweitern oder neu zu strukturieren. Dieses so genannte Refactoring ist gängige Praxis in der Softwareentwicklung. Umschalten zwischen Registrierungs- und Logindialog Die Ansicht existiert nun in statischer Form. Damit können jetzt die ersten dynamischen Funktionalitäten eingebaut werden, wobei die Schülerinnen und Schüler zum ersten Mal mit dem Document Object Model, JavaScript, Events und Event Handlern konfrontiert werden. Die Anwendung besitzt drei unterschiedliche Teilansichten, nämlich den Registrierungsdialog, den Logindialog und das Spielfeld nach erfolgreicher Anmeldung. Zwischen diesen Ansichten ist zustands- beziehungsweise benutzerabhängig umzuschalten. Die von den Schülerinnen und Schülern zu diesem Zweck zu entwickelnden JavaScript-Funktionen werden in eine Datei util.js ausgelagert.

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.