Server-side  Web Programming Lecture 3:  Introduction to Java Server Pages
Form Handling Form data  appended  to request string Generates the request: http://frodo.cis.ysu.edu/~john/cgi-bin/test.pl &quantity=3 <FORM NAME=&quot;purchaseform&quot;  METHOD=GET  ACTION= http://frodo.cis.ysu.edu/~john/cgi-bin/test.pl > Quantity: <INPUT TYPE=&quot;text&quot; SIZE=&quot;8&quot; NAME=&quot;quantity&quot; /> <BR /><BR /> <INPUT TYPE=&quot;submit&quot; VALUE=&quot;SUBMIT&quot;> </FORM>
Form Handling Goal: Extract  values of parameters from the request Generate  appropriate response page based on parameter values Take other appropriate action based on request Add to shopping cart Modify or query database
Server Page Model Html document with  executable code  interspersed When page requested: Code executed Html generated and inserted in its place Final  all html  document sent back as response request for somepage.jsp Tomcat server somepage.jsp html html  Java html  Java  html html html html Java  html html resulting html page html html  html html  html  html html html html html  html html
Java Server Pages <HTML> <HEAD><TITLE>cgi-bin response</TITLE></HEAD> <BODY> <P> Thank you for your order of  <%= request.getParameter(“quantity”) %> widgets! </P> </BODY> </HTML>
JSP Syntax Basic tag form:  <% … %> Simplest form: <%=   some Java expression  %> Tomcat  evaluates  expression to get value Inserts  that value in place of expression in generated html page
JSP Simple Example Simple example: Java Server Page Resulting html Page 2 + 2 evaluated to value of 4 <html> <body> <p> Two plus two is  <%=  2 + 2 %>. </p> </body> </html>  <html> <body> <p> Two plus two is  4 . </p> </body> </html>
JSP Syntax Basic tag form:  <% … %> Executes code inside brackets  without  generating html Set variables later used to generate html later Store/access values in session/databases <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html>
JSP Syntax Stores value of  4  in  sum  variable Value of  4  in  sum  used in this JSP No html here <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html>  <html> <body> <p> Two plus two is  4 . </p> </body> </html>
JSP Scoping Variable  declared  in a block of JSP on a page May be accessed by any  other  JSP on  same  page No access to variable from any  other  page (purpose of  sessions ) <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html>
Html Forms The  FORM  tag <form action=” url of response page ”    method=” get or post ”> … </form> Relative  url if response page is part of same webapp Method by which form data is passed
Get vs. Post Method Prevents bookmarking (good if part of session that user should no be able to enter in middle) Allows bookmarking of pages Parameters limited to ~4k of data No fixed limit to length of form data passed Faster Form data not visible (some security against shoulder surfing, but still need encryption for total security) Appends form data to end of URL Must specify in FORM  Default method Post  method Get  method
Simple Form Elements TEXT  tag <input type=“text” name=“ elementname ”/>   SUBMIT  tag <input type=”submit” value=” buttonlabel ”/> Necessary for value to be sent to server
Form Element Example <form action=&quot;orderReply.jsp&quot;  method=&quot;get&quot;> <table cellspacing=&quot;5&quot;> <tr> <td align=&quot;right&quot;>Number to purchase:</td> <td> <input type=&quot;text&quot; name=&quot;quantity&quot;> </td> </tr><tr> <td align=&quot;right&quot;>Your name:</td> <td>  <input type=&quot;text&quot; name=&quot;customerName&quot;> </td> </tr><tr> <td align=&quot;right&quot;>Your email:</td> <td>  <input type=&quot;text&quot; name=&quot;customerEmail&quot;> </td> </tr><tr> <td></td> <td> <input type=&quot;submit&quot; value=&quot;Place Order&quot;> </td> </tr> </table> <form>
Form Element Example
Form Parameter Passing Parameter string passed: quantity=137&customerName=John+Sullins& customerEmail=john@cis.ysu.edu
Handling Form Data request  object in JSP Java object created from request string Contains request data and  methods  to easily access that data Accessed by JSP code Data from form Other data about request methods to access data about the request Code in JSP request
Handling Form Data Most useful method: String  request.getParameter( String ) Example:   String name =    request.getParameter(&quot;customerName&quot;);   sets the value of “ name ” to “ John Sullins ” Takes name of form element as parameter Returns the corresponding value passed to the server
Example JSP <body> <% String name = request.getParameter(&quot;customerName&quot;); String email = request.getParameter(&quot;customerEmail&quot;); String quantity = request.getParameter(&quot;quantity&quot;); %> <h2>Order Confirmation</h2> <p> Thank you for your order of <%= quantity %> widgets, <%= name %>. </p> <p> You will shortly receive an email confirmation at <%= email %>. </p> </body>
Acquiring Form Data Statements to get and store form data:   <% String name =    request.getParameter(&quot;customerName&quot;); String email =    request.getParameter(&quot;customerEmail&quot;); String quantity =    request.getParameter(&quot;quantity&quot;); %> “ 137” quantity “ john@cis.ysu.edu” email “ John Sullins” name
Displaying Values in Response <p> Thank you for your order of  <%= quantity %>  widgets,  <%= name %> . </p><p> You will shortly recieve an email confirmation at  <%= email %> . </p> 137 John Sullins [email_address]
Commenting JSP Files Crucial to future  maintenance  of site Inside of JSP code (between  <%  and  %> ): // comment /* comment */ Outside of JSP code (that is, in html) <!-- comment -->
Importing Library Classes Much of Java classes in separate  libraries Must be  imported  to be used in JSP Syntax: <%@ page import=” list of Java classes ” %> Example: <%@ page import=”java.util.Date,    java.io.*” %>   Date  class in the  util  library All  classes in the  io  library

