Unterrichtsmaterialien zum Thema "HTML"

  • Schulstufe
  • Klassenstufe
  • Schulform
  • Fach
  • Materialtyp
  • Quelle

Weiteres Unterrichtsmaterial finden Sie im Lehrer-Online-Shop.

104 Treffer zu "HTML"
Sortierung nach Datum / Relevanz
Kacheln     Liste

AJAX III: Clientseitige Funktionen

Unterrichtseinheit

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

  • Informationstechnik
  • Sekundarstufe II

AJAX II: Implementierung der serverseitigen Komponenten

Unterrichtseinheit

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.

  • Informationstechnik
  • Sekundarstufe II

Dynamische Arbeitsblätter mit 3D-Molekülen

Fachartikel

... In der Mathematik sind diese Materialien bereits weit verbreitet. Dort werden Geometrie-Applets in HTML-Seiten eingebunden. Das "biologisch-chemische Pendant" zur dynamischen Geometrie-Software ist der ...

  • Biologie  / Chemie

So kommen WebQuests in den Unterricht

Fachartikel

... sse sind nötig, um die WebQuest-Seiten zu gestalten. Dazu muss man sich zumindest ansatzweise mit HTML auskennen. Zum Veröffentlichen der WebQuests auf einer Homepage muss man mit einem Server kommunizieren ...

  • Fächerübergreifend