Web Design:

1. Web Design: Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall Basic to Advanced Techniques Introduction to PHP Web Design:Basic to Advanced Techniques

2. Last Week… • We learned that JavaScript is awesome • Functions • Manipulation • Effects/Animations • Events/Callbacks • GET/POST • AJAX

3. Event handling • Mouse click • $(“#blah").click(function() { alert("Hello world!"); }); • Hover • $('#blah').mouseover(function() { alert(“Hello world!”); }); • Keyup/down/press, onfocus/blur, etc. • For more, check out the Jquery API: http://api.jquery.com/category/events/

4. Callbacks • Piece of executable code that is passed as an argument to other code • Allows us control timing of function calls • Allows us to execute X only if Y was sucessful. • Just like the jQuery .click() $("p").click(function () { $(this).slideUp(); });

5. Callbacks • If you do some AJAX call that returns data $.post(URL, input, function(output){ alert(output); }

6. What is PHP? Client Side Server Side Web Server Serve Website Send HTML and CSS files Send images • Web Browser • HTTP Request (visit website) • Interpret and render received files • Send JavaScript code • Execute JavaScript Runs in your browser – on the client side • PHP and MySQL Web Design:Basic to Advanced Techniques

7. PHP: Hypertext Preprocessor • Server-side • Scripting language (like JavaScript, unlike HTML and CSS) • Dynamically writes HTML pages • Has access to server system’s resources • Database • Image processors • Anything else the system can run

8. PHP Use Cases • Customization • Facebook shows you your profile despite sending the same file to everyone • Authentication • Login • PHP can choose to hide your Facebook profile from those that are unauthorized to view it • Access Database on your Behalf • When you use Yelp, Yelp does not have html files for every search you could possibly make saved. It generates the pages on the fly.

9. Chain of Events Server to Client Via Internet Client to Server Via Internet

10. PHP Generates HTML Files • PHP dynamically writes HTML files which are then downloaded and rendered by the user Profile.php w/ php code Profile.php w/ php code parsed for User A Profile.php w/ php code parsed for User B User A User B

11. Client Never Sees PHP Server View of .php Client View of .php

12. Exchange of Data Request for files Login, password, cookies, … HTML, CSS, JS, images

13. PHP and User Input

14. PHP and User Input • GET variables • Passed via URL in the form of &myVar=value • POST variables • The result of form submission • Can be a single word, a check box, a selector, a file • Cookies • Set by the server • Key, value pairs

15. PHP and User Input Client Server • http://server.com?user_id=10 • <input name=“user_id” value=“10” /> • cookie(user_id, 10) $_GET[‘user_id’] $_POST[‘user_id’] $_COOKIE[‘user_id’]

16. GET <a href=“profile.php?id=999999999”>View Profile</a> Could use PHP to dynamically create this link too…

17. POST <form action=“/sendEmail.php” method=“post”> <input type=“text” name=“name” /> <input type=“text” name=“from” /> <textarea name=“body”></textarea> <input type=“submit” value=“Send” /> </form>