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-tag s control request/response interaction How does effect depend on file extension - html versus jsp

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, yjspapphapter02example14.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: chapter03xample6a.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 Topics

client 1. requests URL for html page server 2. retrieves html page 3. sends html page to client 4. browser interprets html page & displays Typical html Request/Response cycle

Request/Response for page - JavaScript commands client 1. requests URL for html page server 2. retrieves html page 3. responds w. page to client 4. interprets page - (browser) executes Java script commands eg: check for bad or missing data on form with embedded JavaScript commands CLIENT-SIDE SCRIPT (Apache Tomcat)

4. interprets page - Request/Response for page - with JavaScript commands executes Java script Commands client server 3. sends page to client 1. requests page 2. gets page

1 - requests JSP page server 2 - retrieves page 3 - responds with html+results in page browser executes server-side script may have embedded JSP server script & Java-client-Script Request/Response for file with Java Server Page parts SERVER-SIDE SCRIPT

Request/Response for Java Server Page client 1. sends URL for JSP page server 2. retrieves page from storage 3. sends html + results to client 4. browser displays page executes JSP code replaces code with exec results * compiled first time only - thereafter uses compiled copy experiment on effect of extensions like .jsp or .html compiles embedded JSP code *

2 - retrieves page using URL addr & server configuration 1 - requests JSP page server 3 - responds & html + results browser executes client-side script executes server-side script http://localhost:8080 /myapp /chapter02/example2a.html Context path= " /myapp " docBase= "c:yjspapp" http://localhost:8080/ c:yjspapp hapter02xample2a.html

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:yjspapphapter01xample2. jsp 3. C:yjspapphapter02xample2a. html – prev slide Start Tomcat server from start Menu or shortcut on desktop

<html> <head> <title> current server time </title> </head> <font face = "Arial" size =4> The current Date and time on the web server are: <BR> <%= new java.util.Date() %> </font> </body> </html> Request for JSP .jsp page retrieved is: embedded jsp instruction jsp instruction - executed on "server-side" - result replaces code C:yjspapphapter01xample2. jsp

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

<html> <head> <title> current server time </title> </head> <font face = "Arial" size =4> The current Date and time on the web server are: <BR> Wed Nov 27 20:27:02 EST 2002 </font> </body> </html> 1. " source " as shown in browser 2. Note how Date’s Result replaces original JSP in page sent to browser

sent to browser and executed on browser requested source page is same as displayed in browser Request for Java Script page <HTML> <HEAD> <TITLE>Client-side script </TITLE></HEAD> <BODY> THE TIME ON THE CLIENT IS: Current time is: <%= new java.util.Date( ) %> <script language="JavaScript" > document.write (new Date() ) </script> </BODY> </HTML> C:yjspapphapter02xample2a .html Request from server - versus drag-and-drop in browser - observe address bar Why not executed on server ?

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 : <%= new java.util.Date() %>

<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 page requested is: requested every 5 sec from current directory of original request JSP result replaces this code & is sent to browser URL: http://localhost:8080/myapp/chapter02/ example12.jsp

IP address of server port that server listens on Requested File’s address on the server remainder of file address path server uses configuration file to convert this to initial part of path: "http://localhost: helloWorld.js 8080 /myapp/ WHERE WHICH WHAT C:yjspapp

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 { %> <h3>Good afternoon!</h3> <% } %> JSP ...it would be better to just use print statement – this looks confusing.

<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> <%= hour %> <h3>Good morning!</h3> <%}else {%> <h3>Good afternoon!</h3> <%}%> </BODY> </HTML> project3. jsp versus same file with different extension: project3. html HTML – green JSP – red / blue JSP starts/stops with <% … %> Html can occur anywhere else

Page displayed for project3. jsp : 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 time-dependent jsp output

Displayed page For project3 . html IE browser - no result (and no JSP shown) Good morning! 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 technologies

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! <%}%> 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 technologies Displayed page project3 . html

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

How do you submit form data to server using GET method? C:yjspapphapter03xample6a.html C:yjspapphapter03etUserInfo.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 2. retrieve html form browser 4. display form - user enters data & submits form 6. triggers retrieving, compiling getUserInfo.jsp referred to on form - executes jsp with data from query-string 1. request html page example6a.html 3. returns form 7. returns results to client 5. sends URL +query-string chapter03xample6a.html server understand thoroughly

<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> example6a.html jsp program executed on Submit triggers submission of query string to server GET sends data in query-string data names

Query string sent by browser to server: http://localhost:8080/ myapp/chapter03/getUserInfo.jsp ? firstName=aaa&major=zzz jsp to execute data for program SERVER PROGRAM DATA FOR PROGRAM WHERE WHO WHAT

