ĐẠ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 1
WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG
VỚI CHAT BOT TƯ VẤN
LỚP: SE121.M21 – KHÓA K14

GIẢNG VIÊN HƯỚNG DẪN
ThS. Nguyễn Thị Thanh Trúc

Võ Thành Phát

– 19522003

Võ Tấn Việt

– 19522519

TP. HỒ CHÍ MINH, 2022


LỜI CẢM ƠN
Nhóm chúng em xin chân thành cảm ơn trường Đại học Cơng nghệ thơng tin nói
chung và GV. ThS. Nguyễn Thị Thanh Trúc nói riêng đã tạo điều kiện cho chúng em thực
hiện đồ án 1 này.
Với sự giúp đỡ của GV. ThS. Nguyễn Thị Thanh Trúc chúng em đã xây dựng thành
công một trang web full stack với các chức năng phù hợp với nhu cầu của người dùng.
Đề tài này của nhóm đã được hồn thành trong vịng 4 tháng tính ln cả thời gian
học về các ngơn ngữ front end và back end. Vì là lần đầu nhóm chúng em tiếp cận với lập

trình web nên có thể vẫn cịn tồn tại các lỗi khơng mong muốn. Nhóm em rất mong nhận
được sự góp ý của cơ để giúp mình ngày càng hồn thiện và có nhiều kinh nghiệm hơn để
chuẩn bị cho các đồ án, các sản phẩm cho tương lai.
Một lần nữa, chúng em xin chân thành cảm ơn GV. ThS. Nguyễn Thị Thanh Trúc và chúc
cô luôn dồi dào sức khỏe để tiếp tục công việc đào tạo các lớp trẻ IT tiếp theo.

2


NHẬN XÉT CỦA GIẢNG 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)

3


Tên đề tài: Xây dựng website bán quần áo, phụ kiện thời trang với chatbot tư vấn
Giảng viên hướng dẫn: ThS. Nguyễn Thị Thanh Trúc
Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 11/6/2022
Sinh viên thực hiện:
Võ Thành Phát – 19522003
Võ Tấn Việt - 19522519

Nội dung đề tài:
Giới thiệu bài toán:
Ngày nay, xã hội ngày càng phát triển, đời sống con người càng được cải thiện, người ta không
chỉ no đủ vật chất mà còn chú trọng nhiều đến đời sống tinh thần, đặc biệt là thời trang nhằm thỏa
mãn nhu cầu thẩm mỹ ngày càng cao. Dân gian cũng đã có câu "Người đẹp vì lụa, lúa tốt vì phân"
là lẽ đó, cách ăn mặc có mối quan hệ khá mật thiết với văn hoá, phản ánh một phần đời sống, văn
minh của con người. Chính vì thế, như một lẽ tự nhiên của thời đại công nghệ 4.0, các website
thương mại, buôn bán quần áo ngày càng phát triển và được tín dụng. Một phần là vì nó cung cấp
cho người dùng những sự tiện lợi, nhanh gọn trong mua bán sản phẩm, vừa giúp người dùng có thể
lựa ra cho mình những món đồ ưng ý, hợp với nhu cầu nhất mà không nhất thiết phải ra tận cửa
hàng để có thể lựa chọn như ngày xưa. Nhờ có các webstie thương mại mà các chủ cửa hàng quần
áo có thể tạo các website đơn giản, phục vụ mục đích bán hàng của mình lại cịn tăng cao thu nhập.

4



Mục tiêu
Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm theo hiểu biết và trải
nghiệm từ phía người dùng, để tạo nên một website bán hàng online hoàn chỉnh – tối ưu hoá về mọi
mặt, để sau này dễ phát triển
-

Học và tìm hiểu các ngơn ngữ lập trình, cơng nghệ hỗ trợ phát triển 1 trang web full stack.

-

Tìm hiểu về kiến trúc hệ thống cũng như quản lý database

-

Tìm hiểu và nghiên cứu về chatbot

-

Tìm hiểu cách mơ phỏng giao diện của một ứng dụng trên Figma

-

Vẽ được các diagram mô tả các chức năng của hệ thống

-

Xây dựng thành công website bán quần áo, phụ kiện thời trang


Phạm vi
Đề tài tập trung vào nghiên cứu về website bán thời trang, phục vụ việc kinh doanh online của shop
quần áo.
Đối tượng:


Các shop quần áo có nhu cầu mở rộng việc kinh doanh của mình trên internet bằng hình

thức bán hàng qua website online thương mại.


Các khách hàng, người dùng có nhu cầu mua quần áo thời trang trên internet, vừa tiện lợi,

dễ sử dụng lại có ship hàng đến tận nhà.
Phương pháp thực hiện:
-

Tìm hiểu và học về HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL

-

Khảo sát thực trạng các website bán quần áo trên thị trường

-

Phân tích thiết kế hệ thống và xây dựng website.

-

Tìm hiểu về thiết kế UX/UI và tiến hành thiết kế giao diện cho website


5


-

Xây dựng website cho người dung và nhân viên

-

Tiến hành triển khai và kiểm thử

Công nghệ dự kiến sử dụng:
Các ngơn ngữ, cơng nghệ lập trình front end: HTML, Css/Scss, Javascript, Bootstrap,
JSP(JavaServerPages)
Các ngơn ngữ cơng nghệ lập trình back end: Servlet, JDBC, Java
Database: MySQL
Công nghệ, ngôn ngữ nghiên cứu và thiết kế chatbot: Rasa framework, Python
Công cụ thiết kế UI : Figma
Cơng cụ phân tích thiết kế, vẽ diagram: draw.io
Cơng cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE
Công cụ quản lý dự án: Github, Messenger Group, MicrosoftTeams.
Công cụ lưu trữ các tài liệu liên quan: Google Drive, Github
Kết quả mong đợi
-

Hoàn thành yêu cầu đặt ra ban đầu, đáp ứng được đầy đủ tính năng cần thiết của một ứng dụng
Website thương mại bán quần áo phụ kiện thời trang.

-


Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng.

-

Nắm được các ngôn ngữ, công nghệ trong bước đầu tạo website như: HTML, CSS, Javascript,
Bootstrap, JSP, Servlet, Java, MySQL

-

Nắm được các cơng cụ sử dụng trong q trình thực hiện đồ án như: Github, Figma, DrawIO

-

Nắm được quá trình phát triển và tạo nên một chatbot thơng qua nền tảng RASA

6


-

Học được cách nghiên cứu, học các công nghệ mới một cách nhanh gọn và hiệu quả. Đặc biệt là
có hướng để từ các ngôn ngữ, công nghệ cơ bản đó mà tiến đến các Framework cao cấp hỗ trợ
tốt hơn và tạo nên các sản phẩm tốt hơn.

-

Học được cách tổ chức làm việc nhóm, tập trung vào cơng việc, đưa các ý kiến các nhân vào đồ
án nhóm, đặt bản thân mình vào con mắt, nhu cầu của người dùng nhằm phát triển đồ án tốt hơn


Các tiêu chí khác:
Tính thẩm mỹ: Website có giao diện thân thiện, dễ sử dụng
Tính logic và bảo mật:
+ Các tính năng hoạt động mượt mà, không bị lỗi
+ Dữ liệu người dùng được bảo mật
Link Github:
Website bán hàng: />Chatbot: />
Kế hoạch thực hiện:
Nội dung
Thời gian

23/2/2022 – 28/2/2022

1/3/2022 – 6/3/2022

Võ Thành Phát

Võ Tấn Việt

Tìm hiểu về đề tài

Tìm hiểu đề tài

Tham khảo các trang web có

Tham khảo các trang web có

chức năng tương tự

chức năng tương tự


7


10/3/2022 – 11/3/2022

Lựa chọn ngôn ngữ, công
nghệ phù hợp với trang web

Phân tích hệ thống

Phác thảo sơ giao diện trên

Phác thảo sơ giao diện trên

figma

figma

Thiết kế database bước đầu

Thiết kế database bước đầu

Tìm hiểu và học về HTML,

Tìm hiểu và học về HTML,

CSS

CSS


Dựng khung và design trang

Dựng khung và design trang

web bằng html, css

web bằng html, css

5/4/2022 – 13/4/2022

Học javascript, bootstrap

Học javascript, bootstrap

14/4/2022 – 17/4/2022

Vận dụng các kiến thức đã

Vận dụng các kiến thức đã

học tạo các hiệu ứng, design

học tạo các hiệu ứng, design

lại website bằng html, css

lại website bằng html, css

11/3/2022 – 14/3/2022


14/3/2022 – 15/3/2022

16/3/2022 – 25/3/2022

25/3/2022 – 5/4/2022

17/4/2022 – 30/4/2022 Tìm hiểu và học về java, jsp,
servlet

Tìm hiểu và học về java, jsp,
servlet

8


2/5/2022 - 7/5/2022

Tổng thay đổi giao diện web

Thiết kế database tổng kết

bằng

sau khi nghiên cứu hết các

JSP

kết


hợp

html,css,javascript

và

chức năng của app

bootstrap
8/5/2022 – 12/5/2022

Dùng Java,Servlet, JDBC

Dùng Java,Servlet, JDBC

xây dựng các chức năng bên

xây dựng chức năng bên

phía người dùng bao gồm:

phía người dùng bao gổm:

Đăng nhập, Show các sản

đăng ký tài khoản, thay đổi

phẩm ra Homepage, Thêm

thông tin người dùng, xem


sản phẩm vào giỏ hàng, xem

hóa đơn mua hàng

chi tiết
12/5/2022 – 14/5/2022 Xây dựng chức năng tìm

Xây dựng chức năng tìm

kiếm sản phẩm, xem giỏ

kiếm sản phẩm, xem giỏ

hàng, đặt hàng. Xây dựng

hàng, đặt hàng. Xây dựng

các chức năng bên phía

các chức năng bên phía

admin như: thêm sản phẩm

admin như: thêm sản phẩm

vào trang web, quản lý sản

vào trang web, quản lý sản


phẩm, thêm, xóa sửa, quản

phẩm, thêm, xóa sửa, quản

lý hóa đơn mua hàng, đặt

lý hóa đơn mua hàng, đặt

hàng và giao hàng.

hàng và giao hàng.

14/5/2022 – 10/6/2022 Thực

hiện

chatbot

nghiên

bằng

cứu

RASA

Thực

hiện


chatbot

nghiên

bằng

cứu

RASA

framework kết hợp viết báo

framework kết hợp viết báo

cáo đồ án

cáo đồ án

11/6/2022 – 13/6/2022 Thực hiện chatbot đã nghiên

Thực hiện chatbot đã nghiên

cứu được trên IDE visual

cứu được trên IDE visual

studio

studio


9


10/6/2022 – 13/6/2022 Test trang web, thực hiện

Test trang web, thực hiện

các kiểm thử bằng test case

các kiểm thử bằng test case

và hoàn thiện báo cáo đồ án

và hoàn thiện báo cáo đồ án

Xác nhận của CBHD

TP. HCM, ngày 21 tháng 2 năm 2022

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

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

Nguyễn Thị Thanh Trúc

Võ Thành Phát

Võ Tấn Việt


10


MENU
DANH MỤC HÌNH ẢNH .............................................................................. 14
DANH MỤC CÁC BẢNG ............................................................................. 17
1

Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI ................................................. 18
1.1. Giới thiệu về đề tài ............................................................................. 18
1.1.1. Nhu cầu về các website thương mại và thời trang .......................... 18
1.1.2.

Lý do chọn đề tài ....................................................................... 18

1.2. Khảo sát hiện trạng ............................................................................. 19
1.3. Công nghệ và đối tượng nghiên cứu .................................................. 19
1.4. Phạm vi nghiên cứu ............................................................................ 20
1.5. Phương pháp nghiên cứu .................................................................... 20
1.6. Nhiệm vụ của đề tài ............................................................................ 20
1.7. Mục tiêu của đề tài.............................................................................. 21
2

Chương 2 - CƠ SỞ LÝ THUYẾT........................................................... 22
2.1 Các ngôn ngữ và công nghệ để tạo nên một trang web fullstack ....... 22
2.1.1 HTML ........................................................................................... 22
2.1.2 CSS ............................................................................................... 26
2.1.3 Javascript ...................................................................................... 30
2.1.4 Bootstrap ...................................................................................... 34
2.1.5 JSP ................................................................................................ 38

2.1.6 Servlet ........................................................................................... 41
2.1.7 JDBC- Java Database Connectivity ............................................. 44
2.1.8 Server để chạy web – Tom Cat .................................................... 46
2.1.9 Java ............................................................................................... 48
2.1.10

Cấu trúc lập trình - Java Design Pattern – DAO....................... 50

2.1.11

Cơ sở dữ liệu – MySQL ............................................................ 53

2.2 Công cụ nghiên cứu về chatbot: ......................................................... 56
2.2.1 Rasa Framework ........................................................................... 56
11


2.3 Một số công cụ sử dụng trong đồ án .................................................. 57
2.3.1 Figma ............................................................................................ 57
2.3.2 Github .......................................................................................... 57
3

Chương 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................ 59
3.1 Mơ tả yêu cầu ..................................................................................... 59
3.1.1 Yêu cầu chức năng ....................................................................... 59
3.1.2 Yêu cầu phi chức năng ................................................................. 61
3.2 Kiến trúc hệ thống .............................................................................. 61
3.2.1 Mô tả kiến trúc Front-End ............................................................ 61
3.2.2 Mô tả kiến trúc Back-End ............................................................ 66
3.2.3 Về Design Pattern DAO: .............................................................. 66


4

Chương 4 - HIỆN THỰC HỆ THỐNG .................................................. 70
4.1 Sơ đồ use case ..................................................................................... 70
4.2 Sơ đồ tuần tự ....................................................................................... 71
4.3 Đặc tả use case .................................................................................... 72
4.3.1 Đăng kí ......................................................................................... 72
4.3.2 Đăng nhập .................................................................................... 74
4.3.3 Chỉnh sửa thơng tin cá nhân ......................................................... 75
4.3.4 Tìm kiếm sản phẩm ...................................................................... 75
4.3.5 Mua hàng ...................................................................................... 76
4.3.6 Xem giỏ hàng ............................................................................... 77
4.3.7 Đặt hàng ....................................................................................... 78
4.3.8 Xem chi tiết món hàng ................................................................. 78
4.3.9 Xem hóa đơn đã mua.................................................................... 79
4.3.10

Hộp chat tư vấn giới thiệu sản phẩm ........................................ 80

4.3.11

Thêm sản phẩm ......................................................................... 80

4.3.12

Quản lý sản phẩm ...................................................................... 81

4.3.13


Xóa sản phẩm ............................................................................ 82
12


4.3.14

Sửa thơng tin sản phẩm ............................................................. 83

4.3.15

Quản lý hóa đơn mua hàng của khách hàng ............................. 84

4.3.16

Xem thông tin đặt hàng và giao hàng cho người dùng ............. 84

4.3.17

Đăng xuất .................................................................................. 85

4.4 Thiết kế dữ liệu ................................................................................... 86
4.5 Danh sách các đối tượng trong hệ thống ............................................ 87
4.5.1 Dữ liệu người dùng - user ............................................................ 87
4.5.2 Dữ liệu sản phẩm – product_dt .................................................... 88
4.5.3 Dữ liệu giỏ hàng – cart ................................................................. 89
4.5.4 Dữ liệu hóa đơn – product_order ................................................. 89
4.6 Thiết kế giao diện ............................................................................... 90
4.6.1 Giao diện của người dùng ............................................................ 90
4.6.2 Giao diện của admin ................................................................... 112
5


CHƯƠNG 5 – NGHIÊN CỨU VỀ CHATBOT ................................... 116
5.1 Cơ sở lý thuyết .................................................................................. 116
5.1.1 Cấu trúc ...................................................................................... 117
5.2 Cách cài đặt: ..................................................................................... 118
5.3 Giai đoạn chuẩn bị chi tiết – tạo chatbot .......................................... 126

6

CHƯƠNG 6 - KẾT LUẬN ................................................................... 138
6.1 Đánh giá ............................................................................................ 138
6.1.1 Thuận lợi .................................................................................... 138
6.1.2 Khó khăn .................................................................................... 138
6.2 Kết quả đạt được ............................................................................... 139
6.2.1 Ưu điểm ...................................................................................... 139
6.2.2 Nhược điểm ................................................................................ 139
6.3 Hướng phát triển ............................................................................... 139

7

CHƯƠNG 7 - TÀI LIỆU THAM KHẢO ............................................. 141
7.1 Tài liệu tiếng Việt ............................................................................. 141
13


7.2 Tài liệu tiếng Anh ............................................................................. 142

DANH MỤC HÌNH ẢNH
Hình 2.1 HTML............................................................................................... 22
Hình 2.2 Cấu trúc HTML ................................................................................ 25

Hình 2.3 CSS ................................................................................................... 26
Hình 2.4 Javascript .......................................................................................... 30
Hình 2.5 Bootstrap .......................................................................................... 34
Hình 2.6 Bootstrap js....................................................................................... 35
Hình 2.7 JSP .................................................................................................... 38
Hình 2.8 Vị trí jsp trong một trang web .......................................................... 39
Hình 2.9 Kiến trúc Servlet .............................................................................. 42
Hình 2.10 JDBC .............................................................................................. 44
Hình 2.11 Cấu trúc kết nối jdbc ...................................................................... 44
Hình 2.12 Apache Tomcat .............................................................................. 46
Hình 2.13 HTTP server ................................................................................... 47
Hình 2.14 Ngơn ngữ lập trình Java ................................................................. 48
Hình 2.15 Design Pattern DAO ...................................................................... 51
Hình 2.16 Cấu trúc DAO ................................................................................ 52
Hình 2.17 MySQL ........................................................................................... 53
Hình 2.18 Rasa Chatbot .................................................................................. 56
Hình 2.19 Figma .............................................................................................. 57
Hình 2.20 Github ............................................................................................. 57
Hình 3.1 Vị trị JSP .......................................................................................... 62
Hình 3.2 Ví dụ một file jsp.............................................................................. 63
Hình 3.3 Cấu trúc thư mục Front End ............................................................. 64
Hình 3.4 Cấu trúc thư mục jsp chứa các link Bootstrap ................................. 65
Hình 3.5 navbar.jsp ......................................................................................... 65
Hình 3.6 Cấu trúc Servlet ................................................................................ 66
Hình 3.7 Cấu trúc file thiếu kế theo DAO ...................................................... 67
Hình 4.1 Sơ đồ Use Case ................................................................................ 70
Hình 4.2 Sơ đồ tuàn tự đăng nhập ................................................................... 71
Hình 4.3 Sơ đồ tuần tự edit profile ................................................................. 71
Hình 4.4 Workflow quá trình mua hàng ......................................................... 72
Hình 4.5 Workflow mơ phỏng q trình mua hàng và thanh toán ................. 72


14


Hình 4.6 Cơ sở dữ liệu .................................................................................... 86
Hình 4.7 Home Page ....................................................................................... 91
Hình 4.8 Home Page.2 .................................................................................... 91
Hình 4.9 Home Page.3 .................................................................................... 92
Hình 4.10 Main Navigation............................................................................. 92
Hình 4.11 Logo ............................................................................................... 92
Hình 4.12 Thanh search .................................................................................. 92
Hình 4.13 Nút login và đăng ký ...................................................................... 93
Hình 4.14 Navigation ...................................................................................... 93
Hình 4.15 Các đề mục ..................................................................................... 93
Hình 4.16 Slider .............................................................................................. 93
Hình 4.17 Mục hiển thị sản phẩm ................................................................... 94
Hình 4.18 Footer ............................................................................................. 94
Hình 4.19 Recent Product ............................................................................... 95
Hình 4.20 New Product ................................................................................... 95
Hình 4.21 Old Product .................................................................................... 96
Hình 4.22 Auto Scroll ..................................................................................... 96
Hình 4.23 Màn hình đăng nhập ....................................................................... 97
Hình 4.24 Màn hình đăng ký .......................................................................... 97
Hình 4.25 Màn hình search result ................................................................... 98
Hình 4.26 Home Page sau khi đăng nhập ....................................................... 99
Hình 4.27 Dialog Logout ................................................................................ 99
Hình 4.28 After Logout ................................................................................. 100
Hình 4.29 Normal Product Cart .................................................................... 101
Hình 4.30 Old Product Cart .......................................................................... 102
Hình 4.31 Trang xem chi tiết sản phẩm ........................................................ 103

Hình 4.32 Trang xem chi tiết sản phảm - cũ ................................................. 103
Hình 4.33 Cart ............................................................................................... 104
Hình 4.34 Trang giỏ hàng và thanh tốn ....................................................... 104
Hình 4.35 Mục giỏ hàng................................................................................ 105
Hình 4.36 Mục thanh tốn ............................................................................. 106
Hình 4.37 Nút order và tiếp tục mua sắm ..................................................... 107
Hình 4.38 Thơng báo nhắc nhở ..................................................................... 107
Hình 4.39 Sau khi mua hàng ......................................................................... 108
Hình 4.40 Màn hình Order của khách hàng .................................................. 109
Hình 4.41 Nút Setting và Contact Us ............................................................ 109
Hình 4.42 Màn hình quản lý thông tin khách hàng....................................... 110

15


Hình 4.43 Màn hình chỉnh sửa thơng tin ...................................................... 110
Hình 4.44 Quản lý hóa đơn ........................................................................... 111
Hình 4.45 Trung tâm hỗ trợ khách hàng ....................................................... 111
Hình 4.46 Đăng nhập bằng tài khoản admin ................................................. 112
Hình 4.47 Màn hình quản lý của admin ........................................................ 112
Hình 4.48 Các chức năng .............................................................................. 113
Hình 4.49 Màn hình thêm sản phẩm ............................................................. 113
Hình 4.50 Quản lý sản phẩm ......................................................................... 114
Hình 4.51 Nút sửa và xóa .............................................................................. 114
Hình 4.52 Màn hình chỉnh sửa ...................................................................... 114
Hình 4.53 Quản lý hóa đơn khách hàng ........................................................ 115
Hình 4.54 Đăng xuất ..................................................................................... 115
Hình 5.1 Rasa Framework............................................................................. 116
Hình 5.2 Cấu trúc rasa ................................................................................... 117
Hình 5.3 Trang tải python ............................................................................. 118

