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

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