SY306 Web and Databases for Cyber Operations

Lab 7 - Cookies: JavaScript and Python

Introduction

This week we learned about cookies in JavaScript and Python. In this lab you will practice those skills by improving your shopping cart implementation so a user can browse the website and keep the shopping cart state. We will also add the "buy" functionality.

SETUP - DO THIS FIRST!

You must create a folder on you Web drive called "Lab07" (without the quotes) and store your work in that directory. Copy your files from Lab06 (or Lab04) to Lab07. You do not have to have your Lab06 completed in order to work on this lab.

 

VERY IMPORTANT: To allow the webserver to later create files when running a Python script, the webserver user needs to have extra permissions on your Lab07 directory. To enable this:

·                  Type the following (replace XXXXXX with your alpha) in the terminal window:

cd public_html

setfacl -R -m u:www-data:rwx Lab07

setfacl -R -dm u:www-data:rwx Lab07

setfacl -R -m u:mXXXXXX:rwx Lab07

setfacl -R -dm u:mXXXXXX:rwx Lab07

 

You will have to repeat this step every time you create a new directory where you want to allow the webserver to create files!

You might still need to do chmod a+rx for the webserver to read and execute your files.

THE ACTUAL LAB:

Read the entire lab so you see the requirements and know what is coming.

In labs 4 and 5 you added a rudimentary shopping cart to your website. Now you will improve on that.

  1. You should have the file products.html and any JavaScript code for the shopping cart from your lab 04 (or later), copied into Lab07. The shopping cart functionality you already implemented should allow you to add items to cart and display the cart content. Your shoppingCart should be an array (unless you already implemented cookies for your shopping cart). If the basic shopping cart functionality from Lab 4 is not working, please contact your instructor.
  2. Create a shoppingCart.js file that will contain useful functions for your shopping cart. Copy-paste the cookie-related functions from the cookie_js.html code provided on the course calendar to your shoppingCart.js file. Since this is an external JavaScript file, not HTML tags, including the <script> tag should be in the .js file.

You will now write two helper functions that will help you implement the shopping cart functionality using cookies, so the users can browse your website and maintain a shopping cart

  1. In your shoppingCart.js file, write a function saveCart()that stores the shopping cart array you have from the previous labs into a cookie with identifier "cart".  You can have an input parameter array for the function to be more generic, but it is not required.

 

Hint: Since cookie values are strings, you will need to convert the shopping cart array to a string, with the elements of the array separated by some special character. JavaScript Array objects have a toString()method that converts an array to a comma-separated string. For example, if you have myArray = [1,2,3], myArray.toString() will return the string "1,2,3". You can read more about this on w3schools. You can use JavaScript's default way of converting the arrays to strings, or come up with your own way. In any case, it is important that you know how your array is translated to a string, in particular what delimiter you are using, because you will have to do the reverse transformation next (from string to array).

 

  1. In your shoppingCart.js file, write a function restoreCart() that reads the cookie with identifier "cart" and initializes the shopping cart array with the elements found in the cookie "cart". If the "cart" cookie does not exist or is empty (null), your function should initialize the shopping cart array to the empty array (or whatever your code uses when there are no items in the shopping cart). The function can return the shopping cart array rather than just initialize your shopping cart array, but that is not required.

 

Hint: String has a useful split() method that you can use. Just make sure you do not try to split() the empty string, as the result is not what you expect. You can read more about split on w3schools.

 

  1. Modify your products.html file which contains the shopping cart functionality to use the external script shoppingCart.js, so the functions you created are available in products.html.

Hint: You can include an external JavaScript file like this:

<script type = "text/javascript" src = "shoppingCart.js">

</script>

  1. Add to cart: Move the addToCart() function from products.html to the shoppingCart.js file, so you have all the functions there. Modify your addToCart() function so the products added by a user to the shopping cart are saved in the "cart" cookie. The easiest way to achieve this add a call to restoreCart() at the start of your function to populate your shopping cart, work with the shopping cart array as before, and add a call to saveCart() at the end of your function.
  2. View cart: Move the viewCart() function from products.html to the shoppingCart.js file. Modify your viewCart() function to display the products from your "cart" cookie. Again the easiest way to do this is to call the restoreCart() function and then work with the shopping cart array as before (lab 4 and 5).

 

Check that add to cart and view cart still work properly in products.html!

 

Checkout:

  1. In your products.html, add a "checkout" link to the file shoppingCart.html that you will modify next.
  2. Modify shoppingCart.html to display the contents of the shopping cart, same way as the products.html did - use the external script shoppingCart.js and the viewCart() function that you already have; you should copy the HTML element you used in products.html to display the cart into the shoppingCart.html, so viewCart() will still work; make sure you place the call to viewCart() after the HTML element you used to display the cart.

10.  Add HTML code to shoppingCart.html to display a form (you should also leave the list of products in the cart there) with three input fields for delivery address, and credit card number. Add a "Confirm Purchase" submit button to the form. The action should be "shoppingCart.py"

  1. Create the choppingCart.py script that will process the purchase by recording the sale information in SALES.txt. The script will need to display back to the user a confirmation message. See details below on what the script should do:

a)      Instruct the browser to delete the "cart" cookie, so there are no products in the cart anymore.

b)      Save the credit card, delivery address, and items purchased as a new line in the SALES.txt file. You should use \t as separator between the different fields in the file, and between the different purchased items. Note that the credit card and delivery address come from the form, while the items purchased come from the "cart" cookie (automatically sent by the browser)

c)      Display a confirmation message to the user. The confirmation message should contain the delivery address and the list of products bought.

d)     Include a "Shop more" link to products.html in the confirmation message

 

  1. Documentation: ensure you have appropriate comments in your JavaScript code and Python script. 
  2. Important final step: create three links in your top-level default.html page under the heading "Lab07"

a)      Under the name "Products", make a link to your Lab07/products.html page

b)      Under the name "shoppingCart.js" make a link to your Lab07/shoppingCart.js JavaScript file

c)      Under the name "SALES.txt" make a link to your SALES.txt file

 

Deliverables

  1. A new shoppingCart.js JavaScript script
  2. A modified products.html that now uses cookies for the shopping cart
  3. A new/modified shoppingCart.html page used for checkout
  4. A new Python script shoppingCart.py to allow the user to buy products
  5. You should have all the pieces working as described in Requirements above.
  6. You should have the three links in default.html that are described above.
  7. All of your files should be in a folder called "Lab07" (without the quotes) on the W drive. Your instructor will assume that your web pages are viewable at http://mope.academy.usna.edu/~mXXXXXX/Lab07/products.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in.
  8. Turn in (due before lab on Friday):
    1. Paper submission: turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
      1. A completed assignment coversheet. Your comments will help us improve the course.
      2. A printout of the source of your shoppingCart.py file.
      3. A screen-shot of your browser window showing the confirmation message you displayed after a user bought some products
    2. Electronic submission: zip your Lab07 folder with all its contents and upload the zip/tar file to Lab07 assignment on Blackboard.