Eine besonders einfache und häufig gebrauchte Möglichkeit für Client-Server-Interaktion ist das Aufrufen und Versenden einer Email aus einem Link heraus. Der Code dafür ist sehr einfach:
<a href="mailto:m.mustermann@webmail.org">Schicken Sie mir eine Mail</a>
mailto:m.mustermann@webmail.org ist jedoch weder ein relativer Link noch ein absoluter http-Link ist, sondern eine Aufforderung an den Browser des Benutzers (des Clients), ein Emailprogramm zu öffnen. Dies kann je nach Voreinstellungen ein getrenntes Email-Programm sein, meist ist es jedoch das im Browser integrierte Email-Programm. Allerdings wird sich der Browser beschweren, wenn ihm diverse Angaben in der Konfigurierung seines Email-Programmes fehlen. Es muss nicht nur die Emailadresse des Benutzers eingetragen sein, sondern insbesondere auch ein Server, an den die Mail geschickt werden kann. Im IE für Mac ist dies z.B. unter Bearbeiten / Optionen / Email / Allgemein eintragbar. Es muss ein sog. smtp-Server (heißt wohl sendmail-TransferProtokoll-Server) eingetragen werden. Ansonsten weiß der Browser nicht, wohin er die Mail verschicken soll.
Dies ist ein sehr einfacher Fall von Client-Server-Interaktion. Durch die Voreinstellung mailto:+emailadresse wird ein im Benutzerbrowser voreingestellter Server angesteuert, die Mail dorthin verschickt und dort abgespeichert. Die im Email-Textfeld eingetragenen Informationen werden also nicht clientseitig weiterverwendet, sondern auf einem Server (den smtp-Server) abgespeichert, bis der Adressat sich seine Mail abholt.
Tipp: Sie können mit nachfolgendem Code erreichen, dass als Betreff bzw. Subject gleich eine Angabe (z.B. multimedia) eingetragen wird: mailto:m.mustermann@webmail.org?subject=multimedia Probieren Sie es aus (aber schicken Sie die Mail nicht ab, da es eine derartige Adresse nicht gibt). Dies ist also bereits ein einfacher Fall von vordefinierten Benutzereingaben.
Hinweis: Wenn Sie mit GoLive einen Link einrichten und im Inspektor eine Email-Adresse eintragen, wird das mailto: automatisch hinzugefügt.
9.2.2 Eingabeformulare auf html-Seiten
A: Erstellung von Formularen
A1: Formulare im html-Code
Wenn Sie unseren JavaScript-Modul durchgearbeitet haben, kennen Sie die Grundlagen der Formularerstellung in JavaScript bereits (siehe Modul 7.4.5). Für alle anderen finden Sie nachfolgend die entsprechende Vorschrift. Wir verwenden den Einbau mit GoLive (und ergänzen dadurch Modul 6 (GoLIve-Tutorial) um die entsprechende Option), geben Ihnen aber auch immer gleich den resultierenden html-Code an, damit Sie Ihre Formulare auch mit Hilfe eines Texteditors erstellen können.
In GoLive verwenden Sie die Formularpalette:
Von links nach rechts finden Sie folgende Objekte (Abb. rechts):
1. Reihe : Formular, Abschicken-Button, Zurücksetzen-Button, Schaltfläche allgemein, Bild als Schaltfläche, Beschriftung, Texteingabefeld, Kennworteingabefeld, Textbereicheingabefeld, Kontrollkästchen
2. Reihe von links nach rechts: Optionsfeld, Popup-Menu, Listenfeld, Dateibrowser, Unsichtbar, Verschlüsselung, Feldsammlung.
Die kursiven Objekte werden wir hier nicht behandeln, da sie für Standardanwendungen nicht sehr gebräuchlich sind. Bitte sehen Sie hierzu in der GoLive-Referenz nach.
Wie üblich ziehen Sie die Objekte einfach auf das Layoutfenster in Golive und geben die notwendigen Angaben via Inspektor ein.
Zuerst benötigen wir eine generelle Formulardefinition
GoLive: Ziehen Sie das Symbol "Formular" auf das Layoutfenster: Im GoLive-Inspektor können wir einen Formularnamen eingeben (optional, ggf. für JavaScript-Aktionen notwendig, unten wurde "testformular" angegeben). Lassen Sie die anderen Angaben (=Attribute) erst einmal unausgefüllt und setzen die Methode auf Standard.
Nun brauchen wir die Formulareingabe- bzw. Auswahlobjekte, welche innerhalb der Tags <form> und </form> stehen müssen.
Wir gehen nicht nach der Reihenfolge der oben aufgeführten Objekte vor, sondern gehen nach Kategorien vor. Für alle Objekte können Sie Namen angeben, die meist optional sind (nur für Optionsfelder obligatorisch sind). Wenn Sie Formulare mit JavaScript-Funktionalität ausstatten wollen, sind Namen wichtig. Die meisten Formularobjekte verwenden den <input>-Tag.Ich gehe nachfolgend jeweils nur auf die wichtigsten Attribute ein.
Textfeldeingabe bzw. Passworteingabe
GoLive: Textsymbol innerhalb des durch das Symbol Formular angezeigten Platzhalter-Rahmen ziehen. Sie können neben Textsymbolen übrigens ganz normalen html-Code verwenden. Sie können das Textfeld beliebig weit aufziehen, wodurch die sichtbare Länge (in Zeichen) angegeben wird. Sie können die max. Zeichenlänge begrenzen. In einem Textfeld ist nur eine einzeilige Eingabe möglich.
value: durch Verwendung des Attributs value="bitte Namen eingeben" hätten Sie im Formular bereits einen Text vorgeben können. Dieser könnte dann vom Benutzer übertippt werden. In GoLive bewerkstelligen Sie dies durch Eintrag in das Inspektorfeld Inhalt.
hidden: durch Änderung des Attributs type von "input" auf "hidden" können Sie ein dem Benutzer nicht sichtbares Textfeld ggf. mit einem vorgegebenen Inhalt angeben. Dies wird dann ebenfalls mit verschickt. Die Längenangaben sind dann nicht nötig. Folgender Code wäre möglich:
<input type="hidden" value="abgeschickt von modul 9.2" name="hiddenName">
In GoLive verwenden Sie das entsprechende Objekt.
Tipp: Hidden-Felder können auch ohne value angegeben werden. Der Value wird dann durch ein JavaScript eingetragen. So kann z.B. der Browsertyp und die Browserversion oder auch das Betriebssystem oder die Bildschirmweite des Nutzers ausgelesen werden und automatisch in das Feld eingetragen werden. Diese Angaben werden dann mitverschickt. Entsprechende Beispiele finden Sie in Modul 7. Sensible Daten können jedoch nicht ausgelesen werden (siehe Modul 7).
Passworteingabe: Wenn Sie das Attribut type auf "passwort" ändern, wird die Eingabe nur durch Punkte angezeigt, so dass die Eingabe nicht lesbar ist. In GoLive hätten Sie dies durch Anklicken der entsprechenden Option Kennwortfeld bzw. durch Verwendung des Objektes Kennwort erreichen können.
Textbereichseingabe:
Mehrzeiliger Text kann in sog. Textbereiche (textarea) eingegeben werden. Die angezeigte Textbereichgröße wird in Zeilenzahl und Zeichenbreite angegeben.
GoLive: Die zu machenden Angaben im Textbereichsinspektor sind überwiegend selbsterklärend. Lassen Sie den Umbruch am besten auf Standard. Im Datenfeld können Sie wiederum Vorgabe-Text eingeben.
html-Code:
<textarea name="textareaName" cols="37" rows="4">Erläutern Sie in Stichworten den Unfallhergang:</textarea>
Der Vorgabe-Text wird hier vom <textarea>Tag eingerahmt. Die textarea ist eines der wenigen Beispiele, bei denen kein <input>-Tag verwendet wird.
### Umbruchsmöglichkeiten noch erläutern ###
Popup-Menu und Listenfelder:
Anstelle von Benutzereingaben kann hier der Benutzer aus einer vordefinierten Optionsliste auswählen:
Beispiel: Wählen Sie Ihr Lieblingsobst:
GoLive: Die entsprechenden Eintragungen im Popup-Menu-Inspektor sind selbsterklärend. Sie können beliebig viele Eintragungen vornehmen. Der Wert der Eintragung muss nicht der Beschriftung entsprechen. Nur die Werte werden beim Abschicken des Formulars übertragen. Wenn Sie Mehrfachauswahl aktivieren, kann bei gedrückter Hochtaste mehrfach ausgewählt werden.
Auch die Popup-Menus (select) verwenden kein input-Tag. Es werden auch hier nur die Values übertragen. Im obigen Beispiel sind sie englisch. Vielleicht haben Sie ja verschiedene Sprachversionen Ihrer Seite gemacht. Egal, welche Sprache jedoch vorliegt, es soll vielleicht immer nur values in englisch abgeschickt werden (um auf dem Server vielleicht eine Statistik anzulegen).
Variationen: im obigen Beispiel ändern wir size auf 3 und geben multiple an, also:
<select name="selectfruit" size="3" multiple>
Mit size="3" wird unser popup-Menu zu einem Listenmenu (es werden 3 Einträge dargestellt). Multiple bewirkt, dass wie oben geschildert, Mehrfachauswahl möglich ist. In GoLive hätten wir dies erreicht, indem wir im popup-Menu-Inspektor bei Zeilen 3 eingegeben hätten und Mehrfachauswahl aktivieren. Alternativ können wir das Listenfeldsymbol verwenden.
Kontrollkästchen (Checkboxes):
Beispiel:
Wählen Sie Ihr Lieblingsobst:
Äpfel Birnen Orangen
html-code: Nachfolgend der Code für den gesamten Abschnitt; der Code für die Checkboxes ist zur besseren Übersicht rot markiert.
Kontrollkästchen (Checkboxes) dienen der Mehrfachauswahl, es kann nur eine oder aber mehrere (sogar alle) Checkboxen gewählt werden. Der Name aller zu einem Set gehörenden Checkboxen muss gleich sein (er muss zwingend angegeben werden). Es können auch eine oder mehrere mit dem Attribut checked als als vorausgewählt angegeben werden.
Hinweis: es sind beliebige Formatierungen möglich. Oben habe ich einige feste Leerzeichen als Abstandshalter eingegeben ( ). Checkboxen und alle anderen Formularelemente können aber auch in einzelnen Tabellenzellen sitzen oder anders formatiert sein, sie müssen sich nur innerhalb der <form> und </form>-Tags befinden.
GoLive: Mit obigen Erläuterungen sollten die entsprechenden Inspektoroptionen selbsterklärend sein.
Optionsfelder (Radiobuttons)
Sehr ähnlich zu oben sind Radiobuttons. Sie erscheinen jedoch nicht als eckiges Kästchen, sondern als runder Kreis. Bei Auswahl besitzen sie einen schwarzen Punkt. Im Unterschied zu oben kann jeweils nur ein Button ausgewählt werden. Probieren Sie es aus.
oben nur ein Beispiel für den Apfel-Radiobutton. Eine Voraktivierung kann wieder durch checked angegeben werden. Auch hier ist wieder ein gemeinsamer Name für alle input-Objekte notwendig.
GoLive: Analog oben. Einziger Unterschied: Statt Name gibt es nun im Inspektor ein Eingabefeld Gruppe. Meint aber genau dasselbe. Es muss für alle Knöpfchen ein gemeinsamer Name eingegeben werden.
Nun benötigen wir noch Schaltflächen, um die getätigten Formulareingaben abschicken bzw. ggf. löschen zu können. Hierzu gibt es folgende Möglichkeiten:
Absenden / Zurücksetzen (Submit / Reset)
GoLive: Der Einbau mit GoLive ist sehr einfach. Ziehen Sie ein Submit-Symbol auf das Formularfeld im Layoutmodus. Optional ist eine andere Beschriftung. Sie können auch auf Reset-Knopf umstellen oder direkt das Reset-Symbol verwenden.
In obigem Beispiel wurde der Standardtext für den submit-Button gelassen (in einer englischen Browserversion würde sie "submit" heißen), für den reset button wurde sie vom Standard "zurücksetzen" auf "löschen" geändert (in einer englischen Browserversion bliebe sie ebenfalls auf "löschen"). Für den Resetknopf ist kein Name vorgesehen.
Variationen:
Auch ein Bild ist als Button denkbar. Der Einbau in GoLive funktioniert mit dem entsprechenden Bild-Symbol in der Formularobjektpalette. Soll abschicken bei Mausklick ausgelöst werden, kann ein entsprechendes JavaScript eingesetzt werden.
Im Header des dokuments muss dann noch das entsprechende JavaScript stehen, z.B.
<script language="JavaScript>
function abschicken ()
{
window.document.forms[0].submit();
}
</script>
Damit wird das erste auf der html-Seite befindliche Formular abgeschickt. Näheres finden Sie im JavaScript Modul (Modul 7).
Freikonfigurierbare Schaltfläche (Button)
Anstelle des <input type="submit" ..>-Felds zur Erstellung eines submit-Knopfes können seit html 3.2 auch Schaltflächen mit dem button-Tag erstellt werden.
Beispiel für oben: <button type="submit" name="buttonName" value="">jetzt aber los</button>
Durch den Typ wird angegeben, um welche Schaltfläche es sich handelt. Möglich für das Attribut type sind: submit, reset oder button. Value ist nur optional und v.a. bei submit und reset nicht möglich. Mit dem Typ normal kann z.B. ggf. ein JavaScript ausgelöst werden. Dieses könnte über value aufgerufen werden.
Solche Schaltflächen sind auch in GoLive mit dem entsprechenden Objektsymbol erstellbar.
Weitere Möglichkeiten: Häufig wird bei Eingaben mit dem Tabulator zum nächsten Feld gesprungen. Wenn Sie eine bestimmte Reihenfolge dabei vorgeben wollen (weil z.B. die Eingabebereiche in Spalten angeordnet sind), können Sie jeweils noch einen Tabulatorindex als Attribut angeben, z.B. tabindex="2". Dies wäre also das zweite Eingabefeld, welches via Tabulatoreingabe angesprungen wird.
A2: Formulare in weiteren Formaten:
Auch mit Flash und Acrobat sind Formulare erstellbar. Auch hier können Daten verschickt werden. Wir gehen aber hier nicht näher auf die Möglichkeiten ein, sondern fokussieren auf die html-Formulare.
B: Test der Eingabe vor dem Abschicken (optional)
Im JavaScript-Teilmodul 7.4.5 haben wir Sie bereits umfassend darüber informiert, wie Sie Formulare vor Abschicken auf Richtigkeit der gewünschten Eingaben testen können. Möglich ist z.B. das Abklären der richtigen Länge der Eingabe, der erlaubten Zeichen (z.B. für Telefonnummern), des Vorhandenseins des @-Zeichens in einer Email-Adresse, das Fehlen von Umlauten in Email-Adressen und vieles mehr. In Teilmodul 7.4.5 haben Sie auch gelernt, wie html-Formulare nicht nur zum Abschicken von Daten verwendet werden können, sondern auch für clientseitige Rechner, Frage-Antwort-Projekte und sonstige, mit JavaScript programmierbare Dinge. Auch Flash-Formulare können via Action Script entsprechend getestet bzw. verwendet werden.
Hinweis: Wenn kein Eingabetest stattfindet, wird es dennoch ggf. einen Test der Eingaben geben, allerdings erst nach dem Abschicken. Für den Fall, dass die Eingaben zu einer Datenbank geschickt werden, welche z.B. Daten für Felder nur annimmt, falls dort Eingaben gemacht wurden, kann es bei fehlenden Eingaben dazu kommen, dass der Server die Daten nicht annimmt und eine Fehlermeldung zurückschickt. Näheres siehe 9.2.3.
C: Weitere Verwendung von Formularen
Wir müssen uns nun überlegen, was mit den Formulareingaben passieren soll, wenn auf den Submit-Button gedrückt wird. Bislang passiert noch gar nichts, da unser Formular noch keine Anweisungen enthält, was diesbezüglich passieren soll.
Wir können mit unseren Formulareingaben zwei grundsätzlich verschiedene Dinge anstellen:
Verwendung der Formulare für Frage-Antwort-Projekte mit JavaScript.
Formulare sind sehr sinnvoll für derartige Projekte (Rechner, Testabfragen etc.). Entweder direkt nach der Eingabe oder aber bei Drücken auf den Submit-Button werden JavaScripts abgearbeitet und die entsprechenden Ergebnisse durch Alertboxen, in Popup-Browserfenstern oder durch automatischen Eintrag in Formular-Elementen angegeben. Entsprechende Beispiele finden Sie in unserem JavaScript-Kursmodul (siehe Anhang zu Modul 7). Viele interessante Frage-Antwort-Skripte, die auf Formularen basiern, finden Sie auf Stefan Krumms JavaScript-Seite: http://www.geol.uni-erlangen.de/javascript/
Abschicken der Formulareinträge an einen Server
Mit diesem Thema beschäftigen wir uns im Nachfolgenden.
Um die Formulareingaben abschicken zu können, müssen wir im Formula noch eintragen, welche Aktion aufgerufen werden soll, wenn wir das Formular abschicken.
Dafür gibt es zwei verschiedene Möglichkeiten:
Verschicken der Formularangaben als Emaildaten an eine Emailadresse
Verschicken der Formularangaben an einen sonstigen Server (z.B. Datenbankserver), der die Daten in geeigneter Weise weiterverarbeitet.
Für 2 brauchen Sie Zugang zu einem entsprechenden Server, um dessen Konfiguration einzurichten (oder Sie haben anderweitige genaue Anweisungen, wie Sie vorgehen müssen - jedenfalls müssen Sie die Struktur der Datenbank und das verwendete cgi bzw. die verwendete serverseitige Skriptsprache genau kennen, siehe weiter unten). Häufig wird deshalb für einfache Lösungen auch auch 1 verwendet werden.
1. Verschicken als email
Wir geben in den Formtag eine entsprechende Aktion ein, für emails lautet der code dann:
Die Aktionsangabe ist eindeutig. Wichtig ist noch, dass Sie das Attribut enctype mit dem Wert text/plain angeben, sonst kommt ein großes Kauderwelsch, da alles codiert ankommt (also auch Leerzeichen, Sonderzeichen etc.). Sie sollten auch das Attribut method mit dem Wert post angeben (näheres dazu gleich unten). In GoLive machen Sie die entsprechenden Angaben im Forminspektor. Geben Sie bei Aktion die obenstehende mailto:email-Adresse ein, unter Verschlüsselung text/plain und wählen als Methode separat senden. Ergibt genau obenstehenden Code.
Damit können die Formulareingaben an die angegebene Email-Adresse geschickt werden. Voraussetzung ist, dass der Benutzer in seinem Browser wieder ein Email programm konfiguriert hat (siehe unter 9.2.1). Die entsprechenden Daten kommen nach dem Muster:
Diese Angaben können Sie dann ggf. leicht in ein datenbankfähiges Format umwandeln (z.B. durch Austausch des istgleich-Zeichens gegen einen Tabulator) und auf Ihrem Rechner in eine Datenbank einspeisen.
Erfahrungsgemäß schicken Nutzer lieber ein Feedback via Formulareingaben, als ein Emailprogramm aufrufen zu müssen.
Tipp: Beim Abschicken eines Formulars als Email gibt es keine Bestätigung, dass alles korrekt abgelaufen ist. Dies können Sie jedoch mit Hilfe von JavaScript einbauen. Einige Beispiele hierzu finden Sie in Kursmodul 7.4.5
2. Verschicken an einen Web- oder Datenbankserver zur weiteren Verarbeitung
Dies ist die normale Methode des Versendens von Formulareingaben. Wichtig ist hierbei zum ersten die Versendemethode:
method="get"
Dies bedeutet, dass die Formulardaten als url verschickt werden, also wie z.B. in unserem Beispiel aus 9.1: http://www.google.de/search?hl=de&q=Acrobat+Tutorial&btnG=Google-Suche&meta=cr%3DcountryDE
Hier können jedoch nur max. 4 kb an Daten mitverschickt werden, in GoLive heißt dies deshalb "anhängen". Für lange Texteingaben kann dies zuwenig sein. Außerdem sieht der Benutzer die Daten in der Adresszeile seines Browsers beim Abschicken. Insgesamt ist diese Methode nicht besonders sicher, aber für viele Anwendungen ausreichend.
method="post"
Damit werden die Daten im Headteil eines http-Dokuments verschickt und sind somit nicht ohne weiteres einsehbar. Ist meist vorzuziehen, hängt aber z.T. von der Datenbankprogrammierung ab.
Damit werden die Formulareingaben mit der Methode get an die angegebene URL weitergeleitet. Dort wird durch die URL eine Seite aufgerufen, die Skriptbefehle beinhaltet, die serverseitig abgearbeitet werden. Danach wird ein Ergebnis an die anfragende URL zurückgeschickt. Näheres hierzu in Modul 9.3.
Als Action wird hier ein spezieller Datenbanktyp (FMPro für FilmeMakerPro) angegeben. Alles nähere regeln hidden input-Felder, die u.a. den Datenbanknamen (hier Dienstaufgaben_Liste), einen sog. Layoutnamen (hier Eingabe), sowie eine Formatdatei (hier search_results) angeben. In letztere werden die Abfrage-Ergebnisse eingetragen. Es können auch noch weitere Optionen in hidden-Feldern angegeben werden. Nähere Erläuterungen finden Sie ebenfalls in Modul 9.3.
Oft finden Sie innerhalb der action-Angaben auch Begriffe wie cgi bzw. eine URL-Endung mit .asp, jsp oder php. Dies weist alles darauf hin, dass die Formulareingaben vom Server weiterverarbeitet werden sollen (siehe Modul 9.3).
Je nach Ziel müssen ggf. noch Verschlüsselungsarten mit dem Attribut enctype (siehe unter Senden als Email) angegeben werden. In Frage kommen unter anderem enctype="multipart/form-data" oder enctype="application/x-www-form-urlencoded"
Nun sind also Ihre Daten auf dem Server angelangt und wir werden im zweiten Teil von Modul 9.3 sehen, was damit auf dem Server geschieht. Wir müssen allerdings zuvor etwas ausholen und im ersten Teil von Modul 9.3 einiges Grundsätzliche zu Serverkonfigurationen und den damit verbundenen Möglichkeiten erläutern.
>> Modul 9.3: servereitige Aspekte von Client-Server-Interaktionen
<< Modul 9.1: Client-Server-Interaktionen: Einleitung
In GoLive verwenden Sie die Formularpalette: