Đề tài XÂY DỰNG WEBSITE BÁN XE ĐẠP | PTITHCM 2017

BỘ THÔNG TIN VÀ TRUYỀN THÔNG
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
Đề tài:
XÂY DỰNG WEBSITE
BÁN XE ĐẠP ONLINE

Người hướng dẫn
Sinh viên thực hiện
Mã số sinh viên
Lớp
Khóa
Hệ

:
:
:
:
:
:

ThS. NGUYỄN VĂN SÁU
LƯƠNG QUANG HUY
N17DCCN057
D17CQCP01-N
2017 – 2022
ĐẠI HỌC CHÍNH QUY

TP.HCM, tháng 11/2021

BỘ THÔNG TIN VÀ TRUYỀN THÔNG
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
Đề tài:
XÂY DỰNG WEBSITE
BÁN XE ĐẠP ONLINE

Người hướng dẫn
Sinh viên thực hiện
Mã số sinh viên
Lớp
Khóa
Hệ

:
:
:
:
:
:

ThS. NGUYỄN VĂN SÁU
LƯƠNG QUANG HUY
N17DCCN057
D17CQCP01-N
2017 – 2022

ĐẠI HỌC CHÍNH QUY

TP.HCM, tháng 11/2021



HỌC VIỆN
CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
CƠ SỞ TẠI TP. HỒ CHÍ MINH
Khoa: Cơng nghệ thơng tin 2

BM.HV-KT.01/06
CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
TP. Hồ Chí Minh, ngày 21 tháng 09 năm 2021

ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Căn cứ Quyết định số: 402/QĐ-HVCS, ngày 21 tháng 09 năm 2021 của Phó Giám đốc
Học viện – Phụ trách Cơ sở tại TP. Hồ Chí Minh về việc “phê duyệt danh sách giáo viên hướng
dẫn và giao đề tài đồ án tốt nghiệp cho sinh viên Đại học chính quy Khóa 2017-2022 Ngành
Cơng nghệ thơng tin, An tồn thơng tin và Cơng nghệ đa phương tiện”;
Khoa Công nghệ thông tin 2 giao nhiệm vụ thực hiện Đồ án tốt nghiệp cho sinh viên:
1. Họ và tên sv
: Lương Quang Huy
Lớp
: D17CQCP01-N
Ngành đào tạo : Cơng nghệ thơng tin

Mã SV
: N17DCCN057

Khóa
: 2017-2022
Hệ đào tạo : Đại học Chính quy

2. Tên đề tài tốt nghiệp: Website thương mại điện tử bán xe đạp
3. Nội dung chính của Đồ án:
Lý thuyết:
- Tìm hiểu Ngơn ngữ lập trình Java
- Tìm hiểu framework Spring Boot
- Tìm hiểu Jason Web Token Security (JWT), Swagger-UI, Mockito
- Tìm hiểu PostgreSQL
- HTML, CSS, Reactjs
Thực hành:
Xây dựng Website Quản lý bán xe đạp online với các chức năng:
+ Đăng ký, đăng nhập, tạo tài khoản, phân quyền truy cập API;
+ Order:Quản lý đơn đặt hàng/đơn nhập hàng, tạo đơn đặt hàng/ đơn nhập hàng
+ Product: Xem mặt hàng theo loại, chi tiết mặt hàng
+ Report: Hiển thị các thống kê theo yêu cầu
+ Ứng dụng Mockito, ứng dụng Swagger-UI
4. Cơ sở dữ liệu ban đầu:
5. Giáo viên hướng dẫn: ThS. NGuyễn Văn Sáu
6. Ngày giao đề tài: 27/09/2021
7. Ngày nộp quyển: 09/12/2021
TRƯỞNG KHOA CNTT2
Nơi nhận:

- Sinh viên có tên tại khoản 1;
- Lưu: VP Khoa.

TS. Nguyễn Hồng Sơn

LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy
cơ của Học viện Cơng nghệ Bưu chính viễn thơng TP.Hồ Chí Minh, đặc biệt là các
thầy cơ khoa Công nghệ thông tin 2 của trường đã tạo điều kiện cho em học và có thời
gian để hồn thành đề tài này.
Đặc biệt, em xin chân thành cảm ơn thầy ThS.Nguyễn Văn Sáu đã nhiệt tình
hướng dẫn giúp đỡ, cho em những lời nhận xét, góp ý trong công việc, định hướng cho
em đi sâu vào thực tế, cũng như tạo mọi điều kiện thuận lợi để em hồn thành đề tài tốt
nghiệp.
TP. Hồ Chí Minh, ngày 2 tháng 11 năm 2021
Sinh viên thực hiện
LƯƠNG QUANG HUY

1


MỤC LỤC
LỜI CẢM ƠN.................................................................................................................................i
MỤC LỤC......................................................................................................................................ii
DANH MỤC VIẾT TẮT............................................................................................................vii
DANH MỤC HÌNH ẢNH.........................................................................................................viii
DANH MỤC BẢNG BIỂU.......................................................................................................xiv
LỜI MỞ ĐẦU................................................................................................................................1
CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT.....................................................................3
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE...............................................................3
1.1. Ngôn ngữ lập trình Java................................................................................................3
1.1.1 Lịch sử phát triển của Java..................................................................................3
1.1.2 Những đặc trưng của ngôn ngữ Java...........................................................................5

1.1.3 Những đặc điểm nổi bật có trong Java.......................................................................5
1.1.4 Các IDE sử dụng cho Java...........................................................................................6
1.1.4.1

Netbeans..................................................................................................6

1.1.4.2

Eclipse.....................................................................................................7

1.1.4.3

Visual Studio Code..................................................................................8

1.2. Tìm hiểu về Spring Boot.........................................................................................................8
1.2.1 Spring Boot là gì?...........................................................................................................8
1.2.1.1

Spring Framework là gì?.........................................................................8

1.2.1.2

Khái niệm về Spring Boot.......................................................................9

