Introduction to Web Programming - first course

Introduction to Web Programming Vlad Posea [email_address] http://vlad.posea.eu

Course Objectives Understand what is a web application Be able to develop a simple web application Develop the thinking patterns required to adapt to the fast evolution of the web technologies

What I want from you Ask Questions – don’t leave anything unanswered (sometimes I’ll try to ask them for you) Why ask questions? In order to understand something you need to get answers but more important you need to want to get the answers and to know what questions to ask Work individually Why? Learning happens when you work and discover. That is how knowledge is constructed inside your head 

What we’ll study in the course The Web – short history, why it was developed, how it evolved, where is it going How the web works, the HTTP protocol Web technologies Client-side languages (X)HTML JavaScript

What you’ll do in the lab Write web pages using HTML and CSS Develop a web application using the learnt technologies Develop a web page after a designer’s model

How you’ll get points The points you’ll receive will reward your: Understanding at the concepts taught in the course 4p exam + 1p short course tests Skills acquired in the lab – 2.5p individual lab work Skills acquired through individual work & study – 2.5p TO PASS: >=2.5p exam+course tests >=2.5p lab work + homework

How you lose points Cheating – you will get expelled or fail the exam Not performing your work on time – you will lose points for delays Not being there – labs and course tests can’t be re-taken in case of absence

Course plan Introduction & Short history of the web & Structure of the Web; the HTTP protocol; XML, (X)HTML HTML +Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Client-side scripting languages – Introduction to JavaScript Javascript (2)

Lab Plan Show the basic http responses, customize error messages, how to alter http headers Design a HTML page using the basic tags: A, IMG, TABLE, DIV, UL Use CSS to transform the page designed at the previous lab. Use Javascript to validate forms, modify page content using DOM

Short History of the WWW Why is it necessary? The WWW had a very fast evolution The technologies changed very rapidly Innovation almost always brought huge benefits to the innovators In order to innovate you need to understand the evolution of the web You need to understand where the web is going

Before the web Internet was already existing Resources on the internet were found using command line tools like ftp Example: Run ftp program Enter “C host” (connects to a server) Enter username Enter password Ls (lists files) Get file Cd (change directory) There were no links You had to know where the information was

The web vs. the internet “ The Web is an abstract (imaginary) space of information. On the Net, you find computers -- on the Web, you find document, sounds, videos,.... information. On the Net, the connections are cables between computers; on the Web, connections are hypertext links. The Web exists because of programs which communicate between computers on the Net. The Web could not be without the Net. The Web made the net useful because people are really interested in information (not to mention knowledge and wisdom!) and don't really want to have know about computers and cables.” – Tim Berners Lee – the inventor of the web

The invention 1989 – Tim Berners Lee proposes at CERN a way to organize information using hyperlinks 1990 – he develops the first browser – “World Wide Web” 1991 – first web server 1993 – “Date on the declaration by CERN's directors that WWW technology would be freely usable by anyone, with no fees being payable to CERN. A milestone document.”

History of the web 1992-93 – web sites of public and organizing entities – worldbank.org, whitehouse.gov, ripe.net (manages ip’s) 1994 Yahoo! 1994 – the netscape browser 1994 - World Wide Web Consortium (W3C) the organization concerned with standards on the Web 1995 – altavista, e-bay, javascript, HTML ( http://en.wikipedia.org/wiki/HTML ), PHP 1996 - ASP 1997 – flash player 2 – now on 99% on the computers on the web

History of the web 1998 – google 1999 – microsoft passport (way to login with a single identity on multiple web sites) 1999 – rss – rich site summary – get live updates from your favourite sites 1999 – blogs first appeared 2000 – XHTML appears 2001 – wikipedia – now the world’s largest encyclopedia 2004 - facebook

How the web evolved (Amazon) Amazon 1999 – product categories, featured products, accounts, personalization Amazon 2009 – + user centered (what you wanted and what they recommend), blogs, page space better used

Conclusions World wide web was first a way to link text documents It evolved into Providing different kinds of content (images, video) providing services for people (games, answers, news) Providing means for people to create content (wikis, forums, social networking applications, blogs) Providing services for computers The content was first static – text pages that were rarely changed and only by the owner Content became dynamic updated from the server’s database Content became updated real time (without refreshing the page using asynchronous technologies) Content comes from different sources and it’s aggregated on a page During this course we’ll study the technologies that allowed these changes to happen

Client – Server architecture Clients communicate with a single server Server awaits connections Client initiates communication Server receives a request and sends a response Client receives the response and decide whether or not to continue the communication Examples: e-mail, dns, http

Peer to peer architecture There's no server in the network The clients are communicating between them There are no intermediary entities Used primarily in resource sharing Examples: napster, kazaa, direct connect, bitTorrent

Advantages and disadvantages of the Client-Server architecture Advantages Many different types of clients, one common protocol Resources are centralized on a server – easier to find and to distribute Disadvantages Single point of failure (if the server is down the clients don't receive their responses any more) The more clients there are the more crowded the server and the response time is longer

The HTTP Protocol HTTP - Hypertext Transfer Protocol. Client-server protocol Http server – web server Http client – browser Http = protocol used to transmit resources over the internet

HTTP Protocol – Basic Glossary (RFC 2616) Connection - A transport layer virtual circuit established between two programs for the purpose of communication. Message - The basic unit of HTTP communication, transmitted via the connection. Request - An HTTP request message Response - An HTTP response message Resource - A network data object or service that can be identified by a URI (address of a resource) Client - A program that establishes connections for the purpose of sending requests. user agent - The client which initiates a request. These are often browsers, editors, spiders (web-traversing robots), or other end user tools. Server - An application program that accepts connections in order to service requests by sending back responses. inbound/outbound - Inbound and outbound refer to the request and response paths for messages: "inbound" means "traveling toward the origin server", and "outbound" means "traveling toward the user agent"

What is an URL? URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] Examples: http:// www.google.com http:// www.google.com : 80 / ig ? refresh=1 The port 80 is default Hosts are case insensitive Paths are case sensitive Some reserved characters are “encoded” Encoding means representing as hex an ASCII code Example: “ “ = “%20” http://tools.ietf.org/html/rfc2396

Structure of a HTTP Message Request line / Status line Example: GET /index.html HTTP/1.1 GET=Request Method Headers See here Empty line Optional message body

HTTP Request Methods (most important) GET – requests a specific resource (can send parameters that alters resources but it’s better not to) POST – submits data (usually a form) to be processed PUT – uploads a specific resource HEAD – identical to a GET resource but receives only the headers DELETE – deletes a specific resource

Status lines First line of an HTTP response Includes status codes Types of status codes are: 1xx – informational – usually provisional responses 2xx – success 200 Success – standard response when no errors occur 201 Created – resource was created on the server 3xx redirects 301 Moved Permanently – the resource was moved to the next specified URI; the next requests should be made to the new URI

Status codes Types of status codes are: 3xx redirects 302 Found – same behaviour as 303 – redirect code 303 See Other – basic redirect to a new resource (a new GET is required) 4xx Errors 400 Bad Request 401 Not Authorized – some sites require Http authentication 403 Forbidden – the access to the specific resource is denied 404 Not Found – the resource requested is not there

HTTP Headers Used to define characteristics of the data requested or provided Host – name of the server (can be many hosts on a single IP address) Accept – type of resource accepted Content-type – the internet media type of the content ( http://en.wikipedia.org/wiki/Mime_type ) Authorization – data required for authentication Referrer – the link from where we have reached the current page (important in traffic analysis)

HTTP Headers Cache-control – specifies if the content should be cached or not Content-Language Location – implements redirect

User sessions & HTTP HTTP is a stateless protocol; the requests are not connected on the server “ Session support in PHP consists of a way to preserve certain data across subsequent accesses” http://www.php.net/sessions The sessions can’t be implemented at the HTTP level as the protocol hasn’t any “memory” We need to store information about subsequent accesses

Example Send an HTTP Request See the headers sent – use LiveHTTPHeaders https://addons.mozilla.org/en-US/firefox/addon/3829 See the headers received See the body of the response

Results http://google.com/ GET / HTTP/1.1 Host: google.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=aee3d09e6859909c:CR=1: Response: HTTP/1.x 301 Moved Permanently Location: http://www.google.com/ Content-Type: text/html; charset=UTF-8 Date: Tue, 03 Mar 2009 05:59:25 GMT Expires: Thu, 02 Apr 2009 05:59:25 GMT Cache-Control: public, max-age=2592000 Server: gws Content-Length: 219 http://www.google.com/ GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Response: HTTP/1.x 302 Found Location: http://www.google.ro/ Cache-Control: private Content-Type: text/html; charset=UTF-8 Date: Tue, 03 Mar 2009 05:59:25 GMT Server: gws Content-Length: 218

References http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx (images in slides How the web evolved) http://www.w3.org/History.html http://www.w3.org/People/Berners-Lee/FAQ.html

Introduction to Web Programming - first course

In this document