4. Einen Webserver programmieren

4.3 Auf Benutzer-Input reagieren

Im letzten Abschnitt haben wir gelernt, wie der Server, in Abhängigkeit von dem angefragten URL, HTML-Seiten (oder was auch immer) generiert und zurückschickt. Dabei muss der URL nicht immer genau einer Datei entsprechen: zu dem Link <a href="unit/1">Rund ums Fahrrad</a> existiert keine Datei names 1 im Verzeichnis unit (obwohl das nicht verboten wäre; 1 ist ein legitimer Dateiname). Nein, der Server soll verstehen, dass er, wenn /unit/1 angefordert wird, dynamisch eine HTML-Seite als Antwort erstellen muss.

Die Interaktivität ist hier leider fundamental beschränkt. Der Nutzer kann nicht wirklich Daten eingeben, sondern nur zwischen endlich vielen, bereits vorgefertigten Möglichkeiten auswählen.

Richtige Nutzereingaben

Die obigen Übungen und Beispiele waren nur "zum Spaß", um zu demonstrieren, dass wir bereits jetzt Nutzereingaben lesen können, obwohl der ganze Mechanismus sehr grobschlächtig war. Natürlich stellt uns Html von sich aus bereits Werkzeuge zur Verfügung, mit Nutzerinput umzugehen. Als konkretes Beispiel wollen wir eine HTML-Seite mit zwei Eingabefeldern:

Klicken Sie auf index.html, geben zwei Namen ein und klicken Submit.

Das schaut auf den ersten Blick nicht gut aus. Werfen Sie aber einen Blick auf den URL in der Adresszeile:

Nachdem ich meinen Vor- und Nachnamen eingegeben und auf Submit geklickt habe, fordert mein Browser den URL mit dem Pfad

/enter-name?firstname=Dominik&lastname=Scheder

an. Man bezeichnet firstname=Dominik&lastname=Scheder auch als query string. Der Browser hat also aus den Eingabefeldern den Inhaltstext "rausgefischt" und in den URL eingebaut. Welchem Schema folgt er dabei? Die folgende Abbildung zeigt mit Farben, wie Elemente im HTML-Code und der Benutzer-Input mit dem Query-String zusammenhängen:

Alle farbig markierten Bezeichner können vom Entwickler, also von uns, frei gewählt werden. Sie müssen nur übereinstimmen. Sie dürfen also gerne alle Orange unterlegten Strings im Code durch "Nachname" ersetzen; der entsprechende Teil des Query-Strings würde sich dann auch zu Nachname ändern.

Wie kommt der Server an die Anfrageparameter?

Im Code unsers Servers (sagen wir, in Javascript geschrieben), könnten wir jetzt gezeilt nach den Zeichen ?, = und & im Query-String suchen und ihn dementsprechend zerlegen. Dann hielten wir die Werte, die der Benutzer eingegeben hat, in der Hand, und könnten beliebig darauf reagieren.

Fehlt nur noch, auf der Server-Seite den Code zu schreiben, der den Query-Strings in Parameter-Wert-Paare zerlegt. Natürlich müssen wir das nicht selbst tun. Dafür gibt es das Modul url. Hier sehen Sie, wie ich im REPL-Modus von Node einen URL zerlege:

node                            
var url = require('url')
var urlString = 'http://localhost:8080/enter-name?firstname=Dominik&lastname=Scheder'
var parsedUrl = url.parse(urlString, true);
parsedUrl.query
[Object: null prototype] { firstname: 'Dominik', lastname: 'Scheder' }
parsedUrl.query.firstname
'Dominik'

Die Funktion url.parse(urlString, true) zerlegt den urlString in seine Bestandteile. Spielen Sie mit obigen Code und lassen Sie sich das Objekt parsedUrl anzeigen:

parsedUrl           
[Probieren Sie's selbst aus!]

Insbesondere erzeugt es mit parsedUrl.query ein Objekt, dass bereits unsere Query-String-Parameter firstname und lastname als Schlüssel besitzt! Wir können jetzt also den Server-Code schreiben.