You are on page 1of 57

Internet Application I t t A li ti Programming

2011 revisions L.D. Nel 2005 J. Morrison Sebesta 6th ed authors powerpoint slides

Reference Picture of Computer Application To Internet


read write

Screen System.out, cout

Disk Files c:/assign/data.txt Architecture for code you wrote for Comp 1405/1406

Input Devices System.in, cin


COMP 2405 Introduction

Decoupling based on Model-View-Controller Database


2

Reference Picture of Web Application Architecture for code in comp 2405


Client 126.24.17.01 Decoupling based on p g Client-Server Browser Server 128.64.08.08:8080 Internet/Web

Browser B
COMP 2405 Introduction

Client 194.123.67.01 194 123 67 01

Database
3

Lecture Overview
History of the Web Role of Web Applications Network f d N t k fundamentals t l HTTP Protocol Web Applications and tools

COMP 2405 Introduction

Current Status of the Web


A global network of networks of communicating computers Envisioned by its inventors to serve as:
World-wide mechanism for information dissemination Medium for global collaboration

Public attention only 25 years after its inception with:


Settling on http protocol and hypertext format Introduction of GUI web browsers C Commercial use and "d t i l d "dot-com" revolution " l ti

Now more than 200++ million hosts (unique domain names)


COMP 2405 Introduction 5

History of the Web


(1945) Vannevar Bush envisions Memex (1960s-early 70 ) ARPA t (1960 l 70s) ARPAnet (1965) Ted Nelson introduces "hypertext (1070s) BITnet, CSNet (1983) Paul Mockapetris invents DNS name server (1986) NSFnet eventually becomes internet (1989) Tim Berners-Lee invents the Web (1994) Netscape releases first commercial browser (1997) W3C begins work on XML
COMP 2405 Introduction 6

- What the Internet is: - A world wide network of dissimilar computers world-wide and computer networks - At the lowest level, since 1982, all connections use TCP/IP - TCP/IP hides the differences among devices connected to the Internet t d t th I t t

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

The Internet

COMP 2405 Introduction

Networking Basics
Network Layers Structure of the Internet Router t R t C R t to Router Communication i ti IP Addresses

COMP 2405 Introduction

Network Layers
The most common protocols operating on each layer p g y Application Layer Transport Layer Internetwork Layer Network Interface Layer Physical Layer HTTP, FTP, Telnet TCP, UDP IP Ethernet, PPP bits and bytes

COMP 2405 Introduction

10

Router to Router
Magic Magic of router to router communication

COMP 2405 Introduction

11

