Đề tài xây dựng website thương mại Điện tử cho cửa hàng nước uống dinh dưỡng sunkissed

Phát triển ứng dụng thương mại điện tử - Nhóm 05BẢNG PHÂN CÔNG ĐÁNH GIÁ THÀNH VIÊN Họ và Tên MSSV Vai trò Đóng góp Công việc phân công Nguyễn La Thành Phát 31221023902 Thành viên 100% -T

BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC KINH TẾ THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CÔNG NGHỆ VÀ THIẾT KẾ

KHOA CÔNG NGHỆ THÔNG TIN KINH DOANH

Phát triển ứng dụng thương mại điện tử - Nhóm 05

MỤC LỤC

DANH MỤC HÌNH ẢNH 4

DANH MỤC BẢNG BIỂU 9

BẢNG PHÂN CÔNG ĐÁNH GIÁ THÀNH VIÊN 10

LỜI CẢM ƠN 13

CHƯƠNG 01: TỔNG QUAN 14

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

1.2 Mục tiêu nghiên cứu 14

1.3 Đối tượng nghiên cứu 14

1.4 Phương pháp thực hiện 15

1.5 Phạm vi nghiên cứu 15

CHƯƠNG 02: MÔ TẢ HỆ THỐNG/CHƯƠNG TRÌNH 16

2.1 Trang chủ 16

2.1.1 Header 16

2.1.2 Thanh điều hướng - Navigation 16

2.1.3 Hero 17

2.1.4 Danh mục sản phẩm phổ biến 18

2.1.5 Danh mục sản phẩm 19

2.1.6 Deals 20

2.1.7 Sản phẩm mới về 22

2.1.8 Showcase sản phẩm 22

2.1.9 Newsletter 23

2.1.10 Footer 23

2.1.11 Đề xuất ngoài 24

2.2 Trang cửa hàng 24

2.2.1 Breadcrumbs 24

2.2.2 Danh sách sản phẩm 25

2.2.3 Đề xuất ngoài 26

2.3 Chi tiết sản phẩm 27

2.3.1 Chức năng hiển thị mô tả thông tin chi tiết sản phẩm 27

2.3.2 Bảng thuộc tính sản phẩm 30

2.3.3 Mục review sản phẩm 30

Phát triển ứng dụng thương mại điện tử - Nhóm 05

2.3.4 Mục đề xuất sản phẩm khác 31

2.4 Giỏ hàng 32

2.4.1 Danh sách sản phẩm có trong giỏ hàng 32

2.4.2 Chức năng cho giỏ hàng 33

2.5 Danh mục yêu thích – Wishlist 33

2.6 Thanh toán 35

2.6.1 Thông tin giao hàng 36

2.6.2 Xác nhận đơn hàng 37

2.6.3 Thanh toán và vận chuyển 38

2.6.4 Phương thức thanh toán 39

2.7 Trang so sánh 41

2.7.1 Hình ảnh 41

2.7.2 Tên, giá, mô tả, màu sắc, trạng thái sản phẩm, cân nặng, kích thước mua và xóa 41 2.7.3 Newsletter 42

2.8 Tài khoản 43

2.8.1 Quản lý tài khoản (accounts.html) 43

2.8.2 Đăng nhập, đăng ký (login-register.html) 47

2.9 Giới thiệu thương hiệu 48

2.10 Blog 48

2.11 Thông tin liên hệ 48

CHƯƠNG 03: ĐIỀU CHỈNH, MỞ RỘNG VÀ PHÁT TRIỂN HỆ THỐNG/CHƯƠNG TRÌNH 50

3.1 Phân tích các layout có sẵn 50

3.1.1 Juicy Juice 50

3.1.2 OLIPOP 51

3.1.3 Retrodx 52

3.2 Thiết kế chương trình trên Figma 54

3.2.1 Mô tả về layout 54

3.3 Điều chỉnh trên Source Code 57

3.3.1 Chung 57

3.3.2 Trang chủ 59

3.3.3 Trang cửa hàng 93

3.3.4 Chi tiết sản phẩm 109

Phát triển ứng dụng thương mại điện tử - Nhóm 05

3.3.5 Giỏ hàng 145

3.3.6 Wishlist 150

3.3.7 Thanh toán 158

3.3.8 Về chúng tôi 188

3.3.9 Blog 195

3.3.10 Liên hệ 200

3.3.11 Tài khoản 203

CHƯƠNG 04: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 225

CHƯƠNG 05: PHỤ LỤC 227

TÀI LIỆU THAM KHẢO 227

PHỤ LỤC 228

Phát triển ứng dụng thương mại điện tử - Nhóm 05

DANH MỤC HÌNH ẢNH

Hình 1 Html Header 13

Hình 2 Html thanh điều hướng - Navigation 14

Hình 3 Html của Hero 15

Hình 4 Html của Danh mục sản phẩm phổ biến 16

Hình 5 Html Danh mục sản phẩm 17

Hình 6 Html của Deals 18

Hình 7 Html của Sản phẩm mới về 19

Hình 8 Html của Showcase sản phẩm 19

Hình 9 Html của Newsletter 20

Hình 10 Html của Footer 21

Hình 11 Html của Breadcrumbs 22

Hình 12 Html của Danh sách sản phẩm 23

Hình 13 Source code tham khảo mục hình ảnh 24

