CS 112 Introduction to Programming Web Programming: Backend (server side) Programming with Servlet,...
-
Upload
timothy-rice -
Category
Documents
-
view
242 -
download
0
Transcript of CS 112 Introduction to Programming Web Programming: Backend (server side) Programming with Servlet,...
CS 112 Introduction to Programming
Web Programming: Backend (server side)
Programming with Servlet, JSP
Yang (Richard) YangComputer Science Department
Yale University308A Watson, Phone: 432-6400
Email: [email protected]
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
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 theheart of darkest <place> . He spends most of his timeeating <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 namedCheetah. 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
Welcome to the game of Mad Libs.I will ask you to provide several wordsand phrases to fill in a mad lib story.The result will be displayed to you.
Template file? tarzan.txt
Please input an adjective: sillyPlease input a plural noun: applesPlease input a noun: frisbeePlease input an adjective: hungryPlease input a place: New Haven, CTPlease input a plural noun: beesPlease input a noun: umbrellaPlease input a funny noise: burpPlease input an adjective: shinyPlease input a noun: jelly donutPlease input an adjective: beautifulPlease input a plural noun: spoonsPlease 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?
Cmdline Madlib Pseudo CodeDisplay 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/
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
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
• ChosenTemplate
• Who collect?
P1
P2
P3
Server-side Page Creation
input parameter
created html page
Q: What is the mechanism in Web to collect user input?
HTML Form
Form
http://www.teaching-materials.org/htmlcss/lesson3/slides.html
HTML Form
A form gives instruction to the browser on inputs to be collected from user URL (program) to be invoked when sending to server
http://www.teaching-materials.org/htmlcss/lesson3/slides.html
<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>
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
Form Input Type
http://www.teaching-materials.org/htmlcss/lesson3/slides.html
<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>
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
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
Google App Engine
17
A platform to simplify the development and hosting of Web applications Simplified deployment
• Load balancing • Automatic scaling
Useful high-level services and APIs
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
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 Servlet class: conduct
common processing steps; app overrides
key step (doGet/doPost) to
define app-specific behavior
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 HttpServletRequest
class to allow simple methods to retrieve
parameter, e.g.,getParameter(“name”)
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 HttpServletResponse
class to allow simple methods to write response (not worry about sending
across network), e.g.,getWriter().println(
“<p>Hello”)
ExampleDisplay 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)
web.xml
23
<?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>
ExampleDisplay 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
web.xml
Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL
25
<?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>
ExampleDisplay 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
web.xml
Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL
27
<?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>
28
Outline
Admin and recap Server-side programming overview Java Servlet Java Servlet Page (jsp)
Motivation
Most used statement in CreateMadlibServlet.java?
29
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
Motivating Example Generate an html page consisting of a
list of 10 random numbers
31
Manual HTML
32
<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>
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("<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>");}
JSP Motivation
34
JSP Motivation
35
Directive
Called a JSP scriptlet, containing a fragment of java
code
Why it does not work?
Run test.jsp as /test
36
web.xml
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/javaeehttp://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>
JSP Motivation
38
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 objects
Output
39
Problem
40
Use implicit object out to print. out !=
response.getWrite()
Fix
41
Motivation
42
What if we do not want to use the print
statement?
Attempt
43
Problem: i and rand.NextInt(10) are
not treated as Java exp.
JSP Expression
44
<%= %> encloses JSP expression, whose
value appears in the output to out.
Motivation: Reduce Embedded Scriptlets
45
JSTL (JavaServer Pages Stanard Tag Library)
Objective: introduce JSP tags for common tasks such as conditional execution, loops, XML data access
46
Motivation: Reduce Embedded Scriptlets
47
http://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm
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
48
Exercise
Turn CreateMadlibServlet.java into createmadlib.jsp
49