Outline CS 112 Introduction to Programming Web Programming: Backend (server side) Programming with Servlet, JSP q Admin and recap q Server-side web programming overview q Servlet programming q Java servlet page (JSP) Yang (Richard) Yang Computer Science Department Yale University 308A Watson, Phone: 432-6400 Email: yry@cs.yale.edu 2 Admin q PS8 Part 2 (Bulldog tournament) Due Tuesday at 11:55 pm q Project checkpoint Due Thursday at 11:55 pm (Please use the CHECKPOINT template) Recap: HTML/CSS/Javascript q HTML: page content (model) Document object model (DOM) q CSS: display of content (view) q Javascript: interaction q Project demo day 11:30 12:30 pm Apr. 30 at TEAL 3 Outline q Admin and recap q Server-side web programming overview Web App--Server Side: Motivating Example (OPS2b) Madlib (template): One of the most <adjective> characters in fiction is named "Tarzan of the <plural-noun>." Tarzan was raised by a/an <noun> and lives in the <adjective> jungle in the heart of darkest <place>. He spends most of his time eating <plural-noun> and swinging from tree to <noun>. Whenever he gets angry, he beats on his chest and says, " <funny-noise>!" This is his war cry. Tarzan always dresses in <adjective> shorts made from the skin of a/an <noun> and his best friend is a/an <adjective> chimpanzee named Cheetah. He is supposed to be able to speak to elephants and <plural-noun>. In the movies, Tarzan is played by <person'sname>. 5 6 1
Web App--Server Side: Motivating Example Commandline Madlib (interaction): Welcome to the game of Mad Libs. I will ask you to provide several words and phrases to fill in a mad lib story. Your mad-lib has been created: The result will be displayed to you. One of the most silly characters in fiction is named Template file? tarzan.txt "Tarzan of the apples." Tarzan was raised by a/an frisbee and lives in the hungry jungle in the Please input an adjective: silly heart of darkest New Haven, CT. He spends most of his time Please input a plural noun: apples eating bees and swinging from tree to umbrella. Please input a noun: frisbee Whenever he gets angry, he beats on his chest and says, Please input an adjective: hungry " burp!" This is his war cry. Tarzan always dresses in Please input a place: New Haven, CT shiny shorts made from the skin of a/an jelly donut Please input a plural noun: bees and his best friend is a/an beautiful chimpanzee named Please input a noun: umbrella Cheetah. He is supposed to be able to speak to elephants and Please input a funny noise: burp spoons. In the movies, Tarzan is played by Keanu Reeves. Please input an adjective: shiny Please input a noun: jelly donut Please input an adjective: beautiful Please input a plural noun: spoons pseudo code? Please input a person's name: Keanu Reeves 7 Cmdline Madlib Pseudo Code Ask user to choose story template Web presents a different medium to deliver app. The unit of interaction is Web page. Q: what Web pages? http://mrt-cs112-0.appspot.com/ Webpage-Based Programming Input to Create Each Page? q One way to think about a dynamic Web page is to think it as an object: it is constructed with given input parameters q A Web page may collect input from user and then create another Web page (object)--browsing input P1 input P2 input P3 P1 P2 P3 Ask user to choose story template file Input: None Input Chosen template Who collect? Input User input for each token Chosen Template Who collect? Server-side Page Creation HTML Form q Form input parameter created html page Q: What is the mechanism in Web to collect user input? http://www.teaching-materials.org/htmlcss/lesson3/slides.html 2
HTML Form Program to be invoked Form Input Type q A form gives instruction to the browser on inputs to be collected from user URL (program) to be invoked when sending to server <form action="/create" method="get > Step 1: Please pick an input story template: <div> <input type="text" name="file" size ="40" value="tarzan.txt"> </div> <input type="hidden" name="language" value="english > <div> <input type="submit" value="next" /> </div> Invisible on page. Used </form> to pass internal data http://www.teaching-materials.org/htmlcss/lesson3/slides.html How input is transported to server: get/post An input item to be collected q <input type= text" name="q"> q <input type= checkbox name = myc /> q <input type= radio name = mypizzasize /> q <input type= range min= 0 max= 10 name = cheesiness /> q <select name="crust > <option value="thin">thin</option> <option value="thick">thick</option> <option value="cheese">cheese</option> </select> http://www.teaching-materials.org/htmlcss/lesson3/slides.html Web Execution Flow: Client Side q After user clicks submit on a form, browser encodes each input in a format <name>=<value> requests page with URL: http://www.bing.com/search?q=yale Web Execution Flow: Server Side q Web server receives the request for the URL, finds the application for the URL, and passes the values of the parameters to the application q The application retrieves the parameters, generates a Web page, and sends the page back to the browser to display Google App Engine q A platform to simplify the development and hosting of Web applications Simplified deployment Load balancing Automatic scaling Useful high-level services and APIs 17 Discussion: What GAE can do to allow simple, flexible server-side app programming? q Client browser After user clicks submit on a form, browser encodes each input in a format <name>=<value> requests page with URL: q Web server receives the request for the URL, finds the application for the URL, and passes the values of the parameters to the application. web.xml: User defines URL mapping the application retrieves the request parameters, generates a response Web page back to the browser to display 3
Discussion: What GAE can do to allow simple, flexible server-side app programming? q Client browser After user clicks submit on a form, browser encodes each input in a format <name>=<value> requests page with URL: Define Servlet class: conduct q Web server common processing steps; app overrides receives the request for the URL, key step (doget/ finds the application for the URL, and dopost) to define app-specific behavior passes the values of the parameters to the application. the application retrieves the request parameters, generates a response Web page back to the browser to display Discussion: What GAE can do to allow simple, flexible server-side app programming? q Client browser After user clicks submit on a form, browser encodes each input in a format <name>=<value> requests page with URL: Define HttpServletRequest q Web server class to allow simple methods to retrieve receives the request for the URL, parameter, e.g., finds the application for the URL, getparameter( name ) and passes the values of the parameters to the application. the application retrieves the request parameters, generates a response Web page back to the browser to display Discussion: What GAE can do to allow simple, flexible server-side app programming? Example q Client browser After user clicks submit on a form, browser encodes each input in a format <name>=<value> requests page with URL: Define HttpServletResponse q Web server class to allow simple methods to write response receives the request for the URL, (not worry about sending finds the application for the URL, and across network), e.g., getwriter().println( passes the values of the parameters to <p>hello ) the application. the application retrieves the request parameters, generates a response Web page back to the browser to display Ask user to choose story template file Input: None index.html (see Note) web.xml Example Ask user to choose story template file <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5 > <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> 23 Input: Chosen template CreateMadlibServlet.java 4
web.xml q Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet-class>madlibs.createmadlibservlet</servlet-class> <servlet-mapping> <url-pattern>/create</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> 25 Example Ask user to choose story template file Input: User input for each token/template DisplayMadlibServlet.java web.xml q Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet-class>madlibs.createmadlibservlet</servlet-class> <servlet-name>displaymadlibservlet</servlet-name> <servlet-class>madlibs.displaymadlibservlet</servlet-class> <servlet-mapping> <url-pattern>/create</url-pattern> </servlet-mapping> Outline q Admin and recap q Server-side programming overview q Java Servlet q Java Servlet Page (jsp) <servlet-mapping> <servlet-name>displaymadlibservlet</servlet-name> <url-pattern>/display</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> 27 28 Motivation q Most used statement in CreateMadlibServlet.java? Motivation q For many Web pages, most of the content will be static, and hence only a small portion will be generated dynamically q The Servlet architecture asks you to print the whole document (i.e., a large number of Java print and escape statements for printing the static part) 29 q JSP goal: remove most of the print statements 30 5
Motivating Example Manual HTML q Generate an html page consisting of a list of 10 random numbers 31 <li>1: 9</li> <li>2: 3</li> <li>3: 5</li> <li>4: 1</li> <li>5: 7</li> <li>6: 4</li> <li>7: 0</li> <li>8: 2</li> <li>9: 8</li> <li>10: 9</li> 32 Servlet JSP Motivation import java.util.random; public class NumListServlet extends HttpServlet { public void dopost(httpservletrequest req, HttpServletResponse resp) throws IOException { doget(req, resp); public void doget(httpservletrequest req, HttpServletResponse resp) throws IOException { resp.setcontenttype("text/html"); import java.util.random; public class NumListServlet extends HttpServlet { public void dopost(httpservletrequest req, HttpServletResponse resp) throws IOException { doget(req, resp); public void doget(httpservletrequest req, HttpServletResponse resp) throws IOException { resp.setcontenttype("text/html"); resp.getwriter().println(""); resp.getwriter().println(""); resp.getwriter().println( "); resp.getwriter().println(""); resp.getwriter().print( <li>"); resp.getwriter().print( i + : + rand.nextint(10) ); resp.getwriter().println("</li>"); resp.getwriter().println(""); resp.getwriter().println(""); resp.getwriter().println(""); resp.getwriter().println( "); resp.getwriter().println(""); resp.getwriter().print( <li>"); resp.getwriter().print(i + : + rand.nextint(10) ); resp.getwriter().println("</li>"); resp.getwriter().println(""); resp.getwriter().println(""); resp.getwriter().println(""); 33 resp.getwriter().println(""); resp.getwriter().println(""); 34 JSP Motivation Directive Run test.jsp as /test @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" resp.getwriter().print( <li>"); Called a JSP scriptlet, containing a fragment of java code resp.getwriter().print(i + : + rand.nextint(10) ); resp.getwriter().println("</li>"); Why it does not work? 35 36 6
web.xml <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet-class>madlibs.createmadlibservlet</servlet-class> <servlet-name>displaymadlibservlet</servlet-name> <servlet-class>madlibs.displaymadlibservlet</servlet-class> <servlet-name>testjsp</servlet-name> <jsp-file>test.jsp</jsp-file> <servlet-mapping> <servlet-name>testjsp</servlet-name> <url-pattern>/test</url-pattern> </servlet-mapping>... <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> JSP Motivation @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" response.getwriter().print( <li>"); Directive Called a JSP scriptlet, containing a fragment of java code response.getwriter().print(i + : + rand.nextint(10) ); response.getwriter().println("</li>"); implicit object See http://www.tutorialspoint.com/jsp/jsp_implicit_objects.htm for implicit objects 37 38 Output Problem Use implicit object out to print. out!= response.getwrite() @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" response.getwriter().print( <li>"); response.getwriter().print(i + : + rand.nextint(10) ); response.getwriter().println("</li>"); 39 40 Fix Motivation @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" out.print( <li>"); out.print(i + : + rand.nextint(10) ); out.println("</li>"); @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" out.print( <li>"); out.print(i + : + rand.nextint(10) ); out.println("</li>"); What if we do not want to use the print statement? 41 42 7
Attempt JSP Expression @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" <li> i : rand.nextint(10) </li> Problem: i and rand.nextint(10) are not treated as Java exp. @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random" <li> = i : = rand.nextint(10) </li> = encloses JSP expression, whose value appears in the output to out. 43 44 Motivation: Reduce Embedded Scriptlets @ page contenttype="text/html;charset=utf-8" language="java @ page import= java.util.random <li> = i : = rand.nextint(10) </li> JSTL (JavaServer Pages Stanard Tag Library) q Objective: introduce JSP tags for common tasks such as conditional execution, loops, XML data access 45 46 Motivation: Reduce Embedded Scriptlets @ page contenttype="text/html;charset=utf-8" language="java @ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" @ page import= java.util.random <c:foreach var="i" begin="1" end= 10"> <li> <c:out value="${i"/> = rand.nextint(10) </li> </c:foreach> Java Servlet Page (JSP) q History Released in 1999 Similar to PHP but supports more sophisticated J2EE programming q Can be considered as a high-level abstraction of Java servlets q In real implementation, JSPs are translated to servlets at runtime http://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm 47 48 8
Exercise q Turn CreateMadlibServlet.java into createmadlib.jsp 49 9