Lecture3

  • 1.
    Server-side WebProgramming Lecture 3: Introduction to Java Server Pages
  • 2.
    Form Handling Formdata appended to request string Generates the request: http://frodo.cis.ysu.edu/~john/cgi-bin/test.pl &quantity=3 <FORM NAME=&quot;purchaseform&quot; METHOD=GET ACTION= http://frodo.cis.ysu.edu/~john/cgi-bin/test.pl > Quantity: <INPUT TYPE=&quot;text&quot; SIZE=&quot;8&quot; NAME=&quot;quantity&quot; /> <BR /><BR /> <INPUT TYPE=&quot;submit&quot; VALUE=&quot;SUBMIT&quot;> </FORM>
  • 3.
    Form Handling Goal:Extract values of parameters from the request Generate appropriate response page based on parameter values Take other appropriate action based on request Add to shopping cart Modify or query database
  • 4.
    Server Page ModelHtml document with executable code interspersed When page requested: Code executed Html generated and inserted in its place Final all html document sent back as response request for somepage.jsp Tomcat server somepage.jsp html html Java html Java html html html html Java html html resulting html page html html html html html html html html html html html html
  • 5.
    Java Server Pages<HTML> <HEAD><TITLE>cgi-bin response</TITLE></HEAD> <BODY> <P> Thank you for your order of <%= request.getParameter(“quantity”) %> widgets! </P> </BODY> </HTML>
  • 6.
    JSP Syntax Basictag form: <% … %> Simplest form: <%= some Java expression %> Tomcat evaluates expression to get value Inserts that value in place of expression in generated html page
  • 7.
    JSP Simple ExampleSimple example: Java Server Page Resulting html Page 2 + 2 evaluated to value of 4 <html> <body> <p> Two plus two is <%= 2 + 2 %>. </p> </body> </html> <html> <body> <p> Two plus two is 4 . </p> </body> </html>
  • 8.
    JSP Syntax Basictag form: <% … %> Executes code inside brackets without generating html Set variables later used to generate html later Store/access values in session/databases <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html>
  • 9.
    JSP Syntax Storesvalue of 4 in sum variable Value of 4 in sum used in this JSP No html here <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html> <html> <body> <p> Two plus two is 4 . </p> </body> </html>
  • 10.
    JSP Scoping Variable declared in a block of JSP on a page May be accessed by any other JSP on same page No access to variable from any other page (purpose of sessions ) <html> <body> <% int sum = 2 + 2; %> <p> Two plus two is <%= sum %>. </p> </body> </html>
  • 11.
    Html Forms The FORM tag <form action=” url of response page ” method=” get or post ”> … </form> Relative url if response page is part of same webapp Method by which form data is passed
  • 12.
    Get vs. PostMethod Prevents bookmarking (good if part of session that user should no be able to enter in middle) Allows bookmarking of pages Parameters limited to ~4k of data No fixed limit to length of form data passed Faster Form data not visible (some security against shoulder surfing, but still need encryption for total security) Appends form data to end of URL Must specify in FORM Default method Post method Get method
  • 13.
    Simple Form ElementsTEXT tag <input type=“text” name=“ elementname ”/> SUBMIT tag <input type=”submit” value=” buttonlabel ”/> Necessary for value to be sent to server
  • 14.
    Form Element Example<form action=&quot;orderReply.jsp&quot; method=&quot;get&quot;> <table cellspacing=&quot;5&quot;> <tr> <td align=&quot;right&quot;>Number to purchase:</td> <td> <input type=&quot;text&quot; name=&quot;quantity&quot;> </td> </tr><tr> <td align=&quot;right&quot;>Your name:</td> <td> <input type=&quot;text&quot; name=&quot;customerName&quot;> </td> </tr><tr> <td align=&quot;right&quot;>Your email:</td> <td> <input type=&quot;text&quot; name=&quot;customerEmail&quot;> </td> </tr><tr> <td></td> <td> <input type=&quot;submit&quot; value=&quot;Place Order&quot;> </td> </tr> </table> <form>
  • 15.
  • 16.
    Form Parameter PassingParameter string passed: quantity=137&customerName=John+Sullins& [email protected]
  • 17.
    Handling Form Datarequest object in JSP Java object created from request string Contains request data and methods to easily access that data Accessed by JSP code Data from form Other data about request methods to access data about the request Code in JSP request
  • 18.
    Handling Form DataMost useful method: String request.getParameter( String ) Example: String name = request.getParameter(&quot;customerName&quot;); sets the value of “ name ” to “ John Sullins ” Takes name of form element as parameter Returns the corresponding value passed to the server
  • 19.
    Example JSP <body><% String name = request.getParameter(&quot;customerName&quot;); String email = request.getParameter(&quot;customerEmail&quot;); String quantity = request.getParameter(&quot;quantity&quot;); %> <h2>Order Confirmation</h2> <p> Thank you for your order of <%= quantity %> widgets, <%= name %>. </p> <p> You will shortly receive an email confirmation at <%= email %>. </p> </body>
  • 20.
    Acquiring Form DataStatements to get and store form data: <% String name = request.getParameter(&quot;customerName&quot;); String email = request.getParameter(&quot;customerEmail&quot;); String quantity = request.getParameter(&quot;quantity&quot;); %> “ 137” quantity “ [email protected]” email “ John Sullins” name
  • 21.
    Displaying Values inResponse <p> Thank you for your order of <%= quantity %> widgets, <%= name %> . </p><p> You will shortly recieve an email confirmation at <%= email %> . </p> 137 John Sullins [email_address]
  • 22.
    Commenting JSP FilesCrucial to future maintenance of site Inside of JSP code (between <% and %> ): // comment /* comment */ Outside of JSP code (that is, in html) <!-- comment -->
  • 23.
    Importing Library ClassesMuch of Java classes in separate libraries Must be imported to be used in JSP Syntax: <%@ page import=” list of Java classes ” %> Example: <%@ page import=”java.util.Date, java.io.*” %> Date class in the util library All classes in the io library