ĐẠI HỌC QUỐC GIA THÀNH PHỐ
HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG

NGHỆ THÔNG TIN KHOA CÔNG NGHỆ
PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN
THỰC PHẨM NÔNG NGHIỆP

Giảng viên:

ThS. Huỳnh Tuấn Anh

Sinh viên thực hiện:

Trần Linh Khuê Lam

19520137

Thành phố Hồ Chí Minh, năm 2022


ĐẠI HỌC QUỐC GIA THÀNH PHỐ
HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG

NGHỆ THÔNG TIN KHOA CÔNG NGHỆ
PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN
THỰC PHẨM NÔNG NGHIỆP

Giảng viên:

ThS. Huỳnh Tuấn Anh

Sinh viên thực hiện:

Trần Linh Khuê Lam

19520137

Thành phố Hồ Chí Minh, năm 2022


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU CHUNG

12

1.1.

Tổng quan đề tài

12

1.2.


Lý do chọn đề tài

12

1.3.

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

12

1.4.

Phạm vi nghiên cứu

13

1.4.1.

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

13

1.4.2.

Phạm vi địa lý:

13

1.4.3.


Phạm vi chức năng:

13

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

14

2.1.

React JS

14

2.2.

MongoDB

15

2.3.

Node JS

16

2.4.

Javascript


17

2.5.

Express JS

18

2.6.

GitHub

19

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG

20

3.1.

Kiến trúc hệ thống: Mơ hình MVC

20

3.2.

Chi tiết các thành phần trong hệ thống

21


CHƯƠNG 4: ĐẶC TẢ USE CASE

22

4.1.

Sơ đồ Use Case

22

4.2.

Danh sách tác nhân

25

4.3.

Danh sách Use Case

25

4.4.

Mô tả chi tiết Use Case

27

CHƯƠNG 5: THIẾT KẾ CƠ SỞ DỮ LIỆU


43

5.1.

Sơ đồ logic

43

5.2.

Danh sách các quan hệ

44

5.2.1.

Bảng cart : Người dùng

44

5.2.2.

Bảng ratings : Đánh giá sản phẩm

44

5.2.3.

Bảng orders: Đơn hàng


45

5.2.4.

Bảng products: Sản phẩm

46

5.2.5.

Bảng carts: Giỏ hàng

46

5.2.6.

Bảng productTypes: Phân loại sản phẩm

46

CHƯƠNG 6: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

47

6.1.

Danh sách màn hình

47


6.2.

Mơ tả chi tiết từng màn hình

48


6.2.1.

Trang chủ

49

6.2.2.

Đăng ký

51

6.2.3.

Đăng nhập

53

6.2.4.

Sản phẩm

55


6.2.5.

Chi tiết sản phẩm

57

6.2.6.

Sản phẩm yêu thích

59

6.2.7.

Giỏ hàng

61

6.2.8.

Thanh tốn

63

6.2.9.

Đăng xuất

65


CHƯƠNG 7: CÀI ĐẶT VÀ KIỂM THỬ

67

7.1.

Mơi trường cài đặt và kiểm thử:

67

7.2.

Kết quả kiểm thử

67

CHƯƠNG 8: KẾT LUẬN

68

8.1.

Tổng kết

68

8.2.

Khó khăn


68

8.3.

Kết quả đạt được

69

8.4.

Hạn chế của đồ án

69

8.5.

Hướng phát triển

69

CHƯƠNG 9: TÀI LIỆU THAM KHẢO

70


Báo cáo đồ án
1

ST

T

DANH MỤC TỪ VIẾT TẮT

Từ viết
tắt

Từ đầy đủ

Ý nghĩa

MVC

Model – View –
Controller

Mơ hình lập trình

2

CSDL

Cơ sở dữ liệu

Cơ sở dữ liệu cho ứng
dụng

3

API


Application
Programming
Interface

Giao diện lập trình ứng
dụng

1


Báo cáo đồ án
1

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, 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.
Để hồn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến:
Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đã
tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách,
tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin.
Em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Tuấn Anh đã tận tình giúp
đỡ, định hướng cách tư duy và cách làm việc khoa học. Đó là những góp ý hết sức q
báu khơng chỉ trong q trình thực hiện luận văn này mà cịn là hành trang tiếp bước
cho em trong quá trình học tập và lập nghiệp sau này.
Và cuối cùng, em xin gửi lời cảm ơn đến gia đình, tất cả thầy cơ trong khoa,
bạn bè, tập thể lớp PMCL2019.1 là những người luôn sẵn sàng sẻ chia và giúp đỡ
trong học tập và cuộc sống. Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau.

Trong q trình làm Đồ án này em khơng tránh khỏi được những sai sót, em
kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cơ để hồn thiện và phát triển
đồ án hơn cũng như trong Khóa luận tốt nghiệp trong

tương lai.

Em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ ln đồng
hành cùng mọi người.
Thành phố Hồ Chí Minh, … tháng … năm 2022
Sinh viên

TRẦN LINH KHUÊ LAM


Báo cáo đồ án
1

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ
MINH TRƯỜNG ĐẠI HỌC
CƠNG NGHỆ THƠNG TIN

CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT
NAM
Độc Lập - Tự Do - Hạnh Phúc
TP. HCM, ngày 20 tháng 12 năm 2022

ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: Ứng dụng đi chợ trực tuyến tích hợp gợi ý món ăn
Cán bộ hướng dẫn: ThS. Huỳnh Tuấn Anh
Thời gian thực hiện: Từ ngày 12/09/2022 đến ngày 27/12/2022

Sinh viên thực hiện:
Trần Linh Khuê Lam – 19520137

Nội dung đề tài
1. Lý do chọn đề tài:
Trước tình hình diễn biến phức tạp hiện nay, đặc biệt là ở các thành phố
lớn nhiều dân cư sinh sống, người dân được yêu cầu hạn chế ra ngoài để tránh sự
lây lan dịch bệnh. Nhưng để đáp ứng các nhu cầu sinh hoạt hàng ngày, đặc biệt là
việc bổ sung thực phẩm cho cơ thể cũng như là làm tăng sức đề kháng, sức khoẻ
mỗi người là điều cực kì quan trọng. Vì vậy mà, nhu cầu cần được đi chợ để cung
cấp thực phẩm cho bản thân, gia đình là một vấn đề thiết yếu đang được tất cả
mọi người quan tâm đến. Đồng thời, bên cạnh đó, cũng có nhiều người khơng có
đủ thời gian để đi chợ và khơng biết lộ trình học tiếp theo. Để đáp ứng những nhu
cầu đó, để phù hợp với điều kiện sống mới nhiều người đã tìm đến các dịch vụ đi
chợ online nhằm đảm bảo giãn cách xã hội mà vẫn đảm bảo vấn đề lương thực
cho cuộc sống, một ứng dụng có chức năng kết nối giữa các nhà cung cấp và
người dùng có nhu cầu cho mua thực thẩm là vơ cùng cần thiết. Từ những vấn đề
trên, nhóm em quyết định chọn đề tài này làm đồ án, phát triển một ứng dụng
cung cấp dịch vụ đi chợ online nhanh chóng kết hợp gợi ý món ăn để tiể kiệm thời
gian, tiện lợi nhanh chóng, hạn chế đến những nơi đơng người, giúp người dùng
thân thiện hơn với công nghệ.


Báo cáo đồ án
1

2. Mục tiêu:
● Xây dựng website cung cấp nền bán thực phẩm nông nghiệp trực tuyến cho
phép người dùng xem và mua sản phẩm theo nhu cầu.
● Tạo ra website có giao diện dễ nhìn, thân thiện với người dùng và có tính

thực tiễn cao để có thể triển khai vào thực tế.
● Tích hợp cổng thanh toán trong trang web.
● Xây dựng trang web quản lý sản phẩm, người dùng, đơn hàng để thống kê và
quản lý số liệu.
● Tổng hợp kết quả và viết báo cáo.
3. Tính mới/ Khác biệt của chức năng:
● Xậy dựng chức năng hỗ trợ gợi ý các sản phẩm giúp đề xuất các sản phẩm
hợp lí đến cho người dùng.
● Giao diện tối ưu đơn giản.
4. Phạm vi và đối tượng sử dụng:
● Tất cả mọi người có nhu cầu đi chợ mua thực phẩm.
● Quản trị viên quản lý hệ thống.
● Phạm vi môi trường: Trang web truy cập.
● Phạm vi địa lý: Trang web sử dụng tại Thành phố Hồ Chí Minh.
● Phạm vi chức năng:
o Chức năng quản lý sản phẩm.
o Chức năng đăng ký, đăng nhập và đăng xuất.
o Chức năng quản lý đơn hàng.
o Chức năng thanh toán.


Báo cáo đồ án
1

o Chức năng tìm kiếm, lọc, sắp xếp thực phẩm.
o Chức năng mua, thêm vào giỏ hàng các sản phẩm.
o Chức năng quản lý người dùng.
5. Phương pháp thực hiện:
● Phương pháp làm việc:
o Làm việc nhóm 1 thành viên thông qua phương thức online dưới sự

hướng dẫn của giảng viên hướng dẫn.
● Phương pháp nghiên cứu:
o Khảo sát các trang web đi chợ trực tuyến đã có trên thị trường.
o Phân tích u cầu sử dụng của người dùng.
o Nghiên cứu tài liệu các công nghệ liên quan.
o Đánh giá ưu khuyết điểm của các nền tảng.
o Tìm hiểu về các hệ thống hỗ trợ quyết định.
o Xây dựng website cung cấp nền tảng cho phép người dùng mua thực
phẩm.
o Xây dựng bộ dữ liệu cho hệ thống hỗ trợ quyết định dựa trên giá cả
thị trường.
● Phương pháp công nghệ:
o Xây dựng giao diện webiste để tương tác với người dùng.
o Quản lý source code thông qua Github.
o Sử dụng Notion, Google doc,… để quản lý tiến trình và tài liệu.
6. Nền tảng cơng nghệ:
● React JS
● MongoDB
● Node JS


Báo cáo đồ án
1

● Express JS
● Javascript
7. Kết quả mong đợi:
● Hoàn thiện website cho phép người dùng truy cập sử dụng các chức năng để
mua thực phẩm.
● Hoàn thiện website quản lý nội bộ dành cho quản trị viên.

● Xây dựng giao diện thân thiện, dễ sử dụng.
8. Hướng phát triển của đề tài:
● Sử dụng được đa dạng ngôn ngữ.
● Mở rộng thị trường ra khắp nước Việt Nam.
● Triển khai thêm phiên bản ứng dụng di động để dễ dàng phục vụ tốt hơn cho
nhu cầu của người dùng.
9. Kế hoạch làm việc và phân công công việc:
● Thời gian thực hiện từ ngày 12/09/2022 đến ngày kết thúc mơn Đồ án 1
27/12/2022. Nhóm chia thành 3 giai đoạn cụ thể:
● Giai đoạn 1: Nghiên cứu các nền tảng cơng nghệ và hồn thiện giao diện
người dùng với các tính năng cơ bản (12/09/2022 – 31/10/2022)
● Giai đoạn 2: Xây dựng cơ sở dữ liệu và các chức năng của ứng dụng
(01/10/2022 – 30/11/2022)
● Giai đoạn 3: Hoàn thành ứng dụng, tổng hợp và viết báo cáo (01/12/2022 –
27/12/2022)
STT

Công việc
Giai đoạn 1: 12/09/2022 – 31/10/2022

Người phụ trách


Báo cáo đồ án
1

Khảo sát các nền tảng đi
1

chợ trực tuyến có mặt trên


Lam

thị trường
Nghiên cứu về các cơng
nghệ được sử dụng:

2

MongoDB, Node JS, React

Lam

JS, Figma, Javascript,…
Viết đặc tả hệ thống, vẽ

3

các sơ đồ Use Case
Thiết kế UI/UX cho

4

website bằng Figma

Lam
Lam

Xây dựng ứng dụng cơ bản
theo kiến trúc Client –

5

Server với ReactJS tại

Lam

Client và Node JS tại
Server
Giai đoạn 2: 01/10/2022 – 30/11/2022
Xây dựng cơ sở dữ liệu

6

cho website
Xây dựng API cho các

7

chức năng của website

Lam
Lam

Xây dựng giao diện người
8

dùng theo mẫu thiết kế từ

Lam


giai đoạn 1
Giai đoạn 3: 01/11/2022 – 27/12/2022
9
10
Xác nhận của CBHD

Hoàn thành các chức năng
và giao diện website
Tổng hợp và viết báo cáo

Lam

TPHCM, ngày 18 tháng 09 năm 2022
Sinh viên

(Ký tên và ghi rõ họ tên)

Lam

(Ký tên và ghi rõ họ tên)


Báo cáo đồ án
1

ThS. Huỳnh Tuấn Anh

Trần Linh Khuê Lam



Báo cáo đồ án
1

NỘI DUNG
CHƯƠNG 1:

GIỚI THIỆU CHUNG

1.1. Tổng quan đề tài
-

Tên ứng dụng: Organic

-

Chủ đề chính: Bán thực phẩm nơng nghiệp

-

Nền tảng phát triển: Trình duyệt web

-

Mơ hình phát triển: MVC
1.2. Lý do chọn đề tài
Trước tình hình diễn biến phức tạp hiện nay, đặc biệt là ở các thành phố lớn

nhiều dân cư sinh sống, người dân được yêu cầu hạn chế ra ngoài để tránh sự lây lan
dịch bệnh. Nhưng để đáp ứng các nhu cầu sinh hoạt hàng ngày, đặc biệt là việc bổ
sung thực phẩm cho cơ thể cũng như là làm tăng sức đề kháng, sức khoẻ mỗi người là

điều cực kì quan trọng. Vì vậy mà, nhu cầu cần được đi chợ để cung cấp thực phẩm
cho bản thân, gia đình là một vấn đề thiết yếu đang được tất cả mọi người quan tâm
đến. Đồng thời, bên cạnh đó, cũng có nhiều người khơng có đủ thời gian để đi chợ và
khơng biết lộ trình học tiếp theo. Để đáp ứng những nhu cầu đó, để phù hợp với điều
kiện sống mới nhiều người đã tìm đến các trang web bán thực phẩm online nhằm đảm
bảo giãn cách xã hội mà vẫn đảm bảo vấn đề lương thực cho cuộc sống, một trang
web có chức năng kết nối giữa các nhà cung cấp và người dùng có nhu cầu mua thực
thẩm là vô cùng cần thiết. Từ những vấn đề trên, em quyết định chọn đề tài này làm đồ
án, phát triển một trang web cung cấp thực phẩm nông nghiệp online để tiể kiệm thời
gian, tiện lợi nhanh chóng, hạn chế đến những nơi đông người, giúp người dùng thân
thiện hơn với công nghệ.
1.3. Đối tượng sử dụng
Tất cả mọi người muốn đi chợ mua thực phẩm trực tuyến một cách tiết kiệm
thời gian và nhanh chóng, tiện lợi hoặc hạn chế về việc đến và tiếp xúc ở nơi đông
người để tránh lây nhiễm bệnh.
Quản trị viên phía cửa hàng muốn cung cấp thông tin (về sản phẩm, về nguồn
gốc xuất xứ, về các chương trình giảm giá khuyến mãi…) đến mọi người truy cập sử
dụng trang web.


Báo cáo đồ án
1

1.4. Phạm vi nghiên cứu
1.4.1. Phạm vi môi trường:

- Trang web truy cập.
1.4.2. Phạm vi địa lý:
- Trang web được sử dụng tại Thành phố Hồ Chí Minh.
1.4.3. Phạm vi chức năng:

- Chức năng quản lý sản phẩm.
- Chức năng đăng ký, đăng nhập và đăng xuất.
- Chức năng quản lý đơn hàng.
- Chức năng thanh toán.
- Chức năng tìm kiếm, lọc, sắp xếp thực phẩm.
- Chức năng mua, thêm vào giỏ hàng các sản phẩm.
- Chức năng quản lý người dùng.


Báo cáo đồ án
1

1.1.

CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT

React JS

Hình 2.1-1 React JS
React JS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook
xây dựng và phát triển. Thư viện này được sử dụng để tạo ra các ứng dụng trang web
hấp dẫn với hiệu quả cao, tốc độ load nhanh và mã tối thiểu. Mỗi website sử dụng
ReactJS phải chạy nhanh, mượt và có khả năng mở rộng cao, thao tác thực hiện đơn
giản.
Có thể nói, hầu hết các tính năng hay sức mạnh của ReactJS thường bắt đầu từ
việc tập trung vào các phần riêng lẻ. Do đó thay vì làm việc trên tồn bộ ứng dụng của
website thì ReactJS lại cho phép các Developer phá vỡ giao diện phức tạp của người
dùng trở nên đơn giản hơn nhiều. Điều này có nghĩa là các Render dữ liệu khơng chỉ

được thực hiện ở vị trí server mà cịn có thể thực hiện ở vị trí Client khi sử dụng
ReactJS.


Báo cáo đồ án
1

1.2.

MongoDB

Hình 2.2-1: MongoDB
MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*)
hàng đầu, được hàng triệu người sử dụng. MongoDB được viết bằng C++. Ngoài ra,
MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection
và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ
dàng.


Báo cáo đồ án
1

1.3. Node JS

Hình 2.3-1: Node JS
NodeJS là một mơi trường runtime chạy JavaScript đa nền tảng và có mã nguồn
mở, được sử dụng để chạy các ứng dụng web bên ngồi trình duyệt của client. Nền
tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp
hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mơ hình hướng sự kiện
(event-driven) khơng đồng bộ.



Báo cáo đồ án
1

1.4. Javascript

Hình 2.4-1: Javascript
Javascript là ngôn ngữ lập trình webiste phổ biến hiện nay, nó được tích hợp và
nhúng vào HTML giúp website trở nên sống động hơn. Javascript đóng vai trị như là
một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng
như phía máy chủ (NodeJS) tạo ra các trang web động.


Báo cáo đồ án
1

1.5. Express JS

Hình 2.5-1: Express JS
Express JS là một framework nhỏ, nhưng linh hoạt được xây dựng trên nền
tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile.
Về c.ác package hỗ trợ: Expressjs có vơ số các package hỗ trợ nên các bạn không phải
lo lắng khi làm việc với Framework này. Về performance: Express cung cấp thêm về
các tính năng (feature) để dev lập trình tốt hơn. Chứ khơng làm giảm tốc độ của
NodeJS. Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng
ExpressJS như một core function, chẳng hạn: Sails JS, MEAN,…


Báo cáo đồ án

1

1.6. GitHub

Hình 2.8-1: Hệ thống quản lý mã nguồn GitHub
GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống như
một mạng xã hội cho lập trình viên. Các lập trình viên có thể clone lại mã nguồn từ
một repository và nó chính là một dịch vụ máy chủ repository cơng cộng, mỗi người
có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc.
Github có đầy đủ những tính năng của Git, ngồi ra nó cịn bổ sung những tính năng
về social để các developer tương tác với nhau. Github cung cấp các tính năng social
networking như feeds, followers, và network graph để các developer học hỏi kinh
nghiệm của nhau thông qua lịch sử commit.

P
A

XÂY DỰNG WEBSITE
BÁN THỰC PHẨM
NÔNG NGHIỆP