1 / 36

Internetapplicaties

Internetapplicaties. Deel 2: Gegevensinvoer: HTML-forms, JavaScript en JSP. Boeken/tutorials:. Beginning JSP Web Development, Wrox Vooral hfdst. 3 JavaScript By Example, QUE Google: online html tutorial …. Hoe passen de 3 elementen in elkaar ?. HTML-forms GUI-elementen voor de invoer

norris
Download Presentation

Internetapplicaties

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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 Internetapplicaties - II Gegevensinvoer

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

  5. 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\Broodjes.html • U tikt de html-code die volgt in dit bestand in. Internetapplicaties - II Gegevensinvoer

  6. HTML-form, code <html> <head> <title>Broodjes on-line</title> </head> <body> <form action=“verwerk.jsp” method=“post”> <i>Naam:</i><br> <i>Adres:</i><br> <i>Telefoon:</i><br> </form> </body> </html> Internetapplicaties - II Gegevensinvoer

  7. HTML-form, code (vervolg) <form action=“verwerk.jsp” method=“post”> <i>Naam:</i> <input type=“text” name=“naam” size=“35”><br>… <i>Adres:</i> <input type=“text” name=“adres” size=“45”><br> <i>Telefoon:</i> <input type=“text” name=“telefoon” size=“45”><br><br> </form> Internetapplicaties - II Gegevensinvoer

  8. 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). Internetapplicaties - II Gegevensinvoer

  9. Resultaat form I: Internetapplicaties - II Gegevensinvoer

  10. HTML-form, code (vervolg) … <form action=“verwerk.jsp” method=“post”> … ervoor: code van vorige slides <b>Levering:</b><br> <input name = "levering" type = "radio“ value = "Winkel"> Winkel <br> <input name = "levering" type = "radio“ value = "Thuis" checked> Thuis <br><br> <b>Bestelde broodjes:</b><br> <input type = "checkbox" name = "Soms Kaas“ Value = "Yes" >Smos Kaas<br> <input type = "checkbox" name = "Soms Hesp“ Value = "Yes" >Smos hesp<br><br> <input type = "submit" value = "Nu Bestellen"> </form> … Internetapplicaties - II Gegevensinvoer

  11. Resultaat form II: Internetapplicaties - II Gegevensinvoer

  12. 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 Gegevensinvoer

  13. Opmerkingen: radio-knop • De < input type = “radio” … >-control: • Bij elkaar horende radio-knoppen moetendezelfde 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“ value = "Winkel"> Winkel <br> <input name = "levering" type = "radio“ value = "Thuis“ checked > Thuis <br><br> Internetapplicaties - II Gegevensinvoer

  14. Opmerkingen: checkbox • De <input type = “checkbox” …>-control: • Bij elkaar horende checkboxen kunnendezelfde naam dragen • De value=“..” bepaalt de waarde tijdens de verwerking, maar is niet zichtbaar op de pagina <input type = "checkbox" name = "Soms Kaas“ Value = "Yes" >Smos Kaas<br> • In geval 2 checkboxen zelfde naam hebben & beide aangeklikt zijn: beide values woren doorgegeven: <input type = "checkbox" name = “Broodjes“ Value = “Kaas" >Smos Kaas<br> (NIET BIJ ONS !!!)<input type = "checkbox" name = “Broodjes“ Value = “Hesp" >Smos Hesp<br> (NIET BIJ ONS !!!) Internetapplicaties - II Gegevensinvoer

  15. Extra controls: select-listbox, reset-knop … <b>Grootte</b><br> <select name = “grootte”> <option>piccolo/option> <option selected>half stokbrood</option> <option>heel stokbrood</option> </select><br><br> <input type = "submit" value = "Nu Bestellen"> <input type = “reset" value = “Defaults"> </form> … Internetapplicaties - II Gegevensinvoer

  16. Resultaat form III: Internetapplicaties - II Gegevensinvoer

  17. Opmerkingen: select • De <select>-control: • Geeft drop-down listbox of multi-select listbox. • Via <option>…</option>, verschillende keuzes aangeven • Er is 1 naam voor alle opties. • Door selected te schrijven, is deze option default geselecteerd. Internetapplicaties - II Gegevensinvoer

  18. 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: <select name = “saus” multiple> <option>mosterd </option> (NIET BIJ ONS !!!) <option>ketchup </option> (NIET BIJ ONS !!!) </select ><br><br> Internetapplicaties - II Gegevensinvoer

  19. 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 <option></option> doorgegeven bij selectie. • Belangrijk als je denkt dat de zichtbare tekst meer veranderlijk is dan de values <select name = “burgstaat” > <option value=“0” >getrouwd </option> <option value=“1” >alleenstaand </option> <option value=“2” >weduwe/naar</option> </select ><br><br> Internetapplicaties - II Gegevensinvoer

  20. Opmerkingen: reset-knop • De <input type = “reset” …>-control: • Functie is vast bepaald: Leegmaken van de invoervelden • Value-attribuut geeft de tekst in de knop weer Internetapplicaties - II Gegevensinvoer

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

  22. JAVA In .java-files of binnen 1 <%... >%> tag String str = “Hello; int i = 0; float netto(float bru,float tax){ return bru-tax; } JavaScript In .html/.jsp-files Binnen <script language=“JavaScript”>… </script> tags var str = “Hello”; var i = 0; function netto( bru,tax){ return bru-tax; } Java en JavaScript als talen Internetapplicaties - II Gegevensinvoer

  23. 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”); Java en JavaScript als talen Internetapplicaties - II Gegevensinvoer

  24. 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 Java en JavaScript als talen Internetapplicaties - II Gegevensinvoer

  25. JavaScriptfuncties als valdidatie … <head> <title>Broodjes on-line</title> <script language="JavaScript"> //HIER KOMT DE SCRIPT-CODE: function checkVeld(veld, benaming){ …} </script> </head> … //HIER WORDT DE SCRIPT-CODE AANGEROEPEN: <input type=“text” name=“naam” size=“35” onBlur='checkVeld(this,"naam")' > Internetapplicaties - II Gegevensinvoer

  26. JavaScriptfuncties als valdidatie function checkVeld(veld, benaming){ if ( veld.value == "" ) alert(benaming + " moet ingevuld worden"); else if ( veld.value.length < 2 ) alert(benaming + " moet minstens 2 karakters hebben"); else return; veld.focus() ; return; } Internetapplicaties - II Gegevensinvoer

  27. Resultaat JavaScript: Internetapplicaties - II Gegevensinvoer

  28. Opmerkingen • Aanroep als gevolg van een event: <input type=“text” name=“naam” size=“35” onBlur='checkVeld(this,"naam")' > (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 Gegevensinvoer

  29. 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 • N.B.: JavaScript is ook bruikbaar om dynamisch html te generen op de clientmachine. (zie later) Internetapplicaties - II Gegevensinvoer

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

  31. JSP-verwerking <html> <head> <title>Bestelde Broodjes</title> </head> <body> <i>Bestelde broodjes van:</i><br> <% out.println(request.getParameter("naam")); %> </body> </html> Internetapplicaties - II Gegevensinvoer

  32. JSP-verwerking <% out.println(request.getParameter("naam" )); %> <% out.println(“ “ + request.getParameter(“voornaam" )); %><br> <% out.println(request.getParameter("adres")); %><br> Tel: <% out.println(request.getParameter("telefoon")); %><br><br> … Internetapplicaties - II Gegevensinvoer

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

  34. Resultaat Internetapplicaties - II Gegevensinvoer

  35. Opmerkingen • <% out.println(request.getParameter("naam")); %> • 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 Gegevensinvoer

  36. 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]);… %> Internetapplicaties - II Gegevensinvoer

More Related