Mark Dixon Page 1 18 – Web applications: Server-side code (PhP)
-
Upload
cora-henry -
Category
Documents
-
view
213 -
download
0
Transcript of Mark Dixon Page 1 18 – Web applications: Server-side code (PhP)
Mark Dixon Page 1
18 – Web applications:Server-side code (PhP)
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 an asp web-page, including:• HTML, and• server-side PhP
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
hotmail, Amazon, University portal, utility bills (gas, electricity, phone, internet), Travel (flights, ferry, car rental)
Mark Dixon Page 4
Example: Logon (design)• Restrict access to
home page
Mark Dixon Page 5
Example: Logon (code v1)• Using Client-side VB Script
<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 6
Example: Login (Problem)• View Source – shows client-side script:
Reveals bothusername & password
Mark Dixon Page 7
networkconnection
Web Hardware and Software
ClientServer
BrowserApplication(MS Explorer,FireFox, Opera)
Web-serverApplication
(MS IIS,Apache)
Mark Dixon Page 8
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 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
Mark Dixon Page 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> <?php echo $d . "<br />" . $t; ?> </body></html>
Date.php
Mark Dixon Page 11
Request-Response CycleBrowser
Application(MS Explorer, Firefox)
Web-serverApplication
(MS IIS, Apache)
date.php
Request
<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>
Response
<?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> <?php echo $d . "<br />" . $t; ?> </body></html>
Server-side code: run on server(never sent to Client)
Mark Dixon Page 12
View Source• Code executed at server
– code is never sent to client
• View, Source – does not show code:
Mark Dixon Page 13
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 14
Example: AddNum (server-side)
• input tags inside form
• submit button:refreshes page (sending data to server)
<?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" /> <?php echo $Res; ?> </form> </body></html>
AddNum.php
• If btnAdd clicked
• $_POSTreads data from form
Mark Dixon Page 15
<?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" /> <?php echo $Res; ?> </form> </body></html>
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>
AddNum.htm
Client-side vs. Server-side Code
Both use same concepts (variables, conditionals …)
Mark Dixon Page 16
Example: Apples
<?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" /> <?php echo $s; ?> </form> </body></html>
Apples.php
Mark Dixon Page 17
Errors<?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> <?php echo $d . "<br />" + $t; ?> </body></html>
use . instead of + for strings
variables need $ in front
Mark Dixon Page 18
Running your PhP pages• using Apache
– makes PC a server– page available to all computers on internet
• edit page within NetBeans– Run (play) button– uses Apache
Mark Dixon Page 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
Mark Dixon Page 20
PhP Tutorials• w3schools php tutorial:
http://www.w3schools.com/php/default.asp
Mark Dixon Page 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.
Mark Dixon Page 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.
Mark Dixon Page 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.
Mark Dixon Page 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.
Mark Dixon Page 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.