Jsp slides

Servers - Apache Tomcat Server

Server-side scripts - Java Server Pages

Java Server Pages - Xue Bai

Objectives

What is Request/Response protocol for a client-side script
What is Request/Response protocol for server-side script
How does server interact with multiple concurrent clients
How can html meta-tags control request/response interaction
How does effect depend on file extension - html versus jsp

Topics
I: client-side, server-side, .jsp, JavaScript form screening, JSP results,
multi-threaded server responses, Html meta-tag refresh, need for .jsp
versus .html extension, JSP’s conditional generation of Html, forms,
buttons, onClick event, JavaScript function, reset, role of names on forms
to identify form elements, table definition, textfields, alert pop-up
window, configuring for Apache Tomcat server, Class & ClassPath
system environment variables, <script & <% tags for JavaScript & JSP

II: form - events - extend form, myjspappchapter02example14.html,
qualified names for elements, submitting form data, request/response cycle[38],
GET method:processing by server-side program, submit button, method
identification, how element names are used, how JSP program accesses form
element values, run: chapter03example6a.html example - note query string sent
to server - in address field of browser - after submit clicked - un-highlight
beforehand so visible, focus attention, request.getParameter method, JSP Html
dynamic output, dynamic html example: 12a

http://localhost:8080/myapp/chapter03/example6a.html
http://localhost:8080/myapp/chapter03/example10a.jsp - contrast Netscape & IE
http://localhost:8080/myapp/chapter03/example12a.html & 12b

Typical html Request/Response cycle

1. requests URL for html page
2. retrieves
client server html page
3. sends html page to client

4. browser interprets
html page & displays

Request/Response for page - JavaScript commands

2. retrieves
1. requests URL for html page html page
client server with embedded
JavaScript
(browser) (Apache
commands
Tomcat)
3. responds w. page to client

4. interprets page -
executes Java script
commands

eg: check for bad or
missing data on form
CLIENT-SIDE
SCRIPT

Request/Response for page - with JavaScript commands

1. requests page

client server 2. gets page
3. sends page to client

4. interprets page -
executes Java script
Commands

Request/Response for file with
Java Server Page parts

1 - requests 2 - retrieves page
JSP page
may have embedded
browser server JSP server script &
Java-client-Script
3 - responds with
html+results in page
SERVER-SIDE
SCRIPT

executes
server-side script

Request/Response for
Java Server Page

1. sends URL 2. retrieves page from storage
for JSP page
compiles embedded JSP code *
client server
3. sends html executes JSP code
+ results to client replaces code with exec results

4. browser
displays page

*
compiled first time only - thereafter uses compiled copy
experiment on effect of extensions like .jsp or .html

2 - retrieves page
1 - requests
JSP page using URL addr &
server configuration
browser server
3 - responds &
html + results

Context path="/myapp"
executes executes docBase="c:myjspapp"
client-side script server-side script

http://localhost:8080/c:myjspappchapter02example2a.html

Start Tomcat server from start
Menu or shortcut on desktop

Experiment: JSP versus JavaScript - client v. server execution

1. Start Apache Tomcat server
listening on port 8080 localhost

2. Request a Java Server page from server

- source file will have Results

3. Request html page with JavaScript

- source page will have the JavaScript
[at least in Explorer - not Netscape]

2. C:myjspappchapter01example2.jsp

3. C:myjspappchapter02example2a.html – prev slide

Request for JSP

.jsp page
retrieved is:
C:myjspappchapter01example2.jsp
<html>

<head>
<title> current server time </title>
</head>

<font face = "Arial" size =4>

The current Date and time on the web server are:
<BR>
jsp instruction
<%= new java.util.Date() %>
- executed
</font> on "server-side"
- result replaces code
</body>
</html>

embedded jsp instruction

2. Contents sent by server
- after executing jsp code
1. Request this page from server located in requested file
which is Listening on port 8080

1. "source" as shown in browser

<html>

<head>
<title> current server time </title>
</head>

<font face = "Arial" size =4>

