DT228/3 Web Development

multi page applications/ sharing data

Introduction

• So far, have looked at examples with just a single JSPpage

• Usually, will need more than one JSP page within the application

• Need to know how to

1) structure a JSP application2) pass control from one JSP page to another3) pass data from one JSP to another

Example• A shopping application that accepts a users

payment details on a form, validates thedetails and displays a confirmation page or error depending upon user input

• Various ways that JSP pages for collection of paymentdetails can be structured. Can even have everything on a single JSP page (messy for anything but simplest apps)

• Have used 3 JSP pages: - payment details on a form(userinput.jsp)- validation of the details (validateinfo.jsp) - display of a confirmation page (confirmed.jsp) or error (userinput.jsp) depending upon user input

Userinput.jsp infovalidate.jsp

Userinput.jsp

Displays a forminto which

user enters theirdetails

Displays anyerrors on the

form

infovalidate.jsp

Validates the infoprovided in

userinput.jspand passes back to userinput.jsp

if there’s an error, or confirmed.jspif info is valid.

confirmed.jsp

confirmed.jsp

displays a messageto user to confirmpayment made.

Example

Structure of JSP pagesTo determine how pages should be structured (e.g.

one page vs more than one?):

• General guide: separate the presentation from the request processing and business logic.

• Presentation is the display of the application to the userI.e. the screens (e.g. display of the user input form, display of the confirmation message)

• Request processing and business logic is the ‘behind the scenes’ processing and manipulation(e.g. validation of user input)

• This is the basis of a common application architecturecalled the MVC (model-view-controller) architecture

•This structure enables easier maintenance of theapplication.

•Presentation changes frequently (e.g web page enhancements) but business logic changes less often. Separation enables easier maintenance of presentation pages.

•May need multiple forms of presentation (e.g. to support multiple languages for international websites, to enable a variety of client devices) – easier to do if presentation is separate from business logic

Structure of JSP pages

Userinput.jsp infovalidate.jsp

Userinput.jsp

Displays a forminto which

user enters theirdetails

infovalidate.jsp

Validates the infoprovided in

userinput.jspand passes back to userinput.jsp

if there’s an error, or confirmed.jspif info is valid.

confirmed.jsp

confirmed.jsp

displays a messageto user to confirmpayment made.

Structure of JSP pages: example

Presentation Requestprocessing and business logic

Presentation

Passing control from one page to another

•Separating presentation pages from request processing/business logic - more than one page used to process client request

--- need to be able to pass control from one page to another --- e.g. in the example, infovalidate.jsp need to be able to forward to either userinput.jsp or confirmed.jsp depending on validation result

Can use the <jsp:forward> standard action tag

Passing control from one page to another

•<jsp:forward> has one attribute – “page” = target pagee.g. <jsp:forward page = “confirmed.jsp”/>

• Stops processing of one page and starts processing of the target page

•Target page has access to all request parameters from original page.

•Can also add additional request parameters when control passed, using <jsp:param> action.

•<jsp:param> action is nested within the jsp:forward action. It takes a name and value attribute.

Passing control from one page to another

For example:

A validation page (infovalidate.jsp) forward control to a page, userinput.jsp, in order to display an error message. Need to include error message in thethe forwarding instruction.

<jsp:forward page = “userinput.jsp”> <jsp:param name = “msg” value = “invalid

credit card number”/></jsp:forward>

Name of parameter to be passedValue of parameter

Target page

The target page in this example is assumed to be in the same directory on the web server as the current JSP page

<jsp:forward page = “userinput.jsp”>

The target page in this example is assumed to be in the /somedir/ directory as a subset of the main applicationdirectory (../webapps/myapp/)

<jsp:forward page = “/somedir/userinput.jsp”>

Note: the <c:redirect> tag is similar to the <jsp:forward> tag, but also allows redirection to a different URL.

Passing control from one page to another

Sharing data across pages

•Often need to be able to share data across pages. For

example, determine an error message in infovalidate.jspand pass this to another page, confirmed. jsp

•Can use a core action <c:set> to create a variable and save data to this variable. Can then access this variable in another part of the application.

<c:set> has various attributes (see page 44 of JSTL specification) including ‘var’, ‘value’ and ‘scope’

For example: <c:set var=“errormsg" value=“Invalid entry“ scope = “request”>

•Previous example creates a variable called ‘errorMsg’, and sets its value to ‘Invalid entry’. The scope of the variable is ‘request’

•When a JSP page needs to save data for its processing, it must specify the scope of the data

•The scope of a data object defines how long the data is available for (I.e. ‘how long it lasts’).

Sharing data across pages : Scope

Sharing data across pages : Scope

•there are four Scopes available

Page (I.e. only available within the JSP page. Page scoped data is destroyed when the page has finished generating its output.)

Request (I.e. available in all pages processing the same client request. Once the request from that has completed, the request-scope data is destroyed.)Session (I.e. available to all requests made from the same user/client)

Application (I.e available to all users of that application, while the application is running)

•<c:set var=“hitcounter" value=“0" scope="application" />

•To creates a variable that will be available to any JSP in the application: example:

•To retrieve the value of this variable in another JSP page: <c:out value='${hitcounter}' />

