Assignment 1:
An Online Grocery Store with Graphic User Interface
Due by Friday 21 April 2023, at 11:59 pm
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.
Code Help, Add WeChat: cstutorcs
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
5. The button should be in grey color and non-clickable when the shopping cart is empty.
6. Once the 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.
程序代写 CS代考 加微信: cstutorcs
Submission Process
Please upload a zip file containing the source code for website to Canvas.
You are required to also provide the URL of your website:
You may also provide any additional comments:
Before submitting your assignment, please check whether your web site is accessible.
Submissions to the lecturer’s or tutors’ emails won’t be accepted.
Programming Help, Add QQ: 749389476