Introduction

In this assignment, you are required to develop a website for a Grocery Store to run a grocery business on- line. This Grocery Store system is a simulated online grocery shopping experience. It is applicable to any e- commerce shopping application.

The products in the store for sale can be divided into multiple categories, such as Frozen-Food, Fresh- Food, Beverages, Home-Health and Pet-Food. You may add or remove categories as you want when completing this assignment.

What does the website do?

     Customers can view a hierarchy of item categories and a collection of items with images as soon as

they enter the shop.

    Customers can check the details of chosen products and add items to a virtual shopping cart.     Customers can edit the quantify of items in the cart or remove items from the cart.

     Customers can check out by filling an online order form, where they provide delivery details and

email addresses.

    Once the order is placed, a confirmation email is sent to the customer’s email address.

This assignment consists of four components. You are required to work individually to complete all the functionalities of this project. This assignment counts as 45% towards your final assessment.

Objectives

1.   Learn about the design of professional (advanced) web pages.

2.   Learn about real-life website design, including hierarchal structures for navigation.

3.   Learn how to use graphic tools for creating clickable rollover image maps.

4.   Learn how to design customised presentation (layout) of web pages.

5.   Learn how to use client-side scripting languages for creating dynamic web pages.

6.   Learn how to create an e-commerce application using a combination of scripting languages, descriptive languages, and development tools.

Window Layout

You are required to divide the browser window into multiple (no fewer than two) frames. Below show two examples.

Functional Specification for Visual Components

Website Logo:

1.   The website should have a logo either in a separate frame or as part of a frame that also contains other elements.

Category Hierarchy:

1.   Initially, a separate frame should show only the top-level categories of items available in the shop.

2.   When the mouse moves over or clicks a particular category node, the node expands to show the second-level categories of items.

3.   Whenever a second-level category is clicked, it shows a list of items in the category in the main information area (most likely in a different frame).

Main Information Area:

1.   Initially, the main information area (i.e., a separate frame) should show a collection of items. Each item has an image and an Add button beside it. User can click the button to add the item to the       shopping cart only when the item is “in stock” .

2.   When a customer clicks on a particular item, a new page (most likely in a different frame) or a pop- up window shows more details about that item, where the customer can still add the item to the shopping cart.

Search Box:

1.   There  should  be  a  search  box  (either  in  the  main  information  area  or  a  separate  frame)  that customers can use to look for items by name, or filter items by price (or price range).

2.   The search results will show in the main information area.

Shopping Cart:

1.   There should be separate frame or pop-up window showing the content of a virtual shopping cart. Customers may use a scroll bar if there are too many items to show in the shopping cart.

2.   The shopping cart shows not only the items inside the cart but also the quantity and total price of the items in the cart.

3.   Customers can clear the shopping cart by clicking on a Clear button on the shopping cart page.

4.   Customers can also complete their shopping by clicking a Checkout button on the shopping cart page.

5.   The Checkout button should be in grey color and non-clickable when the shopping cart is empty.

6.   Once the Checkout button is clicked, an online order form shows up (either on the same page or on a  new  page),  requesting  the  customer  to  fill  in  delivery  details  (name,  address,  suburb,  state, country, phone number) and email address.

7.   A customer can click the Place Order button to place the order. Note that all the fields in the form must be completed before an order can be placed successfully.

8.   Once an order is placed successfully, a confirmation email will be sent to the customer’s email address, with the order and deliver details attached.

Development and Test

    Use Cloud9 or your local IDE (e.g., Visual Studio Code) for development.

    Deploy your website using Elastic Beanstalk.

     Use HTML, PHP, JavaScript, CSS to achieve make your website interactive.

     Test each component of your system, and then integrate all components into a complete system.      Database is not compulsory for this assignment, but it is highly recommended to make your

website truly dynamic through connecting it to a database. We have provided a sample SQL file which does not contain any category information about items/products. You may create more    product records and make up the category information as part of completing this assignment.