XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...

Tutorial 9 New Perspectives on JavaScript, Comprehensive 1

XP

Tutorial 9

Working with Cookies

Managing Data in a Web Site Using JavaScript Cookies


XPObjectives

• Understand the history of cookies• Know the advantages and disadvantages of

using cookies• Understand the parts of a cookie• Create a cookie for a first-time Web site

visitor


XPObjectives

• Manage the display of a personal greeting to users returning to a site

• Control the process of creating bulk cookies for use in a shopping cart

• Manage the deletion of cookies used in a shopping cart application


XPObjectives

• Manage the flow of form data using cookies• Manage cookies used to create a form

feedback page• Control the deletion of cookies used in a form


XPIntroducing Cookies

• Features of Patti’s Web site– Users should be able to

• Navigate product listing• Purchase products • Create accounts


XPFunctions of Patti’s Web Pages


XPDeveloping a Shopping Cart Application

• Back end – Mechanism that helps Web site function behind

the scenes

• Front end– Visible part of a Web site


XPDeveloping a Shopping Cart Application

• Server-side shopping cart– Shopping cart application controlled via server

• Client-side shopping cart – Application controlled via user’s browser with

JavaScript


XPClient-Side and Server-Side Shopping Cart Applications


XPUnderstanding Cookies

• Session– Each visit to a Web page by a user

• Cookie– Text file that stores data from a user’s interaction

with a specific Web site– Persistent

• Stateless protocol– No way to track information


XPUnderstanding Cookies

• Client-side cookie– Initiated by a page coming from a Web server – Created in a browser’s memory

• Server-side cookie – Created and stored on a server using server-side

scripting languages

• Privacy statement – Explains how Web site protects privacy of those

who visit and provide information


XPTypes of Cookies

• First-party cookie – Cookie created from the Web site you are visiting

• Third-party cookie – Cookie created at different Web site and is then

sent to Web site you are currently visiting


XPTypes of Cookies

• Unsatisfactory cookie – Cookie that might allow access to personally

identifiable information without your knowledge

• Compact privacy policy– Code sent to a user’s browser that identifies the

nature of a cookie


XPCustomized Cookie Settings in Internet Explorer


XPCreating a Cookie

• Syntaxdocument.cookie = "name = value; expires = expiration; path = path;

domain = domain; secure";


XPCookie Attributes


XPThe name and value Properties

• Each cookie stores– Single piece of information as its value, which is

paired with a name when cookie is created

• Dynamically generating parameters for cookieusername = document.form1.uname.value;

document.cookie = "input1 = "+username;


XPThe expires Property

• Cookie – Can be assigned an expiration date

• To assign expiration dateexpires = Day, DD-Mmm-YY HH:MM:SS GMT

• Per session cookie – Exists only for as long as the browser is

communicating with the Web site


XPThe path Property

• By default– Cookie available only to page where it originated

• path attribute– Used to set the pages to which a cookie is

available


XPThe domain Property

• Used to specify – URL of domain to which you want to make cookie

available

• If no value is specified for domain property– Its value is set to the server of origin


XPThe secure Property

• The final property you can set for a cookie• Enables you to specify that

– Cookie is to be transmitted over the HTTPS protocol

• To set a cookie as a secure cookie– Add the parameter “secure” without a value


XPWorking with Cookie Values

• Patti’s Web site – Designed so that user input is first checked using

validation script named checkForm()

• checkForm() verifies that user– Completed the form fields– Entered the same password twice


XPExtracting Cookie Values


XPPopulating Form Fields with Cookie Values

• Assigning value of user variable to username field

function retrieveAccount() {

document.login.username.value=user;

}


XPUsing Cookie Values to Create a Personalized Greeting

• Code to personalize the home page<script type="text/javascript">if((fn != "")&&(ln != "")){document.write("Hello, "+fn+" "+ln+". ")}</script>


XPImplementing a Shopping Cart

• New requirements for Web site– Expand site’s use of cookies to add shopping cart

functionality– When user selects an item

• Item’s name, price information, and quantity should be placed in cart

– Users should be able to enter quantity in text box – Users should be able to receive immediate

feedback


XPShopping Cart Solution Using all Available Cookies


XPShopping Cart Solution Minimizing Cookie Use


XPCode to Create Cookies Containing Data on Each Product


XPDisplaying Shopping Cart Contents

• showOrder() function– Extracts substrings from the cookie value – Totals the cost of each product ordered – Displays total cost just below list of items in the

shopping cart– Creates dynamic table with rows and columns to

support displaying data


XPShopping Cart Display


XPForm Control Using Cookies

• Additional requirement for Web site– Feedback form that

• Allows users to verify information entered on the patti_cart.htm page


XPPreview of the Form Feedback Page


XPPreserving Form Data

• Process of collecting and saving form data– To be used later in functioning of Web site during

the current session or – For retrieval at a later date in a future session

• makeFormCookie() function – Performs the preserving form data process


XPProcess of Preserving Form Data on Patti’s Web Site


XPThe makeFormCookie() Function


XPCreating a Form Feedback Page

• Form feedback page allows users to – Review their input from the form – Verify that input is accurate


XPCode to Change Null Values to Empty Strings


XPCode to Retrieve Cookie Values and Pass them to Individual Variables


XPThe Completed Form Feedback Page for Patti’s Web Site


XPDeleting Cookies

• To control deletion of cookies– Set date and time you want cookie deleted– Develop function that deletes cookie when it is

called

• To expire cookies on Patti’s Web site– Create function named zapOrder()


XPCode for the zapOrder() Function


XPThe Confirmation Page of Patti’s Web Site

XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...

Documents

Transcript of XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a...