HTML Formulare / CGI / JavaScript / Perl

Transkript

1 Übungen Informatik I HTML Formulare / CGI / JavaScript / Perl 1

2 HTML Inhalt HTML Formulare JavaScript CGI / Perl 2

3 HTML Formulare Formulare (engl.: forms) können mit JavaScript bearbeitet werden Formulardaten können an ein CGI- Programm übergeben werden werden mit dem <FORM>- Tag eingeleitet bestehen aus mehreren Kontrollelementen (grafische Objekte auf der Webseite, die mit der Maus oder Tastatur verändert werden können) Es folgt ein Screenshot eines einfachen Formulars: 3

4 HTML Formulare - Beispiel Und das ist der Quelltext zum Formular auf der Folie davor: <FORM ACTION="mailto:test@fh-karlsruhe.de" METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME="adresse" COLS="60" ROWS="4"> 1. gahe000@fh-karlsruhe.de 2. scst0051@fh-karlsruhe.de </TEXTAREA> <p> Ihre Meinung bitte! </p> <br> <INPUT NAME="userInfo" TYPE= text SIZE="40" MAXLENGTH="20"> <p> <INPUT TYPE="submit" VALUE="Anfrage senden"> <INPUT TYPE="reset VALUE="Zurücksetzen"> <P> Bitte teilen Sie uns Ihre Meinung mit und senden sie mit der Sendetaste ab. </P> </FORM> 4

5 HTML Formulare Beispiel: Erklärung <FORM METHOD="post" ENCTYPE="text/plain"> Ein Formular wird also mit dem <FORM>- Tag eingeleitet, dieses enthält folgende Attribute: -ACTION: gibt den Empfänger der Formulardaten an (es handelt sich hierbei entweder um ein Programm, das auf dem Server läuft, oder um einen Mail- Client (= mailto: ) -METHOD: gibt die Übertragungsmethode an (get oder post nächste Folie) -ENCTYPE: legt die Form der Codierung fest (wichtig bei action= mailto: ) <TEXTAREA NAME="adresse" COLS="60" ROWS="4"> Mit dem <TEXTAREA>- Tag wird ein mehrzeiliges Eingabefeld erzeugt, es enthält folgendes Attribut: - NAME: legt eine eindeutige Bezeichnung fest <INPUT NAME="userInfo" TYPE= text SIZE="40" MAXLENGTH="20"> <INPUT TYPE="submit" VALUE="Anfrage senden"> Mit dem <INPUT>- Tag wird ein einzeiliges Eingabefeld erzeugt, dazu gibt es folgende Attribute: - TYPE: es legt die Art des Kontrollelements fest submit : Schaltfläche, die den Sendevorgang auslöst reset : Schaltfläche, die das Formular wieder in den Ursprungszustand setzt - VALUE: legt die Beschriftung der Buttons fest 5

6 HTML Formulare Übertragungsmethoden Wie schon erklärt, wird mit dem Attribut METHOD im <FORM>- Tag die Übertragungsmethode festgelegt, d. h. wie die Kommunikation mit dem Empfängerprogramm erfolgt Es gibt zwei Möglichkeiten: GET: Bedeutet für CGI- Programme, dass sie die Daten in einer Umgebungsvariable über das System des Servers geliefert bekommen POST: Bedeutet für CGI- Programme, dass eine Tastatureingabe simuliert wird, d. h. sie erhalten die Daten so, wie wenn sie jemand vor Ort eintippt. Für s werden Formulare mit der POST- Methode vollständig angelegt und abgeschickt Für s also immer POST für das Attribut METHOD anzugeben! 6

7 HTML Formulare Formularelemente Ein Formular kann mehrere Elemente haben, diese werden je nach Informationstyp ausgesucht, z. B. muß der User einen Text eintippen, oder einfach nur bejahen, bzw. verneinen In HTML stehen spezielle Kontrollelemente zur Verfügung: INPUT- Typen Beschriftungen Notizfelder Beispiel: <FORM METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME= name > Notizfeld </TEXTAREA> <LABEL FOR= inpname > Beschriftung </LABEL> <INPUT ID= inpname VALUE= senden TYPE= submit > <!-- das ist ein Button --> </FORM> 7

8 HTML Formulare INPUT- Typen Sie werden mit dem <INPUT>- Tag erzeugt Das Attribut TYPE legt fest, welches Element erzeugt wird: PASSWORD: <INPUT TYPE="password NAME="kennwort SIZE= 8 MAXLENGTH="12"> für die Eingabe nicht erkennbarer Daten (z. B. Passworteingabe: ******) CHECKBOX: <INPUT TYPE="checkbox" NAME="zutat" VALUE="salami">Salami<br> <INPUT TYPE="checkbox" NAME="zutat" VALUE= Pilze checked>pilze<br> kleines quadr. Kästchen, das per Mausklick angekr. werden kann RADIO: <INPUT TYPE="radio" NAME="Zahlen" VALUE="Visa"> Visa<br> kleiner runder Kreis, der per Mausklick ausgefüllt werden kann TEXT: Eingabe num. und alphanum. Daten. rechteckiges Eingabefeld SUBMIT: Schaltfläche zum Absenden der Formulardaten RESET: Schaltfläche, die das Formular in seinen Ursprungszustand zurücksetzt 8

9 HTML Formulare Auswahllisten Mit dem <SELECT>- Tag werden Auswahllisten definiert, es gibt folgende Attribute zu diesem Tag: NAME: Beschriftung SIZE: Anzahl sichtbarer Zeilen MULTIPLE: steuert ob eine Mehrfachauswahl möglich ist Mit dem <OPTION>- Tag werden innerhalb der <SELECT>- Tags Optionen aufgelistet, hier gibt es folgende Attribute: SELECTED: zeigt eine Vorauswahl an VALUE: wenn statt des angezeigten Wertes eine andere Information übertragen werden soll <SELECT NAME= Auto SIZE= 2 MULTIPLE> <OPTION SELECTED> Opel </OPTION> <OPTION> Ford </OPTION> <OPTION> VW </OPTION> </SELECT> 9

10 HTML Formulare weitere Formularelemente Klickbuttons herkömmlich: <input type="button" name="verweis" value="informatik-tutorial" onclick="self.location.href= ' Klickbuttons modern: <button name="klickmich" type="button" value ="Informatik-Tutorial" onclick="self.location.href= ' <p> <b>info1 Portalseite</b></p> </button> Felder für Datei uploads <input name="datei" type="file" size="50" maxlength="100000" accept="text/*"> Formulare mit CSS formatieren -> selfhtml 10

11 HTML Inhalt HTML Formulare JavaScript CGI / Perl 11

12 JavaScript Einführung JavaScript - wurde 1995 von der Firma Netscape eingeführt und lizenziert - ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. - wurde zu dem Zweck geschaffen, Web-Seiten zu optimieren. - wird client-seitig, zur Laufzeit vom Web-Browser interpretiert. - JavaScript-Programme werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. - ECMA-Script: Standardisierte Variante der ECMA (Genf) Für Web-Seiten, bei denen Information im Vordergrund steht, und die auch von Suchmaschinen-Robots und Benutzerrandgruppen wie Sehbehinderten erfasst werden sollen, müssen Sie darauf achten, JavaScript nur so einzusetzen, dass die Web-Seiten auch ohne eingeschaltetes JavaScript ordentlich angezeigt werden, und dass die Navigation zwischen den Seiten auch ohne JavaScript funktioniert. 12

13 JavaScript JavaScript-Bereiche in HTML definieren <html> <head> <title>beispiel zum Funktionsaufruf aus einem Tag</title> </head> <body> </body> </html> <script type="text/javascript"> <!-- alert("hallo Welt!"); //--> </script> //: JavaScript-Kommentar: um Fehlermeldungen in scriptfähigen Browsern zu unterdrücken JavaScript-Bereich kann auch im body stehen, üblich ist wie oben 13

14 JavaScript Kommentare Einzeiliger Kommentar beginnt mit // Mehrzeiliger Kommentar beginnt mit /* endet mit */ Wichtig um Informationen für Entwickler abzulegen welche Aufgabe hat die Funktion oder Bedingung unter der die Funktion arbeitet Beachte: Keine sensitive Informationen (Passwörter), da im Quelltext für jeden sichtbar 14

15 JavaScript Funktionsaufruf über HTML-Tag <html> <head> <title>beispiel zum Funktionsaufruf aus einem Tag</title> </head> <script type="text/javascript"> <!-- function Meldedich(text) { alert(text); } //--> </script> <body> <h3> <a href="javascript:meldedich('hallo');">klicken Sie bitte hier!</a> </h3> <a href="javascript:history.back()"> Eine Seite zurück </a> </body> </html> 15

16 JavaScript Event-Handler stellen das Bindeglied zwischen HTML und JavaScript dar reagieren auf bestimmte Tastatur- und Mausereignisse werden als Attribute in HTML-Tags geschrieben beziehen sich auf das entsprechende HTML-Element. sind HTML 4.0 Standard beginnen immer mit on, zum Beispiel Notation: EventHandler= JavaScript-Anweisung Bsp.: onclick= Meldedich( Hallo ) <html> <body> <form> <input type=button value="klick mich" onclick="alert('er hat es getan!')"> </form> <a href="funktionen.html" onmouseover="history.back();"> zurück</a> </body> </html> 16

17 JavaScript Vordefinierte Objekte Dass JavaScript eine Erweiterung von HTML ist, liegt vor allem an den vordefinierten Objekten. Über diese vordefinierten Objekte können Sie beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ändern. Die JavaScript-Objekte sind in einer Hierarchie geordnet: window(browserfenster) document (Dokument im Browserfenster) forms,... (Formular, im Dokument ) elements (Formularelemente, z.b. Auswahllisten, Buttons ) parent window document forms[] elements[] frames[] location images[] links[] anchors[] 17

18 JavaScript Vordefinierte Objekte <html> <head> </head> <body> <script type="text/javascript > var counter = 0; function doit() { counter++; document.forms[0].elements[0].value= "Klick " + counter + "!"; } </script> <form> <input type=button value="klick!" onclick="doit()"> </form> </body> </html> 18

19 JavaScript Vordefinierte Objekte Elemente können auch mit ihren Namen direkt angesprochen werden. elements (Formularelemente, z.b. Auswahllisten, Buttons ) <input type="text" name=" "> Document.forms[0]. .value 19

20 JavaScript JavaScript in separater Datei JavaScript-Datei quadrat.js: function Quadrat() { var Ergebnis = document.formular.eingabe.value * document.formular.eingabe.value; alert("das Quadrat von " + document.formular.eingabe.value + " = " + Ergebnis); } HTML-Datei <html> <head> <title>beispiel zum Funktionsaufruf aus einem Tag</title> <script src="quadrat.js" type="text/javascript"> </script> </head> <body> <form name="formular" action=""> <input type="text" name="eingabe" size="3"> <input type="button" value="quadrat errechnen" onclick="quadrat()"> </form> </body> </html> 20

21 JavaScript if / submit (für Aufgabe 2) <html> <head> <script type="text/javascript"> function checkwort() { if ( document.forms[0].q.value == "" ) { alert("geben Sie einen Suchbegriff ein"); return false; } } </script> </head> <body> <h1>geben Sie einen Suchbegriff ein</h1> <form action=" onsubmit="return checkwort() "> Nummer: <input type="text" name="q"> <p> <input type=submit value="suchen"> </form> </body> </html> 21

22 JavaScript Event-Handler - Beispiele onload (beim Laden einer Datei) Tritt ein, wenn eine HTML-Datei geladen wird. <body onload="navifenster()"> <h1>seite mit "Fernbedienung"</h1> </body> onreset (beim Zurücksetzen des Formulars) <script type="text/javascript"> function ResetCheck() { var chk = window.confirm("wollen Sie alle Eingaben loeschen?"); return(chk); } </script> <form name="test" onreset="return ResetCheck()" action=""> onsubmit: (selfhtml) <form action="onsubmit.htm" onsubmit="return CheckInput();"> 22

23 HTML Inhalt HTML Formulare JavaScript CGI 23

24 CGI (Common Gateway Interface) Einführung Das CGI (= Common Gateway Interface) eines WWW- Servers ermöglicht es beliebige vorbereitete externe Programme auszuführen CGI spezifiziert die erforderlichen Schnittstellen für die Eingabe, bzw. Weiterleitung von Informationen vom WWW- Client zum Programm und für die Rückgabe von Informationen an den WWW- Client Die perfekte Sprache für die CGI- Programmierung sind Perl und PHP CGI wurde im wesentlichen von folgenden Personen entwickelt: Tony Sanders Ari Luotonen George Phillips John Franks 24

25 CGI (Common Gateway Interface) Einführung Anwendungen Die Hauptanwendung ist die direkte Generierung von HTML- Seiten aus Informationen, die nicht als HTML- Seiten vorliegen Zum Beispiel: CGI- Programme sind manchmal eine Schnittstelle zu einer bereits existierenden Datenbank: Sie konvertieren die Eingabe in etwas, das die Datenbank versteht und sie konvertieren die Ausgabe in etwas, das ein Web- Browser versteht (z. B. HTML) CGI- Programme ermöglichen die Interaktion mit Benutzern eines WWW- Servers, z. B. um ein Bestellformular umzusetzen 25

26 CGI (Common Gateway Interface) Einführung Umgebung eines CGI- Programms 26

27 CGI (Common Gateway Interface) Einführung Systemumgebung Hier benutzen wir Perl als Programmiersprache für CGI, da PHP nicht installiert ist Zum Programmieren braucht man: Einen Editor (z. B. Textpad) Ein Verzeichnis für die CGI- Dateien, das dem WWW- Server bekannt sein muß (hier an der FH: im.public_html- Verzeichnis): z. Bsp.:.public_html/cgi/ Einen Perl- Interpreter und den Pfad dazu, wo dieses Programm auf dem Server installiert ist (mit dem Befehl: which perl) /usr/local/bin/perl Perl- Programmbibliotheken (enden auf.pm): Wichtig ist das Perl- Modul cgi.pm, das eine Reihe von Funktionen, die das Programmieren von CGI- Skripten erleichtern, beinhaltet 27

28 CGI (Common Gateway Interface) Einführung Das Modul cgi.pm cgi.pm: - ab Version in Standard-Perl-Distribution - ist von Lincoln Stein; - ist plattformunabhängig (läuft auf UNIX, Linux, VMS, Windows, Macintosh...) - ist im RZ installiert Informationen (vollständige Dokumentation) und Hilfe über das Modul findet man im Manual: man CGI (oder perldoc CGI) Pfadvariable: MANPATH Die Syntax der CGI-Programme werden unter UNIX lokal getestet, und erst dann (fehlerfrei) über den Browser aufgerufen. Damit CGI-Programme in dem aktuellen Verzeichnis gefunden werden, muss die PFAD-Variable richtig gesetzt sein: Pfad testen: Pfad setzen: echo $PATH export PATH=$PATH:. Pfadvariable zu perldoc: export PATH=$PATH:/opt/perl5/bin 28

29 CGI (Perl) Programmierung Wir werden die Programmierung an dem einfachen Beispiel eines Formulars erklären: Das Formular selber wird im HTML- Dokument mit den <FORM>- Tag definiert Jedes Textfeld dieses Formulars hat einen Namen (NAME) und einen Wert (VALUE) Wie schon besprochen, kann ein Formular per versendet werden (ACTION= mailto: ) oder an eine CGI- Anwendung übertragen werden (ACTION = ) Das CGI- Programm wird also im ACTION- Attribut in einem URL angegeben Schickt der User jetzt das Formular ab, greift der Browser auf den URL des CGI- Programms zu, nachdem er einen Abfragestring (query string) an den URL angehängt hat 29

30 CGI (Perl) Programmierung Der query string Der query string ist eine Zeichenkette, die dem CGI- Programm in der Umgebungsvariable QUERY_STRING zur Verfügung gestellt wird Die Angabe des query string kann von Hand erfolgen vom WWW- Client generiert werden Der query string besteht aus mehreren Paaren der Form NAME=VALUE und wird dem Pfad zum CGI- Programm angehängt Beispiel eines Formulars: Doz=Paulchen+Panther & Typ=Inhalt & Note=Schlecht & Doz=Daniel+Duesentrieb &Typ=Inhalt & Note=Gut & User=Daniel & =duda0013 %40 fh-karlsruhe.de Der query string wird mit? eingeleitet Name-/Werte- Paare werden mit & getrennt Zeichen werden kodiert %40) 30

31 CGI (Perl) Programmierung Übertragung Unser URL wird nun vom Web- Server empfangen Dieser ruft das CGI- Programm Meinungsumfrage.cgi auf und übergibt die Namen/Werte- Paare als Argumente, welche vom cgi.pm automatisch ausgepackt werden, oder-falls das Modul nicht installiert ist - entsprechend aufgesplittet werden muß.... Nun wird das CGI- Programm ausgeführt 31

32 CGI (Perl) Programmierung Query-String mit CGI-Modul Das Modul cgi.pm zum Parsen (Analysieren) der CGI- Anfrage wird am Anfang des CGI- Programms mit folgender Anweisung eingebunden: use CGI; Mit dem Modul stehen dem cgi-programm die Namen/Werte-Paare aus dem Formular wie folgt zur Verfügung:... use strict; # Deklaration und Quoting erzwingen use CGI qw(:all); my( $q, $dozent, $username, $note, $typ, $ adr); $q = CGI->new(); # aktuelle Anfrage $dozent = $q -> param( Doz"); $username = $q -> param( User"); $note = $q -> param( "); $typ = $q -> param( Typ"); $ adr = $q -> param(" "); $ adr =~ s/%([a-fa-f0-9][a-fa-f0-9])/\@/g; 32

33 CGI (Perl) Programmierung Das Modul cgi.pm einbinden use CGI; Mit der use- Anweisung wird ein Code aus einer anderen Datei zur Compile- Zeit nachgeladen Die Anweisung kann mit optionalen Argumenten versehen werden, die angeben, auf welche Funktionen und Variablen zugegriffen wird (vgl. in UNIX können Befehle auch mit Argumenten versehen werden, z.b. ls -la), z. B. wird der Zugriff auf die Funktion param() so angegeben: use CGI qw(param); Die qw- Notation wird verwendet, um die Importliste später erleichtern zu können 33

34 CGI (Perl) Programmierung Query-String ohne CGI-Modul falls cgi.pm nicht installiert ist, muss der query-string wie folgt aufgesplittet werden:...?doz=paulchen+panther&typ=inhalt&note=schlecht&doz=daniel+duesentrieb&typ= Inhalt&Note=Gut&User=Daniel& =duda0013%40fh-karlsruhe.de $i=0; foreach $Feld { ($name, $value) = split(/=/, $Feld);-> Doz=... = $value =~ tr/+/ /; -> (Transliteration) ersetzt + durch $value =~ s/%([a-fa-f0-9][a-fa-f0-9])/pack("c", hex($1))/eg; -> %40 $value =~ s/<!--(. \n)*-->//g; -> löscht alle Zeichen <... \n im ganzen String (g) $Formularname[$i] = $name; $Formularvalue[$i] = $value; $i++; } 34

35 CGI (Perl) Import- Tags Import- Tags sind Labels (Bezeichnungen) für eine Gruppe zu importierender Funktionen: use CGI qw(:cgi); Methoden zur Argument- Verarbeitung wie param() use CGI qw(:form); Methoden, die Formulare generieren use CGI qw(:standard); Standardfunktionen (html2, form, cgi) - header(): Zeichenkette mit der Zeile Content-type + Leerzeile - start_html(zeichenkette): Zeichenkette als HTML- Title - h1(zeichenkette): Zeichenkette als HTML- Überschrift 1. Ordnung - p(zeichenkette): Zeichenkette als neuer HTML- Absatz use CGI qw(:shortcuts); Methoden, die HTML- Programme vereinfachen use CGI qw(:all); alle verfügbaren Methoden 35

36 CGI (Perl) Programmierung Vollständiges CGI- Skript in Perl ohne cgi-modul: #!/usr/local/bin/perl w my $Title = ein skript ; print content-type:text/html \n\n ; print <html><head><title>hallo Welt</title></head><body>\n ; print <h1>$title</h1>\n ; print <p>das ist ein einfaches Skript</p> ; print </body></html> ; mit cgi-modul: #!/usr/local/bin/perl -w use CGI qw(:standard); print header, start_html(-title=>$title, -bgcolor=>'white'), h1($title); print $q -> p, Das ist ein einfaches Skript</p> ; print $q -> end_html; 36

37 CGI (Perl) Programmierung Ein einfaches Programm Ein einfaches CGI- Programm um eine dynamische Web- Seite zu generieren - Here-Dokument : #!usr/local/bin/perl # Hallo- Das einfachste aller CGI- Programme print <<ENDE_des_mehrzeiligen_Textes; Content-type: text/html <HTML> ENDE_des_mehrzeiligen_Textes 37

38 CGI (Perl) Programmierung Ein einfaches Programm- Erklärung Mit # wird in Perl ein Kommentar eingeleitet In der ersten Zeile wird der Pfad zum Perl- Interpreter angegeben print ist eine Anweisung, die etwas auf dem Bildschirm ausgibt Jede Anweisung muß mit ; enden Mit << wird eine Anfangsmarke gesetzt Die Endmarke (ENDE_des_mehrzeiligen_Textes) leitet ein HERE- Dokument ein. Sie ermöglicht es, eine mehrzeilige Zeichenkette auszugeben. erspart also, vor jede Zeile ein print zu schreiben Die Zeile Content-type: text/html gibt an (Direkt erste Zeile nach <<!), was für eine Art von Ausgabe generiert wird (hier also ein HTML- Dokument) Danach muß eine Leerzeile folgen Dann folgt der HTML- Code, der an den Browser des Users geschickt, dort formatiert und angezeigt wird Mit der Zeile ENDE_des_mehrzeiligen_Textes wird die Ausgabe abgeschlossen 38

39 CGI (Perl) Programmierung Ein einfaches Programm- Beispiel #!/usr/local/bin/perl use CGI qw(:standard); $cgi = new CGI; $parameter = $cgi->param('parameter'); $inhaltvariable = "Hallo"; print <<ENDE_des_mehrzeiligen_Textes; Content-type: text/html <HTML> <HEAD></HEAD> <BODY> <H1>${inhaltVariable}</h1> ${parameter} </BODY> </HTML> ENDE_des_mehrzeiligen_Textes 39

40 CGI (Perl) Programmierung Beispiele CGI- Programme können mit jedem HTML- Dokument zusammenarbeiten, also nicht nur mit Formularen Beispiel: Im HTML Dokument steht folgender Link: <A HREF= >Glückskekse verschicken</a> Das CGI- Programm fortune.cgi enthält nur den Aufruf des fortune- Programms (Programm, das auf UNIX- Systemen Glückskekse verschickt) es werden keine Argumente über den URL an das CGI- Programm gegeben Mit dem Link: <A HREF= > würde das Programm fortune.cgi mit dem Argument date ausgeführt werden 40

41 JavaScript Linkliste Voodoo JavaScript Tutorial und andere Einführungen: (deutsch) (englisch) Selfhtml: Netscapes neueste JavaScript-Referenz: Webbuilding: (englisch) 41

42 HTML Linkliste Gute Informationen gibt es auf dem Online- Tutorium: Ein sehr gutes Online- Tutorium von Stefan Münz mit sehr vielen Informationen und Beispielen findet man hier: Ein guter HTML- Editor von Ulli Meybohm ist hier zu finden: Eine HTML- Einführung von Hubert Partl: Die Goldenen Regeln für schlechtes HTML : Ein sehr gutes Buch für den Einstieg ist: HTML- Von der Baustelle bis JavaScript von Helmut Erlenkötter erschienen im Juni 2000 im Rowohlt Taschenbuch Verlag (ISBN: ) 42

43 CGI (Perl) Linkliste CGI- Einführungskurs mit Perl: Informationen zum Perl- Modul cgi.pm Perl/MODUL/CGIMODUL.HTM Informationen auch zu PHP: Perl und CGI: Übersicht über verschiedenste Online- Tutorials Übersicht über verschiedenste Online- Tutorials 43