3 Web applications Serverside code JSP Mark Dixon
3 – Web applications: Server-side code (JSP) Mark Dixon Page 1
Admin: On-line Quiz • Useful, but limited – multiple choice, same concepts – actual tests are free text Mark Dixon Page 2
Session Aims & Objectives • Aims – To introduce the fundamental ideas involved in server-side code • Objectives, by end of this week’s sessions, you should be able to: – create a JSP web-page, including: • HTML, • server-side Java (JSP), and • Java. Script Mark Dixon Page 3
Example: Logon (analysis) SPECIFICATION • User Requirements – protection from fraud and invasion of privacy • Software Requirements – Functional: – logon page, user must type name and password – following pages can only be accessed after successful logon – Non-functional should be very difficult to hack Mark Dixon hotmail, Amazon, University portal, utility bills (gas, electricity, phone, internet), Travel (flights, ferry, car rental) Page 4
Example: Logon (design) • Restrict access to home page Mark Dixon Page 5
Example: Logon (code v 1) Logon. htm <html> <head><title></head> <body> Please logon: <input id="txt. User. Name" type="text" /> <input id="txt. Pass. Word" type="text" /> <input id="btn. Logon" type="submit" value="Logon" onclick="btn. Logon_on. Click()" /> <p id="msg"></p> </body> </html> <script language="javascript"> function btn. Logon_on. Click(){ var un; var pw; un = txt. User. Name. value; pw = txt. Pass. Word. value; if(un == "mark" && pw == "soft 131"){ window. navigate("home. htm"); }else{ msg. inner. Text = "Login details incorrect. "; } } </script> Mark Dixon • Using Client-side Java. Script Home. htm <html> <head><title>My Home page</title></head> <body> <p> Welcome to my home page. <img src="You. Are. Here. jpg" /> </p> </body> </html> Page 6
Example: Login (Problem) • View Source – shows client-side script: Reveals both username & password Mark Dixon Page 7
Web Hardware and Software network connection Client Mark Dixon Server Browser Application Web-server Application (MS Explorer, Fire. Fox, Opera) (MS IIS, Apache) Page 8
Request-Response Cycle Request Browser Application (MS Explorer, Firefox) Web-server Application Logon. htm Response (MS IIS, Apache) <html> <head><title></head> <body> Please logon: <input id="txt. User. Name" type="text" /> <input id="txt. Pass. Word" type="text" /> <input id="btn. Logon" type="submit" value="Logon" onclick="btn. Logon_on. Click()" /> <p id="msg"></p> </body> </html> Client-side code: Code sent to Client Interpreted by browser Mark Dixon <script language="javascript"> function btn. Logon_on. Click(){ var un; var pw; un = txt. User. Name. value; pw = txt. Pass. Word. value; if(un == "mark" && pw == "soft 131"){ window. navigate("home. htm"); }else{ msg. inner. Text = "Login details incorrect. "; } } </script> Page 9
Server-Side Technology • Microsoft – Active Server Pages (ASP) = VBScript – ASP. NET = VB. NET or C# • Sun – Java Server Pages (JSP) = Java • Ph. P • Perl / CGI Mark Dixon Page 10
Server-side Script (what) • JSP – active server pages – code not sent to client • code secure (can't be viewed by client) – executed on server • takes time – request-response cycle • requires server software (e. g. Apache) • JSP pages will NOT work by double clicking on file Mark Dixon Page 11
date. jsp Example: Date • JSP page: <%@page import="java. util. Date" %> <%@page import="java. text. Simple. Date. Format" %> <% Date today; Simple. Date. Format format. D; Simple. Date. Format format. T; String d; String t; today = new Date(); format. D = new Simple. Date. Format("EEE dd MM yyyy"); format. T = new Simple. Date. Format("HH: mm: ss"); d = format. D. format(today); t = format. T. format(today); %> –. jsp (not. htm) – Scriptlet tag <% – variables have type <!DOCTYPE html> <head><title>Date</title></head> <body> The date today is <%=d%> The time is <%=t%> </body> </html> Mark Dixon – Date() is current date and time (on server) – Expression tag <%= Page 12
Request-Response Cycle Browser Application Request date. jsp (MS IIS, Apache) (MS Explorer, Firefox) Response <!DOCTYPE html> <head><title>Date</title></head> <body> The date today is Tue 11 10 2011 The time is 14: 21: 41 </body> </html> Mark Dixon Web-server Application Server-side code: run on server (never sent to Client) <%@page import="java. util. Date" %> <%@page import="java. text. Simple. Date. Format" %> <% Date today; Simple. Date. Format format. D; Simple. Date. Format format. T; String d; String t; today = new Date(); format. D = new Simple. Date. Format("EEE dd MM yyyy format. T = new Simple. Date. Format("HH: mm: ss"); d = format. D. format(today); t = format. T. format(today); %> <!DOCTYPE html> <head><title>Date</title></head> <body> The date today is <%=d%> The time is <%=t%> </body> </html> Page 13
View Source • Code executed at server – code is never sent to client • View, Source – does not show code: Mark Dixon Page 14
Example: Add. Num (client-side) Add. Num. htm <html> <head><title></head> <body> <input id="txt. N 1" type="text" /> <input id="txt. N 2" type="text" /> <input id="btn. Add" type="submit" value="Add" onclick="btn. Add_on. Click()" /> <p id="par. Res"></p> </body> </html> <script language="javascript"> function btn. Add_on. Click(){ var N 1; var N 2; N 1 = parse. Float(txt. N 1. value); N 2 = parse. Float(txt. N 2. value); par. Res. inner. Text = N 1 + N 2; } </script> Mark Dixon Page 15
Example: Add. Num (server-side) Add. Num. jsp • check button click <%@page content. Type="text/html" page. Encoding="UTF-8"%> <% double N 1; double N 2; String Res = ""; if (request. get. Parameter("btn. Add") != null){ N 1 = Double. parse. Double(request. get. Parameter("txt. N 1")); N 2 = Double. parse. Double(request. get. Parameter("txt. N 2")); Res = Double. to. String(N 1 + N 2); } %> <!DOCTYPE html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="txt. N 1" type="text" /> <input name="txt. N 2" type="text" /> <input name="btn. Add" type="submit" value="Add" /> <p><%=Res%></p> </form> </body> </html> • request. get. Parameter gets data from form • input tags inside form • use name (not id) Mark Dixon • submit button: refreshes page (sending data to server) Page 16
Client-side vs. Server-side Code Add. Num. htm Add. Num. jsp <html> <%@page content. Type="text/html" page. Encoding="UTF-8"% <head><title></head> <% <body> double N 1; <input id="txt. N 1" type="text" /> double N 2; <input id="txt. N 2" type="text" /> String Res = ""; <input id="btn. Add" type="submit" value="Add" if (request. get. Parameter("btn. Add") != null){ onclick="btn. Add_on. Click()" /> N 1 = Double. parse. Double(request. get. Parameter("txt. N 1")); <p id="par. Res"></p> N 2 = Double. parse. Double(request. get. Parameter("txt. N 2")); </body> Res = Double. to. String(N 1 + N 2); </html> } %> <!DOCTYPE html> <script language="javascript"> <html> function btn. Add_on. Click(){ <head><title>Add Numbers</title></head> var N 1; <body> var N 2; N 1 = parse. Float(txt. N 1. value); <form method="post"> N 2 = parse. Float(txt. N 2. value); <input name="txt. N 1" type="text" /> par. Res. inner. Text = N 1 + N 2; <input name="txt. N 2" type="text" /> } <input name="btn. Add" type="submit" value="Add" /> </script> <p><%=Res%></p> </form> </body> </html> Both use same concepts (variables, conditionals …) Mark Dixon Page 17
Question: Errors 1 <%@page content. Type="text/html" page. Encoding="UTF-8"%> <% double N 1; double N 2; String Res = ""; if (request. get. Parameter("btn. Add") != null){ N 1 = Double. parse. Double(request. get. Parameter("txt. N 1")); N 2 = Double. parse. Double(request. get. Parameter("txt. N 2")); Res = Double. to. String(N 1 + N 2); } %> <!DOCTYPE html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="Num 1" type="text" /> <input name="Num 2" type="text" /> <input name="btn. Add" type="submit" value="Add" /> <p><%=Res%></p> </form> </body> </html> Mark Dixon Page 18
Question: Errors 2 <%@page content. Type="text/html" page. Encoding="UTF-8"%> <% double N 1; double N 2; String Res = ""; if (request. get. Parameter("btn. Add") != null){ N 1 = Double. parse. Double(request. get. Parameter("txt. N 1")); N 2 = Double. parse. Double(request. get. Parameter("txt. N 2")); Res = Double. to. String(N 1 + N 2); } %> <!DOCTYPE html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="txt. N 1" type="text" /> <input name="txt. N 2" type="text" /> <input name="btn. Add" type="button" value="Add" /> <p><%=Res%></p> </form> </body> </html> Mark Dixon Page 19
Apples. jsp Example: Apples <%@page content. Type="text/html" page. Encoding="UTF-8"%> <% double n = 0; Java code can int i = 0; dynamically add String s = ""; if (request. get. Parameter("btn. Go") != null){ n = Double. parse. Double(request. get. Parameter("txt. N")); for(i=0; i<n; i++){ s += "<img src='Apple. gif' />"; } } %> html <!DOCTYPE html> <head><title>Add Numbers</title></head> <body> <form method="post"> How many apples do you want? <input name="txt. N" type="text" /> <input name="btn. Go" type="submit" value="Go" /> <p><%=s%></p> </form> </body> </html> Mark Dixon Page 20
Adding Java. Script to JSP pages <%@page content. Type="text/html" page. Encoding="UTF-8"%> <% double N 1; double N 2; String Res = ""; if (request. get. Parameter("btn. Add") != null){ N 1 = Double. parse. Double(request. get. Parameter("txt. N 1")); N 2 = Double. parse. Double(request. get. Parameter("txt. N 2")); Res = Double. to. String(N 1 + N 2); } %> <!DOCTYPE html> <head> <title>Add Numbers</title> • Add Java. Script as usual • Object needs both <script> function window_on. Load(){ document. get. Element. By. Id('txt. N 1'). focus(); } </script> </head> <body onload="window_on. Load()"> <form method="post"> <input id="txt. N 1" name="txt. N 1" type="text" /> <input name="txt. N 2" type="text" /> <input name="btn. Add" type="submit" value="Add" /> <p><%=Res%></p> </form> </body> </html> Mark Dixon – Id (for Java. Script) – Name (for java) • Improves usability Page 21
Interactive Debugger • Insert Breakpoint (click line number) • Start Debugger (right click file, click Debug File item) Mark Dixon Page 22
Servlet • Servlet = – Java program, – running on a web-server – (implemented as a class) • Each JSP page is a Servlet – more on this next week Mark Dixon Page 23
Tutorial Exercise: Login (client-side) • LEARNING OBJECTIVE: see how vulnerable client-side code is • Task 1: Get the Login (v 1) example from the lecture working. • Task 2: Use view source – you should be able to see the code. Mark Dixon Page 24
Tutorial Exercise: Date • LEARNING OBJECTIVE: create a jsp page, including HTML and server-side code • Task 1: Get the Date example from the lecture working. • Task 2: Add code that displays good morning/afternoon/evening/night, depending on the time of day. Mark Dixon Page 25
Tutorial Exercise: Student Loan • LEARNING OBJECTIVE: create a jsp page, including HTML and server-side code from scratch to solve a problem • Task 1: Create a web page that allows the user to enter their salary and the computer calculates the annual and monthly payments for their student loan. Hint: Use the Add. Num example from the lecture. Mark Dixon Page 26
Tutorial Exercise: Login (client-side) • LEARNING OBJECTIVE: create a jsp page, including HTML and server-side code from scratch to solve a problem • Task 1: Create a login page that uses server-side code to check the username and password entered by the user. Hint: Use the Add. Num example as inspiration. Hint 2: Use the following code to send the user to the homepage: response. send. Redirect(“home. htm”); • Task 2: Use view source – you should NOT be able to see the code. Mark Dixon Page 27
How To: Add a JSP page 1. Right Click Project 2. Click New menu item 3. Click JSP menu item 1. Type a name for your page 2. Click Finish button Mark Dixon Page 28
- Slides: 28
