Webshop & Co: How to do

Transkript

1 Computer-Supported Learning Research Group Prof. Dr. U. Schroeder RWTH Aachen Webshop & Co: How to do (Was steckt hinter dynamischen Internetseiten?) Ein Modul für das Schülerlabor Informatik InfoSphere- an der RWTH Aachen Verfasser: Marco Kraß Marc-Christoph Gerasch Eiko Schuddebeurs-Kerinnis Kurz-Info: Informatischer Inhalt: DYNAMISCHE WEBPROGRAMMIERUNG Jahrgangsstufe: 8 BIS 9 Vorwissen: HTML, CSS

2 Inhaltsverzeichnis Kurzinformationen für die Lehrkraft. 2 Modulbeschreibung: Lernziele. 3 Fachliche Analyse. 4 Einordnung in gesetzliche Rahmenbedingungen 4 Benötigte unterrichtliche Voraussetzungen.. 5 Verlaufsplan... 6 Detaillierte Modulbeschreibung.. 8 Quellenverzeichnis...10 Anhang...12 Seite 1

3 Kurzinformation für die Lehrkraft Titel: Webshop & Co HOW TO DO Modul-Bild Schulstufe: Mittelstufe optimale Jahrgangsstufe: Klasse 8 bis 9 Themenbereich: JavaScript, PHP, SQL, Datenbanken, Webtechnologien, HTML, Webprogrammierung, Webshop EINORDNUNG IN GESETZLICHE RAHMENBEDINGUNGEN Lehrplan NRW: Anknüpfungspunkt ist nach der Lernreihe Einführung in HTML und CSS Ende der Klasse 8, Anfang Klasse 9. Das Modul ist eine Heranführung an das nächste Lernthema (dynamische Webseiten mit PHP und SQL) Bildungsstandards der GI: Die Hauptaufgaben des Moduls sind die Modifizierung und Ergänzung der Quelltexte von Programmen durch Nutzung diverser Programmiersprachen nach Vorgaben (Modellieren und Konstruieren, Strukturieren und Vernetzen) sowie das Kooperieren in Projektarbeit, um ein informatisches Problem zu lösen (Kommunizieren und Kooperieren). Einbindung in den Unterricht: Einstieg in dynamische Webprogrammierung (HTML) Vorkenntnisse: HTML, CSS Dauer: 4 Stunden Inhaltsbeschreibung: Dieses Modul zum Thema Webtechnologien und Webprogrammierung gibt einen Blick hinter die Kulissen von Webshops und allgemeinen Funktionen dynamischer Websites. In einer ersten Phase erkunden die Schülerinnen und Schüler (SuS) die Einsatzgebiete der verschiedenen Websprachen und deren Zusammenspiel anhand eines Produktkreislaufs. Dabei verfolgen die SuS eine http-anfrage, nachdem in einem Browser auf einen Link geklickt wurde, durch das Netz. Dabei sollen an verschiedenen Stationen Aufgaben zur Funktion der jeweiligen Station bearbeitet werden. Nach einer Ergebnissicherung in Form eines Merkblattes, folgt eine vertiefende Arbeitsphase in der ein Webshop-Grundgerüst mit dem Vorwissen der SuS individuell durch HTML und CSS gestaltet wird. Dynamische Elemente, für die vorbereitete Codebausteine zur Verfügung stehen, sollen erkundet und eingesetzt werden. Somit wird der Umgang mit bestehenden zum Beispiel JavaScripten erlernt. Als Abschluss stellen die einzelnen Teams ihre Ergebnisse kurz der Gruppe vor. Seite 2

4 LERNZIELE 1. Phase (Einarbeitungsphase) Die SuS sollen Webtechnologien definieren können. Die SuS sollen die Begriffe Clientseitig, Serverseitig, Client- Server Modell, SQL kennen. Die SuS sollen die im Produktkreislauf kennengelernten Webtechnologien (Datenbank, Server, HTML-Builder, Webbrowser) benennen und deren Funktionsweisen erklären können. 2. Phase (Vertiefungsphase) Die SuS können Eigenschaften von HTML, JavaScript und PHP und deren Einsatzgebiete benennen. Die SuS können die grundlegende Funktionseinbindung und deren Syntax für JavaScript und PHP in HTML wiedergeben. Die SuS sind in der Lage vorgefertigte Funktionen der oben genannten (Programmier-) Sprachen in anderen Kontexten zu benutzen. Die SuS sind in der Lage ein HTML-Grundgerüst mit Hilfe von CSS zu verändern und dabei den Inhalt (PHP und JavaScript Code) so zu belassen wie er ist. Die SuS kennen die Vor- und Nachteile statischer und dynamischer Programmierung und können diese beschreiben. Die SuS haben einen Überblick darüber, wie Onlineshops (oder auch andere datenbankbasierten Webseiten) aufgebaut sind und haben die Funktionsweise und das Zusammenspiel der einzelnen Bestandteile verstanden, so dass sie den gesamten Ablauf von Onlineshops erklären können. FACHLICHE ANALYSE In diesem Modul sind grundlegende HTML und CSS Kenntnisse sehr wichtig, da die SuS, aufbauend auf diesem Wissen, einen eigenen Web-Shop zusammensetzen sollen. Das Modul selber beschäftigt sich mit der Funktionsweise von Webtechnologien. Darunter fallen die Funktionsweise und der Aufbau von SQL Datenbanken und Servern, sowie das Zusammenspiel zwischen Client und Server (Client-Server Modell). Desweiteren dreht es sich um die Einsatzgebiete und grundlegende Syntax der (Programmier-)Sprachen PHP, JavaScript, HTML, SQL und die Verzahnung dieser. Seite 3

5 EINORDNUNG IN GESETZLICHE RAHMENBEDINGUNGEN Bildungsstandards der GI Modellieren und Konstruieren Ein Informatikmodell gewinnen: Die SuS werden mit einem Problem konfrontiert und durch eine anschließende Aufgabenstellung dazu aufgefordert, eine reale Situation mit Hilfe der Nutzung verschiedener und geeigneter Programmiersprachen zu lösen und darzustellen. Dazu müssen sie die Situation strukturieren und abstrahieren. Nach der Reduzierung des Problems auf eine programmierbare Ebene wird in einer ersten Phase des Moduls in Gruppen herausgefunden, welche Anforderungen und Schwierigkeiten bei der Umsetzung vorhanden sind. Die Schwierigkeiten sollten nach dieser Phase dann behoben sein. Strukturieren und Vernetzen Die SuS bekommen während des Moduls die Aufgabe auf Basis von HTML und CSS die Strukturen und Funktionsweisen neuer Programmiersprachen zu erlernen. Der wesentliche Aspekt ist dabei die Verknüpfung und Integration der neuen Programmiersprachen in die bereits erlernten. Somit sollen die SuS informatischen Inhalten nutzen, um Neues mit Bekanntem zu verknüpfen. Kommunizieren und kooperieren Die SuS müssen während der Gruppenarbeitsphasen Projekte bearbeiten und sie versuchen auch fertigzustellen. Dabei sind sie darauf angewiesen die, in diesen Projekten aufkommende informatischen, Probleme in Teamarbeit zu bearbeiten und zu lösen. So kommunizieren die SuS strukturiert über informatische Sachverhalte im Team und können gleichzeitig ihre Kooperationsfähigkeit beim Arbeiten im Team ausbauen. Durch das Ausfüllen eines Merkblatts zur Ergebnissicherung dokumentiert jede Gruppe während der Projektarbeit ihre Ergebnisse Zum Ende jeder Arbeitsphase reflektieren die SuS die Arbeitsphase und die Ergebnisse. Am Ende des Moduls soll eine Gesamtreflexion vorgenommen werden. Darstellen und Interpretieren Da die SuS viele Modulinhalte eigenständig erarbeiten sollen, liegen eine Reihe von Arbeitsblättern bereit. Durch die Nutzung der bereitgestellten Materialien sollen die SuS selbstständig neue informatische Inhalte erarbeiten. Des Weiteren stellt jede Gruppe ihre in der Projektarbeit erarbeiteten Ergebnisse sachgerecht dar. Seite 4

6 BENÖTIGTE UNTERRICHTLICHE VORAUSSETZUNGEN HTML o Grundlagen Bild einbinden Link kreieren Tabelle bauen DIV- Blöcke o CSS Formatierungen Text Tabellen Bilder Rahmen Grundlegende Erfahrung im Umgang mit dem Internet o Was ist das Internet? o Wie rufe ich eine Seite auf? o Wo finde ich das Menü einer Seite und wie bediene ich es? gezielte Recherche im Internet EINBETTUNG IN DEN SCHULUNTERRICHT Das Modul kann als Schlusspunkt in einer Unterrichtsreihe, die sich mit HTML und CSS beschäftigt, genutzt werden. Für die SuS, die über das Modul hinaus Interesse an den Themen entwickelt haben und dieses zu Hause vertiefen möchten, werden zur gezielte Nachbereitung Quellen zu Verfügung gestellt. Es ist denkbar, als weiterführende Aufgabe für zu Hause die Erstellung einer eigenen Homepage zu empfehlen. DIDAKTISCH/METHODISCHE SCHWERPUNKTSETZUNG Das Prinzip des aktiven Lernens ist Grundlage des gesamten InfoSphere und damit auch selbstverständlich Grundlage dieses Moduls. In allen Phasen wird Wert darauf gelegt, dass die SuS selbst aktiv sind. Sei es beispielsweise bei der Durchführung der E-Learning-Einheit und die anschließende Fertigstellung eines Merkblattes oder auch beim Zusammensetzen der Codebausteine Seite 5

7 in der Vertiefungsphase. Immer wieder müssen die SuS selbst aktiv werden. Das aktive Lernen geschieht sowohl gemeinsam mit anderen SuS in einer Gruppe, als auch in Einzelarbeit. Bei der Gestaltung des eigenen Webshops haben die SuS gemäß des Integrationsprinzips die Aufgabe, ihre HTML- und CSS-Kenntnisse zu verwenden. So können sie das neu erlernte Wissen mit dem Wissen verknüpfen, was sie bereits im Unterricht erworben haben. Durch Veranschaulichung wird der Schwierigkeitsgrad reduziert. Gerade in der Einführungsphase des Moduls wird den SuS auf eine einfache Art und Weise verdeutlicht, wie beispielsweise der detaillierte Ablauf des Client-Server-Prinzips ist. Im Allgemeinen werden die Lerninhalte vereinfacht dargestellt, um die komplexe Thematik angemessen vermitteln zu können (Prinzip der Stufenmäßigkeit). Das Prinzip der Lebensnähe und Aktualität ist in diesem Modul ebenfalls integriert, da viele SuS das Internet nutzen, um beispielsweise in Webshops einzukaufen, den Routenplaner zu nutzen oder mit Freunden in sozialen Netzwerken zu kommunizieren. Der generelle Aufbau des Moduls sorgt für einen sachstrukturellen Aufbau, bei dem der rote Faden jederzeit für die Teilnehmer erkennbar ist. Durch den Einleitungsvortrag zu Beginn des Moduls werden die SuS nicht nur für das Modul motiviert, sondern durch die Vorstellung konkreter Beispiele wird ihnen nach dem Prinzip der Zielvorstellung das Ziel des Moduls mitgeteilt. BEGRÜNDUNG DES METHODEN- UND MEDIENEINSATZES In dem Modul wird, wie bei allen InfoSphere-Modulen, darauf Wert gelegt, dass die SuS selber aktiv entwickeln können. Diesem Anspruch werden wir durch die Gruppenarbeitsphasen, in denen die SuS mit vielen verschiedenen Medien und Materialien in Berührung kommen, gerecht. In den Phasen, in denen die Gruppenarbeiten nicht sinnvoll sind, werden die SuS durch aktive Mitarbeit in Unterrichtsgesprächen eingebunden. Bei der Medienwahl haben wir uns hauptsächlich für den Einsatz von Beamer, PC und Arbeitsblättern entschieden. Der Beamer wird in erster Linie dazu benötigt, den SuS in Kurzpräsentationen zu Beginn der Einführungs- und Vertiefungsphase, in denen sie aktiv mitarbeiten sollen, den fachlichen Inhalt darzustellen und sie gleichzeitig zu motivieren. Die elearning-einheit während der Einführungsphase wird mit dem PC durchgeführt, bevor von den SuS zur Ergebnissicherung das Merkblatt vervollständigt wird. In der Vertiefungsphase wird nach einer Präsentation über die Grundlagen der verwendeten Programmiersprachen JavaScript und PHP und mit Hilfe von Merkblättern das Wissen zu vorgefertigten Funktionen der Programmiersprachen vertieft. Mit Hilfe des Phase 5-Editor, der sich Seite 6

8 besonders gut dafür eignet, vorgefertigte Funktionen als Codebausteine vor zu implementieren, wird ein vorgefertigtes Grundgerüst eines Webshops gestaltet. In das Grundgerüst können die SuS die vorimplementierten Funktionen an richtiger Stelle einbinden und den Webshop mit ihren HTML- und CSS-Kenntnissen gestalten. In einem letzten Arbeitsschritt stellen die SuS ihre selbst kreierten Webshops vor. VERLAUFSPLAN Phase Lerninhalte Zeitliche Einschätz ung Methode/ Phasenbezug Materialien Ziel Einleitung/ Motivation Kurze Übersicht über Ablauf und Vorstellung Webtechnologien/ - programmierung, Motivation durch Alltagsbezug 10 min Lehrerpräsentation mit Schülerdiskussion Beamer SuS erhalten groben Überblick über das Thema und Begrifflichkeiten, Problem wird deutlich Erarbeitung mittels elearning Einheit elearning-einheit (Produktkreislauf) zur Erarbeitung der Funktionen und Aufgaben der verschiedenen Webtechnologien 60 min Entdecken lassendes Lernen (Gruppenarbeit) Lückentext Merkblatt Produktkr eislauf (AB, PC Browsera nwengun g, Merkblatt) SuS lernen das Zusammenwirken der verschiedenen Webtechnologien Ergebnissich erung Zusammentragen der aus dem Spiel gewonnen Informationen über Funktionen und Aufgaben der verschiedenen Webtechnologien. 15 min Plenumsdiskussion und Abgleich der Ergebnisse aus dem Produktkreislauf. AB, Beamer Abschluss des ersten Modulteils (Lückentext) Pause 15 min Einführung in die Vertiefungsp hase Motivation zur Nutzung von dynamischen Komponenten bei der Webprogrammierung 10 min Lehrerpräsentation Beamer Motivation Seite 7

9 Vertiefungsp hase Vertiefung des Verständnisses der Aufgaben von PHP, JavaScript etc. und deren Verwendung 90 min Praktisches Erarbeiten in Partnerarbeit/ Kleingruppen PCs mit XAMPP und Phase 5 Eigenes Projekt wird mit vorgefertigten Codebausteinen erstellt Erkennen der Funktion und Zuordnung (welche Sprache) der jeweiligen Codebausteine. Entdecken erster Befehle der jeweiligen Sprachen. Codebausteine kombinieren/ Funktionen anderer Autoren verwenden. Fertigstellung des eigenen Projektes Abschlusspräsentation Demonstration und Diskussion der Ergebnisse der Vertiefungsphase, Teilen der gemachten Erfahrungen, Schwierigkeiten, Möglichkeiten 50 min SuS-Vortrag/ Diskussion (Bezug auf alle Phasen) Beamer, etc. Beide Phasen werden nochmal reflektiert, ggf. Vorstellung für Eltern Motivierender Ausblick Seite 8

10 DETAILLIERTE MODULBESCHREIBUNG Das Modul wird durch einen Vortrag der Betreuer eingeleitet. Die Motivation wird hierbei durch lebensnahe Beispiele aus dem Alltag der SuS erreicht, woraufhin bereits vorhandenes Vorwissen der SuS über Webtechnologien gemeinsam zusammengetragen wird. Es soll vermittelt werden, was die SuS an diesem Tag erwartet und in diesem Zusammenhang ein Rahmen abgesteckt werden, wobei es sich bei Webtechnologien und dynamischer Webprogrammierung handelt. Als nächstes gehen die SuS in Gruppen von 2-5 Personen weiter zu Tonys Produktkreislauf, einer mit Arbeitsblättern begleiteten elearning-einheit. Hier sollen sie die verschiedenen Stationen ablaufen, die auch eine Produktanfrage, nachdem in einem Onlineshop auf ein Produkt geklickt wurde, durchläuft. Die verschiedenen Stationen sind: Browser, Server, Datenbank, HTML-Builder (und wieder Browser). Am Anfang liegt für jeden SuS ein Merkblatt bereit. Das Merkblatt müssen die SuS selber ausfüllen, daher ist dieses voller Textlücken und Fragen. Die Antworten finden die SuS unter anderem in den Informationsblättern an den einzelnen Stationen. Beim Browser bekommen die SuS eine Produktanfrage und Informationen über Webbrowser. Am Server warten auf sie ein kleines SQL- Tutorium und eine Aufgabe dazu. Das SQL-Tutorium umfasst Informationen zum Aufbau einer SQL- Anfrage und Datenbank. Vom Server geht es weiter zur Datenbank. Hier soll von den SuS die richtige SQL-Anfragezeile zu ihrem Produkt in den Computer eingegeben werden. Daraufhin suchen sie in der anfassbaren Datenbank ihr Produkt, welches in Form von Codeschnipseln bereit liegt. Diese müssen sie an der letzten Station, dem HTML-Builder, in HTML-Tags einbetten, wodurch sich ein Code ergibt der in der Browseranwendung eingegeben wird. Das Ergebnis bekommen die SuS dann in der Browseranwendung angezeigt. Zum Abschluss der ersten Phase findet eine Ergebnissicherung statt. Die SuS sollten sich bereits über den Lückentext in ihrer Gruppe ausgetauscht haben. Der Lückentext wird dann im Plenum mit den SuS zusammen besprochen und so das Wissen, dass sie über Webtechnologien gewonnen haben, zusammentragen und reflektiert. Hiernach gibt es eine kurze Pause bevor es mit der zweiten Phase weitergeht. Die Vertiefungsphase, oder auch zweite Phase, wird wieder durch einen lehrerorientierten Vortrag eingeleitet. Der Inhalt dieses Vortrags ist grundlegendes Wissen über die Verwendung der Programmiersprachen JavaScript und PHP. Im Anschluss bekommen die SuS nochmals ein Blatt mit weitergehenden Informationen zu den Programmiersprachen sowie vorgefertigten Funktionen, die sie im Folgenden in eine eigene Website einbauen sollen. Dazu finden sie sich in 2er Teams zusammen, bearbeiten ein Grundgerüst eines Webshops nach ihren Vorlieben und lernen so Webseiten dynamisch zu gestalten und Inhalte in ein HTML-Layout einzufügen, welches sie mit ihrem Vorwissen, nach Wunsch verändern können. Als Hilfestellung bekommen die SuS eine Reihe von Blättern die ihnen nochmal die verschiedenen HTML und CSS Befehle erläutern, sofern sie dies benötigen. Im Editor Phase 5 wurden im Voraus bereits die erwähnten Codebausteine vorimplementiert, sodass Seite 9

11 diese einfach integriert werden können. Ziel soll es sein, den SuS neben der Auffrischung der Kenntnisse über HTML und CSS, ein Gefühl für die Verwendung dynamischer Elemente, die bereits implementiert wurden, zu geben. Im Internet gibt es eine Vielzahl von bereitgestellten Funktionen die, mit dem hier gelernten Grundlagenwissen, integriert werden können. Außerdem zeigt es den SuS eine für sie neue Form der Webprogrammierung auf, in der das Layout losgelöst vom Inhalt erstellt wird. Dieser sogenannte Content-Management-System -Aufbau, ist die Grundlage der modernen Webprogrammierung und öffnet den SuS neue Möglichkeiten zur professionellen Erstellung ihrer eigenen Webseiten. Zum Abschluss des Moduls stellen die SuS ihr Projekt am Beamer vor. Daraufhin folgt noch eine geleitete Diskussion über das Ergebnis der Vertiefungsphase, die gemachten Erfahrungen und die Schwierigkeiten. Besonders wird hier Wert auf das übergreifende Wissen über die Anwendung im professionellen Bereich, wie am Ende des letzten Abschnitts erwähnt, gelegt. Die Erkenntnis, in diesem Modul einen Einblick in die Grundlagen der professionellen Webprogrammierung erhalten zu haben, mit deren Hilfe sie ihre eigene Webseite professioneller gestalten können, soll die SuS zur selbständigen Weiterbildung motivieren. Ein paar Beispiele dazu geben einen Ausblick in die Vielzahl der Möglichkeiten, die ihnen mit ein wenig Engagement offen stehen. Seite 10

