Xây dựng website bán hàng trực tuyến

2 IDE Integrated Development Environment là môi trường tích hợp dùng để viết code để phát triển ứng dụng 3 NoSQL Cơ sở dữ liệu phi quan hệ Trang 15 CHƯƠNG 1: TỔNG QUAN 1.Lý do chọn đề

THÀNH PHỐ HỒ CHÍ MINH

ĐỖ ĐỨC ANH

S K L 0 0 9 4 9 7

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

TP Hồ Chí Minh, tháng 6 năm 2022

XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN

SVTH1: NGUYỄN KHOA ĐẢNH MSSV: 18110091 SVTH2: ĐỖ ĐỨC ANH MSSV: 18110074

Khóa : K18

Ngành : CÔNG NGHỆ THÔNG TIN

GVHD : TS TRẦN NHẬT QUANG

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

***********

Tp Hồ Chí Minh, ngày tháng 1 năm 2022

NHIỆM VỤ THỰC HIỆN KHOÁ LUẬN TỐT NGHIỆP

Họ và tên sinh viên 1: Nguyễn Khoa Đảnh MSSV 1: 18110091

Họ và tên sinh viên 2: Đỗ Đức Anh MSSV 2: 18110074

Ngành: Công nghệ thông tin Lớp: 18110CLST3

Giảng viên hướng dẫn: TS Trần Nhật Quang ĐT:

Ngày nhận đề tài: 14/ 02/ 2022 Ngày nộp đề tài: 20/06/2022

1 Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN

2 Nội dung thực hiện đề tài: Tìm hiểu và phát triển website bằng công nghệ MERN stack

3 Sản Phẩm: Website bán hàng trực tuyến.

TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

***********

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Khoa Đảnh - MSSV 1: 18110091

Họ và tên Sinh viên 2: Đỗ Đức Anh - MSSV 2: 18110074

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN

Họ và tên giáo viên hướng dẫn: TS Trần Nhật Quang

Nhận Xét:

1 Về nội dung đề tài & khối công việc thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm: (Bằng chữ: )

Tp Hồ Chí Minh, ngày……tháng……năm 2022 Giáo viên hướng dẫn

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

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

***********

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Khoa Đảnh - MSSV 1: 18110091

Họ và tên Sinh viên 2: Đỗ Đức Anh - MSSV 2: 18110074

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN

Họ và tên giáo viên phản biện:

Nhận Xét: 1 Về nội dung đề tài & khối công việc thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm: (Bằng chữ: )

Tp Hồ Chí Minh, ngày……tháng……năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên)

MỤC LỤC

DANH MỤC BẢNG 6

DANH MỤC HÌNH 9

LỜI CẢM ƠN 11

DANH MỤC TỪ VIẾT TẮT 12

CHƯƠNG 1: TỔNG QUAN 13

1.Lý do chọn đề tài 13

2.Mục đích 13

3.Công nghệ sử dụng 13

CHƯƠNG 2: CƠ SỞ LÍ THUYẾT 14

1.Tìm hiểu các về ngôn ngữ lập trình 14

1.1.HTML 14

1.2.CSS 14

1.3.JavaScript 15

2.Một số Framework hỗ trợ 15

2.1.Bootstrap 15

3.Cơ sở dữ liệu NoSQL 16

3.1.NoSQL 16

3.2.Mongodb 17

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 19

1.Khảo sát 19

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

2.1.Yêu cầu chức năng 41

2.2.Yêu cầu phi chức năng 43

3.Đặc tả chức năng 43

3.1.Đặc tả Usecase 45

Trao Đổi 69

Lấy Danh Sách Cuộc Trò Chuyện 69

CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 70

1.Mô tả sơ đồ thiết kế dữ liệu 70

1.1.Collection ICategory 70

1.2.Collection Iproduct 70

1.3.Collection IaAccount 70

1.4.Collection IChat 71

1.5.Collection IBill 71

1.6.Collection IDiscount 71

2.Sơ đồ tuần tự (Sequence Diagram) 72

2.1.Sequence admin xem tài khoản 72

2.2.Sequence admin xem sản phẩm 72

2.3.Sequence admin xem loại hàng 73

2.4.Sequence admin xem khuyến mãi 73

2.5.Sequence admin xem danh sách người dùng 74

2.6.Sequence admin thay đổi mã khuyến mãi 74

2.7.Sequence admin chỉnh sửa loại hàng 75

2.8.Sequence admin thay đổi sản phẩm 75

2.9.Sequence admin thêm mới sản phẩm 76

2.10.Sequence admin thêm mới loại hàng 76

2.11.Sequence admin thêm mới mã khuyến mãi 77

2.12.Sequence admin xem doanh thu 77

2.13.Sequence admin xem danh sách đơn hàng 78

2.14.Sequence người dùng đăng nhập 78

2.15.Sequence người dùng đăng ký 79

3.Thiết kế giao diện 82

3.1.Màn hình giao diện Admin 82

3.2.Màn hình giao diện trang quản lý loại hàng 83

CHƯƠNG 5: CÀI ĐẶT ỨNG DỤNG & KIỂM THỬ 100

1.Cài đặt ứng dụng 100

CHƯƠNG 6: KẾT LUẬN 107

1.Kết quả đạt được 107

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

2.1.Ưu điểm 107

2.2.Nhược điểm 107

3.Khó khăn 108

3.1.Công nghệ 108

