Internetapplicaties - II Gegevensinvoer 1 Internetapplicaties Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP

Internetapplicaties - II GegevensinvoerInternetapplicaties - II Gegevensinvoer 11

InternetapplicatiesInternetapplicatiesDeel 2: Gegevensinvoer:Deel 2: Gegevensinvoer:

HTML-forms, JavaScript en JSPHTML-forms, JavaScript en JSP


Boeken/tutorials:Boeken/tutorials:

Beginning JSP Web Development, WroxBeginning JSP Web Development, Wrox Vooral hfdst. 3Vooral hfdst. 3

JavaScript By Example, QUEJavaScript By Example, QUE Google: online html tutorialGoogle: online html tutorial

……


Hoe passen de 3 elementen in Hoe passen de 3 elementen in elkaar ?elkaar ?

HTML-formsHTML-forms GUI-elementen voor de invoerGUI-elementen voor de invoer

Client-side JavaScriptClient-side JavaScript Validatie (controle van ingevoerde gegevens)Validatie (controle van ingevoerde gegevens)

Server-sideServer-side ValidatieValidatie Verwerking doorgestuurde geg. via JSPVerwerking doorgestuurde geg. via JSP

Dataverkeer moet beperkt blijven ivm de Dataverkeer moet beperkt blijven ivm de performantieperformantie


HTML-form, algemeenHTML-form, algemeen

Electronisch invoerformulierElectronisch invoerformulier Via éénvoudige tags in een .html- of .jsp-pagina Via éénvoudige tags in een .html- of .jsp-pagina

op te stellenop te stellen De gebruiker voert zijn gegevens in en kan dan: De gebruiker voert zijn gegevens in en kan dan:

Ofwel op SUBMIT duwen om de gevevens door te Ofwel op SUBMIT duwen om de gevevens door te sturen van de client naar de server.sturen van de client naar de server.

Ofwel op RESET duwen om de gegevens leeg te Ofwel op RESET duwen om de gegevens leeg te maken.maken.

Zonder CGI, JSP e.d. hebben forms weinig zin. Zonder CGI, JSP e.d. hebben forms weinig zin. Alleen mailen van de data is dan zinvol.Alleen mailen van de data is dan zinvol.


HTML-formHTML-form

We zullen leren uit voorbeelden, die nadien We zullen leren uit voorbeelden, die nadien worden verklaard.worden verklaard.

U creëert folder en bestand:U creëert folder en bestand:

c:\jakarta-tomcat-4.1.27\c:\jakarta-tomcat-4.1.27\webapps\hfdst2\Broodjes.htmlwebapps\hfdst2\Broodjes.html

U tikt de html-code die volgt in dit bestand in.U tikt de html-code die volgt in dit bestand in.


HTML-form, codeHTML-form, code

<html><html>

<head><head>

<title>Broodjes on-line</title><title>Broodjes on-line</title>

</head></head>

<body><body>

<form action=“verwerk.jsp” method=“post”><form action=“verwerk.jsp” method=“post”>

<i>Naam:</i><br><i>Naam:</i><br>

<i>Adres:</i><br><i>Adres:</i><br>

<i>Telefoon:</i><br><i>Telefoon:</i><br>

</form></form></body></body>

</html></html>


HTML-form, code (vervolg)HTML-form, code (vervolg)

<form action=“verwerk.jsp” method=“post”><form action=“verwerk.jsp” method=“post”> <i>Naam:</i><i>Naam:</i> <input type=“text” name=“naam”<input type=“text” name=“naam”

size=“35”>size=“35”><br>…<br>…<i>Adres:</i><i>Adres:</i>

<input type=“text” name=“adres” <input type=“text” name=“adres” size=“45”> size=“45”><br><br>

<i>Telefoon:</i><i>Telefoon:</i> <input type=“text” name=“telefoon” <input type=“text” name=“telefoon” size=“45”> size=“45”><br><br><br><br>

</form></form>


U creëert de mappen:U creëert de mappen:c:\jakarta-tomcat-4.1.27\webapps\hfdst2\c:\jakarta-tomcat-4.1.27\webapps\hfdst2\WEB-INFWEB-INF (voor html-files volstaat deze folder)(voor html-files volstaat deze folder)

en hierbinnen: en hierbinnen: ..\..\WEB-INF\WEB-INF\classesclasses..\..\WEB-INF\WEB-INF\binbin

