1. CS 112 Introduction to Programming Web Programming: Backend (server side) Programming with Servlet, JSP Yang (Richard) Yang Computer Science Department Yale University 308A Watson, Phone: 432-6400 Email: yry@cs.yale.edu

2. 2 Outline  Admin and recap  Server-side web programming overview  Servlet programming  Java servlet page (JSP)

3. 3 Admin  PS8 Part 2 (Bulldog tournament) m Due Tuesday at 11:55 pm  Project checkpoint m Due Thursday at 11:55 pm (Please use the CHECKPOINT template)  Project demo day m 11:30 – 12:30 pm Apr. 30 at TEAL

4. Recap: HTML/CSS/Javascript  HTML: page content (model) m Document object model (DOM)  CSS: display of content (view)  Javascript: interaction

5. 5 Outline  Admin and recap  Server-side web programming overview

6. 6 Web App--Server Side: Motivating Example (OPS2b) Madlib (template): One of the most characters in fiction is named "Tarzan of the." Tarzan was raised by a/an and lives in the jungle in the heart of darkest. He spends most of his time eating and swinging from tree to. Whenever he gets angry, he beats on his chest and says, " !" This is his war cry. Tarzan always dresses in shorts made from the skin of a/an and his best friend is a/an chimpanzee named Cheetah. He is supposed to be able to speak to elephants and. In the movies, Tarzan is played by.

7. 7 Web App--Server Side: Motivating Example Welcome to the game of Mad Libs. I will ask you to provide several words and phrases to fill in a mad lib story. The result will be displayed to you. Template file? tarzan.txt Please input an adjective: silly Please input a plural noun: apples Please input a noun: frisbee Please input an adjective: hungry Please input a place: New Haven, CT Please input a plural noun: bees Please input a noun: umbrella Please input a funny noise: burp Please input an adjective: shiny Please input a noun: jelly donut Please input an adjective: beautiful Please input a plural noun: spoons Please input a person's name: Keanu Reeves Commandline Madlib (interaction): Your mad-lib has been created: One of the most silly characters in fiction is named "Tarzan of the apples." Tarzan was raised by a/an frisbee and lives in the hungry jungle in the heart of darkest New Haven, CT. He spends most of his time eating bees and swinging from tree to umbrella. Whenever he gets angry, he beats on his chest and says, " burp !" This is his war cry. Tarzan always dresses in shiny shorts made from the skin of a/an jelly donut and his best friend is a/an beautiful chimpanzee named Cheetah. He is supposed to be able to speak to elephants and spoons. In the movies, Tarzan is played by Keanu Reeves. pseudo code?

8. Cmdline Madlib Pseudo Code Display welcome message Ask user to choose story template Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is 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/

9. Webpage-Based Programming  One way to think about a dynamic Web page is to think it as an object: it is constructed with given input parameters  A Web page may collect input from user and then create another Web page (object)--browsing P1 input P2 input P3 input

10. Input to Create Each Page? Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: None Input Chosen template Who collect? Input User input for each token Chosen Template Who collect? P1 P2 P3

11. Server-side Page Creation input parameter created html page Q: What is the mechanism in Web to collect user input?

12. HTML Form  Form http://www.teaching-materials.org/htmlcss/lesson3/slides.html

13. HTML Form  A form gives instruction to the browser on m inputs to be collected from user m URL (program) to be invoked when sending to server http://www.teaching-materials.org/htmlcss/lesson3/slides.html Step 1: Please pick an input story template: Program to be invoked An input item to be collected How input is transported to server: get/post Invisible on page. Used to pass internal data

14. Form Input Type http://www.teaching-materials.org/htmlcss/lesson3/slides.html   Thin Thick Cheese

15. Web Execution Flow: Client Side  After user clicks submit on a form, browser m encodes each input in a format = m requests page with URL: ? = & = http://www.bing.com/search?q=yale

16. Web Execution Flow: Server Side  Web server receives the request for the URL, finds the application for the URL, and passes the values of the parameters to the application  The application retrieves the parameters, generates a Web page, and sends the page back to the browser to display

17. Google App Engine 17  A platform to simplify the development and hosting of Web applications m Simplified deployment Load balancing Automatic scaling m Useful high-level services and APIs

18. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display web.xml: User defines URL mapping

19. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define Servlet class: conduct common processing steps; app overrides key step ( doGet/doPost ) to define app-specific behavior

20. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define HttpServletRequest class to allow simple methods to retrieve parameter, e.g., getParameter(“name”)

21. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define HttpServletResponse class to allow simple methods to write response (not worry about sending across network), e.g., getWriter().println( “ Hello”)

22. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: None index.html (see Note)

23. web.xml 23 <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”> index.html

24. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: Chosen template CreateMadlibServlet.java

25. web.xml  Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL 25 <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"> CreateMadlibServlet madlibs.CreateMadlibServlet CreateMadlibServlet /create index.html

26. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: User input for each token/template DisplayMadlibServlet.java

27. web.xml  Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL 27 <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"> CreateMadlibServlet madlibs.CreateMadlibServlet DisplayMadlibServlet madlibs.DisplayMadlibServlet CreateMadlibServlet /create DisplayMadlibServlet /display index.html

28. 28 Outline  Admin and recap  Server-side programming overview  Java Servlet  Java Servlet Page (jsp)

29. Motivation  Most used statement in CreateMadlibServlet.java? 29

30. Motivation  For many Web pages, most of the content will be static, and hence only a small portion will be generated dynamically  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)  JSP goal: remove most of the print statements 30

31. Motivating Example  Generate an html page consisting of a list of 10 random numbers 31

32. Manual HTML 32 My list 1: 9 2: 3 3: 5 4: 1 5: 7 6: 4 7: 0 8: 2 9: 8 10: 9

33. Servlet 33 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(” My list "); resp.getWriter().println(" "); Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” "); resp.getWriter().print( i + ”: ” + rand.nextInt(10) ); resp.getWriter().println(" "); } }

34. JSP Motivation 34 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(” My list "); resp.getWriter().println(" "); Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” "); resp.getWriter().print(i + ”: ” + rand.nextInt(10) ); resp.getWriter().println(" "); } resp.getWriter().println(" "); }

35. JSP Motivation 35 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” "); resp.getWriter().print(i + ”: ” + rand.nextInt(10) ); resp.getWriter().println(" "); } %> Directive Called a JSP scriptlet, containing a fragment of java code Why it does not work?

36. Run test.jsp as /test 36

37. web.xml 37 <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"> CreateMadlibServlet madlibs.CreateMadlibServlet DisplayMadlibServlet madlibs.DisplayMadlibServlet TestJSP test.jsp TestJSP /test... index.html

38. JSP Motivation 38 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { response.getWriter().print(” "); response.getWriter().print(i + ”: ” + rand.nextInt(10) ); response.getWriter().println(" "); } %> Directive Called a JSP scriptlet, containing a fragment of java code implicit object See http://www.tutorialspoint.com/jsp/jsp_implicit_objects.htm for implicit objectshttp://www.tutorialspoint.com/jsp/jsp_implicit_objects.htm

39. Output 39

40. Problem 40 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { response.getWriter().print(” "); response.getWriter().print(i + ”: ” + rand.nextInt(10) ); response.getWriter().println(" "); } %> Use implicit object out to print. out != response.getWrite()

41. Fix 41 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { out.print(” "); out.print(i + ”: ” + rand.nextInt(10) ); out.println(" "); } %>

42. Motivation 42 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { out.print(” "); out.print(i + ”: ” + rand.nextInt(10) ); out.println(" "); } %> What if we do not want to use the print statement?

43. Attempt 43 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> i : rand.nextInt(10) <% } %> Problem: i and rand.NextInt(10) are not treated as Java exp.

44. JSP Expression 44 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> : <% } %> encloses JSP expression, whose value appears in the output to out.

45. Motivation: Reduce Embedded Scriptlets 45 My list <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> : <% } %>

46. JSTL (JavaServer Pages Stanard Tag Library)  Objective: introduce JSP tags for common tasks such as conditional execution, loops, XML data access 46

47. Motivation: Reduce Embedded Scriptlets 47 My list <% Random rand = new Random(); %> http://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm

48. Java Servlet Page (JSP)  History m Released in 1999 m Similar to PHP but supports more sophisticated J2EE programming  Can be considered as a high-level abstraction of Java servlets  In real implementation, JSPs are translated to servlets at runtime 48

49. Exercise  Turn CreateMadlibServlet.java into createmadlib.jsp 49