3.2.Quy trình thực hiện 108

4.Kinh nghiệm đạt được 108

5.Hướng phát triển trong tương lai 109

TÀI LIỆU THAM KHẢO 110

DANH MỤC BẢNG

Bảng 1 Bảng danh mục từ viết tắt 12

Bảng 3.1.1 Khảo sát Tiki 25

Bảng 3.1.2 Khảo sát điện máy xanh 31

Bảng 3.1.3 Khảo sát Shopee 36

Bảng 3.1.4 Khảo sát Fptshop 40

Bảng 3.3.1 Bảng requirement dành cho use case 43

Bảng 3.2.1.Use case admin xem danh sách tài khoản 47

Bảng 3.2.2.Use case admin xem tài khoản 47

Bảng 3.2.3.Use case admin đóng băng tài khoản 48

Bảng 3.2.4.Use case admin gửi thông báo tài khoản 49

Bảng 3.2.5.Use case admin liên kết tài khoản với mã giảm giá 49

Bảng 3.2.6.Use case admin xem danh sách sản phẩm 50

Bảng 3.2.7.Use case admin xem sản phẩm 50

Bảng 3.2.8.Use case admin liên kết sản phẩm với mã giảm giá 51

Bảng 3.2.9.Use case admin thay đổi thông tin sản phẩm 51

Bảng 3.2.10.Use case admin thêm sản phẩm 52

Bảng 3.2.11.Use case admin thêm số lượng sản phẩm 53

Bảng 3.2.12.Use case admin xem danh sách thể loại 53

Bảng 3.2.13.Use case admin xem thể loại 53

Bảng 3.2.14.Use case admin liên kết thể loại với mã giảm giá 54

Bảng 3.2.15.Use case admin thay đổi thông tin thể loại 55

Bảng 3.2.16.Use case admin thêm thể loại 55

Bảng 3.2.17.Use case admin xóa thể loại 56

Bảng 3.2.18.Use case admin xem danh sách đơn hàng 56

Bảng 3.2.19.Use case admin xem đơn hàng 56

Bảng 3.2.20.Use case admin thay đổi trạng thái đơn hàng 57

Bảng 3.2.21.Use case admin xem danh sách mã giảm giá 58

Bảng 3.2.22.Use case admin xem mã giảm giá 58

Bảng 3.2.23.Use case admin thêm mã giảm giá 58

Bảng 3.2.24.Use case admin thay đổi mã giảm giá 59

Bảng 3.2.25.Use case admin xem biểu đồ thu chi 59

Bảng 3.2.26.Use case admin xếp hạng sản phẩm 60

Bảng 3.2.27.Use case đăng ký 60

Bảng 3.2.28.Use case đăng nhập 61

Bảng 3.2.29.Use case xem thông tin cá nhân 61

Bảng 3.2.30.Use case đổi thông tin cá nhân 62

Bảng 3.2.31.Use case đổi mật khẩu 62

Bảng 3.2.32.Use case đổi số điện thoại 63

Bảng 3.2.33.Use case đổi email 63

Bảng 3.2.34.Use case xem danh sách sản phẩm 63

Bảng 3.2.35.Use case xem danh sách sản phẩm 64

Bảng 3.2.36.Use case lọc sản phẩm theo loại 64

Bảng 3.2.37.Use case xem sản phẩm 65

Bảng 3.2.38.Use case thêm sản phẩm vào giỏ hàng 65

Bảng 3.2.39.Use case xem giỏ hàng 65

Bảng 3.2.40.Use case sửa giỏ hàng 66

Bảng 3.2.41.Use case tạo giỏ hàng 66

Bảng 3.2.42.Use case xem danh sách hóa đơn 67

Bảng 3.2.43.Use case xem đơn hàng 67

Bảng 3.2.44.Use case hủy hóa đơn 68

Bảng 3.2.45.Use case đánh giá sản phẩm 68

Bảng 3.2.46.Use case tạo cuộc trò chuyện 68

Bảng 3.2.47.Use case trao đổi 69

Bảng 3.2.48.Use case lấy danh sách trò chuyện 69

Bảng 4.1.1.Collection ICategory 70

Bảng 4.1.2.Collection IProduct 70

Bảng 4.1.3.Collection IAccount 71

Bảng 4.1.4.Collection Ichat 71

Bảng 4.1.5.Collection IBill 71

Bảng 4.1.6.Collection IDiscount 72

Bảng 4.3.1 Giao diện trang chủ admin 82

Bảng 4.3.2 Giao diện trang quản lý loại hàng 83

Bảng 4.3.3 Giao diện trang quản lý sản phẩm 84

Bảng 4.3.4 Giao diện trang quản lý mã khuyến mãi 85

Bảng 4.3.5 Giao diện trang chủ 86

Bảng 4.3.6 Giao diện loại hàng ở trang chủ 86

Bảng 4.3.7.Giao diện trang sản phẩm theo loại hàng 87

Bảng 4.3.9.Giao diện trang chi tiết sản phẩm 89

Bảng 4.3.10.Giao diện trang giỏ hàng 90

Bảng 4.3.11.Giao diện trang thông tin cá nhân 90

Bảng 4.3.12 Giao diện trang đăng nhập 91

Bảng 4.3.13 Giao diện trang đăng ký 92

Bảng 4.3.14 Giao diện trang admin thêm sản phẩm 93