Start/Run, Tik URL in:Start/Run, Tik URL in: http://localhost:8080/hfdst1/Broodjes.htmlhttp://localhost:8080/hfdst1/Broodjes.htmlOFOF c:\jakarta-tomcat-4.1.27\webapps\hfdst2\c:\jakarta-tomcat-4.1.27\webapps\hfdst2\Broodjes.htmlBroodjes.html

Dit keer (html-file) maakt het niks uit of je via de URL (dus Dit keer (html-file) maakt het niks uit of je via de URL (dus via de webserver) of vanuit je locale filesysteem werkt via de webserver) of vanuit je locale filesysteem werkt (dubbelklikken op het bestand volstaat nu).(dubbelklikken op het bestand volstaat nu).


Resultaat form I:Resultaat form I:


HTML-form, code (vervolg)HTML-form, code (vervolg)……

<form <form action=“verwerk.jsp” method=“post”action=“verwerk.jsp” method=“post”>>… … ervoor: code van vorige slideservoor: code van vorige slides

<b>Levering:</b><br><b>Levering:</b><br> <input name = "levering" type = "radio“<input name = "levering" type = "radio“

value = "Winkel"> value = "Winkel"> WinkelWinkel <br> <br> <input name = "levering" type = "radio“<input name = "levering" type = "radio“ value = "Thuis" value = "Thuis" checkedchecked> > ThuisThuis <br><br> <br><br> <b>Bestelde broodjes:</b><br><b>Bestelde broodjes:</b><br>

<input type = "checkbox" name = "Soms Kaas“<input type = "checkbox" name = "Soms Kaas“Value = "Yes" >Value = "Yes" >Smos KaasSmos Kaas<br><br>

<input type = "checkbox" name = "Soms Hesp“<input type = "checkbox" name = "Soms Hesp“Value = "Yes" >Value = "Yes" >Smos hespSmos hesp<br><br><br><br>

<input type = "submit" value = "Nu Bestellen"><input type = "submit" value = "Nu Bestellen"></form></form>……


Resultaat form II:Resultaat form II:


OpmerkingenOpmerkingen

action-attribuut van de form-tag:action-attribuut van de form-tag: bepaalt wat er moet gebeuren als de submit-knop bepaalt wat er moet gebeuren als de submit-knop

wordt geactiveerdwordt geactiveerd Zal bij ons een jsp-bestand aanroepen. zie verderZal bij ons een jsp-bestand aanroepen. zie verder

method-attribuut van de form-tag:method-attribuut van de form-tag: get: de ingegeven data worden achteraan de URL-get: de ingegeven data worden achteraan de URL-

geplakt als volgt:geplakt als volgt: Verwerk.jsp?naam=niki+meulemans&adres=naamsevest+96Verwerk.jsp?naam=niki+meulemans&adres=naamsevest+96

post: de doorgegeven data zijn onzichtbaarpost: de doorgegeven data zijn onzichtbaar name-attribuut van diverse tags:name-attribuut van diverse tags:

dient om naar de ingegeven invoer te kunnen dient om naar de ingegeven invoer te kunnen verwijzen tijdens de verwerking door de jsp-code)verwijzen tijdens de verwerking door de jsp-code)


Opmerkingen: radio-knopOpmerkingen: radio-knop

De < input type = “radio” … >-control:De < input type = “radio” … >-control: Bij elkaar horende radio-knoppen Bij elkaar horende radio-knoppen moetenmoeten dezelfde dezelfde

naamnaam dragen. Selecties sluiten elkaar dan uit. dragen. Selecties sluiten elkaar dan uit. Door Door checked checked te schrijven, is deze knop default te schrijven, is deze knop default

geselecteerdgeselecteerd De De value=“..” value=“..” bepaalt de waarde tijdens de bepaalt de waarde tijdens de

verwerking, maar is niet zichtbaar op de paginaverwerking, maar is niet zichtbaar op de pagina <input name = "levering" type = "radio“<input name = "levering" type = "radio“

value = "Winkel"> value = "Winkel"> WinkelWinkel <br> <br>

<input name = "levering" type = "radio“<input name = "levering" type = "radio“

value = "Thuis“ value = "Thuis“ checkedchecked > > ThuisThuis <br><br> <br><br>


Opmerkingen: checkboxOpmerkingen: checkbox De <input type = “checkbox” …>-control:De <input type = “checkbox” …>-control:

Bij elkaar horende checkboxen Bij elkaar horende checkboxen kunnenkunnen dezelfde dezelfde naamnaam dragen dragen

De De value=“..” value=“..” bepaalt de waarde tijdens de bepaalt de waarde tijdens de verwerking, maar is niet zichtbaar op de paginaverwerking, maar is niet zichtbaar op de pagina

<input type = "checkbox" name = "Soms Kaas“<input type = "checkbox" name = "Soms Kaas“

Value = "Yes" >Value = "Yes" >Smos KaasSmos Kaas<br><br>

In geval 2 checkboxen zelfde naam hebben & beide In geval 2 checkboxen zelfde naam hebben & beide aangeklikt zijn: beide values woren doorgegeven:aangeklikt zijn: beide values woren doorgegeven:

<<input type = "checkbox" name = “Broodjes“input type = "checkbox" name = “Broodjes“

Value = “Kaas" >Value = “Kaas" >Smos KaasSmos Kaas<br> (NIET BIJ ONS !!!)<br> (NIET BIJ ONS !!!)<input type = "checkbox" name = “Broodjes“<input type = "checkbox" name = “Broodjes“

Value = “Hesp" >Value = “Hesp" >Smos HespSmos Hesp<br> (NIET BIJ ONS !!!)<br> (NIET BIJ ONS !!!)


Extra controls: Extra controls: selectselect-listbox, reset--listbox, reset-knopknop

……<b>Grootte</b><br><b>Grootte</b><br>

<select name = “grootte”><select name = “grootte”> <option>piccolo/option><option>piccolo/option> <option <option selectedselected>half stokbrood</option>>half stokbrood</option> <option>heel stokbrood</option><option>heel stokbrood</option> </select><br><br></select><br><br>

<input type = "submit" value = "Nu Bestellen"><input type = "submit" value = "Nu Bestellen"> <input type = “reset" value = “Defaults"><input type = “reset" value = “Defaults">

</form></form>……


Resultaat form III:Resultaat form III:


Opmerkingen: selectOpmerkingen: select

De <select>-control:De <select>-control: Geeft drop-down listbox of multi-select Geeft drop-down listbox of multi-select

listbox. listbox. Via <option>…</option>, verschillende Via <option>…</option>, verschillende

keuzes aangevenkeuzes aangeven Er is 1 naam voor alle opties.Er is 1 naam voor alle opties. Door Door selected selected te schrijven, is deze te schrijven, is deze

option default geselecteerd.option default geselecteerd.


select (vervolg)select (vervolg)

Multiple attribuut (niet in onze code)Multiple attribuut (niet in onze code) Maakt keuze van verschillende opties Maakt keuze van verschillende opties

tegelijktegelijk mogelijk (CTRL+klik) mogelijk (CTRL+klik) In geval meer dan 1 keuze gemaakt is: In geval meer dan 1 keuze gemaakt is:

beide values woren doorgegeven:beide values woren doorgegeven:<select name = “saus” <select name = “saus” multiplemultiple>>

<option>mosterd </option> (NIET BIJ ONS !!!)<option>mosterd </option> (NIET BIJ ONS !!!)

<option>ketchup </option> (NIET BIJ ONS !!!)<option>ketchup </option> (NIET BIJ ONS !!!)

</select ><br><br></select ><br><br>


select (vervolg)select (vervolg)

value attribuut (niet in onze code)value attribuut (niet in onze code) Als die er is wordt de bebehorende value Als die er is wordt de bebehorende value

doorgegeven bij selectie.doorgegeven bij selectie. Als die ontbreekt, wordt tekst tussen Als die ontbreekt, wordt tekst tussen

<option></option> doorgegeven bij selectie.<option></option> doorgegeven bij selectie. Belangrijk als je denkt dat de zichtbare tekst meer Belangrijk als je denkt dat de zichtbare tekst meer

veranderlijk is dan de valuesveranderlijk is dan de values<select name = “burgstaat” ><select name = “burgstaat” >

<option <option value=value=“0” >getrouwd </option> “0” >getrouwd </option> <option <option value=value=“1” >alleenstaand </option>“1” >alleenstaand </option>

<option <option value=value=“2” >weduwe/naar</option>“2” >weduwe/naar</option> </select ><br><br></select ><br><br>


Opmerkingen: reset-knopOpmerkingen: reset-knop

De <input type = “reset” …>-De <input type = “reset” …>-control:control: Functie is vast bepaald:Functie is vast bepaald:

Leegmaken van de invoerveldenLeegmaken van de invoervelden Value-attribuut geeft de tekst in de Value-attribuut geeft de tekst in de

knop weerknop weer


Java-Script, 1e kennismakingJava-Script, 1e kennismaking

Overzichtje: Overzichtje: JavaScript en Java als talenJavaScript en Java als talen JavaScript functie’s als validatieJavaScript functie’s als validatie In ons voorbeeldjeIn ons voorbeeldje opmerkingenopmerkingen


Java en JavaScript als talenJava en JavaScript als talen

JAVAJAVAIn .java-files of binnen 1In .java-files of binnen 1<%... >%> <%... >%> tagtag

String str = “Hello;String str = “Hello;int i = 0;int i = 0;

float netto(float float netto(float bru,float tax){bru,float tax){return bru-tax;return bru-tax;

}}

JavaScriptJavaScriptInIn .html/.jsp .html/.jsp--filesfilesBinnenBinnen <script <script

language=“JavaScript”>…language=“JavaScript”>…</script> </script> tagstags

var str = “Hello”;var str = “Hello”;var i = 0;var i = 0;

function netto( bru,tax){function netto( bru,tax){return bru-tax;return bru-tax;

}}


Java en JavaScript als talenJava en JavaScript als talen JAVAJAVApublic class Persoon{public class Persoon{

public String naam = public String naam = “Jef”;“Jef”;public int gebJaar =public int gebJaar =1970; 1970;

} } Persoon p = new Persoon();Persoon p = new Persoon();int i = p.gebJaar;int i = p.gebJaar;

String[] fruit = String[] fruit = {“appel”,”peer”};{“appel”,”peer”};

JavaScriptJavaScriptfunction Persoon{function Persoon{

this.naam = “Jef”;this.naam = “Jef”;this.gebJaar = 3;this.gebJaar = 3;

} }

var p = new Persoon();var p = new Persoon();var i = p.gebJaar;var i = p.gebJaar;

function rijtje{function rijtje{return rijtje.arguments;return rijtje.arguments;}// héél vreemd}// héél vreemd

var fruit = new var fruit = new rijtje(“appel”,”peer”);rijtje(“appel”,”peer”);


Java en JavaScript als talen Java en JavaScript als talen

JAVAJAVA General purposeGeneral purpose

Gecompileerd tot Gecompileerd tot bytecode, sterk bytecode, sterk getypeerdgetypeerd

Declaratie met typeDeclaratie met type OO: klassen, OO: klassen,

overervingovererving

JavaScriptJavaScript Leeft binnen Leeft binnen

browserwereldbrowserwereld Tekstueel Tekstueel

geïnterpreteerd, zwak geïnterpreteerd, zwak getypeerdgetypeerd

Declaratie zonder typeDeclaratie zonder type Bijna OO: Bijna OO:

eigenaardige object-eigenaardige object-creatie creatie klasse=functie=arrayklasse=functie=array


JavaScriptfuncties als valdidatieJavaScriptfuncties als valdidatie

……

<head><head>

<title>Broodjes on-line</title><title>Broodjes on-line</title>

<script language="JavaScript"><script language="JavaScript">

//HIER KOMT DE SCRIPT-CODE://HIER KOMT DE SCRIPT-CODE:

function checkVeld(veld, benaming){function checkVeld(veld, benaming){ …}…}

</script></script>

</head></head>

……

//HIER WORDT DE SCRIPT-CODE AANGEROEPEN://HIER WORDT DE SCRIPT-CODE AANGEROEPEN:

<input type=“text” name=“naam” size=“35”<input type=“text” name=“naam” size=“35” onBlur='checkVeld(this,"naam")' onBlur='checkVeld(this,"naam")' >>


JavaScriptfuncties als valdidatieJavaScriptfuncties als valdidatie

function checkVeld(veld, benaming){function checkVeld(veld, benaming){

if ( veld.value == "" ) if ( veld.value == "" )

alert(benaming + " moet ingevuld worden");alert(benaming + " moet ingevuld worden");

else if ( veld.value.length < 2 ) else if ( veld.value.length < 2 )

alert(benaming + alert(benaming +

" moet minstens 2 karakters hebben");" moet minstens 2 karakters hebben");

elseelse

return;return;

veld.focus() ;veld.focus() ;

return;return;

}}


Resultaat JavaScript:Resultaat JavaScript:



Aanroep als gevolg van een Aanroep als gevolg van een event:event: <input type=“text” name=“naam” size=“35”<input type=“text” name=“naam” size=“35” onBlur='checkVeld(this,"naam")' onBlur='checkVeld(this,"naam")' >>

(vb: (vb: onBluronBlur--event: gebeurt als de control uit focus is)event: gebeurt als de control uit focus is)

Gebruik van een specialeGebruik van een speciale variabele variabele om te om te verwijzen naar een element uit het html-verwijzen naar een element uit het html-document: document: thisthis



Ingebouwde objecten met properties Ingebouwde objecten met properties (data-fields), gescheiden door een punt:(data-fields), gescheiden door een punt:if ( veld.value == "" )if ( veld.value == "" )

Objecten hebben ook methods:Objecten hebben ook methods:veld.focus() // dit object krijgtveld.focus() // dit object krijgt

// de focus weer// de focus weer

N.B.: JavaScript is ook bruikbaar om N.B.: JavaScript is ook bruikbaar om dynamisch html te generen dynamisch html te generen op de op de clientmachineclientmachine. (zie later). (zie later)


JSP-verwerkingJSP-verwerking

Tot nog toe konden we met de ingevoerde Tot nog toe konden we met de ingevoerde gegevens niets doengegevens niets doen

N.B. Wat we nu hier zullen doen, hadden N.B. Wat we nu hier zullen doen, hadden we ook in (door client zichtbare) we ook in (door client zichtbare) JavaScript gekund. JavaScript gekund.



<html><html> <head><head> <title>Bestelde Broodjes</title><title>Bestelde Broodjes</title> </head></head> <body><body> <i>Bestelde broodjes van:</i><br><i>Bestelde broodjes van:</i><br> <% <% out.println(request.getParameter("naam")); out.println(request.getParameter("naam")); %>%>

</body></body></html></html>



<%<% out.println(request.getParameter("naam" ));out.println(request.getParameter("naam" )); %>%> <%<% out.println(“ “ + out.println(“ “ +

request.getParameter(“voornaam" ));request.getParameter(“voornaam" )); %><br>%><br> <% out.println(request.getParameter("adres")); <% out.println(request.getParameter("adres")); %><br>%><br> Tel:Tel: <% out.println(request.getParameter("telefoon"));<% out.println(request.getParameter("telefoon")); %><br><br>%><br><br>……



<i>Levering:</i><br><i>Levering:</i><br><% out.println(request.getParameter("levering"));<% out.println(request.getParameter("levering"));%><br><br>%><br><br><i>Beleg:</i><br><i>Beleg:</i><br>Kaas ?Kaas ?<% out.println(request.getParameter("Smos Kaas"));<% out.println(request.getParameter("Smos Kaas"));%><br>%><br>Hesp ?Hesp ?<% out.println(request.getParameter("Smos Hesp"));<% out.println(request.getParameter("Smos Hesp"));%><br><br>%><br><br><i>Grootte:</i><br><i>Grootte:</i><br><% out.println(request.getParameter("grootte"));<% out.println(request.getParameter("grootte"));%><br>%><br></body></body>


ResultaatResultaat



<% <% out.println(request.getParameteout.println(request.getParameter("naam")); %>r("naam")); %> request-object is impliciet (is al gecreëerd)request-object is impliciet (is al gecreëerd) type is de klasse HttpServletRequesttype is de klasse HttpServletRequest 1 van de methodes: getParameter()1 van de methodes: getParameter() geeft de value bij de gegeven naam teruggeeft de value bij de gegeven naam terug



Ook mogelijk: opvang van meerdere Ook mogelijk: opvang van meerdere waarden tegelijk, horend bij name/value waarden tegelijk, horend bij name/value pairs die zelfde naam dragen. (niet bij ons)pairs die zelfde naam dragen. (niet bij ons) Opvang in array van Strings via Opvang in array van Strings via

getParametergetParameterValues()Values() Vb:Vb:<% String[] sauzen = <% String[] sauzen = request.getParameterValues(“saus"));request.getParameterValues(“saus"));

out.println(sauzen[1]);…out.println(sauzen[1]);… %>%>

Documents

Internetapplicaties - II Gegevensinvoer 1 Internetapplicaties Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP