DT228/3 Web Development multi page applications/ sharing data

Introduction So far, have looked at examples with just a single JSP page Usually, will need more than one JSP page within the application Need to know how to 1) structure a JSP application 2) pass control from one JSP page to another 3) pass data from one JSP to another

Example A shopping application that accepts a users payment details on a form, validates the details and displays a confirmation page or error depending upon user input Various ways that JSP pages for collection of payment details 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.jspinfovalidate.jsp Userinput.jsp Displays a form into which user enters their details Displays any errors on the form infovalidate.jsp Validates the info provided in userinput.jsp and passes back to userinput.jsp if there’s an error, or confirmed.jsp if info is valid. confirmed.jsp displays a message to user to confirm payment made. Example

Structure of JSP pages To 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 user I.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 architecture called the MVC (model-view-controller) architecture

This structure enables easier maintenance of the application. 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.jspinfovalidate.jsp Userinput.jsp Displays a form into which user enters their details infovalidate.jsp Validates the info provided in userinput.jsp and passes back to userinput.jsp if there’s an error, or confirmed.jsp if info is valid. confirmed.jsp displays a message to user to confirm payment made. Structure of JSP pages: example Presentation Request processing 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 standard action tag

Passing control from one page to another has one attribute – “page” = target page e.g. 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 action. 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 the the forwarding instruction. Name of parameter to be passed Value 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 The target page in this example is assumed to be in the /somedir/ directory as a subset of the main application directory (../webapps/myapp/) Note: the tag is similar to the 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.jsp and pass this to another page, confirmed. jsp Can use a core action to create a variable and save data to this variable. Can then access this variable in another part of the application. has various attributes (see page 44 of JSTL specification) including ‘var’, ‘value’ and ‘scope’ For example:

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

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)

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: 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.jspinfovalidate.jsp Userinput.jsp Displays a form into which user enters their details Displays any errors on the form infovalidate.jsp Validates the info provided in userinput.jsp and passes back to userinput.jsp if there’s an error, or confirmed.jsp if info is valid. confirmed.jsp displays a message to user to confirm payment 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 Payment Form Need to know whether this is the first 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) Name: "> Credit card number: "> Display any previously enter values of username/credit card number

Sample code – infovalidate.jsp Username request parameter Must set scope to request. Otherwise, the message won’t be available to userinputinfo.jsp

Sample code – confirmed.jsp User Info Validated Your payment details are correct - thank you 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 header details etc <c:set var="sessionCounter" scope="session" value="${sessionCounter + 1}" /> <c:set var="applCounter" scope="application" value="${applCounter + 1}" /> Counter page This page has been visited times within the current session, and times by all users since the application was started. 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