1. Introduction to Web Programming ICS213, 1 / 2011 Dr. Seung Hwan Kang

2. 2 Outline 1.1 A Brief Introduction to the Internet 1.2 The World Wide Web 1.3 Web Browsers 1.4 Web Servers 1.5 Uniform Resource Locators (URL) 1.6 Multipurpose Internet Mail Extensions (MIME) 1.7 The Hypertext Transfter Protocol (HTTP) 1.8 Security 1.9 The Web Programmer’s Toolbox 2

3. 3 1.1 A Brief Introduction to the Internet 1.1.1 Origins – Advanced Research Projects Agency Network (ARPANET) - late 1960s and early 1970s Network reliability For ARPA-funded research organizations BITnet, CSnet - late 1970s & early 1980s email and file transfer for other institutions – National Science Foundation internet (NSFnet) - 1986 Originally for non-DOD (Department of Defense) funded places Initially connected five supercomputer centers By 1990, it had replaced ARPAnet for non-military uses Soon became the network for all (by the early 1990s) – NSFnet eventually became known as the Internet 3

4. 4 1.1 A Brief Introduction to the Internet 1.1.2 What the Internet is: A world-wide network of computer networks At the lowest level, since 1982, all connections use TCP/IP TCP/IP hides the differences among devices connected to the Internet 4

5. 5 1.1 A Brief Introduction to the Internet 1.1.2 What the Internet is: (cont’d) Transmission Control Protocol (TCP) Provides – Error-free data transportation – In-order delivery (data will always arrive in the order in which it was sent) – Unsegmented data stream (can dribble out data in any size at any time) In networking terms, the HTTP (HyperText Transfer Protocol) is layered over TCP. HTTP uses TCP to transport its message data. Likewise, TCP is layered over IP(Internet Protocol) 5

6. 6 1.1 A Brief Introduction to the Internet 1.1.3 Internet Protocol (IP) Addresses – Every node has a unique numeric address – Form: 32-bit binary number New standard, IPv6, has 128 bits (1998) Organizations are assigned groups of IPs for their computers 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) 6

7. 7 1.1 A Brief Introduction to the Internet 1.1.4 Domain Names Form: host-name.domain-names First domain is the smallest; last is the largest Last domain specifies the type of organization Fully qualified domain name - the host name and all of the domain names DNS (Domain Name System) servers - convert fully qualified domain names to IPs 7

8. 8 1.1 A Brief Introduction to the Internet 1.1.4 Domain Names (cont’d) 8 Figure 1.1 Domain Name Conversion

9. 9 1.1 A Brief Introduction to the Internet Client and Server Clients and Servers are programs that communicate with each other over the Internet A Server runs continuously, waiting to be contacted by a Client – Each Server provides certain services – Services include providing web pages A Client will send a message to a Server requesting the service provided by that server – The client will usually provide some information, parameters, with the request 9

10. 10 1.1 A Brief Introduction to the Internet 1. Browser requests for a particular HTML file 2. The server locates the file and sends it to the browser 3. The browser displays the file BROWSER SERVER Client and Server - Static HTML pages 172.17.28.45 hello.htm

11. 11 1.1 A Brief Introduction to the Internet 1. Browser sends request to the server 2. The server locates the CGI program and passes the request information 5. The browser displays the data BROWSER SERVER 3. The CGI program processes the request and sends data to the server 4. The server sends the data to the browser Client and Server - Static CGI Scripts hello.cgi

12. 12 1.1 A Brief Introduction to the Internet 1. Browser requests to the server 2. The server checks the file and executes the embedded scripts 4. The browser displays the document BROWSER SERVER 3. This code is passed to the appropriate interpreter then it generates the final formatted document Client and Server – Server-side Scripting hello.php

13. 13 1.2 The World-Wide Web A possible solution to the proliferation of different protocols being used on the Internet 1.2.1 Origins – Tim Berners-Lee at CERN (The European Organization for Nuclear Research) proposed the Web in 1989 Purpose: to allow scientists to have access to many databases of scientific work through their own computers http://www.w3.org/History/1989/proposal.html – Document form: hypertext – Pages? Documents? Resources? We’ll call them documents – Hypermedia – more than just text – images, sound, etc. 13

14. 14 1.2 The World-Wide Web 1.2.2 Web or the Internet? The Web uses one of the protocols, HTTP, that runs on the Internet--there are several others (telnet, FTP, mailto, etc.) The Semantic Web - “Machine-Understandable information” by Tim Berners-Lee (1998) 14 The Semantic Web as a “layer cake” (Source: James Hendler, 2001 p. 30)

15. 15 1.3 Web Browsers Browsers are clients - always initiate, servers react (although sometimes servers require responses) Mosaic - NCSA (The National Center for Supercomputing Applications as a unit of the Univ. of Illinois), in early 1993 – First to use a GUI (Graphic User Interface), led to explosion of Web use – Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993 Most requests are for existing documents, using HTTP – But some requests are for program execution, with the output being returned as a document 15

16. 16 Mosaic Beta version 0.4, Sep 9 1994

17. 17 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 All communications between browsers and servers use HTTP 17

18. 18 1.4 Web Servers (cont’d) 1.4.1 Web Server Operation Web servers run as background processes in the operating system – Monitor a communication port on the host, accepting HTTP messages when it appears All current Web servers came from either 1.The original from CERN 2.The second one, from NCSA 18

19. 19 1.4 Web Servers (cont’d) 1.4.2 General Server Characteristics Web servers have two main directories: 1.Document root (servable documents) 2.Server root (server system software) Document root is accessed indirectly by clients – Its actual location is set by the server configuration file – Requests are mapped to the actual location Virtual document trees Virtual hosts Proxy servers Web servers now support other Internet protocols 19 C:\xampp\apache\ conf\httpd.conf

20. 20 1.4 Web Servers (cont’d) 1.4.3 Apache Apache (open source, fast, reliable) – Directives (operation control): ServerName ServerRoot ServerAdmin, DocumentRoot Alias Redirect DirectoryIndex UserDir http://httpd.apache.org/ 20

21. 21 1.4 Web Servers (cont’d) 1.4.4 IIS Internet Information Server -Operation is maintained through a program with a GUI interface 21

22. 22 1.5 Uniform Resource Locators (URLs) 1.5.1 URL Formats scheme:object-address – The scheme is often a communications protocol, such as http, gopher, news, telnet or ftp For the http protocol, the object-address is: fully qualified domain name/doc path For the file protocol, only the doc path is needed 22

23. 23 1.5 Uniform Resource Locators 1.5.1 URL Formats Host name may include a port number, as in zeppo:80 (80 is the default) URLs cannot include spaces or any of a collection of other special characters (semicolons, colons,...) e.g. http://ic.payap.ac.th/index.php 23

24. 24 1.5 Uniform Resource Locators 1.5.2 URL Paths The doc path may be abbreviated as a partial path – The rest is furnished by the server configuration // C:\xampp\apache\conf\httpd.conf DocumentRoot "C:\xampp\htdocs" If the doc path ends with a slash, it means it is a directory http://www.payap.ac.th/ http://cis.payap.ac.th/index.php

25. 25 1.6 Multipurpose Internet Mail Extensions (MIME) Originally developed for e-mail Used to specify to the browser the form of a file returned by the server (attached by the server to the beginning of the document) 25

26. 26 1.6 Multipurpose Internet Mail Extensions (MIME) 1.6.1 Type specifications – Form: type/subtype – Examples: text/plain, text/html, image/gif, image/jpeg Server gets type from the requested file name’s suffix (.html implies text/html) C:\xampp\apache\conf\mime.types Browser gets the type explicitly from the server

