Báo cáo Đồ Án môn internet và công nghệ web Đề tài xây dựng website bán phụ kiện thời trang (taa)

Để tiếp cận và đẩy mạnh hơn nữa sự phổ biến của thương mại điện tử ở ViệtNam, cũng như phục vụ cho môn học Internet và Công nghệ Web, nhóm chúng em đãtìm hiểu và thực hiện thiết kế một w

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN

BÁO CÁO ĐỒ ÁN MÔN INTERNET VÀ CÔNG NGHỆ WEB

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN PHỤ KIỆN THỜI TRANG (TAA)

5 Trịnh Hoài Nam 21521167

6 Huỳnh An Nghiệp 21522377

 Tp Hồ Chí Minh, 12/2023 

……., ngày…… tháng……năm 2023

Người nhận xét

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

MỤC LỤC

MỤC LỤC

DANH MỤC HÌNH ẢNH

DANH MỤC BẢNG 12

DANH MỤC THUẬT NGỮ 15

BẢNG PHÂN CÔNG 18

LỜI CẢM ƠN 27

LỜI MỞ ĐẦU 28

Chương 1 GIỚI THIỆU TỔNG QUAN 30

1.2 Lý do chọn đề tài 30

1.3 Mô tả đề tài và phạm vi đề tài 30

1.3.1 Mô tả đề tài 30

1.3.2 Phạm vi thực hiện 31

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

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

2.2 Nền tảng công nghệ 33

2.2.1 Công cụ quản lý dự án 33

2.2.2 Công cụ thực hiện dự án 33

2.2.3 Công nghệ thực hiện dự án 33

2.3 Đánh giá website tương tự 34

2.3.1 Website Nhà Cú (The Little Owl) 34

2.3.2 Website Sicko 40

2.3.3 Rút kinh nghiệm 46

Chương 3 PHÂN TÍCH 48

3.2 Yêu cầu chức năng 48

3.2.1 Yêu cầu lưu trữ 48

3.2.2 Yêu cầu tìm kiếm 49

3.2.3 Yêu cầu tính toán 49

3.3 Yêu cầu phi chức năng 49

Chương 4 THIẾT KẾ 51

4.2 Thiết kế hệ thống 51

4.2.1 Sơ đồ use case tổng quát 51

4.2.2 Danh sách các actor 51

4.2.3 Danh sách các use case 52

4.2.4 Đặc tả các use case 53

4.3 Thiết kế đối tượng 76

4.3.1 Kí hiệu 76

4.3.2 Sơ đồ lớp tổng quan 79

4.3.3 Danh sách các đối tượng 79

4.3.4 Danh sách quan hệ giữa các đối tượng 84

4.4 Thiết kế dữ liệu 85

4.4.1 Kí hiệu 85

4.4.2 Sơ đồ quan hệ tổng quan 86

4.4.3 Danh sách các quan hệ 86

4.4.4 Chi tiết các quan hệ 87

4.5 Thiết kế giao diện 96

4.5.1 Sơ đồ website 96

4.5.2 Bộ nhận diện 96

4.5.3 Giao diện Header 97

4.5.4 Giao diện Footer 99

4.5.5 Giao diện Trang chủ 100

4.5.6 Giao diện Đăng ký 103

4.5.7 Giao diện Đăng nhập 105

4.5.8 Giao diện Quên mật khẩu 106

4.5.9 Giao diện trang Sản phẩm 109

4.5.10 Giao diện trang Chi tiết sản phẩm 113

4.5.11 Giao diện trang Giỏ hàng 116

4.5.12 Giao diện trang Thanh toán 118

4.5.13 Giao diện trang Cá nhân 120

4.5.14 Giao diện trang Về chúng tôi 127

4.5.15 Giao diện trang Tin tức 129

4.5.16 Giao diện trang Chi tiết bài viết 131

4.5.17 Giao diện trang Hướng dẫn mua hàng 133

4.5.18 Giao diện trang Chính sách bảo hành và đổi trả 134

Chương 5 KẾT QUẢ HIỆN THỰC 136

5.2 Về giao diện 136

5.2.1 Giao diện Trang chủ 136

5.2.2 Giao diện trang Sản phẩm 138

5.2.3 Giao diện trang Chi tiết sản phẩm 141

5.2.4 Giao diện trang Thanh toán 143

5.2.5 Giao diện trang Cá nhân 145

5.2.6 Giao diện trang Về chúng tôi 148

5.2.7 Giao diện trang Tin tức 150

5.2.8 Giao diện trang Chi tiết bài viết 152

5.2.9 Giao diện trang Hướng dẫn mua hàng 155

5.2.10 Giao diện trang Chính sách bảo hành và đổi trả 157

5.3 Về tính năng 160

Chương 6 KIỂM THỬ 172

6.2 Kiểm thử đơn vị 172

6.2.1 TC1.01 Đăng ký 172

6.2.2 TC1.02 Đăng nhập 177

6.2.3 TC1.04 Xem sản phẩm 179

6.2.4 TC1.05 Tìm kiếm sản phẩm 180

6.2.5 TC1.06 Xem thông tin sản phẩm 181

6.2.6 TC1.07 Xem danh sách bài viết 182

6.2.7 TC1.08 Xem bài viết (về chúng tôi, chính sách…) 183

6.2.8 TC1.09 Lọc sản phẩm 184

6.2.9 TC2.02 Đổi mật khẩu 185

6.2.10 TC2.03 Đăng xuất 187

6.2.11 TC2.04 Xem lịch sử mua hàng 188

6.2.12 TC2.05 Đặt sản phẩm 189

6.2.13 TC2.06 Đánh giá sản phẩm 190

6.2.14 TC2.07 Thêm sản phẩm vào giỏ hàng 192

6.2.15 TC2.08 Mua nhanh sản phẩm 193

6.2.16 TC2.09 Xem sản phẩm yêu thích 194

6.2.17 TC2.10 Xem giỏ hàng 194

6.2.18 TC2.14 Tăng giảm số lượng 1 sản phẩm trong giỏ hàng 195

6.2.19 TC2.15 Xóa sản phẩm trong giỏ hàng 196

6.3 Kiểm thử tích hợp 198

6.3.1 Test Suite 1: Quản lý tài khoản người dùng 198

6.3.2 Test Suite 2: Tìm kiếm và xem thông tin 203

6.3.3 Test Suite 3: Quản lý mua sắm 209

6.3.4 Test Suite 4: Quản lý giỏ hàng 211

6.4 Kiểm thử hệ thống 214

6.4.1 Kiểm thử chức năng 215

6.4.2 Kiểm thử khả năng phục hồi 218

6.4.3 Kiểm thử hiệu năng 220

Chương 7 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 223

7.2 Đánh giá 223

7.2.1 Ưu điểm 223

7.2.2 Nhược điểm 224

7.3 Hướng phát triển 224

7.4 Kết luận 225

TÀI LIỆU THAM KHẢO 227

PHỤ LỤC 228

DANH MỤC HÌNH ẢNH

Hình 2.1 Trang chủ của website Nhà Cú 34

Hình 2.2 Logo Nhà Cú 35

Hình 2.3 Thanh điều hướng của website Nhà Cú 35

Hình 2.4 Bố cục hình ảnh của website Nhà Cú 35

Hình 2.5 Phần chân trang của website Nhà Cú 36

Hình 2.6 Minh họa chức năng đăng nhập, đăng ký của website Nhà Cú 36

Hình 2.7 Minh họa bộ lọc của website Nhà Cú 37

Hình 2.8 Tính năng xem nhanh sản phẩm của website Nhà Cú 37

Hình 2.9 Phần tin tức của website Nhà Cú 38

Hình 2.10 Phông chữ của website Nhà Cú 38

Hình 2.11 Chi tiết gây khó hiểu của website Nhà Cú 38

Hình 2.12 Trang giỏ hàng của Nhà Cú 39

Hình 2.13 Nút chuyển lên đầu trang của website Nhà Cú 39

Hình 2.14 Header của website Sicko 40

Hình 2.15 Trang chủ website Sicko 41

Hình 2.16 Thanh điều hướng của website Sicko 41

Hình 2.17 Phần chân trang của website Sicko 41

Hình 2.18 Trang thông tin của website Sicko 42

Hình 2.19 Tính năng đăng nhập, đăng ký của website Sicko 42

Hình 2.20 Bộ lọc của Sicko 43

Hình 2.21 Tính năng yêu thích của Sicko 43

Hình 2.22 Giỏ hàng của Sicko 44

Hình 2.23 Trang bài viết của Sicko 44

Hình 2.24 Phông chữ của website Sicko 45

Hình 2.25 Trang bộ phối của website Sicko 45

Hình 2.26 Bộ sưu tập trống của Sicko 46

Hình 4.1 Sơ đồ use case tổng quát 51

Hình 4.2 Tổng quan về các đối tượng được xây dựng và mối quan hệ giữa chúng 79

Hình 4.3 Tổng quan về các bảng dữ liệu và ràng buộc toàn vẹn giữa chúng 86

Hình 4.4 Sơ đồ website TAA 96

Hình 4.5 Logo website TAA 97

Hình 4.6 Giao diện Header khi khách hàng chưa đăng nhập 97

Hình 4.7 Giao diện Header khi khách hàng nhấn chọn ô Sản phẩm 98

Hình 4.8 Giao diện Header khi người dùng đã đăng nhập 98

Hình 4.9 Giao diện khi di chuột vào biểu tượng avatar 99

Hình 4.10 Giao diện Footer 99

Hình 4.11 Giao diện Trang chủ 101

Hình 4.12 Giao diện Trang chủ phần Sản phẩm nổi bật 102

Hình 4.13 Giao diện Trang chủ phần Ưu đãi và Hỏi đáp 102

Hình 4.14 Giao diện Trang chủ phần Quảng bá 103

Hình 4.15 Giao diện Đăng ký 103

Hình 4.16 Thông báo “Tạo tài khoản thành công” 104

Hình 4.17 Giao diện Đăng nhập 105

Hình 4.18 Thông báo “Đăng nhập thành công” 106

Hình 4.19 Giao diện Quên mật khẩu 106

Hình 4.20 Giao diện Nhập địa chỉ email 107

Hình 4.21 Giao diện Nhập sô điện thoại 107

Hình 4.22 Giao diện Nhập mã OTP 108

Hình 4.23 Giao diện Tạo mật khẩu mới 108

Hình 4.24 Giao diện trang Sản phẩm 109

Hình 4.25 Thanh điều hướng 110

Hình 4.26 Thanh chuyển trang 110

Hình 4.27 Bộ lọc sản phẩm 110

Hình 4.28 Danh mục sản phẩm 111

Hình 4.29 Giao diện sản phẩm khi được di chuột vào 111

Hình 4.30 Giao diện Xem nhanh sản phẩm 112

Hình 4.31 Giao diện trang Chi tiết sản phẩm 113

Hình 4.33 Giao diện Đánh giá sản phẩm 115

Hình 4.34 Giao diện Sản phẩm đề xuất 116

Hình 4.35 Giao diện trang Giỏ hàng 116

Hình 4.36 Danh sách sản phẩm trong giỏ hàng 117

Hình 4.37 Hình ảnh hóa đơn 118

Hình 4.38 Giao diện trang Thanh toán 118

Hình 4.39 Giao diện Chọn tài khoản thanh toán 119

Hình 4.40 Hình ảnh tóm tắt đơn hàng 120

Hình 4.41 Thanh điều hướng phụ 121

Hình 4.42 Giao diện Trang Cá nhân phần Thông tin tài khoản 122

Hình 4.43 Giao diện Thêm địa chỉ nhận hàng và thông tin ngân hàng 123

Hình 4.44 Giao diện Xóa địa chỉ nhận hàng và thông tin giao hàng 123

Hình 4.45 Giao diện Trang Cá nhân phần Đơn hàng 124

Hình 4.46 Giao diện Đánh giá sản phẩm 125

Hình 4.47 Giao diện Trang Cá nhân phần Sản phẩm yêu thích 126

Hình 4.48 Giao diện trang Về chúng tôi 127

Hình 4.49 Giao diện trang Tin tức 129

Hình 4.50 Giao diện trang Chi tiết bài viết 131

Hình 4.51 Giao diện trang Hướng dẫn mua hàng 133

Hình 4.52 Giao diện trang Chính sách bảo hành và đổi trả 134

Hình 5.1 Kết quả giao diện Trang chủ ở kích thước máy tính 136

Hình 5.2 Kết quả giao diện Trang chủ ở kích thước ipad mini (768px) 137

Hình 5.3 Kết quả giao diện Trang chủ ở kích thước điện thoại iphone 12pro (390px) .138

Hình 5.4 Kết quả giao diện trang Sản phẩm ở kích thước máy tính 139

Hình 5.5 Kết quả giao diện trang Sản phẩm ở kích thước ipad mini (768px) 140

Hình 5.6 Kết quả giao diện trang Sản phẩm ở kích thước iphone 12 pro (390px) 140

Hình 5.7 Kết quả giao diện Chi tiết sản phẩm ở kích thước máy tính 141 Hình 5.8 Kết quả giao diện trang Chi tiết sản phẩm ở kích thước ipad mini (768px)142

Hình 5.9 Kết quả giao diện trang Chi tiết sản phẩm ở kích thước iphone 12 pro

(390px) 142

Hình 5.10 Kết quả giao diện trang Thanh toán ở kích thước máy tính 143

Hình 5.11 Kết quả giao diện trang Thanh toán ở kích thước ipad mini (768px) 144

Hình 5.12 Kết quả giao diện trang Thanh toán ở kích thước iphone 12 pro (390px).145 Hình 5.13 Kết quả giao diện trang Cá nhân ở kích thước máy tính 146

Hình 5.14 Kết quả giao diện trang Cá nhân ở kích thước ipad mini (768px) 147

Hình 5.15 Kết quả giao diện trang Cá nhân ở kích thước iphone 12 pro (390px) 147

Hình 5.16 Kết quả giao diện trang Về chúng tôi ở kích thước máy tính 148

Hình 5.17 Kết quả giao diện trang Về chúng tôi ở kích thước ipad mini (768px) 149

Hình 5.18 Kết quả giao diện trang Về chúng tôi ở kích thước iphone 12 pro (390px) .149

Hình 5.19 Kết quả giao diện trang Tin tức ở kích thước máy tính 150

