Internet Programming
The anatomy of the web.

Overview
• Traditional Example - Google Search
• Web 2.0 Example - Update Facebook Status
• Terminologies

Traditional Example - Google Search

Traditional Example - Google Search

Traditional Example - Google Search

Traditional Example - Google Search
wait for it...

Traditional Example - Google Search
wait for it...

Traditional Example - Google Search
HTTP Request
McMurry University Sent from Client

Traditional Example - Google Search
HTTP Request
McMurry University Sent from Client
Server Resolution

Traditional Example - Google Search
HTTP Request
McMurry University Sent from Client
Server Resolution
Google Evaluates
Request

Traditional Example - Google Search
HTTP Request
McMurry University Sent from Client
Server Resolution
Google Evaluates
Request
Google Response is sent
to the Client Browser

Traditional Example - Google Search
HTTP Requests - a standardized data
HTTP Request
Sent from Client type that is sent from web clients to
obtain info from a web server
Server Resolution
• Common Types: GET & POST
Google Evaluates
Request
• Client Browser Info
• Application Variables
Google Response is sent • Cookie Info
to the Client Browser

Traditional Example - Google Search
Many things happen in order for
HTTP Request the HTTP Request to reach the
Sent from Client Google Servers
Server Resolution
• Domain Name Server Lookup
Google Evaluates • Retrieves domain name IP
Request Local ISP
Regional ISP
Google Response is sent
to the Client Browser National NSP

Traditional Example - Google Search
When Google evaluates
HTTP Request the request:
Sent from Client
Server Resolution
• Server-side code logic
is invoked
Google Evaluates • Database servers are
Request queried for search results
Google Response is sent
• The HTTP response is
to the Client Browser formed

Traditional Example - Google Search
Once the browser
HTTP Request
Sent from Client
receives Google’s response:
Server Resolution • The browser evaluates
and displays the web page
Google Evaluates
Request based on the response
• The browser sets any
Google Response is sent cookies the server may
to the Client Browser
have set

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)
CSC sends
HTTP Request

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)
CSC sends
HTTP Request
Server Resolution

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)
CSC sends
HTTP Request
Facebook Evaluates
Server Resolution Request

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI)
CSC sends
HTTP Request
Facebook Evaluates
Server Resolution Request
CSC evaluates response
and alters UI

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
• Javascript manipulates the DOM
alters User Interface (UI) • i.e. Makes a change on the page
• Asks the user for input
CSC sends
HTTP Request
Server Resolution
Facebook Evaluates
Request
CSC evaluates response
and alters UI

Web 2.0 Example - Update Facebook Status
Javascript:
Client-side code (CSC) • Gathers the user input
alters User Interface (UI)
• Forms a HTTP Request
CSC sends • Sends the request via AJAX
HTTP Request
Server Resolution
Facebook Evaluates
Request
CSC evaluates response
and alters UI

Web 2.0 Example - Update Facebook Status
Many things happen in order for
Client-side code (CSC) the HTTP Request to reach the
alters User Interface (UI)
Facebook Servers
CSC sends
HTTP Request • Domain Name Server Lookup
Server Resolution
• Retrieves domain name IP
• Local ISP
Facebook Evaluates
Request
• Regional ISP
• National NSP
CSC evaluates response
and alters UI

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
When Facebook
alters User Interface (UI) Evaluates the Request:
CSC sends • Server-side code logic
HTTP Request
is invoked
Server Resolution • Database servers are
queried for search results
Facebook Evaluates
Request • The HTTP response is
formed
CSC evaluates response
and alters UI

Web 2.0 Example - Update Facebook Status
Client-side code (CSC)
alters User Interface (UI) • Javascript catches the
HTTP response
CSC sends
HTTP Request • Javascript modifies the
DOM based on the
Server Resolution response
Facebook Evaluates
Request
CSC evaluates response
and alters UI

Terminology

Terminology
Client & Web Server
• Clients connect to web servers via the internet
• Web servers are accessible via the internet
• Web servers host and serve resources

Terminology
HTTP Request
a standardized data type that is sent from web
clients to obtain info from a web server
HTTP Response
the formal response of a web server to a client’s
request, the response contains the data to display the
page

Terminology
In an GET Request, the variables are
appended to the end of the URL.
In a POST Request, the variables are
hidden within the HTTP Request.
A POST Request gives the illusion of being
more secure, but the variables are just as
accessible as a GET Request

Terminology
GET, POST Variables
• Variables are used to pass data to the web
server
• Variables are used by the web server to
provide the appropriate response to the client

Terminology
Cookies are special variables sent by the web
server and saved on the client’s browser.
This data may be used to store non-sensitive data
on the client browser.
Cookies are used to set user sessions and
preferences

Terminology
Domain Name Server (DNS) - servers used to
look-up a domains associated IP address needed
to locate the web server
Internet Service Provider (ISP) - the service by
which you connect to the internet
Network Service Provider (NSP) - this service
is the backbone of the internet. Bandwidth from
NSPs are sold to ISPs

Terminology
Server-side Code
This code is usually executed on the web server
when HTTP requests are received from the client.
Server-side code is written in many programing
languages.
PHP - Facebook,Yahoo
Ruby - Twitter, Basecamp
Python - YouTube, Reddit

Terminology
Client-side Code
This code refers to what the browsers execute
to provide the user experience.
It is a combination of many types of
programming languages.
HTML - Hyper Text Markup Language
DOM - Document Object Model
CSS - Cascading Style Sheets
Javascript

For questions, comments or
feedback, feel free to contact me.
Chad Hutchins
hutchins.chad@gmail.com
twitter.com/chadhutchins