27. 27 1.6 Multipurpose Internet Mail Extensions (MIME) 1.6.2 Experimental Document Types Subtype begins with x- e.g., video/x-msvideo Experimental types require the server to send a helper application or plug-in so the browser can deal with the file 27

28. 28 1.7 The Hypertext Transfer Protocol (HTTP) The protocol used by ALL Web communications Invented by Tim Berners-Lee in 1990 RFC 1945 (1996) - HTTP/1.0 RFC 2068 (1997) - HTTP/1.1 RFC 2616 (1999) - HTTP/1.1 (update to 2068) 28

29. 29 1.7 HTTP (cont’d) Features of HTTP Application level, client-server protocol Primarily for distributed hypermedia systems Flexible - thus has many other uses - e.g. Name servers Distributed & collaborative document management systems HTTP is small and fast Minimal performance overhead Easy to implement HTTP is a stateless protocol Each request is an independent transaction - unrelated to any previous requests (unlike session-based protocols, e.g. FTP) Advantage Simplifies server design - information about previous transactions does not need to be stored Disadvantage More information must be included in each request 29

30. 30 1.7 HTTP (cont’d) HTTP Operation On the Internet HTTP usually uses TCP/IP connections TCP Port 80 is the default (though others can be specified) HTTP uses a Request/Response paradigm Client establishes a connection to the server, and sends it a request Server responds to the request by generating a response (which may or may not contain contents) 30

31. 31 1.7.1 The Request Phase Request Phase Form: 1.HTTP method domain part of URL HTTP version 2.Header fields 3.blank line 4.Message body An example of the first line of a request: GET /degrees.html HTTP/1.1 31

32. 32 1.7.1 The Request Phase 32 Table 1.1 HTTP Request Methods

