SY306 Web and Databases
for Cyber Operations
This week we learned about
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
-m u:www-data:rwx Lab07
-dm u:www-data:rwx Lab07
-m u:mXXXXXX:rwx Lab07
-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
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.
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.
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
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
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
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.
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.
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
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.
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.
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.
- 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.
- 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!
your products.html, add a "checkout" link to the file
shoppingCart.html that you will modify next.
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.
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"
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
Instruct the browser to delete the
"cart" cookie, so there are no products in the cart anymore.
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
Display a confirmation message to the user. The
confirmation message should contain the delivery address and the list of
Include a "Shop more" link to products.html in
the confirmation message
final step: create three links in your top-level default.html page
under the heading "Lab07"
Under the name "Products", make a link to your
Under the name "shoppingCart.js" make
Under the name "SALES.txt" make a link to your
- A new shoppingCart.js
- A modified products.html that
- A new/modified
shoppingCart.html page used for checkout
- A new Python script
shoppingCart.py to allow the user to buy products
- You should have all the
pieces working as described in Requirements above.
- You should have the three
links in default.html that are described above.
- 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.
- Turn in (due before lab on Friday):
- 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):
- A completed assignment
Your comments will help us improve the course.
- A printout of the
source of your shoppingCart.py file.
- A screen-shot of your
browser window showing the confirmation message you displayed after a
user bought some products
- Electronic submission: zip your Lab07 folder
with all its contents and upload the zip/tar file to Lab07 assignment on