1 / 25

18 – Web applications: Server-side code (PhP)

18 – Web applications: Server-side code (PhP). 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 PhP web-page, including: HTML, and server-side PhP.

verna
Download Presentation

18 – Web applications: Server-side code (PhP)

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. 18 – Web applications:Server-side code (PhP)

  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 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-functionalshould 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 tohome 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 bothusername & password

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

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

  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 Date.php • 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>

  11. Request-Response Cycle Request date.php 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> <?php 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 • 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 • $_POSTreads data from form • 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> • If btnAdd clicked

  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" /> <?php 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" /> <?php echo $s; ?> </form> </body> </html>

  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> variables need $ in front use . instead of + for strings

  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

  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: http://www.w3schools.com/php/default.asp

  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-sideScript • 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-sideScript 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-sideScript 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.

More Related