1. Web Programming Brian Toone 8/27/2014

2. Outline for today 1.Understanding the architecture of the web 2.Overview of programming languages – Client-side languages HTML Java, JavaScript Flash – Server-side languages CGI scripts PHP, ASP, JSP 3.The Web Development process 4.Practice examples throughout…

3. Review: The Web Architecture Key components: – web servers (listen for requests) – web browsers (send requests) – everything else is the underlying internet What are requests? – HTTP protocol – Simplest example requests a specific file – More complex examples involve submitting form data

4. The Web Architecture Client (web browser) sends normal http request Web server sees request and finds specified file Server sends back http response including the contents of the file Web browser interprets the HTML commands and displays (renders) the web page on the screen HTTP request sent to google.com for the index.htm file index.html GET /index.htm HTTP/1.0 1 2 3 4

5. Static vs. Dynamic Static Requests for.htm,.html files Contents of files transmitted without modification Requests are processed in the same way for all users Dynamic Requests for.php,.asp files (eg) These files contain commands which generate the HTML file using additional information typically stored in a database The HTML content transmitted back to the web browser may be different for each user

6. HTML Programming First “client-side” programming language we will cover. We will spend most of our efforts here. By “client-side”, we are referring to a language of commands that are interpreted by a web browser (client).

7. © 2007 Pearson Addison- Wesley. All rights reserved 4-7 Hypertext Document Format HTML – hypertext markup language Entire document is printable characters Contains tags to communicate with browser – Appearance to start a level one heading to start a new paragraph – Links to other documents and content – Insert images

8. © 2007 Pearson Addison- Wesley. All rights reserved 4-8 Figure 4.9 A simple Web page

9. © 2007 Pearson Addison- Wesley. All rights reserved 4-9 Figure 4.9 A simple Web page (continued)

10. © 2007 Pearson Addison- Wesley. All rights reserved 4-10 Figure 4.10 An enhanced simple Web page

11. © 2007 Pearson Addison- Wesley. All rights reserved 4-11 Figure 4.10 An enhanced simple Web page (continued)

12. Other Client-Side Languages Java (applets) – Toronto University examples: http://www.dgp.toronto.edu/~mjmcguff/learn/java/ http://www.dgp.toronto.edu/~mjmcguff/learn/java/ Javascript – “Live demo” … paragraph that changes color when you hover the mouse over it Flash – University of Florida tutorial: http://web.image.ufl.edu/help/flash/programming/tutorial/ http://web.image.ufl.edu/help/flash/programming/tutorial/

13. Server-Side Languages Let’s start with an interactive PHP demo Here’s a “cooked” example for your notes: HTML commands sent to browser … “View source” hello.php

14. Benefits of server-side languages Primary benefit is the ability to create one page that will be customized with data for a particular user – Example, facebook.com/profile.php – Think about having to create a unique profile page for each user (facebook.com/brtoone.php, facebook.com/ktoone.php, etc…) – Who would create each page? Who would update it? How would you update everybody’s page at once? How would you create a “new facebook”? Short answer: It would be nearly impossible and would take thousands and thousands of hours!

15. Facebook example, cont’d How does it work then? 1. Login or create an account

16. Facebook example, cont’d 2. Your login information (username and password) is sent to the facebook web server 3. If you entered a correct username and password, then your specific profile page is displayed by retrieving your information from the database

17. Other Server-Side Languages ASP – Active Server Pages – Microsoft technology very similar to PHP – Example: HTML commands sent to browser … “View source” index.asp

18. Other Server-Side Languages, cont’d CGI scripts – Generic term for a shell script executed on a server – Perl, Bash, Ksh are common scripting languages Coldfusion – Ummm, not cheapnot cheap – Extended HTML syntax

19. What about the WebE process? Yes – this is definitely out of order! We still need to finish communication, planning, and modeling first But that is assuming you are already web programming experts… So we have to be learning the process and the skills in parallel

20. JavaScript What is it? – An object-oriented programming language – Let’s break that down… Object – the focus of our commands (a la sentences) Oriented – allows for some things which are not objects Programming language – a set of commands to tell the computer what to do! – Typically, embedded in HTML onclick = “this.style.background=‘#ff0000’”

21. Examples this.style.background = ‘#ff0000’; this.style.fontSize = ‘14px’; this.innerHTML = “new html text”;

22. JavaScript Interactive Lab / Lecture – http://www.w3schools.com/JS/default.asp http://www.w3schools.com/JS/default.asp – http://www.w3schools.com/JS/js_intro.asp http://www.w3schools.com/JS/js_intro.asp – http://www.w3schools.com/JS/js_examples.asp http://www.w3schools.com/JS/js_examples.asp – http://www.w3schools.com/htmldom/dom_obj_style.asp http://www.w3schools.com/htmldom/dom_obj_style.asp JavaScript quick reference – http://www.devguru.com/technologies/ecmascript/QuickRef/javascript_index.html http://www.devguru.com/technologies/ecmascript/QuickRef/javascript_index.html HTML quick reference – http://www.htmlgoodies.com/beyond/reference/article.php/3472851 http://www.htmlgoodies.com/beyond/reference/article.php/3472851

23. AJAX Cleaning chemical? No. Cool nickname? No. Acronym? Yes! – Asynchronous Javascript And XML – Now here’s the thing, you don’t have to use XML, but AJAT (Text) wasn’t as cool an acronym – Blurs the line between client-side and server-side