JavaScript – Quiz #9 Lecture Code:

Today’s Agenda Quiz & Attendance Announcements Dynamic Pages – Part 1 Finish Quiz & Attendance Lab

Announcements Final Project – Topic due tonight Final Project – Layout instructions out Photoshop of main page and navigation Final Project – Website instructions out Get started early! Last day of class: presentations Discussion After Lecture Optional - for those that want to stay

Correction: Writing Javascript! Inline Javascript // JS code here Include.js file Write both in Goes in or

Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall Dynamic Pages – Part 1

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

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 Bridges client-side interface with server-side service and functionality

Bridging Interface and Service When you type in an address in Google Maps… Google’s servers first take your HTTP request and isolate your user input They then do some magic to return the correct map and search results to you This magic involves a number of things – from database lookups, to accessing other services like traffic info Once this data has been collected for you, it needs to be returned in HTML and CSS PHP aids this process

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.

Food Chain Client Requests File Web Server sees the file is.php PHP Parses.php file requested and writes HTML HTML The result after the php code has been parsed Received by Client JavaScript Included in the HTML file is executed by client Client to Server Via Internet Server to Client Via Internet

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

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

Exchange of Data Browser Server HTML, CSS, JS, images Request for files Login, password, cookies, …

PHP and User Input GET variables POST variables Cookies

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

PHP and User Input ClientServer cookie(user_id, 10) $_COOKIE[‘user_id’] $_POST[‘user_id’] $_GET[‘user_id’]

GET View Profile Could use PHP to dynamically create this link too…

POST

GET vs POST Q: When do we use a GET request and when do we use a POST request? A: Use a POST request when the result of the request modifies, creates, or deletes data – has lasting effects.

AJAX Both submitting a form (POST) or requesting a URL (GET) require reloading the page. AJAX allows us to perform POST or GET requests without reloading the page.

JavaScript – Quiz #9 Lecture Code: Lab…