Internetapplicaties - II Gegevensinvoer 1 Internetapplicaties Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP
Internetapplicaties - II Gegevensinvoer2 Boeken/tutorials: Beginning JSP Web Development, Wrox Vooral hfdst. 3 JavaScript By Example, QUE Google: online html tutorial …
Internetapplicaties - II Gegevensinvoer3 Hoe passen de 3 elementen in elkaar ? HTML-forms GUI-elementen voor de invoer Client-side JavaScript Validatie (controle van ingevoerde gegevens) Server-side Validatie Verwerking doorgestuurde geg. via JSP Dataverkeer moet beperkt blijven ivm de performantie Dataverkeer moet beperkt blijven ivm de performantie
Internetapplicaties - II Gegevensinvoer4 HTML-form, algemeen Electronisch invoerformulier Via éénvoudige tags in een.html- of.jsp-pagina op te stellen De gebruiker voert zijn gegevens in en kan dan: Ofwel op SUBMIT duwen om de gevevens door te sturen van de client naar de server. Ofwel op RESET duwen om de gegevens leeg te maken. Zonder CGI, JSP e.d. hebben forms weinig zin. Alleen mailen van de data is dan zinvol.
Internetapplicaties - II Gegevensinvoer5 HTML-form We zullen leren uit voorbeelden, die nadien worden verklaard. U creëert folder en bestand: c:\jakarta-tomcat \webapps\hfdst2\Broodj es.html U tikt de html-code die volgt in dit bestand in.
Internetapplicaties - II Gegevensinvoer6 HTML-form, code <html> Broodjes on-line Broodjes on-line Naam: Naam: Adres: Adres: Telefoon: Telefoon: </body></html>
Internetapplicaties - II Gegevensinvoer7 HTML-form, code (vervolg) Naam: Naam: <input type=“text” name=“naam” <input type=“text” name=“naam” size=“35”> … size=“35”> …<i>Adres:</i> <i>Telefoon:</i> </form>
Internetapplicaties - II Gegevensinvoer8 U creëert de mappen: c:\jakarta-tomcat \webapps\hfdst2\ WEB-INF (voor html-files volstaat deze folder) en hierbinnen:..\ WEB-INF\ classes..\ WEB-INF\ bin Start/Run, Tik URL in: OF c:\jakarta-tomcat \webapps\hfdst2\Broodjes.html Dit keer (html-file) maakt het niks uit of je via de URL (dus via de webserver) of vanuit je locale filesysteem werkt (dubbelklikken op het bestand volstaat nu).
Internetapplicaties - II Gegevensinvoer9 Resultaat form I:
Internetapplicaties - II Gegevensinvoer10 HTML-form, code (vervolg) … … ervoor: code van vorige slides Levering: Levering: <input name = "levering" type = "radio“ <input name = "levering" type = "radio“ value = "Winkel"> Winkel value = "Winkel"> Winkel <input name = "levering" type = "radio“ <input name = "levering" type = "radio“ value = "Thuis" checked> Thuis value = "Thuis" checked> Thuis Bestelde broodjes: Bestelde broodjes: <input type = "checkbox" name = "Soms Kaas“ <input type = "checkbox" name = "Soms Kaas“ Value = "Yes" >Smos Kaas Value = "Yes" >Smos Kaas <input type = "checkbox" name = "Soms Hesp“ <input type = "checkbox" name = "Soms Hesp“ Value = "Yes" >Smos hesp Value = "Yes" >Smos hesp </form>…
Internetapplicaties - II Gegevensinvoer11 Resultaat form II:
Internetapplicaties - II Gegevensinvoer12 Opmerkingen action-attribuut van de form-tag: bepaalt wat er moet gebeuren als de submit-knop wordt geactiveerd Zal bij ons een jsp-bestand aanroepen. zie verder method-attribuut van de form-tag: get: de ingegeven data worden achteraan de URL- geplakt als volgt: Verwerk.jsp?naam=niki+meulemans&adres=naamsevest+96 post: de doorgegeven data zijn onzichtbaar name-attribuut van diverse tags: dient om naar de ingegeven invoer te kunnen verwijzen tijdens de verwerking door de jsp-code)
Internetapplicaties - II Gegevensinvoer13 Opmerkingen: radio-knop De -control: Bij elkaar horende radio-knoppen moeten dezelfde naam dragen. Selecties sluiten elkaar dan uit. Door checked te schrijven, is deze knop default geselecteerd De value=“..” bepaalt de waarde tijdens de verwerking, maar is niet zichtbaar op de pagina <input name = "levering" type = "radio“ <input name = "levering" type = "radio“ value = "Winkel"> Winkel value = "Winkel"> Winkel <input name = "levering" type = "radio“ <input name = "levering" type = "radio“ value = "Thuis“ checked > Thuis value = "Thuis“ checked > Thuis
Internetapplicaties - II Gegevensinvoer14 Opmerkingen: checkbox De -control: Bij elkaar horende checkboxen kunnen dezelfde naam dragen De value=“..” bepaalt de waarde tijdens de verwerking, maar is niet zichtbaar op de pagina <input type = "checkbox" name = "Soms Kaas“ <input type = "checkbox" name = "Soms Kaas“ Value = "Yes" >Smos Kaas Value = "Yes" >Smos Kaas In geval 2 checkboxen zelfde naam hebben & beide aangeklikt zijn: beide values woren doorgegeven: < input type = "checkbox" name = “Broodjes“ < input type = "checkbox" name = “Broodjes“ Value = “Kaas" >Smos Kaas (NIET BIJ ONS !!!) Smos Kaas (NIET BIJ ONS !!!) <input type = "checkbox" name = “Broodjes“ Value = “Hesp" >Smos Hesp (NIET BIJ ONS !!!)
Internetapplicaties - II Gegevensinvoer15 Extra controls: select-listbox, reset- knop …<b>Grootte</b><br> piccolo/option> piccolo/option> half stokbrood half stokbrood heel stokbrood heel stokbrood </form>…
Internetapplicaties - II Gegevensinvoer16 Resultaat form III:
Internetapplicaties - II Gegevensinvoer17 Opmerkingen: select De -control: Geeft drop-down listbox of multi-select listbox. Via …, verschillende keuzes aangeven Er is 1 naam voor alle opties. Door selected te schrijven, is deze option default geselecteerd.
Internetapplicaties - II Gegevensinvoer18 select (vervolg) Multiple attribuut (niet in onze code) Maakt keuze van verschillende opties tegelijk mogelijk (CTRL+klik) In geval meer dan 1 keuze gemaakt is: beide values woren doorgegeven: mosterd (NIET BIJ ONS !!!) mosterd (NIET BIJ ONS !!!) ketchup (NIET BIJ ONS !!!) ketchup (NIET BIJ ONS !!!)
Internetapplicaties - II Gegevensinvoer19 select (vervolg) value attribuut (niet in onze code) Als die er is wordt de bebehorende value doorgegeven bij selectie. Als die ontbreekt, wordt tekst tussen doorgegeven bij selectie. Belangrijk als je denkt dat de zichtbare tekst meer veranderlijk is dan de values getrouwd getrouwd alleenstaand alleenstaand weduwe/naar weduwe/naar
Internetapplicaties - II Gegevensinvoer20 Opmerkingen: reset-knop De - control: Functie is vast bepaald: Leegmaken van de invoervelden Value-attribuut geeft de tekst in de knop weer
Internetapplicaties - II Gegevensinvoer21 Java-Script, 1e kennismaking Overzichtje: JavaScript en Java als talen JavaScript functie’s als validatie In ons voorbeeldje opmerkingen
Internetapplicaties - II Gegevensinvoer22 Java en JavaScript als talen JAVA In.java-files of binnen 1 %> tag %> tag String str = “Hello; int i = 0; float netto(float bru,float tax){ return bru-tax; } JavaScript In.html/.jsp- files Binnen … tags tags var str = “Hello”; var i = 0; function netto( bru,tax){ return bru-tax; }
Internetapplicaties - II Gegevensinvoer23 Java en JavaScript als talen JAVA public class Persoon{ public String naam = “Jef”; public int gebJaar = 1970;} Persoon p = new Persoon(); int i = p.gebJaar; String[] fruit = {“appel”,”peer”}; JavaScript function Persoon{ this.naam = “Jef”; this.gebJaar = 3; } var p = new Persoon(); var i = p.gebJaar; function rijtje{ return rijtje.arguments; }// héél vreemd var fruit = new rijtje(“appel”,”peer”);
Internetapplicaties - II Gegevensinvoer24 Java en JavaScript als talen JAVA General purpose Gecompileerd tot bytecode, sterk getypeerd Declaratie met type OO: klassen, overerving JavaScript Leeft binnen browserwereld Tekstueel geïnterpreteerd, zwak getypeerd Declaratie zonder type Bijna OO: eigenaardige object- creatie klasse=functie=array
Internetapplicaties - II Gegevensinvoer25 JavaScriptfuncties als valdidatie … Broodjes on-line Broodjes on-line //HIER KOMT DE SCRIPT-CODE: function checkVeld(veld, benaming){…} … //HIER WORDT DE SCRIPT-CODE AANGEROEPEN:
Internetapplicaties - II Gegevensinvoer26 JavaScriptfuncties als valdidatie 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 ) alert(benaming + alert(benaming + " moet minstens 2 karakters hebben"); else else return; return; veld.focus() ; return;}
Internetapplicaties - II Gegevensinvoer27 Resultaat JavaScript:
Internetapplicaties - II Gegevensinvoer28 Opmerkingen Aanroep als gevolg van een event: (vb: onBlur -event: gebeurt als de control uit focus is) Gebruik van een speciale variabele om te verwijzen naar een element uit het html- document: this
Internetapplicaties - II Gegevensinvoer29 Opmerkingen Ingebouwde objecten met properties (data-fields), gescheiden door een punt: if ( veld.value == "" ) Objecten hebben ook methods: veld.focus() // dit object krijgt // de focus weer // de focus weer N.B.: JavaScript is ook bruikbaar om dynamisch html te generen op de clientmachine. (zie later)
Internetapplicaties - II Gegevensinvoer30 JSP-verwerking Tot nog toe konden we met de ingevoerde gegevens niets doen N.B. Wat we nu hier zullen doen, hadden we ook in (door client zichtbare) JavaScript gekund.
Internetapplicaties - II Gegevensinvoer31 JSP-verwerking <html> Bestelde Broodjes Bestelde Broodjes Bestelde broodjes van: Bestelde broodjes van: </body></html>
Internetapplicaties - II Gegevensinvoer32 JSP-verwerking <% out.println(request.getParameter("naam" )); out.println(request.getParameter("naam" )); %> %> <% <% out.println(“ “ + request.getParameter(“voornaam" )); out.println(“ “ + request.getParameter(“voornaam" )); %> %> <% out.println(request.getParameter("adres")); <% out.println(request.getParameter("adres")); %> %> Tel: Tel: <% out.println(request.getParameter("telefoon")); <% out.println(request.getParameter("telefoon")); %> %> …
Internetapplicaties - II Gegevensinvoer33 JSP-verwerking <i>Levering:</i><br> <% out.println(request.getParameter("levering")); %><br><br><i>Beleg:</i><br> Kaas ? <% out.println(request.getParameter("Smos Kaas")); %><br> Hesp ? <% out.println(request.getParameter("Smos Hesp")); %><br><br><i>Grootte:</i><br> <% out.println(request.getParameter("grootte")); %><br></body>
Internetapplicaties - II Gegevensinvoer34 Resultaat
Internetapplicaties - II Gegevensinvoer35 Opmerkingen request-object is impliciet (is al gecreëerd) type is de klasse HttpServletRequest 1 van de methodes: getParameter() geeft de value bij de gegeven naam terug
Internetapplicaties - II Gegevensinvoer36 Opmerkingen Ook mogelijk: opvang van meerdere waarden tegelijk, horend bij name/value pairs die zelfde naam dragen. (niet bij ons) Opvang in array van Strings via getParameterValues() Vb: <% String[] sauzen = request.getParameterValues(“saus")); out.println(sauzen[1]);… %> %>