The current Date and time on the web server are:
<BR> 2. Note how
Date’s Result
Wed Nov 27 20:27:02 EST 2002 replaces original
JSP
</font> in page sent to
browser
</body>
</html>

Request for Java Script page

requested source page is
same as displayed in browser

<HTML>
<HEAD>
<TITLE>Client-side script </TITLE></HEAD>
<BODY>
THE TIME ON THE CLIENT IS:

Current time is: Why not
<%= new java.util.Date( ) %> executed
on server ?
<script language="JavaScript" >
document.write (new Date() ) sent to
</script> browser
and
executed
</BODY> on browser
</HTML>
C:myjspappchapter02example2a.html

Request from server - versus drag-and-drop in browser - observe address bar

JavaScript Request

response displayed
in browser

Source shows only JavaScript code - not the computed date

How can a server interface with multiple client browsers simultaneously ?

Ans: creates multiple threads - one per browser.

Experiment: JSP with refresh meta-tag from multiple browsers
Use URL: http://localhost:8080/myapp/chapter02/example12.jsp
Source contains Html Meta tag:

<META HTTP-EQUIV = "REFRESH" CONTENT = "5, URL=example12.jsp">

and JSP instruction:


JSP page requested is:
from current
requested directory
every 5 sec of original
request

<HTML>

<HEAD>
<TITLE> server-side scripts </TITLE>
<META HTTP-EQUIV = "REFRESH" CONTENT = "5, URL=example12.jsp">
</HEAD>

<BODY>
The time on the server is:
<%= new java.util.Date( ) %>

</BODY>
</HTML>

JSP result replaces this code
& is sent to browser

URL: http://localhost:8080/myapp/chapter02/example12.jsp

Requested
File’s address
on the server

"http://localhost: 8080 /myapp/ helloWorld.js

WHERE WHICH WHAT

IP address remainder of
of server port that file address path
server server uses
listens on configuration file
to convert this to
initial part of path:
C:myjspapp

What happens if you request an html page that has embedded JSP ?

-- effect of EXTension on how server handles request:
Effect of suffix:
http://localhost:8080/myapp/chapter01/project3.html versus
http://localhost:8080/myapp/chapter01/project3.jsp

Source html contains Java Server Page instructions - java inside
jsp tags: <% ... %>

<% java.util.Calendar calendar = java.util.Calendar.getInstance( );
int hour = calendar.get(calendar.HOUR_OF_DAY);
if ( hour<12) { %>
<h3>Good morning!</h3>
<% } else { %>
JSP <h3>Good afternoon!</h3>
<% } %>

...it would be better to just use print statement – this looks confusing.

project3.jsp versus same file with different extension: project3.html
<HTML>
<HEAD><TITLE>Welcome to JSP</TITLE></HEAD>
<BODY>

<% java.util.Calendar calendar = java.util.Calendar.getInstance();
int hour = calendar.get(calendar.HOUR_OF_DAY);
if ( hour < 12) {
%>

Hour is <br> HTML – green
JSP – red / blue
<%= hour %>

<h3>Good morning!</h3>

<%}else {%>

<h3>Good afternoon!</h3>
<%}%>

</BODY>
</HTML>
JSP starts/stops with <% … %>
Html can occur anywhere else

Page displayed for
project3.jsp:
time-dependent jsp output

Good afternoon!

Welcome to Introduction to JSP

In this chapter, you:
learned about Web client/server architecture
learned the difference between static and dynamic Web pages
learned how dynamic Web pages are generated in JSP
reviewed various server-side processing technologies
compared JSP to alternate

Displayed page
For project3 .html
IE browser - no result (and no JSP shown)

Good morning!
Good afternoon!


compared JSP to alternate technologies

Displayed page
project3 .html
Netscape - no result (JSP shown)

<% java.util.Calendar calendar = java.util.Calendar.getInstance(); int hour =
calendar.get(calendar.HOUR_OF_DAY); if( hour<12){%>

Good morning!

<%} else {%>

Good afternoon!

<%}%>


compared JSP to alternate technologies

Objectives - Understand

How do you submit form data to server using GET method?
How does request/response protocol operate for forms & jsp pages
What is the URL format
How do JSP programs get data from forms
How to configure a (Tomcat) server
How do you dynamically construct Html using Java Server Pages

How do you submit form data to server using GET method?

C:myjspappchapter03example6a.html
C:myjspappchapter03getUserInfo.jsp

Experiment: demonstrates submitting and retrieving
form data using GET method

1. chapter03/example6a.html sends data via GET

2. chapter03/getUserInfo.jsp uses request object

request.getParameter ( ... )

to retrieve named data from form

Request/Response protocol

1. request html page
example6a.html
3. returns form 2. retrieve html form

browser 5. sends URL server 6. triggers retrieving,
+query-string compiling getUserInfo.jsp
referred to on form
7. returns results - executes jsp with data
to client from query-string

4. display form
- user enters data
& submits form

understand thoroughly chapter03example6a.html

jsp program executed GET sends data
on Submit in query-string
example6a.html
<HTML>
<HEAD> <TITLE> Submit using GET Method </TITLE> </HEAD>
<BODY> <H1> Please sign </H1>

<form name = "formName" ACTION = "getUserInfo.jsp" Method ="GET" >

Your Name: <input type=text name= firstName size=24 > <br>
Your Major: <input type=text name= major size=24 > <br>

<input type=submit value="submit" >
<input type=reset value="Clear Form" >

</form>

THE TIME ON THE CLIENT IS:
<script language="JavaScript" > document.write (new Date( ) ) </script>
</BODY>
</HTML>

triggers submission of query string to server data
names

Query string
sent by browser
to server:

jsp to execute data for program

http://localhost:8080/myapp/chapter03/getUserInfo.jsp? firstName=aaa&major=zzz
SERVER PROGRAM DATA FOR PROGRAM
WHERE WHO WHAT

retrieves values entered on form
which are returned in query string
getUserInfo.jsp
<HTML>
<HEAD> <TITLE> get User information </TITLE> </HEAD>
<BODY>
<H1> Hi there - how are you? </H1>

Your major is: <%= request.getParameter("major") %> <br>
Your name is: <%= request.getParameter("firstName") %> <br>

<br>

The current Date and time on the web server are: <BR>
<br>

</BODY>
</HTML>

field names on html form
that triggered execution of
getUserInfo.jsp

getUserInfo.jsp
<HTML>
<BODY> <H1> Hi there - how are you? </H1>

Your major is: <%= request.getParameter("major") %> <br>
Your name is: <%= request.getParameter("firstName") %> <br>

<br>
The current Date and time on the web server are: <BR>
<br>
</BODY>
</HTML>

http://localhost:8080/myapp/chapter03/getUserInfo.jsp? firstName=aaa&major=zzz
DATA FOR PROGRAM

Interpretation
of URL

Server IP port Requested file on server
http://localhost:8080/myapp/chapter01/filename

replaced with
C:/myjspapp
because of
server configuration

so file retrieved is:
C:myjspappchapter01filename

The context prefix myapp makes the web site Relocateable.
You just change myapp to point to the directory where site pages begin.

How do you configure the Tomcat server ?

Environment setup

1. control panel > system > advanced
> environment variables > system variables
update PATH variable to include JDK

%SystemRoot%system32;%SystemRoot%; ...on one line
%SystemRoot%System32Wbem;
C:jdk1.2.2bin points to JDK bin

2. similarly add CLASSPATH system variable defined as :

C:jdk1.2.2jrelibrt.jar;
.;
C:Program FilesApache Tomcat 4.0commonlibservlet.jar;
C:myjspappWEB-INFCLASSES

…all on a single line

Assumes jdk 1.2.2 -- same idea for other versions of jdk.

Environment setup

1. start > all programs > Apache Tomcat 4.0 > Edit Configuration file

right after:



add: <Context path="/myapp"
docBase="c:myjspapp" 2. gets expanded
debug="0" to this
reloadable="true" />

1. this

http://localhost:8080/myapp/chapter01/filename

Environment setup

1. start > all programs > Apache Tomcat 4.0 > Edit Configuration file

add: <Context path="/myapp"
docBase="c:myjspapp"
debug="0"
reloadable="true" />

If user wants: C:myjspappchapter03example6.html

then asks for: http://localhost:8080/myapp/chapter03/example6.html

What are the advantages of using a client-side versus server-side script ?

Client-side script can prevent bad data being sent to server
which would waste user’s time, server’s time, and
waste communication resources

Server-side script allows protected server-side access to data
on the server side.

Different ways JSP can output HTML:

<HTML>
<HEAD> <TITLE> jsp output </TITLE> </HEAD>
<BODY>
1. as quoted html
<%= "<font size =6 color = red> Hello </font>" %>

<br><br> 2. as direct html
<font size =4 color = blue> How are you? </font>

<br><br>

<% 3. in print statement
out.println ( "<font size = 8 color = green> Goodbye </font>" );
%>

</BODY>
</HTML>

http://localhost:8080/myapp/chapter03/example10a.jsp
example10a.jsp

Form
=> name & font fields

=> JSP program

=> returns dynamic html

chapter03/example12a.html
http://localhost:8080/myapp/chapter03/getFontEffect.jsp?Name=Mimi&font=4

Form

<HTML>
<HEAD> <TITLE> font effect </TITLE> </HEAD>
<BODY>
<H1> Please sign </H1>

<form name = "formName" ACTION = "getFontEffect.jsp" Method ="GET" >

Font size: <input type=text name= font size=24> <br>
Type name: <input type=text name= Name size=24> <br>


</form>

</BODY>
</HTML>

chapter03/example12a.html

JSP page triggered by form:

chapter03/getFontEffect.jsp
<HTML>

<%
out.print ("<font size = ");
out.print (request.getParameter("font"));

out.print (" color = blue>");

out.print (request.getParameter("Name"));

out.print ("</font>");
%>

</BODY>
</HTML>

This builds font statement:
<font size = font.value color = blue> Name.value </font>

Variation [uses Name as color choice]

<HTML>
<BODY> <H1> Hi there - how are you? </H1> used as color
[blue, red...]
<%
out.print("<font size = ");
out.print( request.getParameter("font") );
make the
out.print(" color = "); font tag prefix
out.print( request.getParameter("colorName") );
out.print(">");

out.print( request.getParameter("Name") ); font text

out.print("</font>"); font tag suffix
%>

</BODY> used as text
</HTML> [double use]

http://localhost:8080/myapp/chapter03/example12a1.html
chapter03/getFontEffect2.jsp

JSP control structure and Html

Experiment: Retrieve font values from an HTML form &
return name in font depending on hour of day

1. chapter03/example12b.html => returns form

2. chapter03/ifThenElseHtml.jsp => returns time-sized name

requested JSP program

<HTML>
<HEAD> <TITLE> font effect </TITLE> </HEAD>
<BODY>
<H1> Please sign </H1>

<form name = "formName" ACTION = "ifThenElseHtml.jsp" Method ="GET" >

Your Name: <input type=text name= Name size=24> <br>
Select font: <input type=text name= font size=24> <br>


</form>

</BODY>
</HTML>

chapter03/example12b.html

<HTML>
<HEAD> <TITLE> time-based display </TITLE> </HEAD>

<%
java.util.Calendar date = java.util.Calendar.getInstance();
int hour = date.get(date.HOUR_OF_DAY);
if (hour <= 15)
{
}else
{
out.print ("<font size = 10");
out.print (" color = red>");
}
%>
<BR><BR>
<a href = "example12b.html" > Link Illustration </a>
</BODY>
chapter03/ifThenElseHtml.jsp

<HTML>
<HEAD> <TITLE> time-based display </TITLE> </HEAD>

<%
java.util.Calendar date = java.util.Calendar.getInstance();
int hour = date.get(date.HOUR_OF_DAY);
if (hour <= 15)
{
}
else
{
out.print ("<font size = 10");
out.print (" color = red>");
}
%> <BR><BR>
<a href = "example12b.html" > Link Illustration </a>
</BODY>

Jsp slides

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Jsp slides (20)

More from Kumaran K (7)

Jsp slides