lecture_11x - Announcements - AW Industries

cornawakeSoftware and s/w Development

Nov 4, 2013 (3 years and 1 month ago)

50 views

JavaScript


Quiz
#9

Lecture Code:

623358

http://decal.aw
-
industries.com

Web Design:

Basic to Advanced Techniques

Web Design:

Basic to Advanced Techniques

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

Web Design:

Basic to Advanced Techniques

Correction:
Writing
Javascript
!


Inline
Javascript


<script type="text/
javascript
">


// JS code here


</script>


Include .
js

file


<script type="text/
javascript
"
src
="
javascript.js
"></script>


Write both in <head>



Goes in <head></head>

Goes in <head></head>

or <body></body>

Web Design:

Basic to Advanced Techniques

Spring 2010

Tuesdays 7
-
8pm

200 Sutardja
-
Dai Hall

Dynamic Pages


Part

1

Web Design:

Basic to Advanced Techniques

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

Web Design:

Basic to Advanced Techniques

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 A

User 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 .
php

Client 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

Client

Server


http://server.com?user_id=10



<input name=“
user_id

value=“10” />



cookie(user_id
, 10)

$_
COOKIE[‘user_id
’]

$_
POST[‘user_id
’]

$_
GET[‘user_id
’]

GET




<a
href
=“
profile.php?id
=999999999”>View Profile</a>

Could use PHP to dynamically create this link too…

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>

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:

623358

Lab…

http://decal.aw
-
industries.com

Web Design:

Basic to Advanced Techniques