联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-21:00
  • 微信:codinghelp

您当前位置:首页 >> OS作业OS作业

日期:2024-03-17 12:32

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 web pages.

.   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 web pages.

.   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) Searchbox

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, or a designated area on the page. It should be minimised by default – so users cannot see the content unless they click to open/maximise 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 toCanvas, then click Submit Assignment”.

 

2) Provide the URL of your website as a comment to your submission.





版权所有:编程辅导网 2021 All Rights Reserved 联系方式:QQ:99515681 微信:codinghelp 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。 站长地图

python代写
微信客服:codinghelp