VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 5. Formulare und mehr



Ähnliche Dokumente
VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, Wirtschaftsinformatik, Statistik

PHP Einsteiger Tutorial Kapitel 4: Ein Kontaktformular in PHP Version 1.0 letzte Änderung:

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 5 Formulare

Schiller-Gymnasium Hof

Programmieren 2 (Prof. Hasbargen) Klausur

Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress.

Novell Client. Anleitung. zur Verfügung gestellt durch: ZID Dezentrale Systeme. Februar ZID Dezentrale Systeme

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick Parameterübergabe...

Einführung in PHP. (mit Aufgaben)

Web Visu Tutorial. Hipecs Web Visu. Übersicht

Anleitung für die Registrierung und das Einstellen von Angeboten

Artikel Schnittstelle über CSV

Einstellungen im Internet-Explorer (IE) (Stand 11/2013) für die Arbeit mit IOS2000 und DIALOG

Web-Kürzel. Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter

Anwendungsbeispiele Buchhaltung

mysql - Clients MySQL - Abfragen eine serverbasierenden Datenbank

Bedienungsanleitung für den SecureCourier

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Sich einen eigenen Blog anzulegen, ist gar nicht so schwer. Es gibt verschiedene Anbieter. ist einer davon.

GEONET Anleitung für Web-Autoren

Seriendruck mit der Codex-Software

Beispiel Shop-Eintrag Ladenlokal & Online-Shop im Verzeichnis 1

Formulare in html Bernd Bl umel Version: 1. April 2003

Anleitung, WebRecherche

Suche schlecht beschriftete Bilder mit Eigenen Abfragen

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: CF Carola Fichtner Web-Consulting

Erstellung von Reports mit Anwender-Dokumentation und System-Dokumentation in der ArtemiS SUITE (ab Version 5.0)

Anleitung zum Login. über die Mediteam- Homepage und zur Pflege von Praxisnachrichten

Windows. Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1

Stellen Sie bitte den Cursor in die Spalte B2 und rufen die Funktion Sverweis auf. Es öffnet sich folgendes Dialogfenster

Internationales Altkatholisches Laienforum

Agentur für Werbung & Internet. Schritt für Schritt: Newsletter mit WebEdition versenden

Benutzerhandbuch. Leitfaden zur Benutzung der Anwendung für sicheren Dateitransfer.

4.1 Wie bediene ich das Webportal?

Professionelle Seminare im Bereich MS-Office

Inhalt. 1 Einleitung AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER

Kurzinformation Zugang zur NOVA für dezentrale Administratoren

Hilfe zur Urlaubsplanung und Zeiterfassung

Zugriff auf Daten der Wago über eine Webseite

Anleitungen zum KMG- -Konto

COMPUTER MULTIMEDIA SERVICE

OS Anwendungsbeschreibung

Erstellen von x-y-diagrammen in OpenOffice.calc

SEMINAR Modifikation für die Nutzung des Community Builders

Live Update (Auto Update)

Abamsoft Finos im Zusammenspiel mit shop to date von DATA BECKER

Der Kalender im ipad

.htaccess HOWTO. zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage

Webalizer HOWTO. Stand:

IDEP / KN8 für WINDOWS. Schnellstart

Textgestaltung mit dem Editor TinyMCE Schritt für Schritt

Handbuch zur Anlage von Turnieren auf der NÖEV-Homepage

ecall Anleitung Outlook Mobile Service (OMS)

Einführung in die Scriptsprache PHP

ANLEITUNG PREMIUM-PROFIL

Mediator 9 - Lernprogramm

M. Graefenhan Übungen zu C. Blatt 3. Musterlösung

Wie benutzt man TortoiseSVN

Wordpress: Blogbeiträge richtig löschen, archivieren und weiterleiten

Erklärung zum Internet-Bestellschein

Tipps und Tricks zu den Updates

Internet und WWW Übungen

for ($i=1 ;$i<=25 ;$i++) { echo "$i "; }?> <br> <a href=" zur Index-Seite</a> </body> </html>

FTP-Server einrichten mit automatischem Datenupload für

Enigmail Konfiguration

Fotostammtisch-Schaumburg

Handbuch zum Excel Formular Editor

Anlegen eines DLRG Accounts

crm-now/ps Webforms Webdesigner Handbuch Erste Ausgabe

Beitragseinzüge mit SPG-Verein - Anleitung -

