Java4350: Form Processing with JSP

Transcription

1 OpenStax-CNX module: m Java4350: Form Processing with JSP R.L. Martinez, PhD This work is produced by OpenStax-CNX and licensed under the Creative Commons Attribution License 3.0 Abstract This module covers form controls in addition to the action and method attributes of the form object. Characteristics of the Request object are also reviewed. 1 Table of Contents Preface (p. 1) Viewing tip (p. 1) * Images (p. 2) Preview (p. 2) General background information (p. 2) Discussion (p. 2) Homework assignment (p. 5) Summary (p. 6) What's next? (p. 6) Images (p. 7) Miscellaneous (p. 16) 2 Preface This module is one in a collection of modules designed for teaching ITSE Java Programming (Intermediate) at Austin Community College in Austin, TX. Thus far, we have covered the web programming model, HTML and CSS fundamentals, and an introduction to JSP via the JSP tags. Now we are ready to put our knowledge into practice by implementing useful examples of JSP technology. 2.1 Viewing tip I recommend that students open another copy of this module in a separate browser window and use the following links to easily nd and view the Images while you are reading about them. Version 1.4: Dec 9, :16 pm

2 OpenStax-CNX module: m Images Image 1 (p. 7). Sample Form - Amazon.com Image 2 (p. 8). Form Element of Amazon.com Image 3 (p. 8). Browser Support for novalidate Attribute Image 4 (p. 8). Common HTML Form Elements Image 5 (p. 10). Code - join_acc_code_academy.html Image 6 (p. 11). Output - join_acc_code_academy.html Image 7 (p. 13). Code - display_new_member.jsp Image 8 (p. 15). Output - display_new_member.jsp Image 9 (p. 16). Code - IncorrectAdvisory.html 3 Preview In this module we begin working with HTML forms. The capabilities enabled by HTML forms are at the core of the tremendous benets the web represents. When elements are added to HTML forms, the browser can retrieve information from users and send that data to the web server. JSP running on the server can then process the data and potentially modify the user experience based on user input. A common operation performed with user data is reading and/or writing to a database which is not addressed in this course. Web database access with Java is covered in ACC course INEW General background information Almost all websites employ forms. If the site owner would like to obtain information or feedback from users, then forms are required. Fortunately for web developers, much of the behind-the-scenes processing is performed by the browser. It is the responsibility of the developer to design the form and add form controls to capture user input. When submitted, the browser packages the data and selections supplied by the user and forwards that content to the receiving page on the server. Code on the receiving page then performs appropriate processing tasks with the data. The process of collecting, packaging, and processing form data will be discussed in this module. 5 Discussion In the early days of the World Wide Web, developers desired to move beyond the simple and static display of information into a new realm lled with interactivity. Obtaining data from site visitors was an obvious early goal. In November 1995, the HTML 2.0 specication was published which was the rst to include the form element and the HTML elements that are used within the form to capture visitor data. In HTML5, the number of form elements expanded. The additions were originally known as Web Forms 2.0 but that moniker was dropped when the new form elements were simply included in the broader HTML5 specication. 5.1 HTML Forms Forms are a powerful and essential tool for every web developer. Many web pages and almost all web sites use the form element. Developers are not limited to having one form per page but that is often the case. Look at Image 1 (p. 7) for an example of a familiar form. The Amazon form shown contains 5 form elements (at least 5 are displayed). Two textboxes (input element with attribute of type and value=text) are used to obtain the address and password from the user. Two radio buttons are used to determine customer status. Note that only one of the radio buttons can be selected at a time. That behavior is known as mutually exclusive. They are referred to a radio buttons because only one radio station could be selected at

