WAD Practical 2 - Develop a Customer Registration form using JSTL

Practical

Objectives
After completing this practical, you should be able to

• Independently try out other example codes that come with the book and duplicate the examples in your WADprac project.
• Understand what scope variables are.
• Understand how to use include page directives.
• Able to access Application Data.
• Able to access Forms Data

Exercise 1 -- Duplicate the example codes in the WADprac project.

Fig 1.1: Created new folder 'pract2'.

First, we create a new folder in the practicals folder called 'pract2'.

Fig 1.2: Copied the contents of countJSTL.jsp to a new jsp file in pract2

Now, we'll copy the contents of countJSTL.jsp from chapter one of the examples into a newly created p2ex1.jsp in the pract2 folder.

Fig 1.3: Results!

Running it yields a page enumerating the range 1 to 10, as before.

Exercise 2 -- In this exercise, you will create a new folder and explore how to copy an existing file as well as testing out some simple logics.

Fig 2.1: Copy'd and Paste'd.

So we make a copy of p2ex1.jsp, and we paste it in the pract2 folder as p2ex2.jsp.

Fig 2.2: Modified JSP.

We make a few modifications to fit the output we are required to conform to.

Fig 2.3: Running the JSP.

Voila!

Exercise 3 -- In this exercise, you will modify the available codes and dynamically create a 2 and 5 times-table.

Now, we're required to write a JSP page to output the 2 and 5 times-tables in the form of a HTML table using the for loop construct of JSP.

Fig 3.1: JSP

Fig 3.2: Result

So let's just go ahead and write it.

Exercise 4 -- In this exercise, you will explore the bkExamples, ch2, to understand Scope Variables.

Fig 4.1: Running index.html

We're going to go ahead and run the file index.html in ch2 of the examples.

Fig 4.2: index.html

The index of the page is shown. Let us proceed to Listing 2.1 - Main Example Page.

Fig 4.3: Listing 2.1 - Main Example Page

As you can see, the Page Scope is blank in the second table. This is because it is an included page and does not have access to the pageContext.

Now, we are required to provide the following answers:

1. There is a blank under the second table because the table is an included page that does not have access to the implicit pageContext.
2. When a variable is set using an action, the default scope the variable is bound to is 'page'.
3. Request level scopes exist only for the duration the request exists. That begins when the request object is created by the web container and ends when the object is terminated when the data is transmitted. In this case, the included page does not have the request value because the linked page is a second request and hence loses the previous bindings.
4. The session scope variable remains intact during the whole duration of when the session is active. A session is designated to a user to identify him for stateful operations.
5. Session scope variables can be used to keep track of a logged in user.
6. Application scope variables are GLOBAL.

Fig 4.4: Scope diagram.

This diagram summarizes the restrictiveness of each scope and the bindings of the scopes to the variables.

Exercise 5 -- In this exercise, you will explore the bkExamples, ch2, to understand one of the ways of accessing Form data through the use of paramValues Collection.

Fig 5.1: Listing 2.5 with its forms filled out.

We run index.html and click on Listing 2.5.

Fig 5.2: The results of the form submitted.

Now, we can answer the questions:

1. 2 pages are involved: params1.html and params2.jsp.
2. params1.html contains the form which crafts the HTTP request. params2.jsp contains the server-side logic.
3. The request from the client crafted in params1.html is in the form of a POST method. The params2.jsp logic uses a foreach loop on paramValues to extract the key and values of the map.
4. The purpose of the paramValues collection is to hold the information passed in a GET or POST request.

Fig 5.3: Copied the files into the practical folder.

Right now, we copy the two files, params1.html and params2.jsp into our practical folders and rename them as p2ex5.html and p2ex5.jsp respectively for modification and further investigation.

Fig 5.4: Modified p2ex5.html HTML file.

We modify p2ex5.html by adding a set of radio buttons for a 'Nationality' parameter and changing the method to GET. We fill in the form and hit submit.

Fig 5.5: Results.

We notice that the nationality field is added and that the URL of the page is much longer than the one with the POST method. This is because GET request have name value pairs appended onto the URL instead of in the HTTP request header.

Well, we're done for Practical 2.

You stay frosty, San Diego.

Sine Cera,

Jeremy

WAD Practical 1 - Setting up the Web Applications Development Environment

Practical 

Activities:

§         Get the NetBeans Web applications development environment ready for the rest of the practical sessions.

§         Try out example codes that come with the NetBeans IDE tool.

§         Set up the same development environment at home or anywhere else when required.

§         Try out the example codes that accompany the Text Book “JSTL: JSP Standard Tag Library Kick Start” by Jeff Heaton, SAMs Publishing.

§         Test out the usefulness of a simple dynamic Web application.

Exercise 1: Installing the Web Application Development Tool -- Netbeans IDE 6.8 into your home computer or notebook.

We skip this because Netbeans, Java EE, Glassfish, and Tomcat are already installed and running fine from previous projects.

