De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

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

Verwante presentaties


Presentatie over: "Internetapplicaties - II Gegevensinvoer 1 Internetapplicaties Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP."— Transcript van de presentatie:

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

2 Internetapplicaties - II Gegevensinvoer2 Boeken/tutorials:  Beginning JSP Web Development, Wrox  Vooral hfdst. 3  JavaScript By Example, QUE  Google: online html tutorial  …

3 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

4 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.

5 Internetapplicaties - II Gegevensinvoer5 HTML-form  We zullen leren uit voorbeelden, die nadien worden verklaard.  U creëert folder en bestand: c:\jakarta-tomcat- 4.1.27\webapps\hfdst2\Broodj es.html  U tikt de html-code die volgt in dit bestand in.

6 Internetapplicaties - II Gegevensinvoer6 HTML-form, code <html> Broodjes on-line Broodjes on-line Naam: Naam: Adres: Adres: Telefoon: Telefoon: </body></html>

7 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>

8 Internetapplicaties - II Gegevensinvoer8  U creëert de mappen: c:\jakarta-tomcat- 4.1.27\webapps\hfdst2\ WEB-INF (voor html-files volstaat deze folder) en hierbinnen:..\ WEB-INF\ classes..\ WEB-INF\ bin  Start/Run, Tik URL in:  http://localhost:8080/hfdst1/Broodjes.html OF  c:\jakarta-tomcat- 4.1.27\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).

9 Internetapplicaties - II Gegevensinvoer9 Resultaat form I:

10 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>…

11 Internetapplicaties - II Gegevensinvoer11 Resultaat form II:

12 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)

13 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

14 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 !!!)

15 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>…

16 Internetapplicaties - II Gegevensinvoer16 Resultaat form III:

17 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.

18 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 !!!)

19 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

20 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

21 Internetapplicaties - II Gegevensinvoer21 Java-Script, 1e kennismaking  Overzichtje:  JavaScript en Java als talen  JavaScript functie’s als validatie  In ons voorbeeldje  opmerkingen

22 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; }

23 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”);

24 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

25 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:

26 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;}

27 Internetapplicaties - II Gegevensinvoer27 Resultaat JavaScript:

28 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

29 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)

30 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.

31 Internetapplicaties - II Gegevensinvoer31 JSP-verwerking <html> Bestelde Broodjes Bestelde Broodjes Bestelde broodjes van: Bestelde broodjes van: </body></html>

32 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")); %> %> …

33 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>

34 Internetapplicaties - II Gegevensinvoer34 Resultaat

35 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

36 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]);… %> %>


Download ppt "Internetapplicaties - II Gegevensinvoer 1 Internetapplicaties Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP."

Verwante presentaties


Ads door Google