3 OpenStax-CNX module: m a time (only one button pushed). Also notice that the "Yes" response has been preselected. That is known as the default. It is common to preselect a radio button from the group although that is not required. The last form control on the page is the "Sign in" button. It is a special type of control known as a submit button which engages the process to collect form data and send it to the destination specied by the action attribute of the form element. In the Amazon case, the action attribute species the default page in the signin directory as the destination. In Image 2 (p. 8), the actual form opening tag is depicted for the Amazon form shown in Image 1 (p. 7). The tag was captured using View Source of the Image 1 (p. 7) page. In Image 2 (p. 8), the name of the form is set to signin. In HTML5 the name attribute is not supported for anchor (a) and image (img) elements but is used with forms. In XHTML, the name attribute is deprecated (use discouraged) for the following elements: a, applet, form, frame, iframe, img, and map. However, in HTML5, name is a valid attribute for forms and is commonly used, if only for semantic value. The next attribute is method. There are 2 possible values for the method attribute, GET and POST. The value listed in Image 2 (p. 8) is POST. This means that when data is sent to the destination as specied by the action attribute, it is sent as a post transaction which the user does not see. With GET, the names and values of the form controls are collected and appended to the URL string. More on GET and POST later. The next attribute listed in the form element is id. Unlike the name attribute, id attributes are designed and required to be unique. This enables developers to apply CSS and/or run JavaScript only with that element dened by a specic id. The novalidate attribute is new to HTML5. When set to novalidate, form input data is not validated when submitted. That attribute is not supported by some browsers. See Image 3 (p. 8) for a list of the browser versions which support novalidate. The last attribute listed is action. As previously mentioned, the action attribute species the destination to which the form data will be sent when the submit button is pressed. In the case of Image 2 (p. 8), when the user presses submit, the data on the form will be collected and sent to the default page of the signin directory. The destination page will process the data according to site protocols. In this case, the address and password will be used to authenticate or deny sign-in to the user. 5.2 HMTL Form Elements There are a number of elements used on forms to collect data from users. These elements are also known as controls and objects. Like other elements on an HTML page, form elements contain attributes and values for those attributes. Image 4 (p. 8) lists some of the more popular and useful elements used on forms. With the button element, text or images can be used inside the button as the button's innerhtml property. This characteristic distinguishes it from buttons created using the input element with type button which is an empty (void) tag. Recall from the HTML and CSS Fundamentals module that void elements do not contain the innerhtml property. W3Schools.com advises using the input element to create buttons within forms since some browsers submit content between the tags of button elements (the innerhtml) instead of the value attribute. The datalist element provides a means to pre-populate a box with values that will be accessed as the user begins typing in the box. The textarea is a control type that enables users to enter paragraphs of text instead of single lines like a textbox. The other elements will be covered in code examples below. 5.3 Code join_acc_code_academy.html The code example in Image 5 (p. 10) produces the web page displayed in Image 6 (p. 11). Notice that line 6 of Image 5 (p. 10) references an external CSS le like used in previous examples. When reviewing this and all subsequent code examples, items and topics that have been covered in previous modules will not be addressed again except to reinforce the more complex concepts. For instance, it is sucient to remark that this le references a CSS le without explaining the purpose of CSS since that has been covered before. Also, a considerable amount of Java knowledge is assumed since this is the 3rd part of a 3 part intermediate Java course. Therefore, only Java code that is unique to JSP will be covered.