When retrieving a saved value, possible to omit the scope(as shown). If scope omitted, variable name is automatically searched for in each of the scopes, in the order: page, request, session, application

Sharing data across pages : Scope

Userinput.jsp infovalidate.jsp

Userinput.jsp

Displays a forminto which

user enters theirdetails

Displays anyerrors on the

form

infovalidate.jsp

Validates the infoprovided in

userinput.jspand passes back to userinput.jsp

if there’s an error, or confirmed.jspif info is valid.

confirmed.jsp

confirmed.jsp

displays a messageto user to confirmpayment made.

Sample code

userinput.jsp: displays a payment form.

when the user clicks button, infovalidate.jsp is called.

If an entry error is made, the infovalidate.jsp page forwards back to this with the error.

Note: v. simple example for illustration. Details are not saved to a database or file.

confirmed.jsp: displays the confirmation.

called by the infovalidate.jsp page if no errors

Sample code – user input.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html> <head> <title>Payment Form</title> </head> <body bgcolor="white">

<form action="userinfovalidate.jsp" method="post"> <table>

<input type="hidden" name="submitted" value="true"> <c:if test="${param.submitted && !empty msg}">

<tr> <td colspan="2"> <font color="red">

<c:out value = "${msg}"/> </font> </td> </tr>

</c:if>

Need to know whether this is thefirst time form is displayed

Check if there are any error messages to display. The’msg’ variable is set in the validation page

Sample code – user input.jsp (continued)

<tr> <td>Name:</td> <td> <input type="text" name="userName" value = "<c:out value =

"${param.userName}"/>"> </td> <td>Credit card number:</td>

<td> <input type="text" name="creditCardNumber" value = "<c:out value

= "${param.creditCardNumber}"/>"> </td> </tr>

<tr> <td colspan=2> <input type="submit" value="Send Data"> </td> <tr> </table> </form> </body></html>

Display any previously entervalues of username/credit card number

Sample code – infovalidate.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%-- tests whether username and credit card have been entered --%><%-- if there's an error, set a msg variable --%>

<c:choose> <c:when test="${empty param.userName}"> <c:set var = "msg" value = "You must enter your username"

scope = "request"/> <jsp:forward page="userinfoinput.jsp" /> </c:when> <c:when test="${empty param.creditCardNumber}"> <c:set var = "msg" value = "You must enter your credit card

number" scope = "request"/> <jsp:forward page="userinfoinput.jsp" />

</c:when> <c:otherwise> <jsp:forward page="confirmed.jsp" /> </c:otherwise> </c:choose>

Username request parameter

Must set scope to request. Otherwise, the message won’t be available to userinputinfo.jsp

Sample code – confirmed.jsp

<%-- displays a confirmation screen to the user --%>

<html> <head> <title>User Info Validated</title> </head> <body bgcolor="white"> <font color="green" size="+3"> Your payment details are correct - thank you </font> </body></html>

Note: This page is just template text (apart from comment) so could be created as a regular HTML file. Making it a JSP page allows dynamic content later without changing the referring page

Intro to Sessions Many E-businesses personalise their

customers’ browsing experiences by allowing for user preferences

Personalisation is done by tracking the users’ movement though the Internet and combining that info with data provided by the user (e.g. hobbies, address etc)

Robust web applications need to interact back and forth with the user, remembering information about the user between requests

Examples are CNN.com, MSN.com

Sessions

Session tracking is the ability to track a set of interactions between the client and the server

Request/response mechanism for web communication is based on HTTP

HTTP is a stateless protocol – it does not support persistent information

Web server cannot link requests with particular clients

The client needs to identify itself to the server in some way if the server is to recognise the client

Session tracking

Examples of session tracking information:

Shopping website: Items in a shopping cart: -> Item1, “Gone with the Wind”)

->Item2, “BeatlesCD”)

- Select these on one web page, check-out in a different part of the website. Web site “remembers” what you ordered by using session tracking

Web banking application:Bank employee selects the branch they are a member of. Session stores this info in some way:

-> branch, “931012”Application “remembers” the branch number so that employee does not have to re-enter. Only customers relevant to the branch are shown throughout.

Session tracking

There are a number of different techniques available to web applications to enable session tracking, including cookies (next course).

In JSP, can be done by simply using the ‘scope’ attribute of whatever needs to be tracked.

Set the ‘scope’ to session, and the relevant attribute will be available throughout the entire session of the client

Example: a JSP page that displays two counters – a hit counter for the session, and a hit counter for the application

Session tracking<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

<html> <head> header details etc </html> <body bgcolor="white">

<%-- Increment counters --%> <c:set var="sessionCounter" scope="session" value="${sessionCounter + 1}" /> <c:set var="applCounter" scope="application" value="${applCounter + 1}" />

<h1>Counter page</h1>

This page has been visited <b> <c:out value="${sessionCounter}" /> </b> times within the current session, and <b> <c:out value="${applCounter}" /> </b> times by all users since the application was started. </body></html>

will last for the user’s session only

will be updated by all users’ of the applicaton

Summary

Looked at:

Structuring a JSP application

Passing control

Sharing data

Scope (page, request, session, application)

Session tracking