1.2.2 Ưu điểm của Spring Boot...........................................................................................10
1.2.3 Các tính năng cơ bản của Spring Boot.....................................................................10
1.2.3.1

Spring Application.................................................................................11

1.2.3.2

Externalized Configuration....................................................................11

1.2.3.3

Các file Properties..................................................................................11

1.2.3.4

Ghi log…………...................................................................................11

1.2.3.5

Security…………..................................................................................11

1.3. Swagger....................................................................................................................................12
1.3.1 OpenAPI là gì?.............................................................................................................12
1.3.2 Định nghĩa Swagger là gì?..........................................................................................13
1.3.3

Cấu trúc cơ bản của Swagger......................................................................................14
1.3.3.1

Metadata hay Info..................................................................................14

1.3.3.2

Servers……………...............................................................................14

1.3.3.3

Paths………………..............................................................................14

1.3.3.4

Schema…………..................................................................................15

1.4. Json Web Token (JWT)..........................................................................................................16
1.4.1 JWT là gì?......................................................................................................................16
1.4.2 Cấu trúc của một JWT.................................................................................................16
1.4.2.1

Header……………................................................................................17

1.4.2.2

Payload………......................................................................................17

1.4.2.3

Signature…………................................................................................18

1.4.3 Khi nào thì dùng JWT?...............................................................................................18
1.5. ReactJS – thư viện của Javascript........................................................................................18
1.5.1 ReactJS là gì?................................................................................................................18
1.5.2 Tính năng của ReactJS................................................................................................19
1.5.3 Các khái niệm cơ bản liên quan đến ReactJS..........................................................19
1.5.3.1

Redux………….....................................................................................19

1.5.3.2

Virtual DOM………..............................................................................20

1.5.3.3

Component……....................................................................................20

1.5.4 Lợi ích khi sử dụng ReactJS.......................................................................................20
1.6. Kết luận....................................................................................................................................21
CHƯƠNG 2. KHẢO SÁT HỆ THỐNG...................................................................................22
2.1 Khảo sát hệ thống Website....................................................................................................22
2.1.1 Thông tin nhân viên và người dùng..........................................................................22
2.1.2 Thông tin sản phẩm......................................................................................................22
2.1.3 Thông tin đơn đặt hàng...............................................................................................22
2.2 Đối tượng của Website...........................................................................................................22
2.3 Đặc điểm……….....................................................................................................................23
CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG............................................................25
3.1 Sơ đồ phân rã chức năng (BFD)...........................................................................................25
3.2 Mơ hình use case tổng qt...................................................................................................25
3.3 Mơ hình use case khách hàng...............................................................................................26
3.3.1 Mơ hình use case chức năng đăng nhập, đăng kí của khách hàng.......................26
3.3.2 Mơ hình use case chức năng quản lý tài khoản cá nhân........................................27
3.3.3 Mơ hình use case chức năng xem thơng tin.............................................................27
3.3.4 Mơ hình use case chức năng đặt hàng......................................................................28
3.3.5 Mơ hình use case chức năng quản lý giỏ hàng........................................................28

3.3.6 Mơ hình use case chức năng đánh giá sản phẩm....................................................29
3.4 Mơ hình use case admin........................................................................................................29
3.4.1 Mơ hình use case chức năng quản lý đánh giá của khách hàng...........................30
3.4.2 Mô hình use case chức năng quản lý sản phẩm......................................................30
3.4.3 Mơ hình use case chức năng quản lý danh mục......................................................31
3.4.4 Mơ hình use case chức năng quản lý đơn hàng.......................................................31
3.4.5 Mơ hình use case chức năng đăng nhập và quản lý tài khoản..............................32
3.4.6 Mơ hình use case chức năng quản lý nhập hàng.....................................................32
3.4.7 Mơ hình use case chức năng sao lưu và phục hồi dữ liệu.....................................33
3.4.8 Mơ hình use case chức năng thống kê thu chi.........................................................33
3.4.9 Mơ hình use case chức năng thống kê sản phẩm trong kho..................................34
3.4.10 Mơ hình use case chức năng thống kê sản phẩm bán chạy...................................34
3.5 Mô hình use case staff............................................................................................................35
3.5.1 Mơ hình use case chức năng quản lý đánh giá của khách hàng...........................35
3.5.2 Mơ hình use case chức năng quản lý sản phẩm......................................................36
3.5.3 Mơ hình use case chức năng quản lý danh mục......................................................36
3.5.4 Mơ hình use case chức năng quản lý đơn hàng.......................................................37
3.5.5 Mơ hình use case chức năng đăng nhập và quản lý tài khoản..............................37
3.5.6 Mơ hình use case chức năng quản lý nhập hàng.....................................................38
3.5.7 Mơ hình use case chức năng thống kê thu chi.........................................................38
3.5.8 Mơ hình use case chức năng thống kê sản phẩm trong kho..................................39
3.5.9 Mơ hình use case chức năng thống kê sản phẩm bán chạy...................................39
3.6 Mơ tả q trình........................................................................................................................39
3.7 Biểu đồ tuần tự........................................................................................................................43
3.7.1 Biểu đồ tuần tự chức năng đăng nhập.......................................................................43
3.7.2 Biểu đồ tuần tự chức năng đăng ký...........................................................................43
3.7.3 Biểu đồ tuần tự chức năng đổi mật khẩu..................................................................43
3.7.4 Biểu đồ tuần tự chức năng quên mật khẩu...............................................................44
3.7.5 Biểu đồ tuần tự chức năng tìm kiếm.........................................................................44

3.7.6 Biểu đồ tuần tự chức năng đặt hàng..........................................................................45
3.7.7 Biểu đồ tuần tự chức năng thanh toán trực tuyến...................................................45
3.7.8 Biểu đồ tuần tự chức năng quản lý sản phẩm..........................................................45
3.7.9 Biểu đồ tuần tự chức năng quản lý danh mục.........................................................46
3.7.10 Biểu đồ tuần tự chức năng quản lý đơn hàng..........................................................46


3.7.11 Biểu đồ tuần tự chức năng quản lý nhập hàng........................................................46
3.7.12 Biểu đồ tuần tự chức năng quản lý đánh giá...........................................................47
3.7.13 Biểu đồ tuần tự chức năng quản lý tài khoản khách hàng.....................................47
3.7.14 Biểu đồ tuần tự chức năng quản lý tài khoản nhân viên........................................48
3.7.15 Biểu đồ tuần tự chức năng thống kê.........................................................................48
3.8 Biểu đồ hoạt động...................................................................................................................48
3.8.1 Biểu đồ hoạt động chức năng đăng nhập.................................................................48
3.8.2 Biểu đồ hoạt động chức năng đăng kí......................................................................49
3.8.3 Biểu đồ hoạt động chức năng quên mật khẩu..........................................................49
3.8.4 Biểu đồ hoạt động chức năng đổi mật khẩu............................................................50
3.8.5 Biểu đồ hoạt động chức năng đặt hàng....................................................................50
3.8.6 Biểu đồ hoạt động chức năng quản lý sản phẩm....................................................51
3.8.7 Biểu đồ hoạt động chức năng quản lý tài khoản.....................................................53
3.8.8 Biểu đồ hoạt động chức năng quản lý danh mục....................................................55
3.8.9 Biểu đồ hoạt dộng chức năng quản lý đơn hàng.....................................................57
3.8.10 Biểu đồ hoạt động chức năng quản lý nhập hàng...................................................58
3.8.11 Biểu đồ hoạt động chức năng thống kê....................................................................59
3.9 Thiết kế cơ sở dữ liệu.............................................................................................................60
CHƯƠNG 4. PHÂN TÍCH THIẾT KẾ CHƯƠNG TRÌNH.................................................67
4.1

Trang đăng nhập.......................................................................................................67

4.2

Trang đăng kí……………………………………………………………………....67

4.3

Trang quên mật khẩu................................................................................................68

4.4

Trang đổi mật khẩu...................................................................................................69

4.5

Trang cập nhật thông tin tài khoản...........................................................................70

4.6

Trang sản phẩm........................................................................................................70

4.7

Trang chi tiết sản phẩm............................................................................................71

4.8

Trang chủ………………………………………………………………………......72

4.9

Trang đánh giá…………………………………………………………………......73

4.10 Trang giỏ hàng..........................................................................................................73
4.11 Trang đặt hàng..........................................................................................................74
4.12 Trang lịch sử đặt hàng..............................................................................................77
4.13 Trang Nhân viên.......................................................................................................78
4.14

Trang Admin.......................................................................................................................78

4.15

Trang quản lý tài khoản khách hàng..............................................................................78


4.16

Trang quản lý tài khoản nhân viên.................................................................................79

4.17

Trang quản lý sản phẩm...................................................................................................79

4.18

Trang quản lý danh mục...................................................................................................81

4.19

Trang quản lý đơn hàng....................................................................................................82

4.20

Trang quản lý nhập hàng..................................................................................................82

4.21

Trang thống kê...................................................................................................................84

4.22

Trang quản lý đánh giá sản phẩm...................................................................................85

4.23

Trang sao lưu và phục hồi dữ liệu..................................................................................86

CHƯƠNG 5. KIỂM THỬ CHƯƠNG TRÌNH.......................................................................87
5.1 Chạy thử chương trình để kiểm tra hệ thống đăng nhập..................................................87
5.2 Chạy thử chương trình để kiểm tra hệ thống đăng kí tài khoản......................................89
5.3 Chạy thử chương trình để kiểm tra chức năng đổi mật khẩu..........................................92
5.4 Chạy thử chương trình để kiểm tra chức năng quên mật khẩu.......................................94
5.5 Chạy thử chương trình để kiểm tra chức năng đặt hàng..................................................97
KẾT LUẬN................................................................................................................................104
TÀI LIỆU THAM KHẢO........................................................................................................105


DANH MỤC VIẾT TẮT
Từ viết tắt
API

Ý nghĩa
Application Programming Interface – Giao diện lập trình ứng

HTML

dụng
HyperText Markup Language – Một ngơn ngữ lập trình dùng để

HTTP

xây dựng và cấu trúc lại các thành phần có trong Website
HyperText Transfer Protocol – Giao thức truyền tải siêu văn bản

IDE

Integrated Development Environment - Môi trường phát triển

JSON

tích hợp
JavaScript Object Notation – Một kiểu dữ liệu mở trong

JSX

JavaScript
JavaScript XML – Một loại cú pháp mở rộng dành cho ngôn ngữ

JVM

JavaScript viết theo kiểu XML
Java Virtual Machine – Máy ảo cho phép chạy các chương trình

MVC

Java
Model – View – Controller – Một mẫu kiến trúc phần mềm để tạo
lập giao

RSA

diện người dùng trên máy tính
Rivest-Shamir-Adleman – Một thuật Tốn mã khóa khóa cơng

UI

khai
Giao diện người dùng

URL

Uniform Resource Locator – Một địa chỉ web

XML

Extensible Markup Language – Ngôn ngữ đánh dấu mở rộng

YAML

Data Serialization Language – Ngôn ngữ tuần tự hóa dữ liệu

DANH MỤC HÌNH ẢNH
Hình 1. 1: Hình ảnh các phiên bản của Java...............................................................................4
Hình 1. 2: Hình ảnh quy trình chạy một chương trình Java........................................................5
Hình 1. 3: Java chạy trên nhiều hệ điều hành.............................................................................6
Hình 1. 4: Hình ảnh Netbeans.....................................................................................................7
Hình 1. 5: Hình ảnh Eclipse........................................................................................................7
Hình 1. 6: Hình ảnh Visual Studio Code.....................................................................................8
Hình 1. 7: Hình ảnh giao diện Spring Boot...............................................................................10
Hình 1. 8: Hình ảnh ví dụ về Externalized Configuration........................................................11
Hình 1. 9: Giới thiệu về OpenAPI...........................................................................................12
Hình 1. 10: Cấu trúc của JWT..................................................................................................17
Hình 1. 11: Hình ảnh ví dụ của một Header.............................................................................17
Hình 1. 12: Hình ảnh ví dụ của Signature.................................................................................18
Hình 3.1 : Sơ đồ phân rã chức năng (BFD)..............................................................................25
Hình 3.2 : Sơ đồ use case tổng quát..........................................................................................25
Hình 3.3 : Sơ đồ use case tổng quát chức năng của khách hàng...............................................26
Hình 3.4 : Sơ đồ use case chức năng đăng nhập và đăng kí của khách hàng...........................26
Hình 3.5 : Sơ đồ use case chức năng quản lý tài khoản cá nhân..............................................27
Hình 3.6 : Sơ đồ use case chức năng xem thơng tin.................................................................27
Hình 3.7 : Sơ đồ use case chức năng đặt hàng..........................................................................28
Hình 3.8 : Sơ đồ use case chức năng quản lý giỏ hàng.............................................................28
Hình 3.9 : Sơ đồ use case chức năng đánh giá sản phẩm..........................................................29
Hình 3.10 : Sơ đồ use case tổng quát chức năng của admin.....................................................29
Hình 3.11 : Sơ đồ use case chức năng đánh giá và quản lý đánh giá sản phẩm.......................30
Hình 3.12 : Sơ đồ use case chức năng quản lý sản phẩm.........................................................30
Hình 3.13 : Sơ đồ use case chức năng quản lý danh mục.........................................................31

Hình 3.14 : Sơ đồ use case chức năng quản lý đơn hàng..........................................................31
Hình 3.15 : Sơ đồ use case chức năng đăng nhập và quản lý tài khoản...................................32
Hình 3.16 : Sơ đồ use case chức năng quản lý nhập hàng........................................................32
Hình 3.17 : Sơ đồ use case chức năng sao lưu và phục hồi dữ liệu..........................................33
Hình 3.18 : Sơ đồ use case chức năng thống kê lợi nhuận.......................................................33
Hình 3.19 : Sơ đồ use case chức năng thống kê sản phẩm trong kho.......................................34
Hình 3.20 : Sơ đồ use case chức năng thống kê sản phẩm bán chạy........................................34
Hình 3.21 : Sơ đồ use case tổng quát chức năng của staff........................................................35
Hình 3.22 : Sơ đồ use case chức năng đánh giá và quản lý đánh giá sản phẩm.......................35
Hình 3.23 : Sơ đồ use case chức năng quản lý sản phẩm.........................................................36
Hình 3.24 : Sơ đồ use case chức năng quản lý danh mục.........................................................36
Hình 3.25 : Sơ đồ use case chức năng quản lý đơn hàng..........................................................37
Hình 3.26 : Sơ đồ use case chức năng đăng nhập và quản lý tài khoản...................................37
Hình 3.27 : Sơ đồ use case chức năng quản lý nhập hàng........................................................38
Hình 3.28 : Sơ đồ use case chức năng thống kê lợi nhuận.......................................................38
Hình 3.29 : Sơ đồ use case chức năng thống kê sản phẩm tồn kho..........................................39
Hình 3.30 : Sơ đồ use case chức năng thống kê sản phẩm bán chạy........................................39
Hình 3.31 : Biểu đồ tuần tự chức năng đăng nhập....................................................................43
Hình 3.32 : Biểu đồ tuần tự chức năng đăng ký.......................................................................43
Hình 3.33 : Biểu đồ tuần tự chức năng đổi mật khẩu...............................................................43
Hình 3.34 : Biểu đồ tuần tự chức năng quên mật khẩu.............................................................44
Hình 3.35 : Biểu đồ tuần tự chức năng tìm kiếm......................................................................44
Hình 3.36 : Biểu đồ tuần tự chức năng đặt hàng.......................................................................45
Hình 3.37 : Biểu đồ tuần tự chức năng thanh toán trực tuyến..................................................45
Hình 3.38 : Biểu đồ tuần tự chức năng quản lý sản phẩm........................................................45
Hình 3.39 : Biểu đồ tuần tự chức năng quản lý danh mục........................................................46
Hình 3.40 : Biểu đồ tuần tự chức năng quản lý đơn hàng........................................................46


Hình 3.41 : Biểu đồ tuần tự chức năng quản lý nhập hàng của Admin....................................46

Hình 3.42 : Biểu đồ tuần tự chức năng quản lý nhập hàng của Nhân viên...............................47
Hình 3.43 : Biểu đồ tuần tự chức năng quản lý đánh giá sản phẩm.........................................47
Hình 3.44 : Biểu đồ tuần tự chức năng quản lý tài khoản khách hàng.....................................47
Hình 3.45 : Biểu đồ tuần tự chức năng quản lý tài khoản nhân viên........................................48
Hình 3.46 : Biểu đồ tuần tự chức năng thống kê......................................................................48
Hình 3.47 : Biểu đồ hoạt động chức năng đăng nhập...............................................................48
Hình 3.48 : Biểu đồ hoạt động chức năng đăng ký...................................................................49
Hình 3.49 : Biểu đồ hoạt động chức năng quên mật khẩu........................................................49
Hình 3.50 : Biểu đồ hoạt động chức năng đổi mật khẩu...........................................................50
Hình 3.51 : Biểu đồ hoạt động chức năng đặt hàng..................................................................50
Hình 3.52 : Biểu đồ hoạt động chức năng thêm sửa sản phẩm của Admin..............................51
Hình 3.53 : Biểu đồ hoạt động chức năng xóa và in sản phẩm của Admin.............................51
Hình 3.54 : Biểu đồ hoạt động chức năng thêm sửa sản phẩm của nhân viên..........................52
Hình 3.55 : Biểu đồ hoạt động chức năng xóa sản phẩm của nhân viên..................................52
Hình 3.56 : Biểu đồ hoạt động chức năng thêm sửa tài khoản của Admin...............................53
Hình 3.57 : Biểu đồ hoạt động chức năng xóa tài khoản của Admin........................................53
Hình 3.58 : Biểu đồ hoạt động chức năng sửa tài khoản của nhân viên...................................54
Hình 3.59 : Biểu đồ hoạt động chức năng xóa tài khoản của nhân viên...................................54
Hình 3.60 : Biểu đồ hoạt động chức năng thêm sửa danh mục của Admin..............................55
Hình 3.61 : Biểu đồ hoạt động chức năng xóa danh mục của Admin.......................................55
Hình 3.62 : Biểu đồ hoạt động chức năng thêm sửa danh mục của nhân viên.........................56
Hình 3.63 : Biểu đồ hoạt động chức năng xóa danh mục của nhân viên..................................56
Hình 3.64 : Biểu đồ hoạt động chức năng chỉnh sửa trạng thái đơn hàng của Admin..............57
Hình 3.65 : Biểu đồ hoạt động chức năng chỉnh sửa trạng thái đơn hàng của nhân viên.........57
Hình 3.66 : Biểu đồ hoạt động chức năng thêm mới đơn nhập hàng của Admin.....................58
Hình 3.67 : Biểu đồ hoạt động chức năng xóa đơn nhập hàng của Admin...............................58


Hình 3.68 : Biểu đồ hoạt động chức năng thêm mới đơn nhập hàng của nhân viên................59
Hình 3.69 : Biểu đồ hoạt động chức năng thống kê của Admin...............................................59

Hình 3.70 : Biểu đồ hoạt động chức năng thống kê của nhân viên..........................................60
Hình 3.71 : Mơ hình ERD.........................................................................................................62
Hình 3.72 : Sơ đồ quan hệ cơ sở dữ liệu...................................................................................66
Hình 4.1 : Hình ảnh giao diện trang đăng nhập........................................................................67
Hình 4.2 : Hình ảnh giao diện trang đăng kí.............................................................................68
Hình 4.3 : Hình ảnh giao diện trang quên mật khẩu.................................................................69
Hình 4.4 : Hình ảnh giao diện trang đổi mật khẩu....................................................................69
Hình 4.5 : Hình ảnh giao diện trang đổi mật khẩu....................................................................70
Hình 4.6 : Hình ảnh giao diện trang sản phẩm.........................................................................71
Hình 4.7 : Hình ảnh giao diện trang chi tiết sản phẩm..............................................................71
Hình 4.8 : Hình ảnh giao diện trang chủ...................................................................................72
Hình 4.9 : Hình ảnh giao diện trang đánh giá sản phẩm...........................................................73
Hình 4.10 : Hình ảnh giao diện giỏ hàng..................................................................................73
Hình 4.11 : Hình ảnh giao diện trang đặt hàng.........................................................................74
Hình 4.12 : Hình ảnh giao diện trang chọn hình thức thanh tốn.............................................75
Hình 4.13 : Hình ảnh giao diện trang đăng nhập vào ví paypal................................................75
Hình 4.14 : Hình ảnh giao diện trang thanh tốn bằng ví paypal.............................................76
Hình 4.15 : Hình ảnh giao diện trang lịch sử đặt hàng.............................................................77
Hình 4.16 : Hình ảnh giao diện Nhân viên...............................................................................78
Hình 4.17 : Hình ảnh giao diện trang Admin............................................................................78
Hình 4.18 : Hình ảnh giao diện trang quản lý tài khoản khách hàng........................................79
Hình 4.19 : Hình ảnh giao diện trang quản lý tài khoản nhân viên..........................................79
Hình 4.20 : Hình ảnh giao diện trang quản lý sản phẩm của admin.........................................80
Hình 4.21 : Hình ảnh giao diện trang quản lý sản phẩm của nhân viên...................................80
Hình 4.22 : Hình ảnh giao diện trang quản lý chi tiết sản phẩm...............................................81


Hình 4.23 : Hình ảnh giao diện trang quản lý danh mục..........................................................82
Hình 4.24 : Hình ảnh giao diện trang quản lý đơn hàng...........................................................82
Hình 4.25 : Hình ảnh giao diện trang quản lý đơn nhập hàng của Admin................................83

Hình 4.26 : Hình ảnh giao diện trang quản lý đơn nhập hàng của nhân viên...........................83
Hình 4.27 : Hình ảnh giao diện trang quản lý đơn nhập hàng..................................................84
Hình 4.28 : Hình ảnh giao diện trang quản lý thống kê thu chi................................................84
Hình 4.29 : Hình ảnh giao diện trang quản lý thống kê sản phẩm bán theo tháng...................85
Hình 4.30 : Hình ảnh giao diện trang quản lý thống kê sản phẩm tồn kho...............................85
Hình 4.31 : Hình ảnh giao diện trang quản lý đánh giá sản phẩm............................................86
Hình 4.32 : Hình ảnh giao diện trang quản lý đánh giá sản phẩm............................................86
Hình 5.1 : Giao diện nhập sai thơng tin đăng nhập...................................................................87
Hình 5.2 : Giao diện nhập thiếu thơng tin đăng nhập...............................................................87
Hình 5.3 : Giao diện nhập khơng đúng yêu cầu mật khẩu........................................................88
Hình 5.4 : Giao diện nhập đúng thơng tin đăng nhập...............................................................88
Hình 5.5 : Giao diện thơng báo đăng nhập thành cơng.............................................................88
Hình 5.6 : Giao diện nhập sai thơng tin đăng ký......................................................................89
Hình 5.7 : Giao diện nhập thiếu thơng tin đăng ký...................................................................90
Hình 5.8 : Giao diện nhập đúng thơng tin đăng ký...................................................................91
Hình 5.9 : Thơng báo đăng ký tài khoản thành cơng................................................................91
Hình 5.10 : Hình ảnh tài khoản đã được thêm vào thành cơng.................................................92
Hình 5.11 : Giao diện nhập sai mật khẩu cũ.............................................................................92
Hình 5.12 : Giao diện nhập mật khẩu mới trùng mật khẩu cũ..................................................92
Hình 5.13 : Giao diện nhập lại mật khẩu không trùng với mật khẩu mới được nhập...............93
Hình 5.14 : Giao diện nhập đúng thơng tin u cầu đổi mật khẩu...........................................93
Hình 5.15 : Giao diện thơng báo đổi mật khẩu thành cơng......................................................94
Hình 5.16 : Giao diện nhập email khơng tồn tại.......................................................................94
Hình 5.17 : Giao diện nhập email đúng....................................................................................94


Hình 5.18 : Giao diện email chứa mã OTP...............................................................................95
Hình 5.19 : Giao diện nhập sai mã OTP...................................................................................95
Hình 5.20 : Giao diện nhập đúng mã OTP................................................................................95
Hình 5.21 : Giao diện đặt lại mật khẩu mới..............................................................................96

Hình 5.22 : Giao diện nhập lại mật khẩu khơng trùng với mật khẩu mới................................96
Hình 5.23 : Giao diện nhập đúng thơng tin đặt mật khẩu mới..................................................96
Hình 5.24 : Giao diện thông báo đặt lại mật khẩu thành cơng..................................................97
Hình 5.25 : Thơng báo cần đăng nhập để mua hàng.................................................................97
Hình 5.26 : Thơng báo thêm vào giỏ hàng thành cơng.............................................................97
Hình 5.27 : Sản phẩm được thêm vào giỏ hàng........................................................................98
Hình 5.28 : Giao diện chọn sản phẩm cần mua.......................................................................98
Hình 5.29 : Giao diện đặt hàng.................................................................................................99
Hình 5.30 : Giao diện nhập thiếu thơng tin đặt hàng................................................................99
Hình 5.31 : Thơng báo đặt hàng thành cơng...........................................................................100
Hình 5.31 : Giao diện mail thơng báo đã đặt hàng.................................................................100
Hình 5.32 : Giao diện đơn hàng trước khi thanh tốn.............................................................100
Hình 5.33 : Giao diện đăng nhập vào ví paypal......................................................................101
Hình 5.34 : Giao diện thanh tốn bằng ví paypal...................................................................102
Hình 5.35 : Giao diện đơn hàng sau khi thanh toán................................................................103


DANH MỤC BẢNG BIỂU
Bảng 3.1: Bảng dữ liệu người dùng (PERSON).......................................................................63
Bảng 3.2: Bảng dữ liệu danh mục (CATEGORIES).................................................................63
Bảng 3.3: Bảng dữ liệu sản phẩm (PRODUCT).......................................................................63
Bảng 3.4: Bảng dữ liệu đánh giá sản phẩm (Review)...............................................................64
Bảng 3.5: Bảng dữ liệu đơn đặt hàng (Orderbill).....................................................................64
Bảng 3.6: Bảng dữ liệu chi tiết đơn đặt hàng (OrderDetail).....................................................64
Bảng 3.7: Bảng dữ liệu đơn nhập hàng (Orderimport).............................................................64
Bảng 3.8: Bảng dữ liệu chi tiết đơn nhập hàng (OrderimportDetail).......................................65


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

LỜI MỞ ĐẦU

LỜI MỞ ĐẦU
Lý do chọn đề tài
Ngày nay với việc khoa học kỹ thuật ngày càng phát triển mạnh mẽ đặc biệt là cơng
nghệ thơng tin, những gì mà cơng nghệ thơng tin tạo ra giúp con người phát triển trong nhiều
lĩnh vực.
Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ
cần có một máy tính kết nối internet và một dịng dữ liệu truy tìm thì gần như lập tức... cả thế
giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thơng tin, hình ảnh và thậm chí đơi
lúc có cả những âm thanh nếu bạn cần...
Bằng internet, chúng đã đã thực hiện được nhiều công việc với tốc độ nhanh hơn và
chi phí thấp hơn nhiều so với cách thức truyền thống. Chính điều này, đã thúc đẩy sử khai
sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làm biến đổi
đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người.
Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định
được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một cửa hàng hay
shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu
của khách hàng sẽ là cần thiết. Vậy quảng bá thế nào đó là xây dựng được một Website cho
cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán.
Vì vậy, em đã thực hiện đồ án “XÂY DỰNG WEBSITE BÁN XE ĐẠP“
Trong khn khổ đề tài của mình, mặc dù đã cố gắng rất nhiều để hồn thành cơng
việc nhưng chắc rằng khơng tránh khỏi những thiếu sót cần được bổ sung. Em mong nhận
được sự thông cảm và ý kiến đóng góp của thầy cơ. Em xin chân thành cảm ơn.
Mục tiêu của đề tài
Thông tin hiện nay là một lĩnh vực rất quan trọng đối với cuộc sống hiện nay, bên
cạnh đó các nhu cầu nghe nhìn, giải trí, trao đổi thơng tin,... Vì vậy cần các mặt hàng khác
nhau để phục vụ nhu cầu trên, nhưng để chọn được những mặt hàng như ý đúng với nhu cầu
sử dụng thì khơng phải dễ, với lý do đó mà em xây dựng một website bán hàng online. Nhằm
một phần nào đó giúp khách hàng có thể lựa chọn và mua những mặt hàng mọi lúc mọi nơi

mà không cần đi xa mà hàng về tận nhà chỉ cần một cú click chuột.
Đối tượng và phạm vi của đề tài
● Khách hàng.
● Mạng Internet.
● Các thiết bị sử dụng trên mạng như máy tính,...

SVTH : LƯƠNG QUANG HUY - N17DCCN057

1


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

