CS 112 Introduction to Programming

Transcription

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:

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

3 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) q Project demo day 11:30 12:30 pm Apr. 30 at TEAL 3

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

5 Outline q Admin and recap q Server-side web programming overview 5

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'sname>. 6

7 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

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?

9 Webpage-Based Programming 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

10 Input to Create Each Page? Display welcome message P1 Ask user to choose story template file Input: None P2 Process given template file foreach token in template file ask user input store token -> user input mapping Input Chosen template Who collect? P3 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 Chosen Template Who collect?

11 Server-side Page Creation Q: What is the mechanism in Web to collect user input?

12 HTML Form q Form

13 HTML Form Program to be invoked 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 to pass internal data </form> How input is transported to server: get/post An input item to be collected

14 Form Input Type 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>

15 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: <form action>?<name>=<value>&<name>=<value>

16 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

17 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

18 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: <form action>?<name>=<value>&<name>=<value> 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

19 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 <form action>?<name>=<value>&<name>=<value> class: conduct common processing steps; app overrides key step (doget/ dopost) to define 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. app-specific behavior the application retrieves the request parameters, generates a response Web page back to the browser to display

20 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 <form action>?<name>=<value>&<name>=<value> HttpServletRequest class to allow simple methods to retrieve parameter, e.g., getparameter( name ) 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. the application retrieves the request parameters, generates a response Web page back to the browser to display

21 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 <form action>?<name>=<value>&<name>=<value> HttpServletResponse class to allow simple methods to write response (not worry about sending across network), e.g., getwriter().println( <p>hello ) 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. the application retrieves the request parameters, generates a response Web page back to the browser to display

22 Example Display welcome message Ask user to choose story template file Input: None index.html (see Note) 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

23 web.xml <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi=" xmlns=" xmlns:web=" xsi:schemalocation=" version="2.5 > <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app> 23

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 Input: Chosen template CreateMadlibServlet.java Display story for each line for each word in line if word is token print user input else print word as it is

25 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=" xmlns=" xmlns:web=" xsi:schemalocation=" 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> 25

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 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=" xmlns=" xmlns:web=" xsi:schemalocation=" 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> 27

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

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

30 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) q JSP goal: remove most of the print statements 30

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

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> 32

33 Servlet 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("<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>"); 33

34 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"); 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

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>"); %> </ul> </body> </html> } 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 Run test.jsp as /test 36

37 web.xml <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi=" xmlns=" xmlns:web=" xsi:schemalocation=" 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> 37

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>"); %> </ul> </body> </html> } Called a JSP scriptlet, containing a fragment of java code response.getwriter().print(i + : + rand.nextint(10) ); response.getwriter().println("</li>"); implicit object See for implicit objects 38

39 Output 39

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> 40

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> 41

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? 42

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. 43

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. 44

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> 45

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

47 Motivation: Reduce Embedded Scriptlets page contenttype="text/html;charset=utf-8" language="java %> taglib uri=" prefix="c" %> page import= java.util.random %> <html> <body> <h2>my list</h2> <ul> <% Random rand = new Random(); %> <c:foreach var="i" begin="1" end= 10"> <li> <c:out value="${i}"/> <%= rand.nextint(10) %></li> </c:foreach> </ul> </body> </html> 47

48 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 48

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