bingo e.V.



Was ist eigentlich CGI ?

CGI = Common Gateway Interface

Das Common Gateway Interface beschreibt, wie vom Anwender am Web-Browser eingegebene Daten an den Web-Server gesendet und dort an ein CGI-Programm weitergereicht werden.

Auf dieser Seite sollen anhand von kleinen Beispielen die Abläufe beim Aufruf von CGI-Programmen erklärt werden.

(angegebene Menü-Namen und Browser-Meldungen beziehen sich auf Netscape 2.01 und Internet Explorer 3.0)


Nehmen wir an, Sie haben mit HTML ein Formular definiert :


1. Beispiel

<form action="http://www.bingo-ev.de/cgi-bin/ub/cgi-demo" method=GET> <input type=hidden name="BACK" value="/~ub304/cgisampl.htm#beisp1"> <b>Suche nach : </b><input type=text name="SUCHE" size=20><br> <b>groß/klein : </b><input type=checkbox name="CASE"><br> <input type=submit value="ok"> </form>
Das erscheint am Browser dann so :

Suche nach :
groß/klein :

Was passiert nun, wenn Sie den OK-Knopf betätigen ? (Probieren Sie es doch mal und achten Sie darauf, was in der Anzeige "Adresse" ihres Browsers steht)

1. Übertragung an den Web-Server

Im <form>-Tag wird mit "action=http://www.bingo-ev.de/cgi-bin/ub/cgi-demo" festgelegt, mit welchem Protokoll (hier "http", also das Hyper Text Transfer Protokoll) an welchen Server ("www.bingo-ev.de") die Daten gesendet werden sollen und welches Programm ("/cgi-bin/ub/cgi-demo") diese Daten verarbeiten soll.

Bevor die Daten an den Server gesendet werden, werden sie zunächst vom Browser zu einer einzigen Zeichenkette verpackt. Für unser Beispiel könnte die Zeichenkette z.B. so aussehen : "BACK=%2F%7Eub304%2Fcgisampl.htm%23beisp1&SUCHE=irgendwas&CASE=on".

Die Art und Weise der Datenübertragung wird durch den Parameter "method=" gesteuert. Dabei wird grundsätzlich zwischen den beiden Methoden "GET" und "POST" unterschieden:

In unserem Beispiel wurde "GET" angegeben : In diesem Fall wird aus der im <form>-Tag angegebenen URL des CGI-Programms und der aus den Eingabedaten erzeugten Zeichenkette, getrennt durch ein "?", eine Pseudo-URL erzeugt. Für unser Beispiel könnte die also so aussehen: "http://www.bingo-ev.de/cgi-bin/ub/cgi-demo?BACK=%2F%7Eub304%2Fcgisampl.htm%23beisp1&SUCHE=irgendwas&CASE=on". Falls Sie das oben dargestellte Formular einmal abgeschickt haben, dann wird ihr Browser im Anzeigefeld "Adresse" eine entsprechende Pseudo-Adresse angeben.

Die Methode "GET" eignet sich nicht zur Übertragung größerer Datenmengen !


Alternativ kann als Methode "POST"verwendet werden. Dazu muß der HTML-Code unseres Beispiels wie folgt geändert werden :

2. Beispiel

<form action="http://www.bingo-ev.de/cgi-bin/ub/cgi-demo" method=POST>
Der Benutzer sieht zunächst keinen Unterschied :

Suche nach :
groß/klein :

Was passiert diesmal, wenn Sie den OK-Knopf betätigen ? (Probieren Sie es noch einmal und achten Sie darauf, was in der Anzeige "Adresse" ihres Browsers steht)

Bei Verwendung von "method=POST" bleibt die angegebene URL unverändert. In diesem Fall wird die verpackte Zeichenkette nach dem Verbindungsaufbau für den Anwender unsichtbar (außer Option "Sicherheitseinstellungen / Weiterreichen eines nicht geschützten Dokuments" bei Netscape) an den Server übertragen. Wenn Sie das 2. Formular einmal abschicken, dann wird ihr Browser im Anzeigefeld "Adresse" nur die echte Adresse des CGI-Programms, also "http://www.bingo-ev.de/cgi-bin/ub/cgi-demo" anzeigen.