Exercise 2: Get started with the Netbeans IDE 6.8 Web Applications Development environment.

Fig 2.1: We create a new project ('WADPracticals').

Fig 2.2: Google Code vxtherael repository.

I imported the newly created project into my Google Code repository because I want to be able to work on it across computers and my dual booted computer (Windows is really terrible for detecting Linux partitions out of the box.)

Exercise 3: Test the Netbeans IDE and run the first web application (JSP page) using JSTL.

Fig 3.1: So we've created the project. Now we take a look at the index.jsp file created for us.

Looking at the index.jsp file in the Netbeans project, we can, right off the bat, see that Netbeans generates a 'Hello World' sample in the JSP form. Apart from the few minor foreign-looking tags (e.g. <%), it looks identical to HTML.

So to answer the questions required:

1. The JSP generated prints 'Hello World!' to the client's browser.
2. The '<%-- ... --%>' tags denote a comment.

Fig 3.2: We make a few changes to the index.jsp

Now, we make a few changes to the index.jsp. Namely, we added a JSTL core taglib with the prefix 'c' along with an if statement to check if the parameter 'sayHello' is true and if it is, to print a message greeting the user (with the application of the name parameter).

Fig 3.3: Running the file right off will return a blank screen.

Fig 3.4: Source code of Fig 3.3. Compare this to Fig 3.2.

We run the file index.jsp by right clicking the file in the projects tab and clicking 'Run file'. I had to manually add the JSTL 1.1 library to the project classpath manually in Netbeans 6.9. Once the database and the web container starts up, the page will appear in your web browser. Don't worry if its a blank page, its meant to be that way.

Now, we have to answer a few required questions:

1. The port number that the browser sent the request to is 8080.
2. The context path is /WADPracticals/index.jsp.
3. The resource requested is 'index.jsp'.
4. When comparing the source code of the generated file on the browser, we see that quite a few elements present in the JSP page is not in the HTML file returned. For example, we do not see the taglib declaration nor the if statements.

Fig 3.5: Adding the proper query string allows us to view the 'hidden message'!

Let's see if we can get that message to appear... now, to do that, we've got to append a query string of the right sort. We know that the JSP does a check against the parameter sayHello to decide whether to display the <h2> content and prints the name parameter within that. So I've crafted the query string '&sayHello=true&name=Jeremy' to get the page to return Fig 3.5.

Exercise 4 - Run the examples from the companion web site of the recommended text book, “JSTL: JSP Standard Tag Library Kick Start” by Jeff Heaton from SAMs Publishing

Fig 4.1: index.jsp of chapter 1 of the examples.

I merged the files from the examples from the book JSTL: JSP Standard Tag Library Kick Start with the project I created.

Fig 4.2: The running of Fig 4.1.

Fig 4.3: With the exception of Coldfusion, all four options display identical results.

These four options, if the respective technologies are installed, enumerate the numbers one to ten in a web page.

We have to answer the following questions:

1. We observe an enumeration of the numbers one to ten in a web page.
2. The results are consistent with exception of the ColdFusion web page.
3. ColdFusion is not installed on the web server hence the desired output is not printed.

We also observe the following things:

1. The folder containing the sources are 'src' for the java files and 'web' for the views.
2. The name of the war file generated is 'WADPracticals.war'.
3. My project is deployed to the Glassfish server.

Exercise 5 - In this exercise, you create a new folder and label it pract1 in the WADprac project.

Fig 5.1: p1ex1.jsp

We've copied the code out of the practical sheet into a new file p1ex1.jsp.

Fig 5.2: Running the p1ex1.jsp.

Running it yields a page with a form to fill in.

Fig 5.3: Filling in the form

We've filled in the form and submitted it. Notice that the time corresponds to the time on the server.

Fig 5.4: Added javascript script to the JSP.

Fig 5.5: Comparison between server-side time and client-side time.

We add a small javascript script to display the time from the client side. Since the server and the client is the same (my computer), the time difference is very very minimal and hence, the times reflected are the same.


Exercise 6: In this exercise, you create a new JSP page to display the current time at the client side dynamically, and server side time upon requesting.

Fig 6.1: Dynamic JSP page to display client and server side time plus a name.

We've created the JSP page as per specification in the practical sheet.

Fig 6.2: Running of the JSP page just created.

Running it yields a page asking for the client side time, and a name. (Fig 6.2)

Fig 6.3: Sending the POST request to the server.

Filling in the form and submitting it returns a brief welcome, as well as the server side time.

Exercise 7 - Last But not the Least ! Task to do : Turn off the automatic web page caching feature from your web browser.

Honestly, I ignored this step. Using ctrl-f5 is fine for me.

So that's it for the first WAD practical on this blog.

Stay frosty, San Diego.

Sine Cera,

Jeremy

Web Application Development Notice

From this point onwards, this blog can be used to document the WEB APPLICATIONS DEVELOPMENT (ST2217) Practicals with the tag 'wad'.