<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> <%= new java.util.Date() %> <br> </BODY> </HTML> getUserInfo.jsp retrieves values entered on form which are returned in query string field names on html form that triggered execution of 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> <%= new java.util.Date() %> <br> </BODY> </HTML> getUserInfo.jsp http://localhost:8080/ myapp/chapter03/getUserInfo.jsp ? firstName =aaa& major =zzz DATA FOR PROGRAM

C:yjspapp hapter01ilename http://localhost:8080/ myapp /chapter01/filename so file retrieved is: replaced with C:/myjspapp because of server configuration Requested file on server Server IP Interpretation of URL port 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 %SystemRoot%ystem32;%SystemRoot%; %SystemRoot%ystem32bem; C:dk1.2.2in ...on one line points to JDK bin update PATH variable to include JDK 2. similarly add CLASSPATH system variable defined as : C:dk1.2.2reibt.jar; .; C:rogram Filespache Tomcat 4.0ommonibervlet.jar; C:yjspappEB-INFLASSES … 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:yjspapp" debug="0" reloadable="true" /> http://localhost:8080/ myapp /chapter01/filename 1. this 2. gets expanded to this

Environment setup 1. start > all programs > Apache Tomcat 4.0 > Edit Configuration file add: <Context path= "/myapp" docBase= "c:yjspapp" debug="0" reloadable="true" /> http://localhost:8080 /myapp/chapter03/example6.html If user wants: C:yjspapphapter03xample6.html then asks for:

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.

<HTML> <HEAD> <TITLE> jsp output </TITLE> </HEAD> <BODY> <%= "<font size =6 color = red> Hello </font>" %> <br><br> <font size =4 color = blue> How are you? </font> <br><br> <% out.println ( "<font size = 8 color = green> Goodbye </font>" ); %> </BODY> </HTML> 1. as quoted html example10a. jsp 2. as direct html 3. in print statement http://localhost:8080/myapp/chapter03/example10a.jsp Different ways JSP can output HTML:

http://localhost:8080/myapp/chapter03/example12a.html chapter03/example12a.html http://localhost:8080/myapp/chapter03/getFontEffect.jsp?Name=Mimi&font=4 Form => name & font fields => JSP program => returns dynamic html

<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> <input type=submit value="submit" > <input type=reset value="Clear Form" > </form> </BODY> </HTML> chapter03/example12a.html Form

<HTML> <HEAD> <TITLE> get User information </TITLE> </HEAD> <BODY> <H1> Hi there - how are you? </H1> <% out.print ( "<font size = " ); out.print (request.getParameter("font")); out.print (" color = blue> "); out.print (request.getParameter("Name")); out.print ( "</font>") ; %> </BODY> </HTML> chapter03/ getFontEffect.jsp JSP page triggered by form: This builds font statement: <font size = font.value color = blue> Name.value </font>

<HTML> <HEAD> <TITLE> get User information </TITLE> </HEAD> <BODY> <H1> Hi there - how are you? </H1> <% out.print(" <font size = "); out.print( request.getParameter(" font ") ); out.print(" color = "); out.print( request.getParameter(" colorName ") ); out.print(" > "); out.print( request.getParameter(" Name ") ); out.print(" </font> "); %> </BODY> </HTML> make the font tag prefix font text font tag suffix used as color [blue, red...] used as text [double use] chapter03/ getFontEffect2.jsp Variation [uses Name as color choice] http://localhost:8080/myapp/chapter03/ example12a1.html

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

<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> <input type=submit value="submit" > <input type=reset value="Clear Form" > </form> </BODY> </HTML> chapter03/example12b.html requested JSP program

chapter03/ ifThenElseHtml.jsp <HTML> <HEAD> <TITLE> time-based display </TITLE> </HEAD> <BODY> <H1> Hi there - how are you? </H1> <% java.util.Calendar date = java.util.Calendar.getInstance(); int hour = date.get(date.HOUR_OF_DAY); if (hour <= 15) { out.print ("<font size = "); out.print (request.getParameter("font")); out.print (" color = blue>"); out.print (request.getParameter("Name")); out.print ("</font>"); } else { out.print ("<font size = 10"); out.print (" color = red>"); out.print (request.getParameter("Name")); out.print ("</font>"); } %> <BR><BR> <a href = "example12b.html" > Link Illustration </a> </BODY>

<HTML> <HEAD> <TITLE> time-based display </TITLE> </HEAD> <BODY> <H1> Hi there - how are you? </H1> <% java.util.Calendar date = java.util.Calendar.getInstance(); int hour = date.get(date.HOUR_OF_DAY); if (hour <= 15) { out.print ("<font size = "); out.print (request.getParameter("font")); out.print (" color = blue>"); out.print (request.getParameter("Name")); out.print ("</font>"); } else { out.print ("<font size = 10"); out.print (" color = red>"); out.print (request.getParameter("Name")); out.print ("</font>"); } %> <BR><BR> <a href = "example12b.html" > Link Illustration </a> </BODY>

Jsp Slides

More Related Content

Jsp Slides