Part 4 Web technologies HTTP CGI PHP Java
Part 4 Web technologies: HTTP, CGI, PHP, Java applets) FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 1
World Wide Web l l l Major application protocol used on the Internet Simple interface Two concepts l l FALL 2005 Point Click CSI 4118 – UNIVERSITY OF OTTAWA 2
Web Components l l l Browser Web server Hypermedia links Document representation Transfer protocol FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 3
Browser l l Application program User’s interface to Web Becomes Web client to fetch information from Web server Displays information for user FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 4
Web Server l l l Running program Stores set of Web documents Responds to request from browser by sending copy of document FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 5
Hypermedia Concept l Web document contains mixture of l l Text Images Selectable pointers to other Web pages Known as hypermedia FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 6
Hypermedia Link On A Web Document l l l Associated with object or area on screen Internally like a symbolic link Advantage l l Can reference document on another computer Disadvantage l FALL 2005 Can become invalid CSI 4118 – UNIVERSITY OF OTTAWA 7
Web Document l l l Called a web page One web page per file Can contain l l l Binary image Text file Text standard l l l FALL 2005 Readable representation ASCII Specifies contents and layout Known as Hypertext Markup Language (HTML) CSI 4118 – UNIVERSITY OF OTTAWA 8
Terminology l Markup language l l FALL 2005 Gives general layout guidelines Does not specify exact placement or format CSI 4118 – UNIVERSITY OF OTTAWA 9
Consequence of Using A Markup Language Web documents use the Hyper. Text Markup Language representation. Instead of specifying a detailed document format, HTML allows a document to contain general guidelines for display, and allows a browser to choose details. Consequently, two browsers may display an HTML document differently. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 10
HTML Details l l Document is free-format Embedded tags give display guidelines Tags often appear in pairs Tag format l l Beginning tag Ending tag <TAGNAME> </TAGNAME> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 11
General Form of HTML Document <HTML> <HEAD> <TITLE> text that forms the document title </TITLE> </HEAD> <BODY> body of the document appears here </BODY> </HTML> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 12
Document Format t. HTML source is free-form t. Previous example equivalent to this <HTML><HEAD><TITLE> text that forms the document title</TITLE></HEAD><BODY>body of the document appears here</BODY></HTML> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 13
Example HTML Tags l Begin paragraph <P> l Line break (force a new line) <BR> l Main heading (largest, boldest font) <H 1> … text … </H 1> l Next heading (next largest) <H 2> … text … </H 2> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 14
Example of HTML Line Break l Input Hello there. <BR>This is an example<BR>of HTML. l Output Hello there. This is an example of HTML. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 15
Example of HTML Line Break (continued) l Input Hello there. <BR>This shows<BR>HTML spacing. l Output Hello there. This shows HTML spacing. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 16
Example of HTML Headings l Input Hello. <BR><H 1>This is a heading</H 1><BR>Back to normal. l Output Hello. This is a heading Back to normal. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 17
Other HTML Features l l l Numbered or unnumbered lists Images Links to other pages FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 18
Images in HTML l l Explicitly denoted as image Specified with image tag Can specify alignment with text Example image tags <IMG SRC=“file_name”> <IMG SRC=“file_name” ALIGN=MIDDLE> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 19
Images in HTML Here is a picture. <IMG SRC=“file_name” ALIGN=MIDDLE> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 20
Links to Other Pages l l l Symbolic representation Embedded in HTML document Browser l l Hides text of link from user Associates link with item on page Makes item selectable Called Uniform Resource Locator (URL) FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 21
General Form of URL protocol : // domain_name : port name of access protocol to use l l / protocol port domain name of number server computer item_name path name of item Only domain name required Defaults l l l FALL 2005 Protocol is http Port is 80 Path is index. html CSI 4118 – UNIVERSITY OF OTTAWA 22
Link in HTML l Link specified in <A> tag l l Applies to successive items Ends with </A> l Called anchor FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 23
Example of Anchor Tag in HTML l Input The text is published by <A HREF=http: //www. prenhall. com> Prentice Hall, </A> one of the larger publishers of Computer Science textbooks. l Produces The text is published by Prentice Hall, one of the larger publishers of Computer Science textbooks. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 24
Use of Client-Server Paradigm l Web server l l l Makes set of pages available Uses port 80 Web client l l l FALL 2005 Called a browser Creates TCP connections to server Sends requests for items CSI 4118 – UNIVERSITY OF OTTAWA 25
Use of Client-Server Paradigm l l Primary protocol used between browser and server known as Hyper. Text Transfer Protocol (HTTP) HTTP requests sent as text (ASCII) l l l FALL 2005 GET: request an item from the server HEAD: request status information about an item POST: send data to the server CSI 4118 – UNIVERSITY OF OTTAWA 26
Use of Client-Server Paradigm l Response from server begins with ASCII header l Status code (200 = handled request) FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 27
Inside a Browser l Main controller l l l Clients l l l Receives input from user Invokes client and interpreter One or more built into browser Uses network to fetch items Interpreter l l FALL 2005 One or more built in Displays items CSI 4118 – UNIVERSITY OF OTTAWA 28
Illustration of a Browser l Browser contains many components FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 29
Alternative Protocol Example l l l File transfer service Protocol is FTP Example URL ftp: //ftp. cs. purdue. edu/pub/comer/netbook/client. c l Can be used in anchor tag FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 30
Other Markup Languages l l l Extensible Markup Language (XML) does not specify layout Tag names can be created as needed Example for a corporate phone book: FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 31
Caching in Browsers l Cache for recently accessed l l l HTML pages Images Item normally fetched from cache User can override HTTP can verify timestamp before fetching new copy FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 32
Types of Web Pages l Static l l l Stored in file Unchanging Dynamic l l FALL 2005 Formed by server Created on demand Output from a program Use Common Gateway Interface (CGI) technology CSI 4118 – UNIVERSITY OF OTTAWA 33
Types of Web Pages (cont) l Active l l FALL 2005 Executed at client Consists of a computer program Can interact with user Use Java technology CSI 4118 – UNIVERSITY OF OTTAWA 34
Summary of Web Document Types Web documents can be grouped into three categories depending on when the information in the document changes. The information in a static document remains unchanged until the author revises the document. The information in a dynamic document can change whenever a server receives a request for the document. Information displayed by an active document can change after the document has been loaded into a browser. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 35
CGI Technology l URL specifies l l Location of Web server CGI program on that server Arguments to program Web server l l FALL 2005 Uses TCP for communication Accepts HTTP request from client Runs specified CGI program Returns output to client CSI 4118 – UNIVERSITY OF OTTAWA 36
CGI Technology (cont) l CGI program l l FALL 2005 Performs arbitrary computation Often written in a scripting language Produces output file when run Starts output with header CSI 4118 – UNIVERSITY OF OTTAWA 37
Header in CGI Output l l Stops at first blank line Identifies l l l Encoding used Type of document Format keyword: information FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 38
CGI Header Examples HTML document header Content Type: text/html l Text document header Content Type: text/plain l Redirection header Location: /over_here/item 4 l FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 39
Example CGI Script l l Generates document Document contains three lines of text l l l FALL 2005 Header Blank line Document creation date CSI 4118 – UNIVERSITY OF OTTAWA 40
Parameters l l CGI programs can be parameterized URL can contain arguments that are passed to CGI program Question mark separates CGI path from arguments Server places information following question mark in environment variable QUERY_STRING FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 41
Example Environment Variables FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 42
Encoding Information in a URL l l Information that program stores between invocations: state information Information passed to browser in form of cookie Cookie consists of name/value pair Long term (persistent) or short term (session) FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 43
Long-Term State Information l Program lifetime l l l CGI program invoked by server Program exits after generating output To maintain persistent data l l FALL 2005 Write to file on disk Read from file on disk CSI 4118 – UNIVERSITY OF OTTAWA 44
Long-Term State Information l l l Client’s IP address in environment variable Check if address in file Respond to client FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 45
Short-Term State Information l l Each invocation of a dynamic document program can produce a document containing a new set of URLs Use new arguments in new URLs FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 46
Short-Term State Information l Argument encodes number of times executed FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 47
Example of Script Execution l Initial document Content-type: text/html <HTML> This is the initial page. <BR> <A HREF=“http: //www. nonexist. com/cgi/ex 4? 1”> Click here to refresh the page. </A> </HTML> Resulting display This is the initial page. l Click here to refresh the page. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 48
Example of Script Execution l Generated output Content-type: text/html <HTML> You have displayed this page 2 times. <BR> <A HREF=“http: //www. nonexist. com/cgi/ex 4? 2”> Click here to refresh the page. </A> </HTML> Resulting display You have displayed this page 2 times. l Click here to refresh the page. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 49
Generated URL Values When it generates a document, a dynamic document program can embed state information as arguments in URLs. The argument string is passed to the program for the URL, enabling a program to pass state information from one invocation to the next. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 50
Server-Side Scripting l l ASP (Active Server Pages) JSP (Java Server Pages) PHP (Perl Helper Pages) Cold. Fusion FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 51
Server-Side Scripting Server-side scripting technologies allow a dynamic page to be created from a template or skeleton that contains embedded commands or program scripts. Instead of using a computer program to generate an entire page, an interpreter copies the page and replaces only the scripting commands. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 52
Continuously Changing Information l Needed for l l l Animations Rapid updates (e. g. , stock prices) Achieved with two mechanisms l l FALL 2005 Server push Active document CSI 4118 – UNIVERSITY OF OTTAWA 53
Server Push Technology l l l Client forms connection Server sends updates repeatedly Impractical FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 54
Active Document Technology l Server l l Client l l Sends computer program to client Runs program locally Program l l FALL 2005 Controls display Interacts with user CSI 4118 – UNIVERSITY OF OTTAWA 55
Active Document Representation l Desire l l l Platform independence Efficient execution High-speed data transmission Late binding Consequence l l FALL 2005 Compact representation Interpretive execution CSI 4118 – UNIVERSITY OF OTTAWA 56
Active Document Translation l l Compiler produces machine-independent binary Browser interprets binary FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 57
Java Technology l l Developed by Sun Microsystems Used for l l l Conventional applications Active documents (applets) Includes l l l FALL 2005 Programming language Run-time system Class library CSI 4118 – UNIVERSITY OF OTTAWA 58
Java Language Characteristics l l l l High level General purpose Similar to C++ Object oriented Dynamic Strongly typed Statically type checked Concurrent FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 59
Java Run-Time Environment Characteristics l l l Interpretative execution Automatic garbage collection Multi-threaded execution Internet access Graphics support FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 60
Java Library l Classes for l l l l FALL 2005 Graphics manipulation Low-level network I/O Interaction with a Web server Run-time system access File I/O Conventional data structures Event capture Exception handling CSI 4118 – UNIVERSITY OF OTTAWA 61
Choice of Graphics Interface Java includes an extensive graphics toolkit that consists of run-time support for graphics as well as interface software. The toolkit allows a programmer to choose a high-level interface, in which the toolkit handles details, or a low-level interface, in which the applet handles details. FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 62
Example Java Applet l Window with two items l l l Text area Button Change text when button clicked FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 63
Illustration of Applet Display l Initial l After user clicks button FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 64
Example Applet Code FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 65
Applet Invocation l l l Available in HTML Uses applet tag Specifies l l l Codebase (machine and path) Code (specific class to run) Example <applet codebase=“www. nonexist. com/pth” code=“bbb. class”> FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 66
Java Functionality l HTML interface l l l HTTP interface l l l Controls display Interacts with user Accesses remote Web documents Invokes other applets Exceptions l l FALL 2005 Indicate unanticipated circumstances Can be caught and handled CSI 4118 – UNIVERSITY OF OTTAWA 67
Example Applet Code FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 68
Example Applet Code (continued) FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 69
Illustration of Applet Display FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 70
Java. Script Technology l l Alternative to Java technology Provides scripting language Browser reads and interprets script in source form Java. Script can be integrated with HTML FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 71
Java. Script Example FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 72
Java. Script Example FALL 2005 CSI 4118 – UNIVERSITY OF OTTAWA 73
Summary l l Web is major application in Internet Client l l l Called browser Fetches and displays document Web documents l l FALL 2005 Stored on servers Standard representation is HTML CSI 4118 – UNIVERSITY OF OTTAWA 74
Summary (continued) l HTML l l l Markup language Uses tags embedded in text URL components l l l FALL 2005 Protocol Domain name of server Protocol port number Path of item Only domain is required CSI 4118 – UNIVERSITY OF OTTAWA 75
Summary (continued) l Static web page l l Dynamic web page l l Unchanging Output from a program on the server Active web page l l FALL 2005 Runs in browser Consists of a computer program CSI 4118 – UNIVERSITY OF OTTAWA 76
Summary (continued) l Dynamic web page technology l l FALL 2005 Known as CGI program usually a script Document begins with header line URL can contain arguments CSI 4118 – UNIVERSITY OF OTTAWA 77
Summary (continued) l Active web page technology l l l FALL 2005 Known as Java Programming language plus runtime support Document called applet CSI 4118 – UNIVERSITY OF OTTAWA 78
- Slides: 78