HTML Formulare / CGI / JavaScript / Perl
Transcription
HTML Formulare / CGI / JavaScript / Perl
Übungen Informatik I HTML Formulare / CGI / JavaScript / Perl http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/Tutorial http://de.selfhtml.org Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 1 HTML Inhalt • • • HTML Formulare JavaScript CGI / Perl Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 2 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: Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 3 HTML Formulare - Beispiel Und das ist der Quelltext zum Formular auf der Folie davor: … <FORM ACTION="mailto:[email protected]" METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME="adresse" COLS="60" ROWS="4">E-MAIL: 1. [email protected] 2. [email protected] </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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 4 HTML Formulare – Beispiel: Erklärung <FORM ACTION="mailto:[email protected]" 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 5 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 E-Mails werden Formulare mit der POST- Methode vollständig angelegt und abgeschickt Für E-Mails also immer POST für das Attribut METHOD anzugeben! Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 6 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 ACTION="mailto:[email protected]" 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 7 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 8 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 9 HTML Formulare – weitere Formularelemente Klickbuttons herkömmlich: <input type="button" name="Verweis" value="Informatik-Tutorial" onClick="self.location.href= 'http://www.fbi-lkt.fh-karlsruhe.de/lab/info01'"> Klickbuttons modern: <button name="Klickmich" type="button" value ="Informatik-Tutorial" onClick="self.location.href= 'http://www.fbi-lkt.fh-karlsruhe.de/lab/info01'"> <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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 10 HTML Inhalt • • • HTML Formulare JavaScript CGI / Perl Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 11 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. Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 12 JavaScript JavaScript-Bereiche in HTML definieren <html> <head> <title>Beispiel zum Funktionsaufruf aus einem Tag</title> </head> <script type="text/javascript"> <!-alert("Hallo Welt!"); //--> </script> <body> </body> </html> //: JavaScript-Kommentar: um Fehlermeldungen in scriptfähigen Browsern zu unterdrücken JavaScript-Bereich kann auch im body stehen, üblich ist wie oben Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 13 JavaScript Kommentare Einzeiliger Kommentar Mehrzeiliger Kommentar beginnt mit 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 14 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 15 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 16 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 frames[] document forms[] location images[] elements[] links[] anchors[] Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 17 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 18 JavaScript Vordefinierte Objekte Elemente können auch mit ihren Namen direkt angesprochen werden. elements (Formularelemente, z.B. Auswahllisten, Buttons …) <input type="text" name="email"> Document.forms[0].email.value Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 19 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> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 20 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="http://www.google.de/search" onSubmit="return checkWort() "> Nummer: <input type="text" name="q"> <p> <input type=submit value="Suchen"> </form> </body> </html> http://www.home.fh-karlsruhe.de/~pach0003/uebungen/03_html_cgi/test.html Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 21 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();"> Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 22 HTML Inhalt • • • HTML Formulare JavaScript CGI Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 23 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 WWWClient 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 24 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 25 CGI (Common Gateway Interface) Einführung – Umgebung eines CGI- Programms Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 26 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 PerlModul cgi.pm, das eine Reihe von Funktionen, die das Programmieren von CGI- Skripten erleichtern, beinhaltet Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 27 CGI (Common Gateway Interface) Einführung – Das Modul „cgi.pm“ – cgi.pm: - ab Version 5.004 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 28 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 Email versendet werden (ACTION=„mailto:…“) oder an eine CGI- Anwendung übertragen werden (ACTION =„http://www.home.fh-karlsruhe.de/~papa0011/cgi/test.cgi“) Æ 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 29 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: http://www.home.fh-karlsruhe.de/~gahe0001/cgi/Meinungsumfrage.cgi ? Doz=Paulchen+Panther & Typ=Inhalt & Note=Schlecht & Doz=Daniel+Duesentrieb &Typ=Inhalt & Note=Gut & User=Daniel & Email=duda0013 %40 fh-karlsruhe.de Æ Der query string wird mit ? eingeleitet Æ Name-/Werte- Paare werden mit & getrennt Æ Zeichen werden kodiert (@ Î %40) Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 30 CGI (Perl) Programmierung – Übertragung • Unser URL wird nun vom Web- Server www.fh-karlsruhe.de 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 31 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, $emailadr); $q = CGI->new(); # aktuelle Anfrage $dozent $username $note $typ $emailadr $emailadr … = $q -> param(„Doz"); = $q -> param(„User"); = $q -> param(„Email"); = $q -> param(„Typ"); = $q -> param("Email"); =~ s/%([a-fA-F0-9][a-fA-F0-9])/\@/g; Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 32 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 33 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&Email=duda0013%40fh-karlsruhe.de $i=0; foreach $Feld (@Formularfelder) { ($name, $value) = split(/=/, $Feld);-> Doz=... Email=… $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++; } Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 34 CGI (Perl) Import- Tags Import- Tags sind Labels (Bezeichnungen) für eine Gruppe zu importierender Funktionen: use CGI qw(:cgi); param() use CGI qw(:form); Methoden zur Argument- Verarbeitung wie 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 35 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; Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 36 CGI (Perl) Programmierung – Ein einfaches Programm • Ein einfaches CGI- Programm um eine dynamische WebSeite 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 37 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 HEREDokument 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 38 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 Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 39 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=„http://www.irgendwo.org/cgibin/fortune.cgi“>Glückskekse verschicken</A> Das CGI- Programm fortune.cgi enthält nur den Aufruf des fortuneProgramms (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=„http://www.irgendwo.org/cgi-bin/fortune.cgi?date“> würde das Programm fortune.cgi mit dem Argument date ausgeführt werden Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 40 JavaScript Linkliste ¾ http://www.heise.de/ct/browsercheck/js.shtml ¾ http://java.rrzn.uni-hannover.de/javascript/index.html ¾ ¾ ¾ ¾ „Voodoo JavaScript Tutorial“ und andere Einführungen: http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm (deutsch) http://web.urz.uniheidelberg.de/Ausbildung/Unterlagen/JavaScript/einleit.html http://www.stars.com/Authoring/JavaScript/Tutorial/ (englisch) Selfhtml: http://www.teamone.de/selfhtml/ Netscapes neueste JavaScript-Referenz: http://developer.netscape.com/tech/javascript/index.html Webbuilding: http://www.cnet.com (englisch) Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 41 HTML Linkliste • • • • • • Gute Informationen gibt es auf dem Online- Tutorium: http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/Tutorial/index.htm Ein sehr gutes Online- Tutorium von Stefan Münz mit sehr vielen Informationen und Beispielen findet man hier: http://selfhtml.teamone.de/ Ein guter HTML- Editor von Ulli Meybohm ist hier zu finden: http://www.meybohm.de Eine HTML- Einführung von Hubert Partl: http://www.boku.ac.at/htmleinf/ Die „Goldenen Regeln für schlechtes HTML“: http://www.karzauninkat.com/Goldhtml/ 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: 3 499 60085 4) Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 42 CGI (Perl) Linkliste • • • • • • CGI- Einführungskurs mit Perl: http://userpage.fu-berlin.de/~ahahn/www/cgikurs/index.html Informationen zum Perl- Modul cgi.pm http://www.rrz.uni-hamburg.de/RRZ/W.Wiedl/Skripte/CGIPerl/MODUL/CGIMODUL.HTM http://www.cpan.org Informationen auch zu PHP: http://www.php-und-javascript.com Perl und CGI: http://www.wiik.de/papers/perl/node1.html Übersicht über verschiedenste Online- Tutorials http://www.online-tutorial.de Übersicht über verschiedenste Online- Tutorials http://www.online-tutorial.de Helga Gabler, Stefanie Schwall, Christian Pape Übungen Informatik 1 43