building an ecommerce website

❖ User Modules: Admin: This user account is meant for the administrator who manages all account roles, view order list, update order’s status, manage account role requests.. - View com

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

GRADUATION THESIS INFORMATION TECHNOLOGY

INSTRUCTOR: MSC MAI ANH THO STUDENT: BUI THANH NGOC

LE MINH THANG CHAU KIM TOA

S K L 0 1 0 5 5 2

BUILDING AN ECOMMERCE WEBSITE

Ho Chi Minh City – February 2023 Last edited: February 10, 2023

MINISTRY OF EDUCATION AND TRAINING

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH-QUALITY TRAINING

-

PROJECT ON SOFTWARE ENGINEERING

Report:

BUILDING AN ONLINE LEARNING WEBSITE

INSTRUCTOR: MS Mai Anh Tho STUDENT NAME STUDENT ID

(Signature and full name)

Mai Anh Tho

ACKNOWLEDGEMENT

The success of a student always accompanies a lecturer We would like to express our sincere thanks to Ms Mai Anh Tho, who directly supported the group, give us suggestions, comments and suggestions as well as provide tips to help us make the best project Thanks to her instructions, helping our team understand the knowledge to do the presentation as well as the implementation of the project so we have completed the schedule with a lot of experience that we learn

Again, our team would like to thank our instructor Projects are made around two months, just enough to complete it However, due to some unexpected problems the project will have many errors that are inevitable We are looking forward to receiving all the comments from our teachers to help our project better Sincerely, thank you

❖ Seller 34

II Sign In screen 89

CHAPTER 01: OVERVIEW I Introduction

In the context that the world is entering the Industrial Revolution 4.0, online shopping is currently receiving the attention of many countries because of its convenience In recent years, the online shopping method is no longer a strange concept in society or a new field in our country Along with the trend of technology development in the world, online shopping in Vietnam is gradually forming, growing strongly, and playing an increasingly important role in the shopping market system It can be considered that in 2021, the COVID-19 pandemic has brought many changes to the commerce field and applying online shopping tools has been playing an essential role for the young generation in purchasing stuffs

From the strong development of the networks, web applications for these platforms are growing stronger and stronger Web applications in the commerce industry are seen as part of the success of IT services User experience, interface, features, and are the factors that retain customers

Using web applications to view products’ information with a beautiful friendly interface Products purchasing is very effortless and time efficient or checking the products that you had opted with all the products’ information that you selected just with a simple button press, you can also be able to check new advertise daily and all the flash sale time are what users are drawing into

Therefore, in this project, our group had decided to build a ecommerce website to make clients feel easier when tracking their purchasing process and shop owner can easily post new product

The report includes the following sections: 1) Application Overview Details 2) System Analysis

3) Designing System

II Overview detail

1 Project topic name

Building an ecommerce website

2 Reason to choose the topic

In the development process of society, information technology has been growing rapidly, playing an important role in daily life and turning into an effective support tool for people in all fields Especially with applications that come with multiple functions which are convenient for the mass population who have access to some type of technology devices such as laptop, mobile and an internet connection

Instead of going to stores, many shops have designed their own applications (abbreviated as App) to host their products and manage their clients Customers say that shopping websites are currently an effective shopping tool especially when the Vietnamese shopping system is trying to catch up with international commerce trends in developed countries

In the traditional way, clients have to spend time, getting up early and taking transport to store, from dressing up in formal cloths, taking transportation, furthermore, if there are an excessive number of clients, clients have to be in line to proceed the payment

Meanwhile, it only takes a few minutes to turn on your smart devices such as a personal computer, laptop or mobile phone and open a web browser, enter the website address and they are good to go

Therefore, we have decided to implement the web programming language that we have learned and use the integrated development environment (as Visual Code) to build a shopping website

3 Research Aim

website that serves some important purposes of a fully functioning shopping website, such as, being able to check products’ information, seeing stores’ advertisements, purchasing products, and track products

quickly when performing actions on the web

quantity, the details information of all the products, the availability will be much easier for the web administrator

4 Research achieves goal

5 Research subject and research range

good pattern for shopping website

6 Research method

Methods based on theoretical research: o Survey ideas and opinions about shopping website from clients: o Finding and checking out other shopping website

o Checking new technologies that are helpful and easy to use o Analyze must-have functions to implement in the system o Programming a shopping website

o Using related tutorials videos on YouTube o Checking Stack overflow for debugging and fixing errors during

development o Running tests and adding suitable functions for the web

7 Practical meaning

shopping

products instead of going to stores to pay in cash, but it also helped clients to track advisements from teachers from a specific course

8 Technology Applied in the project a) Introduction to Visual Studio Code

Image 1.9.1

Visual Studio Code is a distribution of the Code - OSS repository with Microsoft-specific customizations released under a traditional Microsoft product license

Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle It provides comprehensive code editing, navigation, and understanding support along with lightweight debugging, a rich extensibility model, and lightweight integration with existing tools

Visual Studio Code is updated monthly with new features and bug fixes You can download it for Windows, macOS, and Linux on Visual Studio Code's website To get the latest releases every day, install the Insiders build

b) Introduction to MERN Stack

Image 1.9.2a

The MERN stack is a JavaScript-based framework for developing web applications MERN is named after MongoDB, Express, React, and Node, the four key technologies that make up the layers of the stack

● MongoDB - document database ● Express(.js) - Node.js web framework ● React(.js) - a client-side JavaScript framework ● Node(.js) - the premier JavaScript web server

There are variations to the MEAN stack such as MERN (replacing Angular.js with React.js) and MEVN (using Vue.js) The MERN stack is one of the most popular technology concepts for building web applications

MERN Stack Architecture

The MERN architecture is designed to make building web applications in JavaScript and handling JSON incredibly easy

Image 1.9.2b

MERN Stack Diagram

MERN Stack Components:

React.js Front End

The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML React lets you build up complex interfaces through simple components, connect them to data on your back-end server, and render them as HTML

React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from

a modern web framework: great support for forms, error handling, events, lists, and more

Express.js and Node.js Server Tier

The next level down is the Express.js server-side framework, running inside a Node.js server Express.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses

By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front end, you can connect to Express.js functions that power your application Those functions, in turn, use MongoDB’s Node.js drivers, either via callbacks or using promises, to access and update data in your MongoDB database

MongoDB Database Tier

If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as React, Express, and Node

That’s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval Again, if you’re building in the cloud, you’ll want to look at Atlas If you’re looking to set up your own MERN stack, read on!

Advantages of the MERN Stack

Let’s start with MongoDB, the document database at the root of the MERN stack MongoDB was designed to store JSON data natively (it technically uses a binary version of JSON called BSON), and everything from its command line interface to its query language (MQL, or MongoDB Query Language) is built on JSON and JavaScript

MongoDB works extremely well with Node.js, and makes storing, manipulating, and representing JSON data at every tier of your application incredibly easy For cloud-native applications, MongoDB Atlas makes it even easier, by giving you an auto-scaling MongoDB cluster on the cloud provider of your choice, as easy as a few buttons clicks

Express.js (running on Node.js) and React.js make the JavaScript/JSON application MERN full stack, well, full Express.js is a server-side application framework that wraps HTTP requests and responses and makes it easy to map URLs to server-side functions React.js is a front-end JavaScript framework for building interactive user interfaces in HTML, and communicating with a remote server

The combination means that JSON data flows naturally from front to back, making it fast to build on and reasonably simple to debug Plus, you only have to know one programming language, and the JSON document structure, to understand the whole system!

MERN is the stack of choice for today’s web developers looking to move quickly, particularly for those with React.js experience

When Can the MEAN Stack be Used?

MERN follows the traditional three-tier stack pattern, including the display tier (React.js), application tier (Express.js and Node.js), and database tier (MongoDB)

If you’re building a JavaScript application, particularly in Node.js, then you should give MERN a serious look

MongoDB stores data in a JSON-like format (BSON, a binary JSON extension), the MongoDB Query Language (MQL) is defined in JSON, and its command-line interface (CLI) is a JavaScript interpreter Not only is MongoDB essentially a JavaScript/JSON data store, but it’s full of advanced features like indexing and querying deep into JSON documents, has powerful native Node.js drivers, and is designed for horizontal scale-out It’s even easier to develop apps in the cloud using MongoDB Atlas, the cloud-native Database-as-a-Service from the creators of MongoDB

Whether you’re building a high-throughput API, a simple web application, or a microservice, MERN is the ideal stack for building Node.js applications

c) Introduction to MongoDB

Image 1.9.3

MongoDB is an open-source NoSQL database engine built in C++ It's a document store database which means it stores data as a "document" inside a collection, with multiple collections inside a database Multiple databases can exist for each server The document data is stored as BSON

performance The data is schema-less which means each document can have as many keys and values as you want with no restriction on the type of data

It's easy to think of documents in collections like rows in a relational database table, except that these documents can have any arbitrary amount of properties (like columns for rows) and they can be different for each document and include lots of nesting like arrays of more properties This is a very powerful way to store complex data and matches up well with the object-oriented nature of most programming languages

MongoDB runs on both Windows and Linux servers and has lots of documentation and years of production usage now so it's considered a stable and useful database, although there are continuing issues with durability and an overly-complicated replication setup to keep in mind

The top features of MongoDB are: • Load balancing – MongoDB offers a database platform that can run

smoothly even when the load is high as it can run over multiple servers while balancing the load among them

• Ad hoc query – MongoDB supports ad hoc queries such as field or range queries

• File storage system – MongoDB is also being widely used as an efficient file storage system that can store files across multiple servers while using the load balancing feature

CHAPTER 02: Status Analyst and User Requirements I Current Status Analyst

A shopping website is application software that aims to computerize shopping market, allowing the entire process of shop management depend on computers Since the operation of any shopping methods is almost the same, we have chosen “ONLINE SHOPPIE” to present the software and its design Without a computer, everything that goes on in the registry causes a lot of paperwork with very little efficiency, which is where this software can greatly improve the overall management Our aim in developing this application is to provide a very simple interface with requirements that are easy to navigate and operate, store and report the product that customers want to buy, and an application that can be deployed on desktop or client/server architecture i.e provide the following features:

• Highly user-friendly • Cross-platform • Easy-to-use • Tested system to track unnoticed error • Data entry restricted to valid domains (to avoid errors)

II Current status business report

1) Software Interface (Shoppee)

Link: https://shopee.vn/

Figure 1 Shopee Homepage

Figure 2 Product details interface

Advantages:

● Modern interface ● User friendly ● Provide enough necessary function

Disadvantages:

● Error with a server when receiving large requests

2) Website Interface (Tiki) Link: https://tiki.vn/

Disadvantages:

● Error with a server when receiving large requests

3) Website Interface (Lazada) Link: https://www.lazada.vn/

Figure 4 Lazada Homepage

Advantages:

● Eye-catching interface, bright design ● Modern interface

● User friendly ● Provide enough necessary function

Disadvantages:

● Error with a server when receiving large requests

III Requirements Analyst

1) Functional Requirements

❖ Business functional requirements:

Storage: The information about:

- User: name, email, password, isAdmin, isSeller - seller: name, logo, description, rating, numReviews - review: name, comment, rating

- product: name, seller, image, brand, category, description, price, countInStock, rating, numReviews, reviews

- order: name, qty, image, price, product - shippingAddress: fullName, address, city, postalCode, country, lat,

lng - paymentResult: id, status, update_time, email_address

- revenue: calculate shop revenue by day and compare data - itembyCart: calculate total product of each category

- Log out of the system - Customer rate and comment on products - Clients buy products

- Add, Delete, Edit products (admin/Seller) - Update personal information

- Customer can check their current order details - Payment method: Paypal, VNPay, Coin

- Customer can search by sort, category, price, star - Customer can chat to admin

- Admins choose sellers - Admin update order status - Customer can add, edit, delete, confirm product order in cart

❖ User Modules:

Admin: This user account is meant for the administrator who manages all

account roles, view order list, update order’s status, manage account role requests The privileges allowed to the admin account are:

- View all accounts listed in the system - View statistic and revenue in the system - View chat for support

- Change account information - View comments of products

Seller: This user account is meant for shop owners to add, delete, update

products, and manage orders The privileges allowed to the seller account are:

- Create, edit product information, and delete product - Proceed and edit orders

- View order statistic and details - View comments of products

- Change account information

User: This user account is meant for customer to buy products, confirm

order, check out The privileges allowed to the user account are: - View products details on website

- Order products - Check out - Search/filter products - Leave comments - Change account information These users have been explained in detail further in the report, about their privilege’s activities, and overall functions

Division (administrator): admin User ID: ad

OD Function Type Constraint/Formula

Code

Form Code Notes

Find and list out all user account name

Division: Seller User ID: SO

OD Function Type Constraint/Formula

Code

Form Code Notes

Find and calculate data on system database

Show product’s comments

Division: User User ID: usr

OD Function Type Constraint/Formula

Code

Form Code Notes

Find and list out all product’s details

products

Searching

Find and list out all product’s details

Update account’s details

2 System Functional Requirement

ID Content Detailed description Note

s

1

Roles Privilege

● Admin has the privilege to manages all account roles, view order list, update order’s

status, manage account role requests ● The seller has the privilege to add, delete,

update products and manage orders ● The user has the privilege to buy products,

confirm order, check out

convenient, comfortable, and

intuitive

Usability

Support the ability to approximate lookup, seeking by content,

Easy to use for even

non-IT background

directly into the database

No longer than 5 seconds to accomplish

all tasks

searching must be optimal

convenient, comfortable, and

intuitive

Usability

Support the ability to approximate lookup, seeking by content,

3

Allow adding, editing multiple products Managing

products list

Compatibility

Products are added and updated directly into

the database

4

Speed of performing and searching must

be optimal

Efficiency

No longer than 5 seconds to accomplish

convenient,

Usability

Support the ability to approximate lookup, seeking by content,

comfortable, and intuitive

3

Allow adding products to cart and

proceed orders, sending money, and

managing their orders

Compatibility

All actions related to managing bills and money will directly be updated to the database

4

Speed of performing and searching must

be optimal

Efficiency

No longer than 5 seconds to accomplish

all tasks

CHAPTER 03: SOFTWARE DESIGN I Define Use Case Actor and Function

Guest - Search, Sort, View Product

- View Seller Page (seller product, seller

Administrator - Change Password

- Change Admin Profile - Update user Role - View all Orders - Update order delivery status - View revenue each month - Handle rollback order - Handle seller salary payment - View Statistics

- Logout

Seller - Change Password

- Change Seller Profile - Create, Edit, Delete Product - View Client Orders of Seller - View Revenue Each Month - View Your Seller Page - Logout

Client - Change Password

- Change User Profile - Create Order

- Rollback Order - View Order History - Search, Sort, View Product - View Seller Page (seller product, seller information) - Add/Remove to Cart

- Forget Pass - Logout

II Actor and Function Description

1) Actor Description

Guest - Login

- Forget Pass - Register

- Handle Product in Search Screen - Manage Cart (Add to Cart, Remove from Cart) - View Seller Page (seller product, seller

information) - Voice Command - Play Music

Administrator - Manage Accounts

- Manage Rollback - Manage Seller Salary Payment - Manage Order

- Analysis Revenue - Manage Personal Information - Logout

Seller - Manage Products

- Manage Seller’s Order - Manage Personal Information - Manage Seller's Shop Information - Handle Product in Search Screen - View Seller Page (seller product, seller

information) - Logout

Client - Manage Client Orders

- Manage Order History - Manage Cart

- Manage Personal Information - Handle Product in Search Screen - View Seller Page (seller product, seller

information) - Logout

2) Function Description

❖ Guest

Allow users to view all product of the website, sort by categories, price, or search by product

name

from cart

6 View Seller Page Allow users view all product of the seller they

like or find the seller information

specific functions

while shopping

❖ Administrator

Order Feature Description

lower

the payment for the clients

update the delivery status for client when the

goods successful delivery

account, revenue each month, …)

7

Manage Personal Information

Allow the admin to manage their own

information

8 Logout Allow admin to log out their account from

website

❖ Seller

Order Feature Description

products on the website

2

Manage Seller’s Order

Allow seller to view/search the client order have seller product and also view seller

revenue each month

Allow seller to manage their shop information (shop name, shop image, shop description,

payment method for admin to pay salary)

Allow seller view all product of the seller they like or find the seller information (can view

their own shop also)

website

Allow client to view/search the order and also

can rollback order

like or find the seller information

website

III Use Case Diagram

1) Use Case Diagram

Figure 5 Use-case diagram

2) Use Case Specification

This use-case starts when the user wants to access the system 1 Users select “Login” function on the system

2 The system displays the “Login” page 3 Users enter the correct username and password, 4 The system will return the user to the Homepage

Alternate Flows Title Description

Enter the wrong login information

The application will pop up the message to announce that the user inputs the wrong username/password The user can check and retry input again

Pre-Conditions Title Description

The user already has an account on the system

Post-Conditions Title Description

Extension Points

None

❖ Manage Accounts

Name Manage Accounts

Brief Description Administrator can view and delete other accounts

Actor(s) Administrator

Flow of Events Basic Flow

This use-case starts when the administrator chooses the function “Manage Account” The system displays the “Manage Courses” form

1 User logins to the system as Administrator 2 The administrator clicks the manage account on the admin menu 3 The list of accounts will appear with View/Delete button

The notification system has succeeded if the procedure has succeeded

Alternate Flows Title Description

the right to manage account

Pre-Conditions Title Description

The user (administrator) successfully login into the application

Post-Conditions Title Description

account in the website successfully

manage courses

Extension Points

None

❖ Manage Personal Information

Name Manage Personal Information

Brief Description Administrator, Seller, Client can get into the website to

change information/avatar/password

Actor(s) Administrator, Seller, Client

Flow of Events Basic Flow

This use-case starts when the administrator, seller, and the client choose the function “Manage Personal Information” The system displays the “Manage Personal Information” form

1 Administrator, seller, client inputs or change the required information (information, avatar, password

2 Press the "Save" button The notification system has succeeded if the procedure has succeeded

Alternate Flows Title Description

Pre-Conditions Title Description

The user (administrator, seller, client) successfully login into the application

Post-Conditions Title Description

change information of them