LỜI MỞ ĐẦU

Ứng dụng của đề tài
Website mà em xây dựng có thể giúp ích cho người sử dụng có thể dễ dàng mua bán
sản phẩm, quảng bá sản phẩm, cập nhật thông tin của các sản phẩm mới của cửa hàng, tư vấn
trực tiếp cho khách hàng qua internet, góp phần quảng bá thương hiệu, giảm chi phí kinh
doanh và tăng doanh thu cho cửa hàng.
Đối với khách hàng và cửa hàng: Khách hàng có thể xem được các thơng tin chi tiết
về sản phẩm của cửa hàng, có thể đăng nhập để mua hàng, đánh giá mặt hàng để có thể hồn
thiện hơn, làm cho cửa hàng ngày càng trở nên vững mạnh hơn.
Đối với em: Nâng cao trình độ thiết kế website và phân tích một website thương mại
điện tử. Ngồi ra có thể giúp em hiểu biết sâu rộng về những ngơn ngữ và phần mềm hỗ trợ
trong q trình làm đồ án. Bên cạnh đó giúp em hồn thành đồ án thực tập.
Cấu trúc đề tài
Đề tài được tổ chức gồm ba chương gồm:
● Chương 1: Trình bày tổng quan về ngơn ngữ lập trình Java, các đặc trưng và đặc
điểm nổi bật của ngơn ngữ lập trình Java. Từ đó, trình bày tổng quan về Spring

Boot và các tính năng cơ bản. Tiếp đó là trình bày tổng quan về Swagger và JWT.
Cuối cùng là giới thiệu cơ bản về ReactJS;
● Chương 2: Khảo sát hệ thống website, nghiên cứu đối tượng sử dụng website và
chức năng của từng người, nghiên cứu đặc điểm của một website từ đó thiết kế
một website phù hợp với người sử dụng.
● Chương 3: Phân tích thiết kế hệ thống, vẽ sơ đồ phân ra chức năng, vẽ sơ đồ use
case tổng quát và sơ đồ use case từng chức năng cụ thể, mơ tả q trình use case
thực hiện theo từng chức năng,thiết kế lược đồ quan hệ, vẽ mơ hình thực thể kết
hợp, thiết kế cơ sở dữ liệu cho website.
● Chương 4: Phân tích thiết kế chương trình và trình bày mục đích sử dụng của các
trang giao diện của website.
● Chương 5: Kiểm thử chương trình, thực hiện chạy thử một số chức năng, nhập
đúng, nhập sai thông tin,..

SVTH : LƯƠNG QUANG HUY - N17DCCN057

2


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE
1.1.
1.1.1

Ngôn ngữ lập trình Java

Lịch sử phát triển của Java
Vào tháng 6 năm 1991, James Gosling, Mike Sheridan và Patrick Naughton khởi

xướng dự án ngôn ngữ Java. Java ban đầu được thiết kế cho truyền hình tương tác, nhưng nó
q tiên tiến đối với ngành truyền hình cáp kỹ thuật số vào thời điểm đó. Ban đầu ngơn ngữ
này được gọi là Oak theo tên một cây sồi bên ngoài văn phịng của Gosling. Sau đó, dự án có
tên là Green và cuối cùng được đổi tên thành Java, từ cà phê Java, loại cà phê đến từ
Indonesia. Gosling đã thiết kế Java với cú pháp kiểu C/C++ mà các lập trình viên hệ thống và
ứng dụng đã quen thuộc.
Vào năm 1996, Sun Microsystems đã phát hành bản triển khai công khai đầu tiên dưới
dạng Java 1.0. Nó hứa hẹn khả năng Viết một lần, Chạy mọi nơi ( WORA), cung cấp thời gian
chạy miễn phí trên các nền tảng phổ biến. Khá an tồn và có tính năng bảo mật có thể định
cấu hình, nó cho phép các hạn chế truy cập mạng và tệp. Các trình duyệt web lớn đã sớm kết
hợp khả năng chạy các ứng dụng Java trong các trang web và Java nhanh chóng trở nên phổ
biến. Trình biên dịch Java 1.0 được viết lại bằng Java bởi Arthur van Hoff để tuân thủ nghiêm
ngặt đặc tả ngôn ngữ Java 1.0.
Vào tháng 12 năm 1998-1999, Java 2 được phát hành ( đầu tiền với tên gọi J2SE), các
phiên bản mới có nhiều cấu hình được xây dựng cho các loại nền tảng khác nhau . J2EE bao
gồm các công nghệ và API cho các ứng dụng doanh nghiệp thường chạy trong môi trường
máy chủ, trong khi các API đặc trưng của J2ME bao gồm các công nghệ và API cho các ứng
dụng doanh nghiệp thường chạy trong môi trường máy chủ, trong khi các API đặc trưng của
J2ME tối ưu hóa cho các ứng dụng di động. Phiên bản dành cho máy tính để bàn được đổi tên
thành J2SE. Năm 2006, vì mục đích tiếp thị, Sun đã đổi tên các phiên bản J2 mới lần lượt là
Java EE, Java ME và Java SE.
Vào năm 1997, Sun Microsystems đã tiếp cận cơ quan tiêu chuẩn ISO/IEC JTC 1 và
sau đó là Ecma International để chính thức hóa Java, nhưng sau đó cơng ty nhanh chóng rút
khỏi quy trình này. Java vẫn là một tiêu chuẩn thực tế, được kiểm sốt thơng qua Quy trình
cộng đồng Java. Đã có lúc, Sun cung cấp hầu hết các triển khai Java của mình mà khơng tính
phí, bất chấp trạng thái phần mềm độc quyền của họ. Sun đã tạo ra doanh thu từ Java thông
qua việc bán giấy phép cho các sản phẩm chuyên biệt như Hệ thống Doanh nghiệp Java.

SVTH : LƯƠNG QUANG HUY - N17DCCN057

3


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE

Vào ngày 13 tháng 11 năm 2006, Sun đã phát hành phần lớn máy ảo Java (JVM) của
mình dưới dạng phần mềm mã nguồn mở và miễn phí (FOSS), theo các điều khoản của Giấy
phép Công cộng GNU (GPL). Vào ngày 8 tháng 5 năm 2007, Sun đã hồn thành q trình,
cung cấp tất cả mã cốt lõi của JVM theo các điều khoản phân phối phần mềm miễn phí /
nguồn mở, ngoại trừ một phần nhỏ mã mà Sun không giữ bản quyền.
Vào năm 2009-2010, sau khi được Tập đoàn Oracle mua lại, Oracle đã tự mơ tả mình
là người quản lý công nghệ Java với cam kết không ngừng thúc đẩy cộng đồng tham gia và
minh bạch. Ngày 2 tháng 4 năm 2010, James Gosling từ chức tại Oracle. Vào tháng 1 năm
2016, Oracle đã thông báo rằng môi trường thời gian chạy Java dựa trên JDK 9 sẽ ngừng cung
cấp plugin trình duyệt.
Phần mềm Java chạy trên mọi thứ, từ máy tính xách tay đến trung tâm dữ liệu, bảng
điều khiển trị chơi đến siêu máy tính khoa học.

Hình 1. 1: Hình ảnh các phiên bản của Java

SVTH : LƯƠNG QUANG HUY - N17DCCN057

4

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

1.1.2

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE

Những đặc trưng của ngơn ngữ Java

Hình 1. 2: Hình ảnh quy trình chạy một chương trình Java
Ngơn ngữ lập trình Java có những đặc trưng cơ bản sau:
● Là ngôn ngữ hướng đối tượng.
● Chạy bằng máy ảo Java. Chương trình muốn thực thi phải biên dịch ra mã
máy, mà mã máy mỗi hệ điều hành là khác nhau như Windows biên dịch dưới dạng
file có đi .EXE cịn Linux có dạng đi .ELF. Việc Java có thể chạy mọi hệ điều
hành là do nhà phát triển Sun Microsystems phát triển máy ảo (JVM) chịu trách nhiệm
việc này.
● Đa nhiệm – Đa luồng: Java hỗ trợ lập trình đa nhiệm, đa luồng cho phép chạy
nhiều tiến trình chạy song song trong một thời điểm và tương tác lẫn nhau.
● Java bỏ đa kế thừa trong C++ thay bằng sử dụng Interface.
1.1.3 Những đặc điểm nổi bật có trong Java
● Độc lập phần cứng và hệ điều hành: Java được thiết kế để biên dịch code
thành bytecode và bytecode sẽ chạy trên môi trường thực thi. Nên chương trình Java
có thể chạy trên nhiều thiết bị, nhiều hệ điều hành khác nhau.

SVTH : LƯƠNG QUANG HUY - N17DCCN057

5

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE

Hình 1. 3: Java chạy trên nhiều hệ điều hành
● Mạnh mẽ : q trình cấp phát, giải phóng bộ nhớ thực hiện tự động. Khơng sử
dụng con trỏ hoặc phép tốn con trỏ.
● Bảo mật: do Java phải biên dịch qua máy ảo Java (JVM) nên sẽ được bảo mật
cao hơn khi mọi đối tượng phải qua JVM mới đến hệ điều hành.
● Phân tán: Java hỗ trợ lập trình cho hệ thống phân tán như client-server, RMI...
bằng Java Web, UDP, TCP
1.1.4 Các IDE sử dụng cho Java
IDE hay Integrated Development Environment đóng vai trị như một biên tập viên của
mọi lập trình viên. IDE đáp ứng đa dạng các yêu cầu như xây dựng chương trình Java, ứng
dụng Java, gỡ lỗi, kiểm tra code, hỗ trợ code, Junit testing, GUI, công cụ xây dựng Maven,
mơ hình dữ liệu và rất nhiều các chức năng hữu ích khác.
1.1.4.1 Netbeans
● Netbeans là một một IDE mã nguồn mở được viết bằng Java và được giới thiệu
vào năm 1996 như một dự án sinh viên với tên gọi khác là Xelfi.
● Netbeans IDE hỗ trợ phát triển tất cả các loại ứng dụng Java như Java SE,
JavaFx, web hay mobile. Ngoài ra netbeans được phát triển theo kiến trúc module,
điều đó giúp cho các nhà phát triển bên thứ ba có thể dễ dàng tạo ra các plugins giúp

SVTH : LƯƠNG QUANG HUY - N17DCCN057

6

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

CHƯƠNG 1. GIỚI THIỆU VỀ SPRING BOOT
VÀ CÁC THÀNH PHẦN TRONG WEB SERVICE

mở rộng và nâng cao khả năng của netbeans như plugin PDF, easyUML, Darcula LAF,
Git Toolbar,...
● Ngồi hỗ trợ ngơn ngữ Java thì netbeans cũng được dùng phát triển các ứng
dụng với các ngôn ngữ khác như PHP, C/C++, HTML5,... IDE này chạy được trên hầu
hết các hệ điều hành phổ biến như window, macos, linux và cả solaris.

Hình 1. 4: Hình ảnh Netbeans
1.1.4.2 Eclipse


Eclipse là một IDE miễn phí khác dành cho lập trình Java được giới thiệu vào
tháng 11 năm 2001. Eclipse được viết gần như tồn bộ bởi Java, nó hỗ trợ xây
dựng các ứng dụng Java đa nền tảng sử dụng cho mobile, web, desktop hay
lĩnh vực doanh nghiệp.



Ngoài ra IDE này cũng hỗ trợ phát triển ứng dụng với các ngơn ngữ lập trình
khác như C. C++, C#, Python, Ruby hay thậm chí tạo tài liệu với LaTex thơng
qua các plugins.

Hình 1. 5: Hình ảnh Eclipse

SVTH : LƯƠNG QUANG HUY - N17DCCN057

7