CS 112 Introduction to Programming

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. Outline • Admin and recap • Server-side web programming overview • Servlet programming • Java servlet page (JSP)

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

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

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

6. 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's-name> .

7. Web App--Server Side: Motivating Example CommandlineMadlib (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. 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 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 mediumto 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 P2 P3 input input 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 P1 • Input • Chosen template • Who collect? P2 • Input • User input for each token • ChosenTemplate • Who collect? 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 Program to be invoked How input is transported to server:get/post • 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> </form> An input item to be collected Invisible on page. Used to pass internal data http://www.teaching-materials.org/htmlcss/lesson3/slides.html

14. Form Input Type • <input type=”text" name="q"> • <input type=“checkbox” name = “myc”/> • <input type=“radio” name = “mypizzasize”/> • <input type=“range” min=“0” max=“10” name = “cheesiness”/> • <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

15. Web Execution Flow: Client Side • After user clicks submit on a form, browser • encodes each input in a format <name>=<value> • requests page with URL: <form action>?<name>=<value>&<name>=<value> 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 • A platform to simplify the development and hosting of Web applications • Simplified deployment • Load balancing • Automatic scaling • Useful high-level services and APIs

18. Discussion: What GAE can do to allow simple, flexible server-side app programming? • Client browser • After user clicks submit on a form, browser • encodes each input in a format <name>=<value> • requests page with URL: <form action>?<name>=<value>&<name>=<value> • 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 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 • After user clicks submit on a form, browser • encodes each input in a format <name>=<value> • requests page with URL: <form action>?<name>=<value>&<name>=<value> • 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 request parameters, generates a response Web page back to the browser to display Define Servletclass: 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 • After user clicks submit on a form, browser • encodes each input in a format <name>=<value> • requests page with URL: <form action>?<name>=<value>&<name>=<value> • 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 request parameters, generates a response Web page back to the browser to display Define HttpServletRequestclass 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 • After user clicks submit on a form, browser • encodes each input in a format <name>=<value> • requests page with URL: <form action>?<name>=<value>&<name>=<value> • 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 request parameters, generates a response Web page back to the browser to display Define HttpServletResponseclass to allow simple methods to write response (not worry about sending across network), e.g.,getWriter().println(“<p>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: Noneindex.html (see Note)

23. 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”> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app>

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 <?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> <servlet-name>CreateMadlibServlet</servlet-name> <servlet-class>madlibs.CreateMadlibServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CreateMadlibServlet</servlet-name> <url-pattern>/create</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> • Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL

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/templateDisplayMadlibServlet.java

27. 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> <servlet-name>CreateMadlibServlet</servlet-name> <servlet-class>madlibs.CreateMadlibServlet</servlet-class> </servlet> <servlet> <servlet-name>DisplayMadlibServlet</servlet-name> <servlet-class>madlibs.DisplayMadlibServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CreateMadlibServlet</servlet-name> <url-pattern>/create</url-pattern> </servlet-mapping> <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> • Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL

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

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

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

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

32. Manual HTML <html> <body> <h2>My list</h2> <ul> <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> </ul> </body> </html>

33. Servlet import java.util.Random; publicclass NumListServlet extends HttpServlet { publicvoid doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { doGet(req, resp); } publicvoid doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("text/html"); resp.getWriter().println("<html>"); resp.getWriter().println("<body>"); resp.getWriter().println(”<h2>My list</h2>"); resp.getWriter().println("<ul>"); Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” <li>"); resp.getWriter().print( i + ”: ” + rand.nextInt(10) ); resp.getWriter().println("</li>"); } resp.getWriter().println("</ul>"); resp.getWriter().println("</body>"); resp.getWriter().println("</html>"); }

34. JSP Motivation import java.util.Random; publicclassNumListServletextendsHttpServlet { publicvoiddoPost(HttpServletRequestreq, HttpServletResponseresp) throwsIOException { doGet(req, resp); } publicvoiddoGet(HttpServletRequestreq, HttpServletResponseresp) throwsIOException { resp.setContentType("text/html"); resp.getWriter().println("<html>"); resp.getWriter().println("<body>"); resp.getWriter().println(”<h2>My list</h2>"); resp.getWriter().println("<ul>"); Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” <li>"); resp.getWriter().print(i + ”: ” + rand.nextInt(10) ); resp.getWriter().println("</li>"); } resp.getWriter().println("</ul>"); resp.getWriter().println("</body>"); resp.getWriter().println("</html>"); }

35. JSP Motivation Directive <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { resp.getWriter().print(” <li>"); resp.getWriter().print(i + ”: ” + rand.nextInt(10) ); resp.getWriter().println("</li>"); } %> </ul> </body> </html> Called a JSP scriptlet, containing a fragment of java code Why it does not work?

36. Run test.jsp as /test

37. <?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> <servlet-name>CreateMadlibServlet</servlet-name> <servlet-class>madlibs.CreateMadlibServlet</servlet-class> </servlet> <servlet> <servlet-name>DisplayMadlibServlet</servlet-name> <servlet-class>madlibs.DisplayMadlibServlet</servlet-class> </servlet> <servlet> <servlet-name>TestJSP</servlet-name> <jsp-file>test.jsp</jsp-file> </servlet> <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> web.xml

38. JSP Motivation Directive <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { response.getWriter().print(” <li>"); response.getWriter().print(i + ”: ” + rand.nextInt(10) ); response.getWriter().println("</li>"); } %> </ul> </body> </html> Called a JSP scriptlet, containing a fragment of java code implicit object See http://www.tutorialspoint.com/jsp/jsp_implicit_objects.htm for implicit objects

39. Output

40. Problem Use implicit object out to print. out != response.getWrite() <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { response.getWriter().print(” <li>"); response.getWriter().print(i + ”: ” + rand.nextInt(10) ); response.getWriter().println("</li>"); } %> </ul> </body> </html>

41. Fix <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { out.print(” <li>"); out.print(i + ”: ” + rand.nextInt(10) ); out.println("</li>"); } %> </ul> </body> </html>

42. Motivation <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { out.print(” <li>"); out.print(i + ”: ” + rand.nextInt(10) ); out.println("</li>"); } %> </ul> </body> </html> What if we do not want to use the print statement?

43. Attempt <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> <li> i : rand.nextInt(10) </li> <% } %> </ul> </body> </html> Problem: i and rand.NextInt(10) are not treated as Java exp.

44. JSP Expression <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random"%> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> <li> <%= i %>: <%=rand.nextInt(10) %> </li> <% } %> </ul> </body> </html> <%= %> encloses JSP expression, whose value appears in the output to out.

45. Motivation: Reduce Embedded Scriptlets <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ page import=“java.util.Random” %> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); for (int i = 1; i < 11; i ++) { %> <li> <%= i %>: <%=rand.nextInt(10) %> </li> <% } %> </ul> </body> </html>

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

47. Motivation: Reduce Embedded Scriptlets <%@ page contentType="text/html;charset=UTF-8" language="java” %> <%@ tagliburi="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page import=“java.util.Random” %> <html> <body> <h2>My list</h2> <ul> <% Random rand = new Random(); %> <c:forEachvar="i" begin="1" end=“10"> <li> <c:outvalue="${i}"/> <%= rand.nextInt(10) %></li> </c:forEach> </ul> </body> </html> http://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm

48. Java Servlet Page (JSP) • History • Released in 1999 • 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

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