Hình 14 Source code tham khảo mục mô tả 25

Hình 15 Mục tham khảo các biến thể sản phẩm 26

Hình 16 Mục tham khảo số lượng, thêm vào giỏ, yêu thích và sản phẩm trong kho 26

Hình 17 Tham khảo bảng thuộc tính sản phẩm 27

Hình 18 Mục tham khảo review sản phẩm 27

Hình 19 Source code tham khảo mục đề xuất sản phẩm khác 28

Hình 20 Source code khung sản phẩm của trang Cart 29

Hình 21 Source code của các chức năng cho Giỏ hàng 30

Hình 22 Source code khung sản phẩm của trang Wishlist 32

Hình 23 Source code Tổng quan trang thanh toán 33

Hình 24 Source code Thông tin giao hàng 34

Hình 25 Source code Xác nhận đơn hàng 35

Hình 26 Source code Thanh toán và vận chuyển 36

Hình 27 Source code Phương thức thanh toán 37

Hình 28 Source code Trang so sánh 38

Hình 29 Source code Tên, giá, mô tả, màu sắc, trạng thái sản phẩm, cân nặng, kích thước mua và xóa 39

Hình 30 Source code Newsletter 39

Hình 31 Source code tổng quan trang tài khoản 40

Hình 32 Source code Hồ sơ người dùng 41

Hình 33 Source code tổng quan trang tài khoản 42

Hình 34 Source code cập nhật thông tin người dùng 43

Hình 35 Source code địa chỉ giao hàng 43

Hình 36 Source code đổi mật khẩu 43

Hình 37 Source code html của trang gốc 45

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 38 Landing page Juice Juice 47

Hình 39 Landing page Juice Juice 47

Hình 40 Trang landing page OLIPOP Healthy Prebiotic Soda 48

Hình 41 Trang landing page OLIPOP Healthy Prebiotic Soda 49

Hình 42 Landing page Retrodx 49

Hình 43 Landing page Retrodx 50

Hình 44 Landing page Retrodx 50

Hình 45 Trang chủ Figma 52

Hình 46 Chi tiết sản phẩm Figma 53

Hình 47 Giỏ hàng Figma 54

Hình 48 Css các phần tử trên web 54

Hình 49 Định dạng chung cho chiều cao của header 55

Hình 50 Màu chung cho các phần tử 55

Hình 51 Định dạng nút trên trang web 55

Hình 52 Định dạng font cho các phần tử 56

Hình 53 Định dạng header 57

Hình 54 Header và Thanh điều hướng - Trước và sau khi chỉnh sửa 57

Hình 55 Html Hero 58

Hình 56 Định dạng khung chứa 58

Hình 57 Định dạng các lon trong Hero 59

Hình 58 Định dạnh tiêu đề Hero 60

Hình 59 JS Tạo tuyết 61

Hình 60 JS Tạo tuyết 62

Hình 61 JS Tạo tuyết 62

Hình 62 JS Lắng nghe sự kiện cuộn trang & tùy chỉnh chuyển động của từng lon 63

Hình 63 JS: Lưu vị trí mới của lon 64

Hình 64 HTML Giới thiệu thương hiệu 65

Hình 65 Định dạng chung cho kích thước và bố trí của section brandintro 65

Hình 66 Định dạng cho các thành phần trong section 66

Hình 67 Định dạng cho phần nội dung ở cột giữa 66

Hình 68 Định dạng kích thước, vị trí và hiệu ứng cho các tay bên trái và bên phải 67

Hình 69 JS: Xác định các phần từ ở trong Giới thiệu thương hiệu 67

Hình 70 JS: Di chuyển phần tử có trong Giới thiệu thương hiệu 68

Hình 71 JS: Trả phần tử về vị trí cũ khi ra khỏi Giới thiệu thương hiệu 68

Hình 72 HTML : Sản phẩm nổi bật 69

Hình 73 HTML Sản phẩm nổi bật 70

Hình 74 Định dạng cho kích thước, font chữ của từng phân loại sản phẩm, giá cũ giá mới 71 Hình 75 Js: Di chuyển tên và giá của sản phẩm 72

Hình 76 HTML: Danh mục sản phẩm 73

Hình 77 Định dạng thanh tab phân loại sản phẩm 74

Hình 78 Định dạng các ô chứa sản phẩm 75

Hình 79 HTML bình luận khách hàng 77

Hình 80 Nội dung bên trong 77

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 82 Bình luận khách hàng sau khi được thêm vào 78

Hình 83 HTML: Câu hỏi thường xuyên 79

Hình 84 HTML: Form thu thập câu hỏi 79

 Hình 85 Định dạng chung cho kích thước của ô chứa các câu hỏi và form nhận câu hỏi 80 Hình 86 Định dạng cho cách bố trí của các thanh câu hỏi và kiểu chữ của từng thanh 80

Hình 87 Định dạng cho trạng thái hover của thanh câu hỏi và khối câu trả lời 81

Hình 88 Định dạng cho khung Form nhận câu hỏi 81

Hình 89 Định dạng các phần tử bên trong form 82

Hình 90 Câu hỏi thường xuyên và Form thu thập câu hỏi sau khi thêm vào 82

Hình 91 HTML danh mục bài viết 83

Hình 92 Định dạng cho cách bố trí hai bài viết 83

Hình 93 Định dạng cho hình ảnh và nội dung bên trong bài viết: 84

Hình 94 Danh mục bài viết sau khi thêm vào 84

Hình 95 HTML Footer 85

Hình 96 HTML Footer 85

Hình 97 Footer trước và sau khi chỉnh sửa 86

Hình 98 HTML Cải tiến footer 86

Hình 99 JS cải tiến footer 87

Hình 100 Hình html cải tiến footer 88

Hình 101 Css hình tròn giọt nước 88

Hình 102 JS: Định dạng màu sắc cho giọt nướcHình 89

Hình 103 JS: Lắng nghe sự kiện di chuyển chuột để cập nhật vị trí giọt nước 89

Hình 104 Hiệu ứng Giọt nước con trỏ chuột sau khi được thêm vào 90

Hình 105 HTML của bộ lọc sản phẩm 91

Hình 106 CSS của phần bộ lọc 92

Hình 107 Bộ lọc sản phẩm 93

Hình 108 HTML của bộ sắp xếp sản phẩm 94

Hình 109 CSS của bộ sắp xếp sản phẩm 94

Hình 110 Bộ sắp xếp sản phẩm 95

Hình 111 Html tổng quan lưới sản phẩm 95

Hình 112 cssl tổng quan lưới sản phẩm 95

Hình 113 Ảnh sản phẩm trong shop 96

Hình 114 CSS của danh mục hình ảnh 97

Hình 115 Các hành động đối với sản phẩm 99

Hình 116 CSS của phần hành động đối với sản phẩm 100

Hình 117 Hành động đối với sản phẩm sau khi chỉnh sửa 101

Hình 118 HTML các thông tin của sản phẩm 101

Hình 119 CSS của các thông tin sản phẩm 102

Hình 120 HTML của nút thêm vào giỏ hàng 103

Hình 121 css của nút thêm vào giỏ hàng 104

Hình 122 HTML của danh sách các trang và nút chuyển trang 104

Hình 123 CSS của danh sách các trang và nút điều hướng 105

Hình 124 HTML tổng thể của section "sk-prd" 106

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 125 CSS tổng thể của section "sk-prd" 107

Hình 126 HTML của phần trái section "sk-prd" 108

Hình 127 CSS của phần trái section "sk-prd" 109

Hình 128 Javascript của tính năng zoom ảnh sản phẩm 110

Hình 129 HTML phần phải của section "sk-prd" 111

Hình 130 CSS định dạng phần phải với flexbox 112

Hình 131 CSS định dạng nút chuyển tab và các hiệu ứng khi hover và chọn 112

Hình 132 CSS định dạng lưới các sản phẩm tương tự 113

Hình 133 CSS định dạng cho lưới các sản phẩm mua kèm 114

Hình 134 CSS định dạng các thông tin cơ bản của sản phẩm 115

Hình 135 CSS định dạng thao tác thay đổi số lượng sản phẩm 116

Hình 136 CSS định dạng thao tác thêm vào giỏ hàng 116

Hình 137 CSS định dạng thao tác thêm vào wishlist 117

Hình 138 CSS định dạng thao tác chọn phân loại dung tích sản phẩm 117

Hình 139 CSS định dạng thông báo pop-up 118

Hình 140 Javascript hiển thị nội dung của từng tab Sản phẩm tương tự và Sản phẩm mua kèm 118

Hình 141 Javascript hiển thị các hiệu ứng đã định dạng cho sản phẩm sau khi được chọn 119

Hình 142 Javascript tự động cuộn xuống phần review khi nhấn và ô đánh giá trung bình 119 Hình 143 Javascript tăng giảm số lượng sản phẩm khi chọn vào dấu + hoặc - ở mục số lượng sản phẩm 119

Hình 144 Javascript tính năng hiển thị thông báo khi khách hàng chọn thêm vào giỏ hàng hay wishlist 120

Hình 145 Javascript hiệu ứng chuyển màu section “sk-prd” sau khi load xong trang 121

Hình 146 HTML của hình section break dạng gợn sóng được tạo bằng svg và path 124

Hình 147 CSS của hình section break dạng gợn sóng được tạo bằng svg và path 125

Hình 148 Hình minh họa section break dạng gợn sóng 126

Hình 149 HTML tổng thể section "sk-prd-details" 126

Hình 150 CSS của section "sk-prd-details" 126

Hình 151 HTML phần thông tin sản phẩm 126

Hình 152 CSS phần thông tin sản phẩm 127

Hình 153 CSS định dạng bảng hàm lượng dinh dưỡng sản phẩm 128

Hình 154 CSS định dạng bảng hàm lượng dinh dưỡng sản phẩm 128

Hình 155 HTML tổng thể cho section "sk-review" 130

Hình 156 CSS định dạng chung cho section "sk-review" 131

Hình 157 HTML định dạng nút đánh giá 131

Hình 158 CSS định dạng nút đánh giá 131

Hình 159 CSS định dạng phần form đánh giá pop-up 132

Hình 160 CSS định dạng phần form đánh giá pop-up 133

Hình 161 JS định dạng phần form đánh giá pop-up 133

Hình 162 HTML phần đánh giá trung bình 135

Hình 163 CSS định dạng ngôi sao ở phần đánh giá 136

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 165 CSS định dạng phần chi tiết đánh giá khách hàng 137

Hình 166 CSS định dạng nút pagination cho phần đánh giá khách hàng 138

Hình 167 CSS định dạng nút Tiếp tục cuộc dạo chơi 138

Hình 168 Đánh giá được lưu trữ dưới dạng mảng 139

Hình 169 Javascript tạo các đánh giá dựa vào mảng 139

Hình 170 Quy định các sự kiện cho nút pagination 140

Hình 171 Javascript tạo bộ lọc cho các đánh giá theo số sao 140

Hình 172 Javascript tự động cuộn đến section của sản phẩm 141

HHình 173 HTML của khung sản phẩm 142

Hình 174 HTML của bảng phí vận chuyển, mã giảm giá và tổng cộng giá trị giỏ hàng 144

Hình 175 CSS của form nhập địa chỉ giao hàng 144

Hình 176 HTML của form áp dụng mã giảm giá 145

Hình 177 CSS của form áp dụng mã giảm giá 145

Hình 178 HTML của bảng tính tổng cộng giá trị giỏ hàng 145

Hình 179, CSS của tổng cộng giá trị giỏ hàng 146

Phát triển ứng dụng thương mại điện tử - Nhóm 05

DANH MỤC BẢNG BIỂU

Bảng 1 Hero trước và sau khi chỉnh sửa 65

Bảng 2 Giới thiệu thương hiệu trước và sau khi chỉnh sửa 70

Bảng 3 Deals trước và sau khi chỉnh sửa 73

Bảng 4 Danh mục sản phẩm trước và sau chỉnh sửa 77

Bảng 5 Thay đổi màu nền khi scroll đến 1 section nào đó 88

Bảng 6 Lưới sản phẩm sau khi chỉnh sửa 97

Bảng 7 Danh mục hình ảnh sản phẩm sau khi chỉnh sửa 99

Bảng 8 Các thông tin của sản phẩm sau khi chỉnh sửa 104

Bảng 9 Nút thêm vào giỏ hàng sau khi chỉnh sửa 105

Bảng 10 Danh sách các trang và nút điều hướng sau khi chỉnh sửa 106

Bảng 11 Bảng giao diện trước và sau khi chỉnh sửa của section sản phẩm 123

Bảng 12 Bảng giao diện trước và sau khi chỉnh sửa của phần sản phẩm tương tự và mua kèm 125

Bảng 13 Bảng giao diện trước và sau khi chỉnh sửa của section thông tin chi tiết sản phẩm 130

Bảng 14 Giao diện trước và sau khi chỉnh sửa của phần form đánh giá 135

Bảng 15 Giao diện trước và sau khi chỉnh sửa của section đánh giá của khách hàng 143

Bảng 16 Trước và sau khi chỉnh sửa của khung sản phẩm 144

Bảng 17 Trước và sau khi chỉnh sửa cổng giá trị đơn hàng 148

Bảng 18 Trước và sau khi chỉnh sửa khung sản phẩm 149

Bảng 19 Trước và sau xóa và xem sản phẩm chi tiết 153

Bảng 20 Hover sản phẩm 155

Bảng 21 Trước và sau khi chỉnh sửa quay lại mua sắm 156

Phát triển ứng dụng thương mại điện tử - Nhóm 05

BẢNG PHÂN CÔNG ĐÁNH GIÁ THÀNH VIÊN

Họ và Tên MSSV Vai trò Đóng góp Công việc phân công

Nguyễn La Thành Phát 31221023902 Thành viên 100%

-Thực hiện comment cho source code mẫu ở các trang: Thanh toán, Liên hệ-Đề xuất bổ sung nội dung các phần còn thiếu của trang Thanh toán-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Thanh toán, Liên hệ-Format báo cáo dự án-Xây dựng báo cáo về mô

tả và cải tiến cho trang của mình thực hiện chỉnh sửa

và code bổ sung

Võ Xuân Lê Khôi 31221026006 Trường

-Đề xuất sản phẩm, thương hiệu của hàng

-Xác định mục tiêu đạt đượccủa dự án và phương pháp thực hiện

-Thiết kế hình ảnh mockup của sản phẩm cho cửa hàng

- Thiết kế giao diện Figma cho Trang chủ

- Thực hiện chỉnh sửa và code bổ sung cho các layout

và hiệu ứng ở Trang chủ-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Trangchủ, Cửa hàng

-Lên thời gian và kế hoạch họp nhóm

-Điều chỉnh tiến độ dự án đểkịp thời hạn

-Tạo Repository Github cho

dự án và public trang web.-Tìm kiếm các layout tham khảo từ các trang web hay

và trên youtube để triển khaicho các thành viên còn lại

Phát triển ứng dụng thương mại điện tử - Nhóm 05

trong nhóm-Xây dựng báo cáo về mô tả

và cải tiến cho trang của mình thực hiện chỉnh sửa và code bổ sung

Nguyễn Vĩnh Nghi 31221023821 Thành viên 100%

-Đề xuất bổ sung các trang

Về Chúng tôi, Blog và liên

hệ cho cửa hàng-Thực hiện comment cho các trang: Về chúng tôi, Blog

-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Về chúng tôi, Blog

-Thiết kế giao diện Figma cho trang Chi tiết sản phẩm

-Thiết kế hình ảnh thumbnails cho sản phẩm của cửa hàng

-Xây dựng báo cáo về mô