Hình 5.20 Kết quả giao diện trang Tin tức ở kích thước ipad mini (768px) 151

Hình 5.21 Kết quả giao diện trang Tin tức ở kích thước iphone 12 pro (390px) 152

Hình 5.22 Kết quả giao diện trang Chi tiết bài viết ở kích thước máy tính 153

Hình 5.23 Kết quả giao diện trang Chi tiết sản phẩm ở kích thước ipad mini (768px) .154

Hình 5.24 Kết quả giao diện trang Chi tiết bài viết ở kích thước iphone 12 pro (390px) .154

Hình 5.25 Kết quả giao diện trang Hướng dẫn mua hàng ở kích thước máy tính 155

Hình 5.26 Kết quả giao diện trang Hướng dẫn mua hàng ở kích thước ipad mini (768px) 156

Hình 5.27 Kết quả giao diện trang Hướng dẫn mua hàng ở kích thước iphone 12 pro (390px) 157

Hình 5.28 Kết quả giao diện trang Chính sách bảo hành và đổi trả ở kích thước máy tính 158

Hình 5.29 Kết quả giao diện trang Chính sách bảo hành và đổi trả ở kích thước ipad mini (768px) 159

Hình 5.30 Kết quả giao diện trang Chính sách bảo hành và đổi trả ở kích thước iphone

12 pro (390px) 159

Hình 5.31 Ví dụ về chức năng đăng ký khi mật khẩu không đúng định dạng 160

Hình 5.32 Ví dụ về chức năng đăng ký khi số điện thoại đã tồn tại 161

Hình 5.33 Ví dụ về chức năng đăng ký thành công 161

Hình 5.34 Ví dụ về chức năng đăng nhập thành công 162

Hình 5.35 Ví dụ về chức năng đăng nhập khi sai số điện thoại 162

Hình 5.36 Ví dụ về chức năng đăng nhập khi sai mật khẩu 163

Hình 5.37 Ví dụ về chức năng đăng xuất 163

Hình 5.38 Ví dụ về chức năng tìm kiếm 164

Hình 5.39 Ví dụ về chức năng sắp xếp 165

Hình 5.40 Ví dụ về chức năng tìm kiếm và sắp xếp 165

Hình 5.41 Ví dụ về chức năng lọc sản phẩm theo danh mục 166

Hình 5.42 Ví dụ về chức năng Xem nhanh 166

Hình 5.43 Ví dụ về chức năng Thêm vào giỏ hàng thất bại 167

Hình 5.44 Ví dụ về chức năng Thêm vào giỏ hàng thành công 167

Hình 5.45 Ví dụ về chức năng xóa sản phẩm trong giỏ hàng thành công 168

Hình 5.46 Ví dụ về chức năng chọn sản phẩm, tính tổng giá tiền 169

Hình 5.47 Ví dụ về chức năng lên đầu trang - nút lên đầu trang 169

Hình 5.48 Ví dụ về chức năng thêm vào yêu thích 170

Hình 6.1 Test Suite 1: TC1.01 Đăng ký (1) 198

Hình 6.2 Test Suite 1: TC1.01 Đăng ký (2) 199

Hình 6.3 Test Suite 1: TC1.01 Đăng ký (3) 199

Hình 6.4 Test Suite 1: TC1.01 Đăng ký (4) 200

Hình 6.5 Test Suite 1: TC1.01 Đăng ký (5) 200

Hình 6.6 Test Suite 1: TC1.01 Đăng ký (6) 201

Hình 6.7 Test Suite 1: TC1.01 Đăng ký (7) 201

Hình 6.8 Test Suite 1: TC1.02 Đăng nhập (1) 202

Hình 6.9 Test Suite 1: TC1.02 Đăng nhập (2) 202

Hình 6.10 Test Suite 1: TC1.02 Đăng nhập (3) 203

Hình 6.11 Test Suite 1: TC1.03 Đăng xuất 203

Hình 6.12 Test Suite 2: TC1.04 Xem sản phẩm 204

Hình 6.13 Test Suite 2: TC1.09 Lọc sản phẩm (1) 204

Hình 6.14 Test Suite 2: TC1.09 Lọc sản phẩm (2) 205

Hình 6.15 Test Suite 2: TC1.09 Lọc sản phẩm (3) 205

Hình 6.16 Test Suite 2: TC1.05 Tìm kiếm sản phẩm (1) 206

Hình 6.17 Test Suite 2: TC1.05 Tìm kiếm sản phẩm (2) 206

Hình 6.18 Test Suite 2: TC1.06 Xem thông tin sản phẩm (1) 207

Hình 6.19 Test Suite 2: TC1.06 Xem thông tin sản phẩm (2) 207

Hình 6.20 Test Suite 2: TC1.07 Xem danh sách bài viết 208

Hình 6.21 Test Suite 2: TC1.08 Xem bài viết (về chúng tôi, chính sách ) (1) 208

Hình 6.22 Test Suite 2: TC1.08 Xem bài viết (về chúng tôi, chính sách ) (2) 209

Hình 6.23 Test Suite 3: TC2.08 Mua nhanh sản phẩm 210

Hình 6.24 Test Suite 3: TC2.05 Đặt sản phẩm 210

Hình 6.25 Test Suite 3: TC2.05 Đặt sản phẩm (2) 210

Hình 6.26 Test Suite 3: TC2.09 Xem sản phẩm yêu thích 211

Hình 6.27 Test Suite 3: TC2.04 Xem lịch sử mua hàng 211

Hình 6.28 Test Suite 4: TC2.07 Thêm sản phẩm vào giỏ hàng (1) 212

Hình 6.29 Test Suite 4: TC2.07 Thêm sản phẩm vào giỏ hàng (2) 212

Hình 6.30 Test Suite 4: TC2.14 Tăng giảm số lượng 1 sản phẩm 213

Hình 6.31 Test Suite 4: TC2.15 Xóa sản phẩm trong giỏ hàng (1) 213

Hình 6.32.Test Suite 4: TC2.15 Xóa sản phẩm trong giỏ hàng (2) 214

Hình 6.33 Kiểm thử chức năng (1) 215

Hình 6.34 Kiểm thử chức năng (2) 216

Hình 6.35 Kiểm thử chức năng (3) 217

Hình 6.36 Trang chủ 218

Hình 6.37 app crashed 218

Hình 6.38 Chọn "Sản phẩm" khi đang ở trang Chủ 219

Hình 6.39 Không thể kết nối với server 219

Hình 6.41 Trang Sản phẩm 220

Hình 6.42 Thread Group 220

Hình 6.43 Chọn HTTP Request và đổi tên thành login 221

Hình 6.44 Kết quả Summary Report 221

Hình 6.45 Kết quả View Result Tree 222

DANH MỤC BẢNG

Bảng 1 Bảng yêu cầu phi chức năng 49

Bảng 2 Danh sách các actor 52

Bảng 3 Danh sách các use case 52

Bảng 4 UC1.01 Đăng ký 53

Bảng 5 UC1.02 Đăng nhập 54

Bảng 6 UC1.03 Quên mật khẩu 56

Bảng 7 UC1.04 Xem sản phẩm 58

Bảng 8 UC1.05 Tìm kiếm sản phẩm 58

