Xây dựng website bán quần áo thể thao
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.34 MB, 127 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH
ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN
XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO
GVHD: THS. NGUYỄN MINH ĐẠO
SVTH: NGUYỄN VĂN ĐẠT
HỒNG MINH THÀNH
SKL009251
Tp.Hồ Chí Minh, tháng 12/2022
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CƠNG NGHỆ THƠNG TIN
------------------------------
KHĨA LUẬN TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO
SVTH: NGUYỄN VĂN ĐẠT
MSSV: 16110050
SVTH: HỒNG MINH THÀNH
MSSV: 18110196
Ngành: CƠNG NGHỆ PHẦN MỀM
GVHD: ThS. NGUYỄN MINH ĐẠO
TP. Hồ Chí Minh, tháng 12 năm 2022
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CƠNG NGHỆ THƠNG TIN
------------------------------
KHĨA LUẬN TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO
SVTH: NGUYỄN VĂN ĐẠT
MSSV: 16110050
SVTH: HỒNG MINH THÀNH
MSSV: 18110196
Ngành: CƠNG NGHỆ PHẦN MỀM
GVHD: ThS. NGUYỄN MINH ĐẠO
TP. Hồ Chí Minh, tháng 12 năm 2022
CỘNG HÒA 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 12 năm 2022
NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP
Họ và tên sinh viên: Nguyễn Văn Đạt
MSSV: 16110050
Ngành: Công Nghệ Thông Tin
Lớp: 16110CLST1
Họ và tên sinh viên: Hoàng Minh Thành
MSSV: 18110196
Ngành: Công Nghệ Thông Tin
Lớp: 18110CLST1
Giảng viên hướng dẫn: ThS. Nguyễn Minh Đạo
Ngày nhận đề tài: 05/09/2022
Ngày nộp đề tài: 21/12/2022
1. Tên đề tài: Xây dựng website bán quần áo thể thao
2. Các số liệu, tài liệu ban đầu: Khảo sát hiện trạng thông qua các website
thương mại điện tử phổ biến hiện này và áp dụng những thơng tin tìm được
vào đồ án.
3. Nội dung thực hiện đề tài:
Xây dựng ứng dụng web cho phép khách hàng có thể đặt hàng trực tuyến
từ cửa hàng.
Xây dựng trang web quản lý để quản lý thông tin cũng như xác nhận các
đơn đặt hàng của khách hàng.
4. Sản Phẩm: Trang web bán quần áo thể thao trực tuyến.
TRƯỞNG NGÀNH
(Ký & ghi rõ họ tên)
GIẢNG VIÊN HƯỚNG DẪN
(Ký & ghi rõ họ tên)
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên sinh viên: Nguyễn Văn Đạt
MSSV: 16110050
Họ và tên sinh viên: Hồng Minh Thành
MSSV: 18110196
Ngành: Cơng Nghệ Thông Tin
Tên đề tài: Website bán quần áo thể thao trực tuyến
Họ và tên Giáo viên hướng dẫn: ThS. Nguyễn Minh Đạo
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
2. Ưu điểm:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
3. Khuyết điểm:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
4. Đề ngh cho bảo vệ hay không?
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
5. Đánh giá loại:…………………………………………………………………….
6. Điểm:……………...(Bằng Chữ:………………………………………………...)
Tp. Hồ Chí Minh, ngày tháng 12 năm 2022
Giảng viên hướng dẫn
(Ký & ghi rõ họ tên)
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên sinh viên: Nguyễn Văn Đạt
MSSV: 16110050
Họ và tên sinh viên: Hồng Minh Thành
MSSV: 18110196
Ngành: Cơng Nghệ Thông Tin
Tên đề tài: Website bán quần áo thể thao trực tuyến
Họ và tên Giáo viên phản biện: TS. Lê Văn Vinh
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
2. Ưu điểm:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
3. Khuyết điểm:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
4. Đề ngh cho bảo vệ hay không?
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
5. Đánh giá loại:……………………………………………………………...………
6. Điểm:……………(Bằng Chữ:...…………………………………..........……….)
Tp. Hồ Chí Minh, ngày tháng 12 năm 2022
Giảng viên hướng dẫn
(Ký & ghi rõ họ tên)
Khóa Luận Tốt Nghiệp
LỜI CẢM ƠN
Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đến với
Khoa Đào tạo Chất Lượng cao – Ngành Công Nghệ Thông Tin – Trường Đại Học Sư
Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được
học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này.
Bên cạnh đó nhóm chúng em xin gửi đến thầy Nguyễn Minh Đạo lời cảm ơn sâu sắc
nhất. Trải qua một quá trình dài học tập và thực hiện đề tài trong thời gian qua. Thầy
đã tận tâm chỉ bảo nhiệt tình nhóm chúng em trong suốt q trình từ lúc bắt đầu cũng
như kết thúc đề tài này.
Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh
nghiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các
công ty. Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Nguyễn
Minh Đạo đã tặng cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ
về chuyên ngành và công việc trong tương lai. Đặc biệt điều này đã giúp và thơi thúc
chúng em hồn thành được đề tài. Đây sẽ là hành trang vô cùng lớn của chúng em
trước khi bước ra một cuộc sống mới.
Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất cố gắng
để hoàn thành một cách tốt nhất. Chính vì vậy việc xảy ra những thiếu sót là điều khó
có thể tránh khỏi. Chúng em hi vọng nhận được sự góp ý tận tình của q thầy (cơ)
qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện
nâng cấp lại sản phẩm của mình một cách tốt nhất có thể.
Chúng em xin chân thành cảm ơn!
Nhóm sinh viên thực hiện
Khoa ĐT CLC – ĐH SPKT TP.HCM
|1
Khóa Luận Tốt Nghiệp
MỤC LỤC
LỜI CẢM ƠN ........................................................................................................... 1
MỤC LỤC ................................................................................................................. 2
DANH MỤC HÌNH .................................................................................................. 5
DANH MỤC BẢNG ................................................................................................. 7
Chương 1.
MỞ ĐẦU ............................................................................................ 9
1.1
Lý do chọn đề tài............................................................................................... 9
1.2
Mục tiêu đề tài .................................................................................................. 9
1.3
Đối tượng và phạm vi nghiên cứu .................................................................... 9
1.3.1.
Đối tượng ................................................................................................... 9
1.3.2.
Phạm vi nghiên cứu .................................................................................... 9
1.4
Kết quả dự kiến đạt được ................................................................................ 10
1.4.1.
Phía người quản tr ................................................................................... 10
1.4.2.
Phía người dùng ....................................................................................... 10
Chương 2.
2.1
CƠ SỞ LÝ THUYẾT ...................................................................... 11
Tổng quan về Java .......................................................................................... 11
2.1.1
Một số khái niệm trong Java .................................................................... 11
2.1.2
Ưu điểm của Java ..................................................................................... 11
2.1.3
Nhược điểm của Java ............................................................................... 11
2.2
Tổng quan về Spring Boot .............................................................................. 11
2.2.1
Một số khái niệm trong Spring Boot ........................................................ 12
2.2.2
Ưu điểm Spring Boot ............................................................................... 12
2.2.3
Nhược điểm Spring Boot ......................................................................... 12
2.2.4
Môi trường phát triển Spring Boot........................................................... 12
2.3
Tổng quan về MongoDB ................................................................................ 12
2.3.1
Một số khái niệm trong MongoDB .......................................................... 12
2.3.2
Ưu điểm của MongoDB ........................................................................... 13
2.3.3
Nhược điểm của MongoDB ..................................................................... 13
2.3.4
Môi trường phát triển MongoDB ............................................................. 13
2.4
Tổng quan về HTML ...................................................................................... 13
Khoa ĐT CLC – ĐH SPKT TP.HCM
|2
Khóa Luận Tốt Nghiệp
2.5
Tổng quan về CSS .......................................................................................... 14
2.6
Tổng quan về Javascript ................................................................................. 14
2.7
Tổng quan về React JS.................................................................................... 14
2.8
Môi trường phát triển React JS ....................................................................... 15
2.9
Kiến trúc về React JS ...................................................................................... 15
2.9.1
Component ............................................................................................... 15
2.9.2
Functional Component ............................................................................. 15
2.9.3
Class Component ..................................................................................... 15
2.9.4
Props ......................................................................................................... 15
2.9.5
State .......................................................................................................... 16
2.9.6
Hook ......................................................................................................... 16
2.9.7
Effect Hook .............................................................................................. 16
2.9.8
Life Cycle ................................................................................................. 16
Cài đặt môi trường cho React JS ................................................................. 17
2.10
Chương 3.
3.1
KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU............ 18
Khảo sát hiện trạng ......................................................................................... 18
3.1.1
Adidas: ....................................................... 18
3.1.2
Sport1: .......................................................................... 22
3.2
Xác đ nh yêu cầu ............................................................................................. 24
3.2.1
Lược đồ Usecase ...................................................................................... 24
3.2.2
Bảng Requirement dành cho Usecase ...................................................... 26
3.2.3
Đặc tả Usecase ......................................................................................... 29
Chương 4.
4.1
THIẾT KẾ ỨNG DỤNG ................................................................ 60
Sơ đồ Class Diagram ...................................................................................... 60
4.1.1
Sơ đồ thiết kế class diagram..................................................................... 60
4.1.2
Mô tả thiết kế class diagram .................................................................... 60
4.2
Sơ đồ tuần tự ................................................................................................... 69
4.3
Thiết kế giao diện............................................................................................ 81
4.4.1
SCP001 Giao diện trang đăng nhập ......................................................... 81
4.4.2
SCP002 Giao diện trang đăng ký ............................................................. 83
Khoa ĐT CLC – ĐH SPKT TP.HCM
|3
Khóa Luận Tốt Nghiệp
4.4.3
SCP003 Giao diện trang chủ .................................................................... 85
4.4.4
SCP004 Giao diện trang hiển th sản phẩm ............................................. 87
4.4.5
SCP005 Giao diện trang danh mục .......................................................... 89
4.4.6
SCP006 Giao diện trang giỏ hàng ............................................................ 90
4.4.7
SCP007 Giao diện trang thanh toán ......................................................... 91
4.4.8
SCP008 Giao diện trang đơn hàng ........................................................... 91
4.4.9
SCP009 Giao diện trang Admin............................................................... 92
4.4.10 SCP010 Giao diện trang quản lý khách hàng .......................................... 95
4.4.11 SCP011 Giao diện trang quản lý sản phẩm ............................................. 97
4.4.12 SCP012 Giao diện trang quản lý đơn hàng ............................................ 100
4.4.13 SCP013 Giao diện trang quản lý danh mục ........................................... 101
4.4.14 SCP014 Giao diện trang quản lý Admin ................................................ 102
4.4.15 SCP015 Giao diện trang quản lý thông tin cá nhân ............................... 104
Chương 5.
CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG .................................... 105
5.1
Cài đặt ứng dụng ........................................................................................... 105
5.2
Kiểm thử phần mềm...................................................................................... 114
Chương 6.
6.1
KẾT LUẬN .................................................................................... 117
Kết quả đạt được ........................................................................................... 117
6.1.1
Kiến thức tìm hiểu được......................................................................... 117
6.1.2
Về chương trình đã xây dựng ................................................................. 117
6.1.3
Ưu khuyết điểm ...................................................................................... 117
6.2
Hướng phát triển ........................................................................................... 117
BẢNG NHỮNG TỪ VIẾT TẮT.......................................................................... 118
TÀI LIỆU THAM KHẢO.................................................................................... 119
Khoa ĐT CLC – ĐH SPKT TP.HCM
|4
Khóa Luận Tốt Nghiệp
DANH MỤC HÌNH
Hình 3. 1 Trang chủ Adidas ......................................................................................... 18
Hình 3. 2 Trang đăng nhập Adidas ............................................................................... 19
Hình 3. 3 Trang đăng ký gia nhập AdiClub ................................................................. 20
Hình 3. 4 Trang nhập mã khuyến mãi .......................................................................... 21
Hình 3. 5 Trang chat trực tiếp....................................................................................... 21
Hình 3. 6 Trang chủ Sport1 .......................................................................................... 22
Hình 3. 7 Trang nhập mã khuyến mãi .......................................................................... 23
Hình 3. 8 Trang chat, gọi điện qua bên thứ 3 ............................................................... 23
Hình 3. 9 Lược đồ usecase tổng quát ........................................................................... 24
Hình 3. 10 Lược đồ usecase actor User ........................................................................ 25
Hình 3. 11 Lược đồ usecase actor Admin .................................................................... 26
Hình 4. 1 Class diagram ............................................................................................... 60
Hình 4. 2 Sequence diagram đăng nhập ....................................................................... 69
Hình 4. 3 Sequence diagram người dùng đăng ký tài khoản ........................................ 70
Hình 4. 4 Sequence diagram quên mật khẩu ................................................................ 71
Hình 4. 5 Sequence diagram thêm sản phẩm vào giỏ hàng .......................................... 72
Hình 4. 6 Sequence diagram cập nhập giỏ hàng .......................................................... 73
Hình 4. 7 Sequence Diagram chức năng đặt hàng........................................................ 74
Hình 4. 8 Sequence Diagram chức năng cập nhập thông tin cá nhân .......................... 75
Hình 4. 9 Sequence Diagram xác nhận đơn hàng......................................................... 76
Hình 4. 10 Sequence Diagram hủy đơn hàng ............................................................... 77
Hình 4. 11 Sequence Diagram thêm nhân viên ............................................................ 78
Hình 4. 12 Sequence Diagram thêm sản phẩm............................................................. 79
Hình 4. 13 Sequence Diagram sửa sản phẩm ............................................................... 80
Hình 4. 15 Giao diện trang đăng nhập .......................................................................... 81
Hình 4. 16 Giao diện trang đăng ký ............................................................................. 83
Hình 4. 17 Giao diện trang chủ .................................................................................... 85
Hình 4. 18 Giao diện trang hiển th sản phẩm .............................................................. 87
Hình 4. 19 Giao diện trang danh mục........................................................................... 89
Hình 4. 20 Giao diện trang giỏ hàng ............................................................................ 90
Hình 4. 21 Giao diện trang thanh tốn ......................................................................... 91
Hình 4. 22 Giao diện trang đơn hàng ........................................................................... 91
Hình 4. 23 Giao diện trang chủ Admin ........................................................................ 92
Hình 4. 24 Giao diện trang Admin ............................................................................... 93
Hình 4. 25 Giao diện trang quản lý khách hàng ........................................................... 95
Hình 4. 26 Giao diện trang thêm khách hàng ............................................................... 96
Hình 4. 27 Giao diện trang quản lý sản phẩm .............................................................. 97
Khoa ĐT CLC – ĐH SPKT TP.HCM
|5
Khóa Luận Tốt Nghiệp
Hình 4. 28 Giao diện thêm sản phẩm ........................................................................... 98
Hình 4. 29 Giao diện sửa sản phẩm .............................................................................. 99
Hình 4. 30 Giao diện trang quản lý đơn hàng ............................................................ 100
Hình 4. 31 Giao diện trang quản lý danh mục ............................................................ 101
Hình 4. 32 Giao diện trang thêm danh mục................................................................ 102
Hình 4. 33 Giao diện trang quản lý Admin ............................................................. 102
Hình 4. 34 Giao diện trang thêm Admin ................................................................. 103
Hình 4. 35 Giao diện trang quản lý thơng tin cá nhân ............................................ 104
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
Hình 5.
1 MongoDB đăng nhập ................................................................................ 105
2 MongoDB trang chủ .................................................................................. 106
3 MongoDB tạo kết nối ................................................................................ 107
4 MongoDB tạo kết nối (tt) .......................................................................... 108
5 Back-End cài đặt package ......................................................................... 109
6 Back-End chỉnh sửa kết nôi MongoDB..................................................... 109
7 Back-End Chạy ứng dụng.......................................................................... 110
8 Back-End trang chủ ................................................................................... 111
9 Cài đặt thư viện Front-end ......................................................................... 112
10 Khởi chạy Front-end ................................................................................ 112
11 Chạy thành công Front-end ..................................................................... 113
Khoa ĐT CLC – ĐH SPKT TP.HCM
|6
Khóa Luận Tốt Nghiệp
DANH MỤC BẢNG
Bảng 3. 1 Bảng yêu cầu dành cho Usecase .................................................................. 26
Bảng 3. 2 Đặc tả usecase đăng nhập............................................................................. 29
Bảng 3. 3 Đặc tả usecase đăng xuất ............................................................................. 31
Bảng 3. 4 Bảng đặc tả usecase đăng ký tài khoản ........................................................ 32
Bảng 3. 5 Đặc tả Usecase quản lý bác sĩ ...................................................................... 33
Bảng 3. 6 Đặc tả Usecase thêm thông tin bác sĩ ........................................................... 35
Bảng 3. 7 Đặc tả usecase xem thông tin bác sĩ ............................................................. 36
Bảng 3. 8 Đặc tả usecase đăng ký l ch khám ............................................................... 37
Bảng 3. 9 Đặc tả usecase tạo đơn hàng ........................................................................ 39
Bảng 3. 10 Đặc tả usecase thanh toán .......................................................................... 40
Bảng 3. 11 Đặc tả usecase theo dõi đơn hàng .............................................................. 42
Bảng 3. 12 Đặc tả usecase xem thông tin cá nhân........................................................ 43
Bảng 3. 13 Đặc tả usecase chỉnh sửa thông tin ............................................................ 44
Bảng 3. 14 Đặc tả usecase xem các bác sĩ có trong chuyên khoa ................................ 46
Bảng 3. 15 Đặc tả usecase thêm sản phẩm mới............................................................ 47
Bảng 3. 16 Đặc tả usecase quản lý sản phẩm xóa sản phẩm ........................................ 49
Bảng 3. 17 Đặc tả usecase quản lý sản phẩm - sữa sản phẩm ...................................... 50
Bảng 3. 18 Bảng đặc tả usecase quản lý khách hàng - xem thông tin .......................... 51
Bảng 3. 19 Đặc tả usecase quản lý khách hàng - chỉnh sửa thông tin .......................... 53
Bảng 3. 20 Bảng đặc tả usecase quản lý khách hàng - thay đổi trạng thái ................... 55
Bảng 3. 21 Đặc tả usecase quản lý đơn hàng - xem đơn hàng ..................................... 56
Bảng 3. 22 Đặc tả usecase cập nhật thông tin l ch khám chữa bệnh cho bác sĩ ........... 58
Bảng 4. 1 Mô tả Class User .......................................................................................... 60
Bảng 4. 2 Mô tả Class Product ..................................................................................... 61
Bảng 4. 3 Mô tả Class Transaction ............................................................................... 62
Bảng 4. 4 Mô tả Class Order ........................................................................................ 63
Bảng 4. 5 Mô tả Class Category ................................................................................... 64
Bảng 4. 6 Mô tả Class EmbeddedSize.......................................................................... 65
Bảng 4. 7 Mô tả Class EmbeddedAddress ................................................................... 65
Bảng 4. 8 Mô tả Class EmbeddedCategory .................................................................. 65
Bảng 4. 9 Mô tả Class EmbeddedDescription .............................................................. 66
Bảng 4. 10 Mô tả Class EmbeddedOption ................................................................... 66
Bảng 4. 11 Mô tả Class EmbeddedPayment ................................................................ 66
Bảng 4. 12 Mô tả Class EmbeddedPrice ...................................................................... 67
Bảng 4. 13 Mô tả Class EmbeddedProductsInOrder .................................................... 67
Bảng 4. 14 Mô tả Class Like ........................................................................................ 68
Bảng 4. 15 Mô tả Class Comment ................................................................................ 68
Khoa ĐT CLC – ĐH SPKT TP.HCM
|7
Khóa Luận Tốt Nghiệp
Bảng 4. 16 Mơ tả Class EmbeddedComment ............................................................... 68
Bảng 4. 17 Bảng mơ tả màn hình đăng nhập ................................................................ 82
Bảng 4. 18 Bảng mơ tả màn hình đăng ký ................................................................... 84
Bảng 4. 19 Bảng mô tả màn hình trang chủ Web......................................................... 86
Bảng 4. 20 Bảng mơ tả màn hình trang hiển th sản phẩm........................................... 88
Bảng 4. 21 Bảng mơ tả màn hình danh mục................................................................. 89
Bảng 4. 22 Bảng mơ tả màn hình giỏ hàng .................................................................. 90
Bảng 4. 23 Bảng mơ tả màn hình trang đơn hàng ........................................................ 92
Bảng 4. 24 Bảng mơ tả màn hình trang chủ Admin ..................................................... 93
Bảng 4. 25 Bảng mơ tả màn hình trang Admin ............................................................ 93
Bảng 4. 26 Bảng mô tả màn hình trang quản lý khách hàng ........................................ 95
Bảng 4. 27 Bảng mơ tả màn hình trang quản lý sản phẩm ........................................... 97
Bảng 4. 28 Bảng mơ tả màn hình quản lý danh mục.................................................. 101
Bảng 5. 1 Bảng kiểm thử phần mềm .......................................................................... 114
Khoa ĐT CLC – ĐH SPKT TP.HCM
|8
Khóa Luận Tốt Nghiệp
Chương 1.MỞ ĐẦU
1.1 Lý do chọn đề tài
Cùng với xu thế phát triển công nghệ trên thế giới, thương mại điện tử ở Việt
Nam đang từng bước hình thành, tăng trưởng mạnh mẽ, và giữ vai trị ngày càng quan
trọng trong phân phối hàng hóa.
Thương mại điện tử càng được biết tới như một phương thức kinh doanh hiệu
quả từ khi Internet hình thành và phát triển. Chính vì vậy, nhiều người hiểu thương
mại điện tử theo nghĩa cụ thể hơn là giao d ch thương mại, mua sắm qua Internet và
mạng.
Thương mại điện tử được thực hiện đối với các hoạt động truyền thống (chăm
sóc sức khỏe, giáo dục,…), thương mại d ch vụ (d ch vụ pháp lý, d ch vụ tài
chính,….) và đặc biệt thương mại hàng hóa (hàng gia dụng, quần áo,….). Bạn chỉ cần
vào các trang d ch vụ thương mại điện tử, làm theo hướng dẫn và click vào những gì
bạn cần. Tóm lại, thương mại điện tử đang dần trở thành một cuộc cách mạng có thể
thay đổi hồn tồn cách thức mua sắm của con người trong tương lai.
Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt
Nam. Chúng tôi đã tìm hiểu, xây dựng và cài đặt website bán quần áo thể thao online.
1.2 Mục tiêu đề tài
Đề tài này nhằm xây dựng một trang web cho việc mua bán quần áo thể thao
trực tuyến một các dễ dàng, vận dụng tốt các kiếm thức về công nghệ Spring Boot,
ReactJS và MongoDB cho ứng dụng. Đề tài này có thể giúp người bán hàng quản lý,
theo giỏi sản phẩm, đơn hàng, khách hàng, xem thống kê doanh thu. Ngoài ra, đề tài
tạo ra cho người dùng một nơi mua sản trực tuyến, dễ dàng tìm kiếm sản phẩm, đặt
hàng và thanh toán.
1.3 Đối tượng và phạm vi nghiên cứu
1.3.1. Đối tượng
Đối tượng mà nhóm chúng em hướng đến là tất cả mọi người có nhu cầu tìm
kiếm quần áo thể thao, các cửa hàng có nhu cầu tiếp cận kênh bán hàng trực tuyến.
1.3.2. Phạm vi nghiên cứu
Ứng dụng được sử dụng cho các cửa hàng bán quần áo thể thao, giúp cho
những cửa hàng này có thể bán hàng một cách hiệu quả hơn trong thời đại 4.0, cũng
như giúp cho khách hàng có thể tiếp cận được những sản phẩm từ cửa hàng và những
Khoa ĐT CLC – ĐH SPKT TP.HCM
|9
Khóa Luận Tốt Nghiệp
khuyến mãi của cửa hàng để từ đó đưa ra các quyết đ nh mua hàng và sở hữu sản
phẩm của cửa hàng.
1.4 Kết quả dự kiến đạt được
1.4.1. Phía người quản trị
Cho phép người quản tr vào trang web để:
-
Trang đăng nhập
Trang đăng xuất
Quản lý sản phẩm
Quản lý người dùng
Quản lý đơn hàng
Quản lý admin
Quản lý danh mục
1.4.2. Phía người dùng
Cho phép khách vãng lai truy cập các trang:
-
Trang đăng ký
Trang chủ
Trang danh mục sản phẩm
Trang chi tiết sản phẩm
Thêm sản phẩm vào giỏ hàng
Tìm kiếm sản phẩm
Cho phép khách đã có tài khoản truy cập:
-
Tất cả các trang khách vãng lai có thể truy cập
Trang đăng nhập
Trang đăng xuất
Trang thông tin cá nhân
Trang đặt hàng
Trang thanh toán
Trang theo dõi đơn hàng
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 10
Khóa Luận Tốt Nghiệp
Chương 2. CƠ SỞ LÝ THUYẾT
2.1 Tổng quan về Java
Java là một trong những ngôn ngữ lập trình hướng đối tượng, được sử dựng để
phát triển các phần mềm desktop, các ứng dụng web, game, các ứng dụng cho thiết b
di động. Java tạo ra các ứng dụng đa nền tảng. Java được tạo ra với tiêu chí “ Write
One, Run Anywhere”.[1]
2.1.1 Một số khái niệm trong Java
Java là một ngơn lập trình hướng đối tượng, trong java tất cả đều là đối tượng.
JVM: là máy ảo Java, JVM cung cấp mơi trường thực thi chương trình Java, vì
thế một ứng dụng Java có thể chạy trên bất kỳ nền tảng nào có JVM.
Java khơng phụ thuộc vào hệ điều hành, khi biên d ch Java sẽ biên d ch ra byte
code, byte code sẽ được chạy trên JVM.
JDK: là bộ công cụ giúp phát triển ứng dụng Java, JDK sẽ biên d ch code, sau
đó chạy và xử lý trên JVM và JRE.
JRE: là một gói công cụ được sử dụng để chạy code.
2.1.2 Ưu điểm của Java
Java là ngơn ngữ lập trình đa nền tảng, hướng đối tượng và cho phép lập trình
đa luồng, độc lập nền tảng nên có thể chạy ở mọi nơi.
Java là ngơn ngữ lập trình bậc cao, giúp cho việc viết code dễ dàng, có hiệu
năng mạnh mẽ, tốc độ xử lý nhanh.
Java quản lý bộ nhớ hiệu quả, có khả năng tự thu gom rác, xử lý ngoại lệ, có độ
bảo mật cao.
Java có khả năng phát triển nhiều loại ứng dụng khác nhau như web, desktop,
thiết b di động.
2.1.3 Nhược điểm của Java
Java biên d ch ra byte code và chạy trên JVM thông qua JRE nên tốc độ sẽ
chậm hơn, tốn nhiều tài nguyên hơn, mặc dù là một ngôn ngữ cấp cao nhưng đoạn mã
viết bằng Java dài và phức tạp, Java có rất ý trình tạo GUI nên việc phát triển các ứng
dụng desktop khá vất vã.
2.2 Tổng quan về Spring Boot
Spring Boot là một module của Spring Framework, được xây dựng nhằm phát
triển các ứng dụng java nhanh hơn, đơn giản hơn. Spring Boot giúp đơn giản hoá
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 11
Khóa Luận Tốt Nghiệp
trong việc cấu hình ứng dụng, giúp người lập trình tập trung vào việc phát triển
business của ứng dụng.[2]
2.2.1 Một số khái niệm trong Spring Boot
Dependency Injection: trong Spring là một mẫu thiết kế được sử dụng để loại
bỏ các phụ thuộc, giúp cho việc quản lý và kiểm thử ứng dụng trở nên dễ dàng hơn.
Dependency Injection giúp cho các đoạn mã ít phụ thuộc vào nhau hơn[3].
Aspect Oriented Programming: là một kỹ thuật lập trình (kiểu như lập trình
hướng đối tượng) nhằm phân tách chương trình thành các module riêng rẽ, phân biệt,
khơng phụ thuộc nhau[4].
2.2.2 Ưu điểm Spring Boot
Spring Boot là một module của Spring Framework, nên Spring Boot kế thừa tất
cả các tính năng của Spring Framework.
Đơn giản hố trong việc cấu hình ứng dụng, chạy độc lập, dễ dàng deploy vì
các ứng dụng server được nhúng trực tiếp vào ứng dụng.
Dễ dàng thêm các thư viện bên ngoài.
2.2.3 Nhược điểm Spring Boot
Do việc tự cấu hình nên Spring Boot tạo ra nhiều phụ thuộc dẫn đến kích thước
tệp lớn.
2.2.4 Mơi trường phát triển Spring Boot
Intellij IDEA Ultimate Editor: Là một công cụ lập trình Java, được phát triển
bởi JetBrains, hỗ trợ trên nhiều nền tảng như Windows, MacOS, Linux.
Intellij có bộ debug đi kèm cực kỳ mạnh mẽ, hỗ trợ lập trình nhiều loại ứng
dụng khác nhau như : Spring Framework, Angular, React....
Intellij hỗ trợ một bộ phím tắt giúp việc phát triển ứng dụng trở nên nhẹ nhàng
hơn, hỗ trợ gợi ý code cực kỳ thơng minh, có một kho các tiện ích khổng lồ.
2.3 Tổng quan về MongoDB
MongoDB là một cơ sở dữ liệu mã nguồn mở được viết bằng C++, là một dạng
cơ sở dữ liệu dạng NoSQL có hiệu năng cao, khả năng mở rộng dễ dàng, dữ liệu được
lưu ở dạng document với một cặp key-value.[5]
2.3.1
Một số khái niệm trong MongoDB
_id: là trường dữ liệu bắt buộc trong mỗi document, trường _id đại diện cho
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 12
Khóa Luận Tốt Nghiệp
một giá tr duy nhất trong document.
Collection: là một nhóm nhiều document trong MongoDB
Document: là một bảng ghi dữ liệu
2.3.2
Ưu điểm của MongoDB
- MongoDB có hiệu năng cao, dễ dàng sử dụng, khả năng mở rộng tốt.
- Ít schema hơn các RDBMS, mơ hình dữ liệu linh hoạt.
- Có tốc độ truy cập dữ liệu nhanh.
2.3.3
Nhược điểm của MongoDB
- MongoDB sử dụng nhiều bộ nhớ, b giới hạn data size
2.3.4
Môi trường phát triển MongoDB
Mongo Atlas là một cơ sở dữ liệu đám mây, chạy trên hạ tầng đám mây của
AWS, Azure, Google Cloud. Chúng ta có thể sử dụng MongoDB Atlas bằng cách truy
cập vào trang chủ và đăng nhập nhanh bằng tài khoản Google.
2.4 Tổng quan về HTML
HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để
xây dựng và cấu trúc lại các thành phần có trong Website.[6]
Ưu điểm:
- Học HTML khá đơn giản
- Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vơ cùng lớn
- Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
- Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất
cao
- Sử dụng mã nguồn mở, hoàn toàn miễn phí
- HTML là chuẩn web được vận hành bởi W3C
- Dễ dàng để tích hợp với các loại ngơn ngữ backend (ví dụ như: PHP,
Node.js,…)
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 13
Khóa Luận Tốt Nghiệp
Nhược điểm:
- Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng
động, lập trình viên phải dùng thêm JavaScript hoặc ngơn ngữ backend
của bên thứ 3 (ví dụ như: PHP)
- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố
trùng lặp như header, footer.
- Khó để kiểm sốt cách đọc và hiển th file HTML của trình duyệt (ví dụ,
một số trình duyệt cũ khơng render được tag mới. Do đó, dù trong
HTML document có sử dụng các tag này thì trình duyệt cũng khơng đọc
được).
- Một vài trình duyệt cịn chậm cập nhật để hỗ trợ tính năng mới của
HTML
2.5 Tổng quan về CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử
dụng để tìm và đ nh dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu
(HTML). Nói ngắn gọn hơn là ngơn ngữ tạo phong cách cho trang web.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn
có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp
dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup
(nền tảng của site) và CSS đ nh hình phong cách (tất cả những gì tạo nên giao diện
website), chúng là không thể tách rời.[7]
2.6 Tổng quan về Javascript
JavaScript là ngơn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và
nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như là
một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng
như phía máy chủ (Nodejs) tạo ra các trang web động.[8]
2.7 Tổng quan về React JS
React JS là một thư viện Javascript được phát triển bởi Facebook để phát triển
các ứng dụng Single Page Application. Nó hỗ trợ việc xây dựng những thành phần
(components) UI có tính tương tác cao, có trạng thái và có tính tái sử dụng cao.
Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung các
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 14
Khóa Luận Tốt Nghiệp
phần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của người
dùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản. Hiểu đơn
giản thì các render dữ liệu khơng chỉ được thực hiện ở v trí server mà cịn ở v trí
client khi sử dụng ReactJS. [9]
2.8 Môi trường phát triển React JS
NodeJS và NPM : NodeJS là nền tảng cần thiết cho sự phát triển ReactJS. Kiểm
tra thiết lập môi trường NodeJS .
Sau khi cài đặt Node JS, ta bắt đầu cài đặt React sử dụng npm để cài đặt React JS.
-
Sử dụng Babel / Webpack.
Sử dụng create-react-app command.
2.9 Kiến trúc về React JS
2.9.1 Component
Component là một block code độc lập, có thể tái sử dụng, nó chia UI thành nhiều
phần nhỏ. Mặt khác, có thể nghĩ đơn giản các components như một khối các blocks
LEGO. Tương tự, cấu trúc LEGO được tạo từ nhiều blocks LEGO nhỏ, như tạo một
web page hoặc UI từ nhiều block code (components).
React Native có 2 loại component: Functional (Stateless) và Class (Stateful).
2.9.2 Functional Component
Functional components cũng được nói với một cái tên là stateless components
bởi vì chúng ta không thể làm nhiều thứ phức tạp như quản lý React State (data) hoặc
phương thức life-cycle trong functional components. Tuy nhiên, React giới thiệu
React Hooks trong versions 16.8, giờ nó cho phép chúng ta sử dụng state và những
features khác trong functional components.
2.9.3 Class Component
Class Components phức tạp hơn functional components ở chỗ nó cịn có:
phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data). [10]
2.9.4 Props
Props là viết tắt của Properties. Một điều mà bạn cần phải nhớ khi sử dụng props
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 15
Khóa Luận Tốt Nghiệp
đó là khơng bao giờ nên thay đổi giá tr của nó, hay nói cách khác, đây là một dữ liệu
immutable. Các component nhận props từ component cha. Bạn không được thay đổi
giá tr của props trong các component này mà chỉ được phép đọc giá tr ra thơi. Trong
React thì dữ liệu sẽ đi theo một chiều, có nghĩa là từ component cha => các
component con. Bạn có thể tạo ra component sử dụng props. Ý tưởng của props đó là
việc trừu tượng hố các component để có thể sử dụng được ở nhiều chỗ khác nhau
trong app.
2.9.5 State
State thì hoạt động khác với props. state là dữ liệu nội bộ của một Component,
trong khi props là dữ liệu được truyền cho Component. Chính vì vậy chúng ta hồn
tồn có thể thay đổi state, và coi nó là một kiểu dữ liệu mutable. Tuy vậy, hãy nhớ
rằng đừng bao giờ thay đổi trực tiếp biến this.state. Thay vào đó hãy dùng hàm
setState để cập nhật giá tr .
Sở dĩ chúng ta cần dùng hàm này là do nó sẽ kích hoạt việc render lại component
và tất cả component con nằm trong nó, cịn thay đổi this.state thì khơng. Cịn một vấn
đề nữa, đó là setState chạy bất đồng bộ, vậy nên nếu bạn tiến hành đọc ra giá tr state
ngay sau khi setState thì giá tr sẽ chưa được cập nhật liền vì đây là hàm bất đồng bộ.
[11]
2.9.6 Hook
Hooks là các hàm mà cho phép bạn “hook into (móc vào)” trạng thái của React
và các tính năng vịng đời từ các hàm components. Hooks khơng hoạt động bên trong
classes — chúng cho phép bạn sử dụng React không cần class.
2.9.7 Effect Hook
Effect Hook, useEffect, thêm khả năng để thực hiện side effects từ các
components dạng hàm. Nó phục vụ cùng mục đích như componentDidMount,
componentDidUpdate, và componentWillUnmount trong React classes, nhưng thống
nhất lại trong một API.
2.9.8 Life Cycle
ReactJS cho phép đ nh nghĩa các component như class hoặc function.
Component đ nh nghĩa như class cung cấp nhiều tính năng, để khai báo 1 React class
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 16
Khóa Luận Tốt Nghiệp
component cần extend Component. React Functional Component là một
function Javascript / ES6 function, nó phải trả về một React element và
nhận props làm tham số nếu cần. [12]
Lifecycle thường được chia làm 3 phần chính:
● Mounting:
-
constructor()
-
componentWillMount()
-
render()
-
componentDidMount()
● Updating:
-
componentWillReceiveProps()
-
shouldComponentUpdate()
-
componentWillUpdate()
-
render()
-
componentDidUpdate()
● Unmounting:
-
componentWillUnmount().
2.10 Cài đặt môi trường cho React JS
Bước 1: Cài đặt React và React DOM
Bước 2: Cài đặt Webpack / Babel
Bước 3: Cài đặt trình biên d ch, server
Bước 4: Cài đặt Bundle để tạo gói
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 17
Khóa Luận Tốt Nghiệp
Chương 3. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU
CẦU
3.1 Khảo sát hiện trạng
3.1.1
Adidas: />Ưu điểm:
- Giao diện đẹp, dễ tiếp cận và sử dụng
Hình 3. 1 Trang chủ Adidas
-
Có thể đăng nhập bằng tài khoản bên thứ 3
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 18
Khóa Luận Tốt Nghiệp
Hình 3. 2 Trang đăng nhập Adidas
-
Có thể gia nhập CLB Adiclub
Khoa ĐT CLC – ĐH SPKT TP.HCM
| 19