tả và cải tiến cho trang của mình thực hiện chỉnh sửa

và code bổ sung

Nguyễn Hồ Hữu Khải 31221025163 Thành

viên

100% source code mẫu ở các -Thực hiện comment cho

trang: Trang chủ, Đăng nhập/ Đăng ký, Tài khoản-Thực hiện chỉnh sửa và code bổ sung layout và hiệu ứng cho trang Đăng nhập/Đăng kí và tài khoản-Đề xuất thêm nội dung cho tab Đơn hàng trong tài khoản

-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Tài khoản, Đăng nhập/ Đăng ký-Kiểm tra code của lần lượt các thành viên có vấn đề mỗi lần Commit tổng-Xây dựng báo cáo về mô tả

Phát triển ứng dụng thương mại điện tử - Nhóm 05

mình thực hiện chỉnh sửa và code bổ sung

Nguyễn Đình Quốc Bảo 31221020820 Thành viên 100%

-Thực hiện comment cho source code mẫu ở các trang: Cửa hàng, Chi tiết sản phẩm

-Thực hiện chỉnh sửa và code bổ sung layout và hiệu ứng cho trang Chi tiết sản phẩm

-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Chi tiết sản phẩm

-Thiết kế hình ảnh commercial thumbnails chosản phẩm của cửa hàng-Xây dựng báo cáo về mô

tả và cải tiến cho trang của mình thực hiện chỉnh sửa

và code bổ sung

Trần Minh Nhật 31221020888 Thành viên 100%

-Thiết kế Logo hình và Logo chữ cho cửa hàng-Thực hiện comment cho source code mẫu ở các trang: Giỏ hàng, Wishlist-Thực hiện chỉnh sửa và code bổ sung layout và hiệu ứng cho trang Giỏ hàng, Wishlist-Thực hiện thiết kế responsive trên giao diện điện thoại ở các trang: Giỏ hàng, Wishlist

-Thiết kế giao diện Figma cho trang Giỏ hàng-Xây dựng báo cáo về mô

tả và cải tiến cho trang của mình thực hiện chỉnh sửa

và code bổ sung

Phát triển ứng dụng thương mại điện tử - Nhóm 05

LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn chân thành nhất đến Giảng viên môn Phát triển dự

án thương mại điện tử – Thầy Nguyễn Mạnh Tuấn, người trực tiếp giảng dạy em thời gianvừa qua Thầy đã truyền đạt nhiều bài học hay và ý nghĩa cùng với những bài giảng đượcđầu tư kĩ càng qua lối giảng bài nhiệt huyết, cuốn hút và vô cùng thực tế Điều này đã giúp

em có được nền tảng kiến thức từ đó hoàn thành bài tiểu luận này

Em cũng xin được gửi lời tri ân đến các thầy cô giảng viên khác trong khoa nói riêng vàĐại học Kinh tế Thành phố Hồ Chí Minh (UEH) nói chung đã tạo điều kiện về kiến thức,bài giảng cũng như cơ sở vật chất – kỹ thuật trong thời gian học tập

Trong quá trình làm bài tiểu luận này, vì kiến thức và kinh nghiệm vẫn còn hạn chế nênkhông tránh khỏi những sai sót, em mong nhận được góp ý và nhận xét của Thầy nhằm giúp

em chỉnh sửa, hoàn thiện kiến thức bản thân hơn trong hành trình sắp tới

Một lần nữa, em xin được gửi lời cảm ơn chân thành nhất đến Thầy Nguyễn Mạnh

Tuấn phụ trách lớp em nói riêng và tất cả những Thầy, Cô, Giảng viên khác đã cung cấp

nhiều kiến thức và hỗ trợ em hoàn thành bài tiểu luận này

Phát triển ứng dụng thương mại điện tử - Nhóm 05

CHƯƠNG 01: TỔNG QUAN

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

Trong bối cảnh thị trường trực tuyến ngày càng sôi động, việc xây dựng một websitethương mại điện tử không chỉ là xu hướng mà còn là yêu cầu thiết yếu để các doanh nghiệptiếp cận khách hàng tiềm năng và phát triển thương hiệu

Cùng với sự phát triển của công nghệ khoa học kỹ thuật ngày nay, website thương mạiđiện tử giúp doanh nghiệp tăng cường khả năng quảng bá sản phẩm, nâng cao trải nghiệmngười dùng, và đáp ứng nhu cầu tiêu dùng hiện đại Đặc biệt, ngành hàng thức uống hiệnđang nhận được sự quan tâm lớn từ người tiêu dùng, khi chất lượng sản phẩm và tính tiệnlợi được đặt lên hàng đầu Vấn đề quảng bá ngành hàng thức uống là một vấn đề mà nhómmuốn hướng đến ở trong thị trường thương mại điện tử phát triển không ngừng hiện nay

Từ nhu cầu thực tế, đề tài "Xây dựng website thương mại điện tử cho cửa hàng

nước uống dinh dưỡng - Sunkissed" được lựa chọn nhằm hỗ trợ doanh nghiệp cung cấp

sản phẩm nhanh chóng và hiệu quả, đồng thời mang đến cho khách hàng trải nghiệm muasắm tiện lợi và tối ưu, ngoài ra còn giúp doanh nghiệp thu hút khách hàng và tăng cường lợinhuận

1.2 Mục tiêu nghiên cứu

Đề tài này hướng đến các mục tiêu chính sau

 Phát triển giao diện thân thiện: Đảm bảo website tương thích với nhiều thiết bị nhưmáy tính, điện thoại và máy tính bảng

 Tối ưu trải nghiệm người dùng (UI/UX): Cải thiện giao diện và chức năng để thaotác đơn giản, thuận tiện

 Hệ thống lọc và tìm kiếm thông minh: Hỗ trợ khách hàng tìm kiếm sản phẩm nhanhchóng, chính xác

 Tích hợp thanh toán đa dạng: Cung cấp các phương thức thanh toán hiện đại và linhhoạt

 Cung cấp dịch vụ giao hàng thuận tiện: Mang đến cho khách hàng những dịch vụ đadạng và hợp lý nhất

1.3 Đối tượng nghiên cứu

Khách hàng

 Trải nghiệm landing page

 Xem thông tin sản phẩm

 Tìm kiếm sản phẩm thông qua danh mục hoặc chức năng tìm kiếm nâng cao

 Thêm sản phẩm vào giỏ hàng và thực hiện thanh toán

 Quản lý tài khoản cá nhân và lịch sử đơn hàng

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Trang landing page: index.html

 Trang cửa hàng: shop.html

 Trang chi tiết sản phẩm: details_HuongCam.html, details_HuongDua.html

 Trang giỏ hàng: cart.html

 Trang thanh toán: checkout.html

 Trang tài khoản: account.html

 Đăng nhập, đăng ký: login-register.html

 Trang về chúng tôi: aboutus.html

 Trang blog: blog.html

 Trang liên hệ: lienhe.html

 Trang wishlist: wishlist.html

1.5 Phạm vi nghiên cứu

Phạm vi đồ án của nhóm sẽ tập trung vào phát triển front-end của website thương mạiđiện tử với giao diện web hoàn chỉnh, đầy đủ, tối ưu hóa với người sử dụng Môi trườngtriển khai website của nhóm bao gồm:

 Làm giao diện bằng các ngôn ngữ HTML, CSS, Javascript

 Public website front-end lên github, kèm với domain public github

Phát triển ứng dụng thương mại điện tử - Nhóm 05

CHƯƠNG 02: MÔ TẢ HỆ THỐNG/CHƯƠNG TRÌNH

o Nên đưa thông tin “Địa chỉ cửa hàng” ở một vị trí khác thường xuất hiện hơn

2.1.2 Thanh điều hướng - Navigation

Phát triển ứng dụng thương mại điện tử - Nhóm 05

o Trang Giỏ hàng được thể hiện bằng icon

Hình 2 Html thanh điều hướng - Navigation

 Đề xuất:

o Điều chỉnh các trang để phù hợp với đặc thù kinh doanh của cửa hàng:

 Xoá trang Compare

 Thay trang Đăng Nhập thành trang Tài Khoản

 Thêm các trang như Về chúng tôi, Liên hệ

2.1.3 Hero

 Mô tả:

o Bao gồm hình sản phẩm Hero ở bên phải của phần Hero

o Nội dung của sự kiện giảm giá nằm bên trái của phần Hero

o Nút Mua ngay nằm dưới nội dung sự kiện giảm giá

Phát triển ứng dụng thương mại điện tử - Nhóm 05

o Swiper đổi các ô phân loại sản phẩm có thể nhấn nút để đổi qua lại các ô

o Nội dung bên trong từng ô bao gồm hình ảnh sản phẩm đại diện cho phân loại đó

và tên phân loại

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 4 Html của Danh mục sản phẩm phổ biến

 Đề Xuất:

o Thay thế vị trí cho thành mục giới thiệu cho thương hiệu hoặc di chuyển nó đếnmột phần khác thấp hơn vì mục tiêu đang là muốn giữ cho người dùng ở lạiwebsite lâu nhất

o Thêm hiệu ứng độc đáo cho phần thay thế sản phẩm cho phần Danh mục sảnphẩm phổ biến

2.1.5 Danh mục sản phẩm

 Mô tả:

o Bao gồm grid chứa các sản phẩm của cửa hàng

o Có các tab đặc điểm các danh mục sản phẩm như là đặc trưng, phổ biến và mớivề

o Trong từng ô grid sẽ bao gồm tag, hình ảnh sản phẩm, giá , đánh giá, phân loạisản phẩm

o Có hiệu ứng hover sản phẩm thì hình sẽ phóng to ra và hiện ra các nút thêm vàowishlist, so sánh và xem sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 5 Html Danh mục sản phẩm

 Đề xuất:

o Thay tag sản phẩm thành giảm giá hay mới về

o Xoá bỏ nút compare vì không phù hợp với sản phẩm cửa hàng

o Thêm các tab khác như các loại sản phẩm thay vì đặc điểm của danh mục đó

2.1.6 Deals

 Mô tả:

o Bao gồm 2 khung chứa 2 sự kiện đang giảm giá

o Trong từng kung bao gồm: tiêu đề sản phẩm, giá sản phẩm, thời gian đếm ngược

o Lời kêu gọi CTA và nút Mua ngay

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 6 Html của Deals

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Đề xuất: Thay đổi sản phẩm và phần thời gian đếm ngược nên cho chạy real-time