Anleitung: Sammel-Rechnungen für Lizenzen bei Swiss Basketball

S TAND N OVEMBE R 2012 HANDBUCH DUDLE.ELK-WUE.DE T E R M I N A B S P R A C H E N I N D E R L A N D E S K I R C H E

Installationsanweisung Gruppenzertifikat

Er musste so eingerichtet werden, dass das D-Laufwerk auf das E-Laufwerk gespiegelt

Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten

Objektorientierte Programmierung für Anfänger am Beispiel PHP

Einführung zum Arbeiten mit Microsoft Visual C Express Edition

Punkt 1 bis 11: -Anmeldung bei Schlecker und 1-8 -Herunterladen der Software

Anleitung: Webspace-Einrichtung

Wichtige Hinweise zu den neuen Orientierungshilfen der Architekten-/Objektplanerverträge

Registrierung am Elterninformationssysytem: ClaXss Infoline

Professionelle Seminare im Bereich MS-Office

Änderungsbeschreibung HWS32 SEPA Überweisungen

Lineargleichungssysteme: Additions-/ Subtraktionsverfahren

5. Übung: PHP-Grundlagen

HTML Formulare. Benutzerschnittstelle für interaktive Webseiten

Folgeanleitung für Klassenlehrer

Tutorial: Entlohnungsberechnung erstellen mit LibreOffice Calc 3.5

Beitragseinzüge mit SPG-Verein - Anleitung -

Intranet Moodle

Digitale Signatur - Anleitung zur Zertifizierung der eigenen -Adresse

FuxMedia Programm im Netzwerk einrichten am Beispiel von Windows 7

Einfügen von Bildern innerhalb eines Beitrages

Windows 7 Winbuilder USB Stick

Bauteilattribute als Sachdaten anzeigen

Ihre Interessentendatensätze bei inobroker. 1. Interessentendatensätze

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Quiz mit Google Docs erstellen

WordPress. Dokumentation

Transkript:

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 5 Formulare und mehr SS 2003

Inhaltsverzeichnis 5. Formulare und mehr...1 5.1. Formulare...1 5.1.1. Erstellen eines einfachen Formulars...1 5.1.1.1. Der action - Parameter...1 5.1.1.2. Der method - Parameter...1 5.1.1.3. Conainer - Elemente für Formulare...2 5.1.2. Aufgabe 1 Einfaches Formular mit Eingabefeld...2 5.1.3. Aufgabe 2 Formular mit Textfeld...3 5.1.4. Aufgabe 3 Formular mit Auswahlbox...4 5.1.5. Aufgabe 4 Formular mit Radiobuttons...4 5.1.6. Aufgabe 5 Checkboxen...5 5.1.7. Aufgabe 6 Elemente Gruppieren...6 5.1.8. Aufgabe 6 Daten des Formulars absenden...7 5.1.9. Aufgabe 7 Die Auswertungsseite...8 5.2. JavaScript die clientseitige Programmiersprache...9 5.2.1. JavaScript - Bereiche in HTML definieren...9 5.2.2. Das "Hello World" in JavaScript...10 5.2.3. Mouseover mit JavaScript...11 5.3. PHP - die Serverseitige Skriptsprache... 13 5.3.1. Hello World in PHP...13 5.3.2. Formular mit Auswertung in PHP...14 Uebung5.doc 16.07.2002 1

Formulare 5. Formulare und mehr 5.1. Formulare HTML stellt die Möglichkeit zur Verfügung mit Hilfe spezieller Tags Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeilige Textfelder Text eingeben, aus Listen Einträge auswählen und Buttons anklicken. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button Klicken, um das Formular abzusenden. Dazu muss beim Erstellen des Formulars angegeben werden, was mit den Daten des ausgefüllten Formulars geschehen soll. Die Daten können beispielsweise per E - Mail verschickt werden, oder über ein CGI - Programm auf dem Webserver weiterverarbeitet werden. Es greifen also zwei Mechanismen zusammen. Zum Einen wird eine HTML - Seite mit einem Formular zum Sammeln der Daten erzeugt, zum Anderen wird ein Programm oder Script benötigt, daß die Weiterverarbeitung vornimmt. 5.1.1. Erstellen eines einfachen Formulars Zunächst schauen wir uns mal den <form> - Container an, der das Formular enthält: <form action="url" method="get">... </form> 5.1.1.1. Der action - Parameter Zwei Parameter sind beim <form> - Tag anzugeben. Der action - Paramter enthält eine URL. Hier ist hinterlegt, welche Seite nach Abschicken des Formulars aufgerufen werden soll, bzw. welches Programm/ CGI-Skript die Verarbeitung der Daten vornehmen soll. 5.1.1.2. Der method - Parameter Eine weiterer Parameter ist der method - Parameter. Dabei bestimmen Sie, nach welcher HTTP- Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei Möglichkeiten: Bei method="get" werden die Daten des ausgefüllten Formulars als Parameter an die Aufrufadresse angehängt. Die Anfrage, die beim Server eintrifft, sieht dann beispielsweise so aus: http://www.meinserver.de/feedback.cgi?anwendername=thomas+kloepfer&text=das +ist+ein+kleiner+text. Bei method="post" werden die Daten des ausgefüllten Formulars vom Web-Server über den Standardeingabekanal zur Verfügung gestellt, und ein auswertendes CGI-Script muß die ankommenden Daten behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde (post = verschicken). Bei CGI-Scripts müssen Sie diese Methode auf jeden Fall dann verwenden, wenn das Script die POST-Methode verarbeitet, und wenn die Formulardaten zu umfangreich für die GET-Methode sind. Uebung5.doc 16.07.2002 1

Formulare 5.1.1.3. Conainer - Elemente für Formulare Folgende Container sind innerhalb des <form> - Containers möglich: <input>.. </input> Ein einfaches Eingabefeld <texarea>.. </texarea> Mehrzeiliges Texeingabefeld <select>.. <option>.. <option>.. </select> Listen - Auswahlbox <optgroup>.. </optgroup> Verschachtelte Auswahllisten (nicht zu empfehlen) <button>.. </button> Klick - Buttons <fieldset>.. </fieldset> zusammenfassen von Elementgruppen 5.1.2. Aufgabe 1 Einfaches Formular mit Eingabefeld Wir wollen zunächst ein einfache Formular mit nur zwei Eingabefeldern. Bei diesem Formular kümmern wir uns zunächst nicht um die Auswertung der Daten. Es geht hier erst einmal darum mit den Elementen von Formularen vertraut zu werden. Einfaches Formular mit zwei Eingabefeldern Erreicht wird das mit dem <form> - Container, der zwei <input> - Marker enthält. Der <input> - Marker besitzt noch folgende Parameter: name - Jedes Feld muß einen eindeutigen Namen haben, nur so kann hinterher die Eingabe weiterverarbeitet werden. mit dem Parameter name wird der Variablenname definiert, den die Eingabe aufnehmen soll. type - bestimmt den Typ des Eingabe - Elements. Möglich sind text password checkbox radio submit reset file hidden image button size - bestimmt die Größe des Eingabefeldes. maxlength - bestimmt die maximale Länge der eingegebenen Daten Uebung5.doc 16.07.2002 2

Formulare Die entsprechende Codesequenz für das Formular sieht wie folgt aus: <form action="auswertung.html" method="get"> <p>vorname:<br> <input name="vorname" type="text" size="30" maxlength="30"> </p> <p>zuname:<br> <input name="zuname" type="text" size="30" maxlength="40"> </p> </form> 5.1.3. Aufgabe 2 Formular mit Textfeld Wir wollen nun ein Formular mit einem mehrzeiligen Textfeld erstellen. Formular mit Textfeld Neben dem obligatorischen <form> - Container verwenden wir den <textarea> - Container. Der <textarea> - Tag hat folgende Parameter: name - Jedes Feld muß einen eindeutigen Namen haben. Das gilt natürlich auch für ein Textfeld. Analog zum Eingabefeld wird der hier vergebene Name zu der Variablen, der die Daten des Textfeldes aufnimmt. cols - enthält die Anzahl der Zeichen, die das Textfeld in der Breite anzeigen soll. rows - enthält die Anzahl der Zeilen, die das Texfeld in der Höhe anzeigen soll. Das entsprechende Codesegment: <form action="auswertung.html" method="get"> <p>textfeld:<br> <textarea name="texfeld_eingabe" cols="30" rows="5"> </textarea> </p> </form> Uebung5.doc 16.07.2002 3

Formulare 5.1.4. Aufgabe 3 Formular mit Auswahlbox Erstellen Sie ein Formular mit Auswahlbox: Formular mit Auswahlbox Hierzu verwenden Sie zwei verschachtelte Tags. Den <select> - Tag und den <option> - Tag. Beides sind Container. Der <select> - Container muß dabei die einzelnen <option> - Container enthalten. Jeder <option> - Container erzeugt dabei eine Zeile in der Auswahlbox. der <select> - Container besitzt neben dem obligatorischen name - Parameter einen Parameter size mit dem die Höhe der Auswahlbox festgesetz wird. In der Breite richtet sich die Auswahlbox nach der Länge des längsten Eintrages. Hier wieder das Codesegment: <select name="select_eingabe" size="3"> <option>schallplatte</option> <option>cassette</option> <option>cd</option> <option>dvd</option> <option>vhs</option> <option>minidisc</option> </select> 5.1.5. Aufgabe 4 Formular mit Radiobuttons Erstellen Sie folgendes Formular: Formular mit Radiobuttons Verwenden Sie den <input> -Marker mit dem Paramenter type="radio". Natürlich muß auch hier ein name - Parameter vorhanden sein. Zusätzlich ist aber jetzt noch ein value - Parameter nötig. Dieser Parameter gibt an, welcher Inhalt beim Auswählen in die name - Variable geladen werden soll. Uebung5.doc 16.07.2002 4

Formulare Hier die komplette Codesequenz: <input type="radio" name="rundfunksender" value="hr1"> HR 1<br> <input type="radio" name="rundfunksender" value="swr3"> SWR 3<br> <input type="radio" name="rundfunksender" value="dlf"> Deutschland Funk 5.1.6. Aufgabe 5 Checkboxen Erstellen Sie ein Formular mit Checkboxen: Formular mit Checkboxen Das funktioniert ganz analog zu den Radiobuttons. Ein Unterschied ist, daß Sie als Parameter type="checkbox" einstellen. Ausserden ist es ja jetzt möglich mehrere Checkboxen gleichzeitig auszuwählen, darum benötigen Sie auch mehrere verschiedene Variabelennamen (belag1..4), die sie jeweils über den name - Parameter angeben. Beachten Sie, daß Sie auch hier über den value - Parameter den Wert vorgeben müssen, der beim aktivieren der Checkbox übernommen werden soll. <input type="checkbox" name="belag1" value="salami"> Salami <br> <input type="checkbox" name="belag2" value="tomaten"> Tomaten<br> <input type="checkbox" name="belag3" value="pilze"> Pilze<br> <input type="checkbox" name="belag4" value="kaese"> Käse<br> Uebung5.doc 16.07.2002 5

Formulare 5.1.7. Aufgabe 6 Elemente Gruppieren Als nächstes wollen wir Elemente in einem Formular zu Gruppen Zusammenfassen. Das Formular soll in etwa so aussehen: Formular mit Gruppierung von Elementen Die einzelnen Felder für die Eingabe haben Sie ja schon kennengelernt. Es handelt sich um <input> - Marker mit dem Paramteter type="text". Die Gruppierung wird mit den Containern <fieldset> und <legelnd> erreicht. Alles was in einen <fieldset> - Container eingebettet ist wird zu einer Elementgruppe zusammen gefasst. In diesem Container wird eine weiterer Container <legend> plaziert, der die Beschriftung für die Elementgruppe enthält. Der Quellcode sieht wie folgt aus: <fieldset><legend><b>absender</b></legend> <p> Ihr Vorname:<br> <input type="text" size="40" maxlength="40" name="vorname"><br> Ihr Zuname:<br> <input type="text" size="40" maxlength="40" name="zuname"><br> </p> </fieldset> <fieldset> <legend><b>wunsch</b></legend> <p> Ihr Hauptwunsch:</br> <input type="text" size="40" maxlength="40" name="hauptwunsch"><br> Ihr Zusatzwunsch:<br> <input type="text" size="40" maxlength="40" name="zusatzwunsch"><br> </p> </fieldset> Uebung5.doc 16.07.2002 6

Formulare 5.1.8. Aufgabe 6 Daten des Formulars absenden Bei allen bisherigen Formularen gab es keine Möglichkeit, die Daten abzuschicken. Es wird dazu lediglich ein entsprechender Button benötigt. <input type="submit" value=" Absenden "> Ausserdem ist ein Button zum Rücksetzen des Formulars auch sinnvoll. Der entsprechende Code lautet: <input type="reset" value=" Abbrechen"> Fügen Sie in alle bisher erstellten Formulare diese zwei Buttons ein. Bei dem ersten Formular sollte es in etwa so aussehen: Formular mit Sende- und Abbrechen - Button Was nun noch fehlt ist die Einheit, die das Formular verarbeitet. Sie erinnern sich, das die entsprechende Angabe im <form> - Tag als Parameter action="url" übergeben werden muß. Für die Verarbeitung der Daten haben wir mit den bisher erstellten Formularen schon einige Vorarbeit geleistet. Die Formulare werden dazu benutzt die Daten einzusammeln. Jedes Element des Formulars, das Daten aufnehmen kann, ist über den name - Parameter einer Variablen zugeordnet. Der zweite wichtig Parameter im <form> - Tag war der method - Parameter, der entweder auf get oder post gesetzt werden kann. Wie schon erklärt sorgt method="get" dafür, daß die Daten über die URL übergeben werden. Dies können wir nun nutzen, um zu sehen, ob nun tatsächlich Daten vom Formular via URL übertragen werden. Uebung5.doc 16.07.2002 7

Formulare 5.1.9. Aufgabe 7 Die Auswertungsseite Erzeugen Sie eine ganz einfache HTML - Seite, die folgendes Aussehen hat: Auswertungsseite Nennen Sie diese Seite auswertung.html. Tragen Sie nun (falls nicht schon geschehen) diese Seite als action - Parameter in die <form> - Tags ihrer Formulare ein. Außerdem überprüfen Sie, ob Sie überall method="get" als zweiten Parameter eingetragen haben. Nun sollten Sie beim Abschicken des ersten Formulars folgendes Ergebnis sehen: Formular...... und Ergebnis - Beachte die URL! Uebung5.doc 16.07.2002 8

JavaScript die clientseitige Programmiersprache 5.2. JavaScript die clientseitige Programmiersprache JavaScript ist kein direkter Bestandteil von HTML, sonder eine Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML - Autoren ein Werkzeug in die Hand zugeben, mit dessen Hilfe sich WWW - Seiten optimieren lassen. JavaScript - Programme werden wahlweise direkt in der HTML - Datei oder in separaten Dateien notiert. Sie werden nicht - wie Java-Programme - kompliliert, sondern als Queltext uzr Laufzeit interpretiert, also ähnlich wie Batch - Dateien in Dos. Dazu besitzen moderne Browser entsprechende Interpretersoftware. JavaScript ist eine Scriptsprache, die von Netscape eingeführt wurde und von Netscape lizensiert ist. Deshalb beherrschen die jeweils neuen Versionen des Netscape - Browsers auch immer etwas mehr JavaScript als die Konkurrenz, die nur abwarten kann, was Netscape an Neuigkeiten implementiert. Weiterhin unterscheiden sich Netscape und Internet Explorer in der Interpretation einzelner Objekteigenschaften. Dies ist für einen Programmierer sehr unschön, will er doch seine HTML - Seiten für alle Browser implementieren. Der Internetexplorer 4.x interpretiert zwar JavasScript, daneben aber auch die Microsoft - eigene Sprachvariante JScript, die spezielle Befehle für die Betriebssystemerweiterungen des Internet Explorers bereitstellen. Sowohl Netscape als auch Microsoft betonen, daß sie sich mit ihren Sprachinterpretern am Standart für Internet - Scriptsprachen, an ECMA-262, orientieren. Das ECMA - Kommittee, dem verschiedene Software - Hersteller, unter anderem Microsoft und Netscape, angehören, ist bemüht, auch im Bereich der Script - Sprachen einen allgemeingültigen Standard zu definieren, wie es bei HTML der Fall ist. Wichitg: JavaScript ist eine Interpretersprache. JavaScript wird vom Browser interpretiert. Jede Browserversion hat eine andere Implementierung des Interpretors. Dies wirft Probleme auf, wenn Webseiten erstellt werden sollen, die sich mit allen Browsern gleich verhalten sollen. 5.2.1. JavaScript - Bereiche in HTML definieren Für ein JavaScript - Programmabschnitt können Sie in HTML Bereiche definieren. Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML - Datei ein. Dahinter (am besten in er nächsten Zeile) sollten Sie mit <!-- einen Kommentar einleiten. Dadurch erreichen Sie, daß ältere Browser, die JavaScript nicht kennen, den folgenden JavaScript - Code ignorieren. Uebung5.doc 16.07.2002 9

JavaScript die clientseitige Programmiersprache 5.2.2. Das "Hello World" in JavaScript Folgendes Beispiel gibt ein Meldungsfenster aus: <html> <head> <title>javascript Hello World</title> <script type="text/javascript"> <!-- alert("hello World!"); // --> </script> <head> <body> <h1>javascript Hello World</h1> <p> Beim laden der Webseite erscheint eine Messagbox </p> </body> </html> Bei dem fett markierten Teil handelt es sich um den JavaScript - Code. Genau genommen wurde nur ein Funktionsaufruf benutzt alert(meldungstext). Mit zwei Schrägstrichen in der Zeile (//) darunter wird ein JavaScript - Kommentar eingeleitet, der bis zum Ende der Zeile gilt. folgende Meldung erscheint: Anschließend erscheint die eigentliche Webseite: Meldung via JavaScript Die Webseite. Uebung5.doc 16.07.2002 10

JavaScript die clientseitige Programmiersprache JavaScript wird auf dem Client ausgeführt, entsprechend eignet es sich um clientseitige Aktionen auszuführen. Die Anwendungsgebiete sind Vielfältig man kann unter anderem: Die Größe und die Postion des Browserfensters beeinflussen Eingaben eines Formulars beim Verlassen eines Feldes überprüfen Berechnungen durchführen Meldungen ausgeben HTML - Seiten zu Laufzeit erstellen Mouseover - Effekte erzeugen. Wir werden nun als ein Beispiel mit JavaScript den beliebten Mouseover - Effekt programmieren 5.2.3. Mouseover mit JavaScript Ein Mouesover - Effekt wird dadurch erzeugt, daß JavaScript in einer Webseite dafür sorgt das eine Grafik durch eine andere Grafik ersetzt wird, sobald die Mause über der Grafik schwebt. Seite wenn die Maus nicht über der Grafik ist. Seite, wenn die Maus über der Grafik ist. Erreicht wird das einerseits über das definieren von Grafiken in JavaScript: Normal1 = new Image(); Normal1.src = "button1.gif"; /* erste Standard-Grafik */ Die erste Zeile definiert eine JavaScript Variable, die den Typ Image habe soll. In der Zweiten Zeile wird dieser Variablen eine Quelle für die Bilddaten zugewiesen. Uebung5.doc 16.07.2002 11

JavaScript die clientseitige Programmiersprache Als nächstes wird eine Funktion in JavaScript definiert, die eine existierende Grafik durch eine andere ersetzt. Hierbei wird ausgenützt, daß alle Grafiken einer Webseite in einem Array window.document.images[] abgelegt sind. Der Funktion wird die Bildnummer und die in JavaScript vorher definierte Grafikvariable übergeben. function Bildwechsel(Bildnr,Bildobjekt) { window.document.images[bildnr].src = Bildobjekt.src; Das waren die Vorarbeiten. Nun Wird innerhalb des HTML- Body-Bereiches eine entsprechende Grafik, bzw. ein Link implementiert, der Diese Funktion benutzt: <a href="javascript2.html" onmouseover="bildwechsel(0,highlight1)" onmouseout="bildwechsel(0,normal1)"><img src="button1.gif" width="130" height="30" border="0"></a> Hier bei werden zwei Ereignisse verwendet. onmouseover ist ein Ereignis, daß eintritt, wenn die Maus über dem Link, also über der Grafik ist. Das andere Ereignis onmouseout ist aktiv in dem Moment, in dem die Maus die Grafik wieder verläßt. Die JavaSkript - Engine kennt also verschiedene Ereignisse, an die sich JavaScript - Funktionen binden lassen. Diese Funktionen werden dann genau beim Eintreten des Ereignisses ausgeführt. Der komplette Source - Code sieht wie folgt aus: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>javaskript 2</title> <script type="text/javascript"> <!-- Normal1 = new Image(); Normal1.src = "button1.gif"; /* erste Standard-Grafik */ Highlight1 = new Image(); Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */ function Bildwechsel(Bildnr,Bildobjekt) { window.document.images[bildnr].src = Bildobjekt.src; } //--> </script> </head> <body> <h1>javaskript Mouseover</h1> <a href="javascript2.html" onmouseover="bildwechsel(0,highlight1)" onmouseout="bildwechsel(0,normal1)"><img src="button1.gif" width="130" height="30" border="0"></a><br> </body> </html> Uebung5.doc 16.07.2002 12

PHP - die Serverseitige Skriptsprache 5.3. PHP - die Serverseitige Skriptsprache Analog zu JavaScript - einer Skriptsprache auf der Clientseite, ist PHP eine Skriptsprache, die auf dem Webserver läuft. Speziell gekennzeichnete Webseiten werden vom Webserver nach dem PHP - Code durchsucht und bevor der Client die Webseite bekommt wird der PHP - Code vom Server interpretiert und erst das Ergebnis zum Client weitergeleitet. Durch diesen Mechanismus lassen sich lassen sich dynamische Webseiten erstellen, deren Inhalt genau zu dem Zeitpunkt erzeugt wird, zu dem der Client sie anfordert. Die Inhalte könnten dann beispielsweise aus einer Datenbank stammen. Wichtig ist hierbei noch, daß beim Client von dem PHP - Code (bei richtiger Programmierung) nichts mehr übrig bleibt. - Der Client bekommt reines HTML. 5.3.1. Hello World in PHP PHP - Code wird in HTML Dateien durch ein Spezielles Tag eingebettet. <?php...hier php code...?> PHP beginnt immer mit der Sequenz <?php und endet immer mit?>. Dazwischen befindet sich PHP Code. Wir wollen nun nur einen Befehl kennenlernen, um ein einfaches "Hello World" ausgeben zu können: print "Hello World!"; Diese Zeile sorgt bei den Webserver dafür, daß der Befehl print ausgeführt wird und die Zeichenkette "Hello World!" ausgegeben wird. Die entsprechende PHP - Datei lautet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>php Hello Worldr</title> </head> <body> <h1>php Hello World</h1> <?php?> print "Hello World!"; </body> </html> Ausgabe - reines HTML! Uebung5.doc 16.07.2002 13

PHP - die Serverseitige Skriptsprache 5.3.2. Formular mit Auswertung in PHP Um ein Formular und dessen Auswertung in ein und der selben Datei unter zu bringen, kann man folgende Lösung implementieren: Der gesamte <body> - Bereich wird über PHP - print - Befehle ausgegeben. Zuerst wird aber eine Fallunterscheidung vorgenommen: if (!$name) {..Formular ausgeben via PHP } else {.. Formular auswerten via PHP } Der Ausdruck (!$name) überprüft, ob die Variable $name noch nicht definiert ist. Ist diese Variable tatsächlich noch nicht definiert, so wurde offensichtlich das Formular noch nicht ausgegeben. Also wird der obere Pfad der if-anweisung durchlaufen und die Formularausgabe erfolgt: Ausgabe des Formulars Füllt der Anwender nun das Formular aus, so wird eine Variable $name erzeugt und mit dem gefüllt, was der Anwender in das Eingabefeld eingetragen hat. Das Formular hat als action - Parameter wieder die Seiten selbst. angegeben (action='php_form.php3') also wird beim Drücken des Absenden - Buttons wieder die diese Seite aufgerufen. Wieder findet der Test statt, ob es die Variable $name noch nicht gibt (if (!$name)...). Jetzt ist die Variable aber vorhanden und mit Daten gefüllt, also wird der else- Pfad der if-anweisung durchlaufen und die Auswertung des Formulars erfolgt: Auswertung des Formulars Uebung5.doc 16.07.2002 14

PHP - die Serverseitige Skriptsprache Außer dem print - Befehl wurde nur die Fallunterscheidung mit folgender Syntax verwendet: if (Bedingung) { Anweisungen } else { Anweisungen } Eine vollständige Dokumentation zu PHP finden interessierte Leser unter http://www.php.net/. Hier der komplette Code zur PHP - Formular - Datei: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>php und Formular</title> </head> <body> <h1> Formulare mit PHP </h1> <?php if (!$name) { print "<form name='testform' action='php_form.php3' method='post'><br>\n"; print "Bitte Namen eingeben :<br>\n"; print " <input "; print " value='vorgabewert'"; print " name='name' type='text' size='30' maxlength='30'><br>\n"; print "<input type='submit' value=' Absenden '><br>\n"; print "<input type='reset' value=' Abbrechen'><br>\n"; print "</form>\n"; } else { print "Hier kommt das hin was ausgeben werden soll, wenn das Formular ausgefuellt ist...\n"; print "<br>"; print "Folgendes wurde eingegeben:[ $name ]"; print"<br>\n"; }?> <br> <a href="php_form.php3"> Formular neu Laden </a><br> <a href="php_form.src"> Quellcode </a> </body> </html> Uebung5.doc 16.07.2002 15