ĐẠ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

BÁO CÁO ĐỒ ÁN 2
Đề tài: Xây dựng website bán mỹ phẩm tích hợp phân tích
thành phần hóa học trong mỹ phẩm

Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh
Nhóm thực hiện:
19521421 – Lâm Nguyễn Bửu Duy
19521880 – Nguyễn Thanh Nga

TP. HỒ CHÍ MINH, 2022


NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................

................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................

……., ngày……...tháng……năm 2022
Người nhận xét
(Ký tên và ghi rõ họ tên)

1


LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triển đề tài “Xây dựng website mua bán mỹ phẩm
tích hợp phân tích thành phần hóa học trong mỹ phẩm” chúng em đã nhận được sự giúp đỡ,
chỉ bảo nhiệt tình của thầy để hồn thành đồ án này.
Nhóm em xin chân thành gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh – Giảng viên Khoa Công
nghệ phần mềm, Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí
Minh – giảng viên hướng dẫn mơn Đồ án 2, đã tận tình hướng dẫn và giúp đỡ về kiến thức,
phương pháp cho chúng em trong suốt q trình thực hiện và hồn thành đồ án.
Hi vọng với sự chỉ bảo và góp ý từ thầy, nhóm đề tài có thể tiếp tục phát triển để website
ngày càng được mở rộng và phục vụ được tốt hơn cho người dùng.
Mặc dù đã có nhiều cố gắng trong suốt q trình thực hiện đề tài, song khơng thể tránh khỏi
những hạn chế, thiếu sót. Chúng em mong rằng sẽ nhận được những đóng góp và nhận xét
chân thành từ thầy, từ các bạn sinh viên và người dùng trong quá trình sử dụng phần mềm để
phần mềm ngày càng hồn thiện hơn nữa. Mọi đóng góp xin vui lịng gửi về địa chỉ email:


Mỗi ý kiến đóng góp của thầy và các bạn sẽ là một nguồn động lực to lớn đối với chúng em
để chúng em có thể cải thiện phần mềm tốt hơn và xây dựng những phần mềm hữu ích đối
với người dùng hơn nữa.
Chúng em xin trân trọng cảm ơn.

Thành phố Hồ Chí Minh, ngày 10 tháng 6 năm 2022

2


Nộ i dung
Chương 1: GIỚI THIỆU ................................................................................................................7
1.1 Đặt vấn đề ............................................................................................................................7
1.2 Giải pháp ..............................................................................................................................7
1.3 Mục tiêu ...............................................................................................................................7
Chương 2: TỔNG QUAN ...............................................................................................................8
2.1 Tổng quan về đồ án ..............................................................................................................8
2.1.1 Tên đồ án: ...................................................................................................................8
2.1.2 Link github quản lý source code ................................................................................8
2.2 Công nghệ sử dụng ...............................................................................................................8
2.2.1 Ngơn ngữ lập trình Java-scripts..................................................................................8
2.2.2 ReactJs Framework ..................................................................................................10
2.2.3 Django Rest Framework...........................................................................................11
2.2.4 Phần mềm lập trình VSCode ....................................................................................13
2.2.5 Dịch vụ GitHub ........................................................................................................15
Chương 3: PHÂN TÍCH, THIẾT KẾ ..........................................................................................16
3.1 Cơ sở dữ liệu ......................................................................................................................16
3.1.1 Sơ đồ lớp ..................................................................................................................16
3.1.2 Chi tiết các thuộc tính...............................................................................................16

3.2 Yêu cầu chức năng .............................................................................................................23
3.2.1 Sơ đồ use case ..........................................................................................................23
3.2.2 Mô tả tác nhân ..........................................................................................................24
3.2.3 Mô tả use case ..........................................................................................................24
3.3. Đặc tả use case ..................................................................................................................25
UC1_Đăng ký ....................................................................................................................25
UC2_Đăng nhập ................................................................................................................26
UC3_Đổi mật khẩu............................................................................................................27
UC4_Quên mật khẩu .........................................................................................................28
UC5_Thiết lập tài khoản ...................................................................................................29
UC6_Tìm kiếm sản phẩm .................................................................................................30
UC7_Thêm vào giỏ hàng ..................................................................................................31
UC8_CRUD địa chỉ nhận hàng .........................................................................................32
UC9_Đặt hàng ...................................................................................................................34
UC10_Thêm vào mục yêu thích........................................................................................35
UC11_Đánh giá sản phẩm.................................................................................................36
UC12_Theo dõi đơn hàng .................................................................................................37
UC13_Tra cứu thành phần ................................................................................................38
UC14_Khóa tài khoản .......................................................................................................39
UC15_CRUD sản phẩm ....................................................................................................40
3


UC16_Cập nhật trạng thái đơn hàng .................................................................................42
3.4 Thiết kế giao diện ...............................................................................................................43
Chương 4: BẢNG PHÂN CÔNG CÔNG VIỆC .........................................................................53
Chương 5: NHẬN XÉT VÀ HƯỚNG PHÁT TRIỂN ................................................................55
5.1 Nhận xét .............................................................................................................................55
5.1.1 Kết quả đạt được ......................................................................................................55
5.1.2 Đánh giá về ứng dụng ..............................................................................................55

5.2 Hướng phát triển và mở rộng .............................................................................................56
Chương 6: YÊU CẦU CÀI ĐẶT ..................................................................................................57
TÀI LIỆU THAM KHẢO ............................................................................................................58

4


DANH MỤC HÌNH
Hình 1 Ngơn ngữ Javascript ............................................................................................................................. 8
Hình 2 Django rest framework ....................................................................................................................... 12
Hình 3 Phần mềm lập trình VSCode............................................................................................................... 13
Hình 4 Sơ đồ lớp ............................................................................................................................................. 16
Hình 5 Sơ đồ use case ..................................................................................................................................... 23
Hình 6 Sơ đồ hoạt động UC1_Đăng ký .......................................................................................................... 26
Hình 7 Sơ đồ hoạt động UC2_Đăng nhập ...................................................................................................... 27
Hình 8 Sơ đồ hoạt động UC3_Đổi mật khẩu .................................................................................................. 28
Hình 9 Sơ đồ hoạt động UC4_Quên mật khẩu ............................................................................................... 29
Hình 10 Sơ đồ hoạt động UC5_Thiết lập tài khoản ........................................................................................ 30
Hình 11 Sơ đồ hoạt động UC6_Tìm kiếm sản phẩm ...................................................................................... 30
Hình 12 Sơ đồ hoạt động UC7_Thêm vào giỏ hàng ....................................................................................... 31
Hình 13 Sơ đồ hoạt động UC8_CRUD địa chỉ nhận hàng ............................................................................. 33
Hình 14 Sơ đồ hoạt động UC9_Đặt hàng ....................................................................................................... 34
Hình 15 Sơ đồ hoạt động UC10_Thêm mục u thích ................................................................................... 35
Hình 16 Sơ đồ hoạt động UC11_Đánh giá ..................................................................................................... 36
Hình 17 Sơ đồ hoạt động UC12_Theo dõi đơn hàng...................................................................................... 37
Hình 18 Sơ đồ hoạt động UC13_Tra cứu thành phần ..................................................................................... 38
Hình 19 Sơ đồ hoạt động UC14_Khóa tài khoản ........................................................................................... 39
Hình 20 Sơ đồ hoạt động UC15_CRUD sản phẩm......................................................................................... 41
Hình 21 Sơ đồ hoạt động UC16_Cập nhật trạng thái đơn hàng ..................................................................... 42
Hình 22 Giao diện đăng ký ............................................................................................................................. 43

Hình 23 Giao diện đăng nhập ......................................................................................................................... 43
Hình 24 Giao diện quên mật khẩu .................................................................................................................. 44
Hình 25 Giao diện thiết lập tài khoản ............................................................................................................. 44
Hình 26 Giao diện trang chủ của khách hàng ................................................................................................ 45
Hình 27 Giao diện tìm kiếm sản phâm ........................................................................................................... 45
Hình 28 Giao diện chi tiết sản phẩm ............................................................................................................... 46
Hình 29 Giao diện thêm vào giỏ hàng ........................................................................................................... 46
Hình 30 Giao diện giỏ hàng ............................................................................................................................ 47
Hình 31 Giao diện CRUD địa chỉ nhận hàng.................................................................................................. 47
Hình 32 Giao diện xác nhận đặt hàng ............................................................................................................. 48
Hình 33 Giao diện sản phẩm u thích ........................................................................................................... 48
Hình 34 Giao diện danh mục sản phẩm .......................................................................................................... 49
Hình 35 Giao diện đánh giá sản phẩm ............................................................................................................ 49
Hình 36 Giao diện tra cứu thành phần ............................................................................................................ 50
Hình 37 Giao diện trạng thái đơn hàng ........................................................................................................... 50
Hình 38 Giao diện trang chủ (admin) ............................................................................................................. 51
Hình 39 Giao diện danh sách sản phẩm .......................................................................................................... 51
Hình 40 Giao diện CRUD sản phẩm............................................................................................................... 52

5


DANH MỤC BẢNG
Bảng 1 Bảng chi tiết các thuộc tính của class User ........................................................................................ 17
Bảng 2 Bảng chi tiết các thuộc tính của class Product.................................................................................... 18
Bảng 3 Bảng chi tiết các thuộc tính của class ProductCategory ..................................................................... 18
Bảng 4 Chi tiết thuộc tính của class ProductType .......................................................................................... 18
Bảng 5 Bảng chi tiết các thuộc tính của class ProductImage.......................................................................... 19
Bảng 6 Bảng chi tiết các thuộc tính của class Rating ..................................................................................... 19
Bảng 7 Bảng chi tiết các thuộc tính của class LoveList.................................................................................. 19

Bảng 8 Bảng chi tiết các thuộc tính của class Ingedient ................................................................................. 20
Bảng 9 Bảng chi tiết các thuộc tính của class Provinces ................................................................................ 20
Bảng 10 Bảng chi tiết các thuộc tính của class Districts ................................................................................ 20
Bảng 11 Bảng chi tiết các thuộc tính của class Wards.................................................................................... 20
Bảng 12 Bảng chi tiết các thuộc tính của class Delivery ................................................................................ 21
Bảng 13 Bảng chi tiết các thuộc tính của class Order ..................................................................................... 21
Bảng 14 Bảng chi tiết các thuộc tính của class DetailOrder ........................................................................... 22
Bảng 15 Bảng chi tiết các thuộc tính của class Cart ....................................................................................... 22
Bảng 16 Bảng chi tiết các thuộc tính của class Banner .................................................................................. 22
Bảng 17 Mô tả tác nhân .................................................................................................................................. 24
Bảng 18 Mô tả use case .................................................................................................................................. 25
Bảng 19 Đặc tả UC1_Đăng ký........................................................................................................................ 25
Bảng 20 Đặc tả UC2_Đăng nhập .................................................................................................................... 26
Bảng 21 Đặc tả UC3_Đổi mật khẩu ............................................................................................................... 27
Bảng 22 Đặc tả UC4_Quên mật khẩu ............................................................................................................. 28
Bảng 23 Đặc tả UC5_Thiết lập tài khoản ....................................................................................................... 29
Bảng 24 Đặc tả UC6_Tìm kiếm sản phẩm ..................................................................................................... 30
Bảng 25 Đặc tả UC7_Thêm vào giỏ hàng ...................................................................................................... 31
Bảng 26 Đặc tả UC8_CRUD địa chỉ nhận hàng ............................................................................................. 32
Bảng 27 Đặc tả UC9_Đặt hàng....................................................................................................................... 34
Bảng 28 Đặc tả UC10_Thêm mục yêu thích .................................................................................................. 35
Bảng 29 Đặc tả UC11_Đánh giá..................................................................................................................... 36
Bảng 30 Đặc tả UC12_Theo dõi đơn hàng ..................................................................................................... 37
Bảng 31 Đặc tả UC13_Tra cứu thành phần .................................................................................................... 38
Bảng 32 Đặc tả UC14_Khóa tài khoản ........................................................................................................... 39
Bảng 33 Đặc tả UC15_CRUD sản phẩm ........................................................................................................ 40
Bảng 34 Đặc tả UC16_Cập nhật trạng thái đơn hàng ..................................................................................... 42
Bảng 35 Phân công công việc ......................................................................................................................... 54
Bảng 36 Yêu cầu cài đặt ................................................................................................................................. 57


6


Chương 1: GIỚI THIỆU
1.1 Đặt vấn đề
Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu vẫn mang tính thủ công, dựa vào
kinh nghiệm của hệ thống nhân viên. Do đặc điểm lượng hàng hoá nhập xuất ngày càng lớn
nên cơng tác quản lí, mua bán mất rất nhiều thời gian, cơng sức mà độ chính xác khơng cao,
điều này nhiều khi gây thiệt hại cho cửa hàng.
1.2 Giải pháp
Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một sản phẩm phần mềm hỗ
trợ công tác quản lý, bán hàng và mua hàng trực tuyến. Với những kết quả đạt được trong
“Ứng dụng bán mỹ phẩm trực tuyến và tích hợp phân tích thành phần hóa học trong mỹ
phẩm” trên thiết bị di động, nhóm chúng em tiếp tục mở rộng phần mềm sang hoạt động
trên nền tảng website với đề tài “Xây dựng website mua bán mỹ phẩm tích hợp phân tích
thành phần hóa học trong mỹ phẩm”. Phần mềm ra đời trên nền tảng website cộng tác với
phiên bản trên thiết bị di động sẽ tăng mức độ đáp ứng nhu cầu hiện đại hóa hệ thống quản
lý và bán hàng, đưa hệ thống phần mềm vào để thay thế công tác quản lý thủ công, nâng
cao trải nghiệm mua hàng trực tuyến cho người dùng trên nhiều nền tảng.
1.3 Mục tiêu
Xây dựng một phần mềm hỗ trợ cửa hàng thực hiện công tác quản lý sản phẩm và trạng thái
đơn hàng, cung cấp một ứng dụng mua sắm đáp ứng các nhu cầu của khách hàng, cụ thể là
trong kinh doanh mỹ phẩm.
Phần mềm hoạt động đa nền tảng với phiên bản trên thiết bị di động và trên website.
Xây dựng giao diện phần mềm một cách trực quan, sinh động, dễ sử dụng, thẩm mỹ.
Các xử lý thành phần hoạt động một cách mượt mà để mang đến trải nghiệm thú vị và tiện
ích cho người dùng.

7



Chương 2: TỔNG QUAN
2.1 Tổng quan về đồ án
2.1.1 Tên đồ án:
•

Tên tiếng việt: “Xây dựng website mua bán mỹ phẩm tích hợp phân tích thành phần
hóa học trong mỹ phẩm”.

2.1.2 Link github quản lý source code
- Link github website dành cho khách hàng:
/>- Link github ứng dụng dành cho quản trị viên:
/>- Link github Backend: />2.2 Công nghệ sử dụng
Quá trình xây dựng đồ án đã sử dụng những cơng nghệ sau:
2.2.1 Ngơn ngữ lập trình Java-scripts
JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó
cũng là một trong số 3 ngơn ngữ chính của lập trình web:
• HTML: Giúp bạn thêm nội dung cho trang web.
• CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
• JavaScript: Cải thiện cách hoạt động của trang web.
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ
việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web. Hơn nữa,
có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng
đồng, đặc biệt là Github.

Hình 1 Ngôn ngữ Javascript

8



2.2.1.1 Lịch sử hình thành javaScripts
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape,
vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi
LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ. Phiên bản đầu tiên
của ngôn ngữ này bị giới hạn độc quyền bởi Netscape và chỉ có các tính năng hạn chế, nhưng
nó tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình viên đã liên
tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript. ECMAScript 2
phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999. Nó liên tục phát triển
thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết
bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng
JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngơn ngữ lập trình riêng trở thành
công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web. Nếu bạn đang
dùng internet, vậy chắc chắn bạn đã từng sử dụng JavaScript rồi.

2.2.1.2 Ưu nhược điểm của javaScripts
Ưu điểm của Javascript
• Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client. Ví
dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên
xử lý Javascript khác nhau, khơng ảnh hưởng lẫn nhau.
• Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho
đến các hệ điều hành trên mobile.
• Javascript là một ngơn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài
đặt quá nhiều phần mềm.
Nhược điểm của Javascript
Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hacker có thể nhập một
đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn
code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng.


2.2.1.3 JavaScripts framework
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình
Javascript. Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó. Ví dụ
với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là
9


một thư viện rất mạnh khi xử lý DOM HTML và CSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều
libraries và framework được viết bằng Javascript ra đời như:
•

Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.

•

NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng
realtime.

•

Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.

•

ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications).

•

jQuery: Một thư viện rất mạnh về hiệu ứng.


•

ReactJS: Một thư viện viết ứng dụng web.

•

Và cịn nhiều thư viện khác.

2.2.2 ReactJs Framework

2.2.2.1 Tổng quan về ReactJs
ReactJs - một thư viện Javascript phát triển tại Facebook, đang nổi lên trong những
năm gần đây với xu hướng Single Page Application. Điển hình là React được sử dụng tại
Facebook trong production, và Instagram được viết hoàn toàn trên React.
React hỗ trợ việc xây dựng những thành phần giao diện có tính tương tác cao, có
trạng thái và có thể tái sử dụng. Trong khi những framework khác cố gắng hướng đến một
mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những
thư viện Javascript khác.

2.2.2.2 Cách thức hoạt động của ReactJs
React cho phép nhúng code HTML trong code Javascript nhờ vào JSX, chúng ta có
thể dễ dàng lồng các đoạn HTML vào trong JS, tích hợp giữa javascript và HTML vào
trong JSX làm cho các component dễ hiểu hơn.

2.2.2.3 Ưu điểm của ReactJs
•

Dễ sử dụng: React hoạt động dựa trên cơ chế kết hợp giữa HTML và JavaScrip, bởi
vậy mà nó khá đơn giản và dễ dùng với những ai đã nắm vững kiến thức về

Javascript. Bên cạnh đó, bạn có thể thêm code vào hàm render một cách dễ dàng mà
khơng cần nối chuỗi.

•

Hiệu suất cao với DOM ảo: React có khả năng cập nhật q trình DOM và tự tạo
cho bản thân các virtual DOM, sau đó host chúng vào bộ nhớ. Hoạt động này thúc
đẩy việc cập nhật tự động của virtual ngay khi DOM thực tế có thay đổi, giúp tốc độ
10


của các ứng dụng khơng bị gián đoạn.
•

Hỗ trợ Reusable Component có trong Java: React mang lại khả năng tái sử dụng
các components đã phát triển thành những ứng dụng khác với chức năng khơng đổi.
•

Thân thiện với SEO: Yếu tố này giúp React gặt hái rất nhiều thành công bởi

hầu hết các công cụ khác đều không hỗ trợ SEO tốt như nó. React mang lại khả năng
tạo giao diện UI có khả năng truy cập vào mọi cơng cụ tìm kiếm. Bên cạnh đó, tốc độ
cũng là ưu thế rất lớn của React trong việc cải thiện SEO.

2.2.2.4 Nhược điểm của ReactJs
•

Reactjs chỉ phục vụ cho tầng View: React chỉ là thư viện của Facebook giúp render
ra phần view. Vì thế React sẽ khơng có phần Model và Controller, mà phải kết hợp
với các thư viện khác. React cũng sẽ khơng có two way binding hay là Ajax.


•

Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình
lại.

•

React khá nặng nếu so với các framework khác React có kích thước tương tương với
Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một
framework hồn chỉnh

•

Khó tiếp cận cho người mới học Web.

2.2.3 Django Rest Framework

2.2.3.1 Khái niệm Restful
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo
đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác.
API có thể trả về dữ liệu ở những kiểu dữ liệu phổ biến như JSON hay XML.
Restful (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu,
một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo giao tiếp giữa
các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST
gửi một yêu cầu HTTP như GET, POST, DELETE,… đến một URL để xử lý dữ liệu.
RestAPI là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để
quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến
ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau.
Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method

(như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản
các resource. RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ
11


lập trình ứng dụng, bất kỳ ngơn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một
RESTful API.

2.2.3.2 Hoạt động của Restful
REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử
dụng những phương thức HTTP riêng.
• GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
• POST (CREATE): Tạo mới một Resource.
• PUT (UPDATE): Cập nhật thơng tin cho Resource.
• DELETE (DELETE): Xố một Resource.
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create,
Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.

2.2.3.3 Django Rest Framework

Hình 2 Django rest framework

Django Rest framework là một công cụ mạnh mẽ và linh hoạt trong việc xây dựng
Web APIs
Một vài lý do nên sử dụng django rest framework:
-

API rất hữu dụng cho developers

-


Quyền xác thực trong django Rest framework gồm hai package OAuth1 và OAuth2

-

Serialization hỗ trợ cả ORM và non-ORM data-sources

-

Khả năng tùy chỉnh

-

Tài liệu phong phú và hỗ trợ cộng đồng

-

Được sử dụng và tin cậy bởi các công ty được quốc tế công nhận bao gồm Mozilla,
Red Hat, Heroku và Eventbrite.
12


2.2.4 Phần mềm lập trình VSCode

2.2.4.1 Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phổ
biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính
năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được
ứng dụng rộng rãi.


Hình 3 Phần mềm lập trình VSCode

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual
Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa
IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hồn
thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual
Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác.

2.2.4.2 Ưu điểm của VSCode
Hỗ trợ nhiều ngơn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#, Visual Basic,
HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thơng báo nếu chương
chương trình có lỗi.
Hỗ trợ đa nền tảng
Các trình viết code thơng thường chỉ được sử dụng hoặc cho Windows hoặc Linux
hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên.
Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình khơng nằm
trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng. Điều này
13


vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như
một chương trình độc lập.
Kho lưu trữ an tồn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an tồn. Với Visual Studio
Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu
trữ hiện có nào.
Hỗ trợ web

Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngồi ra, nó cũng có một trình soạn
thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau. Ngồi
ra, Visual Studio Code cịn cung cấp các thư mục cho một số tệp đặc biệt quan trọng.
Hỗ trợ viết Code
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual Studio
Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.
Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển
đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.
Màn hình đa nhiệm
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc
dù chúng không hề liên quan với nhau.
Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít chương trình
nào chun nghiệp bằng Visual Studio Code. Nó có thể phát hiện nếu bất kỳ đoạn mã nào
khơng đầy đủ. Thậm chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động
giúp họ bổ sung các cú pháp còn thiếu.
Hỗ trợ Git
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub. Mã này sau đó
có thể được thay đổi và lưu lại trên phần mềm.

2.2.4.3 Nhược điểm của Vscode
•

Tương tự như tất cả các ứng dụng electron khác, bộ nhớ và mức sử dụng pin của
VSCode khá tệ.

•


Khơng có git merge, điều mà nhiều người mong đợi, vì ST3 và Atom có khả năng
14


làm điều đó.
•

Các phím tắt mặc định khơng có ý nghĩa và người dùng phải cấu hình lại gần như tất
cả chúng.

2.2.5 Dịch vụ GitHub
GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền tảng web cho các dự
án phát triển phần mềm. GitHub cung cấp cả phiên bản trả tiền lẫn miễn phí cho các tài khoản.
Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí. Tính đến tháng 4 năm 2016,
GitHub có hơn 14 triệu người sử dụng với hơn 35 triệu kho mã nguồn, làm cho nó trở thành
máy chủ chứa mã nguồn lớn trên thế giới.
Github đã trở thành một yếu tố có sức ảnh hưởng trong cộng đồng phát triển mã nguồn mở.
Thậm chí nhiều nhà phát triển đã bắt đầu xem nó là một sự thay thế cho sơ yếu lý lịch và một
số nhà tuyển dụng yêu cầu các ứng viên cung cấp một liên kết đến tài khoản Github để đánh
giá ứng viên.
Dự án trên Github có thể được truy cập và thao tác sử dụng một giao diện dòng lệnh và làm
việc với tất cả các lệnh Git tiêu chuẩn. Github cũng cho phép người dùng đăng ký và không
đăng ký để duyệt kho công cộng trên trang web. Github cũng tạo ra nhiều client và plugin
cho máy tính để bàn.

15


Chương 3: PHÂN TÍCH, THIẾT KẾ
3.1 Cơ sở dữ liệu

3.1.1 Sơ đồ lớp

Hình 4 Sơ đồ lớp

3.1.2 Chi tiết các thuộc tính
1.

User

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

ID của từng người dùng

2

Email

String


Email đăng ký tài khoản của người dùng

3

Password

String

Password của tài khoản người dùng
16


4

Is_verified

Boolean

Người dùng đã xác nhận email đăng ký
hay chưa

5

Is_active

Boolean

Tài khoản người dùng có hoạt động hay
khơng


6

Is_staff

Boolean

Phân quyền tài khoản người dùng

7

Create_at

DateTime

Thời gian tạo tài khoản

8

Update_at

DateTime

Thời gian update thông tin

9

Avt

Image


Avatar người dùng

10

Name

String

Tên người dùng

11

Phone

String

Số điện thoại người dùng

12

Sex

String

Giới tính

13

Orders


Int

Số lượng đơn hàng đã đặt

14

Dateofbirth

DateTime

Ngày sinh

Bảng 1 Bảng chi tiết các thuộc tính của class User

2.

Product

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id


String

Id của sản phẩm

2

Name

String

Tên sản phẩm

3

Description

String

Mô tả sản phẩm

4

Price

Float

Giá sản phẩm

5


Sold

Int

Số lượng đã bán

6

Quantity

Int

Số lượng sản phẩm trong kho

7

Instruction

String

Hướng dẫn sử dụng sản phẩm
17


8

Ingredients

String


Thành phần sản phẩm

9

Origin

String

Xuất xứ sản phẩm

10

isActive

Boolean

Sản phẩm có đang hoạt động hay khơng

11

Category

Int

Loại sản phẩm

12

isFlashsale


Boolean

Sản phẩm có đang giảm giá hay khơng

13

Pricesale

Float

Giá sản phẩm khi đang được giảm giá

14

Imagepresent

Image

Hình ảnh đại diện sản phẩm

Bảng 2 Bảng chi tiết các thuộc tính của class Product

3.

ProductCategory

STT

Thuộc tính


Kiểu dữ liệu

Diễn giải

1

Id

String

Id Loại sản phẩm

2

Name

String

Tên loại sản phẩm

3

Producttype

String

Loại hình sản phẩm

4


Imagecategory

Image

Hình ảnh của loại sản phẩm

Bảng 3 Bảng chi tiết các thuộc tính của class ProductCategory

4.

ProductType

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id Loại sản phẩm

2


Name

String

Tên loại sản phẩm

Bảng 4 Chi tiết thuộc tính của class ProductType

5.

ProductImage

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id Loại sản phẩm
18



2

img

Image

Hình ảnh sản phẩm

3

Product

Int

Id sản phẩm

Bảng 5 Bảng chi tiết các thuộc tính của class ProductImage

6.

Rating

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải


1

Id

String

Id đánh giá

2

Dayandtime

DateTime

Thời gian đánh giá

3

Rattingpoint

Int

Điểm đánh giá

4

Rattingcomment

String


Nội dung đánh giá

5

Img

Image

Hình ảnh đính kèm

6

Product

Int

Id sản phẩm

7

User

Int

ID người dùng

Bảng 6 Bảng chi tiết các thuộc tính của class Rating

7.


LoveList

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id yêu thích

2

Product_id

Int

Id sản phẩm yêu thích

3

Customer_id


Int

Id người dùng

Bảng 7 Bảng chi tiết các thuộc tính của class LoveList

8.

Ingredient

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id chất hóa học

2

name


String

Tên chất
19


3

Levelofsafe

Int

Chỉ số an tồn

4

Description

String

Mơ tả cơng dụng của chất

5

Slug

String

Slug của tên chất


Bảng 8 Bảng chi tiết các thuộc tính của class Ingedient

9.

Provinces

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id tỉnh

2

Name

String

Tên tỉnh


Bảng 9 Bảng chi tiết các thuộc tính của class Provinces

10.

Districts

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id huyện

2

Name

String

Tên huyện


Bảng 10 Bảng chi tiết các thuộc tính của class Districts

11.

Wards

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id quận/ xã

2

Name

String

Tên quận/ xã


Bảng 11 Bảng chi tiết các thuộc tính của class Wards

12.

Delivery

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id thơng tin vận chuyện

2

User

Int

Id người dùng


3

Province

Int

Id tỉnh
20


4

District

Int

Id huyện

5

Ward

Int

Id quận/ xã

6

Address


String

Địa chỉ chi tiết nơi ở như số nhà/tên
đường

7

Fulladdress

Địa chỉ đầy đủ bao gồm số nhà/tên

String

đường + xã/phường + quận/huyện +
tỉnh/thành
8

Defauladdress

Địa chỉ mà người dùng chọn làm mặc

String

định
9

Phone

String


Số điện thoại người nhận

10

Receivename

String

Tên người nhận

11

Receivegender

String

Giới tính người nhận

Bảng 12 Bảng chi tiết các thuộc tính của class Delivery

13.

Order

STT

Thuộc tính

Kiểu dữ liệu


Diễn giải

1

Id

String

Id đơn hàng

2

Datecreate

DateTime

Ngày khởi tạo đơn hàng

3

Daterecieve

DateTime

Ngày nhận hàng

4

Status


String

Trạng thái đơn hàng

5

cancelationReason String

Nguyên nhân hủy đơn

6

User

Int

Id người dùng

7

Delivery

Int

Id thông tin vận chuyển

Bảng 13 Bảng chi tiết các thuộc tính của class Order

21



14.

DetailOrder

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id chi tiết đơn hàng

2

Order

Int

Id đơn hàng


3

Product

Int

Id sản phẩm

4

Quantities

Int

Số lượng sản phẩm

5

isRating

Boolean

Đơn hàng đã được đánh giá chưa

Bảng 14 Bảng chi tiết các thuộc tính của class DetailOrder

15.

Cart


STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id giỏ hàng

2

Product

Int

Id sản phẩm

3

isSelections

Boolean


Có được chọn không

4

Quantities

Int

Số lượng sản phẩm được chọn

Bảng 15 Bảng chi tiết các thuộc tính của class Cart

16.

Banner

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String


Id banner

2

Img

Image

Hình ảnh của banner

Bảng 16 Bảng chi tiết các thuộc tính của class Banner

22


3.2 Yêu cầu chức năng
3.2.1 Sơ đồ use case

Hình 5 Sơ đồ use case

23


3.2.2 Mô tả tác nhân
STT

Mô tả

Tên tác nhân


1

Khách hàng

Khách hàng sử dụng website mua mỹ phẩm

2

Admin

Quản trị viên của hệ thống, xử lý các nghiệp vụ của phía
người bán
Bảng 17 Mô tả tác nhân

3.2.3 Mô tả use case
STT

Tên Chức Năng

Mô tả

1

Đăng ký

Đăng ký tài khoản mới

2

Đăng nhập


Đăng nhập vào ứng dụng

3

Đổi mật khẩu

Đổi mật khẩu đăng nhập tài khoản website

4

Quên mật khẩu

Cho phép người dùng gửi yêu cầu đặt lại mật khẩu mới

5

Thiết lập tài khoản

Người dùng cập nhật các thơng tin như họ tên, ngày
sinh, giới tính, ảnh đại diện

6

Tìm kiếm sản phẩm

Chức năng cho phép khách hàng tìm kiếm sản phẩm
theo tên

7


Thêm vào giỏ hàng

Thêm sản phẩm muốn mua vào giỏ hàng

8

CRUD địa chỉ nhận

Hỗ trợ các thao tác thêm, đọc, sửa, xóa địa chỉ giao hàng

hàng
9

Đặt hàng

Người dùng chọn mua sản phẩm

10

Thêm vào mục yêu

Chức năng cho phép người dùng thêm sản phẩm vào

thích

mục yêu thích và có thể xem lại vào những lần truy cập
sau

11


Đánh giá

Chức năng cho phép khách hàng đánh giá về chất lượng
và trải nghiệm về sản phẩm
24