33. 33 1.7.1 The Request Phase HTTP Headers Four categories of header fields: General, request, response, & entity Common request fields: Accept: text/plain Accept: text/* If-Modified_since: date 33

34. 34 1.7.1 The Request Phase HTTP Headers (cont’d) Common response fields: Content-length: 488 Content-type: text/html Can communicate with HTTP without a browser > telnet blanca.uccs.edu http GET /respond.html HTTP/1.1 Host: blanca.uccs.edu 34

35. 35 1.7.2 The Response Phase Form: Status line Response header fields blank line Response body Status line format: HTTP version status code explanation e.g. HTTP/1.1 200 OK (Current version is 1.1) 35

36. 36 1.7.2 The Response Phase (cont’d) Status code is a three-digit number; first digit specifies the general status 1 => Informational 2 => Success 3 => Redirection 4 => Client error 5 => Server error The header field, Content-type, is required 36

37. 37 1.7.2 The Response Phase (cont’d) 200 : OK 201 : Created 202 : Accepted 204 : No Content 301 : Moved Permanently 302 : Moved Temporarily 400 : Bad Request 401 : Unauthorized 403 : Forbidden 404 : Not Found 500 : Internal Server Error 503 : Service Unavailable 504: Gateway Timeout 505: HTTP Version Not Supported 37

38. 38 1.7.2 The Response Phase (cont’d) HTTP Response Example HTTP/1.1 200 OK Date: Tues, 18 May 2004 16:45:13 GMT Server: Apache (Red-Hat/Linux) Last-modified: Tues, 18 May 2004 16:38:38 GMT Etag: "841fb-4b-3d1a0179" Accept-ranges: bytes Content-length: 364 Connection: close Content-type: text/html, charset=ISO-8859-1 Both request headers and response headers must be followed by a blank line 38

39. 39 1.8 Security The security issues for security breaches are as follows: 1.Privacy – it must not be possible for the private information to be stolen while on its way to the server. e.g. credit card number 2.Integrity – it must not be possible for the private information to be modified on its way to the server. e.g. encrypted data instead of $1,000 3.Authentication – it must be possible for both the client and the server to be certain of each other’s identity. 4.Nonrepudiation – it must be possible to legally prove that the message was actually sent and received.

40. 40 1.9 The Web Programmer’s Toolbox Document languages and programming languages that are the building blocks of the web and web programming (X)HTML Plug-ins Filters XML JavaScript Java, Perl, Ruby, PHP 40

41. 41 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.1 Overview of (X)HTML To describe the general form and layout of documents An (X)HTML 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 41

42. 42 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.2 Tools of Creating (X)HTML documents XHTML editors - make document creation easier Shortcuts to typing tag names, spell-checker, WYSIWYG (what-you-see-is-what-you-get) XHTML editors Need not know XHTML to create XHTML documents 42

43. 43 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.3 Plug-ins and Filters Plug ins Integrated into tools like word processors, effectively converting them to WYSIWYG XHTML editors Filters Convert documents in other formats to XHTML 43

44. 44 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.3 Plug-ins and Filters (cont’d) Advantages of both filters and plug-ins: – Existing documents produced with other tools can be converted to XHTML documents – Use a tool you already know to produce XHTML Disadvantages of both filters and plug-ins: – XHTML output of both is not perfect - must be fine tuned – XHTML may be non-standard – You have two versions of the document, which are difficult to synchronize 44

45. 45 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.4 Overview of XML A meta-markup language Used to create a new markup language for a particular purpose or area Because the tags are designed for a specific area, they can be meaningful No presentation details A simple and universal way of representing data of any textual kind 45

46. 46 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.5 JavaScript A client-side HTML-embedded scripting language Only related to Java through syntax Dynamically typed and not object-oriented Provides a way to access elements of HTML documents and dynamically change them 46

47. 47 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.6 Overview of Java General purpose object-oriented programming language Based on C++, but simpler and safer Our focus is on applets, servlets, and JSP (JavaServer Pages) 47

48. 48 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.7 Overview of Perl Provides server-side computation for HTML documents, through CGI Perl is good for CGI programming because: – Direct access to operating systems functions – Powerful character string pattern-matching operations – Access to database systems Perl is highly platform independent, and has been ported to all common platforms Perl is not just for CGI 48

49. 49 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.9 Overview of PHP A server-side scripting language An alternative to CGI programming Similar to JavaScript Great for form processing and database access through the Web 49

50. 50 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.9 Overview of Ruby A server-side scripting language An alternative to CGI Similar to PHP but it is pure object-oriented Great for form processing and database access through the Web 50

51. 51 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.10 Overview of Rails Ruby on Rail is based on Model-View-Controller (MVC) architecture for applications, which clearly separates the presentation and the data model from program logic.

52. 52 1.9 The Web Programmer’s Toolbox (cont’d) 1.9.11 Overview of Ajax Asynchronous JavaScript + XML (not AJAX) An enriched Web experience for those using a certain category of Web interactions e.g. Google API (http://code.google.com) 52

53. 53 TIOBE Programming Community Index for June 2010 (source: http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html)

54. 54 References 1.Berners-Lee, T. (1989) Information Management: A Proposal, http://www.w3.org/History/1989/proposal.html Accessed: 27 November 2003. 2.Berners-Lee, T., Hendler, J. & Lassila, O. (2001) Agents and the Semantic Web, http://www.cs.umd.edu/users/hendler/AgentWeb.html Accessed: 27 November 2003. 3.Berners-Lee, T. (1989) Semantic Web Road map, http://www.w3.org/DesignIssues/Semantic.html Accessed: 27 November 2003. 4.Google Code (2010) Google, http://code.google.com/ Accessed: 1 March 2010.http://code.google.com/ 5.Hendler, J. (2001) Agents and the Semantic Web, The IEEE Intelligent Systems, (Mar./Apr.), pp. 30-37. 6.Robert W. Sebesta (2008) Programming the World Wide Web, 4th edn, Pearson/Addison Wesley. (Chapter 1) 7.TIOBE SOFTWARE ( 2010) TIOBE Programming Community Index for May 2011, http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html Accessed: 06 June 2011. http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html 54