Bảng 4.3.15 Giao diện trang admin thêm loại hàng 94

Bảng 4.3.16 Giao diện trang admin thêm khuyến mãi 94

Bảng 4.3.17 Giao diện trang tin nhắn của người dùng 95

Bảng 4.3.18 Giao diện trang xem đơn hàng của người dùng 96

Bảng 4.3.19 Màn hình giao diện trang xem thắc mắc của người dùng 97

Bảng 4.3.23 Giao diện trang chính của nhân viên bán hàng 99

Bảng 4.3.25 Màn hình giao diện trang tin nhắn của nhân viên bán hàng 100

Hình 5.1.4.Cấu trúc project back-end 103 Bảng 6.4.1 Khó khăn về công nghệ 108 Bảng 6.4.2 Khó khăn về công nghệ 108

DANH MỤC HÌNH

Hình 3.2.1.Use case admin tổng quát 45

Hình 3.2.2.Use case diagram chung 46

Hình 4.2.1.Sequence admin xem tài khoản 72

Hình 4.2.2.Sequence admin xem sản phẩm 72

Hình 4.2.3.Sequence admin xem loại hàng 73

Hình 4.2.4.Sequence admin xem khuyến mãi 73

Hình 4.2.5.Sequence admin xem danh sách người dùng 74

Hình 4.2.6.Sequence thay đổi mã khuyến mãi 74

Hình 4.2.7.Sequence admin thay đổi loại hàng 75

Hình 4.2.8.Sequence admin thay đổi sản phẩm 75

Hình 4.2.9.Sequence admin thêm mới sản phẩm 76

Hình 4.2.10.Sequence admin thêm mới loại hàng 76

Hình 4.2.11.Sequence admin thêm mới mã khuyến mãi 77

Hình 4.2.12.Sequence admin xem doanh thu 77

Hình 4.2.13.Sequence admin xem danh sách đơn hàng 78

Hình 4.2.14.Sequence người dùng đăng nhập 78

Hình 4.2.15.Sequence người dùng đăng ký 79

Hình 4.2.16.Sequence người dùng thay đổi thông tin 79

Hình 4.2.17.Sequence người dùng tìm kiếm sản phẩm 80

Hình 4.2.18.Sequence người dùng xem chi tiết sản phẩm 80

Hình 4.2.19.Sequence người dùng xem giỏ hàng 80

Hình 4.2.20.Sequence người dùng thêm vào giỏ hàng 81

Hình 4.2.21.Sequence người dùng thanh toán đơn hàng 81

Hình 4.3.1.Giao diện trang chủ admin 82

Hình 4.3.2.Giao diện trang quản lý loại hàng 83

Hình 4.3.3.Giao diện trang quản lý sản phẩm 84

Hình 4.3.4.Giao diện trang quản lý mã khuyến mãi 85

Hình 4.3.5.Giao diện trang chủ 85

Hình 4.3.6.Giao diện loại hàng ở trang chủ 86

Hình 4.3.7.Giao diện trang sản phẩm theo loại hàng 87

Hình 4.3.8.Giao diện trang sản phẩm 88

Hình 4.3.9.Giao diện trang chi tiết sản phẩm 88

Hình 4.3.10.Giao diện trang giỏ hàng 89

Hình 4.3.11.Giao diện trang thông tin cá nhân 90

Hình 4.3.12.Giao diện trang đăng nhập 91

Hình 4.3.13.Giao diện trang đăng ký 92

Hình 4.3.14.Giao diện trang admin thêm sản phẩm 93

Hình 4.3.15.Giao diện trang admin thêm loại hàng 93

Hình 4.3.16.Giao diện trang admin thêm khuyến mãi 94

Hình 4.3.17.Giao diện trang tin nhắn của người dùng 95

Hình 4.3.18.Giao diện trang xem đơn hàng của người dùng 96

Hình 4.3.19.Màn hình giao diện trang xem thắc mắc của người dùng 96

Hình 4.3.20.Màn hình giao diện trang thông báo của người dùng 97

Hình 4.3.21.Màn hình giao diện trang gợi ý sản phẩm cho người dùng 97

Hình 4.3.22.Màn hình giao diện trang chi tiết sản phẩm 98

Hình 4.3.23.Màn hình giao diện trang chính của nhân viên bán hàng 98

Hình 4.3.24.Màn hình giao diện trang gửi mail đến người theo dõi của nhân viên bán hàng 99

Bảng 4.3.24 Màn hình giao diện trang gửi mail đến người theo dõi của nhân viên bán hàng 99

Hình 4.3.25.Màn hình giao diện trang tin nhắn của nhân viên bán hàng 100

Hình 5.1.1.Cấu trúc project front-end 101

Hình 5.1.2.Chạy code trên visual code 102

Hình 5.1.3.Kết quả front-end 102

Hình 5.1.5.Cấu trúc project back-end 104

Hình 5.1.6.Cấu trúc project back-end 104

Hình 5.1.7.Cấu trúc project back-end 105

Hình 5.1.8.Cấu trúc project back-end 105

Hình 5.1.9.Cấu trúc project back-end 106

Hình 5.1.10.Cấu trúc project back-end 106

LỜI CẢM ƠN

Lời đầu tiên, cho phép nhóm em được gửi lời cảm ơn chân thành đến thầy Trần Nhật Quang, người đã phụ trách hướng dẫn nhóm chúng em trong việc thực hiện và hoàn thành bài báo cáo một cách tốt và hiệu quả nhất Những sự chỉ dạy, nhật xét, đóng góp ý kiến từ thầy đã góp phần rất quan trọng trong việc giúp chúng em hoàn hành đề tài một cách hoàn thiện nhất

Chúng em cũng xin gửi lời cảm ơn chân thành các quý thầy cô trong khoa Đào tạo Chất Lượng Cao nói chung và ngành Công Nghệ Thông Tin nói riêng đã tận tình truyền đạt những kiến thức cần thiết giúp chúng em có nền tảng để làm nên đề tài này,

đã tạo điều kiện để chúng em có thể tìm hiểu và thực hiện tốt đề tài Cùng với đó, chúng em xin được gửi cảm ơn đến các bạn cùng khóa đã cung cấp nhiều thông tin và kiến thức hữu ích giúp chúng em có thể hoàn thiện hơn đề tài của mình

Báo cáo được thực hiện trong một khoảng thời gian có hạn, cùng với những hạn chế về mặt kiến thức nên việc sai sót là điều không thể tránh khỏi trong quá trình thực hiện Chúng em kính mong nhận được những lời nhận xét, ý kiến đóng góp quý báo từ quý Thầy Cô để chúng em có thêm kinh nghiệm và hoàn thành tốt hơn ở sau này Chúng em xin chân thành cảm ơn !

Cuối cùng, chúng em xin kính chúc quý thầy cô thật dồi dào sức khỏe và thành công hơn trong sự nghiệp của mình Mong thầy cô sẽ luôn đồng hành, hỗ trợ chúng

em giúp chúng em hoàn thiện hơn mỗi ngày Một lần nữa chúng em xin chân thành cảm ơn

DANH MỤC TỪ VIẾT TẮT

STT Từ viết tắt Giải thích

1 API Application Programming Interface - phương thức trung gian kết nối các ứng

dụng và thư viện khác nhau

2 IDE (Integrated Development Environment) là môi trường tích hợp dùng để viết code

để phát triển ứng dụng

Bảng 1 Bảng danh mục từ viết tắt

CHƯƠNG 1: TỔNG QUAN

1.Lý do chọn đề tài

Ở các lần xây dựng website bán hàng trước đây của chúng em, chúng em đã gặp vấn đề là các loại sản phẩm bị đặt cứng theo từng loại sản phẩm, khó mở rộng các loại sản phẩm.Việc lựa chọn và thực hiện đề tài “xây dựng website bán hàng trực tuyến” là

vì chúng em muống xây dựng ra một website giúp giải quyết vấn đề trên và giúp thuận

tiện mua bán các đồ công nghệ online Giúp người bán có thể dễ dàng quản lý được các loại sản phẩm cũng như các thống kê về thu chi của cửa hàng Giúp người dùng có thể

dễ dàng lựa chọn các món hàng phù hợp và mua các món hàng yêu thích một cách dễ dàng

2.Mục đích

- Xây dựng một website bán hàng trực tuyến

- Áp dụng những kiến thức đã học trên trường vào làm dự án thực tế

- Hiểu rõ hơn quy trình làm việc tạo ra một Sản Phẩm công nghệ thực tế

- Nghiên cứu, sử dụng các công nghệ MERN và ứng dụng mô hình học sâu vào đề tài

3 Đối tượng ứng dụng nhắm đến để phục vụ

Dựa vào nhu cầu mua hàng trực tuyến của người dùng ngày một tăng cao Các loại sản phẩm công nghệ ngày một nhiều hơn Chúng em xây dựng website để hướng tới những người yêu thích và có nhu cầu sử dụng đồ công nghệ Giúp người dùng dễ dàng hơn trong việc lựa chọn

4.Công nghệ sử dụng

- Font-end: React

- Back-end:Nodejs, Express, MongoDB

- Server phụ: Word2vec ,FastAPI, Python

CHƯƠNG 2: CƠ SỞ LÍ THUYẾT

1.Tìm hiểu các về ngôn ngữ lập trình

1.1.HTML

HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn bản được

sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTML được tạo nhờ dùng các thẻ và các phần tử của HTML File được lưu trên máy chủ dịch vụ web với phần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽ đọc tập tin HTML và hiển thị chúng dưới dạng trang web Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác: hình ảnh, media Với các trình duyệt khác nhau đều hiển thị một tập HTML với một kết quả nhất định Các trang HTML được gửi đi qua mạng internet theo giao thức HTTP HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web Để trình bày trang web hiệu quả hơn thì HTML cho phép sử dụng kết hợp với CSS HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web [1] HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổ chức World Wide Web Consortium còn được viết tắc là W3C Trước đó thì HTML xuất bản theo chuẩn của RFC HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của

nó Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã

có thể tạo ra một file chứa HTML Hiện nay, phiên bản mới nhất của HTML là HTML5 với nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt

hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin Một tập tin HTML bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối tượng thao tác văn bản).[1]

1.2.CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, kích thước, màu sắc ) [2]

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là

“.css” Chính vì vậy mà các trang web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn Ngoài ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất

nhiều thời gian và công sức Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó

sẽ giảm được số lượng dòng code mà vẫn đạt được yêu cầu [2]

Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó Do vậy, việc trình bày một nội dung trên các trình duyệt khác nhau là không thống nhất CSS cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

2.Một số Framework hỗ trợ

2.1.Bootstrap

Bootstrap là một Framework có chứa HTML, CSS, JAVASCRIPT, Framework trong tiếng việt có nghĩa là “khuôn khổ” giúp tiết kiệm được thời gian, công sức hơn nữa việc xây dựng hai teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vào

đó là Responsive Responsive sẽ giúp website của bạn hiển thị tương thích với mọi kích thước màn hình nhờ đó bạn sẽ tùy chỉnh hiện thị được nhiều hơn trên các loại màn hình khác nhau

Ưu điểm:

 Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vào website của mình Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diện của mình

 Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diện của chính mình Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột và độ rộng 940px Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này

 Responsive Web Design: Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới

3.Cơ sở dữ liệu NoSQL

Tại sao lại cần phải có NoSQL:

Sở dĩ người ta phát triển NoSQL suất phát từ yêu cầu cần những database có khả năng lưu trữ dữ liệu với lượng cực lớn, truy vấn dữ liệu với tốc độ cao mà không đòi hỏi quá nhiều về năng lực phần cứng cũng như tài nguyên hệ thống và tăng khả năng chịu

lỗi.Đây là những vấn đề mà các relational database không thể giải quyết được

Một số đặc điểm chung:

Có bốn loại chung (loại phổ biến nhất) của cơ sở dữ liệu NoSQL Mỗi loại đều có các thuộc tính và giới hạn riêng Không có một giải pháp duy nhất nào tốt hơn tất cả các giải pháp khác, tuy nhiên có một số cơ sở dữ liệu tốt hơn để giải quyết các vấn đề cụ thể

 High Scalability: Gần như không có một giới hạn cho dữ liệu và người dùng trên

hệ thống

 Atomicity: Độc lập data state trong các operation

 High Availability: Do chấp nhận sự trùng lặp trong lưu trữ nên nếu một node (commodity machine) nào đó bị chết cũng không ảnh hưởng tới toàn bộ hệ thống

 Consistency: chấp nhận tính nhất quán yếu, có thể không thấy ngay được sự thay đổi mặc dù đã cập nhật dữ liệu

 Durability: dữ liệu có thể tồn tại trong bộ nhớ máy tính nhưng đồng thời cũng được lưu trữ lại đĩa cứng

 Deployment Flexibility: việc bổ sung thêm/loại bỏ các node, hệ thống sẽ tự động nhận biết để lưu trữ mà không cần phải can thiệp bằng tay Hệ thống cũng không đòi hỏi cấu hình phần cứng mạnh, đồng nhất

 Modeling flexibility: Key-Value pairs, Hierarchical data (dữ liệu cấu trúc), Graphs

 Query Flexibility: Multi-Gets, Range queries (load một tập giá trị dựa vào một

dãy các khóa)

Phân loại NoSQL database:

Có bốn loại chung (loại phổ biến nhất) của cơ sở dữ liệu NoSQL Mỗi loại đều có các thuộc tính và giới hạn riêng Không có một giải pháp duy nhất nào tốt hơn tất cả các

giải pháp khác, tuy nhiên có một số cơ sở dữ liệu tốt hơn để giải quyết các vấn đề cụ thể

 Sử dụng ngôn ngữ SQL để truy vấn dữ liệu

 Dữ liệu và các mối quan hệ của nó được lưu trữ trong các bảng riêng biệt

 Có tính chặt chẽ

NoSQL

 Không khai báo ngôn ngữ truy vấn dữ liệu

Graph databases

 Dữ liệu phi cấu trúc và không thể đoán trước

 Ưu tiên cho hiệu năng cao, tính sẵn sàng cao và khả năng mở rộng

3.2.Mongodb

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql

và được hàng triệu người sử dụng

MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta

sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

Ưu điểm của mongoDB:

 Ít lược đồ: MongoDB là một cơ sở dữ liệu hướng document trong đó một collection chứa các document khác nhau Số lượng trường, nội dung và kích thước của document có thể khác nhau từ document này sang document khác Dữ liệu không đồng nhất, không ràng buộc

 Trường “_id” luôn được tự động đánh index giúp tốc độ truy vấn thông tin đạt hiệu năng cao nhất.

 Cấu trúc của một đối tượng được biểu diễn rõ ràng dưới dạng JSON

 Hỗ trợ dữ liệu không gian địa lý

 Không joins phức tạp

 Khả năng truy vấn sâu: MongoDB hỗ trợ các truy vấn động trên các documents bằng ngôn ngữ truy vấn hướng document mạnh mẽ tương tự như SQL

 Khả năng điều chỉnh, dễ phân tán

 Dễ mở rộng theo chiều ngang, hiệu năng cao, tính sẵn sàng cao

 Linh hoạt: cập nhật các trường sẽ ít hoặc không ảnh hưởng tới ứng dụng

 Tích hợp dễ dàng với Big Data Hadoop

 Chuyển đổi/ánh xạ các đối tượng trong ứng dụng thành các đối tượng cơ sở dữ liệu không cần thiết

 Phân tán đám mây như AWS, Microsoft, RedHat,dotCloud and SoftLayer,

 Sử dụng bộ nhớ trong để lưu trữ bộ làm việc, cho phép truy cập dữ liệu nhanh hơn Khi truy vấn dữ liệu, bản ghi kết quả được cached trên RAM, giúp lần truy vấn sau nhanh hơn mà không cần đọc lại từ ổ cứng

Nhược điểm của mongoDB:

 MongoDB không có các tính chất ràng buộc mạnh mẽ như trong RDBMS (ACID) nên khi thao tác với MongoDB cần hết sức cẩn thận

 Không hỗ trợ transaction hoặc transaction rất phức tạp

 Không hỗ trợ join nên dễ trùng lặp dữ liệu

 Sử dụng nhiều bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác

về value và key bị lặp lại

 Giới hạn kích thước bản ghi (< 16Mb)

 Khi cập nhật dữ liệu, MongoDB sẽ không cập nhật ngay xuống ổ cứng, sau 60s mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM sang ổ cứng Do vậy, sẽ có khả năng mất dữ liệu khi xảy ra các trường hợp không mong muốn

 Không hỗ trợ function/stored procedure để ràng buộc logic

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

1.Khảo sát

Ngày nay, công nghệ 4.0 phát triển mạnh mẽ Việc sử dụng các hệ thống, website

để mua đồ trực tuyến là rất phổ biến vì vậy nên chúng em làm một website bán các món

đồ điện tử để đáp ứng nhu cầu người tiêu dùng

Tiki

Giới thiệu:

• Tiki là một hệ sinh thái thương mại tất cả trong một, gồm các công ty thành viên như: Ti Ki , TNHH Tikinow Smart Logistics ("TNSL"), TNHH MTV Thương mại Ti Ki ("Tiki Trading")

• Với phương châm hoạt động “Tất cả vì Khách Hàng”, Tiki luôn không ngừng nỗ lực nâng cao chất lượng dịch vụ và sản phẩm, từ đó mang đến trải nghiệm mua sắm trọn vẹn cho Khách Hàng Việt Nam với dịch vụ giao hàng nhanh trong 2 tiếng và ngày hôm sau TikiNOW lần đầu tiên tại Đông Nam Á, cùng cam kết cung cấp hàng chính hãng với chính sách hoàn tiền 111% nếu phát hiện hàng giả, hàng nhái

• Thành lập từ tháng 3/2010, Tiki.vn hiện đang là trang thương mại điện tử lọt top

2 tại Việt Nam và top 6 tại khu vực Đông Nam Á Tiki lọt Top 1 nơi làm việc tốt nhất Việt Nam trong ngành Internet/E-commerce 2018 (Anphabe bình chọn), Top 50 nơi làm việc tốt nhất châu Á 2019 (HR Asia bình chọn)

Tiki là một hệ sinh thái thương mại thành công ở Việt Nam, việc đó chứng tỏ Tiki là một tấm gương tốt để ta có thể noi theo khi bắt đầu làm một trang web về thương mại điện tử nhất là về sản phẩm điện tử Sau đây là bảng nghiên cứu sơ về các tính năng quan trọng dưới cương vị là người mua:

• Tuy nhiên sẽ gây khó chịu nếu không phải món hàng mình thích do choáng quá nhiều chỗ, hoặc gây khó chịu vì thông tin cá nhân bị biết quá nhiều

không cảm thấy tiện lợi và thân thiện

KL: Để người dùng dễ dàng tìm kiếm sản phẩm cần thiết hơn

• Giá tiền và hiển nổi nút để mua

• Các khuyến mãi người mua

có

• Thông tin shop

• So sánh giá với các gian hàng khác

KL: Trực quan, đưa thẳng vào vấn đề về giá tiền cũng như những khuyến mãi kèm theo, chất lượng sản phẩm dựa vào lượt mua và đánh giá, và cuối cùng là hiển thị so sánh giá => tăng khả năng chốt deal

Sản

phẩm

tương tự

• Ngay phía dưới sản phầm

• Thông tin nhanh về tên sản phẩm, lượt mua, đánh giá và giá tiền

KL: Để người mua dễ dàng so sánh giá cả, cũng như cơ hội để người mua thăm các gian hàng khác => tăng cơ hội mua hàng Thông

tin thêm •• Thông tin chi tiết Mô tả sản phẩm

KL: dành cho những người mua có nhu cầu biết thêm về sản phẩm, cách sử dụng, khi chưa nắm rõ thông tin về sản phẩm, hỗ trợ người dùng tự tin hơn khi mua hàng

và cơ hội đến gian hàng khác của người mua

• Nơi chọn khuyễn mãi

• Tổng giá tiền các hàng muốn thanh toán

KL: đơn giản, trực quan, nhưng mỗi lần xem giỏ hàng phải đi sang trang khác Giảm trải nghiệm người dùng

Tài

khoản • Các thông tin cơ bản của người dùng

• SDT để liên hệ khi mua hàng

KL: đơn giản, trực quan

Thông

KL: đơn giản, trực quan

Đơn

KL: đơn giản, trực quan

Sổ địa

KL: giúp mỗi lần mua hàng thì người dùng có thể chọn các địa chỉ trong sổ địa chỉ để mua hàng nhanh hơn => giảm khả năng lưỡng lự khi mua hàng của người dùng

Thương tháng 11/2011 Chúng tôi cam kết 100% sản phẩm trên Điện máy XANH là hàng chính hãng

• Hàng hoá tại Siêu thị Điện máy XANH vô cùng đa dạng, từ các nhóm hàng lớn như Tivi, Tủ Lạnh, Máy Giặt, Máy Lạnh… đến các nhóm hàng Gia dụng như: Nồi Cơm Điện, Bếp Ga, Bếp Điện Từ… Điện máy XANH cũng kinh doanh các mặt hàng như: Điện Thoại, Máy Tính Bảng, Laptop, Phụ Kiện…

