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

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

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

-

MSSV: 16110050

MSSV: 18110196

Ngành: CÔNG NGHỆ PHẦN MỀM

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

GVHD: ThS NGUYỄN MINH ĐẠO

SVTH: NGUYỄN VĂN ĐẠT

SVTH: HOÀNG MINH THÀNH

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

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

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

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 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ày thá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ày thá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ớ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 quá 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 hoà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 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ệ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

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.10 Cà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

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 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ệ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

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

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

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

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

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ã

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á

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]

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]

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

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

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ồ

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]

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

- 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

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

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

- 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ùng lặ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

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]

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]

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

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]

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

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

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

đó 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 hoá các component để có thể sử dụng được ở nhiều chỗ khác nhau trong app

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àn toà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]

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

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

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

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:

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ứ 3

Nhượ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

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 User

Lược đồ usecase actor Admin

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

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

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

7 Thêm vào giỏ hàng UC_07

10 Theo dõi đơn hàng UC_10

Guest, User, Admin

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

22 Xem thống kê: Xem Doanh

● Thành công: Admin, User dùng đăng nhập được vào hệ thống và sử dụng chức

năng với quyền tương ứ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 mở trang

web lên

Hệ thống hiển th màn hình trang chủ

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

2 Admin, User dùng nhấn vào nút

“Đăng nhập “

Hệ thống chuyển sang màn hình

“Đă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

nhập”

Hệ thống chuyển sang màn hình trang chủ

Exceptions:

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ười dù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

● 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:

1 Admin, User dùng click Đăng

Xuất tại thanh header

Hệ thống chuyển từ trang hiện tại sang trang đăng nhập

Exceptions:

Relationships:

Business Rules:

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

USE CASE_UC_03

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

● 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

Tài Khoản “

Hệ thống chuyển từ trang hiện tại sang trang “Đăng ký”

2 User dùng nhập các thông tin

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

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

Hệ thống sẽ thông báo thành công

Exceptions:

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

● Người dùng click vào ổ tìm kiếm ở thanh header, và điểm thông tin cần tìm kiếm

Preconditions:

Post conditions:

● Thành công: Hiển th các sản phẩm phù hợp

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

Main Success Scenario:

1 Người dùng truy cập vào trang

chủ

Hệ thống hiển th trang chủ

2 Người dùng nhấn vào ô tìm

kiếm ở thanh header, và nhập

thông tin, sau đó nhấn enter

Hệ thống chuyển sang trang kết quả tìm kiếm

Exceptions:

1 Lỗi API Không chuyển đến trang “Kết quả

tìm kiếm”

Relationships:

Business Rules: