Fall 2000C.Watters1 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


Objectives

Examine computing activities that can be done at the client (browser side)

Consider fat vs thin clientsTake a look at portals


Client-Server Model (review)


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


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??


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


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>


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


Client Side Processing

• HTML pages

• Javascript

• Applets

• Cookies


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>


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


Javascript Examples

• Calculators

• Simple Calculator

• Shopping Cart


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:


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!!


<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>


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!!


Applets

Compiled java program codeCode is sent from server to the browserExecutes on the browsers machineCANNOT write to client’s machine!!


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


Applet example

• Car search applet


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=/”

http://www.cs.dal.ca/cs1200/cs1200F/Topics.html


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


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


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).


Public Portal


Corporate Portal


Corporate Portal


Government Portal



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)


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

Documents

Fall 2000C.Watters1 World Wide Web and E-Commerce Clients & Client Side Processing