Khác với tiki, điện máy xanh buôn bán chính là mặt hàng điện tử, cho nên việc tham khảo điện máy xanh là việc rất cần thiết để có thể cấu tạo được một trang thương mại điện tử chuyên về đồ điện tử đúng mực Sau đây là bảng nghiên cứu sơ về các tính năng quan trọng dưới cương vị là người mua:

dữ liệu cho sản phẩm cũng như hệ thống

Trang Tính

Chính Tìm kiếm

sản phẩm • Gợi ý từ dựa trên những gì đang gõ

• Gợi ý sản phẩm dựa trên những gì đang gõ

KL: Chức năng tìm kiếm cơ bản tương tự như Tiki

• Từ ngữ chào hàng (Deal, Sale, Xịn, )

• Chương trình khuyến mãi hấp dẫn

KL:

hàng nếu gặp phải món hàng mình cần

• Tuy nhiên sẽ gây khó chịu nếu không phải món hàng mình thích

do choáng quá nhiều chỗ, hoặc gây khó chịu

vì thông tin cá nhân bị biết quá nhiều

(** Tương tự như trang tiki, khác biệt là điện máy xanh chỉ chuyên chú về các sản phẩm điện tử)

Danh

• Bên dưới là danh mục nổi bật hiển thị cùng với hình ảnh, có đường dẫn đến trang danh mục lớn hơn

KL: Rất dễ dàng tìm kiếm các mục sản phẩm dựa vào danh mục

Danh

mục Danh mục • Trang danh mục rất chi tiết, bố cục ngắn gọn, dễ hiểu

KL: Rất chi tiết và dễ sử dụng

Bộ lọc • Rất nhiều bộ lọc và chi tiết

• Bộ lọc dính theo khi cuộn trang

KL: Để người dùng tiếp cận với công cụ lọc nhanh hơn, nhiều theo nhiều kiểu hơn Các sản

phẩm •• Tên sản phầm Hình ảnh

• Giá tiền

• Lượt mua

• Đánh giá

• Các ưu đãi khi mua

KL: Vì cùng thuộc điện máy xanh nên các sản phẩm có hình ảnh đồng bộ với nhau,

dễ dàng so sánh vẻ ngoài hơn

Thông tin

thêm •• Thông tin chi tiết Mô tả sản phẩm

• Kèm theo tài liệu gốc về sản phẩm nếu người dùng cần

KL: dành cho những người mua có nhu cầu biết thêm về sản phẩm, cách sử dụng, khi chưa nắm rõ thông tin về sản phẩm, hỗ trợ người dùng

tự tin hơn khi mua hàng

tương tự •• Dưới cùng Thông tin nhanh về tên sản

phẩm, lượt mua, đánh giá

và giá tiền

KL: Vì là của Điện Máy Xanh bán nên không cần so sánh giá với bản thân Vì thông thường, người mua so sánh giá để tìm sản phẩm rẻ hơn, chất lượng hơn hoặc tương đương, và trang web của riêng điện máy xanh bán nên không cần so sảnh như thế, sẽ giảm doanh thu Thảo

luận • Nơi để thảo luận về sản phẩm

KL: Người mua có thể thảo luận với nhau, hoặc nhân viên tư vấn sẽ hỗ trợ giải đáp các thắc mắc, những người vào sau sẽ có thể tìm được câu trả lời cho câu hỏi của mình

• Cho nên việc tra cứu đơn hàng sẽ dùng sdt

KL: Là một cấu trúc khác so với Tiki và Shopee

Đơn hàng • Không có các tag về đơn

đang giao, đã giao,

KL: có thể là do điện máy xanh tự phân phối và có các siêu thị trải rộng trên toàn quốc nên việc vận chuyển sẽ diễn ra trong ngày, tương tác qua SDT giữa người mua và siêu thị gần đó

Tư vấn Các mục

thảo luận • Gồm các bài báo nơi cung cấp kiến thức cũng như

giới thiệu các sản phẩm cho người dùng

• Các câu hỏi đáp, được tư vấn nhiệt tình từ chuyên viên tư vấn, cũng như kho hỏi đáp khổng lồ được tích lũy trước đó cho phép người dùng dễ dàng tự tìm kiếm câu trả lời

Bảng 3.1.2 Khảo sát điện máy xanh

những trải nghiệm dễ dàng, an toàn và nhanh chóng khi mua sắm trực tuyến thông qua hệ thống hỗ trợ thanh toán và vận hành vững mạnh

• Shopee hiện nay đã có mặt tại 7 quốc gia ở khu vực châu Á đó là: Singapore, Malaysia, Indonesia, Đài Loan, Philippines và đặc biệt ngày 8/8/2016, Shopee đã chính thức ra mắt tại Việt Nam

Tương tự như Tiki, Shopee là một trang thương mại điện tử rất thành công ở Việt Nam Shopee bán rất nhiều mặt hàng trong đó có sản phẩm điện tử Sau đây, cùng tìm hiểu các chức năng chính và những cái đặc biệt đã đem đến sự thành công cho Shopee:

Ô Tư Vấn • Hiện phải dưới màn hình

• Khi click sẽ hiện hộp thoại

đễ người dùng bắt đầu được tư vấn

KL: là hình thức tốt để bên chuyên viên tư vấn có thể giải đáp và thuyết phục khách hàng mua hàng

Trang Tính Năng Hình Ảnh Mô Tả

(Deal, Sale, Xịn, )

• Chương trình khuyến mãi hấp dẫn

đầu trang chủ thu hút

sự chú ý của người dùng

KL:

mua hàng nếu gặp phải món hàng mình cần

Tuy nhiên sẽ gây khó chịu nếu không phải món hàng mình thích

do chiếm quá nhiều chỗ Tìm kiếm

sản phẩm • Gợi ý từ khóa theo kí tự đang gõ

• Gợi ý các sản phẩm theo xu hướng

• Gợi ý các từ khóa

đã tìm kiếm

KL: Chức năng tìm kiếm tương tự các website khác

rất chi tiết, bố cục ngắn gọn

• Bên dưới là danh mục nổi bật hiển thị cùng với hình ảnh, có đường dẫn đến trang danh mục lớn hơn

• Hiển thị ở đầu trang giúp người dùng dễ dàng tìm kiếm thứ mình cần

• Hiển thị cùng với các mục khuyến mãi giúp thu hút người dùng

KL: Rất dễ dàng tìm kiếm các mục sản phẩm dựa vào danh mục

Trò

chuyện với

cửa hàng

• Cung cấp chức năng trò chuyện giữa người mua và người bán để dễ dàng tư vấn, hướng dẫn người mua lựa chọn sản phẩm

• Có thể gửi hình ảnh, tin nhắn, chi tiết sản phẩm hay đơn hàng

để người mua trao đổi với người bán

KL: Chức năng tiện lợi cho cả người mua lẫn người bán Có thể tích hợp vào hệ thống

Cửa

hàng Thông tin cửa hàng • Trang hiển thị các thông tin về cửa hàng

• Hiển thị các khuyến mãi riêng của cửa hàng

•

KL: Chức năng rất hiệu quả cho người dùng tham khảo về các sản phẩm

Danh

mục Tìm kiếm theo danh

mục

• Liệt kê các dòng sản phẩm theo danh mục tìm kiếm

KL: Giúp người dùng

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

• Chỉ hiển thị các thông tin về danh mục quan tâm

• Lọc theo nơi bán, đơn

thương hiệu,…

KL: Giúp người dùng

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

• Giá tiền và hiển nổi nút để mua

KL: Trực quan, đưa thẳng vào vấn đề về giá tiền cũng như những khuyến mãi kèm theo, chất lượng sản phẩm dựa vào lượt mua và đánh giá => tăng khả năng chốt deal Cung cấp thêm các thông tin

liên quan đến sản phẩm

để tang độ tin tưởng Đề xuất thêm các sản phẩm liên quan để tăng doanh thu

KL: Cung cấp cho người dùng nhiều hình thức thanh toán để thuận tiện hơn cho người dùng

Tài

khoản Đăng nhập tài khoản • Cho phép người dùng có thể đăng nhập

thông qua email, facebook, số điện thoại, giúp người dùng dễ dàng sử dụng

hệ thống

•

KL: Giúp người dùng

dễ dàng tìm kiếm các cửa hàng Đây là một tính năng hay của hệ thống

• Trang web được thiết kế rất dễ sử dụng và tiện lợi

FPT Shop là một hệ thống chuyên bán sản phẩm công nghệ nên ta có thể học hỏi được rất nhiều để xây dựng một website bán hàng công nghệ Sau đây, hãy cùng tìm hiểu các tính năng nổi bật của FPT Shop:

Trang Tính Năng Hình Ảnh Mô Tả

Chính Tìm kiếm

sản phẩm • Gợi ý từ dựa trên những gì đang gõ

• Gợi ý các từ khóa đang

là xu hướng tìm kiếm

• Hiển thị lịch sử tìm kiếm

KL: Chức năng tìm kiếm

cơ bản tương tự các website khác

(Deal, Sale, Xịn, )

• Chương trình khuyến mãi hấp dẫn

KL:

• Kích cầu người mua hàng nếu gặp phải món hàng mình cần

khó chịu nếu không phải món hàng mình thích do chiếm quá nhiều chỗ

Danh mục • Danh mục trên cùng rất

chi tiết, bố cục ngắn gọn

• Bên dưới là danh mục nổi bật hiển thị cùng với hình ảnh, có đường dẫn đến trang danh mục lớn hơn

giúp người dùng dễ dàng tìm kiếm thứ mình cần

KL: Rất dễ dàng tìm kiếm các mục sản phẩm dựa vào danh mục

Tin tức Tin tức • Trang hiển thị các tin

tức mới về sản phẩm công nghệ, khuyến mãi, đánh giá,…

KL: Chức năng rất hiệu quả cho người dùng tham khảo về các sản phẩm Danh mục

các tin tức • Phân loại tin tức để người dùng dễ dàng tìm

kiếm thông tin cần thiết

• Đa dạng các chủ đề để đáp ứng số lượng thông tin cho người dùng

KL: Để người dùng dễ dàng tìm kiếm thông tin cần thiết

• Hiển thị các thông tin liên quan đến danh mục quan tâm như sản phẩm, khuyến mãi

KL: Giúp người dùng dễ dàng tìm kiếm sản phẩm

• Chỉ hiển thị các thông tin về danh mục quan tâm

KL: Giúp người dùng dễ dàng tìm kiếm sản phẩm