Fall 2000 C.Watters 1 World Wide Web and E-Commerce Clients & Client Side Processing
Fall 2000 C.Watters 1
World Wide Web and E-Commerce
Clients & Client Side Processing
Fall 2000 C.Watters 2
Objectives
Examine computing activities that can be done at the client (browser side)
Consider fat vs thin clientsTake a look at portals
Fall 2000 C.Watters 3
Client-Server Model (review)
Fall 2000 C.Watters 4
HTTP Connection
• 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
Browser
Fall 2000 C.Watters 5
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??
Fall 2000 C.Watters 6
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
Fall 2000 C.Watters 7
HTTP Request Header Example
GET /catalog/ip/ip.htm HTTP 1.0
Accept: text/plain
Accept: text/html
Referer: http://www.cs.dal.ca/catalog.html
User-Agent: Mozilla/2.0
<CR/LF>
Fall 2000 C.Watters 8
HTTP Response Example
HTTP/1.0 200 OK
Server: NCSA/1.3
Mime_version: 1.0
Content_type: text/html
Content_length: 2000
<HTML>
……
</HTML>
http version Response code explanation
Response header
Document body
Fall 2000 C.Watters 9
Client Side Processing
• HTML pages
• Javascript
• Applets
• Cookies
Fall 2000 C.Watters 10
Browser processes HTML
HTML - Hypertext Markup Language
display instructions (tags) and content are mixed
together browser interprets the display instructions and displays
National Gov
<h1>National Gov</h1>
Fall 2000 C.Watters 11
Client Side Processing• JavaScript
– Program code in plain text included in the HTML doc– executes on client– Interacts with user using HTML forms in web pages
• Applet– Program code in java byte code sent from server– executes on the client– Typically takes over part of the current web page
Fall 2000 C.Watters 12
Javascript Examples
• Calculators
• Simple Calculator
• Shopping Cart
Fall 2000 C.Watters 13
Forms and Data• Forms are part of HTML document<form>
Price: <input type=“text”><input type=“button” value=“GST”>
</form>
• user enters data or selects options• Data from form goes to javascript (or back to server)
GSTPrice:
Fall 2000 C.Watters 14
Form and call to Javascript
<form>
<input type=“text” name=“price”>
<input type=“button” value=“GST” onClick=“CalcGST(this.Form)”>
</form>
Execute this function in javascript of this page
Send all of the data in this form to the javascript too
Everytime this button isClicked!!
Fall 2000 C.Watters 15
<HTML><TITLE> Javascript sample</title><SCRIPT LANGUAGE="JavaScript">
function GST(theForm){var price=parseInt(theForm.price.value)var gst=price*0.07theForm.result.value=gst
}</SCRIPT><BODY bgcolor="#FFFF80"><CENTER><H3>GST Calculator </h3><FORM><input type="text" name="price" size="6" value="0"><input type="button" value="GST" onClick="GST(this.form)"><input type="text" name="result" size="6" value=""></FORM></BODY></HTML>
Fall 2000 C.Watters 16
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!!
Fall 2000 C.Watters 17
Applets
Compiled java program codeCode is sent from server to the browserExecutes on the browsers machineCANNOT write to client’s machine!!
Fall 2000 C.Watters 18
Applet call example
<HTML>
<APPLET CODE=“http://www.xyz.com/carfind.class” width=100 height=200>Demo </APPLET>
</HTML>
Go here to get code
Give it this much of the Current web page
Fall 2000 C.Watters 19
Applet example
• Car search applet
Fall 2000 C.Watters 20
Saving Data on a Client
• Applets can not write to the client’s disk
• Cookies (generated by javascript (or cgi)) can be saved on client– text strings– “owned” by the current html document
• samples
document.cookie=“cookie1= name=carolyn;balance=2000;expires=06-01-2001;path=/”
Fall 2000 C.Watters 21
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
Fall 2000 C.Watters 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
Fall 2000 C.Watters 23
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).
Fall 2000 C.Watters 24
Public Portal
Fall 2000 C.Watters 25
Corporate Portal
Fall 2000 C.Watters 26
Corporate Portal
Fall 2000 C.Watters 27
Government Portal
Fall 2000 C.Watters 28
Fall 2000 C.Watters 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)
Fall 2000 C.Watters 30
Recap on Portals
Very good way to organize data for communities of users
Can be personalizedCan be used with push for alertingCan be used for collaborative tasks