Hình 5.4 cmd check version python.............................................................. 118
Hình 5.5 cmd cài đặt rasa .............................................................................. 119
Hình 5.6 cmd cài đặt rasa 2 ........................................................................... 119
Hình 5.7 check rasa -- version....................................................................... 119
Hình 5.8 khởi tạo rasa trong thư mục............................................................ 120
Hình 5.9 Quá trình khởi tạo .......................................................................... 120
Hình 5.10 Quá trình khởi tạo rasa2 ............................................................... 121
Hình 5.11 Quá trình khởi tạo rasa3 ............................................................... 121
Hình 5.12 Cấu trúc thư mục rasa .................................................................. 122
Hình 5.13 Mở folder rasa trên visual code .................................................... 123
Hình 5.14 file credentials.yml ....................................................................... 124
Hình 5.15 Chỉnh sủa file credentials ............................................................. 125
Hình 5.16 Thực hiện import thư viện và khởi tạo chatbot ở local ................ 126
Hình 5.17 Cấu trúc file của chatbot .............................................................. 127
Hình 5.18 file nlu.yml ................................................................................... 128
Hình 5.19 file domain.yml ............................................................................ 129
Hình 5.20 file stories.yml .............................................................................. 130
Hình 5.21 file config.yml .............................................................................. 131
Hình 5.22 file rules.yml ................................................................................ 132
Hình 5.23 Quá trình train chat bot ............................................................... 133
Hình 5.24 Giao diện chatbot ......................................................................... 133
Hình 5.25 Các phân đoạn tương tác .............................................................. 134

16


Hình 5.26 Bảng class css để thay đổi giao diện chatbot ............................... 135
Hình 5.27 Đổi màu chatbot ........................................................................... 135
Hình 5.28 Thay đổi màu và các tương tác chatbot khác ............................... 136
Hình 5.29 Tương tác chatbot......................................................................... 137


DANH MỤC CÁC BẢNG
Bảng 2-1 So sánh SQL vs MySQL ................................................................. 56
Bảng 3-1 Bảng mô tả chức năng của các actor ............................................... 60
Bảng 3-2 Bảng mô tả các thành phần BackEnd .............................................. 68
Bảng 4-1 Use case Đăng ký ............................................................................ 74
Bảng 4-2 Use case Đăng nhập ........................................................................ 74
Bảng 4-3 Use Case chỉnh sửa thông tin cá nhân ............................................. 75
Bảng 4-4 Use Case Tìm kiếm sản phẩm ......................................................... 76
Bảng 4-5 Use Case Mua hàng ......................................................................... 77
Bảng 4-6 Use Case xem giỏ hàng ................................................................... 77
Bảng 4-7 Use Case Đặt hàng .......................................................................... 78
Bảng 4-8 Use Case xem chi tiết món hàng ..................................................... 79
Bảng 4-9 Use Case xem hóa đơn đã mua ....................................................... 80
Bảng 4-10 Use case hộp chat tư vấn giới thiệu sản phẩm .............................. 80
Bảng 4-11 Use Case Thêm sản phẩm ............................................................. 81
Bảng 4-12 Use Case Quản lý sản phẩm .......................................................... 82
Bảng 4-13 Use Case xóa sản phẩm ................................................................. 83
Bảng 4-14 Use Case Sửa thông tin sản phẩm ................................................. 83
Bảng 4-15 Use Case quản lý hóa đơn mua hàng của khách hàng .................. 84
Bảng 4-16 Use Case xem thông tin đặt hàng và giao hàng cho người dùng .. 85
Bảng 4-17 Use Case Đăng xuất ...................................................................... 86
Bảng 4-18 Bảng Danh sách đối tượng hệ thống ............................................. 87
Bảng 4-19 Bảng dữ liệu người dùng ............................................................... 88
Bảng 4-20 Bảng dữ liệu sản phẩm .................................................................. 89
Bảng 4-21 Bảng dữ liệu giỏ hàng ................................................................... 89
Bảng 4-22 Bảng dữ liệu hóa đơn .................................................................... 90

17



1 Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI
1.1.

Giới thiệu về đề tài
1.1.1. Nhu cầu về các website thương mại và thời trang
Ngày nay, xã hội ngày càng phát triển, đời sống con người càng được cải thiện,

người ta không chỉ no đủ vật chất mà còn chú trọng nhiều đến đời sống tinh thần, đặc
biệt là thời trang nhằm thỏa mãn nhu cầu thẩm mỹ ngày càng cao. Dân gian cũng đã
có câu "Người đẹp vì lụa, lúa tốt vì phân" là lẽ đó, cách ăn mặc có mối quan hệ khá
mật thiết với văn hoá, phản ánh một phần đời sống, văn minh của con người. Chính
vì thế, như một lẽ tự nhiên của thời đại công nghệ 4.0, các website thương mại, buôn
bán quần áo ngày càng phát triển và được tín dụng. Một phần là vì nó cung cấp cho
người dùng những sự tiện lợi, nhanh gọn trong mua bán sản phẩm, vừa giúp người
dùng có thể lựa ra cho mình những món đồ ưng ý, hợp với nhu cầu nhất mà không
nhất thiết phải ra tận cửa hàng để có thể lựa chọn như ngày xưa. Nhờ có các webstie
thương mại mà các chủ cửa hàng quần áo có thể tạo các website đơn giản, phục vụ
mục đích bán hàng của mình lại cịn tăng cao thu nhập.
1.1.2. Lý do chọn đề tài
Về lý do của chính mình, thì chính đáng nhất đó là sự u thích, mong muốn
có thể tự phát triển được một sản phẩm website full stack, nhờ đó mà có thể nâng cao
trình độ học thuật của bản thân, cũng như có một sản phẩm tốt cho mơn đồ án một.
Ngồi ra với niềm đam mê với các sản phẩm quần áo mang đậm tính thời trang và
nghệ thuật trong nó đã cho nhóm chúng em thêm động lực để chọn và thực hiện đề
tài này.
Về nhu cầu của xã hội, thì với sự phát triển vượt bậc của internet cũng như hệ
thống vận tải logictics thì các ngành nghề kinh doanh, thương mại điện tử đang ngày
càng phát triển. Các cơng ti, tập đồn sẵn sàng chi lượng lớn tiền vào ngành này. Hệ
thống thương mại điện tử hiện nay có nhiều sự vượt trội hơn so với các ngành nghề

thương mại truyền thống. Chỉ với vài thao tác đơn giản trên các thiết bị thông minh

18


người dùng dễ dàng lựa chọn các sản phẩm mình mong muốn. chúng sẽ được vận
chuyển đến tận nhà của họ. Nắm bắt được các yếu tố trên nhóm chúng em quyết định
lựa chọn để tài “Tìm hiều và xây dựng WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN
THỜI TRANG VỚI CHAT BOT TƯ VẤN” để phục vụ cho nhu cầu tìm kiếm và
mua sản phẩm thời trang trên internet một cách thuận lợi nhất cho người dùng.

1.2.

Khảo sát hiện trạng
Thực hiện khảo sát hiện trang trên thị trường bằng cách nghiên cứu các website

bán quần áo có chức năng tương như đề tài của nhóm như: fiona.com.vn, sixdo.vn,
yame.vn… Nhóm em thấy đa số các trang web điều tập trung vào một mảng bán hàng
còn về phần quản lý tài khoản người dùng vẫn cịn hạn chế. Nên nhóm em mong
muốn có phần thay đổi trong việc quản lý tài khoản người dùng, giúp người dùng có
nhiều tương tác hơn với shop thơng qua việc theo dõi đơn hàng hiện có, chỉnh sửa
thông tin người dùng cũng như tương tác với shop bằng chat bot.

1.3.

Công nghệ và đối tượng nghiên cứu

Các công nghệ và ngôn ngữ sử dụng trong đồ án:
 Các ngơn ngữ cơng nghệ lập trình front end: HTML, Css/Scss, Javascript,
Bootstrap, JSP (JavaServerPages).

 Các ngơn ngữ cơng nghệ lập trình back end: Servlet, JDBC, Java.
 Database: MySQL
 Công nghệ, ngôn ngữ nghiên cứu và thiết kế chatbot: Rasa framework, Python
 Công cụ thiết kế UI : Figma
 Công cụ phân tích thiết kế, vẽ diagram: draw.io, Microsoft Visio
 Cơng cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE
 Công cụ quản lý dự án: Github, Messenger Group, Microsoft Teams.
 Công cụ lưu trữ các tài liệu liên quan: Google Drive, Github

19


Đối tượng trong phạm vi đề tài hướng đến:
 Các shop quần áo có nhu cầu mở rộng việc kinh doanh của mình trên internet
bằng hình thức bán hàng qua website online thương mại.
 Các khách hàng, người dùng có nhu cầu mua quần áo thời trang trên internet,
vừa tiện lợi, dễ sử dụng lại có ship hàng đến tận nhà.

1.4.

Phạm vi nghiên cứu
Đề tài tập trung vào nghiên cứu về website bán thời trang, phục vụ việc kinh

doanh online của shop quần áo.
Thực hiện học và nghiên cứu các ngơn ngữ lập trình front end, back end, tìm
ra cơng dụng của chúng trong quá trình thực hiện đồ án – tạo nên một trang web full
stack. Tìm hiểu về cách hoạt động của cơ sở dữ liệu trong quá trình lưu các ràng buộc
của trang web. Nghiên cứu cách tạo nên chat bot và cách hoạt động của nó. Tìm hiểu
và thực hiện các cơng cụ quản lý dự án như github. Học và thực hiện các bảng use
case, diagram và tìm ra hướng phát triển cho quá trình nghiên cứu trong tương lai.

1.5.

Phương pháp nghiên cứu

Nhóm đã sử dụng các phương pháp nghiên cứu:
-

Xem các video Youtube hướng dẫn học

-

Xem các trang web có các tài liệu về ngôn ngữ, nghiên cứu.

-

