fall 2000c.watters1 world wide web and e-commerce clients & client side processing
TRANSCRIPT
![Page 1: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/1.jpg)
Fall 2000 C.Watters 1
World Wide Web and E-Commerce
Clients & Client Side Processing
![Page 2: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/2.jpg)
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
![Page 3: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/3.jpg)
Fall 2000 C.Watters 3
Client-Server Model (review)
![Page 4: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/4.jpg)
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
![Page 5: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/5.jpg)
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??
![Page 6: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/6.jpg)
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
![Page 7: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/7.jpg)
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>
![Page 8: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/8.jpg)
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
![Page 9: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/9.jpg)
Fall 2000 C.Watters 9
Client Side Processing
• HTML pages
• Javascript
• Applets
• Cookies
![Page 10: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/10.jpg)
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>
![Page 11: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/11.jpg)
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
![Page 12: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/12.jpg)
Fall 2000 C.Watters 12
Javascript Examples
• Calculators
• Simple Calculator
• Shopping Cart
![Page 13: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/13.jpg)
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:
![Page 14: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/14.jpg)
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!!
![Page 15: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/15.jpg)
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>
![Page 16: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/16.jpg)
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!!
![Page 17: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/17.jpg)
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!!
![Page 18: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/18.jpg)
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
![Page 19: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/19.jpg)
Fall 2000 C.Watters 19
Applet example
• Car search applet
![Page 20: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/20.jpg)
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=/”
![Page 21: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/21.jpg)
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
![Page 22: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/22.jpg)
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
![Page 23: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/23.jpg)
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).
![Page 24: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/24.jpg)
Fall 2000 C.Watters 24
Public Portal
![Page 25: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/25.jpg)
Fall 2000 C.Watters 25
Corporate Portal
![Page 26: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/26.jpg)
Fall 2000 C.Watters 26
Corporate Portal
![Page 27: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/27.jpg)
Fall 2000 C.Watters 27
Government Portal
![Page 28: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/28.jpg)
Fall 2000 C.Watters 28
![Page 29: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/29.jpg)
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)
![Page 30: Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing](https://reader035.vdocument.in/reader035/viewer/2022062409/5697bfc81a28abf838ca8796/html5/thumbnails/30.jpg)
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