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

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

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

4. 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)

5. Mark Dixon Page 5 Example: Logon (design) Restrict access to home page

6. Mark Dixon Page 6 Example: Logon (code v1) Using Client-side JavaScript Please logon: 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."; } Logon.htm My Home page Welcome to my home page. Home.htm

7. Mark Dixon Page 7 Example: Login (Problem) View Source – shows client-side script: Reveals both username & password

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

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

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

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

12. 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 <%= <% 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); %> Date The date today is The time is date.jsp

13. Mark Dixon Page 13 Request-Response Cycle Browser Application (MS Explorer, Firefox) Web-server Application (MS IIS, Apache) date.jsp Request Date The date today is Tue 11 10 2011 The time is 14:21:41 Response <% 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); %> Date The date today is The time is Server-side code: run on server (never sent to Client)

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

15. Mark Dixon Page 15 Example: AddNum (client-side) <input id="btnAdd" type="submit" value="Add" onclick="btnAdd_onClick()" /> function btnAdd_onClick(){ var N1; var N2; N1 = parseFloat(txtN1.value); N2 = parseFloat(txtN2.value); parRes.innerText = N1 + N2; } AddNum.htm

16. Mark Dixon Page 16 Example: AddNum (server-side) check button click request.getParameter gets data from form input tags inside form use name (not id) submit button: refreshes page (sending data to server) <% 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); } %> Add Numbers AddNum.jsp

17. Mark Dixon Page 17 <% 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); } %> Add Numbers AddNum.jsp <input id ="btnAdd" type="submit" value="Add" onclick="btnAdd_onClick()" /> function btnAdd_onClick (){ var N1; var N2; N1 = parseFloat(txtN1.value); N2 = parseFloat(txtN2.value); parRes.innerText = N1 + N2; } AddNum.htm Client-side vs. Server-side Code Both use same concepts (variables, conditionals …)

18. Mark Dixon Page 18 Question: Errors 1 <% 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); } %> Add Numbers

19. Mark Dixon Page 19 Question: Errors 2 <% 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); } %> Add Numbers

20. Mark Dixon Page 20 Example: Apples <% 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 += " "; } %> Add Numbers How many apples do you want? Apples.jsp Java code can dynamically add html

21. Mark Dixon Page 21 Adding JavaScript to JSP pages Add JavaScript as usual Object needs both –Id (for JavaScript) –Name (for java) Improves usability <% 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); } %> Add Numbers function window_onLoad(){ document.getElementById('txtN1').focus(); }

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

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

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

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

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

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

28. Mark Dixon Page 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