World Wide Web and E-Commerce (II)

1
World Wide Web and E-Commerce (II)

• Clients Client Side Processing

2
Web Protocols
HTML

• HTTP

Client Side
Server Side
XML
Client/Server
3
Objectives

• I. Examine computing activities that can be done
  at the client (browser side)
• II. Consider fat vs thin clients
• III. Take a look at portals

4
Client-Server Model (review)
5
HTTP Connection
Browser

• 1. Client
• makes an HTTP request for a web page
• makes a TCP/IP connection
• 2. Server accepts request
• sends page as HTTP
• 3. Client downloads page
• 4. Server breaks the connection

6
HTTP is Stateless!!!!

• Each operation or transaction makes a new
  connection
• each operation is unaware of any other connection
• each click is a new connection
• So how do they do those shopping carts??

7
What does an HTTP request or response look like?

• Browser request Header only
• Server response Header object file
  (generally)

Header object file

Plain text about data
data
8
HTTP Request Header Example

• GET /catalog/ip/ip.htm HTTP 1.0
• Accept text/plain
• Accept text/html
• Referrer http//www.cs.dal.ca/catalog.html
• User-Agent Mozilla/2.0
• ltCR/LFgt

9
HTTP Response Example
http version
Response code
explanation

• HTTP/1.0 200 OK
• Server NCSA/1.3
• Mime_version 1.0
• Content_type text/html
• Content_length 2000
• ltHTMLgt
• lt/HTMLgt

Response header
Document body
10
I. Client Side Processing

• HTML pages
• Javascript
• Applets
• Cookies

11
1. Browser processes HTML

• HTML - Hypertext Markup Language
• display instructions (tags) and content are mixed
  together
• browser interprets the display instructions and
  displays

lth1gtNational Govlt/h1gt
National Gov
12
More Client Side Processing

• 2. JavaScript
• Program code in plain text included in the HTML
  doc
• executes on client
• Interacts with user using HTML forms in web pages
• 3. Applets
• Program code in java byte code sent from server
• executes on the client
• Typically takes over part of the current web page

13
2. Javascript Examples

• Calculators
• Simple Calculator
• Shopping Cart

14
Forms and Data

• Forms are part of HTML document
• ltformgt
• Price ltinput typetextgt
• ltinput typebutton valueGSTgt
• lt/formgt
• user enters data or selects options
• Data from form goes to javascript (or back to
  server)

GST
Price
15
Form and call to Javascript
Everytime this button is Clicked!!

• ltformgt
• ltinput typetext namepricegt
• ltinput typebutton valueGST
  onClickCalcGST(this.Form)gt
• lt/formgt

Send all of the data in this form to the
javascript too
Execute this function in javascript of this page
16

• ltHTMLgt
• ltTITLEgt Javascript samplelt/titlegt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function GST(theForm)
• var priceparseInt(theForm.price.value)
• var gstprice0.07
• theForm.result.valuegst
• lt/SCRIPTgt
• ltBODY bgcolor"FFFF80"gt
• ltCENTERgt
• ltH3gtGST Calculator lt/h3gt
• ltFORMgt
• ltinput type"text" name"price" size"6"
  value"0"gt
• ltinput type"button" value"GST"
  onClick"GST(this.form)"gt
• ltinput type"text" name"result" size"6"
  value""gt
• lt/FORMgt
• lt/BODYgt

17
Features using Javascript

• Shopping carts
• Checking credit card or phone number patterns
• What-if Calculations
• car payments
• mortgage payments
• current cost of things in the shopping cart
• Tutorial or demonstration calculations

Remember no data is sent to server!!
18
3. Applets

• Compiled java program code
• Code is sent from server to the browser
• Executes on the browsers machine
• CANNOT write to clients machine!!

19
Applet call example
Go here to get code

• ltHTMLgt
• ltAPPLET CODEhttp//www.xyz.com/carfind.class
  width100 height200gtDemo lt/APPLETgt
• lt/HTMLgt

Give it this much of the current web page
20
Applet example

• Car search applet

21
4. Saving Data on a Client

• Applets can not write to the clients disk
• Cookies (generated by javascript (or cgi)) can be
  saved on client
• text strings
• owned by the current html document

document.cookiecookie1 namecarolyn balance20
00expires06-01-2001path/
22
Recap

• HTTP protocol is used for browser-server
  communication
• HTTP is stateless (here and now!)
• Javascript can be used to do some of the work on
  the client, including saving data between
  sessions as cookies
• Applets can be used to execute a program from the
  server on the client, but cannot save data on the
  client

23
II. Fat vs Thin Clients

• Fat clients have a lot of the processing done on
  the client (applets, applications, etc)
• Thin clients have very little processing, mostly
  just display
• Fat offload server, save bandwidth
• Thin no software upgrades, cheap clients

24
III. Portals

• A gateway site whose goal is to be a major
  starting site for users as an anchor site.
• General portals
• Yahoo, Excite, Netscape, Lycos, CNET, Microsoft
  Network and America Online's AOL.com.
• Niche portals
• Garden.com (for gardeners),
• Fool.com (for investors),
• SearchNT.com (for Windows NTadministrators).

25
Public Portal
26
Corporate Portal
27
Corporate Portal
28
Government Portal
29
Push vs Pull

• Pull - client requests web page/service
• - server complies and sends data
• - (send me some data)
• Push - server initiates data flow to client
• - client accepts data
• - (here take this data)

30
Medical Portal
31
(No Transcript)
32
Recap on Portals

• Very good way to organize data for communities of
  users
• Can be personalized
• Can be used with push for alerting
• Can be used for collaborative tasks