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

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-Champaign xllora@uiuc.edu

Where did we leave it? • A very biased review of the web • The tipping point • The old ways • An emerging ecology • Review the landscape GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 2

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 GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 3

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 Llorà © Spring 2007 4

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. GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 5

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 [0-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) GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 6

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.XXX (X a number between 0-255) – Allow sub network partition GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 7

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 Llorà © Spring 2007 8

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 GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 9

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/some/path/to/somewhere Protocol: http Host name or IP: www.ncsa.uiuc.edu Port: 80 Path to the resource: some/path/to/somewhere GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 10

Interacting over HTTP • Sending extra information http://www.ncsa.uiuc.edu:80/some/path/to/somewhere?name= potato&age=10 • 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 Llorà © Spring 2007 11

A simple example <html> <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> </html> GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 12

The simple browser 1. You type a url (http://www.google.com) 2. DNS engaged to get the IP 3. ARP to get a MAC address 4. Encapsulate the HTTP request on a TCP/IP connection 5. Send it to the server to the 80 port 6. Wait for a response 7. Process the page 8. Render the page GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 13

The simple server 1. Listen to port 80 2. Get a request for a URL 3. Establish the connection with the requester 4. Look for the URL 5. Pack the content if available 6. Send the response back 7. Listen again GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 14

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" value=”Submit"> </form> And the browser rendered… GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 15

The modified browser 1. You type a url (http://www.google.com) 2. DNS engaged to get the IP 3. ARP to get a MAC address 4. Encapsulate the HTTP request and parameters on a TCP/IP connection 5. Send it to the server to the 80 port 6. Wait for a response 7. Process the page 8. Render the page GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 16

The modified server 1. Listen to port 80 2. Get a request for a URL 3. Establish the connection with the requester 4. Look for the URL 5. Assemble and pack the content given the provided parameters if available 6. Send the response back 7. Listen again GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 17

The overall picture Web server Listener (Port 80) Request Parsing Response Content Content Ensemble retrieval Generation Application Static Application Logic Content Data GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 18

What will we do in the next lecture? • Storage concepts • Introduction to relational data bases – Data bases – Tables – Normalization – Transactions – Querying data GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 19

Something to think about Read • http://www.garykessler.net/library/tcpip.html Homework: Read and be familiar with • http://www.w3schools.com/sql/sql_intro.asp GE/IE 498 ECI - Spring 2007 Xavier Llorà © Spring 2007 20

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

0 comments

Notes on slide 1

Favorites, Groups & Events