Xây dựng website thương mại điện tử về thực phẩm thuần

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA
CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1
XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỀ THỰC
PHẨM THUẦN

GV HƯỚNG DẪN : ThS. Trần Anh Dũng

SINH VIÊN THỰC HIỆN :
Sa Đam: 20541154

TH. HỒ CHÍ MINH, 6 THÁNG 7 NĂM 2023


LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường
Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em đã được trang bị các
kiến thức cơ bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của
mình.

Em xin chân thành cảm ơn sự hướng dẫn tận tình của thầy Trần Anh Dũng người đã tận tình hướng dẫn em trong suốt quá trình nghiên cứu và hồn thành
đồ án này. Em ln được Thầy tạo điều kiện tốt nhất để nghiên cứu và học tập,
cũng như dành nhiều thời gian quý báu để trao đổi và cùng làm việc.
Vì kiến thức của chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi những
thiếu sót trong q trình thực hiện đồ án. Vì vậy em ln mong đợi nhận được
những ý kiến đóng góp từ phía giảng viên để có thể rút kinh nghiệm, tự sửa chữa,
hoàn thiện hơn khi thực hiện tiếp đồ án 2.

Thành phố Hồ Chí Minh, ngày 6 tháng 7 năm 2023
Sinh viên thực hiện
Sa Đam


Nhận xét của giảng viên
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………….

……., ngày……...tháng……năm 2022

Người nhận xét
(Ký tên và ghi rõ họ tên)

Mục Lục

Nhận xét của giảng viên........................................................................................................................

Chương 1 : GIỚI THIỆU CHUNG.....................................................................................


1.1. Tổng quan đề tài.......................................................................................................
1.2. Lý do chọn đề tài......................................................................................................
1.3. Đối tượng sử dụng....................................................................................................
Chương 2 : CƠ SỞ LÝ THUYẾT.......................................................................................
Chương 3 : KHẢO SÁT VÀ PHÂN TÍCH KIẾN TRÚC
HỆ THỐNG..........................................................................................................................
3.1 Đối tượng khảo sát....................................................................................................

3.2 Xác định yêu cầu và mô hình hóa u cầu...................................................................................
3.2.1 Xác định u cầu.................................................................................................................
3.2.1.1 Về tổ chức........................................................................................................................
3.2.1.2 Về nghiệp vụ.....................................................................................................................
3.2.1 Mơ hình hóa u cầu...........................................................................................................
3.2.1.1 Danh sách yêu cầu...........................................................................................................

3.3 Tổng quát chức năng.................................................................................................

3.3.1 Sơ đồ Usecase....................................................................................................................

3.3.2 Danh sách actor.................................................................................................

3.3.2 Đặc tả Use-case..................................................................................................................
3.3.3 Sequence Diagram..............................................................................................................
3.3.4 Activity diagram...................................................................................................................
3.4 Thiết kế hệ thống..........................................................................................................................

3.3.1 Sơ đồ lớp mức phân tích.....................................................................................................
3.5 Thiết kế chatbot............................................................................................................................

CHƯƠNG 4
THIẾT KẾ, HIỆN THỰC GIAO DIỆN...............................................................................
-

1. Danh sách các màn hình..........................................................................................................
Màn hình đăng nhập.................................................................................................................
Màn hình đăng ký......................................................................................................................
Màn hình trang chủ khách hàng................................................................................................
Màn hình trang chủ quản lý.......................................................................................................
Màn hình sản phẩm khách hàng...............................................................................................
Màn hình giỏ hàng.....................................................................................................................
Khung xem trước giỏ hàng........................................................................................................
Màn hình đặt hàng....................................................................................................................
Màn hình danh sách sản phẩm.................................................................................................
Màn hình thêm sản phẩm..........................................................................................................
Màn hình sửa sản phẩm...........................................................................................................
Màn hình chi tiết sản phẩm.......................................................................................................
Màn hình danh sách loại sản phẩm...........................................................................................
Màn hình thêm loại sản phẩm...................................................................................................
Màn hình sửa loại sản phẩm.....................................................................................................


-

Màn hình chi tiết loại sản phẩm.................................................................................................
Màn hình danh sách khách hàng..............................................................................................
Màn hình thêm khách hàng.......................................................................................................

Màn hình sửa khách hàng.........................................................................................................
Màn hình chi tiết khách hàng.....................................................................................................
Màn hình danh sách đơn hàng..................................................................................................
Màn hình chốt đơn hàng...........................................................................................................
Màn hình thêm đơn hàng..........................................................................................................
Màn hình thống kê đơn hàng....................................................................................................
Màn hình chi tiết đơn hàng........................................................................................................
Màn hình danh sách bài viết......................................................................................................
Màn hình thêm bài viết..............................................................................................................
Màn hình sửa bài viết................................................................................................................
Màn hình chi tiết bài viết............................................................................................................
Màn hình danh sách tài khoản..................................................................................................
Màn hình thêm tài khoản...........................................................................................................
Màn hình sửa tài khoản.............................................................................................................
Màn hình chi tiết tài khoản.........................................................................................................
2. Màn hình đăng nhập.................................................................................................................
3. Màn hình đăng ký.....................................................................................................................
4. Màn hình trang chủ khách hàng...............................................................................................
5. Màn hình trang chủ quản lý......................................................................................................
6. Màn hình sản phẩm khách hàng...............................................................................................
7. Khung giỏ hàng........................................................................................................................

Chương 4 : KẾT LUẬN......................................................................................................

4.1 Tổng kết.......................................................................................................................................
4.2 Kết quả đạt được..........................................................................................................................
4.3 Khó khăn và hạn chế....................................................................................................................

Chương 5 : HƯỚNG PHÁT TRIỂN...................................................................................
TÀI LIỆU THAM KHẢO....................................................................................................

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:
XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỀ SẢN PHẨM THUẦN CHAY
Cán bộ hướng dẫn:
■ ThS. Trần Anh Dũng
Thời gian thực hiện: Từ ngày 27/2/2023 đến ngày 06/07/2023.
Sinh viên thực hiện:
Sa Đam – 20521154
Nội dung đề tài
1.

Lý do chọn đề tài:
Ngày nay, có ngày càng nhiều người quan tâm đến thực phẩm thuần chay vì lý

do sức khỏe, sở thích, đạo đức, tơn giáo hay bảo vệ môi trường. Thị trường thuần
chay đang phát triển và có tiềm năng lớn trong tương lai. Cùng với đó là sự phát
triển của cơng nghệ, mua sắm trực tuyến ngày càng được nhiều người ưa chuộng
bởi sự tiện lợi và nhanh chóng. Đây là một cơ hội để phát triển một website thương
mại điện tử về thực phẩm thuần chay để phục vụ cho nhu cầu người tiêu dùng.
Chính vì điều đó, việc có một website thương mại điện tử về thực phẩm về
thực phẩm thuần chay giúp cho người tiêu dùng có thể dễ dàng tiếp cận và mua sắm
các sản phẩm mà họ cần. Đây cũng là một cơ hội để kết nối với đông đảo khách hàng
tiềm năng và tăng doanh số bán hàng.
Ngoài ra, việc chủ cửa hàng có một Website riêng cho cửa hàng cũng giúp dễ
dàng thống kê và quản lý cửa hàng.
Cùng với những lý do trên và em cũng là một người ăn uống thuần chay. Việc
xây dựng một website thương mại điện tử về thực phẩm thuần chay là một đề tài hấp

dẫn và tiềm năng.
2.

Mục tiêu:
-

Xây dựng website:
+ Ứng dụng chạy trên nền tảng Web.
+ Giới thiệu về cửa hàng, sản phẩm, bài viết, tin tức, thông tin liên hệ một
cách trực quan, đem đến cho người dùng những thông tin chi tiết nhất.
+ Cung cấp giao diện quản lý, có thể quản lý sản phẩm, bài viết, tin tức,
thông tin tài khoản.
+ Cung cấp các thống kê, biểu đồ trực quan số liệu, hỗ trợ công tác quản
trị doanh nghiệp.

3.

Phạm vi:
-

Phạm vi môi trường: Web.

-

Phạm vi chức năng:
+ Hệ thống cung cấp giao diện mua hàng tiện lợi, dễ sử dụng.
+ Hệ thống cung cấp giao diện quản lý giúp chủ cửa hàng theo dõi doanh
số, quản lý hàng tồn kho.

+ Hệ thống cung cấp giao diện đăng ký, đăng nhập giúp xác thực người
dùng.
+ Hệ thống cung cấp tính năng giỏ hàng hỗ trợ người mua đơn giản hóa
quá trình mua hàng.

4.

Đối tượng sử dụng:
-

Khách hàng có nhu cầu mua đồ thuần chay online hoặc muốn biết những thông
tin đến sản phẩm, món ăn thuần chay và thơng tin cửa hàng.

5.

Chủ cửa hàng, nhân viên, quản lý cửa hàng.
Phương pháp thực hiện:

-

Phương pháp làm việc:
Làm việc thông qua 2 hình thức online và offline dưới sự hướng dẫn trực


tiếp của giảng viên hướng dẫn thực hiện đồ án.

-

Phương pháp nghiên cứu:
Phân tích nhu cầu sử dụng của đối tượng người dùng.

Khảo sát ứng dụng tương tự
Nghiên cứu tài liệu các công nghệ liên quan.

-

Phương pháp công nghệ:
Xây dựng giao diện Web để người dùng có thể tương tác với ứng dụng.
Quản lý source code thông qua Github.
Sử dụng Google drive, Notion… để quản lý tiến trình và tài liệu .

6.

Nền tảng công nghệ:
-

Front-end: ReactJS, TaldwindCSS.

-

Back-end: NodeJS, ExpressJS.

-

Database: MongoDB.

-

Visual Studio Code.

-

Thiết kế: Figma.

7.

Kết quả mong đợi:
-

8.

Website hoạt động ổn định, các chức năng đáp ứng tốt.
Hướng phát triển của đề tài:

-

Nâng cấp source code, tăng tốc độ xử lý của Web nhanh chóng, ổn định.

-

Nâng cấp giao diện, chuyển đổi chủ đề tối và sáng, thêm bộ chuyển đổi ngôn
ngữ sang tiếng Anh.

9.

-

Nâng cấp chuyên sâu chức năng quản lý.

-

Thêm chức năng chatbot hỗ trợ tư vấn người mua.
Kế hoạch làm việc:
Thời gian thực hiện từ ngày 28/2/2023 đến ngày 17/06/2023


Nhóm chia thành 3 giai đoạn cụ thể:
Giai đoạn 1: Khởi động dự án. Gồm 3 sprint với thời gian mỗi sprint kéo dài 2 tuần:
Thời gian: 27/2/2023 – 9/4/2023
Sprint 1: Đăng ký đề tài, soạn đề cương chi tiết.
Sprint 2: Khâu chuẩn bị tài liệu đặc tả cho đồ án.
Sprint 3: Xây dựng giao diện và các tính năng thêm xóa sửa cơ bản.
Sprint

Thời gian

Cơng việc dự kiến

Sprint 1

27/02/2023 – 12/03/2023

Đăng ký đề tài
Tìm hiểu và xác định phạm vi, hướng
phát triển của đề tài
Tìm hiểu và phân tích các yêu cầu
nghiệp vụ của đề tài
Viết tài liệu, đề cương chi tiết

Sprint 2

13/03/2023 – 26/03/2023

Tìm hiểu cơng nghệ
Xây dựng sơ đồ lớp
Xây dựng sơ đồ use case
Xây dựng sơ đồ ERD
Tham khảo các giao diện có sẵn trên
thị trường

Sprint 3

27/03/2023 – 9/04/2023

Tìm

hiểu

cơng

nghệ

Thiết kế giao diện, bản vẽ.
Xây dựng hệ thống CSDL.
Chuẩn bị báo cáo giữa kỳ
Giai đoạn 2: Phát triển trang web. Gồm 4 sprint với thời gian mỗi sprint kéo dài 2


tuần:
Thời gian: 24/04/2023 – 4/06/2023
Sprint 4: Xây dựng các tính năng cơ bản của ứng dụng và chuẩn bị báo cáo giữa kỳ

Sprint 5: Phát triển các chức năng của ứng dụng
Sprint 6: Hồn thiện tính năng ứng dụng.
Sprint 7: Kiểm thử và hồn thiện tính năng, triển khai ứng dụng.
Sprint

Thời gian

Công việc dự kiến

Sprint 4

10/04/2023 – 23/04/2023 Xây dựng cơ bản giao diện
quản lý.
Liên kết CSDL.
Lập trình các chức năng
quản lý ở BackEnd.

Sprint 5

24/04/2023 – 7/05/2023 Xây dựng giao diện người
dùng cơ bản (khách của
cửa hàng)
Phát triển các tính năng ở
người dùng (khách của cửa
hàng).

Sprint 6

8/05/2023 – 21/05/2023 Tiếp tục phát triển các tính
năng cịn thiếu.

Sprint 7

22/05/2023 – 4/06/2023 Kiểm thử và hồn thiện
tính năng, triển khai ứng
dụng.


Giai đoạn 3: Tổng kiểm thử và viết báo cáo. Gồm 1 sprint kéo dài đến khi kết thúc:
Thời gian: 5/06/2023 – kết thúc
Sprint 8: Tổng kiểm thử và viết báo cáo.
Sprint

Thời gian

Công việc dự kiến

Sprint 8

5/06/2023 – kết thúc

Tổng kiểm thử và viết báo
cáo

Tp.Hồ Chí Minh, ngày 12 tháng 3 năm 2023


Chương 1 : GIỚI THIỆU CHUNG
1.1.

Tổng quan đề tài

Tên đề tài: Xây dựng website thương mại điện tử về thực phẩm thuần chay
Nền tảng phát triển: Website trên máy tính.

1.2.

Lý do chọn đề tài

Ngày nay, có ngày càng nhiều người quan tâm đến thực phẩm thuần chay
vì lý do sức khỏe, sở thích, đạo đức, tơn giáo hay bảo vệ mơi trường. Thị trường
thuần chay đang phát triển và có tiềm năng lớn trong tương lai. Cùng với đó là sự
phát triển của công nghệ, mua sắm trực tuyến ngày càng được nhiều người ưa
chuộng bởi sự tiện lợi và nhanh chóng. Đây là một cơ hội để phát triển một
website thương mại điện tử về thực phẩm thuần chay để phục vụ cho nhu cầu
người tiêu dùng.
Chính vì điều đó, việc có một website thương mại điện tử về thực phẩm về
thực phẩm thuần chay giúp cho người tiêu dùng có thể dễ dàng tiếp cận và mua
sắm các sản phẩm mà họ cần. Đây cũng là một cơ hội để kết nối với đông đảo
khách hàng tiềm năng và tăng doanh số bán hàng.
Ngoài ra, việc chủ cửa hàng có một Website riêng cho cửa hàng cũng giúp
dễ dàng thống kê và quản lý cửa hàng.
Cùng với những lý do trên và em cũng là một người ăn uống thuần chay. Việc
xây dựng một website thương mại điện tử về thực phẩm thuần chay là một đề tài
hấp dẫn và tiềm năng.

1.3.
-

Đối tượng sử dụng

Khách hàng có nhu cầu mua đồ thuần chay online hoặc muốn biết những
thông tin đến sản phẩm, món ăn thuần chay và thơng tin cửa hàng.


-

Chủ cửa hàng, nhân viên, quản lý cửa hàng.

1.4.

Phạm vi nghiên cứu

-

Phạm vi môi trường: Web.

-

Phạm vi chức năng:
+ Hệ thống cung cấp giao diện mua hàng tiện lợi, dễ sử dụng.
+ Hệ thống cung cấp giao diện quản lý giúp chủ cửa hàng theo dõi
doanh số, quản lý hàng tồn kho.
+ Hệ thống cung cấp giao diện đăng ký, đăng nhập giúp xác thực người
dùng.
+ Hệ thống cung cấp tính năng giỏ hàng hỗ trợ người mua đơn giản
hóa q trình mua hàng.
+ Tích hợp chatbot

Chương 2 : CƠ SỞ LÝ THUYẾT

2.1 IDE – Visual Studio Code

Hình 2.1-1: Visual Studio Code
Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi
Microsoft dành cho Windows, Linux và macOS. Visual Studio Code là một trong
những trình biên tập mã phổ biến nhất hiện nay, và đang ngày càng chứng tỏ ưu
thế vượt trội của mình so với những phần mềm khác. Nó hỗ trợ chức năng
debug, đi kèm với Git, có chức năng nổi bật cú pháp (syntax highlighting), tự hồn
thành mã thơng minh, snippets, và cải tiến mã nguồn.
Visual Studio Code có rất nhiều ưu điểm vượt trội so:
-

Hỗ trợ đa nền tảng: Windows, Linux, Mac
Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript,
JSON

-

Ít dung lượng
Tính năng mạnh mẽ
Intellisense chuyên nghiệp
Giao diện thân thiện
Là phần mềm miễn phí


2.1.

HTML

Hình 2.2-1: HyperText Markup Language — HTML
HTML viết tắt cho HyperText Markup Language được sử dụng để thiết kế
các trang web sử dụng ngôn ngữ đánh dấu (Markup language). HTML có sự kết
hợp giữa Hypertext và Markup language. Hypertext định nghĩa liên kết giữa các
trang web. Ngôn ngữ đánh dấu được dùng để định nghĩa tài liệu bên trong các
thẻ tạo nên cấu trúc của các trang web, nhằm giúp mày tình có thể nhận dạng,
hiểu và kiểm sốt văn bản. Hầu hết các ngơn ngữ đánh dấu đều có thể dễ dàng
đọc hiểu bởi người lập trình. Ngơn ngữ đánh dấu dùng thẻ để định dạng xem văn
bản có thể được kiểm soát và thao tác thế nào.
HTML là một ngơn ngữ đánh dấu ứng dụng trong trình duyệt để quản lý
văn bản, hình ảnh, và các nội dung khác, nhằm trình bày chúng theo định dạng
được yêu cầu. HTML được sáng tạo bởi Tim Berners-Lee vào năm 1991. Phiên
bản đầu tiên của HTML là HTML 1.0 nhưng bản tiêu chuẩn lại là HTML 2.0, ra mắt
vào năm 1999.


2.2.

CSS

Hình 2.3-1: Cascading Style Sheets — CSS
CSS viết tắt cho Cascading Style Sheets, là ngôn ngữ dùng để mô tả cách
trình bày của các trang web, tạo style sheets cho web. Nó có sự hỗ trợ của HTML
và có thể được sử dụng với bất kì ngơn ngữ đánh dấu dạng XML nào.
CSS là công nghệ đầu tiên mà bạn nên học sau HTML. Khi HTML được sử
dụng để định nghĩa cấu trực và ý nghĩa cho nội dung web, CSS được dùng để
trang trí và trình bày nó. Ví dụ, bạn có thể dùng CSS để thay đổi phơng, màu, kích
thước, và khoảng cách các nội dung, chia chúng thành nhiều cột, hoặc thêm các
hoạt ảnh và các tính năng trang trí khác.

2.3. Javascript

Hình 2.4-1: JavaScript
JavaScript, theo phiên bản hiện hành, là một ngơn ngữ lập trình thơng dịch
được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi
cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn
được phát triển bởi Brendan Eich tại Hãng truyền thơng Netscape. Giống Java,
JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở
rộng thường được dùng cho tập tin mã nguồn JavaScript.
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang
web động và một số hiệu ứng hình ảnh thơng qua DOM. JavaScript được dùng để
thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra
thông tin nhập vào, tự động thay đổi hình ảnh,...


2.4.

ReactJS

Hình 2.5-1: ReactJS
ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây
dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại. ReactJS giúp
phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component).
Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. ReactJS
ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong
các sản phẩm của mình như WhatsApp & Instagram.
ReactJS được dùng để xây dựng các ứng dụng [single page application]
(SPA). Một trong những điểm hấp dẫn của ReacJS là nó khơng chỉ được xây dựng

bên phía clients mà cịn sử dụng được bên phía server.


2.5.

NodeJS

Hình 2.6-1: nodeJS
NodeJS là mã nguồn mở chạy trên môi trường V8 JavaScript runtime (một
trình thơng dịch JavaScript chạy cực nhanh trên trình duyệt Chrome). NodeJS
giúp các nhà phát triển xây dựng các ứng dụng web một cách đơn giản và dễ
dàng mở rộng.
NodeJS có thể được dùng để xây dựng các loại ứng dụng khác nhau như
các ứng dụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời gian
thực, máy chủ REST API,.. Tuy nhiên, NodeJS thường được dùng chủ yếu để xây
dựng các chương trình mạng như máy chủ web, tương tự như PHP, Java hoặc
ASP.NET.
Vì đây là mã nguồn mở nên cho phép bạn sử dụng miễn phí và đồng thời
được liên tục được chỉnh sửa, cải tiến bởi cộng đồng các nhà phát triển toàn cầu.


2.6.

Npm

Hình 2.7-1: Node package manager – npm
NMP là viết tắt của Node package manager là một công cụ tạo và quản lý các
thư viện lập trình Javascript cho Node.js. Trong cộng đồng Javascript, các lập trình
viên chia sẻ hàng trăm nghìn các thư viện với các đoạn code đã thực hiện sẵn một
chức năng nào đó. Nó giúp cho các dự án mới tránh phải viết lại các thành phần cơ

bản, các thư viện lập trình hay thậm chí cả các framework. Nói cách khách, NPM giúp
bạn quản lý, tải và include các thư viện có sẵn. Cộng đồng sử dụng npm rất lớn, hàng
nghìn các thư viện được phát hành, hỗ trợ Javascript ES6, React, Express, Grunt,
Duo…
2.7. MongoDB

-

Hình 2.8-1: MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là cơ sở dữ liệu
thuộc NoSql và được hàng triệu người sử dụng.
MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu