CS4273: Distributed System Technologies and Programming I

1
CS4273 Distributed System Technologies and
Programming I

• Lecture 1 Introduction to WWW

2
WWW, HTTP and Java

• The world wide web (WWW) is an architecture for
  accessing linked documents all over the Internet.
• The earliest web system was developed by a group
  of researchers in physics at CERN (European
  Nuclear Research Center) in 89. Its for the easy
  distribution of information, such as reports,
  blueprints, photos, etc. The 1st demo on
  hypertext was in 91.
• A graphical web browser Mosaic was released in
  Feb 1993 (by NCSA). One of the authors left the
  group to form a company Netscape Communications
  Corp. A year later Netscape went public in 1995
  (sold to America on-Line in 98).
• A WWW consortium was set up in 1994, aiming at
  further developing the Web, standardizing
  protocols, etc. Its home page http//www.w3.org

3
Architecture of WWW

• A typical Client/Server model.
• Client a web browser which speaks http,
  understands hypertext and hypermedia.
• Server a server process listening to TCP port 80
  for incoming requests. It keeps hypertext (or
  hypermedia) files for clients retrievals.

4
How does a web page get displayed in your web
browser?

• When you click a web page http//www.cs.cityu.edu.
  hk/jia/cs4273/index.html
• browser gets the URL from your input.
• browser asks DNS for the IP address of
  www.cs.cityu.edu.hk.
• DNS replies with 144.214.120.3.
• browser makes a TCP connection to port 80 on
  144.214.120.3.
• it sends a GET /jia/cs4273/index.html command
  (http protocol).
• HTTP server on 144.214.120.3 sends file
  index.html back to the client
• browser processes the format of index.html and
  displays it.
• browser fetches displays images in index.html
  one by one by using GET.
• TCP connection closes after a silent timeout.

5
HTTP (Hyper Text Transfer Protocol)

• HTTP is an ASCII protocol, use telnet to try HTTP
  commands
• slx1 telnet www.cs.cityu.edu.hk 80
• Trying 144.214.120.3...
• Connected to www.cs.cityu.edu.hk.
• Escape character is ''.
• GET /jia/index.html HTTP/1.1 ltcrgt
• Host www.cs.cityu.edu.hk ltcrgt ltcrgt

6
HTTP (Cont.)

• HTTP/1.1 200 Document follows
• Date Mon, 24 Mar 1997 020805 GMT
• Server NCSA/1.4.2
• Content-type text/html
• Last-modified Mon, 24 Mar 1997 020711 GMT
• Content-length 380
• lthtmlgt
• ltheadgt
• lttitlegt Xiaohua Jia's Home Pagelt/titlegt
• lt/headgt
• ltbodygtltligt DSc in Information Science, The Univ
  of Tokyo, Japan, 1991
• ltligt Msc in Computer Science, The Univ of Sci
  Tech of China, 1986
• lt/bodygt
• lt/htmlgt
• Connection closed by foreign host.
• slx1

7
HTTP Built-in Methods
8
URL (Uniform Resource Locators)

• The browser needs to access different types of
  data all over the Internet. In order to retrieve
  a piece of information from the Internet, the
  browser needs to specify
• what is the data (naming) ?
• where it is (locating) ?
• what protocol does the server speak ?
• URL effectively serves as a pages worldwide
  name. It has 3 parts
• protocol name
• DNS name (servers location)
• local file name
• http//www.cs.cityu.edu.hk/jia, the same as
• http//www.cs.cityu.edu.hk/home/lec/jia/www/index
  .html

9
Protocols in URL
10
HTML (Hyper Text Markup Language)

• For details, visit http//www.ncsa.uiuc.edu/Genera
  l/Internet/WWW
• By embedding standard markup commands within an
  html file, web browser can read and format any
  web page.
• HTML is an application of ISO standard 8879, SGML
  (Standard Generalized Markup Language).
• It can be contrasted to documents produced by
  WYSIWYG (What You See Is What You Get) word
  processing software, such as MS-word.
• You can view the source file of a displayed web
  page, and you also can save it and use it as the
  template to write your own web page!

11
Example of a home page in HTML

• lthtmlgt
• ltheadgt
• ltTITLEgtA Simple HTML Examplelt/TITLEgt
• lt/headgt
• ltbodygt
• ltH1gtHTML is Easy To Learnlt/H1gt
• ltPgtWelcome to the world of HTML.
• This is the first paragraph. While short it is
• still a paragraph!lt/Pgt
• ltPgtAnd this is the second paragraph.lt/Pgt
• lt/bodygt
• lt/htmlgt

12
Main Features of HTML

• HTML is static, only for displaying information.
• HTML can load image files.
• HTML has fill-out forms to collect information
  from clients and pass it back to the server (a
  CGI program) for processing.
• There are many tools to help you write web pages,
  such as Microsoft FrontPage Express, Visual
  InterDev 6, etc.

13
Limitations of HTML

• Lack of extensibility. It does not allow you to
  define your own tags or attributes.
• Lack of structure or data description. It has no
  schema description and no support for checking
  structural validity.
• Mixture of data display formats. It is
  difficult for data search and inefficient for
  data transfer (redundant transmission of
  formatting statements).

14
XML (Extensible Markup Language)

• XML was developed to enhance data description and
  data exchange over the Internet.
• XML is an intermediate language for data
  exchange. It is NOT a language for
  end-presentation. An XML document need be
  converted into other languages for
  end-presentation, such as HTML, WML (Wireless
  ML), CML (Commerce ML), MathML (Mathematical ML),
  SpeechML, etc.
• Both XML and HTML come from SGML. HTML is an
  application of SGML, while XML is a subset of
  SGML. XML contains about 20 of SGMLs syntax but
  has over 80 of its power.
• XML is a meta language, which allows you to
  define your own markup language.

15
A Silly Example of Using XML

• // silly.html, embedding xml tags in HTML file
• lthtmlgt ltbodygt
• ltxml id"cdcat"gt
• ltCATALOGgt
• ltCDgt
• ltTITLEgtEmpire Burlesquelt/TITLEgt
• ltARTISTgtBob Dylanlt/ARTISTgt
• lt/CDgt
• ltCDgt
• ltTITLEgtHide your heartlt/TITLEgt
• ltARTISTgtBonnie Tylerlt/ARTISTgt
• lt/CDgt
• lt/CATALOGgt
• lt/xmlgt
• lttable border"1" datasrc"cdcat"
  align"center"gt
• lttrgt
• lttdgtltspan datafld"ARTIST"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"TITLE"gtlt/spangtlt/tdgt
• lt/trgt

16
A More Sensible Example of Embedding XML in HTML

• XML separates the data from HTML (formatting
  statements). In the following example, xml data
  are in a separate file CDdata.xml.
• lthtmlgt
• ltbodygt
• ltxml id"cdcat" srcCDdata.xml"gtlt/xmlgt
• lttable border"1" datasrc"cdcat"
  align"center"gt
• lttrgt
• lttdgtltspan datafld"ARTIST"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"TITLE"gtlt/spangtlt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

17
XML document

• An XML document usually consists of three parts
  (files)
• Document Type Definition (DTD) define the
  logical structure and storage layout.
• See an example in www/xml/book.dtd
• Entities (XML) entities are data, whose types
  are defined in .dtd. It has a pointer to the .xsl
  file to display it.
• See an example in www/xml/book.xml
• Display format (XSL) a program to process and
  display XML data.
• See an example in www/xml/book.xsl

18
XSL (eXtensible Style-sheet language)

• XSL was proposed to specify the display format of
  an XML document
• XSL is almost a fully fledged programming
  language, which allows you to program the
  processing / formatting of XML data. It has
  instructions such as, apply-templates, for-each,
  value-of, etc.
• XSL files take extension .xsl. The same set of
  XML data can have multiple .xsl files for
  different display format.
• XML data is separated from display format, which
  makes transmission of XML data efficient and
  clean (easy to search read).
• See demo of
• jia/xml/book.xml, book.dtd, and book.xsl
• a different display style in book1.xsl

19
Web Programming Technologies at Client Server
Sides
20
Client Side Technology JavaScript

• JavaScript was originally created by Netscape.
  Jscript is Microsofts version of JavaScript.
• It is a script language, used in HTML documents
  and executed in a web browser. IE and Netscape
  contain the JavaScript interpreter.
• It is a fully powered programming language, which
  has complex data types, control structures,
  function definitions, event handlings.
• It is a de facto standard of client side script
  language.
• See a demo jia/JavaScript/Janimation.html or
  JScriptTest.html

21
Client Side Technology VBScript

• VBScript (Visual Basic Script) is a subset of
  Microsoft Visual Basic.
• It is used in HTML documents. Internet Explorer
  contains its interpreter, but Netscape does NOT
  have it.
• VBScript is particularly valuable when it is used
  with Microsoft ASP (Active Server Pages), a
  server side program that creates dynamic content
  sent to the clients browsers.
• VBScript is the de facto language for ASP.
• See a demo jia/ASP/VBScriptTest.html

22
Client Scripting versus Server Scripting

• Client-side scripting interacts directly with
  end-users, which reduces the number of trips to
  the server and makes uses of browsers functions
  for display control.
• Client scripting is browser dependent.
• Client scripts are viewable.
• Server-side scripts, e.g. ASP, are executed on
  the server, which generates responses sent to the
  browser for display (web server must have the
  script parser).
• When a client requests an ASP file, it is parsed
  by an ActiveX component, and scripting codes
  (i.e., ASP statements) are executed as they are
  encountered.
• Each time when theres a client event, e.g.,
  button-click or data-input, the browser asks the
  server to process the event and send in the new
  display file.

23
An ASP Example

• lt_at_ Language "VBScript" gt
• lthtmlgt
• ltheadgt lttitle gt An ASP Example
  lt/titlegtlt/headgt
• ltbodygt
• ltform name"form1" method"post"gt
• ltinput name"TextBox1" type"text"
  id"TextBox1" /gt
• lt
• ss Request.Form("TextBox1")
• gt
• ltinput name"TextBox2" type"text"
  id"TextBox2" value"lt ss gt" /gt
• ltinput type"submit" name"Button1"
  value"Button" id"Button1" /gt
• lt/formgt
• lt/bodygt
• lt/htmlgt
• N.B. ASP statements are enclosed by lt gt.

24
Java Applet (a Client Side Technology)

• Java Architecture
• Java is a programming language which is Object
  Oriented, platform-independent, interpreted,
  multithreading, fast, secure, robust,
• A Java source program is compiled to Java
  byte-code.
• A Java virtual machine sitting on each platform,
  interpreting Java byte-code to local machine
  instructions and executing them.

25
An easy start of Java

• Edit a Java program in file helloJava.java
  (note the file name is better to be
• the same name as the class name in the program)
• class helloJava
• public static void main(String args)
• System.out.println(Hello Java!)
• Compile the program
• slx1 javac helloJava.java
• it produces a file helloJava.class which is
  Java byte-code (note the file name
• is the same name as the class name in the source
  code program).
• Run Java interpreter to execute it
• slx1 java helloJava // no need of extension
  name .class

26
An Easy Start of Java Applet

• Two kinds of Java programs
• Ordinary application programs run independently
  as an application.
• Applets require supporting environment like IE
  or AppletViewer.

27
Our First Java Applet

• Edit the applet program in a file
  helloApplet.java (note the file name must be
• the same as the applet name in the program!)
• import java.awt.
• import javax.swing.
• public class helloApplet extends JApplet
• public void paint(Graphics g)
• g.drawString(Hello Java Applet!, 5, 50)
• Compile the program
• slx1 javac helloApplet.java
• it produces a file helloApplet.class.
• Embed the applet into an HTML file
• .
• ltapplet codehelloApplet.class width150
  height25gtlt/appletgt