CSCI 2006 - Spring 2024 - Assignment #1

Assignment #1 - Shopping Cart

Purpose: Build a webpage that implements a shopping cart concept, given an array of data

Instructions

Your web page will be generating the following HTML and CSS templates

<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">

	<title>General Store - Shopping Cart</title>
	<link href="?get=css" rel="stylesheet" />
</head>

<body>
<div class="title">
    <h1>Shopping Cart</h1>
</div>
<table class="table-fill">
    <thead>
        <tr>
            <th colspan="2">Product</th>
            <th>#</th>
            <th>Price</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

/*  CSS inspired by http://codepen.io/alassetter/full/cyrfB/ */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

body {
  background-color: #F5F5F5;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

div.title {
  margin: auto;
  max-width: 900px;
  padding:5px;
  width: 100%;
}

.title h1 {
   color: black;
   font-size: 26px;
   font-weight: 500;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 900px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
 
th {
  color: white;
  background: #EF6C00;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:20px;
  font-weight: 400;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
 
tr:first-child {
  border-top:none;
}
tr:last-child {
  border-bottom:none;
}
tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:10px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

tr.totals td {
    background:#FFF3E0;
    text-align: right;
}

td.right {
  text-align: right;
}
td.center {
  text-align: center;
}

.focus td {
  color: #E65100;  
  font-weight: 500;
}

Create a file called "index.php", create code that changes the behavior of your code based on the URL as described below

[URL=index.php?get=css] Your PHP file should return the CSS code as shown above. You will need to set the content type for this page, the content type will be text/css
[URL=index.php] Your PHP file should redirect the user (without any further action by the user) to index.php?get=cart -- this is a temporary placeholder for what we will do in the future with this site (i.e. we are not building the home page in this assignment)
[URL=index.php?get=cart] Your PHP file should return the HTML code as shown above. Note, we will be adding more to this HTML code in the next steps, so you might want to read ahead to better understand the best way to print that code during this step

Create a function that take a parameter itemId and returns an array of information about the item. The items to include are listed below.

Item #106020:
   Name: Girl with a Pearl Earring
   Artist: Johannes Vermeer
   Date: 1665
   Description: Girl with a Pearl Earring is an oil painting by Dutch Golden Age painter Johannes Vermeer, dated c. 1665. Going by various names over the centuries, it became known by its present title towards the end of the 20th century after the earring worn by the girl portrayed there.
   Variations:
      #0: 4x5 Reprint - $40
      #1: 8x10 Reprint - $80
      #2: 12x15 Reprint - $120

Item #116010:
   Name: Artist Holding a Thistle
   Artisti: Albrecht Dürer
   Date: 1493
   Description: Portrait of the Artist Holding a Thistle is an oil painting on parchment pasted on canvas by German artist Albrecht Dürer. Painted in 1493, it is the earliest of Dürer's painted self-portraits and has been identified as one of the first self-portraits painted by a Northern artist.
   Variations:
      #0: 4x5 Reprint - $65
      #1: 8x10 Reprint - $125
      #2: 12x15 Reprint - $180

Item #120010:
   Name: Portrait of Eleanor of Toledo
   Artist: Angolo di Cosimo
   Date: 1545
   Description: The Portrait of Eleanor of Toledo and Her Son is a painting by the Italian artist Agnolo di Cosimo, known as Bronzino, finished ca. 1545. One of his most famous works, it is housed in the Uffizi Gallery of Florence, Italy and is considered one of the preeminent examples of Mannerist portraiture
   Variations: 
      #0: 4x5 Reprint - $50
      #1: 8x10 Reprint - $75
      #2: 12x15 Reprint - $125

Create a function that take a parameter cartId and returns an array of information about the cart. The carts to include are listed below.

Cart -1:
   Item #106020 (Variation #1) - Quantity: 3
   Item #116010 (Variation #1) - Quantity: 1
   Item #120010 (Variation #1) - Quantity: 2

Cart 5:
   Item #106020 (Variation #0) - Quantity: 2
   Item #120010 (Variation #2) - Quantity: 3

Cart 7:
   Item #120010 (Variation #0) - Quantity: 1
   Item #116010 (Variation #2) - Quantity: 2
   Item #120010 (Variation #2) - Quantity: 2

When printing the cart, the user may supply a cart parameter in the URL (index.php?get=cart&cart=5). This parameter acts as the cart id for now - in the future, this parameter will usually be left off. Use this parameter in your cart printing function to get the corresponding cart information

For each item in the cart, gather the information about that item, and print a row of the table with the following template:

        <tr>
            <td><img src="/resources/csci2006/[ITEM ID].jpg"></td>
            <td>[ITEM NAME] - [VARIATION NAME]</td>
            <td>[QUANTITY]</td>
            <td class="right">[UNIT PRICE (formatted to USD)]</td>
            <td class="right">[TOTAL PRICE (formatted to USD)]</td>
        </tr>

Calculate the subtotal for the items in the cart, the tax, the shipping, and the grand total. The tax rate is 10%, the shipping is a flat $40, that is reduced to $0 if the subtotal is over $500. Ensure all values are formatted to USD. The template for a totaling row is (use one per item, with the names: "Subtotal", "Tax", "Shipping", and "Grand Total"):
```
	<tr class="totals">
            <td colspan="4">[TOTAL LINE NAME]</td>
            <td>[AMOUNT]</td>
        </tr>
```
Test that your site loads the correct cart, items, and totals properly for the following URLs:
- ?get=cart&cart=-1 -- Total: $566.50
- ?get=cart&cart=5 -- Total: $540.50
- ?get=cart&cart=7 -- Total: $726.00
Upload your files to the a folder called "assignment1", inside your csci2006 folder
In a web-browser, go to the URL below to verify it appears as expected
Username:
Link will populate after you enter your username
Ensure that your code is not producing any errors or warnings, by using the log-access tool. If you have trouble understanding the log messages, please email me for assistance. Note the log does not reset, so you need to look at when any errors/warnings occurred and which HTTP request they were for to better understand whether you have already fixed that issue

Submitting Instructions

Upload a screenshot of your working shopping cart to D2L