Upload
steven-sullivan
View
230
Download
1
Embed Size (px)
Citation preview
Mark Dixon Page 1
3 – Web applications:Server-side code (JSP)
Mark Dixon Page 2
Admin: On-line Quiz• Useful, but
limited– multiple
choice, same concepts
– actual tests are free text
Mark Dixon Page 3
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• JavaScript
Mark Dixon Page 4
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
hotmail, Amazon, University portal, utility bills (gas, electricity, phone, internet), Travel (flights, ferry, car rental)
Mark Dixon Page 5
Example: Logon (design)• Restrict access to
home page
Mark Dixon Page 6
Example: Logon (code v1)• Using Client-side JavaScript
<html> <head><title></title></head> <body> Please logon:<br /> <input id="txtUserName" type="text" /><br /> <input id="txtPassWord" type="text" /><br /> <input id="btnLogon" type="submit" value="Logon" onclick="btnLogon_onClick()" /> <p id="msg"></p> </body></html>
<script language="javascript"> function btnLogon_onClick(){ var un; var pw; un = txtUserName.value; pw = txtPassWord.value; if(un == "mark" && pw == "soft131"){ window.navigate("home.htm"); }else{ msg.innerText = "Login details incorrect."; } }</script>
Logon.htm
<html> <head><title>My Home page</title></head> <body> <p> Welcome to my home page.<br /> <img src="YouAreHere.jpg" /> </p> </body></html>
Home.htm
Mark Dixon Page 7
Example: Login (Problem)• View Source – shows client-side script:
Reveals bothusername & password
Mark Dixon Page 8
networkconnection
Web Hardware and Software
ClientServer
BrowserApplication(MS Explorer,FireFox, Opera)
Web-serverApplication
(MS IIS,Apache)
Mark Dixon Page 9
BrowserApplication
(MS Explorer, Firefox)
Request-Response Cycle
Web-serverApplication
(MS IIS, Apache)
Logon.htm
Request
<html> <head><title></title></head> <body> Please logon:<br /> <input id="txtUserName" type="text" /><br /> <input id="txtPassWord" type="text" /><br /> <input id="btnLogon" type="submit" value="Logon" onclick="btnLogon_onClick()" /> <p id="msg"></p> </body></html>
<script language="javascript"> function btnLogon_onClick(){ var un; var pw; un = txtUserName.value; pw = txtPassWord.value; if(un == "mark" && pw == "soft131"){ window.navigate("home.htm"); }else{ msg.innerText = "Login details incorrect."; } }</script>
Response
Client-side code:Code sent to ClientInterpreted by browser
Mark Dixon Page 10
Server-Side Technology• Microsoft
– Active Server Pages (ASP) = VBScript– ASP.NET = VB.NET or C#
• Sun– Java Server Pages (JSP) = Java
• PhP
• Perl / CGI
Mark Dixon Page 11
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 12
Example: Date• JSP page:
– .jsp (not .htm)
– Scriptlet tag <%
– variables have type
– Date() is current date and time (on server)
– Expression tag <%=
<%@page import="java.util.Date" %><%@page import="java.text.SimpleDateFormat" %><%Date today;SimpleDateFormat formatD;SimpleDateFormat formatT;String d;String t; today = new Date(); formatD = new SimpleDateFormat("EEE dd MM yyyy"); formatT = new SimpleDateFormat("HH:mm:ss"); d = formatD.format(today); t = formatT.format(today);%>
<!DOCTYPE html><html> <head><title>Date</title></head> <body> The date today is <%=d%><br /> The time is <%=t%> </body></html>
date.jsp
Mark Dixon Page 13
Request-Response CycleBrowser
Application(MS Explorer, Firefox)
Web-serverApplication
(MS IIS, Apache)
date.jsp
Request
<!DOCTYPE html><html> <head><title>Date</title></head> <body> The date today is Tue 11 10 2011<br /> The time is 14:21:41 </body></html>
Response
<%@page import="java.util.Date" %><%@page import="java.text.SimpleDateFormat" %><%Date today;SimpleDateFormat formatD;SimpleDateFormat formatT;String d;String t; today = new Date(); formatD = new SimpleDateFormat("EEE dd MM yyyy"); formatT = new SimpleDateFormat("HH:mm:ss"); d = formatD.format(today); t = formatT.format(today);%>
<!DOCTYPE html><html> <head><title>Date</title></head> <body> The date today is <%=d%><br /> The time is <%=t%> </body></html>
Server-side code: run on server(never sent to Client)
Mark Dixon Page 14
View Source• Code executed at server
– code is never sent to client
• View, Source – does not show code:
Mark Dixon Page 15
Example: AddNum (client-side)<html> <head><title></title></head> <body> <input id="txtN1" type="text" /><br /> <input id="txtN2" type="text" /><br /> <input id="btnAdd" type="submit" value="Add" onclick="btnAdd_onClick()" /> <p id="parRes"></p> </body></html>
<script language="javascript"> function btnAdd_onClick(){ var N1; var N2; N1 = parseFloat(txtN1.value); N2 = parseFloat(txtN2.value); parRes.innerText = N1 + N2; }</script>
AddNum.htm
Mark Dixon Page 16
Example: AddNum (server-side)• check button click
• request.getParametergets data from form
• input tags inside form
• use name (not id)
• submit button:refreshes page (sending data to server)
<%@page contentType="text/html" pageEncoding="UTF-8"%><%double N1;double N2;String Res = ""; if (request.getParameter("btnAdd") != null){ N1 = Double.parseDouble(request.getParameter("txtN1")); N2 = Double.parseDouble(request.getParameter("txtN2")); Res = Double.toString(N1 + N2); }%><!DOCTYPE html><html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="txtN1" type="text" /><br /> <input name="txtN2" type="text" /><br /> <input name="btnAdd" type="submit" value="Add" /> <p><%=Res%></p> </form> </body></html>
AddNum.jsp
Mark Dixon Page 17
<%@page contentType="text/html" pageEncoding="UTF-8"%><%double N1;double N2;String Res = ""; if (request.getParameter("btnAdd") != null){ N1 = Double.parseDouble(request.getParameter("txtN1")); N2 = Double.parseDouble(request.getParameter("txtN2")); Res = Double.toString(N1 + N2); }%><!DOCTYPE html><html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="txtN1" type="text" /><br /> <input name="txtN2" type="text" /><br /> <input name="btnAdd" type="submit" value="Add" /> <p><%=Res%></p> </form> </body></html>
AddNum.jsp<html> <head><title></title></head> <body> <input id="txtN1" type="text" /><br /> <input id="txtN2" type="text" /><br /> <input id="btnAdd" type="submit" value="Add" onclick="btnAdd_onClick()" /> <p id="parRes"></p> </body></html>
<script language="javascript"> function btnAdd_onClick(){ var N1; var N2; N1 = parseFloat(txtN1.value); N2 = parseFloat(txtN2.value); parRes.innerText = N1 + N2; }</script>
AddNum.htm
Client-side vs. Server-side Code
Both use same concepts (variables, conditionals …)
Mark Dixon Page 18
Question: Errors 1<%@page contentType="text/html" pageEncoding="UTF-8"%><%double N1;double N2;String Res = ""; if (request.getParameter("btnAdd") != null){ N1 = Double.parseDouble(request.getParameter("txtN1")); N2 = Double.parseDouble(request.getParameter("txtN2")); Res = Double.toString(N1 + N2); }%><!DOCTYPE html><html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="Num1" type="text" /><br /> <input name="Num2" type="text" /><br /> <input name="btnAdd" type="submit" value="Add" /> <p><%=Res%></p> </form> </body></html>
Mark Dixon Page 19
Question: Errors 2<%@page contentType="text/html" pageEncoding="UTF-8"%><%double N1;double N2;String Res = ""; if (request.getParameter("btnAdd") != null){ N1 = Double.parseDouble(request.getParameter("txtN1")); N2 = Double.parseDouble(request.getParameter("txtN2")); Res = Double.toString(N1 + N2); }%><!DOCTYPE html><html> <head><title>Add Numbers</title></head> <body> <form method="post"> <input name="txtN1" type="text" /><br /> <input name="txtN2" type="text" /><br /> <input name="btnAdd" type="button" value="Add" /> <p><%=Res%></p> </form> </body></html>
Mark Dixon Page 20
Example: Apples<%@page contentType="text/html" pageEncoding="UTF-8"%><%double n = 0;int i = 0;String s = ""; if (request.getParameter("btnGo") != null){ n = Double.parseDouble(request.getParameter("txtN")); for(i=0;i<n;i++){ s += "<img src='Apple.gif' />"; } }%><!DOCTYPE html><html> <head><title>Add Numbers</title></head> <body> <form method="post"> How many apples do you want? <input name="txtN" type="text" /><br /> <input name="btnGo" type="submit" value="Go" /> <p><%=s%></p> </form> </body></html>
Apples.jsp
Java code can dynamically add html
Mark Dixon Page 21
Adding JavaScript to JSP pages• Add JavaScript as
usual
• Object needs both– Id (for JavaScript)– Name (for java)
• Improves usability
<%@page contentType="text/html" pageEncoding="UTF-8"%><%double N1;double N2;String Res = ""; if (request.getParameter("btnAdd") != null){ N1 = Double.parseDouble(request.getParameter("txtN1")); N2 = Double.parseDouble(request.getParameter("txtN2")); Res = Double.toString(N1 + N2); }%><!DOCTYPE html><html> <head> <title>Add Numbers</title> <script> function window_onLoad(){ document.getElementById('txtN1').focus(); } </script> </head> <body onload="window_onLoad()"> <form method="post"> <input id="txtN1" name="txtN1" type="text" /><br /> <input name="txtN2" type="text" /><br /> <input name="btnAdd" type="submit" value="Add" /> <p><%=Res%></p> </form> </body></html>
Mark Dixon Page 22
Interactive Debugger• Insert Breakpoint (click line number)
• Start Debugger (right click file, click Debug File item)
Mark Dixon Page 23
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 24
Tutorial Exercise: Login (client-side)• LEARNING OBJECTIVE:
see how vulnerable client-side code is
• Task 1: Get the Login (v1) example from the lecture working.
• Task 2: Use view source – you should be able to see the code.
Mark Dixon Page 25
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 26
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 AddNum example from the lecture.
Mark Dixon Page 27
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 AddNum example as inspiration. Hint2: Use the following code to send the user to the homepage: response.sendRedirect(“home.htm”);
• Task 2: Use view source – you should NOT be able to see the code.
Mark Dixon Page 28
How To: Add a JSP page1. Right Click Project2. Click New menu item3. Click JSP menu item
1. Type a name for your page2. Click Finish button