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

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

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

Mark Dixon Page 8 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

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"); ?> Today's Date <?php echo $d. " ". $t; ?> Date.php

Mark Dixon Page 11 Request-Response Cycle Browser Application (MS Explorer, Firefox) Web-server Application (MS IIS, Apache) date.php Request Today's Date The date today is Mon 15 Feb 2010 The time now is 20:28 Response <?php $d = "The date today is "; $d = $d. date("D d M Y"); $t = "The time now is "; $t = $t. date("H:i"); ?> Today's Date <?php echo $d. " ". $t; ?> 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) <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

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; } ?> <?php echo $Res; ?> AddNum.php If btnAdd clicked $_POST reads data from form

Mark Dixon Page 15 <?php $Res = ""; if( isset($_POST["btnAdd"]) ){ $N1 = $_POST["txtN1"]; $N2 = $_POST["txtN2"]; $Res = $N1 + $N2; } ?> <?php echo $Res; ?> AddNum.php <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 …)

Mark Dixon Page 16 Example: Apples <?php $s = ""; if(isset($_POST["btnGo"])){ $s = $s. " "; } ?> Apples <?php echo $s; ?> 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"); ?> Today's Date <?php echo $d. " " + $t; ?> 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:

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.