EECS 4413. LAB 0 4 : More on Servlets – more forms, servlet context, session
tracking
A. IMPORTANT REMINDERS
- Lab 4 is due on Tuesday (July 1 1 ) at 11 pm. No late submission will be accepted.
- For this lab, you are welcome to attend the lab sessions on this and next Wednesday (July 5). TAs or
instructor will be available to help you. The location is LAS1002. Attendance is optional. You can
also ask questions on Monday (July 10 after class) - Feel free to signal a TA for help if you stuck on any of the steps below. Yet, note that TAs would
need to help other students too. - You can submit your lab work any time before the specified deadline.
B. IMPORTANT PRE-LAB WORKS YOU NEED TO DO BEFORE GOING TO THE LAB
- Download this lab description and the associated files and read it completely.
- Download this lab description and the associated files and read it completely.
ip the compressed file. If uncompressing is successful, you should get a folder 4413 Lab0 4 , which
contains html and css files for the last question. - Download the Java program from eClass (week 4 or 5), review the code and play with it. Those are the program
demonstrated in class. Understand the basic socket communication, multiple clients. You are expected to fully
understand the code of the program before you start the lab.
C. GOALS/OUTCOMES FOR LAB
- More on generating forms in Servlet.
- To learn/recap the fundamental servlet features, including context level initial values, dispatchers, attributes,
session tracking.
D. TASKS
1 | Part 1 : More on Java Servlet program – processing and generating forms. |
1 | Part 2: Simple session tracking with hidden fields. |
1 | Part 3: Servlet context, Request dispatcher, Session tracking |
E. SUBMISSIONS
- eClass submission. More information can be found at the end of this document.
Part I Simple Java Servlet (generating HTML forms as well as processing HTML forms)
In lab3 Part VI, you created dynamic html forms from Java Servlets.
The html file provides a table of author names to search. Users can select one or more authors and then submit the
form. The form data goes to the first servlet, call it QueryServlet. This Servlet processes the form data, searching the
books and then generates a dynamic html page showing the result of search. This page contains a form, inside it lists
the books by the authors, in a HTML table format. There is also a checkbox for each book record, which allows users
to select the book for ordering but it was not used in lab3. When user clicks Order button, it sends the form data to
the 2nd servlet, called OrderServlet , which reads the form data and displays some information.
1 | In this lab, you extend the work, so that after the user to select the books, the OrderServlet will give a list of books |
- Import your lab3servletQ4.war file that you submitted, as new project, name it lab 4 servletQ1.
- First, to make the checkbox selection info passed to the Orderservlet , we need to give the checkboxes a name,
and value of each checkbox is the id of the item it checked. - Then, modify the OrderServlet to list all the books selected. To do this, get the checkbox parameter and retrieve
the id values. Then for each id, get the book info by searching the book by the id. And output the id, author and
price information. List the record in table format.
1 | Dynamic page |
1 | Dynamic page |
- So far, the program is better than lab3 version. But it still lacks quality and price information, which we will add
next. - In the QueryServlet table, add a quality textbox, which has initial value 1 for each book. For the textbox to pass
to the order servlet, one approach is to use the “qty”+id as the name. For example, for book of id 2, the quality
textbox’s name should be “qty2”. For book of id 5, the quality textbox’s name should be “qty5”. Something like
out.println( “ <input …… name= ‘ qty “ + id + “ ‘ _/>_ “ _)_. You may also want to use size attribute of the input tag to
control the width of the textbox.
This allows the other servlet to retrieve this quality information for a particular book by its id – from parameter
information. - Then in the OrderServlet , for each record, also retrieve the quality information by the parameter of “qty”+id. List
this in the table. - Lastly, improve on the program by calculating and showing the total price of the order. When listing the orders,
add up the price and display as the last row of the table (hint: you can useto make the last row
merged).
See more output from the video.
- Once the program works, export it as ‘WAR’ file with the default name ‘lab4servletQ1.war’. Check the ‘Export
source files’ before you click Finish. - This program is closer to real shopping than lab3. But it does not support ‘shopping cart’ experience: after one
order, when user goes back to select again, the previous order information is lost. In real e-commerce
application, we need to keep the selection in shopping cart and then user go back to select more, the items is
added the shopping cart. We need session tracking to do this. In exercise 3 of this lab, you did a simple tracking.
In later labs we continue with this example to add shopping cart functionality.
Part II: use hidden fields to pass user information (this is a very simple and short exercise)
- There is a index.html that asks user for some information. Then the form data is sent to a servlet. This servlet
displays some information and then provides a button that leads to the second servlet. The second servlet will
display the information that the user entered. - How can the 2nd servlet get the user entered information? You can use cookie, session, but here we experience a
simple approach: hidden fields. The first servlet, in addition to generating some information, also generate a
form with hidden field of the user information. The servlet adds ‘XXX’ to the end of the entered password, and
process the checkbox input so it can be put as a hidden field. - When the button is clicked, the hidden data in the form is sent to the 2nd servlet. The second servlet will just
retrieve them as the regular form data. - Note that both the html form and the generated form should use POST method, so password and other
1 | information will not be shown in the URL bar. |
- Note that as mentioned in class, hidden fields approach has some limitations. One of them is that it needs a
1 | form with buttons. If we want to provide hyperlink to the 2nd servlet, instead of a button, then it will not |
1 | send to the hidden field information. In that case, cookie and http session are better choices. |
1 | Entered yu |
- To do:
o Create a dynamic project, name it lab4servletQ2. Create a index .html file, and save in the webapp folder.
o Once the program works, export it as ‘WAR’ file with the default name ‘ lab 4 servletQ 2 .war’. Check theCreate the two servlets to fulfill the above tasks.
‘Export source files’ before you click Finish.
1 | Part III: Servlet context, Request dispatcher, Session tracking |
- You are given a UI.html and a CSS file. The UI allows users to enter Principal , Interest rate and Period and
submit to a servlet to calculate the monthly payment for the loan. - When a user enter the Principal , Interest rate and Period , and submit the form, the data is sent to a OSAP
servlet, which extracts the three values, and calculates the monthly payment of this loan. Note that if a value is
not entered, the servlet retrieves the default value set in a context parameter in the Deployment descriptor file
web.xml. The default values are: Principal: 1000, Interest 10, Period 12. This way, the application developer ne
can change the defaults without recompiling the servlet. Compute the monthly payment using the formular:
12 ∗ 100 ∗^ 𝐴^𝑟
1 −( 1 + 12 ∗𝑟 100 )−𝑛
where r is the annual interest rate, A is the principal, and n is the period measured in
1 | months. |
- After calculating the result, the OSAP servlet sends the information to another servlet ResultView to display
the result. The OSAP servlet uses RequestDispacher to forward the request and response to the ResultView
servlet. The servlet need to pass 4 pieces of information: principal and interest and period used for calculation,
as well as the result. Note that to pass these 4 pieces of information, the servlet needs to set the attributes for
each. Note that these attributes can be set in application , request or session scope. For the above these 4
values, request scope is sufficient, as the 2nd servlet will retrieve it from the forwarded request. This OSAP
servlet is also responsible for checking if the connection is the first time by this client or a revisit, using http
sessions. If this is the first-time visit, it creates a new http session and sets a count attribute to store the visit
count information. If this is not the first-time visit, it should retrieve the count attribute information from the
session and update with incremented visit count. Note that this should be a session scope attribute, as it is the
connection between this client and the sever. Another client connected to this application should have a
separate visit count information.
Note that this OSAP servlet does not output anything to the client. It calculates the loan payment and forwards
the relevant information to the 2nd servlet ResultView , who is responsible for displaying the result to the client. - The ResultView servlet will first display some header information of the client request. Note that such
information can be retrieved directly from the forwarded request object. It also displays the user entered
principle , interest and period information. Note that this information may not necessarily be the same as the
used principal, interest and period information – if the user did not enter an information, the default context
parameter value was used instead. This information can also be retrieved directly from the forwarded request
(how?).
Next, the servlet retrieves sessional attributes about the visit count. If this is the first-time visit, display
“Welcome …” otherwise display “Welcome back. Calculation count: X”.
Next, the servlet displays the OSAP result, as well as the principal , interest and period information that were
actually used in the calculation. Recall that this information has been set by the OSAP servlet as request cope
attributes.
Note that in generating the dynamic HTML, it should also link to the provided CSS file so it uses the CSS styles.
This servlet also generates a “recalculate” button which will lead the user to the original UT html. When the
client recalculates within a certain period of time (like within 30 minutes), it will be recognized as the re-visitor
and its visiting count will be updated (in the OSAP servlet) and displayed (in the ReviewResult servlet).
During the connection, if another client connects, it should be recognized as the new client. You can simulate another
client by using another computer to connect. You can also use another browser in the working computer to connect,
and it will be treated as another client/session. If you connect with the same browser but after a while (>30 minutes)
the previous session expires, and following connection will also be treated as a new client/session.
- To do:
o Create a dynamic project, name it lab4servletQ3. Put the provided html and CSS file into the project. Add
o Create the two servlets to fulfill the above tasks.the context level initial values to the deploy descriptor **web.xml**.
o For the generated form from OrderServlet, link to CSS and give the following styles:
1 | o |
1 | o Once the program works, export it as ‘WAR’ file with the default name ‘ lab4servletQ 3 .war’. Check the |
Submissions.
You should have exported lab 4 servletQ1.war lab 4 servletQ 2 .war and lab 4 servletQ 3 .war. Make sure you
have checked “Export source files” when exporting. Pu
Submit the 3 war files separately on eClass.
Please don’t include the videos in your submission package.
1 | Late submissions or submissions by email will NOT be accepted. Plan ahead and submit early. |
1 | <header> .... <header> |
1 | <p class=’subtitle’> .... </p> |
1 | <h2 .... > <form .... class=’resultForm’ >^ |
- principal …
- interest …
- period …