IP Addresses
Internetworking Protocol (IP) dominates Internetwork Layer Every packet has to and from addresses IP Addresses are 4 byte numbers Assigned by IANA ( g y (Internet Assigned g Numbers Authority) Usually separated by decimals:
134.117.29.41
COMP 2405 Introduction 12

Application to Application

COMP 2405 Introduction

13

1.1 A Brief Intro to the Internet (continued)


- Domain names - Form: host-name domain-names host name.domain names e.g. scs.carleton.ca people.scs.carleton.ca l l t - First domain is the smallest; last is the largest - Last domain specifies the type of organization or country (e.g. .com, .ca, .za) - Fully qualified domain name - the host name and all of th d d ll f the domain names i
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.1 A Brief Intro to the Internet (continued)


- DNS servers - convert fully qualified domain names to IP addresses (like a phonebook maps peoples names to phone #s)

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Example DNS translation


In theory you could substitute the looked up IP address for the domain http://people.scs.carleton.ca/~ldnel/2405winter2011 http://134.117.29.41/~ldnel/2405winter2011

COMP 2405/2005 Introduction

16

Example DNS translation


http://people.scs.carleton.ca/~ldnel/2405winter2011 http://134.117.29.41/~ldnel/2405winter2011

COMP 2405/2005 Introduction

17

Example DNS translation p


Because server, apache in this case, get to see the actual domain, a simple Substitution does not always work (i.e. server redirects based on seeing actual domain http://www.scs.carleton.ca/ http://134.117.29.40/

COMP 2405/2005 Introduction

18

1.1 A Brief Intro to the Internet (continued)

- Problem: By the mid-1980s, several different protocols had been invented and were being used on the Internet, all with different user interfaces ( (Telnet, FTP, Usenet, mailto) , , , )

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.2 The World-Wide Web


- A possible solution to the proliferation of different protocols being used on the Internet - Origins - Tim Berners-Lee at CERN proposed the Web in 1989 - Purpose: to allow scientists to have access to many databases of scientific work through their own computers - Document form: hypertext - Pages? Documents? Resources? - Well call them documents We ll - Hypermedia more than just text images, sound, etc.
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.2 The World-Wide Web e o d de eb

- Web or Internet? - The Web uses one of the protocols h protocols, http, that runs on the Internet--there are several others (telnet, mailto, etc ) etc.)

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.3 Web Browsers


- Mosaic - NCSA (Univ. of Illinois), in early 1993 - First to use a GUI, led to explosion of Web use - Initiall for X Windo s under UNIX b t was Initially X-Windows, nder UNIX, but as ported to other platforms by late 1993 - Browsers are clients - always initiate, servers initiate react (although sometimes servers require responses) - Most requests are for existing documents, using HyperText Transfer Protocol (HTTP) - But some requests are for program execution, with the output being returned as a document

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Browsers
Browsers are in competition and dont all behave the don t same Browsers may or may not comply to standards Browser versions try to evolve towards standards but dont want to break existing sites (conflict)
See following site for browser usage stats: http://www.w3schools.com/browsers/browsers_stats.asp
COMP 2405 Introduction 23

Browsers Browsers
Internet Explorer 8, for example, uses a l compatibility mode to emulate IE 7 for websites that break under the IE8 standards mode Attempt to move forward towards standards but keep old sites from breaking
Moral: Test with many configurations and settings

COMP 2405 Introduction

24

1.4 Web Servers


- Provide responses to browser requests, either existing documents or dynamically built documents - Browser-server connection is now maintained through more than one request-response cycle

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.4 Web Servers (continued)


- All communications between browsers and servers use Hypertext Transfer Protocol (HTTP) - Web servers run as background processes in the operating system - M it a communications port on the h t Monitor i ti t th host, accepting HTTP messages when they appear - All current Web servers came from either 1. The original from CERN 2. The second one, from NCSA - Web servers have two main directories: 1. Document root (servable documents) 2. Server root (server system software)
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.4 Web Servers (continued) ( )


- Apache (open source, fast, reliable) source fast - Began as the NCSA server, httpd - Maintained by editing its configuration file

- IIS (Microsoft) - Maintained through a program with a GUI interface


Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Servers
Apache has about market share Microsoft IIS is runner up with Other servers make up last

COMP 2405 Introduction

28

URL
URL Uniform Resource Locator URI Uniform Resource Identifier Browsers use URLs to locate resources where is the Domain Name & Server

COMP 2405 Introduction

29

URL
Most URLs locate a resource on a path

COMP 2405 Introduction

30

What is a resource?
Anything accessible via the Web Static St ti resources d t change f dont h from request t to request (HTML document or image) Dynamic resources may change based on: y y g changing data source, input, time of day
COMP 2405 Introduction 31

Ports
Every address has ports (aka mailboxes) Certain ports (0-1024) are reserved for standard services
20: File Transfer Protocol (FTP) 22 S 22: Secure Sh ll (SSH) Shell 23: Telnet 25: Simple Mail Transfer Protocol (SMTP) 80: Hypertext Transfer Protocol (HTTP)
COMP 2405 Introduction 32

URLs and Ports


A service must be contacted on its port Even standard services can be moved
(e.g. HTTP on 8000 instead of 80)

In URLs: http://epsilon10.ca:8000/~student/index.html Ports are separated with a colon in the location


COMP 2405 Introduction 33

1.6 Multipurpose Internet Mail Extensions (MIME) ( )


- Originally developed for email - U d t specify t th b Used to if to the browser th f the form of a file f fil returned by the server (attached by the server to the beginning of the document) - Type specifications - Form: type/subtype - Examples: text/plain, text/html, image/gif, image/jpeg - Server gets type from the requested file names name s suffix (.html implies text/html) - Browser gets the type explicitly from the server
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.6 Multipurpose Internet Mail p p Extensions (MIME)

- Experimental types p yp - Subtype begins with xe.g e g., video/x-msvideo id / id - Experimental types require the server to send a helper application or plug-in so the browser can deal with the file
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

HTTP
HyperText Transfer Protocol Implements a request-response model used by all web communications Defines format for requests and responses

COMP 2405 Introduction

36

HTTP Requests
- Form: HTTP method d th d domain part of URL HTTP ver. i t f Header fields blank line Message body - An example of the first line of a request:
GET /cs.uccp.edu/degrees.html HTTP/1.1

COMP 2405 Introduction

Source: Sebesta Programming the World Wide Web 6th ed 37 Addison Wesley Longman inc

1.7 The HyperText Transfer Protocol yp

- Most commonly used methods:


GET - Fetch a document POST - Execute the document,

using the data in

body y HEAD - Fetch just the header of the document PUT - Store a new document on the server DELETE - Remove a document from the server

1.7 The HyperText Transfer Protocol


(continued) - Response p

Phase

- Form: Status line Response header fields blank line Response body - Status line format: HTTP version status code explanation
HTTP/1.1 - Example: HTTP/1 1 200 OK

(Current version is 1.1)

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

HTTP Responses
Header and Body separated by empty line Header must state content-type Example:
HTTP/1.0 200 OK Date: Fri, 27 Aug 2004 10:05:30 GMT Server: Apache/1 2 13 (Linux) Apache/1.2.13 Last-Modified: Thu, 26 Aug 2004 20:14:26 GMT Content-Length: 2523 Content-Type: text/html Content T pe te t/html <html> <head> <title>COMP 2405 Internet Applications</title> ...
COMP 2405 Introduction Source: Sebesta Programming the World Wide Web 6th ed 40 Addison Wesley Longman inc

Response Code
HTTP/1.0 200 OK

Response may come with a code number:


1xx 2xx 3xx 4xx 5xx = = = = = information success redirection client error (e.g. common 404 Not Found error) server error

COMP 2405 Introduction

41

1.7 The HyperText Transfer Protocol


(continued) - An example of a complete response header:
HTTP/1.1 200 OK Date: Sat, 25 July 2009 20:15:11 GMT Server: Apache /2.2.3 (CentOS) Last-modified: Tues, 18 May 2004 16:38:38 GMT Etag: "1b48098-16a-3dab592dc9f80" Accept-ranges: bytes Content-length: 364 Connection: close Content-type: text/html, charset=UTF-8

- Both request headers and response headers must be followed by a blank line

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Basic HTTP Transaction Basic


Browser 1. 1 Browser/Client sends HTTP request for iommi.html

3. Browser scans iommi.html for other resources

2. Server sends HTTP reply containing iommi.html

Client Server
COMP 2405 Introduction 43

Basic HTTP Transaction Basic


Browser 3. 3 Browser/Client sends HTTP request for tony.jpg

4. Server sends HTTP reply containing tony.jpg

Client Server
COMP 2405 Introduction 44

Basic HTTP Transaction Basic


Browser 5. 5 Browser/Client sends HTTP request for guitar.jpg

6. Server sends HTTP reply containing guitar.jpg

Client Server
COMP 2405 Introduction 45

Basic HTTP Transaction Basic


7. Browser uses all three resources t render the original to d th i i l requested page iommi.html

Q. Could the client and server be the same machine? Ans. Yes

Client Server
COMP 2405 Introduction 46

Web Applications
Internet (or web) applications are online applications ( ) pp pp Users access via web browsers Distinct from web sites serving only static content Examples:
Fill out an online registration form (writing your registration information to a database) Make an online purchase ( (validating y g your credit card, logging the transaction) , gg g ) Request a stock chart for a given time range (dynamically generating the image)

COMP 2405 Introduction

47

Web Application
1. 1 2. 3. 3 4. 5. Client makes HTTP request to Server Server notes resource is a PHP program Server runs PHP program S Server gets result Server sends HTTP Response

COMP 2405 Introduction

48

Web Application

COMP 2405 Introduction

49

1.9 The Web Programmers Toolbox


- XHTML - To describe the general form and layout of documents - An XHTML document is a mix of content and controls - Controls are tags and their attributes - Tags often delimit content and specify something about how the content should be arranged in the document - Attributes provide additional information about the content of a tag

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.9 The Web Programmers Toolbox Programmer s

- Tools for creating XHTML documents - XHTML editors - make document creation easier - Shortcuts to typing tag names, spell-checker, - WYSIWYG XHTML editors - Need not know XHTML to create XHTML documents d t

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.9 The Web Programmers Toolbox


(continued) - XML - A meta-markup language - Used to create a new markup language for a particular purpose or area -B Because the t th tags are designed f a specific d i d for ifi area, they can be meaningful - No presentation details - A simple and universal way of representing and transmitting data the can be represented as text
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.9 The Web Programmers Toolbox


(continued)

- JavaScript - A client-side XHTML-embedded scripting language - O l related t J Only l t d to Java th through syntax h t - Dynamically typed and not object-oriented - Provides a way to access elements of XHTML documents and dynamically change them
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Browsers and Javascript


Javascript runs on most but not all browsers and may behave differently on each Javascript capability can be turned on or off by the browser user Javascript might run differently on local file compared to server obtained file
Moral: Test with many configurations and settings

COMP 2405 Introduction

54

1.9 The Web Programmers Toolbox


(continued) - Flash - A system for building and displaying text, graphics, sound, interactivity, and animation (movies) - Two parts: 1. Authoring environment 2. Player y - Supports both motion and shape animation - Interactivity is supported with ActionScript
Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

1.9 The Web Programmers Toolbox g


(continued)

- PHP - A server-side scripting language - Similar to JavaScript - Great for form processing and database access through the Web

Source: Sebesta Programming the World Wide Web 6th ed Addison Wesley Longman inc

Technologies we will Examine


XHTML (HTML) CSS Cascaded Style Sheets Javascript J i t XML Apache PHP MySQL
57

COMP 2405 Introduction