1. Web Application Development Using PHP Advanced Web-based Systems | Misbhauddin

2. What is Web Development? Advanced Web-based Systems | Misbhauddin DATA CLIENT-SIDE SCRIPTING SERVER-SIDE SCRIPTING DATABASE TECHNOLOGY

3. Server-Side Development Advanced Web-based Systems | Misbhauddin Websites need to be hosted on a web server Server-side code Facilitates the transfer of data from/to web server to a browser Used to build a database or manage data on the web server itself Languages There are a number of languages that power the back-end of the web systems

4. Server-Side Languages Advanced Web-based Systems | Misbhauddin Powers 75% of web-servers Open-source Large community Cross-platform Websites with lower traffic demands large-scale websites with a high volume of traffic Outperform others raw speed benchmark tests Code is elegant, expressive and powerful Speed of development Provides a mature framework – Ruby on Rails General purpose, high-level programming language Do more with fewer lines of code Large standard library Like java, used for large amount of traffic RUBY

5. PHP- Introduction PHP Server-Side Scripting Language It is processed at the server and returned back to the client Makes Webpages more functional Processing Scenario Web-based Systems | Misbhauddin5 Request a PHP webpage HTML Page Display the HTML file Runs the PHP code & generates HTML Pre-requisite: We need a server that can process and execute PHP

6. Web Server Solution Package Varity of packages available Usually post-fixed as AMP Apache MySQL PHP/Perl/Python Package depends on the OS you are using Cross-platforms are also available Web-based Systems | Misbhauddin6 LAMP MAMP WAMP XAMPP

7. Download & Setup Web-based Systems | Misbhauddin7 http://www.apachefriends.org/en/xampp.html VersionsPHPMySQLMercury MailFileZilla FTP XAMPP XAMPP Portable XAMPP Steps for using the “Portable” version 1.Download the zip file for the liter version http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/5.6.8/ 2.Copy the folder to the D: Drive (Very Important if using Portable Version)

8. What is where? Web-based Systems | Misbhauddin8 Configuration Files File (Directory)Usage \xampp\apache\conf\httpd.confThe main configuration file for Apache. \mysql\bin\my.iniThe configuration file for the MySQL Server. \xampp\php\php.iniThe configuration file for PHP. \xampp\phpMyAdmin\config.inc.phpThe configuration file for phpMyAdmin. Common Files File (Directory)Usage \xampp\htdocsThere are the files from your homepage. \xampp\mysql\dataThe databases.

9. Starting Your Server Go to D:\xampp folder Click on the start-control file Web-based Systems | Misbhauddin9

10. Testing Your Web Server Open any browser Type in the address “localhost” Web-based Systems | Misbhauddin10

11. Root Folder Root is the place that the webserver will start looking for files when people visit your website Default: Located in D:\xampp\htdocs Set in the httpd.conf file (Apache Configuration File) Web-based Systems | Misbhauddin11

12. PHP Code Enclosure Web-based Systems | Misbhauddin12 PHP Code is always written between the following pair of delimiters <?php statement1; statement2; ?> Note: Always end each PHP statement with a semi-colon

13. Output Statement: Echo The “echo” statement is used in PHP to output statements in PHP Similar to the “document.write()” function in JS echo ‘Hello World’;

14. Variables Variable An entity that can hold a value In PHP Variable Names start with “$” sign Assignment operator is the same “=“ $name = value; Must begin with a letter or an underscore (_) Must contain only alpha-numeric values and underscore No Spaces Case-sensitive NAMING RULES

15. Strings Like JavaScript, PHP also uses strings PHP String concatenation is done using “.” (unlike JavaScript where we use the “+” operator) Provides a number of string processing functions http://devdocs.io/php-string/ echo $txt1. " ". $txt2;

16. Operators OperatorName x + yAddition x - ySubtraction x * yMultiplication x / yDivision x % yModulus OperatorName ++ xPre-increment x ++Post-increment -- xPre-decrement x --Post-decrement OperatorName x == yEqual x === yIdentical x != yNot equal x <> yNot equal x !== yNot identical x > yGreater than x < yLess than x >= yGreater than or equal to x <= yLess than or equal to OperatorName x and yAnd x or yOr x xor yXor x && yAnd x || yOr ! xNot Arithmetic Inc / Dec Comparison Logical

17. Conditional Conditionals Provides a way to have certain commands executed only if some condition is met PHP If statement If…..Else statement Switch statement

18. Conditional Statements If statement if(cond) { } SYNTAX if(cond) { } else { } SYNTAX If – else statement if(cond) { } else { } SYNTAX If-Else statement with Complex Conditional switch (n) { case label1: code to be executed if n=label1; break; ……… default: } SYNTAX Switch statement

19. Loops Looping Provides a way to have certain block of commands to be executed again and again for certain number of times PHP While Loop Do….While Loop For Loop ForEach

20. Loop Statements While statement while(cond) { } SYNTAX do { } while(cond); SYNTAX do-while statement At least runs the loop once for(init; cond; increment) { } SYNTAX for statement

21. Functions in PHP Functions Group Block of Code Reusable Code function name(paramters) { return value; } SYNTAX Separate by comma Use “$” sign

22. PHP-HTML Integration PHP within HTML HTML within PHP My name is Mohammed Misbhauddin My name is $name = ‘Mohammed Misbhauddin’; My name is ’.$name.’ ?> Use concatenation

23. Arrays Holds a list of same type elements Syntax $varName = array(‘a‘, ‘b‘, ‘c‘); Accessing Array elements varName[key]; Length of an Array count(varName); Keyword Separate using coma’s KeysValue 0a 1b 2c

24. Associative Arrays Associative Arrays: Arrays with custom keys Syntax $varName = array(‘key1‘=>’a’, ‘key2‘=>’b’); Accessing Array elements varName[‘key1’]; Keyword Key names KeysValue key1a key2b (Strings or numbers)

25. Types of Arrays in PHP Arrays Associative Arrays Declaration-time initialization $arr = array(“a”, “b”, “c”); Initialization after declaration $arr = array(); $arr[0] = “a”; Indexes are assigned automatically [0], [1], [2] Declaration-time initialization $arr = array(101 => “a”, 102 => “b”, 103 => “c”); Initialization after declaration $arr = array(); $arr[101] = “a”; Indexes are assigned manually [101], [102], [103] Accessing Elements foreach($arr as $a) { echo $a; } Array-name Working Variable (like the i in your for loop)

26. Multi-dimensional Array A multidimensional array is an array containing one or more arrays. In a multidimensional array, each element in the main array can also be an array. And each element in the sub-array can be an array, and so on. Associative Multi-Dimensional Arrays $cars = array ( array("Volvo",100,96), array("BMW",60,59), array("Toyota",110,100) ); Volvo10096 BMW6059 Toyota110100 $cars = array(); $cars[101] =array(“name”=>"Volvo",”val”=>100,”val2”=>96); $cars[102] = array(“name”=>"BMW",”val”=>60,”val2”=>59); $cars[103] = array(“name”=>"Toyota",”val”=>110,”val2”=>100);

27. Form Submission id=“ “name=“ “ method=“ “action=“ “ File/function to callMethod to submit the form GET | POST For form identification 1. contact.html 2. return contact.html 3. Fill form 4. process.php (values) 5. Run process.php 6. HTML File

28. GET Method When to use Short forms, with only 1 or 2 input fields Forms with select, radio, and checkbox fields Sends the form information by including it on the URL process.php?name=……&email=……&content=……

29. Google Maps Graduation Party You are invited!!!!!!!! Please Please come If unable to find, enter your address below and I will guide you Guide Me maps.google.com/maps?saddr=……&daddr=……. Maps with directions If unable to find, enter your address below and I will guide you

30. Google Maps

31. POST Method When to use Sends the data to the server in two steps 1.Browser contacts the server 2.Send the information Longer forms, more than 3 input fields Forms with large textarea fields Forms where security is more important

32. Some Guidelines Always assign a name attribute to your form fields Eg. Remember Associative Arrays name=“username” Key What the user enters=> Value How will you access this information in PHP 1.Create a variable 2.Use the associative array technique a.Index is the key name 3.What is the array-name? a.Based on the method used $uname =array-name ‘username’ $_GET | $_POST

33. All Pre-defined Form Variables $_GET variable can be used to collect form data sent with the GET method. $_POST variable can be used to collect form data sent with the POST method. $_REQUEST variable can be used to collect form data sent with both the GET and POST methods. $varName = $_GET[‘username’]; $varName = $_POST[‘username’]; $varName = $_REQUEST[‘username’];

34. Traditional Web Architecture Client Browser Server 1. Request HTML 2. HTML 3. Click a link 3. Request HTML 4. HTML

35. Single Page Web Architecture Client Browser Server 1. Request HTML 2. HTML 3. Click a link 3. XHR Request 4. XHR Response

36. Single Page Architecture Requirement Advanced Web-based Systems | Misbhauddin GET or POST Page is reloaded when form is submitted and response is received Can we do it with reloading the page? Like modern websites like twitter and facebook News feeds and new tweets load as we scroll without page reload.

37. A Advanced Web-based Systems | Misbhauddin J A X synchronous

38. Synchronous Call Advanced Web-based Systems | Misbhauddin Browser Server User Action Server Processing User Action Server Processing User Action Time

39. Asynchronous Call Advanced Web-based Systems | Misbhauddin Browser Server User Action Server Processing Response AJAX Engine Time

40. Asynchronous Call Advanced Web-based Systems | Misbhauddin Browser Server User Action Server Processing Response AJAX Engine Time Server Processing Response

41. A Advanced Web-based Systems | Misbhauddin J A X synchronous avascript

42. JavaScript Objects Advanced Web-based Systems | Misbhauddin Use the XMLHttpRequest (XHR) Object Used to exchange data asynchronously with a server It update parts of a web page, without reloading the whole page It is the keystone of AJAX

43. XHR Object Advanced Web-based Systems | Misbhauddin EventsAttributesMethods - readyState - responseText - status - statusText - onreadystatechange - onload - onloadstart - onprogress - open - send - abort

44. A Advanced Web-based Systems | Misbhauddin J A X synchronous avascript nd ML

45. Response of an AJAX Call Advanced Web-based Systems | Misbhauddin XML Used in earlier days JSON Now the most popular data standard used HTML Also used popularly Mainly when the data sent from the server is for display as-is

46. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin STEP 1: Create XHR Object var xhr = new XMLHttpRequest(); - xhr is the name of the object {any name can be used} - new is the keyword used to create a new Object - XMLHttpRequest is the name of the object’s class

47. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin STEP 2: Create a Callback Function xhr.onreadystatechange = function () { } - onreadystatechange event is fired every time there is a change in the event - using anonymous function for call back (remember JavaScript class)

48. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin STEP 2: Create a Callback Function xhr.onreadystatechange = function () { } - onreadystatechange event is fired every time there is a change in the event - using anonymous function for call back (remember JavaScript class)

49. readyState Advanced Web-based Systems | Misbhauddin 0 – Request not initialized 1 – Server connection established 2 – Request Received 3 – Processing Request 4 – Request Finished and response is ready This variable holds the status of the XMLHttpRequest. Changes from 0 to 4.

50. status Advanced Web-based Systems | Misbhauddin 200 – OK 404 – Page not found ………. This is the same as the status of the HTTP response codes.

51. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin STEP 3: Do something when the request completed and response is ready xhr.onreadystatechange = function () { if( xhr.readyState == 4 && xhr.status == 200) { }

52. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin STEP 4: Send the Request to the Server xhr.open("GET",“process.php",true); xhr.send(); - The open method specifies the type of request, the URL, and if the request should be handled asynchronously or not - SYNTAX: open(method, url, async) method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) - The send method sends the request off to the server - Has parameters which are used only in POST request

53. AJAX Step-by-Step Advanced Web-based Systems | Misbhauddin Send Method with Data xhr.open(“POST",“process.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(“key=val&key2=val2”); To POST data like an HTML form, add an HTTP header with setRequestHeader() Data is then send as parameters in the send function Each data in the parameter has Key Value Each pair of key and value are separated by “&”

54. Complete Code Advanced Web-based Systems | Misbhauddin var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if( xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } xhr.open("GET",“process.php",true); xhr.send();

55. AJAX with JQuery Advanced Web-based Systems | Misbhauddin AJAX with JQuery becomes much simpler No need for so many steps as with using XHR Object Only one function called $.ajax() It includes everything such as the method, url, data and the callback function

56. $.ajax() function in JQuery Advanced Web-based Systems | Misbhauddin $.ajax({ url: 'process.php', type: 'POST', crossDomain: true, data: { ‘key': value, ………. }, }).done(function(data) { if(data==="success"){ }else{ } }).fail( function() { });

57. Conclusion Advanced Web-based Systems | Misbhauddin Data from HTML can be sent to the Server using two basic method GET and POST Data can be sent using two different ways: synchronous and asynchronous AJAX is used for asynchronous data transfer