Wenn Sie dann die Funktion "Anzeigen / Erneut laden" Ihres Browsers aufrufen, wird er Sie fragen "Erneutes Versenden der Datenart ?" : die Zeichenkette muß erneut übertragen werden. (Zumindest bei Netscape ist das so, der Internet Explorer fragt nichts, aber er versendet auch nicht erneut, was zu einer fehlerhaften Anzeige führt.)


2. Start des CGI-Programms

Der Server erkennt an dem Pfadnamen der angefragten URL, (i.A. "cgi-bin"), daß nicht ein vorhandenes Dokument zurückgesendet sondern ein CGI-Programm gestartet werden soll. Der Server muß diesem Programm die Daten aus dem Formular bereitstellen. Hierzu werden Environment-Variablen verwendet.
Die Variable "REQUEST_METHOD" hat entweder den Wert "GET" oder "POST". Im Fall von "GET" wird die verpackte Zeichenkette in einer weiteren Variablen "QUERY_STRING" bereitgestellt; bei "POST" wird in einer Variablen "CONTENT_LENGTH" die Länge der Zeichenkette abgelegt, die eigentliche Zeichenkette wird dem Programm auf stdin (Standard-Input) zur Verfügung gestellt.


3. Lauf des CGI-Programms

Zur Erstellung eines CGI-Programms gibt es keine spezielle Programmiersprache. Im einfachsten Fall kann das Programm unter Unix ein shell script bzw. unter DOS eine .bat-Datei sein. Es können aber auch beliebige höhere Programmiersprachen wie c, Pascal oder Fortran benutzt werden. Sehr weit verbreitet ist auch die Script-Sprache Perl.

Das CGI-Programm packt zunächst die empfangene Zeichenkette wieder aus. Der weitere Programmablauf wird dann durch die so erhaltenen Parameter gesteuert.

Die Ausgabe des Programms erfolgt in einem Datenformat, daß vom Browser interpretiert werden kann; in den meisten Fällen ist das entweder "text/html" (also wieder ein HTML-Dokument) oder "image/gif" (also eine Grafik).

Als Beispiele stehen ein kleines shell script (nämlich das von den hier gezeigten Formularen aufgerufene script) sowie ein kleines c-Programm (zum Auspacken der Daten) zur Verfügung.

4. Senden der Antwort an den Browser

Dieser Vorgang ist nichts CGI-spezielles mehr.


Alternative: Mail

Ein weiterer Weg ist, die vom Anwender eingegebenen Daten per Mail zu Verschicken. Viele Anwender haben aus Sicherheitserwägungen keine Möglichkeit, bei ihrem Provider CGI-Programme abzulegen. In diesem Fall ist der Weg über Mail die einzige Möglichkeit, wenn eine lokale Verarbeitung der Daten mit JavaScript (s.u.) ausscheidet.
Dazu muß wieder die erste Zeile unseres Formulars geändert werden; außerdem habe ich in diesem Beispiel das JavaScript-Ereignis "onSubmit" ergänzt :

3. Beispiel

<form action="mailto:irgendwen@bingo-ev.com" method=POST onSubmit="{alert('... jetzt geht die Post ab'); return true;}">
Das sieht dann wieder genauso aus:

Suche nach :
groß/klein :

Was passiert bei dieser Variante ? (Sie dürfen es gerne wieder probieren)

Es wird eine Mail an "irgendwen@bingo-ev.com" geschickt. Da es bei "bingo-ev.com" (hoffentlich) keinen User "irgendwen" gibt, wird die Nachricht als unzustellbar an Sie zurück kommen; Sie können sie dann mit ihrem Mail-Client ansehen. Die Nachricht könnte z.B. so aussehen :

