Docstoc

Slide 1 - South Texas College

Document Sample
Slide 1 - South Texas College Powered By Docstoc
					                                                                    XP

                                      Tutorial 9




                 Working with Cookies


             Managing Data in a Web Site Using
                   JavaScript Cookies



Tutorial 9          New Perspectives on JavaScript, Comprehensive   1
                                                             XP
                                  Objectives


• 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



Tutorial 9   New Perspectives on JavaScript, Comprehensive   2
                                                              XP
                                   Objectives


• 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



Tutorial 9    New Perspectives on JavaScript, Comprehensive   3
                                                              XP
                                   Objectives


• 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




Tutorial 9    New Perspectives on JavaScript, Comprehensive   4
                                                                         XP
                                Introducing Cookies


• Features of Patti’s Web site
       – Users should be able to
             • Navigate product listing
             • Purchase products
             • Create accounts




Tutorial 9               New Perspectives on JavaScript, Comprehensive   5
                                                               XP
             Functions of Patti’s Web Pages




Tutorial 9     New Perspectives on JavaScript, Comprehensive   6
                   Developing a Shopping Cart XP
                          Application

• Back end
       – Mechanism that helps Web site function behind
         the scenes
• Front end
       – Visible part of a Web site




Tutorial 9          New Perspectives on JavaScript, Comprehensive   7
                  Developing a Shopping Cart XP
                         Application

• Server-side shopping cart
       – Shopping cart application controlled via server
• Client-side shopping cart
       – Application controlled via user’s browser with
         JavaScript




Tutorial 9          New Perspectives on JavaScript, Comprehensive   8
                                                             XP
             Client-Side and Server-Side
             Shopping Cart Applications




Tutorial 9   New Perspectives on JavaScript, Comprehensive   9
                                                                      XP
                        Understanding 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

Tutorial 9           New Perspectives on JavaScript, Comprehensive   10
                                                                     XP
                       Understanding 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
Tutorial 9          New Perspectives on JavaScript, Comprehensive   11
                                                                     XP
                                Types 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   12
                                                                     XP
                                Types 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   13
                                         XP
             Customized Cookie Settings in
                   Internet Explorer




Tutorial 9     New Perspectives on JavaScript, Comprehensive   14
                                                                        XP
                                  Creating a Cookie


• Syntax
             document.cookie = "name = value; expires =
             expiration; path = path;
             domain = domain; secure";




Tutorial 9             New Perspectives on JavaScript, Comprehensive   15
                                                              XP
                        Cookie Attributes




Tutorial 9   New Perspectives on JavaScript, Comprehensive   16
                                                                        XP
                   The 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
  cookie
             username = document.form1.uname.value;
             document.cookie = "input1 = "+username;



Tutorial 9             New Perspectives on JavaScript, Comprehensive   17
                                                                       XP
                             The expires Property


• Cookie
       – Can be assigned an expiration date
• To assign expiration date
             expires = 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



Tutorial 9            New Perspectives on JavaScript, Comprehensive   18
                                                                     XP
                               The 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   19
                                                                      XP
                           The 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




Tutorial 9           New Perspectives on JavaScript, Comprehensive   20
                                                                    XP
                          The 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




Tutorial 9         New Perspectives on JavaScript, Comprehensive   21
                                                                     XP
                  Working 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   22
                                                              XP
             Extracting Cookie Values




Tutorial 9   New Perspectives on JavaScript, Comprehensive   23
                    Populating Form Fields with XP
                          Cookie Values

• Assigning value of user variable to username
  field
             function retrieveAccount() {
                 document.login.username.value=user;
             }




Tutorial 9            New Perspectives on JavaScript, Comprehensive   24
                    Using Cookie Values to Create XP
                                                  a
                        Personalized Greeting

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




Tutorial 9               New Perspectives on JavaScript, Comprehensive   25
                                                                         XP
                    Implementing 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

Tutorial 9              New Perspectives on JavaScript, Comprehensive   26
                                          XP
             Shopping Cart Solution Using all
                   Available Cookies




Tutorial 9      New Perspectives on JavaScript, Comprehensive   27
                                            XP
             Shopping Cart Solution Minimizing
                       Cookie Use




Tutorial 9       New Perspectives on JavaScript, Comprehensive   28
                 Code to Create Cookies XP
             Containing Data on Each Product




Tutorial 9      New Perspectives on JavaScript, Comprehensive   29
                                                                     XP
                    Displaying 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   30
                                                              XP
                 Shopping Cart Display




Tutorial 9   New Perspectives on JavaScript, Comprehensive   31
                                                                          XP
                      Form Control Using Cookies


• Additional requirement for Web site
       – Feedback form that
             • Allows users to verify information entered on the
               patti_cart.htm page




Tutorial 9               New Perspectives on JavaScript, Comprehensive   32
                                        XP
             Preview of the Form Feedback
                          Page




Tutorial 9     New Perspectives on JavaScript, Comprehensive   33
                                                                     XP
                         Preserving 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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   34
                                          XP
             Process of Preserving Form Data
                   on Patti’s Web Site




Tutorial 9      New Perspectives on JavaScript, Comprehensive   35
                                                                 XP
             The makeFormCookie() Function




Tutorial 9      New Perspectives on JavaScript, Comprehensive   36
                                                                     XP
               Creating a Form Feedback Page


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




Tutorial 9          New Perspectives on JavaScript, Comprehensive   37
                                         XP
             Code to Change Null Values to
                     Empty Strings




Tutorial 9     New Perspectives on JavaScript, Comprehensive   38
                                                                 XP
             Code to Retrieve Cookie Values and
              Pass them to Individual Variables




Tutorial 9      New Perspectives on JavaScript, Comprehensive   39
                                          XP
             The Completed Form Feedback
                Page for Patti’s Web Site




Tutorial 9     New Perspectives on JavaScript, Comprehensive   40
                                                                     XP
                                Deleting 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()




Tutorial 9          New Perspectives on JavaScript, Comprehensive   41
                                                                 XP
             Code for the zapOrder() Function




Tutorial 9      New Perspectives on JavaScript, Comprehensive   42
                                           XP
             The Confirmation Page of Patti’s
                        Web Site




Tutorial 9      New Perspectives on JavaScript, Comprehensive   43

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:10/5/2012
language:English
pages:43