Enterprise Collaboration and
Innovation Support Systems
(GE/ IE 498 ECI): 

The Schema of a Simple
Web Application

Xavier...
Where did we leave it? 

- A very biased review of the web
- The tipping point

- The old ways

- An emerging ecology

- R...
What's the plan for today? 

- Get our hands dirty and cover the basic notions of web
applications

- Definitions

- A sim...
Basic notions

- Connecting machines

— The physical layer

— The network layer

- The Internet layer

- The transport lay...
The physical layer

- Different mediums
— Cable
- Optic fiber

- Different hardware,  speeds,  reach,  etc. 
- Different t...
The network layer

- Each machine is addressed by a physical address
hardcode on the network device
— Media access control...
The Internet layer (IP)

* Software layer to handle the communication
- Common language

~ IP (Internet Protocol) sends pa...
Basic communications modes on IP

- IP provides two modes of communication (Transport Layer)
— Connection oriented:  TCP (...
Naming machines

- Numbering address not very human friendly

- Start adding names to machines using a given
convention

-...
Hypertext Transfer Protocol

- A service (usually running on a system port 80)

- The basic idea:  you request a resource ...
Interacting over HTTP

- Sending extra information

http:  / / www. ncsa.  uiuc. edu:80/ somel Qath/  to/  somewhere? name...
A simple example

<htnfl>

<head>

<title>A simple HTML page</ title>
</ head>
<body>

<p>Blah,  blah,  blah,  blah,  blah,...
The simple browser

You type a url (http: //www. google. com)
DNS engaged to get the IP

ARP to get a MAC address

Encapsu...
The simple server

Listen to port 80
Get a request for a URL
Establish the connection with the requester

Look for the URL...
Remember the tipping point

- A simple piece of HTML code

<form method= "post" action= "foo. cgi">
Name:  <input name= "n...
The modified browser

You type a url (http: //www. google. com)
DNS engaged to get the IP

1.
2
3. ARP to get a MAC addres...
The modified server

Listen to port 80
Get a request for a URL

Look for the URL

Assemble and pack the content given the ...
The overall picture

I ml web sewer l
.  Listener I

" (Port 80) I

i I

l

Request | 

Parsing | 

7 _ T I

Response . _‘...
What will we do in the next lecture? 

- Storage concepts

- Introduction to relational data bases

— Data bases

— Tables...
Something to think about

- Read
httg:  / / www. gag¢kessler. net/  libram/ tcQip. html

- Homework:  Read and be familiar...
Upcoming SlideShare
Loading in …5
×

GE498-ECI, Lecture 5: The schema of sinple web application

1,764 views

Published on

GE498-ECI, Lecture 5: The schema of sinple web application

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,764
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GE498-ECI, Lecture 5: The schema of sinple web application

  1. 1. Enterprise Collaboration and Innovation Support Systems (GE/ IE 498 ECI): The Schema of a Simple Web Application Xavier Lloré Illinois Genetic Algorithms Lab & National Center for Supercomputing Applications University of Illinois at Urbana-Champalgn xllo: a@uiuc. edu
  2. 2. Where did we leave it? - A very biased review of the web - The tipping point - The old ways - An emerging ecology - Review the landscape GENE 498 ECI « Spring 2007 Xavier Lloré -13 Spring 2007 2
  3. 3. What's the plan for today? - Get our hands dirty and cover the basic notions of web applications - Definitions - A simple model architecture - Protocols - Generating content - Getting some interaction - Goal: Learn the basic to be able to forget them GEJIE 493 ECI « Spring 2007 Xavier Llor'a III Spring 2007 3
  4. 4. Basic notions - Connecting machines — The physical layer — The network layer - The Internet layer - The transport layer - Service and appliaction layers GE/ IE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 4
  5. 5. The physical layer - Different mediums — Cable - Optic fiber - Different hardware, speeds, reach, etc. - Different topologies, bus, ring, start, etc. - Ethernet has popularized the bust conceptual topology. GENE 498 ECI « Spring 2007 Xavier Llor'a It: Spring 2007 5
  6. 6. The network layer - Each machine is addressed by a physical address hardcode on the network device — Media access control address (MAC) — XX-XX-XX-XX-XX-XX (Where X is and hexadecimal value [O-9A-F]) - Address Resolution Protocol (ARP) is the method for finding a host's hardware address when only its network layer address is known. - Machines are connected throw Ethernet networks (Original a bus, now switched but still simulating the bus behavior) GENE 498 ECI « Spring 2007 Xavier LlcIr'a ‘ti Spring 2007 6
  7. 7. The Internet layer (IP) * Software layer to handle the communication - Common language ~ IP (Internet Protocol) sends packages of information (header and content) — Logical addressing (IPv4 address). XXX. XXX. XXX. X)(X (X a number between 0-255) - Allow sub network partition GENE -113 EC : ..'JV'l7‘. ‘. 2C| ;T| '.’ Xavier Llclré ~11 Spring 1007
  8. 8. Basic communications modes on IP - IP provides two modes of communication (Transport Layer) — Connection oriented: TCP (Transmission Control Protocol) Connection less: UDP (User Datagram Protocol) - Ports facilitate having multiple services/ communications in a given IP address - 1-1024: system service ports 1024-and above: available ports with - A socket is the analogy of a connection between machines (Running on IP/ TCP or IP/ UDP) - ARP is usually used to translate IP addresses to MAC addresses GE/ IE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 8
  9. 9. Naming machines - Numbering address not very human friendly - Start adding names to machines using a given convention - The domain name system (DNS) is in charge to translate names into IP addresses GENE 498 ECI « Spring 2007 Xavier Ll0r'a ‘:1 Spring 2007
  10. 10. Hypertext Transfer Protocol - A service (usually running on a system port 80) - The basic idea: you request a resource to a web server, you get it back - Provides basic functionalities (8 basic ones: HEAD, GET, POST. ..) - Need to universally identify resources over the net - RFC 2396: Uniform Resource Identifiers (URI), Generic Syntax — RFC 2732: Amendment format for IPv6 Addresses - URI format http: / / www. ncsa. uiuc. edu:80/ somel Qath/ to/ somewhere Protocol: http Host name or IP: www. ncsa. uiuc. edu Port: 80 Path to the resource: somel path/ to/ somewhere GENE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 10
  11. 11. Interacting over HTTP - Sending extra information http: / / www. ncsa. uiuc. edu:80/ somel Qath/ to/ somewhere? name= gotato&age=1O - Gotcha! A way to annotate a resource with extra information (parameters of a call) - Name: potato - Age: 10 - Yes, but what about the content? - Hypertext = content + added presentation markups = HTML GE/ IE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 11
  12. 12. A simple example <htnfl> <head> <title>A simple HTML page</ title> </ head> <body> <p>Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah. </p> </ body> </ htnfl> GE/ IE 498 ECI « Spring 2007 Xavier Llora -13 Spring 2007 12
  13. 13. The simple browser You type a url (http: //www. google. com) DNS engaged to get the IP ARP to get a MAC address Encapsulate the HTTP request on a TCP/ IP connection Send it to the server to the 80 port Wait for a response Process the page 9°. “9‘! -": “E”! "." Render the page GENE 498 ECI « Spring 2007 Xavier Llor'a III Spring 2007 13
  14. 14. The simple server Listen to port 80 Get a request for a URL Establish the connection with the requester Look for the URL Pack the content if available Send the response back . “?‘! -": “E-“’! ".“ Listen again GENE 493 ECI — Spring 2007 Xavier Llora ‘III Spring 2007 14
  15. 15. Remember the tipping point - A simple piece of HTML code <form method= "post" action= "foo. cgi"> Name: <input name= "name"><br> Age: <input name= " name " ><br> <input type= "submit" va1ue= ”Submit"> </ form> lAnd the browser rendered. .. Name: Age: (’suTinm‘) GE/ IE 498 ECI « Spring 2007 Xavier Llora 0 Spring 2007 15
  16. 16. The modified browser You type a url (http: //www. google. com) DNS engaged to get the IP 1. 2 3. ARP to get a MAC address 4 Encapsulate the HTTP request and parameters on a TCP/ IP connection Send it to the server to the 80 port Wait for a response Process the page 9°. “?‘E-" Render the page GENE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 16
  17. 17. The modified server Listen to port 80 Get a request for a URL Look for the URL Assemble and pack the content given the provided parameters if available 1. 2 3. Establish the connection with the requester 4 5 6. Send the response back 7. Listen again GENE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 17
  18. 18. The overall picture I ml web sewer l . Listener I " (Port 80) I i I l Request | Parsing | 7 _ T I Response . _‘__ Content Content I T Ensemble ‘ retrieval Generation '‘ I P * I I I Static _l. ,.: _ Al’PIl‘a“°" i4.L+| Application Content I-°3l‘ | Data I __ __ I l __ I G-IIIE -198 EC — Snrng Z037 Xavier Llora ca Spring 2007 '8
  19. 19. What will we do in the next lecture? - Storage concepts - Introduction to relational data bases — Data bases — Tables — Normalization — Transactions - Querying data GENE 498 ECI « Spring 2007 Xavier Llora In Spring 2007 19
  20. 20. Something to think about - Read httg: / / www. gag¢kessler. net/ libram/ tcQip. html - Homework: Read and be familiar with httg: //www. w3schools. com/ sgl/ sgl intro. asp GE/ IE 498 ECI « Spring 2007 Xavier Lloré 0 Spring 2007 ID

×