Xây dựng website bán quần áo thể thao

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ể thaotrự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à Mon

ĐỒ Á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

HOÀNG MINH THÀNH

SKL009251

NHIỆM VỤ KHÓA Họ và tên sinh

viên: Nguyễn Văn Đạt LUẬN TỐT NGHIỆPMSSV: 16110050Ngà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

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: Hoà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àytháng 12 năm 2022

Giảng viên hướng dẫn

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

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: Hoà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àytháng 12 năm 2022

Giảng viên hướng dẫn

(Ký & ghi rõ họ tê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ớiKhoa Đà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 đượchọ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ắcnhấ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 quá trình từ lúc bắt đầu cũngnhư 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 kinhnghiệ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áccông ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy NguyễnMinh Đạ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úcchúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của chúng emtrướ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 quý 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ệnnâ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

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 CƠ SỞ LÝ THUYẾT 11

2.1 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.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

2.10Cài đặt môi trường cho React JS 17

Chương 3 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 18

3.1 Khảo sát hiện trạng 18

3.1.1 Adidas: https://www.adidas.com.vn/ 18

3.1.2 Sport1: https://sport1.vn/ 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 THIẾT KẾ ỨNG DỤNG 60

4.1 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

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 KẾT LUẬN 117

6.1 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

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 toá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

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 1 MongoDB đăng nhập 105

Hình 5 2 MongoDB trang chủ 106

Hình 5 3 MongoDB tạo kết nối 107

Hình 5 4 MongoDB tạo kết nối (tt) 108

Hình 5 5 Back-End cài đặt package 109

Hình 5 6 Back-End chỉnh sửa kết nôi MongoDB 109

Hình 5 7 Back-End Chạy ứng dụng 110

Hình 5 8 Back-End trang chủ 111

Hình 5 9 Cài đặt thư viện Front-end 112

Hình 5 10 Khởi chạy Front-end 112

Hình 5 11 Chạy thành công Front-end 113

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

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

Chương 1 MỞ ĐẦU 1.1

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ệtNam đang từng bước hình thành, tăng trưởng mạnh mẽ, và giữ vai trò ngày càng quantrọ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ệuquả từ khi Internet hình thành và phát triển Chính vì vậy, nhiều người hiểu thươngmạ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ămsó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 hoàn toà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ệtNam 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

Đề tài này nhằm xây dựng một trang web cho việc mua bán quần áo thể thaotrự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àitạ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, đặthàng và thanh toán

1.3

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 chonhữ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ũngnhư 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

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

1.4.1 Phía người quản trị

Cho phép người quản tr vào trang web để:

- 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

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

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í “ WriteOne, Run Anywhere”.[1]

2.1.1

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 bytecode, 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

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

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 ứngdụng desktop khá vất vã

2.2

Spring Boot là một module của Spring Framework, được xây dựng nhằm pháttriển các ứng dụng java nhanh hơn, đơn giản hơn Spring Boot giúp đơn giản hoá

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

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

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 hoá 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

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ướctệp lớn

2.2.4

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

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 đượclưu ở dạng document với một cặp key-value.[5]

2.3.1

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

- 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

- MongoDB sử dụng nhiều bộ nhớ, b giới hạn data size

2.3.4

Mongo Atlas là một cơ sở dữ liệu đám mây, chạy trên hạ tầng đám mây củaAWS, Azure, Google Cloud Chúng ta có thể sử dụng MongoDB Atlas bằng cách truycập vào trang chủ và đăng nhập nhanh bằng tài khoản Google

- 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,…)

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ùnglặp như header, footer

- Khó để kiểm soá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

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ẽ ápdụ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ệnwebsite), chúng là không thể tách rời.[7]

2.6

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ũngnhư phía máy chủ (Nodejs) tạo ra các trang web động.[8]

2.7

React JS là một thư viện Javascript được phát triển bởi Facebook để phát triểncá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

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ườidù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 đơngiản thì các render dữ liệu không chỉ được thực hiện ở v trí server mà còn ở v trí clientkhi sử dụng ReactJS [9]

2.8

NodeJS và NPM : NodeJS là nền tảng cần thiết cho sự phát triển ReactJS Kiểmtra 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

React Native có 2 loại component: Functional (Stateless) và Class (Stateful)

2.9.2

Functional components cũng được nói với một cái tên là stateless componentsbở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ặcphương thức life-cycle trong functional components Tuy nhiên, React giới thiệuReact Hooks trong versions 16.8, giờ nó cho phép chúng ta sử dụng state và nhữngfeatures khác trong functional components

đó 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ệuimmutable Các component nhận props từ component cha Bạn không được thay đổigiá tr của props trong các component này mà chỉ được phép đọc giá tr ra thôi TrongReact thì dữ liệu sẽ đi theo một chiều, có nghĩa là từ component cha => cáccomponent 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 hoá các component để có thể sử dụng được ở nhiều chỗ khác nhautrong app.

2.9.5

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 hoàntoà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àmsetState để 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ạicomponent 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àmbất đồng bộ [11]

2.9.6

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 trongclasses — chúng cho phép bạn sử dụng React không cần class

2.9.7

Effect Hook, useEffect, thêm khả năng để thực hiện side effects từ cáccomponents dạng hàm Nó phục vụ cùng mục đích như componentDidMount,componentDidUpdate, và componentWillUnmount trong React classes, nhưng thốngnhất lại trong một API

2.9.8

ReactJS cho phép đ nh nghĩa các component như class hoặc function

component cần extend Component

function Javascript / ES6 function, nó Reactphải Functionalvề một React elementComponent là trả mộtvànhận props làm tham số nếu cần [12]

Lifecycle thường được chia làm 3 phần chính:

2.10

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

Chương 3 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU

Hình 3 2 Trang đăng nhập Adidas

- Có thể gia nhập CLB Adiclub

Hình 3 3 Trang đăng ký gia nhập AdiClub

- Có thể nhập mã khuyến mãi khi được tặng mã

Hình 3 4 Trang nhập mã khuyến mãi

- Có tính năng chat trực tiếp trên web

Hình 3 5 Trang chat trực tiếp

Hình 3 7 Trang nhập mã khuyến mãi

- Có tính năng chat, gọi điện hỗ trợ qua bên thứ 3

Hình 3 8 Trang chat, gọi điện qua bên thứ 3Nhược điểm:

- Chưa có tính năng đăng nhập bằng bên thứ 3

- Chưa có tính năng chat trực tiếp trên web

3.2

3.2.1

Lược đồ usecase tổng quát

Hình 3 9 Lược đồ usecase tổng quát

Lược đồ usecase actor User

Hình 3 10 Lược đồ usecase actor UserLược đồ usecase actor Admin

Hình 3 11 Lược đồ usecase actor Admin

3.2.2

Bảng 3 1 Bảng yêu cầu dành cho Usecase

1 Đăng nhập UC_01 User, Admin

5 Xem danh mục sản phẩm UC_05 Guest, User, Admin

6 Xem chi tiết sản phẩm UC_06 Guest, User, Admin

10 Theo dõi đơn hàng UC_10 Guest, User, Admin

12 Chỉnh sửa thông tin UC_12 Guest, User, Admin

13 Thay đổi mật khẩu UC_13 Guest, User, Admin

14 Quản lý sản phẩm: Thêm UC_14 Admin

18 Quản lý khách hàng: Chỉnh UC_18 Admin

sửa thông tin

19 Quản lý khách hàng: Thay UC_19 Admin

Use Case No. UC_01 Use case version 1.0

Use case name Đăng nhập

Author Nguyễn Văn Đạt

● Thất bại: Hệ thống hiển th lỗi

Main Success Scenario:

Step Actor Action System Response

1 Admin, User dùng mở trang Hệ thống hiển th màn hình trang chủ

web lên và nút “Đăng nhập” ở thanh header

2 Admin, User dùng nhấn vào nút Hệ thống chuyển sang màn hình

“Đăng nhập “ “Đăng nhập” và yêu cầu người dùng

nhập vào các thông tin cá nhân vàchuyển qua nhập: Số điện thoại vàmật khẩu (varchar)

3 Adin, User nhấn nút “Đăng Hệ thống chuyển sang màn hình

Exceptions:

No Actor Action System Response

2 Sai tài khoản, mật khẩu Hệ thống sẽ hiện thông báo (alert) và

có warning dòng dữ liệu cho ngườidùng

Relationships:

Business Rules:

● Số điện thoại: không được để trống

● Mật khẩu: không được để trống

Bảng 3 3 Đặc tả usecase đăng xuất

USE CASE_UC_02

Use Case No. UC_02 Use case version 1.0

Use case name Đăng xuất

Author Nguyễn Văn Đạt

● Thành công: Admin, User dùng đăng xuất ra khỏi hệ thống

● Thất bại: Hệ thống hiển th lỗi

Main Success Scenario:

Step Actor Action System Response

1 Admin, User dùng click Đăng Hệ thống chuyển từ trang hiện tại

Xuất tại thanh header

sang trang đăng nhập

Exceptions:

No Actor Action System Response

Business Rules:

Bảng 3 4 Bảng đặc tả usecase đăng ký tài khoản

USE CASE_UC_03

Use Case No. UC_03 Use case version 1.0

Use case name Đăng ký tài khoản

Author Nguyễn Văn Đạt

● User dùng click vào nút “Tạo Tài Khoản” và điền đầy đủ các trường thông tin

trong trang Đăng ký và nhấn nút “Đăng Ký”

Preconditions:

● User dùng chưa có tài khoản trong hệ thống

Post conditions:

● Thành công: Đối với người dùng: màn hình chuyển về trang chủ

● Thất bại: Hệ thống hiển th lỗi

Main Success Scenario:

1 User dùng nhấn vào nút “ Tạo Hệ thống chuyển từ trang hiện tại

Tài Khoản “

sang trang “Đăng ký”

2 User dùng nhập các thông tin Hệ thống sẽ thông báo thành công

tương ứng ở trang “Đăng ký”

và nhấn nút “Đăng Ký”

Exceptions:

No Actor Action System Response

1 Lỗi API Không chuyển về trang đăng ký,

Use Case No. UC_04 Use case version 1.0

Use case name Tìm kiếm sản phẩm

Author Nguyễn Văn Đạt