1 / 28

3 – Web applications: Server-side code (JSP)

3 – Web applications: Server-side code (JSP). Admin: On-line Quiz. Useful, but limited multiple choice, same concepts actual tests are free text. Session Aims & Objectives. Aims To introduce the fundamental ideas involved in server-side code

conner
Download Presentation

3 – Web applications: Server-side code (JSP)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 3 – Web applications:Server-side code (JSP)

  2. Admin: On-line Quiz • Useful, but limited • multiple choice, same concepts • actual tests are free text

  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

  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-functionalshould be very difficult to hack • hotmail, Amazon, University portal, utility bills (gas, electricity, phone, internet), Travel (flights, ferry, car rental)

  5. Example: Logon (design) • Restrict access tohome page

  6. Example: Logon (code v1) Logon.htm • 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> Home.htm <html> <head><title>My Home page</title></head> <body> <p> Welcome to my home page.<br /> <img src="YouAreHere.jpg" /> </p> </body> </html>

  7. Example: Login (Problem) • View Source – shows client-side script: Reveals bothusername & password

  8. Web Hardware and Software network connection Client Server Browser Application (MS Explorer, FireFox, Opera) Web-server Application (MS IIS, Apache)

  9. Request-Response Cycle Request Web-server Application (MS IIS, Apache) Browser Application (MS Explorer, Firefox) Logon.htm Response <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> Client-side code:Code sent to Client Interpreted by browser

  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

  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

  12. Example: Date date.jsp <%@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> • JSP page: • .jsp (not .htm) • Scriptlet tag <% • variables have type • Date() is current date and time (on server) • Expression tag <%=

  13. Request-Response Cycle Request date.jsp Browser Application (MS Explorer, Firefox) Web-server Application (MS IIS, Apache) <%@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> Response <!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> Server-side code: run on server(never sent to Client)

  14. View Source • Code executed at server • code is never sent to client • View, Source – does not show code:

  15. Example: AddNum (client-side) AddNum.htm <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>

  16. Example: AddNum (server-side) AddNum.jsp • 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>

  17. Client-side vs. Server-side Code AddNum.htm 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> <%@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> Both use same concepts (variables, conditionals …)

  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>

  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>

  20. Example: Apples Apples.jsp <%@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> Java code can dynamically add html

  21. Adding JavaScript to JSP pages <%@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> • Add JavaScript as usual • Object needs both • Id (for JavaScript) • Name (for java) • Improves usability

  22. Interactive Debugger • Insert Breakpoint (click line number) • Start Debugger (right click file, click Debug File item)

  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

  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.

  25. Tutorial Exercise: Date • LEARNING OBJECTIVE:create a jsp page, including HTML and server-sidecode • 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.

  26. Tutorial Exercise: Student Loan • LEARNING OBJECTIVE:create a jsp page, including HTML and server-sidecode 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.

  27. Tutorial Exercise: Login (client-side) • LEARNING OBJECTIVE:create a jsp page, including HTML and server-sidecode 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.

  28. 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

More Related