Bảng 9 UC1.06 Xem thông tin sản phẩm 59

Bảng 10 UC1.07 Xem danh sách bài viết 60

Bảng 11 UC1.08 Xem bài viết 61

Bảng 12 UC2.01 Cập nhật tài khoản 62

Bảng 13 UC2.02 Thay đổi mật khẩu 63

Bảng 14 UC2.03 Đăng xuất 65

Bảng 15 UC2.04 Xem lịch mua hàng 66

Bảng 16 UC2.05 Đặt sản phẩm 67

Bảng 17 UC2.06 Đánh giá sản phẩm 68

Bảng 18 UC2.07 Thêm sản phẩm vào giỏ hàng 69

Bảng 19 UC2.08 Mua nhanh sản phẩm 70

Bảng 20 UC2.09 Xem sản phẩm yêu thích 71

Bảng 21 UC2.10 Xem giỏ hàng 72

Bảng 22 UC2.11 Thêm sản phẩm yêu thích 73

Bảng 23 UC2.10 Thanh toán tiền mặt khi nhận hàng 74

Bảng 24 UC2.13 Thanh toán trực tuyến qua ngân hàng 75

Bảng 25 Bảng kí hiệu 76

Bảng 26 Thông tin đối tượng UnauthUser 79

Bảng 27 Thông tin đối tượng User 80

Bảng 28 Thông tin đối tượng Product 81

Bảng 29 Thông tin đối tượng Category 81

Bảng 30 Thông tin đối tượng CategoryType 81

Bảng 31 Thông tin đối tượng ProductImage 82

Bảng 32 Thông tin đối tượng BankCard 82

Bảng 33 Thông tin đối tượng Location 82

Bảng 34 Thông tin đối tượng Blog 82

Bảng 35 Thông tin đối tượng PayingMethod 83

Bảng 36 Thông tin đối tượng TransportMethod 83

Bảng 37 Thông tin đối tượng Order 83

Bảng 38 Danh sách quan hệ giữa các đối tượng 84

Bảng 39 Bảng kí hiệu 85

Bảng 40 Danh sách các quan hệ 86

Bảng 41 Bảng chi tiết quan hệ "User" 87

Bảng 42 Bảng chi tiết quan hệ "Location" 88

Bảng 43 Bảng chi tiết quan hệ "BankCard" 89

Bảng 44 Bảng chi tiết quan hệ "Category" 89

Bảng 45 Bảng chi tiết quan hệ "CategoryType" 90

Bảng 46 Bảng chi tiết quan hệ "TransportMethod" 90

Bảng 47 Bảng chi tiết quan hệ "Product" 91

Bảng 48 Bảng chi tiết quan hệ "FavorProduct" 91

Bảng 49 Bảng chi tiết quan hệ "Cart" 92

Bảng 50 Bảng chi tiết quan hệ "PayingMethod" 92

Bảng 51 Bảng chi tiết quan hệ "Order" 92

Bảng 52 Bảng chi tiết quan hệ "OrderDetail" 93

Bảng 53 Bảng chi tiết quan hệ " ProductImage" 94

Bảng 54 Bảng chi tiết quan hệ " ProductImage" 94

Bảng 55 Bảng chi tiết quan hệ "Rating" 95

Bảng 56 Bảng chi tiết quan hệ "Blog" 95

Bảng 57 Test Case Đăng ký 172

Bảng 58 Test Case Đăng nhập 177

Bảng 59 Test Case Xem sản phẩm 179

Bảng 60 Test Case Tìm kiếm sản phẩm 180

Bảng 61 Test Case Xem thông tin sản phẩm 181

Bảng 62 Test Case Xem danh sách bài viết 182

Bảng 63 Test Case Xem bài viết (về chúng tôi, chính sách ) 183

Bảng 64 Test Case Lọc sản phẩm 184

Bảng 65 Test Case Đổi mật khẩu 185

Bảng 66 Test Case Đăng xuất 187

Bảng 67 Test Case Xem lịch sử mua hàng 188

Bảng 68 Test Case Đánh giá sản phẩm 190

Bảng 69 Test Case Thêm sản phẩm vào giỏ hàng 192

Bảng 70 Test Case Mua nhanh sản phẩm 193

Bảng 71 Test Case Xem sản phẩm yêu thích 194

Bảng 72 Test case Xem giỏ hàng 194

Bảng 73 Test case tăng giảm số lượng 1 sản phẩm trong giỏ hàng 195

Bảng 74 Test case xóa sản phẩm trong giỏ hàng 196

DANH MỤC THUẬT NGỮ

dụng

Mô tả một tình huống mà hệ thống cầnphản ứng để đem lại giá trị cho một người

sử dụng cụ thể (actor) hoặc một nhómngười sử dụng Mỗi Use Case mô tả mộtchức năng cụ thể của hệ thống

Là một thực thể (người hoặc hệ thốngkhác) tương tác với hệ thống Actor có thể

là người dùng cuối hoặc một hệ thốngkhác

3 Primary

Actors

Người sử dụngchính

Là những actor chính tương tác với hệthống trong một Use Case cụ thể

4 Secondary

Actors

Người sử dụngphụ

Là những actor hỗ trợ trong quá trình thựchiện một Use Case nhưng không phải làngười sử dụng chính

5 Use Case ID ID Trường hợp

Tên mô tả ngắn gọn về nội dung hoặc nộidung của Use Case

7 Trigger Kích hoạt Sự kiện hoặc điều kiện gì đó gây ra việc

bắt đầu một Use Case

Post-Condition(s) Điều kiện sau

Các điều kiện mà hệ thống cần thỏa mãnsau khi kết thúc thực hiện Use Case

10 Basic Flow Luồng cơ bản

Mô tả các bước chính và chuỗi sự kiệntrong quá trình thực hiện Use Case màkhông có sự cố nào hay còn được gọi làcon đường hạnh phúc

11 Alternative

Mô tả các tình huống hoặc các bước khác

mà actor có thể thực hiện trong quá trìnhthực hiện Use Case

12 Exception

Mô tả các tình huống đặc biệt hoặc lỗi cóthể xảy ra và cách hệ thống phản ứng lạichúng

13 Business

Rules

Quy tắc kinhdoanh

Các quy định hoặc ràng buộc doanh nghiệp

mà hệ thống phải tuân thủ trong quá trìnhthực hiện các Use Case

kiểm thử

Bản mô tả chi tiết về cách thực hiện mộtthử nghiệm cụ thể để đảm bảo rằng mộttính năng hoặc hệ thống hoạt động đúngnhư kỳ vọng

15 Test Case ID ID Trường hợp

Mô tả người kiểm thử cần thực hiện đểkiểm tra một tính năng hay hệ thống

17 Prerequisites

Điều kiện tiênquyết/ Tiềnđiều kiện

Những điều kiện cần thiết hoặc trạng tháiban đầu mà hệ thống cần có trước khi mộtTest Case cụ thể có thể được thực hiện

18 Test Data Dữ liệu kiểm

20 Selenium

IDE

Là công cụ tự động hóa kiểm thử dành choứng dụng web Selenium IDE giúp tự độnghóa quy trình kiểm thử trên trinhd duyệt

web, giảm thiểu công sức thủ công và tănghiệu suất của quá trình kiểm thử.