12 QUELLENVERZEICHNIS Textquellen: - Browser: o o - Server o Bildquellen: - Browser o m05xj9exthu/tt5miutp0vi/aaaaaaaaaja/pufu5isaeic/s1600/lehrer%25255b1%25 255D.gif o 9wzsgB2FhM8/T2w9HsqWrKI/AAAAAAAABSk/lj1jCoWUAj4/s1600/Web_Browsers_ War.jpg - Server o o o - Datenbank o - Tony o s1600/nerd.jpg - SQL o o 2.html - HTML-builder: o - Präsentationen und Merkblätter o Einleitung jpg Seite 11

13 o _webseiten.jpg g Vertiefung omepage&gclid=cklv26u56lmcfyjp3godwgoawq enkurs.pdf home.arcor.de/san-solty/html%20befehle.doc lmr.monheim.de/aktuelles/berichte2007/.../liste%20css-befehle.doc Seite 12

14 ANHANG TEIL 1: ORGANISATORISCHES Zugehörige Materialien Organisatorisches o Ablaufplan o Installationsanleitung für Xampp und Phase 5 Arbeitsblätter o 1.1. M1 Merkblatt-Produktkreislauf o 1.2. B1 Produktanfrage KochbuchDesTodes o 1.2. B1 Produktanfrage iphone o 1.2. B1 Produktanfrage Samsung Galaxy o 1.3. D1 Datenbanken und SQL o 1.4. H1 Der HTMLbuilder o 2.1. V1 Merkblatt_Vertiefung o 2.2. V2 Anleitung zum Phase 5 Editor o 2.3. V3 Aufgaben zum Einstieg o 2.4. V4 Erläuterung Codebausteine o 2.5. V5 CSS_Grundbefehle o 2.6. V6 HTML_GrundBefehle Materialien o PuzzleTeile o EinleitungsVortragPhase1 o EinleitungsVortragPhase2(Betreuerversion) o EinleitungsVortragPhase2(Vortragsversion) o ErgbnissicherungPhase1(Gestaltungsmöglichkeit) o ErgebnissicherungPhase2(Gestaltungsmöglichkeit) o ErgebnissicherungPhase2Leitfragen o Portable Version von XAMPP mit HTML-Grundgerüst Web-Shop Browseranwendung Insert für Datenbank Lösungsdokumente für Betreuer o M1 Merkblatt-Produktkreislauf (Lösung) o LösungenFürDieBrowseranwendung Seite 13

15 Webshop und Co. Ablaufplan Einleitung - Begrüßung - Einleitungsvortrag (Webshop+Co_new.pptx) - Einteilung der Kleingruppen für die E-Learning Einheit E-Learning Einheit - Merkblatt (Blatt M1) - Arbeitsblätter sowie Seiten im Browser Browser home (Einleitung) browser1... browser4 Browser server server2 server3 Blatt Produkanfrage (B1) Browser Server HTML Builder Datenbank Browser htmlbuilder Browser datenbank Blatt HTML Builder Infoblatt (H1) Puzzle Blatt Datenbanken und SQL (D1) Browser htmlbuilder2 puzzlecheck (Anzeige des Produkts) backtobrwoser Anzeige im Shop Browser datenbank2 1

16 Webshop und Co. Ablaufplan Ergebnissicherung E-Learning Einheit - Ergebnissicherung PPP (Ergebnissicherung.pptx) o Besprechung der Erfahrungen o Vergleich des Merkblattes Pause Vertiefung Einleitung Vertiefung - Vortrag (Webshop und Co_Vertiefung_new(Vortragsversion)) o Kurze Information zu den verwendeten Programmiersprachen(Beispielhaft) o Einteilung Teams zur Programmierung - Merkblatt (V1) Erstellung der Webseiten - Anleitung zum Phase 5 Editor (V2) - Aufgaben zum Einstieg (V3) - Erläuterung Codebausteine (V4) - HTML/CSS Nachschlagwerk(V5/V6) Abschluss Kurzpräsentation der Ergebnisse - Ca. 5 min pro Gruppe o Kurze Erläuterung der Besonderheiten/eingesetzter Elemente/Farbwahl etc. o Hoffentlich sehr viele unterschiedliche Websites wenig Wiederholung unter den Gruppen Diskussion - Leitfragen zur Diskussion (Leitfragen für die Gruppendiskussion.docx) o Persönlich interessanteste Erkenntnisse o Schwierigkeiten o Verbesserungsmöglichkeiten - Ausblick und Informationen zur selbstständigen Weiterbildung (Links.docx) 2

17 Installationsanleitung Xampp/Phase 5 Xampp zur Installation von Xampp muss lediglich die Datei "setup_xampp.bat", im Ordner Xampp, ausgeführt werden, um die Umgebungsvariablen entsprechend zu setzen. Danach kann über "xampp_control.exe" ein Fenster geöffnet werden in dem dann Apache und MySQL gestartet werden können. Phase 5 Phase 5 benötigt keine Installation, einfach die "htmledit.exe" öffnen. Damit die SuS beim auswählen des Webshop projektes direkt die Dateien zur verfügung haben, muss der Pfad unter "Projekt --> Einstellungen --> Lokale Verzeichnisse --> Stammordner" auf den Projektordner xampp --> htdocs --> grundgeruest gesetzt werden. Leider lässt das System hier keine relativen Pfade zu, daher muss es bei jedem PC erneut gemacht werden.

18 ANHANG TEIL 2: ARBEITSBLÄTTER

19 Webshop und Co. Merkblatt Webtechnolgien Merkblatt - Webtechnologien In diesem Modul beschäftigen wir uns mit.. Das ist das grundlegende Modell in unserem Modul. Es dient beispielsweise zum besseren Verständnis einer Produktanfrage. Eine erfolgreiche Produktbestellung läuft wie folgt ab: Der ist eine Software, um im World Wide Web und allgemein Dokumente und Daten darzustellen. Neben - Dokumenten kann der Browser unter anderem auch Bilder oder pdf - Dateien visualisieren. Der Browser befinden sich im Client-Server Modell auf der. Vom Browser werden gesendet. Damit nun der Inhalt einer bestimmten Internetseite, definiert durch ihre Webadresse im dargestellt werden kann, kommuniziert dieser mit dem Beim Server unterscheidet man zwischen Hardware und Aus Hardwaresicht ist ein Server ein mehrere Server (Software) laufen., auf dem ein oder 1

20 Webshop und Co. Merkblatt Webtechnolgien Ein Server aus (Service) anbietet. ist ein Programm, das einen Dienst Im Rahmen des kann ein anderes Programm, der, diesen Dienst nutzen. Der Server ist in Bereitschaft, um jederzeit auf die Kontaktaufnahme eines reagieren zu können. Die Regeln für die Kommunikation (z.b Format) nennt man und sind eindeutig festgelegt. Es können mehrere verschiedene auf einem laufen. Die dient zur geordneten Speicherung von und liegt auf dem. Die Verarbeitung von Daten erfolgt in der Regel mit Hilfe von. Um die vom geforderten Daten aus der Mit Hilfe des auszulesen, wird eine werden die gestellt. zusammengesetzt und dann vom zurück zum geschickt, der die gewünschte Internetseite bzw. das Produkt im Browser angezeigt bekommt. 2

21 Webshop und Co. Merkblatt Webtechnolgien Fazit: Der sendet eine Anfrage an den. Dieser startet eine an die Datenbank, um die vom geforderten aus der zu holen. Mittels des wird das zusammengepuzzelt und vom wieder an den gesendet. 3

22 Webshop & Co. B1 Produktanfrage Produktanfrage: IPhone GET /webshop/index.php?position=iphone HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.2; rv:16.0) Gecko/ Firefox/16.0 Connection: keep-alive In dem Kasten seht ihr wie eine http-anfrage aussieht, die der Browser losschickt. Was für uns von Interesse ist, sind die Informationen zu Host und Get. Mit Host wird hier die Adresse definiert, an die die Anfrage gesendet werden muss. Über Get teilt der Browser mit was genau er haben will, hier könnt ihr auch den Namen eures Produktes wiederfinden. Aufgabe: Was glaubt ihr, wohin die Anfrage vom Browser weiter geleitet werden muss? Welche Schritte sind notwendig, um das Produkt letztendlich auf dem Bildschirm anzeigen zu können? Notiert euch eure Vermutungen! Euch könnte der Text über Webbrowser auf der Rückseite weiterhelfen. Wenn ihr fertig seid, geht zur nächsten Station und klickt in der Browseranwendung auf den Button, der mittlerweile dort erschienen sein sollte. 1