với hiện tại

 Đề xuất: Thay vì làm ra một section riêng như này thì nên gắn tag chúng là mới về

hoặc tạo tab sản phẩm mới về ở trong Danh mục sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Đề xuất: Nên dời vào trong trang cửa hàng vì đây trang chủ đã có danh mục sản

phẩm để người dùng xem qua sản phẩm Để có cái nhìn rõ hơn về tất cả sản phẩmthì nên đưa phần này vào bên trong trang Cửa hàng

2.1.9 Newsletter

 Mô tả: Một section nhỏ có lời kêu gọi người dùng nhập mail và gửi để nhận được

thông tin mới nhất

Hình 9 Html của Newsletter

 Đề xuất: Bỏ hoặc tích hợp với phần khác như câu hỏi thường xuyên để có thể vừa

đặt câu hỏi và gửi mail để có thể nhận thông tin mới nhất từ cửa hàng

2.1.10.Footer

 Mô tả:

o Có logo trang, thông tin, địa chỉ, giờ làm việc, các trang mạng xã hội của cửahàng

o Có các cột thông tin, tài khoản và có các phần mục nhỏ hơn

o Có hình ảnh các cổng thanh toán mà cửa hàng sử dụng

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Thêm Phần đánh giá tiêu biểu của khách hàng khác để thêm sự uy tín cho cửa hàng

 Thêm phần Các câu hỏi thường xuyên và cho phép khách hàng đặt câu hỏi

 Thêm phần các danh mục bài báo, bài viết để bổ sung thông tin cho khách hàng

 Thêm hiệu ứng con trỏ chuột để tăng sự thú vị

2.2 Trang cửa hàng

2.2.1 Breadcrumbs

 Mô tả: Là một đường dẫn thể hiện các các mà người dùng đã truy cập trước khi để

đến được trang hiện tại

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 11 Html của Breadcrumbs

 Đề xuất: Không thay đổi

2.2.2 Danh sách sản phẩm

 Mô tả:

o Có hiển thị kết quả lọc nhưng lại không có bộ lọc

o Gồm một lưới các ô sản phẩm bao gồm hình ảnh và các thông tin cơ bản của sảnphẩm

o Có thể click vào trong hình sản phẩm để xem chi tiết sản phẩm

o Hover vào hình ảnh thì ảnh phóng to một chút

o Có các nút thêm vào giỏ hàng và wishlist

o Có các nút pagination để di chuyển qua trang 2 của danh sách sản phẩm nhưngnhấn không được

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 12 Html của Danh sách sản phẩm

2.2.3 Đề xuất ngoài

 Phải có thêm bộ lọc và bộ sắp xếp theo ít nhất các 5 tiêu chí

 Phải có layout các sản phẩm lọc được theo từng tiêu chí

 Thêm đánh giá trung bình cho từng sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

2.3 Chi tiết sản phẩm

Tổng quan về trang chi tiết sản phẩm có những phần sau: hiển thị mô tả thông tin chitiết sản phẩm, xem đánh giá và đánh giá sản phẩm, miêu tả ngắn, hiển thị phần sản phẩmtương tự, chọn biến thể hương vị, biến thể dung tích, điều chỉnh số lượng và thêm vào giỏhàng

2.3.1 Chức năng hiển thị mô tả thông tin chi tiết sản phẩm

Hình ảnh sản phẩm

 Ở source code tham khảo, mục hình ảnh sẽ có 1 tấm ảnh làm hình ảnh chính củasản phẩm và 3 hình ảnh phụ, chụp những góc khác của sản phẩm về thời trang

Hình 13 Source code tham khảo mục hình ảnh

 Đề xuất: Nhóm sẽ thay thế hình ảnh chính với hiệu ứng phóng to sản phẩm khi di

chuột tới hình ảnh và kết hợp 3 tấm ảnh phụ về những thiết kế nghệ thuật của nhómdành cho sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Mục mô tả sản phẩm

Hình 14 Source code tham khảo mục mô tả

 Đề xuất: Mục mô tả sản phẩm sẽ đưa xuống dưới hình ảnh sản phẩm với các thông

tin cơ bản, thêm biểu tượng đặc trưng mô tả thuộc tính sản phẩm Còn các mục như

là giá tiền và các thông tin về hãng sản phẩm sẽ được trang trí cách điệu với giaodiện sống động

Các biến thể sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 15 Mục tham khảo các biến thể sản phẩm

 Đề xuất: So với source code cũ, các biến thể sản phẩm sẽ phù hợp với sản phẩm của

nhóm là nước giải khát, với các biến thể về dung tích lon nước

Mục số lượng, thêm vào giỏ, yêu thích và chi tiết sản phẩm trong kho

Hình 16 Mục tham khảo số lượng, thêm vào giỏ, yêu thích và sản phẩm trong kho

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Đề xuất: Thay đổi về giao diện của các thuộc tính này.

2.3.2 Bảng thuộc tính sản phẩm

Hình 17 Tham khảo bảng thuộc tính sản phẩm

 Đề xuất: Thay đổi định dạng bảng thuộc tính và cho vào những thông tin sản phẩm

về sản phẩm lon nước

2.3.3 Mục review sản phẩm

Hình 18 Mục tham khảo review sản phẩm

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Đề xuất: Thêm vào số sao tổng quan của mục review, danh sách trang các review và

một nút để người dùng có thể tạo review của mình

