Download presentation
Presentation is loading. Please wait.
1
18 – Web applications: Server-side code (PhP)
2
Session Aims & Objectives
To introduce the fundamental ideas involved in server-side code Objectives, by end of this week’s sessions, you should be able to: create an PhP web-page, including: HTML, and server-side PhP
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 hotmail, Amazon, University portal, utility bills (gas, electricity, phone, internet), Travel (flights, ferry, car rental)
4
Example: Logon (design)
Restrict access to home page
5
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>
6
Example: Login (Problem)
View Source – shows client-side script: Reveals both username & password
7
Web Hardware and Software
Server Client network connection Browser Application (MS Explorer, FireFox, Opera) Web-server Application (MS IIS, Apache)
8
Request-Response Cycle
Browser Application (MS Explorer, Firefox) Web-server Application (MS IIS, Apache) 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
9
Server-side Script (what)
PhP – HyperText PreProcessor 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) PhP pages will NOT work by double clicking on file
10
Example: Date php code: .php (not .htm) php (not javascript)
variables have $ (no declaration) date is current date and time (on server) use . instead of + <?php $d = "The date today is "; $d = $d . date("D d M Y"); $t = "The time now is "; $t = $t . date("H:i"); ?> <html> <head><title>Today's Date</title></head> <body> echo $d . "<br />" . $t; </body> </html>
11
Request-Response Cycle
date.php Request Browser Application (MS Explorer, Firefox) Web-server Application (MS IIS, Apache) <?php $d = "The date today is "; $d = $d . date("D d M Y"); $t = "The time now is "; $t = $t . date("H:i"); ?> <html> <head><title>Today's Date</title></head> <body> echo $d . "<br />" . $t; </body> </html> Response <html> <head><title>Today's Date</title></head> <body> The date today is Mon 15 Feb 2010<br /> The time now is 20:28 </body> </html> Server-side code: run on server (never sent to Client)
12
View Source Code executed at server View, Source – does not show code:
code is never sent to client View, Source – does not show code:
13
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>
14
Example: AddNum (server-side)
AddNum.php $_POST reads data from form <?php $Res = ""; if(isset($_POST["btnAdd"])){ $N1 = $_POST["txtN1"]; $N2 = $_POST["txtN2"]; $Res = $N1 + $N2; } ?> <html> <head><title></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" /> echo $Res; </form> </body> </html> If btnAdd clicked input tags inside form submit button: refreshes page (sending data to server)
15
Client-side vs. Server-side Code
AddNum.htm AddNum.php <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> <?php $Res = ""; if(isset($_POST["btnAdd"])){ $N1 = $_POST["txtN1"]; $N2 = $_POST["txtN2"]; $Res = $N1 + $N2; } ?> <html> <head><title></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" /> echo $Res; </form> </body> </html> Both use same concepts (variables, conditionals …)
16
Example: Apples Apples.php <?php $s = "";
if(isset($_POST["btnGo"])){ $s = $s . "<img src='Apple.gif' />"; } ?> <html> <head><title>Apples</title></head> <body> <form method="post"> <input name="btnGo" type="submit" value="Go" /> echo $s; </form> </body> </html>
17
Errors variables need $ in front use . instead of + for strings
<?php $d = "The date today is "; $d = $d . date("D d M Y"); $t = "The time now is "; $t = t . date("H:i"); ?> <html> <head><title>Today's Date</title></head> <body> echo $d . "<br />" + $t; </body> </html> variables need $ in front use . instead of + for strings
18
Running your PhP pages using Apache edit page within NetBeans
makes PC a server page available to all computers on internet edit page within NetBeans Run (play) button uses Apache
19
Apache: Exposing pages
Put php pages in: C:\wamp\www (this part of hard disk exposed to outside world) Execute pages by putting: localhost:8080 (in web browser, e.g. IE, means local machine) (8080 is port number, usually 80, changed in labs to run IIS and Apache together) PhP pages don't work by double-clicking
20
PhP Tutorials w3schools php tutorial:
21
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.
22
Tutorial Exercise: Date
LEARNING OBJECTIVE: create a PhP page, including HTML and server-side Script 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.
23
Tutorial Exercise: Student Loan
LEARNING OBJECTIVE: create an PhP page, including HTML and server-side Script 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 your client-side code (from term 1), and the AddNum example from the lecture.
24
Tutorial Exercise: Login (client-side)
LEARNING OBJECTIVE: create an PhP page, including HTML and server-side Script 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: header("Location: Home.htm"); Task 2: Use view source – you should NOT be able to see the code.
25
Tutorial Exercise: Apples
LEARNING OBJECTIVE: use loops in PhP code Task 1: Get the apples example (from the lecture) working. Task 2: Modify your program so that the user enters a number, and the code adds that number of apple images. Task 3: Modify your program so that the user enters another number, and the code adds a new line tag for that number of apples. Hint: Within the loop divide the number of apples by the second number, if the result is a whole number add a new line tag.
Similar presentations