23 Webshop & Co. B1 Produktanfrage 1. Station: Der Webbrowser Der Webbrowser ist eine Software, mit der ihr Webseiten darstellen könnt und die euch hilft die zahlreichen Funktionen des Internets zu nutzen. Ruft man einen Web-Link auf, wird eine Seite geladen, die im Browser auf dem Bildschirm dargestellt wird. Neben HTML-Seiten könnt ihr mit dem Browser auch noch weitere Dokumente darstellen, wie z.b. Bilder oder PDF-Dateien. Der Browser befindet sich auf der Client-Seite bzw. er ist ein Web-Client. Das heißt, dass der Browser eine Anwendung ist, die auf eurem Computer ausgeführt wird und nicht auf einem Webserver. Um einen Link zu öffnen kommuniziert der Browser für euch mit dem Server der jeweiligen Internetseite. Dies geschieht über eine http-anfrage an den Webserver. Der Browser kriegt daraufhin eine http-antwort zurück, welche die HTML- Dokumente mit dem HTML-Code überträgt. Diese Dokumente werden dann vom Browser verarbeitet und graphisch auf eurem Bildschirm dargestellt. http heißt ausgeschrieben hypertext transfer protocol und ist ein Standard für die Kommunikation zwischen Browser und Server. Ihr habt es vielleicht schon einmal am Anfang einer Internetadresse gesehen. 2

24 Webshop & Co. B1 Produktanfrage Produktanfrage: Kochbuch des Todes GET /webshop/index.php?position=kochbuch%20des%20todes HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.2; rv:16.0) Gecko/ Firefox/16.0 Connection: keep-alive In dem Kasten seht ihr wie eine http-anfrage aussieht, die der Browser losschickt. Was für uns von Interesse ist, sind die Informationen zu Host und Get. Mit Host wird hier die Adresse definiert, an die die Anfrage gesendet werden muss. Über Get teilt der Browser mit was genau er haben will, hier könnt ihr auch den Namen eures Produktes wiederfinden. Aufgabe: Was glaubt ihr, wohin die Anfrage vom Browser weiter geleitet werden muss? Welche Schritte sind notwendig, um das Produkt letztendlich auf dem Bildschirm anzeigen zu können? Notiert euch eure Vermutungen! Euch könnte der Text über Webbrowser auf der Rückseite weiterhelfen. Wenn ihr fertig seid, geht zur nächsten Station und klickt in der Browseranwendung auf den Button, der mittlerweile dort erschienen sein sollte. 1

25 Webshop & Co. B1 Produktanfrage 1. Station: Der Webbrowser Der Webbrowser ist eine Software, mit der ihr Webseiten darstellen könnt und die euch hilft die zahlreichen Funktionen des Internets zu nutzen. Ruft man einen Web-Link auf, wird eine Seite geladen, die im Browser auf dem Bildschirm dargestellt wird. Neben HTML-Seiten könnt ihr mit dem Browser auch noch weitere Dokumente darstellen, wie z.b. Bilder oder PDF-Dateien. Der Browser befindet sich auf der Client-Seite bzw. er ist ein Web-Client. Das heißt, dass der Browser eine Anwendung ist, die auf eurem Computer ausgeführt wird und nicht auf einem Webserver. Um einen Link zu öffnen kommuniziert der Browser für euch mit dem Server der jeweiligen Internetseite. Dies geschieht über eine http-anfrage an den Webserver. Der Browser kriegt daraufhin eine http-antwort zurück, welche die HTML- Dokumente mit dem HTML-Code überträgt. Diese Dokumente werden dann vom Browser verarbeitet und graphisch auf eurem Bildschirm dargestellt. http heißt ausgeschrieben hypertext transfer protocol und ist ein Standard für die Kommunikation zwischen Browser und Server. Ihr habt es vielleicht schon einmal am Anfang einer Internetadresse gesehen. 2