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

Fall 2000C.Watters2 Objectives  Examine computing activities that can be done at the client (browser side)  Consider fat vs thin clients  Take a look at portals

Fall 2000C.Watters3 Client-Server Model (review)

Fall 2000C.Watters4 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 2000C.Watters5 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 2000C.Watters6 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 datadata

Fall 2000C.Watters7 HTTP Request Header Example GET /catalog/ip/ip.htm HTTP 1.0 Accept: text/plain Accept: text/html Referer: User-Agent: Mozilla/2.0

Fall 2000C.Watters8 HTTP Response Example HTTP/ OK Server: NCSA/1.3 Mime_version: 1.0 Content_type: text/html Content_length: 2000 …… http version Response code explanation Response header Document body

Fall 2000C.Watters9 Client Side Processing HTML pages Javascript Applets Cookies

Fall 2000C.Watters10 Browser processes HTML  HTML - Hypertext Markup Language   display instructions (tags) and content are mixed together  browser interprets the display instructions and displays  National Gov

Fall 2000C.Watters11 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 2000C.Watters12 Javascript Examples Calculators Simple Calculator Shopping Cart

Fall 2000C.Watters13 Forms and Data Forms are part of HTML document Price: user enters data or selects options Data from form goes to javascript (or back to server) GST Price:

Fall 2000C.Watters14 Form and call to Javascript Execute this function in javascript of this page Send all of the data in this form to the javascript too Everytime this button is Clicked!!

Fall 2000C.Watters15 Javascript sample function GST(theForm){ var price=parseInt(theForm.price.value) var gst=price*0.07 theForm.result.value=gst } GST Calculator

Fall 2000C.Watters16 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 2000C.Watters17 Applets  Compiled java program code  Code is sent from server to the browser  Executes on the browsers machine  CANNOT write to client’s machine!!

Fall 2000C.Watters18 Applet call example Demo Go here to get code Give it this much of the Current web page

Fall 2000C.Watters19 Applet example Car search applet

Fall 2000C.Watters20 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= ;path=/”

Fall 2000C.Watters21 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 2000C.Watters22 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 2000C.Watters23 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 2000C.Watters24 Public Portal

Fall 2000C.Watters25 Corporate Portal

Fall 2000C.Watters26 Corporate Portal

Fall 2000C.Watters27 Government Portal

Fall 2000C.Watters28

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