Assignment 1:
An Online Grocery Store with Graphic User Interface
Due: Sunday, 21 April 2024 at 11:59 pm
Introduction
In this assignment, you are required to develop a dynamic website for an online grocery store. The website
should provide a simulated online shopping experience for potential customers.
The website should enable users (potential customers) to
• Browse items by categories,
• Search for items using keywords,
• Check an item’s details and availability (whether it is in stock),
• Add an item to the shopping cart,
• Edit the shopping cart,
• Place an order for the items in the shopping cart, and
• Send a confirmation email to the user who placed the order.
This assignment accounts for 45% of the total mark in the subject. You are required to complete this
assignment individually.
Objectives
• Learn how to design customised presentation (layout) of webpages.
• Learn about real-life website design, including hierarchal structures for navigation.
• Learn how to use graphic tools for creating clickable rollover image maps.
• Learn how to use client-side scripting languages for creating dynamic webpages.
• Learn how to create an e-commerce application using a combination of scripting languages,
descriptive languages, and development tools.
Visual Components
1) Website logo
There should be a logo for the website. The logo should appear on all pages of the website.
2) Search box
There should be a search box allowing users to look up items by using keywords.
3) Item categories
The items for sale should be put into categories, e.g., Frozen, Fresh, Beverages, Home, and Pet-food. You
may add more categories as you need when completing this assignment.
The categories should be clickable – users can click to expand a category and view all the items in the
category.
Search box and Item categories should appear on all pages except the shopping cart, delivery details and
order confirmation pages.
4) A grid view of items
When multiple items are shown on the same page (e.g., the homepage, the page showing items by
category, or search results), the items should be aligned to grid.
Each item should show the key information, e.g., name, image, unit, price, and (not) in stock status.
Beside each item, there should be a button with which users can add the item to the shopping cart.
5) Shopping cart
The shopping cart may appear as a pop-up window, a floating element, a designated area on the page, or a
separate page.
The content of the shopping cart should be invisible by default – users cannot see the content until they
click to view it.
A user can view each item added to its personal shopping cart, the unit price, quantity, and the total price
for the whole shopping cart.
A user can remove an item for the cart, edit the quantities, as well as clear the cart.
A user can place an order on the shopping cart page only when the cart is not empty.
The shopping carts content should be kept for a certain period (e.g., within 24 hours), so the user can
view the shopping cart whenever needed within this period before the order is placed successfully.
6) Delivery details
Once a user decides to place an order, it will be directed to an order details page.
On this page, the user should provide the delivery and contact information, including recipient’s name,
address, mobile number, and email address. All these details are compulsory for the order to be placed
successfully.
7) Order confirmation
Once an order is placed successfully, the shopping cart will be cleared, and a confirmation email will be
sent to the customer’s email address, enclosing the order details.
Requirements
• Use HTML, PHP, JavaScript, CSS to make an interactive website.
• Use Cloud9 or your local IDE (e.g., Visual Studio Code) for development.
• Deploy your website using Elastic Beanstalk.
• Use PHP code to interact with the database – We have provided a sample SQL file showcasing the
design of the “products” table; you may revise it to add category information to those products.
• You may create additional tables to store user, category, and order information.
Submission Process
1) Upload a zip file of your source code to Canvas, then click “Submit Assignment”.
2) Provide the URL of your website as a comment to your submission.
请加QQ：99515681 邮箱：99515681@qq.com WX：codinghelp