Đọc tài liệu tham khảo trên mạng, các nghiên cứu của những người đi trước

-

Thực hiện khảo sát các trang web có các chức năng tương tự, phân tích yêu
cầu người dùng

1.6.

Nhiệm vụ của đề tài

Đề tài “Website bán quần áo, phụ kiện thời trang với chatbot tư vấn” là một ứng
dụng chạy trên nền web đáp ứng được các yêu cầu sau:

20



 Cung cấp đầy đủ các tính năng như tìm kiếm sản phẩm, mua bán các loại
sản phẩm khác nhau thích hợp với nhiều đối tượng khách hàng, quản lý tài
khoản người dùng, người dùng có thể thực hiện đăng ký, đăng nhập tài
khoản để mua hàng, người dùng có thể thực hiện đặt hàng online và sẽ
được shop giao hàng thơng qua hình thức shipping.
 Cung cấp đầy đủ các tính năng cho chủ shop/admin như: quản lý các sản
phẩm trên website, thực hiện thêm, xóa, sửa các sản phẩm theo nhu cầu của
shop, quản lý đơn hàng của người dùng, quản lý người dùng

1.7.

Mục tiêu của đề tài
Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm

theo hiểu biết và trải nghiệm từ phía người dùng, để tạo nên một website bán hàng
online hồn chỉnh – tối ưu hố về mọi mặt, để sau này dễ phát triển
 Học và tìm hiểu các ngơn ngữ lập trình, cơng nghệ hỗ trợ phát triển 1 trang
web full stack.
 Tìm hiểu về kiến trúc hệ thống cũng như quản lý database
 Tìm hiểu và nghiên cứu về chatbot
 Tìm hiểu cách mơ phỏng giao diện của một ứng dụng trên Figma
 Vẽ được các diagram mô tả các chức năng của hệ thống
 Xây dựng thành công website bán quần áo, phụ kiện thời trang

21


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

2.1 Các ngôn ngữ và công nghệ để tạo nên một trang web fullstack

Front End
2.1.1 HTML

Hình 2.1 HTML

HTML là gì ?
HTML là chữ viết tắt của HyperText Markup Language, dịch ra tiếng Việt
có nghĩa là ngơn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các
thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một
chương trình đặc biệc, ta gọi là trình duyệt browser.
Cú pháp :
<tagname></tagname>

22


Mỗi tagname như trên ta gọi là một thẻ HTML, và cơng dụng của chúng là khác
nhau. Ví dụ bạn muốn in đậm một chữ nào đó thì có thể đặt trong thẻ <strong>Nội
dung in đậm</strong>.
Ngoài ra, mỗi thẻ HTML cịn có một số thuộc tính riêng và danh sách các thuộc tính
sẽ nằm bên trong thẻ mở như sau:
<tagname pro1="value1" prop2="value2"></tagname>
Bố cục của một trang web HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>

My First Heading

My first paragraph.

</body>
</html>
Trong đó:

23




<!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để

trình duyệt (Browser) biết.


<html> và </html> là cặp thẻ nằm ngồi cùng và nó có nhiệm vụ là bao hết

nội dung của trang web lại. Thẻ này là bát buộc.


<head> và </head> là phần khai báo thông tin của trang web



<title> và </title> nằm bên trong thẻ <head> và đây chính là khai báo tiêu đề

cho trang web.



<body> và </body> là thành phần quan trọng nhất, nó chứa nhưng đoạn mã

HTML dùng để hiển thị trên website


Các thẻ cịn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu.

Như vậy trong một website chúng ta chia làm 2 phần chính:


Phần 1: Là những khai báo thơng tin cho trang web và ta đặt nó trong thẻ head.



Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong

thẻ body.

Các vị trí cơ bản khi tạo nên một trang web
Thơng thường giao diện của một trang web sẽ được chia thành các phần như
sau:

24


Hình 2.2 Cấu trúc HTML

Trong đó:



header: header là phần đầu tiên của trang web, chứa logo trang web, banner

chính ngang, menu phụ như thơng tin, ơ tìm kiếm, ngày tháng, thời tiết,…


navigation: thanh điều hướng (hay là menu chính), là một thanh ngang, chứa

các mục chính (thể loại chính) của trang web. Phần menu này rất quan trọng giúp
người dùng và cơ chế tìm kiếm định hình hiểu rõ về cấu trúc website của bạn.


content: chứa nội dung chính website.



sidebar: thanh bên, chứa các phần liên quan đến nội dung chính như các menu

phụ, các bài viết liên quan, quảng cáo,… Một số website có 1 thanh bên, 2 thanh bên
hoặc hơn nữa là tùy theo bố cục.


footer: phần chân (đáy) trang, chứa thơng tin về trang web như tình trạng bản

quyền

25