(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs

(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN GIÀY SỬ DỤNG

LỜI NÓI ĐẦU

Trong những năm gần đây với sự phát triển vượt trội của khoa học kỹ thuật đặt biệt là công nghệ thông tin, với những ứng dụng của công nghệ thông tin vào các lĩnh vực đã đóng góp phần to lớn cho sự nghiệp phát triển của con người Trong các lĩnh vực đó thì lĩnh vực quản lý là thật sự giúp ích được rất nhiều cho con người, việc áp dụng quản lý và mua bán bằng máy tính thay cho quản lý và mua bán bằng thủ công ở các doanh nghiệp, công ty, cá nhân là rất cần thiết và thật sự cần thiết

Do đó, việc quản lý mua bán hàng qua mạng là không thể thiếu được trong mọi doanh nghiệp, cửa hàng vừa và nhỏ Năm 2008 là năm đầu tiên Việt Nam có sự phát triển lớn mạnh về lĩnh vực thương mại khi chính thức trở thành thành viên thứ 150 của tổ chức thương mại thế giới WTO Với sự phát triển mạnh mẽ đó không thể phủ nhận sự đóng góp của thương mại điện tử, một lĩnh vực nóng bỏng hiện nay! Một đất nước đang phát triển mạnh mẽ, cuộc sống con người càng ngày nâng cao, mức tiêu thụ sản phẩm ngày càng tăngTóm lại nhu cầu con người ngày càng cao

Vì thế việc trao đổi mua bán cũng như quản lý hàng hóa cần phải có sự thay đổi từ thủ công sang máy móc Chương trình chạy trên môi trường hệ điều hành Window, WinServer, Linux sử dụng ngôn ngữ chuẩn về xử lý dữ liệu như ReactJS, ASP NET Core, JavaScript, CSS và hệ quản trị cơ sở dữ liệu SQL Server Hoàn thành đồ án tốt nghiệp này, em xin được gửi lời cảm ơn chân thành đến các thầy, cô khoa CNTT đã hết lòng truyền đạt kiến thức cho em trong quá trình học tập, đặc biệt là thầy Lê Vĩnh Thịnh là người đã trực tiếp hướng dẫn em một cách tận tình Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm và góp ý của quý thầy, cô

Em xin chân thành cảm ơn!

DANH MỤC

LỜI NÓI ĐẦU i

DANH MỤC ii

DANH MỤC HÌNH ẢNH vi

DANH MỤC BẢNG ix

TÀI LIỆU THAM KHẢO 1

PHẦN MỞ ĐẦU 1

1.Tính cấp thiết của đề tài 1

2.Mục đích của đề tài 2

3.Cách tiếp cận và nghiên cứu 3

4.Kết quả đạt được 3

4.1 Giao diện 3

4.2 Xử lý back-end 3

PHẦN NỘI DUNG 1

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1

1 Tổng quan về thương mại điện tử 1

1.1 Khái niệm thương mại điện tử 1

1.2 Lợi ích cửa thương mại điện tử 1

1.3.Các yêu cầu trong thương mại điện tử 2

2 Giới thiệu về ASP NET CORE [1][2] 4

2.1 ASP NET Core là gì ? 4

2.2 Cách thức hoạt động của ASP NET Core 4

2.3 ASP.Net Core làm được những gì ? 5

3.Giới thiệu về ReactJS [3] 6

3.1 ReactJS là gì ? 6

3.2 Các tính năng của ReactJS 6

3.3 Tại sao lại chon ReactJS 8

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 9

1 Khảo sát hiện trạng 9

2 Xác định yêu cầu 14

2.1 Lược đồ usecase 14

2.2 Đặc tả Usecase (Khách hàng) 15

2.3 Đặc tả Usecase(Khách hàng đã đăng nhập) 23

2.4 Đặc tả Usecase(Admin) 31

CHƯƠNG III: THIẾT KẾ ỨNG DỤNG 43

1 Thiết kế dữ liệu 43

2 Mô tả sơ đồ thiết kế dữ liệu 44

2.1 Category 44

2.2 Product 44

2.3 Brand 44

2.4 Color & Size of Product 45

2.5 Color 45

2.6 Size 45

2.7 Post 46

2.8 Rating 46

2.9 Comment 46

2.10 Favorite product 47

2.11 Customer 47

2.12 Account 47

2.13 Address 48

2.14 Cart Product 48

2.15 Shopping cart 48

2.15 Order 48

2.16 Order Detail 49

3 Sơ đồ tuần tự (Sequence Diagram) 49

3.1 Sequence tìm kiếm sản phẩm 49

3.2 Sequence filter sản phẩm 50

3.3 Sequence xem chi tiết sản phẩm 52

3.4 Sequence bình luận và đánh giá 52

3.5 Sequence quản lý giỏ hàng 53

3.6 Sequence đăng ký tài khoản 55

3.7 Sequence đăng nhập 56

3.8.Sequence Quản lý thông tin tài khoản 56

3.9 Sequence thanh toán đơn hàng 58

3.10 Sequence quản lý lịch sử đơn hàng 58

3.11 Sequence quản lý sản phẩm 60

3.12 Sequence quản lý danh mục 62

3.13 Sequence quản lý tài khoản 63

3.14 Sequence quản lý đơn hàng 64

3.15 Sequence đăng xuất 65

3.16 Sequence xem chi tiết bài viết 66

3.17 Sequence quản lý bài viết 66

CHƯƠNG IV: THIẾT KẾ GIAO DIỆN 69

1 Screen flow cho web phía khách hàng 69

1.1 SCP001 Home screen 69

1.2 SCP002 Post detail screen 71

1.3 SCP003 Product screen 73

1.4 SCP004 Product detail screen 75

1.5 SCP005 CartProduct screen 79

1.6 SCP006 Login Modal/Register modal 81

1.7 SCP007 User Info screen 83

1.8 SCP008 User order screen 84

1.9 SCP009 User order info screen 85

1.10 SCP010 User address manage screen 86

1.11 SCP011 User address add screen 87

1.12 SCP012 Change password screen 88

2 Srceen flow cho web phía admin 89

1.1 SAP001 Login admin screen 89

1.2 SAP002 Dashboard screen 90

1.3 SAP003 Post Management screen 91

1.4 SAP004 Post Add/Post Edit/Post Detail screen 93

1.5 SAP005 Product Management screen 94

1.6 SAP006 Product Add/Edit 96

1.8 SAP008 Brand Management screen 99

1.9 SAP009 Category Management screen 101

1.10 SAP010 Size Management screen 102

1.11 SAP011 Order Management screen 104

1.12 SAP012 Account Management 105

1.13 SAP013 Rating Management screen 106

1.14 SAP014 Revenue Management screen 107

CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ 109

1 Cài đặt ứng dụng 109

2 Kiểm thử phần mềm 114

2.1 Chức năng đăng ký 114

2.2 Chức năng đăng nhập 115

2.3 Chức năng đổi mật khẩu 116

2.4 Chức năng tìm kiếm sản phẩm 116

2.5 Chức năng đặt hàng 117

CHƯƠNG VI: KẾT LUẬN 118

1 Kết quả đạt được 118

2 Ưu và nhược điểm 118

2.1 Ưu điểm 118

2.2 Nhược điểm 118

2.3 Kinh nghiệm đạt được 118

2.4 Hướng phát triển trong tương lai 118

DANH MỤC HÌNH ẢNH

Hình 1 1 Mô hình hoạt động 5

Hình 1 2 Khác biệt của Virtual Dom 7

Hình 1 3 Phương thức hoạt động của Redux 7

Hình 2 1 Trang chủ MWC 1 10

Hình 2 2 Trang chủ MWC 2 10

Hình 2 3 Chi tiết sản phẩm MWC 11

Hình 2 4 Giỏ hàng MWC 11

Hình 2 5.Trang chủ JUNO Shop 12

Hình 2 6 Chi tiết sản phẩm Juno Shop 12

Hình 2 7 Sở đồ Usecase tổng quát 14

Hình 2 8 Usecase đăng ký 15

Hình 2 9 Usecase đăng nhập (khách hàng) 16

Hình 2 10 Usecase tìm kiếm sản phẩm 19

Hình 2 11 Usecase filter sản phẩm 20

Hình 2 12 Usecase xem bài viết 22

Hình 2 13 Usecase đăng xuất 23

Hình 2 14 Usecase thêm vào giỏ hàng 24

Hình 2 15 Usecase thao tác giỏ hàng 25

Hình 2 16 Usecase hình thức thanh toán 28

Hình 2 17 Usecase theo dõi đơn hàng đã đặt 29

Hình 2 18 Usecase quản lý sản phẩm 31

Hình 2 19 Usecase quản lý đơn hàng 35

Hình 2 20 Usecase quản lý tài khoản 37

Hình 2 21 Usecase quản lý bài viết 39

Hình 3 1 Mô hình thiết kế dữ liệu 43

Hình 3 2 Sequence tìm kiếm bằng tên 49

Hình 3 3 Sequence tìm kiếm bằng mã sản phẩm 50

Hình 3 4 Sequence filter theo giá 50

Hình 3 5 Sequence filter theo thương hiệu 51

Hình 3 6 Sequence filter theo màu 51

Hình 3 7 Sequence xem chi tiết sản phẩm 52

Hình 3 8 Sequence bình luận đánh giá 52

Hình 3 9 Sequence cập nhật bình luận 53

Hình 3 11 Sequence thêm vào giỏ hàng 54

Hình 3 12 Sequence cập nhật giỏ hàng 54

Hình 3 13 Sequence xóa sản phẩm trong giỏ hàng 55

Hình 3 14 Sequence đăng ký 55

Hình 3 15 Sequence đăng nhập 56

Hình 3 16 Sequence xem thông tin tài khoản 56

Hình 3 17 Sequence sửa thông tin tài khoản 57

Hình 3 18 Sequence đổi mật khẩu 57

Hình 3 19 Sequence thanh toán đơn hàng 58

Hình 3 20 Sequence xem danh sách đơn hàng đã đặt 58

Hình 3 21 Sequence xem chi tiết đơn hàng 59

Hình 3 22 Sequence hủy đơn hàng 59

Hình 3 23 Sequence thêm sản phẩm 60

Hình 3 24 Sequence sửa đổi sản phẩm 60

Hình 3 25 Sequence xóa sản phẩm 61

Hình 3 26 Sequence xem chi tiết sản phẩm 61

Hình 3 27 Sequence thêm danh mục 62

Hình 3 28 Sequence sửa danh mục 62

Hình 3 29 Sequence xóa danh mục 63

Hình 3 30 Sequence quản lý tài khoản 63

Hình 3 31 Sequence lấy danh sách đơn hàng 64

Hình 3 32 Sequence từ chối đơn hàng 64

Hình 3 33 Sequence duyệt đơn hàng 65

Hình 3 34 Sequence đăng xuất 65

Hình 3 35 Sequence Xem chi tiết bài viết 66

Hình 3 36 Sequence quản lý bài viết 66

Hình 3 37 Sequence sửa bài viết 67

Hình 3 38 Sequence xóa bài viết 67

Hình 3 39 Sequence đăng bài viết và gỡ bài viết 68

Hình 4 1.Màn hình trang chủ 69

Hình 4 2.Màn hình chi tiết bài viết 71

Hình 4 3.Màn hình danh sách sản phẩm 73

Hình 4 4.Màn hình chi tiết sản phẩm 1 75

Hình 4 5.Màn hình chi tiết sản phẩm 2 76

Hình 4 6.Màn hình giỏ hàng (có sản phẩm) 79

Hình 4 7.Màn hình giỏ hàng (trống) 79

Hình 4 8.Modal login 81

Hình 4 9.Modal đăng ký 81

Hình 4 10.Màn hình thông tin khách hàng 83

Hình 4 11.Màn hình quản lý đơn hàng đã đặt 84

Hình 4 12.Màn hình chi tiết đơn hàng đã đặt 85

Hình 4 13.Màn hình quản lý sổ địa chỉ 86

Hình 4 14.Màn hình thêm địa chỉ mới 87

Hình 4 15.Màn hình đổi mật khẩu 88

Hình 4.2 1.Màn hình đăng nhập Admin 89

Hình 4.2 2.Màn hình dashboard 90

Hình 4.2 3.Màn hình quản lý bài viết 91

Hình 4.2 4.Màn hình thêm bài viết 1 93

Hình 4.2 5.Màn hình thêm bài viết 2 93

Hình 4.2 6.Màn hình quản lý sản phẩm 94

Hình 4.2 7.Màn hình thêm/sửa sản phẩm 96

Hình 4.2 8.Màn hình quản lý màu 98

Hình 4.2 9.Màn hình thêm màu 98

Hình 4.2 10.Màn hình quản lý thương hiệu 99

Hình 4.2 11.Màn hình thên thương hiệu 100

Hình 4.2 12.Màn hình quản lý danh mục 101

Hình 4.2 13.Màn hình thêm danh mục 101

Hình 4.2 14.Màn hình quản lý kích thước 102

Hình 4.2 15.Màn hình thêm kích thước 103

Hình 4.2 16.Màn hình quản lý đơn hàng 104

Hình 4.2 17.Màn hình quản lý tài khoản 105

Hình 4.2 18.Màn hình quản lý đánh giá sản phẩm 106

Hình 4.2 19.Màn hình quản lý doanh thu 107

DANH MỤC BẢNG

Bảng 2 1 Usecase đăng ký 15

Bảng 2 2 Usecase đăng nhập Email 17

Bảng 2 3 Usecase đăng nhập Facebook 18

Bảng 2 4 Usecase đăng nhập Google 18

Bảng 2 5 Usecase tìm kiếm theo tên sản phẩm 19

Bảng 2 6 Usecase tìm kiếm theo mã 20

Bảng 2 7 Usecase filter theo giá 21

Bảng 2 8 Usecase filter theo thương hiệu 21

Bảng 2 9 Usecase filter theo màu 22

Bảng 2 10 Usecase xem bài viết 23

Bảng 2 11 Usecase đăng xuất 24

Bảng 2 12 Usecase thêm sản phẩm vào giỏ 25

Bảng 2 13 Usecase thêm thông tin giỏ hàng 26

Bảng 2 14 Usecase thay đổi số lượng sản phẩm trong giỏ hàng 26

Bảng 2 15 Usecase loại bỏ sản phẩm khỏi giỏ 27

Bảng 2 16 Usecase đặt hàng 27

Bảng 2 17 Usecase theo dõi đơn hàng 29

Bảng 2 18 Usecase hủy đơn hàng 30

Bảng 2 19 Usecase quản lý sản phẩm tổng quát 31

Bảng 2 20 Usecase thêm sản phẩm 32

Bảng 2 21 Usecase chỉnh sửa sản phẩm 33

Bảng 2 22 Usecase xóa sản phẩm 33

Bảng 2 23 Usecase tìm kiếm sản phẩm (admin) 34

Bảng 2 24 Usecase xem chi tiết sản phẩm 35

Bảng 2 25 Usecase quản lý đơn hàng 35

Bảng 2 26 Usecase xác nhận đơn hàng 36

Bảng 2 27 Usecase hủy đơn hàng 36

Bảng 2 28 Usecase quản lý tài khoản 37

Bảng 2 29 Usecase khóa tài khoản 38

Bảng 2 30 Usecase quản lý bài viết 39

Bảng 2 31 Usecase thêm bài viết 40

Bảng 2 32 Usecase chỉnh sửa bài viết 41

Bảng 2 33 Usecase xóa bài viết 42

Bảng 3 1 Mô tả dữ liệu Collection: Category 44

Bảng 3 2 Mô tả dữ liệu Collection: Product 44

Bảng 3 3 Mô tả dữ liệu Collection: Brand 44

Bảng 3 4 Mô tả dữ liệu Collection: Color & Size product 45

Bảng 3 5 Mô tả dữ liệu Collection: Color 45

Bảng 3 6 Mô tả dữ liệu Collection: Size 45

Bảng 3 7 Mô tả dữ liệu Collection: Post 46

Bảng 3 8 Mô tả dữ liệu Collection: Rating 46

Bảng 3 9 Mô tả dữ liệu Collection: Comment 46

Bảng 3 10 Mô tả dữ liệu Collection: Favorite product 47

Bảng 3 11 Mô tả dữ liệu Collection: Customer 47

Bảng 3 12 Mô tả dữ liệu Collection: Account 47

Bảng 3 13 Mô tả dữ liệu Collection: Address 48

Bảng 3 14 Mô tả dữ liệu Collection: Cart product 48

Bảng 3 15 Mô tả dữ liệu Collection: Shopping cart 48

Bảng 3 16 Mô tả dữ liệu Collection: Order 48

Bảng 3 17 Mô tả dữ liệu Collection: Order detail 49

Bảng 4 1 Mô tả SCP001 Home screen 70

Bảng 4 2 Mô tả SCP002 Post detail screen 72

Bảng 4 3 Mô tả SCP003 Product screen 74

Bảng 4 4 Mô tả SCP004 Product detail screen 78

Bảng 4 5 Mô tả SPC005 Cart product screen 80

Bảng 4 6 Mô tả SCP006 Login modal/ Register modal 82

Bảng 4 7 Mô tả SCP007 User info screen 84

Bảng 4 8 Mô tả SCP008 User order screen 85

Bảng 4 9 Mô tả SCP009 User order info screen 86

Bảng 4 10 Mô tả SCP010 User address manage screen 87

Bảng 4 11 Mô tả SCP011 User address add screen 88

Bảng 4 12 Mô tả SCP012 Change password 89

Bảng 4 13 Mô tả SAP001 Login admin screen 90

Bảng 4 14 Mô tả SAP002 Dashboard screen 91

Bảng 4 15 Mô tả SAP003 Post management screen 92

Bảng 4 16 Mô tả SAP004 Post Add/Post Edit/ Post detail screen 94

Bảng 4 17 Mô tả SAP005 Product management 95

Bảng 4 18 Mô tả SAP006 Product Add/Edit 97

Bảng 4 19 Mô tả SAP007 Color management screen 99

Bảng 4 20 Mô tả SAP008 Brand management screen 100

Bảng 4 21 Mô tả SAP009 Category management screen 102

Bảng 4 22 Mô tả SAP010 Size management screen 103

Bảng 4 23 Mô tả SAP011 Order management 105

Bảng 4 24 Mô tả SAP012 Account management 106

Bảng 4 26 Mô tả SAP012 Revenue Management Screen 108

Bảng 5 1.Kiểm thử chức năng đăng ký 115

Bảng 5 2.Kiểm thử chức năng đăng nhập 115

Bảng 5 3.Kiểm thử chức năng đổi mật khẩu 116

Bảng 5 4.Kiểm thử chức năng tìm kiếm 116

Bảng 5 5.Kiểm thử chức năng đặt hàng 117

TÀI LIỆU THAM KHẢO

Tiếng Viêt

[1] https://netcore.vn/bai-viet/tong-quan-ve-aspnet-core

[2] truc-vai-tro-cua-view-controller-trong-mo-hinh-mvc/gioi-thieu-tong-quan-cong-nghe-web-aspnet-mvc-123

PHẦN MỞ ĐẦU

1.Tính cấp thiết của đề tài

- Ngày nay, nhu cầu sử dụng của con người trong xã hội luôn là động cơ chính thúc đẩy sản xuất Như ta đã biết việc thiếu thông tin làm cho việc đưa sản phẩm đến tay người tiêu dùng trở nên khó khăn và gây nhiều lãng phí cho xã hội Bên cạnh đó việc phổ biến sử dụng Internet đã tạo ra một bước ngoặt mới trong định hướng phát triển ngành CNTT của nước ta, cùng với nhu cầu sử dụng máy tính để trao đổi và cập nhật thông tin càng ngày tăng

- Từ thực tế đó việc đưa thông tin đáp ứng nhu cầu của mọi người và hỗ trợ cho việc mua bán diễn ra một cách nhanh chóng, tiết kiệm đã trở nên vô cùng cấp thiết Song song với việc bán hàng qua điện thoại thì bán hàng qua mạng cũng là một giải pháp tối

ưu trong việc phân phối thông tin vào mục đích thương mại Việc bạn có thể ở nhà mà

đi đến cửa hàng này hoặc cửa hàng khác trong không gian ảo đã trở thành hiện thực

- Ngày nay, bất cứ thứ hàng nào, bạn có thể đặt mua qua Internet từ một bó hoa tươi, một chiếc điện thoại, một chiếc máy vi tính cho đến một chiếc xe máy Bạn có thể mua cho mình tất cả các mặt hàng được bán ở một cửa hàng nào đó trên mạng Nếu bạn muốn kinh doanh thì hãy nhanh chóng mở một cửa hàng vì đây chính là nơi mà bạn sẽ lôi kéo được nhiều khách hàng quen thuộc nhất về mình

- Do đó, xây dựng “Website Bán Giày” là một vấn đề thực tế, ứng dụng được và có tiềm năng phát triển trong tương lai Sự ra đời của ngôn ngữ lập trình cho phép chúng ta có thể thiết kế và xây dựng các ứng dụng giao dịch thương mại điện tử dưới nhiều hình thức khác nhau

- Với sự hỗ trợ của các loại cơ sở dữ liệu quan hệ, ta có thể kết hợp chúng trên trình chủ như ASP, ReactJS, để có thể xây dựng và triển khai ứng dụng với nhiều mục đích khác nhau ASP NET Core và SQL Server không nhằm ngoài mục đích dùng để xây dựng ứng dụng giao dịch điện tử Với lí do đó, được sự hướng dẫn tận tình của giáo viên hướng dẫn Lê Vĩnh Thịnh, em đã chọn đề tài “Website Bán Giày Bằng ASP NET Core

và ReactJS” sử dụng công nghệ ASP NET với hệ quản trị cơ sở dữ liệu SQL Server làm đề tài đồ án tốt nghiệp của mình

2.Mục đích của đề tài

▪ Đây là một website nhằm bán và giới thiệu rộng rãi các mặt hàng của công ty đến người tiêu dùng với các chi tiết mặt hàng cũng như giá cả một cách chính xác nhất Website nhằm:

➢ Giúp cho khách hàng:

▪ Khách hàng là những người có nhu cầu mua sắm hàng hóa Họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này Vậy nên trang web phải giúp cho khách hàng:

o Tìm kiếm và lựa chọn từ xa sản phẩm mình cần: Khách hàng khi truy cập vào trang web thương mại thường tìm kiếm các mặt hàng hay các sản phẩm mà họ cần và muốn mua Nhưng đôi khi cũng có nhiều khách hàng vào website này

mà không có ý định mua hay không biết mua gì thì yêu cầu đặt ra cho hệ thống

là làm thế nào để khách hàng dễ bị bắt mắt và hấp dẫn với sản phẩm đó, đồng thời có thể tìm kiếm nhanh và hiệu quả các sản phẩm mà họ cần tìm

o Đặt mua hàng: Sau khi khách hàng lựa chọn xong những mặt hàng cần đặt mua thì sẽ đơn đặt hàng sẽ được hiển thị để khách hàng nhập vào những thông tin cần thiết, tránh những đòi hỏi hay những thông tin yêu cầu quá nhiều từ phía khách hàng, tạo cảm giác thoải mái, riêng tư cho khách hàng

➢ Giúp nhà quản lý:

• Là người có quyền đăng nhập, quản lý và làm chủ mọi hoạt động của hệ thống trang web Nhà quản lý có một username và một password để truy cập vào hệ thống nhằm thực hiện các chức năng sau:

▪ Quản lý các sản phẩm một cách dễ dàng

▪ Thêm, xoá, sửa thông tin sản phẩm vào cơ sở dữ liệu

▪ Kiểm tra và xử lý đơn đặt hàng

▪ Quản lý doanh thu

▪ Quản lý tài khoản

• Bên cạnh các chức năng nêu trên thì trang web phải trông thật đẹp mắt và dễ truy cập Giao diện đẹp là yếu tố quan trọng góp phần tăng lượng khách hàng, và trang web phải làm sao cho khách hàng thấy được những thông tin cần tìm, cung cấp những thông tin quảng cáo thật hấp dẫn, nhằm thu hút sự quan tâm về công ty mình và có cơ hội sẽ có nhiều người tham khảo nhiều hơn Điều quan trọng trong trang web mua bán trên mạng

là phải đảm bảo an toàn tuyệt đối những thông tin liên quan đến người dùng trong quá trình đặt mua hay thanh toán Đồng thời trang web còn phải có tính dễ nâng cấp, bảo trì, sửa chữa khi cần bổ sung, cập nhật những tính năng mới

3.Cách tiếp cận và nghiên cứu

❖ Đối tương nghiên cứu

• Mọi người tiêu dùng trên toàn quốc có nhu cầu đặt hàng qua mạng

- Hoàn thiện các tính năng cơ bản của một trang web

- Phát triển và cải thiện các tính năng khác

- Cập nhật và bắt các lỗi thường gặp trong quá trình sử dụng trang web

- Hoàn thiện các tính năng quản lí để dễ dàng quản lý và kiểm kê hóa đơn một cách dễ

dàng

- Xây dựng hệ thống gợi ý sản phẩm cho người dùng đơn giản

- Tích hợp login social account như Facebook, Google

- Tích hợp chatbox Messenger của Facebook

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

PHẦN NỘI DUNG CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1 Tổng quan về thương mại điện tử

1.1 Khái niệm thương mại điện tử

- Cùng với sự bùng nổ về internet thì thuật ngữ thương mại điện tử đã ra đời Có rất nhiều định nghĩa về thương mại điện tử như là:

- Theo Tổ chức Thương mại thế giới (WTO): "Thương mại điện tử bao gồm việc sản xuất, quảng cáo, bán hàng và phân phối sản phẩm được mua bán và thanh toán trên mạng Internet, nhưng được giao nhận một cách hữu hình, cả các sản phẩm giao nhận cũng như những thông tin số hoá thông qua mạng Internet"

- Theo Uỷ ban Thương mại điện tử của Tổ chức hợp tác kinh tế châu Á-Thái Bình Dương (APEC): "Thương mại điện tử là công việc kinh doanh được tiến hành thông qua truyền thông số liệu và công nghệ tin học kỹ thuật số"

- Nhưng hiểu một cách tổng quát, TMĐT là việc tiến hành một phần hay toàn bộ hoạt động thương mại bằng những phương tiện điện tử TMĐT vẫn mang bản chất như các hoạt động thương mại truyền thống Tuy nhiên, thông qua các phương tiện điện tử mới, các hoạt động thương mại được thực hiện nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh

- TMĐ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 TMĐT theo nghĩa cụ thể hơn

là giao dịch thương mại, mua sắm qua Internet và mạng (ví dụ mạng Intranet của doanh nghiệp)

1.2 Lợi ích cửa thương mại điện tử

- Có thể hiểu được rằng bằng cách sử dụng phương tiện này sẽ giúp ích cho người sử dụng môi trường mạng trong việc tìm kiếm đối tác, nắm bắt được thông tin trên thị trường, giảm chi phí tiếp thị và giao dịch nhằm mở rộng qui mô sản xuất hoạt động kinh doanh trong thương trường

Cơ hội đạt lợi nhuận:

- Nắm bắt được nhiều thông tin phong phú, giúp cho các doanh nghiệp nhờ đó mà có thể

đề ra các chiến lược sản suất và kinh doanh thích hợp với xu thế phát triển trong và ngoài nước Đối với những doanh nghiệp vừa và nhỏ có cơ hội mở rộng đối tác trên thị trường, nắm tình hình thị trường mà nhờ đó sẽ được biết đến tên tuổi

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

- Hiện nay thương mại điện tử đang được nhiều người quan tâm và thu hút rất hiều thương gia doanh nghiệp trên thế giới, vì đó là một trong những động lực phát triển doanh nghiêp và cho cả nước

Giảm thiểu các hoạt động kinh doanh:

- Giảm chi phí sản xuất, chi phí văn phòng, chi phí thuê mặt bằng…Bên cạnh đó không cần tốn nhiều nhân viên để quản lý và mua bán giao dịch Thương mại điện tử giúp giảm chi phí bán hàng và tiếp thị mà chỉ thông qua môi trường Web một nhân viên vẫn

có thể giao dịch với nhiều đối tác, khách hàng đồng thời còn trưng bày, giới thiệu catalog đủ loại hàng hóa, xuất xứ của từng loại sản phẩm

- Do đó giảm được chi phí in ấn cho các catalog và giao dịch mua bán

- Điều quan trọng nhất là giảm được thời gian trao đổi đáng kể cho khách hàng và doanh nghiệp Chỉ trong thời gian ngắn mà doanh nghiệp có thể nắm bắt được thị hiếu khách hàng và thị trường thay đổi mà nhanh chóng kịp thời củng cố và đáp ứng cho nhu cầu

đó

Chiến lược kinh doanh:

- Qua thương mại điện tử giúp các doanh nghiệp có thể củng cố quan hệ hợp tác, thiết lập các quan hệ tốt hơn với bạn hàng, người dùng Đồng thời ngày càng có điều kiện nâng cao uy tín trên thị trường

1.3 Các yêu cầu trong thương mại điện tử

- Thương mại điện tử không đơn thuần là phương tiện để thực hiện công việc mua bán trên mạng mà còn bao gồm các yêu cầu phức tạp đan xen nhau có liên quan đến các vấn đề khác như: văn bằng pháp lý, luật quốc gia, tập quán xã hội

Cơ sở hạ tầng:

- Trong việc phát triển thương mại dựa trên hệ thống thông tin thì trước hết phải có một

kĩ thuật máy tính điện tử hiện đại, server, phần mềm hỗ trợ vững chắc những trang thiết

bị tương đối hoàn thiện và đảm bảo thông tin bảo mật chống virut và cách phòng chống những nguy cơ bị xâm nhập ảnh hưởng quốc gia phù hợp với từng doanh nghiệp và theo đúng chuẩn mực do doanh nghiệp đề ra

Chương 1: Cơ sở lý thuyết 3

Nhân lực:

- Để có thể theo kịp và nắm bắt thông tin kịp thời trong thời đại thông tin thì phải xây dựng một đội ngũ cán bộ, nhân viên có trình độ tin học, kỹ thuật điện tử, khả năng tiếp cận nhanh chóng các phần mềm mới Bên cạnh đó ngoài khả năng giao tiếp ngôn ngữ trong nước, nhân viên còn phải trang bị vốn tiếng Anh (ngôn ngữ giao tiếp toàn cầu)

để có thể tiến xa hơn Đây là cách cũng sẽ dẫn đến sự thay đổi trong hệ thống và giáo dục ngày nay

Tạo mối quan hệ bằng sự tin cậy:

- Tin cậy là trọng tâm của bất kỳ giao tiếp thương mại nào, không những thể hiện giữa các phòng ban, thực hiện đúng luật pháp của các doanh nghiệp mà còn với khách hàng bằng sự tin tưởng về vấn đề sản phẩm hay phàn nàn, khiếu nại Đó là yếu tố tất yếu của nhà doanh nghiệp muốn kinh doanh lâu dài

Bảo mật và an toàn:

- Trong thương trường giao dịch bằng Internet là yếu tố không mấy đảm bảo rằng vấn

đề bảo mật và an toàn là cao Với sự mạnh mẽ của Internet thì việc xâm nhập tài liệu

cá nhân, các hợp đồng, tín dụng, dữ liệu sẽ bị lộ và tin chắc rằng sẽ không có người nào sẽ tham gia vào công việc mua bán qua mạng nữa Một vấn đề đáng lo ngại nữa là mất dữ liệu, một hệ thống được xem là an toàn nhất vấn đề hàng đầu là trọng tâm để

có thể cho mọi người, nhất là các doanh nghiệp có khả năng mua bán mà không thể đổ lỗi lẫn nhau

Bảo vệ quyền lợi khách hàng và bản quyền kinh doanh

- Trong môi trường Internet là nơi các doanh nghiệp đầu tư sử dụng, trình bày sản phẩm, mua bán trao đổi thông tin hàng hóa thì vấn đề bản quyền là cần thiết giúp cho các doanh nghiệp an tâm, đảm bảo trong công việc phát triển và đồng thời ngăn chặn việc xâm phạm bản quyền, phiên dịch trái phép hay ăn cắp ”chất xám”

- Do vấn đề mua bán trên mạng, việc xem hàng hóa thông qua sử dụng hình ảnh thì chất lượng và vấn đề thực tế bên trong sản phẩm đó là như thế nào thì không ai biết được

do đó phải đề ra luật lệ và qui định đối với những người mua bán qua mạng

Chương 1: Cơ sở lý thuyết 4

Hệ thống thanh toán điện tử tự động:

- Thương mại điện tử chỉ có thể thực hiện một cách trọn vẹn nếu có một hệ thống thanh toán điện tử tự động Nếu không có hệ thống này thì tính cách thương mại sẽ bị giảm thấp và chỉ mang tính ứng dụng trao đổi thông tin Theo tiêu chuẩn và mẫu của quốc tế thì việc mã hóa các hàng hóa theo mã vạch là 13 và mỗi công ty có một địa chỉ riêng của mình bằng một mã có số từ 100 đến 100.000 Nếu việc hội nhập và thiết lập hệ thống mã sản phẩm và mã công ty (mã thương mại) cho một công ty nói riêng và cho một nền kinh tế nói chung là không đơn giản

2.1 ASP NET Core là gì?

- ASP.NET Core là một framework mới của Microsoft Nó được thiết kế lại từ đầu để trở nên nhanh chóng, linh hoạt và chạy trên được nhiều nền tảng khác nhau Trong bài viết này, ASP.NET Core là một framework có thể được sử dụng để phát triển web với NET Nếu bạn có kinh nghiệm làm việc với MVC hoặc Web API trong một vài năm thì bạn sẽ nhận thấy những tính năng quen thuộc Kết thúc khóa học ASP.NET Core của NET CORE VN Bạn sẽ có những thứ cần thiết để bắt đầu làm việc được với ASP.NET Core và viết 1 ứng dụng có thể thêm, sửa hay xem dữ liệu từ database như các môn lập trình khác bạn đã từng học

- Bản phát hành đầu tiên của ASP.NET đã xuất hiện cách đây 15 năm trước, nó là một phần của NET Framework Từ đó, hàng triệu lập trình viên đã sử dụng nó để xây dựng những ứng dụng web tuyệt vời, và trên những năm đó Microsoft đã phát triển thêm nhiều tính năng mới

2.2 Cách thức hoạt động của ASP NET Core

- MVC là một design partern đã tồn tại rất lâu trong ngành công nghệ phần mềm cũng như được sử dụng phổ biến trong Net Core và các bước hoạt động của MVC gồm có:

Chương 1: Cơ sở lý thuyết 5

Hình 1 1 Mô hình hoạt động

• Bước 1: User gửi 1 yêu cầu tới server bằng cách truyền vào 1 URL trong browser

• Bước 2: Yêu cầu đó được gửi tới controller đầu tiên, controller sẽ xử lý yêu cầu, nếu yêu cầu cần truy xuất dữ liệu thì controller sẽ chuyển qua tầng model

• Bước 3: Tại tầng model, dữ liệu được truy xuất từ database và sau đó truyền qua view thông qua controller

• Bước 4: Controller sẽ giúp dữ liệu được chuyển từ model qua view

• Bước 5: View là tầng cuối cùng giao tiếp với User, mọi dữ liệu sẽ được hiển thị cho User thông qua tầng View

2.3 ASP.Net Core làm được những gì

- Do sử dụng mô hình MVC nên trong ASP.Net MVC đã tách biệt được các tầng trong

mô hình lập trình web vì vậy giúp tối ưu ứng dụng và dễ dàng trong việc viết code, giao diện

- Giao diện trong ASP.Net MVC sử dụng công nghệ thiết kế web HTML, CSS nền việc thiết kế giao diện trở nên dễ dàng và giúp cho designer linh hoạt trong việc thiết kế

- ASP.Net MVC không sử dụng view state vì vậy trang web không bị tăng kích thước

do đó hiệu năng hoạt động không bị bị giảm

- Ứng dụng ASP.NET Core có thể được phát triển sử dụng NET Core hoặc NET Framework Ứng dụng ASP.NET Core được xây dựng sử dụng NET Core có thể chạy trên bất cứ hệ điều hành nào trong khi nếu được xây dựng trên NET Framework chỉ

có thể chạy trên Windows

Chương 1: Cơ sở lý thuyết 6

- Bạn có thể xây dựng và chạy ứng dụng ASP.NET đa nền tảng trên Windows, Mac và Linux (mã nguồn mở và cộng đồng phát triển)

✓ ASP.NET Core hợp nhất ASP.NET MVC và ASP.NET Web API

✓ Có thể host trên IIS hoặc tự host

✓ Có sẵn Dependency Injection

✓ Dễ dàng tích hợp với các framework frontend như Angular, Knockout

✓ Hỗ trợ cấu hình cho nhiều môi trường

✓ Cơ chết HTTP Request pipeline mới

✓ Hỗ trợ quản lý phiên bản

✓ Dùng chung toàn bộ Nuget Package

3.1 ReactJS là gì?

- React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render trang web

- Components của công cụ này được phát triển bởi Facebook Nó được ra mắt như một công

cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ

3.2 Các tính năng của ReactJS

❖ Virtual DOM:công nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ

xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual OM

là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này

sẽ giúp tối ưu hoá việc re-render DOM tree thật

Chương 1: Cơ sở lý thuyết 7

Hình 1 2 Khác biệt của Virtual Dom

❖ Redux: Đây có thể gọi là một phần cực kỳ quan trọng đối với ReactJS và không một

ai sử dụng mà không biết đến redux Trong một reactJS không bao gồm những module chuyên dụng để xử lý dữ liệu vì thế ReactJS được thiết lập một cách độc lập bằng việc chia nhỏ view thành các component nhỏ để chúng liên kết chặt chẽ với nhau hơn Mô

hình hoạt động của Redux:

Hình 1 3 Phương thức hoạt động của Redux

Chương 1: Cơ sở lý thuyết 8

3.3 Tại sao lại chon ReactJS

- Lợi ích đầu tiên mà ReactJS đó chính là việc tạo ra cho chính bản thân nó một dom ảo, đây

là nơi mà các component được tồn tại trên đó Việc tạo ra dom như vậy giúp cải thiện hiệu suất làm việc rất nhiều, khi có tính toán cần thay đổi hoặc cần cập nhật những gì lên Dom thì ReactJS đều tính toán trước và việc còn lại chỉ là thực hiện chúng lên Dom, làm như vậy sẽ giúp cho ReactJS tránh được những thao tác cần có trên một Dom mà không cần tốn thêm bất cứ chi phí nào

- Lợi ích thứ hai mà ReactJS đem lại đó chính là việc viết các đoạn code JS sẽ trởi nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này cho phép ta trộn được giữa code HTML và Javascript Ngoài ra ta còn có thể đem đoạn code thêm vào trong hàm render mà không cần phải thực hiện việc nối chuỗi và đây được đánh giá là một trong những đặc tính thú vị của ReactJS và việc chuyển đổi các đoạn HTML thành các hàm khởi động đều được thực hiện từ bộ biến đổi chính đó chính là JSX

- Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS Khi bạn bắt đầu một ReactJS bạn đừng quên cài đặt thêm ứng dụng mở rộng của Chrome chuyên dành cho ReactJS nhé

vì nó sẽ giúp cho bạn debug code một cách dễ dàng hơn, khi bạn đã cài đặt nó xong bạn sẽ

có một cái nhìn trực tiếp vào Virtual Dom và lúc đó cũng đồng nghĩa với việc là bạn đang xem một cây dom thông thường vậy

- Thân thiện với SEO: đây là một trong những điều đặc biệt và chỉ có mỗi ReactJS đây cũng chính là vấn đề lớn của các JS Frameworks vì hầu như các JS Frameworks không thân thiện với các cổ máy tìm kiếm mặc dù đã được cải thiện nhiều Còn riêng đối với reactJS thì khá tự hào vì không nằm trong nhóm không thân thiện với SEO vì dưới sự hỗ trợ của các render

và trả về trình duyệt dưới dạng webpage khi mà bạn chạy ReactJS trên sever và các Virtual Dom Chính vì lý do này mà React có thể đáp ứng đầy đủ được tính SEO Friendly

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

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

- Ngày nay với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong đời sống Trong nền kinh tế hiện nay, với xu thế toàn cầu hóa nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu tìm kiếm thông tin, cập nhật tin tức thời sự của con người với nhu cầu nhanh nhất và chính xác nhất Các nhà soạn cũng đã bắt đầu áp dụng công nghệ công thông tin điện tử từ nhiều năm trước đây và đã và đang không ngừng phát triển vì nhu cầu sử dụng cũng đang ngày tăng cao

theo

- Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử, với những thao tác đơn giản trên máy có nối mạng internet khách hàng sẽ tận tay mua những thứ mình cần mà không quá mất nhiều thời gian Khách hàng chỉ cần click vào những gì họ cần, các nhà dịch vụ sẽ mang tới tận nhà

Để 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, nhóm chúng em đã tìm hiểu và cài đặt “Website bán giày động trực tuyến”

- Tiếp theo, nhóm chúng em sẽ tiến hành khảo sát vài website bán giày phổ biến nhất Việt Nam được nhiều người sử dụng nhất hiện nay

MWC shop:

Hình 2 1 Trang chủ MWC 1

Hình 2 2 Trang chủ MWC 2

Hình 2 3 Chi tiết sản phẩm MWC

Hình 2 4 Giỏ hàng MWC

Ưu điểm:

- Tốc độ load trang nhanh

- Giao diện thân thiện, chi tiết, dễ sử dụng

- Sản phẩm được phân vùng hợp lý, bố cục rõ ràng, dễ nhìn

- Dễ dàng tìm kiếm sản phẩm

- Đáp ứng web phù hợp trên các sản phẩm giày

- Tìm kiếm sản phẩm ở các chi nhánh shop showroom

- Tìm kiếm sản phẩm theo mã dễ dàng

- Tính tính năng filter dễ sử dụng

Nhược điểm:

- Chưa có tính năng đăng nhập, hay đăng nhập social account

- Chưa hỗ trợ các phương thức thanh toán online

Juno shop:

Hình 2 5.Trang chủ JUNO Shop

Hình 2 6 Chi tiết sản phẩm Juno Shop

Ưu điểm:

- Tốc độ load trang nhanh

- Giao diện thân thiện, chi tiết, dễ sử dụng

- Sản phẩm được phân vùng hợp lý, bố cục rõ ràng, dễ nhìn

- Dễ dàng tìm kiếm sản phẩm

- Đáp ứng web phù hợp trên các sản phẩm giày

- Tìm kiếm sản phẩm ở các chi nhánh shop showroom

- Hỗ trợ các phương thức thanh toán online qua Momo, Zalopay, Visa, Napas

- Có liên kết với các kênh mạng xã hội

- Filter đơn giản dễ sử dụng

Nhược điểm:

- Nút mua hàng trong chi tiết sản phẩm không thể tiến hành mua sản phẩm

- Ký hiệu giỏ hàng chưa đồng bộ ngay sau khi ấn nút mua hàng

- Thanh menu dưới dạng điện thoại chưa hoàn thiện

2 Xác định yêu cầu

2.1 Lược đồ usecase

Hình 2 7 Sở đồ Usecase tổng quát

Description Đăng ký tài khoản trang web

Actor Guest, Register_Client

4 Hiển thị thông báo đăng ký thành công

5 Nhận mã xác thực trong Email đăng ký và kích hoạt tài khoản Alternative flow Hiển thị thông báo đăng ký thất bại hoặc đăng ký sai tại vị sai

Bussiness rule Không có

Bảng 2 1 Usecase đăng ký

2.2.2 Khách hàng đăng nhập

Hình 2 9 Usecase đăng nhập (khách hàng)

a Đăng nhập bằng tài khoản đã đăng ký

Id usecase 2.1

Name Login with user Email

Description Đăng nhập tài khoản trang web

Actor Register_Client

Pre-condition Có tài khoản

Basic Flow 1 Actor nhấn vào nút ‘Đăng nhập’ trên thanh Navbar ở trang chủ để

5 Thông báo “Đăng nhập thất bại!” Thông báo sai

6 Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng ở header

Alternative flow + Chọn ‘Hủy’

Đóng form Đăng Nhập Nếu thực hiện không thành công hiển thị thông báo báo lỗi

Bussiness rule Không có

Bảng 2 2 Usecase đăng nhập Email

b Đăng nhập bằng Facebook

Id usecase 2.2

Name Login with FaceBook

Description Đăng nhập bằng tài khoản FaceBook

Pre-condition Không có

Basic Flow 1 Nhấn chuột vào nút “Đăng nhập” ở header Mở Form login

2 Nhấn vào biểu tượng “Login With FaceBook” Api FaceBook sẽ được gọi ra, Hiển thị xác thực FaceBook

3 Nhấn “Xác Nhận” Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng FaceBook ở header

Alternative flow Đóng form api FaceBook

Bussiness rule Không có

Bảng 2 3 Usecase đăng nhập Facebook

c Đăng nhập bằng Google

Id usecase 2.3

Description Đăng nhập bằng tài khoản Google

Pre-condition Không có

Basic Flow 1 Nhấn chuột vào nút “Đăng nhập” ở header Mở form login

2 Nhấn vào biểu tượng “Login With Google” Api Google sẽ được gọi ra, Hiển thị xác thực Google

3 Nhấn “Xác Nhận” Đăng nhập thành công chuyển về homepage

và hiển thị tên và hình ảnh người dùng Google ở header Alternative flow Đóng form api Google

Bussiness rule Không có

Bảng 2 4 Usecase đăng nhập Google

2.2.3 Tìm kiếm sản phẩm

Hình 2 10 Usecase tìm kiếm sản phẩm

a Tìm kiếm theo tên

Id usecase 3.1

Name Search product by name

Description Tìm sản phẩm trên web theo tên

Actor Guest, Register_Client

Pre-condition Không có

Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên thanh header

2 Actor nhập tên sản phẩm cần tìm kiếm

3 Nhấn nút ‘Tìm Kiếm”

4 Hiển thị trang chứa danh sách theo sản phẩm được tìm kiếm Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bussiness rule Không có

Bảng 2 5 Usecase tìm kiếm theo tên sản phẩm

b Tìm kiếm theo code

Id usecase 3.2

Name Search product by code

Description Tìm sản phẩm trên web theo mã sản phẩm

Actor Guest, Register_Client

Pre-condition Không có

Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên thanh header

2 Actor nhập tên mã sản phẩm cần tìm kiếm

3 Nhấn nút ‘Tìm Kiếm”

4 Hiển thị trang chứa danh sản phẩm theo mã sản phẩm được tìm kiếm

Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bussiness rule Không có

Bảng 2 6 Usecase tìm kiếm theo mã

2.2.4 Filter sản phẩm

Hình 2 11 Usecase filter sản phẩm

a Filter theo giá

Id usecase 4.1

Name Filter product by price

Description Chọn lọc sản phẩm theo mức giá

Actor Guest, admin, Register_Client

Pre-condition Không có

Basic Flow 1 Click chuột vào menu filter bên phải và chọn khoảng giá sản phẩm

muốn mua

2 Actor Click vào checkbox khoảng giá

3 Hiển thị trang chứa danh sản phẩm theo giá tương ứng Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bussiness rule Không có

Bảng 2 7 Usecase filter theo giá

b Filter theo thương hiệu

Id usecase 4.2

Name Filter product by brand

Description Chọn lọc sản phẩm theo thương hiệu

Actor Guest, admin, Register_Client

Pre-condition Không có

Basic Flow 1 Click chuột vào menu filter bên phải và tên thương hiệu muốn mua

2 Actor Click vào checkbox có tên thương hiệu đó

3 Hiển thị trang chứa danh sản phẩm theo thương hiệu tương ứng Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bussiness rule Không có

Bảng 2 8 Usecase filter theo thương hiệu

c Filter theo màu

Id usecase 4.3

Name Filter product by color

Description Chọn lọc sản phẩm theo màu

Actor Guest, admin, Register_Client

Pre-condition Không có

Basic Flow 1 Click chuột vào menu filter bên phải và chọn màu của sản phẩm

2 Actor Click vào checkbox có tên màu đó

3 Hiển thị trang chứa danh sản phẩm có các màu tương ứng với checkbox được chọn

Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bussiness rule Không có

Bảng 2 9 Usecase filter theo màu

2.2.5 Xem bài viết

Hình 2 12 Usecase xem bài viết

Id usecase 4.4

Name Xem bài viết

Description Xem bài viết

Actor Guest, admin, Register_Client

Pre-condition Không có

Basic Flow 1 Click chuột vào bài viết được đăng tại trang chủ

2 Tiến vào trang chi tiết bài viết theo bài viết tương ứng đã Click Alternative flow Không có

Bussiness rule Không có

Bảng 2 10 Usecase xem bài viết

Actor admin, Register_Client

Pre-condition Đăng nhập bằng tài khoản bất kỳ (Facebook hoăc Google, Email)

Basic Flow 1 Nhấn tên và ảnh đại diện của người sử dụng trên thanh

Header.Dropbox menu xuất hiện chon “Đăng xuất”

2 Load lại home page và không hiển thị tên người dùng và ảnh đại diện thay bằng “Đăng nhập/Đăng ký”

Alternative flow Không có

Bussiness rule Không có

Bảng 2 11 Usecase đăng xuất

2.3.2 Khách chọn mua sản phẩm đưa vào giỏ hàng

Hình 2 14 Usecase thêm vào giỏ hàng

Id usecase 6

Name Add product to shopping cart

Description Đưa sản phẩm vào giỏ hàng

Actor Register_Client

Pre-condition Đăng nhập bằng tài khoản bất kỳ (Facebook hoăc Google, Email)