2.3.4 Mục đề xuất sản phẩm khác

Hình 19 Source code tham khảo mục đề xuất sản phẩm khác

Phát triển ứng dụng thương mại điện tử - Nhóm 05

 Đề xuất: Cho trang đề xuất các sản phẩm hương vị khác nằm gọn ngay bên cạnh

hình ảnh sản phẩm chính, ngoài ra bổ sung bên cạnh mục này mục các sản phẩmkhuyến mãi mua kèm đối với sản phẩm trong trang chi tiết sản phẩm

2.4 Giỏ hàng

2.4.1 Danh sách sản phẩm có trong giỏ hàng

 Mô tả: Khung sản phẩm trong giỏ hàng được xây dựng với cấu trúc gồm:

o Hiển thị hình ảnh sản phẩm

o Tên và mô tả ngắn gọn

o Giá của sản phẩm (theo đơn vị tiền tệ)

o Trường nhập để chỉnh sửa số lượng sản phẩm

o Tổng tiền tương ứng với số lượng sản phẩm

o Biểu tượng để xóa sản phẩm khỏi giỏ hàng

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 20 Source code khung sản phẩm của trang Cart

 Đề xuất: Sử dụng khung sản phẩm Đề xuất giống như đề xuất cho trang Danh Mục

Yêu Thích

2.4.2 Chức năng cho giỏ hàng

 Mô tả:

o Cập nhật giỏ hàng: thay đổi số lượng sản phẩm hoặc xóa một sản phẩm

o Tiếp tục mua sắm: dẫn người dùng quay lại trang sản phẩm để tiếp tục lựa chọncác sản phẩm khác

Hình 21 Source code của các chức năng cho Giỏ hàng

 Đề xuất:

o Thêm phần hiển thị và nhập liệu thông tin vận chuyển để tính phí vận chuyểnchính xác

o Thêm một mục nhập mã giảm giá để người dùng áp dụng các ưu đãi

o Hiển thị chi tiết tổng chi phí bao gồm:

 Tạm tính giỏ hàng: Giá trị các sản phẩm hiện có

 Vận chuyển: Phí vận chuyển được tính theo thông tin đã nhập

 Tổng: Tổng tiền phải thanh toán sau khi tính cả giảm giá và vận chuyển

o Thêm một nút chuyển hướng đến trang thanh toán (checkout.html) với thông tin

o Khung sản phẩm yêu thích (Wishlist) được xây dựng với cấu trúc gồm:

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Phát triển ứng dụng thương mại điện tử - Nhóm 05

o Thông tin thanh toán và vận chuyển

o Phương thức thanh toán

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 23 Source code Tổng quan trang thanh toán

 Đề xuất: Cần thay đổi về bố cục và màu sắc sao cho hài hòa hơn, cần chia các danh

mục theo chiều dọc và theo 2 cột song song cho thông tin giao hàng và xác nhậnđơn hàng & thông tin thanh toán và vận chuyển Thêm phần phiếu giảm giá và phảnhồi khách hàng và sản phẩm gợi ý cho giồng trang TMĐT

2.6.1 Thông tin giao hàng

 Mô tả: Tuy nhiên nội dung các ô nhập thông tin của khách hàng, các thông tin cụ

thể về địa điểm và vị trí vẫn chưa đầy đủ

o Thông tin giao hàng

o Thông tin bổ sung

o Ghi chú đơn hàng

Hình 24 Source code Thông tin giao hàng

 Đề xuất: Thay đổi đổi nội dung trong các ô nhập thông tin của khách hàng, thêm

nhiều các sự lựa chọn về địa chỉ và vị trí để đảm bảo độ chính xác về dữ liệu kháchhàng, cần thêm nút “Lưu” thông tin sau khi thực hiện nhập thông tin

Phát triển ứng dụng thương mại điện tử - Nhóm 05

2.6.2 Xác nhận đơn hàng

 Mô tả: Chỉ có bảng hiển thị danh sách sản phẩm và giá tiền tuy nhiên vẫn chưa rõ

ràng và bố cục vẫn còn chưa tối ưu

Hình 25 Source code Xác nhận đơn hàng

 Đề xuất: Cần phải chia lại bố cục cho phần này song song với với Thông tin giao

hàng để khách hàng dễ dàng so sánh, và thêm các Button “Tăng & giảm “ số lượngsản phẩm và Button “ Xóa” để dễ dàng sử dụng và chỉnh sửa

2.6.3 Thanh toán và vận chuyển

 Mô tả:

o Dòng hiển thị tổng phụ thanh toán và vận chuyển

o Dòng hiển thị tổng tiền

Phát triển ứng dụng thương mại điện tử - Nhóm 05

Hình 26 Source code Thanh toán và vận chuyển

 Đề xuất: Chia thành 2 phần riêng

o Địa chỉ thanh toán xác nhận lại địa chỉ giao đến và có thêm Button “Sửa” đểkhách hàng có thể thay đổi địa chỉ về mặc định hoặc thêm địa chỉ mới

o Thông tin vận chuyển bao gồm phí vận chuyển và tổng tiền sẽ được ở 1 phầnriêng

2.6.4 Phương thức thanh toán

 Mô tả: Chỉ có 3 phương thức thanh toán

o Direct Bank transfer

o Check Payment

o Paypal

o Nút “Place order”