4 OpenStax-CNX module: m When interacting with forms, the user makes a number of submissions and/or selections with form controls. Each of the controls on the form have a name and a value attribute. And like all attributes, the name and value attributes are assigned values. The name for a control is usually designated at design time (i.e. when the developer writes the code for the page). The value attributes receive their values predominantly from user interaction. For example, textboxes have names and the values are entered by user submissions. When the submit button for a form is pressed, the browser collects all names and associated values for all controls within the form and sends that information to the destination determined by the action attribute of the form element. The names and values together are known as "name::value" pairs. The browser forwards the name::value pairs for the controls to the receiving page for processing. The rst element of note for this module appears on line 12 of Image 5 (p. 10). This form element species 2 attributes, action and method. The action method provides the destination to which the server will send submitted form data. In this case, display_new_member.jsp is called to process the form data, the name::value pairs. When the post method is used it means that the data will not be visible to the user. GET, the default and the other type of method, appends form name::value pairs to the end of the destination URL in clear view. There is a rule of thumb that is often used to decide which method, GET or POST, to use with the form. If the data submitted is just used for presentation purposes then GET should be sucient. However, if server processing like database access is planned, then POST is the better choice. Processes are known as idempotent if no change takes place. For idempotent access, GET is considered the preferred method. For extensive server processing like that typically used with JSP, it is more common to use POST and that is where we will concentrate our development. Lines 17, 21, and 25 contain input elements of type text. This means that those lines will produce text boxes which can be seen in the output of Image 6 (p. 11). Each of the textboxes have dierent names which are used to identify those controls. Again, when data is submitted (a.k.a sent to the destination specied by the action attribute), it is sent in the form of name::value pairs. In the example shown, the user entered the text "James" in the rstname textbox and therefore that will be the value associated with that textbox. So, when the submit button is pressed, the value James will be associated with the rstname textbox. The textboxes lastname=gosling and phonenumber= are other name::value pairs that will be submitted. The next control on the form is shown on lines of Image 5 (p. 10). This is known as a select control. Recall that controls are also elements and are also objects. The select elements represents the skilllevel dropdown list shown in Image 6 (p. 11). The individual selections in the dropdown list are determined by the option elements on lines of Image 5 (p. 10). Notice that each of the options has a dierent value setting. However, the options share the name setting of the select control and only one name::value pair will be submitted for the selection control in this example. So, if "Expert" is selected then the name::value pair sent will be skilllevel=expert. Note that the value is sent and not the element content between the open and closing tags like Beginner, Intermediate, and Expert. The last control on the form is the input element with the special type="submit". Submit controls are used to invoke the data packaging and submission processes. As mentioned previously, the submission destination determined by the action on line 12 of Image 5 (p. 10) processes the form contents. 5.4 Code display_new_member.jsp The code of display_new_member.jsp is shown in Image 7 (p. 13). This page is invoked (called) when the submit button is pressed on join_acc_code_academy.html. Notice that this page contains a few lines of JSP code (in green). Line 3 imports 2 packages required by the page. To see which packages are required by which components, simply remove the package and NetBeans will identify the unknown symbols. Try it. A JSP scriptlet tag on lines of Image 7 (p. 13) encloses Java code. Lines acquire the values of 4 names (rstname, lastname, phonenumber, and skilllevel) and assign those values to local String variables using the same identiers (variable names). The name::value pairs were stored in the Request content by the submission process performed by join_acc_code_academy.html. That is part of the packaging and

5 OpenStax-CNX module: m submission process previously described. The getparameter method of the Request object is used to extract the values from the Request object. On lines 24, 28, 32, and 36 of Image 7 (p. 13), JSP expression tags are used to display the values of the controls obtained by getparameter above. The results of these lines can be seen in the Information Entered table in Image 8 (p. 15). There is a form element on lines to return back to the join_acc_code_academy.html page. Data submission, the primary capability of the form element is not used in this case. It is only supplied as another brief example of a form. Usually, an anchor element would be better suited for this linking purpose. 5.5 More About the Request Object The next 2 tables displayed in Image 8 (p. 15), Unsorted Parameters and Sorted Parameters, are shown to investigate another aspect of the Request object. In the rst table, produced by lines of Image 7 (p. 13), the output of the table was explicitly dened using the expression tags. The order of the output could be completely reorganized by placing the variable skilllevel at the top, the variable rstname at the bottom, etc. When the name::value pairs are packaged in the Request object by the submission process, there is no guaranteed order of the entries. On lines of Image 7 (p. 13), the second table is output. On line 47, the getparameternames method returns an Enumeration of string objects consisting of the name portion of each of the name::value pairs stored in the Request object. An Enumeration is an interface which provides references to underlying object data. The two methods of the Enumeration interface, hasmoreelements and nextelement are used in the loop. hasmoreelements is used to test for the end of the references to the string objects (names) and nextelement is used to obtain the next name in the Enumeration. Note that the Enumeration interface does not provide a reset method and therefore getparameternames is called again on line 60. A while loop is used on lines to output the submission name::value pairs and this output is shown in the Unsorted Parameters table of Image 8 (p. 15). Notice on lines 47 and 60 the getparameternames method of the Request object is called. As mentioned above, this method returns an Enumeration of the parameter names submitted by the form. An Enumeration also provides methods to iterate through its referenced content. If the developer would like to specify order and placement of specic name and value information, then a technique like that used in lines of Image 7 (p. 13) could be employed. An alternative approach to specic placement and unsorted display would be to sort the names or values prior to output. In the Sorted Parameters table of Image 8 (p. 15), the Enumeration returned by getparameternames is cast to a Collections.list type and assigned to a List variable on line 60 of Image 7 (p. 13). Like the Enumeration, the List interface provides iteration capabilities. Furthermore, since it implements the superinterfaces Collection and Iterable, it oers more functionality than the legacy Enumeration. While the Enumeration is not yet deprecated, its use is discouraged for new development. The list created on line 60 of Image 7 (p. 13) is sorted on line 61 prior to being displayed on lines Note that the names are in alphabetical order. If line 61 were removed or commented, the output of the third table would be identical to that of the second unsorted table. To have more control over the order, control names could be assigned appropriate values like 01-rstName, 02-secondName, etc. on the form page. This would ensure values are arranged in a specied order. As an aside, notice the warning indicators on lines 45 and 58 of Image 7 (p. 13). The actual advisory which appears as a popup when hovering over the warning indicator is shown in Image 9 (p. 16). It is a bit tricky. It is states that columns for the th element are not recognized. Since the table is constructed primarily within the scriptlet section of lines of Image 7 (p. 13), the IDE does not see the table that will be dynamically created because it will only be created at runtime. The same warning appears on line 58 for the same reason. 6 Homework assignment See the JSP section in Blackboard for all JSP homework assignments.

6 OpenStax-CNX module: m Supplemental Reading Summary HTML forms are essential to the modern web. All commercial sites that establish and maintain customer relationships employ forms to capture data. Using JSP to process form submissions was the focus of this module. The form controls were covered in addition to the action and method attributes of the form object. Characteristics of the Request object were also reviewed. 8 What's next? In the next module, custom object oriented development techniques will be employed. Java classes will be introduced in the JSP to benet from the encapsulation and modularity that object orientation provides

7 OpenStax-CNX module: m Images Image 1: Sample Form - Amazon.com Figure 1: Image 1: Sample Form - Amazon.com

8 OpenStax-CNX module: m Image 2: Form Element of Amazon.com Figure 2: Image 2: Form Element of Amazon.com Image 3: Browser Support for novalidate Attribute Figure 3: Image 3: Browser Support for novalidate Attribute Image 4: Common HTML Form Elements Figure 4: Image 4: Common HTML Form Elements

9 OpenStax-CNX module: m

10 OpenStax-CNX module: m Image 5: Code - join_acc_code_academy.html Figure 5: Image 5: Code - join_acc_code_academy.html

11 OpenStax-CNX module: m Image 6: Output - join_acc_code_academy.html Figure 6: Image 6: Output - join_acc_code_academy.html

12 OpenStax-CNX module: m

13 OpenStax-CNX module: m Image 7: Code - display_new_member.jsp Figure 7: Image 7: Code - display_new_member.jsp

14 OpenStax-CNX module: m

15 OpenStax-CNX module: m Image 8: Output - display_new_member.jsp Figure 8: Image 8: Output - display_new_member.jsp

16 OpenStax-CNX module: m Image 9: Code - IncorrectAdvisory.html Figure 9: Image 9: Code - IncorrectAdvisory.html 10 Miscellaneous This section contains a variety of miscellaneous information. note: Housekeeping material Module name: Java4350: Form Processing with JSP Author: Dr. R.L.Martinez Maintainer: R.G.Baldwin File: Java4350.htm Published: 11/27/13 Revised: 12/09/13 note: Disclaimers: Financial : Although the Connexions site makes it possible for you to download a PDF le for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF le, you should be aware that some of the HTML elements in this module may not translate well into PDF. I also want you to know that, I receive no nancial compensation from the Connexions website even if you purchase the PDF version of the module. In the past, unknown individuals have copied my modules from cnx.org, converted them to Kindle books, and placed them for sale on Amazon.com showing me as the author. I neither receive compensation for those sales nor do I know who does receive compensation. If you purchase such a book, please be aware that it is a copy of a module that is freely available on cnx.org and that it was made and published without my prior knowledge. Aliation : I am a professor of Computer Information Technology at Austin Community College in Austin, TX.