Subject: Form posted from Mozilla Date: Mon, 28 Oct 1996 19:40:52 +0100 From: Uwe <ub@bingo-ev.de> To: irgendwen@bingo-ev.com BACK=%2F%7Eub304%2Fcgisampl.htm%23beisp3&SUCHE=irgendwas
Die Nachricht ist in dieser Form für den Empfänger leider nicht sehr gut lesbar. Verschiedene Browser, wie z.B. Netscape, unterstützen im <form>-Tag den Parameter enctype. Hier kann angegeben werden, welcher MIME-Type für die Übertagung der Daten verwendet werden soll. Ein lesbares Resultat erhalten Sie bei Angabe von text/plain. Das Form-Tag sieht damit dann so aus:
<form action="mailto:irgendwen@bingo-ev.com" method=POST
  enctype="text/plain">
Leider unterstützen jedoch nicht alle Browser den enctype-Parameter. Von einigen Browser werden Sie nach wie vor Mails in der oben angegebenen verschlüsselten Form erhalten. Diese müssen Sie dann nach Empfang entschlüsseln.
Komfortablere Mail-Reader (z.B.
Pegasus, Freeware) bieten dem Anwender die Möglichkeit, automatisch sogenannte Filter aufzurufen, wenn eine Mail einen vorher definierten Betreff hat. Ein solcher Filter könnte die Aufgabe übernehmen, die verpackte Zeichenkette wieder auszupacken.
Falls der verwendete Mail-Reader das Einbinden eines Filters nicht unterstützt, bleibt nur der Weg, die Nachricht mit "Speichern unter ..." als Datei abzulegen und ein Filter-Programm von Hand aufzurufen.
Wenn Sie zum Entschlüsseln einer Nachricht nicht extra ein externes Programm aufrufen wollen, hilft auch ein kleines JavaScript.

Da das Versenden der Mail normalerweise erfolgt, ohne daß der Anwender eine Meldung darüber bekommt, ist der Anwender oft verunsichert, ob jetzt überhaupt etwas passiert ist. Aus diesem Grund wird in dem zuletzt besprochenen Beispiel bei Betätigung des submit-buttons ein JavaScript-Alert ausgelöst, um den Anwender entsprechend zu benachrichtigen - sofern sein Browser JavaScript-fähig ist.


CGI und JavaScript

Mit CGI können auch die Eingabedaten eines Formulars (oder jegliche andere Daten) an eine neue HTML-Seite weitergegeben werden; in der aufgerufenen Seite verarbeitet dann ein JavaScript die übergebenen Daten. Dazu muß wieder die erste Zeile unseres Formulars geändert werden:

4. Beispiel

<form action="anzeig16.htm" method=GET>
Das sieht dann wieder genauso aus:

Suche nach :
groß/klein :

Wenn Sie dieses Formular abschicken, erscheint eine Seite, auf der die von Ihnen vorgenommenen Eingaben angezeigt werden. Außerdem finden Sie auf dieser Seite den Quellcode des verwendeten JavaScripts.
Mehr über JavaScript finden Sie in meiner Einführung
JavaScript für Alle!


CGI ohne Formular

Ein CGI-Programm kann nicht nur über ein Formular aufgerufen werden, sondern auch :

CGI Aufruf über einen Link :

5. Beispiel

<a href="http://www.bingo-ev.de/cgi-bin/ub/cgi-demo?BACK=/~ ub304/cgisampl.htm%23beisp4&text=hallo">Sag Hallo</a>

(Bitte beachten Sie, daß anstelle des Sonderzeichens "#" die Ersatzdarstellung %23 verwendet wurde !)

Das erscheint so :


Sag Hallo

CGI Aufruf als Image : z.B. Anzeigen eines Counters
6. Beispiel

<img src="http://www.bingo-ev.de/cgi-bin/ub/webcount?name=demo&font=tacho">
Damit ergibt sich folgendes Bild :


Ich hoffe, Ihnen mit diesen Ausführungen etwas weitergeholfen zu haben. Für Kritik und Anregungen bin ich immer aufgeschlossen.