FT2283 Web Development

1
FT228/3 Web Development
multi page applications/ sharing data
2
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

3
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

4
Example
Userinput.jsp
infovalidate.jsp
confirmed.jsp
confirmed.jsp displays a messageto user to
confirmpayment made.
Userinput.jsp Displays a forminto whichuser
enters theirdetails Displays any errors on the
form
infovalidate.jsp Validates the infoprovided
inuserinput.jspand passes back to
userinput.jspif theres an error, or
confirmed.jspif info is valid.
5
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 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

6
Structure of JSP pages

• 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

7
Structure of JSP pages example
Userinput.jsp
infovalidate.jsp
confirmed.jsp
confirmed.jsp displays a messageto user to
confirmpayment made.
Userinput.jsp Displays a forminto whichuser
enters theirdetails
infovalidate.jsp Validates the infoprovided
inuserinput.jspand passes back to
userinput.jspif theres an error, or
confirmed.jspif info is valid.
Presentation
Request processing and business logic
Presentation
8
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 ltjspforwardgt standard action tag

9
Passing control from one page to another

• ltjspforwardgt has one attribute page target
  pagee.g. ltjspforward page confirmed.jsp/gt
• 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 ltjspparamgt action.
• ltjspparamgt action is nested within the
  jspforward action. It takes a name and value
  attribute.

10
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. ltjspforward
page userinput.jspgt ltjspparam name msg
value invalid credit card
number/gt lt/jspforwardgt
Target page
Name of parameter to be passed
Value of parameter
11
Passing control from one page to another
ltjspforward page userinput.jspgt
The target page in this example is assumed to be
in the same directory on the web server as the
current JSP page
ltjspforward page /somedir/userinput.jspgt
The target page in this example is assumed to be
in the /somedir/ directory as a subset of the
main applicationdirectory (../webapps/mainapp/)
Note the ltcredirectgt tag is similar to the
ltjspforwardgt tag, but also allows redirection
to a different URL.
12
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 ltcsetgt to create a
  variable and save data to this variable. Can
  then access this variable in another part of the
  application.
• ltcsetgt has various attributes (see page 44 of
  JSTL specification) including var, value and
  scope
• For example ltcset varerrormsg"
  valueInvalid entry
  scope requestgt

13
Sharing data across pages Scope

• 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).

14
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
15
Sharing data across pages Scope

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

• ltcset varhitcounter" value0"
  scope"application" /gt

• To retrieve the value of this variable in another
  JSP page ltcout value'hitcounter' /gt

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
16
Sample code
Userinput.jsp
infovalidate.jsp
confirmed.jsp
confirmed.jsp displays a messageto user to
confirmpayment made.
Userinput.jsp Displays a forminto whichuser
enters theirdetails Displays any errors on the
form
infovalidate.jsp Validates the infoprovided
inuserinput.jspand passes back to
userinput.jspif theres an error, or
confirmed.jspif info is valid.
17
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.
18
confirmed.jsp displays the confirmation. called
by the infovalidate.jsp page if no errors
19
Sample code user input.jsp
lt_at_ taglib prefix"c" uri"http//java.sun.com/jsp
/jstl/core" gt lthtmlgt ltheadgt
lttitlegtPayment Formlt/titlegt lt/headgt ltbody
bgcolor"white"gt ltform action"userinfovalida
te.jsp" method"post"gt lttablegt ltinput
type"hidden" name"submitted" value"true"gt
ltcif test"param.submitted !empty msg"gt
lttrgt lttd colspan"2"gt
ltfont color"red"gt ltcout value
"msg"/gt lt/fontgt lt/tdgt
lt/trgt lt/cifgt
Need to know whether this is thefirst time form
is displayed
Check if there are any error messages to display.
Themsg variable is set in the validation page
20
Sample code user input.jsp (continued)
lttrgt lttdgtNamelt/tdgt
lttdgt ltinput type"text"
name"userName" value "ltcout value
"param.userName"/gt"gt lt/tdgt
lttdgtCredit card numberlt/tdgt lttdgt
ltinput type"text" name"creditCardNumber" value
"ltcout value "param.creditCardNumber"
/gt"gt lt/tdgt lt/trgt lttrgt
lttd colspan2gt ltinput
type"submit" value"Send Data"gt
lt/tdgt lttrgt lt/tablegt
lt/formgt lt/bodygt lt/htmlgt
Display any previously enter values of
username/credit card number
21
Sample code infovalidate.jsp
lt_at_ taglib prefix"c" uri"http//java.sun.com/jsp
/jstl/core" gt lt-- tests whether username and
credit card have been entered --gt lt-- if
there's an error, set a msg variable --gt
ltcchoosegt ltcwhen test"empty
param.userName"gt ltcset var "msg" value
"You must enter your username" scope
"request"/gt ltjspforward
page"userinfoinput.jsp" /gt lt/cwhengt
ltcwhen test"empty param.creditCardNumber"gt
ltcset var "msg" value "You must enter
your credit card number" scope
"request"/gt ltjspforward page"userinfoinput.j
sp" /gt lt/cwhengt ltcotherwisegt
ltjspforward page"confirmed.jsp" /gt
lt/cotherwisegt lt/cchoosegt
Username request parameter
Must set scope to request. Otherwise, the message
wont be available to userinputinfo.jsp
22
Sample code confirmed.jsp
lt-- displays a confirmation screen to the user
--gt lthtmlgt ltheadgt lttitlegtUser Info
Validatedlt/titlegt lt/headgt ltbody
bgcolor"white"gt ltfont color"green"
size"3"gt Your payment details are correct
- thank you lt/fontgt lt/bodygt lt/htmlgt
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
23
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

24
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

25
Session tracking

• Examples of session tracking information
• Shopping website Items in a shopping cart
• -gt Item1, Gone with the Wind)
• -gtItem2, 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 applicationBank employee selects
  the branch they are a member of. Session stores
  this info in some way -gt branch,
  931012Application remembers the branch
  number so that employee does not have to
  re-enter. Only customers relevant to the branch
  are shown throughout.

26
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

27
Session tracking
lt_at_ taglib prefix"c" uri"http//java.sun.com/jst
l/core" gt lthtmlgt ltheadgt header details etc
lt/htmlgt ltbody bgcolor"white"gt lt--
Increment counters --gt ltcset
var"sessionCounter" scope"session"
value"sessionCounter 1" /gt ltcset
var"applCounter" scope"application"
value"applCounter 1" /gt lth1gtCounter
pagelt/h1gt This page has been visited ltbgt
ltcout value"sessionCounter" /gt lt/bgt
times within the current session, and ltbgt
ltcout value"applCounter" /gt lt/bgt times
by all users since the application was started.
lt/bodygt lt/htmlgt
will last for the users session only
will be updated by all users of the applicaton
28
Summary

• Looked at
• Structuring a JSP application
• Passing control
• Sharing data
• Scope (page, request, session, application)
• Session tracking