21 Test Suite Bộ thử nghiệm

Một nhóm các Test Case được tổ chức lại

để thực hiện một loạt các kiểm thử liênquan đến nhau

22 Expected

Result

Kết quả dựkiến

Là kết quả mà người kiểm thử dự đoánhoặc mong đợi khi Test Case được thựchiện Thường mô tả trong bản kiểm thử để

so sánh với Actual Result

23 Actual Result Kết quả thực tế

Là kết quả thực tế sau khi một bản kiểmthử đã được thực hiện Nó được ghi lại để

so sánh với Expected Result để xác địnhxem có sự khác biệt nào không

- Tham gia thảo luận

đề tài và lên ý tưởngtrang Về chúng tôi

Về báo cáo:

- Xây dựng sườn báocáo

- Viết báo cáo:

Chương 1 Giới thiệutổng quan

+ Mục 1.3 Phươngpháp nghiên cứu

- Viết báo cáo:

Chương 2 Cơ sở lýthuyết

+ Mục 2.1 Nền tảngcông nghệ

- Viết báo cáo:

Chương 4 Thiết kế

+ Mục 4.4 Thiết kếgiao diện

- Viết báo cáo:

Chương 5 Kết quảhiện thực

+ Mục 5.1 Về giaodiện

- Viết báo cáo:

- Chương 4 Giao diện được trìnhbày rõ ràng, thể hiện được ý tưởngthiết kế

- Chương 5 Trình bày đầy đủ kếtquả giao diện sau khi hiện thực

- Chương 7 Trình bày về các ưu,nhược điểm của sản phẩm vànhóm, đưa ra hướng phát triểntrong tương lai

Về thiết kế giao diện:

- Giao diện dễ nhìn, bố cục hàihòa, thể hiện đầy đủ thông tin,chức năng

Về code:

- Hoàn thành tốt các công việcđược phân công

Đóng góp khác:

- Có thái độ nhiệt tình trong việc

phát hiện lỗi và hỗ trợ sửa lỗi báo

Về thiết kế giao diện:

- Giao diện Đăngnhập/Đăng ký

- Giao diện trang Vềchúng tôi

Về code:

- Hỗ trợ chỉnh sửa

database

- Code Front-end vàresponsive:

Về ý tưởng:

- Tham gia thảo luận

đề tài và lên ý tưởngtrang Sản phẩm,Hướng dẫn mua hàng

Về báo cáo:

- Viết lời mở đầu vàlời cảm ơn

- Viết báo cáo:

Chương 1 Giới thiệutổng quan

+ Mục 1.1 Lý dochọn đề tài

do chọn đề tài và mô tả đề tài

- Chương 5 Trình bày đầy đủ kếtquả các tính năng sau khi hiệnthực

Về thiết kế giao diện:

+ Mục 1.2 Mô tả đềtài.

- Viết báo cáo:

Chương 5 Kết quảhiện thực

+ Mục 5.2 Về tínhnăng

Về thiết kế giao diện:

- Giao diện trang Chitiết sản phẩm

- Giao diện trangHướng dẫn mua hàng

Về code:

- Thu thập dữ liệu

- Code Front-end vàresponsive:

+ Trang Hướng dẫnmua hàng

+ Trang Tin tức

+Popup Quên mậtkhẩu, OTP

- Code Back-end:

+ Chức năng tìm kiếmsản phẩm và sắp xếpkết quả tìm kiếm

Về code:

- Hoàn thành tốt các công việcđược phân công

Đóng góp khác:

- Có thái độ nhiệt tình trong việc

phát hiện lỗi và hỗ trợ sửa lỗitrong báo cáo

Giàu - Tham gia thảo luận

đề tài và lên ý tưởngtrang Sản phẩm, Tintức

Về báo cáo:

- Viết báo cáo:

Chương 2 Cơ sở lýthuyết

+ Mục 2.2 Đánh giácác website tương tựphần Website Nhà Cú(The Little Owl)

+ Mục 2.3 Rút kinhnghiệm

- Viết báo cáo:

Chương 4 Thiết kế+ Mục 4.4 Thiết kếgiao diện

Về thiết kế giao diện:

- Giao diện trang Sảnphẩm và các popupliên quan

- Giao diện trang Tintức

- Giao diện trang Chitiết bài viết

Về code:

- Code Front-end vàresponsive:

+ Trang Về chúng tôi

+ Trang Chi tiết bài

- Tích cực phát biểu ý kiến xây

dựng đồ án

Về báo cáo:

- Chương 2 Thể hiện được ưuđiểm, nhược điểm về giao diện vàtính năng của website Nhà Cú(The Little Owl), đồng thời rút rađược các kinh nghiệm

- Chương 4 Giao diện được trìnhbày rõ ràng, thể hiện được ý tưởngthiết kế

Về thiết kế giao diện:

- Giao diện dễ nhìn, bố cục hài

hòa, thể hiện đầy đủ thông tin,chức năng

- Video báo cáo được trình bày rõràng, thể hiện được các nội dungliên quan đến đồ án

- Báo cáo được định dạng tốt

Thái độ làm việc:

- Thái độ làm việc nhóm tốt

Đánh giá:

báo cáo và giao diện.

- Quay video báo cáo:

+ Phần 1: Giới thiệutổng quan

+ Phần 2: Cơ sở lýthuyết

- Tham gia thảo luận

đề tài và lên ý tưởngTrang chủ

- Giao diện trang Đặthàng

- Chương 4 Trình bày đượcusecase tổng quát và các đặc tảusecase

- Chương 6 Trình bày được cácnội dung kiểm thử đơn vị, kiểmthử tích hợp, kiểm thử hệ thống, cóhình ảnh rõ ràng

Về thiết kế giao diện:

- Giao diện dễ nhìn, bố cục hàihòa, thể hiện đầy đủ thông tin,chức năng

- Thu thập dữ liệu.

- Code Front-end vàresponsive:

+ Trang Cá nhân

Đóng góp khác:

- Thực hiện kiểm thửgiao diện và chứcnăng của website

- Quay video báo cáo:

- Video báo cáo được trình bày rõràng, thể hiện được các nội dungliên quan đến kiểm thử và kết luậncủa đồ án

- Tham gia thảo luận

đề tài và lên ý tưởngtrang Đặt hàng

- Chương 4 Trình bày đượcusecase tổng quát và các đặc tảusecase

+ Header và Footer

- Code Back-end:

+ Chức năng Đăngký

+ Chức năng Đặthàng

Đóng góp khác:

- Hỗ trợ các thành

viên khác trong nhómcode

- Quay video báo cáo:

+ Phần 3: Phân tích+ Phần 4: Thiết kế(mục Thiết kế hệthống, mục Thiết kếđối tượng, mục Thiết

- Tham gia thảo luận

đề tài và lên ý tưởngTrang Cá nhân

Về báo cáo:

- Viết báo cáo:

Chương 3 Phân tích

+ Mục 3.2 Phân tíchđối tượng

- Viết báo cáo:

Chương 4 Thiết kế

+ Mục 4.2 Thiết kếđối tượng

- Chương 4 Thiết kế các lớp đốitượng cụ thể, các mối quan hệ thểhiện rõ ràng, có bảng mô tả các lớpchi tiết Thiết kế các quan hệ lưutrữ bao gồm đầy đủ thông tin đồ án

sử dụng, có bảng mô tả các quan

+ Mục 4.3 Thiết kế

dữ liệu

Về thiết kế giao diện:

- Giao diện Trang Cá

nhân

Về code:

- Code Front-end vàresponsive:

+ Chức năng đăngnhập

+ Chức năng đăngxuất

+ Chức năng đặthàng

Về thiết kế giao diện:

- Giao diện dễ nhìn, bố cục hàihòa, thể hiện đầy đủ thông tin,chức năng

Về code:

- Hoàn thành tốt các chức năngđược phân công

Đóng góp khác:

- Video demo được trình bày rõràng, thể hiện được giao diện vàtính năng liên quan đến phân tích

và thiết kế sản phẩm

- Có thái độ nhiệt tình trong việc

phát hiện lỗi và hỗ trợ sửa lỗi vàcode

Hoài Nam - Tham gia thảo luận

đề tài và lên ý tưởngtrang Đăng ký, Đăngnhập

Về báo cáo:

- Viết báo cáo:

Chương 2 Cơ sở lýthuyết

+ Mục 2.2 Đánh giácác website tương tựphần Website Sicko

Về thiết kế giao diện:

+ Trang chủ

Đóng góp khác:

- Tìm ảnh sản phẩm

- Hỗ trợ các thànhviên chỉnh sửa bảnthiết kế giao diện

- Quay video báo cáo:

+ Phần 4: Thiết kế(mục Thiết kế giaodiện)

- Chỉnh sửa video báocáo và video demo

Tích cực phát biểu ý kiến xâydựng đồ án

Về báo cáo:

- Chương 2 Thể hiện được ưuđiểm, nhược điểm về giao diện vàtính năng của website Sicko

Về thiết kế giao diện:

- Giao diện dễ nhìn, bố cục hàihòa, thể hiện đầy đủ thông tin,chức năng

Về code

- Hoàn thành tốt các chức năngđược phân công Tuy nhiên còn trễhạn và nhắc nhở nhiều

Đóng góp khác

- Ảnh sản phẩm tìm được đa dạng

- Có thái độ tích cực trong việc hỗ

trợ các thành viên sữa chữa phầnthiết kế giao diện

- Video báo cáo được trình bày cụthể, thể hiện được ý tưởng thiết kế

- Video được xử lý tốt về âmthanh, thể hiện rõ nội dung của đồán

Thái độ làm việc:

- Thái độ làm việc nhóm tốt Tuynhiên, còn phải nhắc nhở nhiềulần, gây ảnh hưởng đến tiến độnhóm

Đánh giá:

- Hoàn thành

sản phẩm.

LỜI CẢM ƠN

Để hoàn thành tốt đề tài đồ án môn học Internet và Công nghệ Web, nhómchúng em đã nhận được rất nhiều sự hỗ trợ, đóng góp tích cực đến từ quý Thầy cô vàcác bạn cùng lớp Theo đó, nhóm chúng em đã tiếp thu và vận dụng tối đa các kiếnthức được học, các góp ý, phản hồi một cách đầy đủ nhất để hoàn thành đề tài này theođúng mong đợi của nhóm. 

Trước hết, nhóm chúng em xin gửi lời cảm ơn đến quý Thầy Cô trường Đại họcCông nghệ Thông tin, đặc biệt là quý Thầy Cô khoa Khoa học và Kỹ thuật Thông tin.Những kiến thức quý báu mà quý Thầy cô đã truyền đạt cho chúng em trong quá trìnhhọc tập và rèn luyện tại trường chính là những giá trị giúp chúng em không ngừnghoàn thiện khả năng của bản thân, đồng thời giúp nhóm trang bị những kỹ năng cầnthiết để hoàn thành đề tài đồ án một cách tốt nhất

Nhóm chúng em cũng xin gửi lời cảm ơn đặc biệt chân thành tới ThS Võ TấnKhoa - người đã đồng hành cùng nhóm trong suốt thời gian thực hiện đồ án môn học

Sự chỉ dẫn nhiệt tình và những góp ý của Thầy đã giúp chúng em xác định hướng điđúng đắn, nắm vững kiến thức chuyên môn và có thể vượt qua các thách thức trongquá trình triển khai đề tài Sự tận tâm và lòng nhiệt huyết của Thầy đã truyền cảm hứngcho chúng em và giúp chúng em phát triển không chỉ về mặt kiến thức mà còn về kỹnăng làm việc nhóm và giải quyết vấn đề

Một lần nữa, nhóm chúng em xin gửi lời cảm ơn sâu sắc nhất đến nhà trường,quý Thầy Cô và các bạn đã tạo điều kiện để nhóm có được một trải nghiệm học tập bổích và các kiến thức đầy đủ đáp ứng được các yêu cầu của chuyên ngành học

LỜI MỞ ĐẦU

Trong những năm gần đây, công nghệ thông tin đã có những bước phát triểnmạnh mẽ về nhiều mặt Kèm theo đó, việc kinh doanh hay mua hàng trực tuyến khôngcòn là một điều hiếm thấy mà đang ngày càng phát triển thành một hình thức mua bánthông dụng của con người không chỉ ở quy mô lớn mà ngay cả trong gia đình hay mỗi

cá nhân

Đứng trước sự phát triển này, các nhà phát triển phần mềm không ngừng đầu tư

và cải thiện các giải pháp cũng như các sản phẩm để có thể tiến hành thương mại hóatrên Internet Với những thao tác đơn giản trên thiết bị có kết nối Internet, người dùng

sẽ có trong tay những gì mà mình cần mà không phải mất quá nhiều thời gian Kháchhàng chỉ cần vào các trang dịch vụ thương mại điện tử, lựa chọn sản phẩm họ cần, làmtheo hướng dẫn, các nhà dịch vụ sẽ mang sản phẩm đó đến tận nhà cho người dùng

Để tiếp cận và đẩy mạnh hơn nữa sự phổ biến của thương mại điện tử ở ViệtNam, cũng như phục vụ cho môn học Internet và Công nghệ Web, nhóm chúng em đãtìm hiểu và thực hiện thiết kế một website với các sản phẩm là phụ kiện thời trang Nộidung báo cáo của đề tài được nhóm thiết kế gồm 7 chương, mỗi chương là một giaiđoạn phát triển của đề tài

- Chương 1: Giới thiệu tổng quan

Trong chương này, nhóm đã đưa ra lý do chọn đề tài là website thương mại điện

tử kết hợp với sản phẩm mà nhóm đã lựa chọn Cùng với đó, nhóm tiến hành

mô tả đề tài và phạm vi đề tài, sau cùng đưa ra sơ lược quá trình thực hiện đềtài

- Chương 2: Cơ sở lý thuyết

Tại chương này, nhóm đề ra những nền tảng công nghệ phục vụ cho quá trìnhhoàn thành đề tài như nền tảng để quản lý và triển khai dự án Ngoài ra, nhómtiến hành đánh giá các website tương tự bao gồm 2 website là website Nhà Cú

và website Sicko Sau khi đánh giá xong, nhóm đưa ra những kết luận về những

gì cần hoặc không cần có dựa trên những website đã được nhóm lựa chọn phântích thiết kế

- Chương 3: Phân tích

Quá trình phân tích đề tài là xác định các yêu cầu của đề tài, thực hiện đặc tảcho mỗi yêu cầu, phân loại các yêu cầu thành 2 loại là yêu cầu chức năng và yêucầu phi chức năng.

- Chương 4: Thiết kế

Nhóm chúng em sẽ thực hiện việc thiết kế hệ thống, thiết kế đối tượng và thiết

kế dữ liệu Các quyết định thiết kế sẽ dựa trên yêu cầu và mục tiêu của đề tài,đồng thời tuân thủ các nguyên tắc và tiêu chuẩn thiết kế chung

- Chương 5: Kết quả thực hiện

Sau khi hoàn thành cơ bản website về giao diện cũng như một vài tính năng cầnthiết, nhóm tiến hành đưa ra những điều nhóm đã làm được về đề tài

- Chương 6: Kiểm thử

Quá trình kiểm thử được thực hiện sau khi website đã hoàn thành cơ bản, kiểmthử theo các tiêu chí đã được đề ra như code thuần, responsive, tương tác ngườidùng, mã nguồn, hiệu suất, đồng bộ hóa, bảo mật,…

- Chương 7: Kết luận và hướng phát triển

Trong chương này, nhóm đề ra kết quả đạt được sau khi kết thúc quá trình thiết

kế website cùng quá trình kiểm thử Sau đó nhóm đưa ra những kết luận cho đềtài, xem xét những điều còn thiếu sót, đồng thời đề ra những hướng phát triểnhoàn chỉnh cho website

Chương 1 GIỚI THIỆU TỔNG QUAN

1.1 Lý do chọn đề tài

Như mọi người đã biết, việc kinh doanh hay mua hàng trực tuyến đang ngàycàng trở nên phổ biến hơn, đặc biệt là với thế hệ GenZ Thay vì đến trực tiếp cửa hàng,người dùng có thể đặt mua bất cứ món hàng nào tại bất cứ đâu, chỉ cần có internet là

đủ Và đối với những món đồ phụ kiện nhỏ xinh, khách hàng sẽ dễ dàng cho việc lựachọn hơn nữa Vậy nên nhằm tiết kiệm thời gian di chuyển, mang đến sự thuận tiệnnhất cho khách hàng, nhóm mong muốn thiết kế một website bán phụ kiện giúp các tín

đồ về thời trang dễ dàng tìm kiếm và chọn mua cho mình những món hàng phù hợp.Đến với website, khách hàng cũng có thể nhận được đề xuất cho những loại phụ kiệnkhác nhau để tạo ra sự kết hợp tốt nhất Ngoài ra, với danh mục sản phẩm được hiểnthị đa dạng về loại phụ kiện, mẫu mã,… nhóm hứa hẹn sẽ tạo nên một giao diệnwebsite phong phú, đẹp mắt và thu hút khách hàng đến với trang web nhiều lần hơn.Chính vì những điều trên, nhóm đã đưa ra ý tưởng cho một website bán phụ kiện thờitrang, thuận tiện người mua, vừa lòng người bán

1.2 Mô tả đề tài và phạm vi đề tài

1.2.1 Mô tả đề tài

“Website bán phụ kiện thời trang” là một đề tài nhằm thiết kế một nền tảngthương mại điện tử cho phép người dùng mua sắm trực tuyến các loại phụ kiện về thờitrang như ví da, kính mát, mũ nón, trang sức, túi xách, giày dép,… được phân loại vàsắp xếp vào các danh mục cụ thể để dễ dàng cho người dùng tìm kiếm và mua hàng.Website sẽ cung cấp một giao diện trực quan và hiệu quả cho người dùng, thông quaviệc phân tích, thiết kế đơn giản, thiết kế chi tiết cho trang web theo từng giai đoạn.Mỗi sản phẩm đều sẽ được trình bày với các hình ảnh chân thật, mô tả, giá cả và cácthông tin liên quan khác Tại website, người dùng có thể tìm kiếm sản phẩm theo nhiềutiêu chí như tên sản phẩm, loại sản phẩm,… nhằm lựa chọn những mặt hàng cần thiếtmột cách nhanh chóng và chính xác Người dùng cũng có thể thêm sản phẩm vào giỏhàng, điền thông tin đặt hàng và tiến hành thanh toán dễ dàng thông qua các phươngthức thanh toán trực tuyến như thẻ tín dụng, ví điện tử, hoặc chuyển khoản ngân hàng.Với đề tài này, nhóm hy vọng sẽ mang đến một trang web có giá trị cho mỗi kháchhàng, mang lại những sự hài lòng nhất khi mua hàng tại website

1.2.2 Phạm vi thực hiện

- Đối với nhóm thiết kế: Sử dụng các công nghệ web chủ yếu như html, css,javascript, … cho việc thiết kế giao diện Front-end Ngoài ra, nhóm còn ápdụng nodejs để hỗ trợ việc xây dựng các tính năng Back-end cho trang web.Nhóm có khả năng ứng dụng các kiến thức lý thuyết đã được học, áp dụng vàothực hành cho đề tài, tạo nền tảng để phát triển tư duy trong lĩnh vực xây dựngWebsite

- Đối với người dùng: Hướng đến những đối tượng có nhu cầu tham khảo, tìmhiểu, mua sắm các loại phụ kiện về thời trang

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

Hiện nay, để phát triển một phần mềm có thể áp dụng nhiều mô hình khác nhau.Tuy nhiên, nhóm đã sử dụng mô hình thác nước cải tiến vì đây là mô hình đơn giảncũng như dễ tiếp cận với các thành viên trong nhóm, việc chia các giai đoạn có thểgiúp nhóm phân chia các công việc rõ ràng hơn Mô hình trên bao gồm các trình tự:xác định yêu cầu, phân tích, thiết kế, cài đặt, kiểm thử, bảo trì Trong đó, kết quả củagiai đoạn trước là đầu vào của giai đoạn tiếp theo Trong trương hợp nếu có lỗi xảy ra,nhóm có thể có các giải pháp sửa lỗi và tối ưu hóa phần mềm ở bất kỳ giai đoạn nàotrong quy trình phát triển Các bước phát triển phần mềm của nhóm như sau: 

- Bước 1: Xác định và mô hình hóa các yêu cầu của phần mềm Xác định ra từngyêu cầu và tìm cách thức thực hiện website thương mại điện tử với các chứcnăng phù hợp. 

- Bước 2: Sau khi xác định được yêu cầu, tiến hành so sánh, đánh giá các ứngdụng tương tự và xây dựng các kế hoạch thiết kế cần thiết cho phần mềm

- Bước 3: Tiếp đến tiến hành thiết kế Phần mềm

 Thiết kế hệ thống: Xây dựng các chức năng của website cho người dùng

 Thiết kế dữ liệu. 

 Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềmnhằm đảm bảo được tính đúng đắn, mang tính hiệu quả về mặttruy xuất và lưu trữ. 

 Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêucầu của phần mềm. 

 Xây dựng sơ đồ logic cụ thể của phần mềm. 

 Thiết kế giao diện.

 Xác định các màn hình cần có đối với phần mềm. 

 Sơ đồ liên kết giữa các màn hình.  

 Xác định các chức năng hiển thị trên từng màn hình

 Hoàn thành giao diện

- Bước 4: Dựa trên thiết kế và phân tích, tiến hành xây dựng phần mềm

 Xác định phương pháp và môi trường cài đặt. 

 Cài đặt giao diện và các chức năng đã được xác định trước đó

- Bước 5: Sau khi đã phát triển xong tiến hành kiểm thử phần mềm Chạy thựcnghiệm và đánh giá, tìm và chỉnh sửa lỗi. 

 Đảm bảo kiểm tra hết các trường hợp

 Đảm bảo được tính chính xác, tính an toàn, tính bảo mật

 Tiến hành kiểm tra để chắc chắn rằng các lỗi đã được sửa chữa. 

- Bước 6: Sau khi phần mềm đã được triển khai và sử dụng, tiến hành bảo trì đểsửa lỗi, cập nhật tính năng, và duy trì hoạt động ổn định

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

2.1 Nền tảng công nghệ

2.1.1 Công cụ quản lý dự án

- Drive: Cung cấp một nơi lưu trữ trực tuyến để chia sẻ và lưu trữ các tài liệu dự

án như hình ảnh, dữ liệu, tài nguyên liên quan đến dự án, giúp các thành viêntrong nhóm dễ dàng truy cập và cập nhật thông tin, đồng thời giảm thiểu rủi romất dữ liệu

- Notion: Giúp quản lý thông tin dự án, quản lý các nhiệm vụ và theo dõi tiến độ

dự án Từ đó, các thành viên trong nhóm dễ dàng theo dõi các công việc cầnlàm, đảm bảo dự án được hoàn thành đúng tiến độ

- Google Meet: Công cụ hỗ trợ họp trực tuyến giúp nhóm tổ chức các cuộc họp

để trao đổi thông tin, thảo luận về các vấn đề và giải quyết các vấn đề một cáchhiệu quả

- Git - Github: Là một hệ thống kiểm soát phiên bản cho phép người dùng theodõi các thay đổi đối với source code của nhóm, hỗ trợ khôi phục các phiên bảntrước đó của dự án, giúp phát hiện và sửa lỗi, đồng thời đảm bảo rằng các thayđổi được thực hiện một cách có hệ thống và an toàn

2.1.2 Công cụ thực hiện dự án

- Figma: Công cụ hỗ trợ thiết kế giao diện cho phép nhiều thành viên trong nhómthao tác cùng lúc trên một file, giúp nhóm có thể hoàn thiện giao diện cũng như

mô phỏng luồng hoạt động của phần mềm

- Visual studio code: Một môi trường phát triển tích hợp (IDE) miễn phí và mãnguồn mở, đa nền tảng, có nhiều tính năng tích hợp như trình chỉnh sửa mã, gỡlỗi,… giúp nhóm thuận tiện hơn trong quá trình xây dựng phần mềm

- Xampp: Là một phần mềm mã nguồn mở, miễn phí, giúp cài đặt và chạy mộtmôi trường phát triển web cục bộ bao gồm Apache, MySQL, PHP và Perl, giúpnhóm chạy website trên localhost

2.1.3 Công nghệ thực hiện dự án

- Front-end:

 HTML (HyperText Markup Language): Được sử dụng để thiết kế cấutrúc và nội dung của trang web

 CSS (Cascading Style Sheets): Sử dụng để định kiểu cho các trang webnhư kiểm soát màu sắc, phông chữ, kích thước, bố cục và các khía cạnhkhác của trang web.

 Javascript: Một ngôn ngữ lập trình được sử dụng để thêm tính tương táccho các trang web, tạo các hiệu ứng hoạt ảnh, xử lý các sự kiện ngườidùng và thao tác DOM

- Back-end: Sử dụng Node.js kết hợp với Express framework để xây dựng APIgiúp phát triển ứng dụng nhanh chóng, hiệu quả và có khả năng mở rộng Ngoài

ra, nhóm còn sử dụng ejs là một template engine có chức năng hiện thị giao diệncủa ứng dụng

2.2 Đánh giá website tương tự

2.2.1 Website Nhà Cú (The Little Owl)

Nhà Cú là thương hiệu trang sức, phụ kiện hợp kim được thành lập từ năm 2014với nhiều dòng sản phẩm đa dạng

Link trang web chính thức của cửa hàng: https://thelittleowl.vn/

Trang web được đánh giá vào ngày 29/09/2023

2.2.1.1 Ưu điểm

Website được thiết kế với tông màu chủ đạo là trắng và nâu sáng làm nổi bậthình ảnh các loại trang sức, thu hút ánh nhìn của người dùng khi lần đầu truy cập vàotrang web Ngoài ra màu nâu còn thể hiện sự nhẹ nhàng, ấm áp tạo cảm giác dễ chịu vàthoải mái suốt quá trình sử dụng trang web

Hình 1 Trang chủ của website Nhà Cú

Logo của website là hình ảnh con cú, sử dụng linh vật làm liên tưởng đến têncủa thương hiệu, tăng tính thân thiện với khách hàng vì dễ dàng nhận diện thương hiệu.

Hình 2 Logo Nhà Cú

Thanh điều hướng đầu trang cung cấp đầy đủ thông tin về dòng sản phẩm, giúpkhách hàng linh hoạt hơn trong việc lựa chọn xem và mua hàng Bên cạnh đó, thanhnày còn có thể thu nhỏ khi người dùng lướt xuống xem các thông tin khác, giúp tối ưuhóa diện tích của trang

Hình 3 Thanh điều hướng của website Nhà Cú

Bố cục các hình ảnh sản phẩm, ảnh bìa được sắp xếp hợp lý và có tính sáng tạo,độc đáo hơn so với các trang web khác Đồng thời các hiệu ứng chuyển trang, hiệu ứngchuyển ảnh cũng hoạt động trơn tru, đẹp mắt

Hình 4 Bố cục hình ảnh của website Nhà Cú

Phần chân trang chứa đầy đủ các thông tin về mua hàng, thông tin liên hệ,đường dẫn đến các trang chủ trên mạng xã hội như Facebook, Shopee, và các chínhsách hỗ trợ được sắp xếp khá trực quan, dễ nhìn.

Hình 5 Phần chân trang của website Nhà Cú

Trang web cung cấp chức năng đăng nhập, đăng ký để người dùng có nhu cầulưu lại dữ liệu mua hàng cá nhân, phục vụ cho mục đích sử dụng lâu dài

Hình 6 Minh họa chức năng đăng nhập, đăng ký của website Nhà Cú

Trang Sản phẩm có thêm phần bộ lọc, tính năng này giúp khách hàng dễ dànghơn trong việc lựa chọn xem và mua hàng phù hợp với nhu cầu cá nhân

Hình 7 Minh họa bộ lọc của website Nhà Cú

Tính năng xem nhanh ở mỗi sản phẩm giúp người dùng tiết kiệm thời gian khikhông cần phải di chuyển vào trang chi tiết mà vẫn xem được thông tin cơ bản về sảnphẩm đó

Hình 8 Tính năng xem nhanh sản phẩm của website Nhà Cú

Ngoài tính năng mua hàng thì website còn cung cấp mục Tin tức để khách hàng

có thể cập nhật các thông tin về sản phẩm một cách hiệu quả