JSP Usereingabe SEW(3.Jg) Unterlagen zu Java Server-Pages Teil 2 Inhalt 1 Zielsetzung... 1 2 Formulardaten bei dynamischen Webseiten... 2 2.1 Formulare mit HTML kreieren... 2 Formulare können einfach mit den folgenden HTML-Tags <form> und <input> erzeugt werden:... 2 2.1.1 Die Methode GET oder POST... 2 2.2 Verarbeitung der per HTML-Request übertragenen Daten... 3 3 Aufgaben... 4 3.1 Dreiparameteranzeige.jsp... 4 3.2 Pizza-Bestellseite mit Design... 4 1 Zielsetzung Lerne wie man dynamische Webprojekte mit Netbeans erstellt. Verstehen wie man normalen Java-Code mit HTML-Code mischen kann, und das Ganze dann in JavaServer Pages (JSP-Files) abspeichert. Lerne wie Webformulare ihre Werte an die nächste Einheit übergeben (Parameterübergabe) können.
2 Formulardaten bei dynamischen Webseiten Eine einfache Möglichkeit Usereingaben zu verarbeiten stellen Web-Formulare dar. 2.1 Formulare mit HTML kreieren Formulare können einfach mit den folgenden HTML-Tags <form> und <input> erzeugt werden: <H1> Mischen Sie zu Ihrer Speise drei Zutaten!</H1> <FORM action="dreiparameteranzeige.jsp" method="get"> Erste Zutat: <INPUT type="text" name="param1"><br> Bestandteil zwei: <INPUT type="text" name="param2"><br> Ingredienz drei: <INPUT type="text" name="param3"><br> <INPUT type="submit" value="fertig"> </FORM> Im Browser sieht das Ganze dann so aus: Mischen Sie zu Ihrer Speise drei Zutaten! Erste Zutat: Zweiter Bestandteil: Ingredienz drei: Wichtig sind folgende Attribute: action (Form) = beschreibt das Ziel, an welches die Formulardaten beim Absenden des Formulars übertragen werden sollen. Es ist eine Adresse (URI=Uniform Resource Identifier) eines Programmes (in unserem Fall ein JSP-File) auf dem Server-Rechner, das die Formulardaten weiter verarbeitet. method (Form) = Festlegung der Übertragungsmethode. siehe Kapitel 2.1.1 name (Input) = gibt den internen Bezeichnernamen an. Dieser vergebene Name wird beim Zielprogramm (JSP, durch das action Attribut definiert) benötigt, um auf die übertragenen Daten des Eingabefeldes zugreifen zu können, siehe Kapitel 2.2. 2.1.1 Die Methode GET oder POST Ein weiteres wichtiges Attribut bei HTML-Formularen ist das Attribut method. Dabei wird definiert, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte:
. Wird method="get" gewählt, hängt der Browser die Formulardaten als Parameter an die Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da get als Default- Einstellung definiert ist). Das Ziel-Programm (im Attribut action definiert) kann diese als Parameter übergebene Zeichenkette auslesen.. Wird method="post" gewählt, überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server (post = verschicken). Die Daten werden dann im HTTP-Header, also versteckt (nicht in der Adressleiste des Browsers) übertragen. Diese POST-Methode muss auf jeden Fall dann verwenden, wenn die Formulardaten zu umfangreich für die GET-Methode sind (Anzahl der übergebenen Zeichen je nach Browser auf ca. 2000 limitiert). 2.2 Verarbeitung der per HTML-Request übertragenen Daten Das im Form-Tag stehende Attribut action definierte Ziel (JSP-File), kann die per HTML- Request (durch absenden der Formulardaten) erzeugten Daten empfangen und wenn gewünscht zur Anzeige bringen. Die im vorangegangenen Formular verwendeten Bezeichnernamen (siehe Kapitel 2.1, Input-Tag und name-attribut ) werden hier wieder benötigt, um die eingegebenen Formulardaten wieder nach seiner Übertragung aus dem request wieder auszulesen. Im Ziel-JSP-File befinden sich dann ähnliche Codeteile: <%-- Die im request steckenden Daten werden durch Angabe des Bezeichnernamens in der Methode-getParameter() ausgelesen --%> <% String parameter1 = (String) request.getparameter("param1"); %> <%-- Ausgabe an die Oberfläche des Webbrowsers --%> <%= parameter1 %>
3 Aufgaben 3.1 Dreiparameteranzeige.jsp Erstelle ein neues Web-Projekt für die im vorigen Kapitel dargestellten Source-Code Fragmente: Erstelle ein neues Web-Projekt mit NetBeans Erstelle eine neue HTML-Datei: index.html, und füge den Formularcode ein. Erstelle eine neue JSP-Datei: dreiparameteranzeige.jsp, und stelle die vom User eingegebenen Werte dar, z.b. Sie haben folgende Zutaten gewählt: o <erste Zutat> o <zweite Zutat> o <dritte Zutat> Vielen Dank für ihre Auswahl! 3.2 Pizza-Bestellseite mit Design Erstelle ein JSP Webprojekt. Es soll mindestens zwei zusammenhängende Webseiten mit dem selben Design beinhalten. Das Design kann mit freien CSS-Templates (z.b. http://www.freecsstemplates.org ) erstellt werden. Gib am Ende der Übungseinheit das WebProjekt im Moodle ab! Seite 1: Die erste Seite soll durch einige Formularfelder gekennzeichnet sein. Die Eingabedaten können per GET (<form method= GET ) im Anzeigenfeld oder per POST versteckt im HTTP- Header übertragen werden.
Seite 2: Die Formulartextausgabe muss eine *.jsp Datei sein. Die zweite Seite ist eine Darstellung oder Auswertung der zuvor eingegebenen Daten.