1. Introduction to Dynamic Web Content Dr. Charles Severance www.php-intro.com

2. Where are we? Database Data Model Application Software (i.e. PHP) EndUser Developer DBA Database Tools (i.e. phpMyAdmin) SQL SQL

3. Web Server PHP MySQL Apache Browser HTML CSS DOM JavaScrip t JQuery http://www.dr-chuck.com/page1.htm

4. HTTP - Hypertext Transfer Protocol The dominant Application Layer Protocol on the Internet Invented for the Web - to Retrieve HTML, Images, Documents etc Extended to be data in addition to documents - RSS, Web Services, etc.. Basic Concept - Make a Connection - Request a document - Retrieve the Document - Close the Connection http://en.wikipedia.org/wiki/Http

5. http://www.dr-chuck.com/page1.htm protocolhostdocument

6. Getting Data From The Server Each the user clicks on an anchor tag with an href= value to switch to a new page, the browser makes a connection to the web server and issues a “GET” request - to GET the content of the page at the specified URL The server returns the HTML document to the Browser which formats and displays the document to the user.

7. Browser Web Server 80

8. Browser Web Server 80 Click

9. Browser Web Server 80 Request Click GET http://www.dr- chuck.com/page2.htm

10. Browser Web Server GET http://www.dr- chuck.com/page2.htm 80 Request Click

11. Browser Web Server The Second Page If you like, you can switch back to the First Page. 80 RequestResponse Click GET http://www.dr- chuck.com/page2.htm

12. Browser Web Server The Second Page If you like, you can switch back to the First Page. 80 RequestResponse Click Parse/ Render GET http://www.dr- chuck.com/page2.htm

13. Internet Standards The standards for all of the Internet protocols (inner workings) are developed by an organization Internet Engineering Task Force (IETF) www.ietf.org Standards are called “RFCs” - “Request for Comments” Source: http://tools.ietf.org/html/rfc791http://tools.ietf.org/html/rfc791

14. http://www.w3.org/Protocols/rfc2616/rfc2616.txt

16. Making an HTTP request Connect to the server like www.dr-chuck.com a "hand shake" Request a document (or the default document) GET http://www.dr-chuck.com/page1.htm HTTP/1.0 GET http://www.mlive.com/ann-arbor/ HTTP/1.0 GET http://www.facebook.com HTTP/1.0

17. $ telnet www.dr-chuck.com 80 Trying 74.208.28.177... Connected to www.dr-chuck.com.Escape character is '^]'. GET http://www.dr-chuck.com/page1.htm HTTP/1.0 HTTP/1.1 200 OK Date: Thu, 08 Jan 2015 01:57:52 GMT Last-Modified: Sun, 19 Jan 2014 14:25:43 GMT Connection: close Content-Type: text/html The First Page If you like, you can switch to the Second Page. Connection closed by foreign host. Browser Web Server

18. Accurate Hacking in the Movies Matrix Reloaded Bourne Ultimatum Die Hard 4... http://nmap.org/movies.html http://www.youtube.com/watch?v=Zy5_gYu_isg

19. Getting to Know Our Browsers

20. Find Developer Mode Chrome: View->Developer FireFox: https://getfirebug.com/ Safari: Preferences -> Advanced -> Show Develop Menu

22. Browser Web Server GET http://www.dr- chuck.com/page2.htm The Second Page If you like, you can switch back to the First Page. 80 RequestResponse Parse/ Render Click

23. But there is more.... Browser – HTML, CSS, "Document Object Model" (the DOM) and JavaScript Web Server – Apache(or similar) we server with a PHP extension installed Database Server running MySQL, Postgress, Oracle, SQL Server or similar

24. Web ServerDatabase Server Time Apache PHP MySql Browser JavaScri pt DOMDOM php code stati c files RRC/HTTPSQL Parse Respons e Parse Reques t

25. Web ServerDatabase Server Time Apache PHP MySql http://www.php-intro.com/code/rrc/ Browser JavaScri pt DOMDOM php code stati c files Parse Respons e Parse Reques t

26. Our Technologies

27. MySQL INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com'); SELECT surname,firstname FROM users WHERE email='jsmith@mysite.com'; MySQL is one of the most popular free and open source database engines in the market place. MySQL powers Facebook, Yahoo!, WordPress, Drupal, Joomla, and millions of other dynamic web sites.

28. Apache Web Server Originally developed at National Center for Supercomputing Applications in 1994 First project / product of the Apache Foundation Brian Behlendorf founded Apache Open Source – Written in C http://www.vimeo.com/3800796

29. Science Calculations System http://en.wikipedia.org/wiki/History_of_programming_languages System Scripting/ Interpreted Scripting/ Interpreted C uses curly braces { } for code blocks.

30. PHP <?php echo "Hello World. Today is ".date("l").". "; ?>How are you? Hello World. Today is Wednesday. How are you? PHP is the most widely used scripting language for web programming. PHP extends HTML pages by adding server-executed code segments to HTML pages. The output of the execution of the PHP code is merged into the HTML page.

31. The History of PHP Rasmus Lerdorf Not a trained computer scientist Consultant building dynamic web sites - got tired of doing the same thing over and over in C Reusable bits + HTML Templates http://www.vimeo.com/6215179

32. JavaScript document.write("Hello World. Today is " + Date() ); JavaScript is a C-like programming language that can be included in an HTML web page. JavaScript allows the builder of a web page to embed dynamic elements within a web page. JavaScript programs run in the browser (i.e. the Client)

33. JavaScript: Brendan Eich Invented JavaScript in May 1995 in ten days

34. JavaScript Object Notation Douglas Crockford - "Discovered" JSON Object literal notation in JavaScript https://www.youtube.com/watch?v=kc8BAR7SHJI

35. jQuery: John Resig Started jQuery in 2005 to make his web development projects easier Elegant way to select DOM elements Clean way to register events Released in 2006 Works at Khan Academy as the "Dean of Computer Science"

36. Acknowledgements / Contributions These slides are Copyright 2010- Charles R. Severance (www.dr-chuck.com) as part of www.php-intro.com and made available under a Creative Commons Attribution 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates Continue new Contributors and Translators here