phân tích thiết kế và xây dựng website bán laptop

So với cách mua sắm truyền thống thì việc sử dụng kênh mua bán trực tiếp cho phép khách hàng có thể mua sắm mọi lúc mọi nơi giúp tiết kiệm thời gian; ngoài ra việc thanh toán và quản lý

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

GVHD: PGS.TS HOÀNG VĂN DŨNG SVTH: NGUYỄN VĂN HOÀNG

PHẠM ĐỨC HUẤN ĐỒ ÁN TỐT NGHIỆP

NGÀNH CÔNG NGHỆ THÔNG TIN

PHÂN TÍCH, THIẾT KẾ VÀ XÂY DỰNG

WEBSITE BÁN LAPTOP

S K L 0 1 2 2 3 5

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

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

-****** -

KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: PHÂN TÍCH, THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LAPTOP

GVHD : PGS TS Hoàng Văn Dũng Sinh viên thực hiện :

Nguyễn Văn Hoàng 19110209

Phạm Đức Huấn 19110211

Hồ Chí Minh, ngày 4 tháng 1 năm 2024

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP

Họ và tên sinh viên: Nguyễn Văn Hoàng MSSV: 19110209

Ngành: Công nghệ thông tin Giảng viên hướng dẫn: PGS TS Hoàng Văn Dũng Ngày nhận đề tài: 29/08/2023 Ngày nộp đề tài: 29/12/2023 1 Tên đề tài: Phân tích, thiết kế và xây dựng website bán laptop

2 Các số liệu, tài liệu ban đầu: ReactJS, NodeJS, ExpressJS, JSON Web Token (JWT) 3 Nội dung thực hiện đề tài: xây dựng website bán laptop

4 Sản phẩm: Website bán laptop HC.VN

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

CỘNG HÒA 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ẢNG VIÊN HƯỚNG DẪN

Họ và tên sinh viên: Nguyễn Văn Hoàng MSSV: 19110209

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

Tên đề tài: Phân tích, thiết kế và xây dựng website bán laptop Họ và tên Giảng viên phản biện: PGS TS Hoàng Văn Dũng

NHẬN XÉT

1 Nội dung của sản phẩm 2 Ưu điểm

3 Khuyết điểm

4 Chấp thuận đề tài (Chấp thuận hoặc từ chối)?

5 Đánh giá loại: 6 Điểm:……….(bằng chữ: )

Tp Hồ Chí Minh, ngày …., tháng …., năm 2023

GIẢNG VIÊN HƯỚNG DẪN

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

CỘNG HÒA 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ẢNG VIÊN PHẢN BIỆN

Họ và tên sinh viên: Nguyễn Văn Hoàng MSSV: 19110209

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

Tên đề tài: Phân tích, thiết kế và xây dựng website bán laptop Họ và tên Giảng viên phản biện: ThS Mai Anh Thơ

NHẬN XÉT

1 Nội dung của sản phẩm 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 2023

GIẢNG VIÊN PHẢN BIỆN

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

LỜI CẢM ƠN

Lời đầu tiên, nhóm xin phép được gửi lời cảm ơn chân thành đến với Khoa Đào tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được trau dồi, học tập và phát triển nền tảng kiến thức vững chắc để thực hiện đề tài này

Bên cạnh đó, nhóm chúng em xin gửi đến thầy Hoàng Văn Dũng lời cảm ơn chân thành và sâu sắc nhất Thầy đã tận tâm hướng dẫn nhiệt tình và đưa ra những góp ý quý báu cho nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nghiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các công ty Tập thể các thầy cô Khoa Đào Tạo Chất Lượng Cao và đặc biệt thầy Hoàng Văn Dũng đã đem đến cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã khích lệ và thôi thúc chúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng quý báu cho chúng em trước khi bước ra một cuộc sống mới

Đề tài và bài báo cáo được chúng em thực hiện trong khoảng thời gian ngắn, với những kiến thức còn hạn chế cùng nhiều hạn chế khác về mặt kỹ thuật và kinh nghiệm trong việc thực hiện một dự án phần mềm Do đó, trong quá trình làm nên đề tài có những thiếu sót là điều không thể tránh khỏi nên chúng em rất mong nhận được những ý kiến đóng góp quý báu của các quý thầy cô để kiến thức của chúng em được hoàn thiện hơn và chúng em có thể làm tốt hơn nữa trong những lần sau

Cuối lời, chúng em kính chúc quý thầy, quý cô luôn dồi dào sức khỏe và thành công hơn nữa trong sự nghiệp trồng người Chúng em xin chân thành cảm ơn!

Nhóm thực hiện Nguyễn Văn Hoàng –19110209 Phạm Đức Huấn – 19110211

KẾ HOẠCH THỰC HIỆN

Tuần Ngày Nhiệm vụ (Công việc dự kiến) Người

chịu trách nhiệm

Sản phẩm Kết quả

thực tế

1+2 29/8 – 11/9

- Tìm hiểu công nghệ sử dụng - Khảo sát, đánh giá

- Phân tích yêu cầu và tổng quan đề tài

Hoàng + Huấn

- File Doc chứa các nội dung sau: Mô tả đề tài, Tổng quan đề tài,…

Hoàn thành

3 + 4 12/9 – 25/9

- Thiết kế database - Thiết kế lược đồ usecase - Thiết kế lược đồ sequence diagram - Thiết kế class diagram,

collaboration

Hoàng + Huấn

- File Doc chứa hình ảnh của các lược đồ

Hoàn thành

5 + 6

26/9 – 9/10

- Thiết kế giao diện cơ bản cho ứng dụng

- Thiết kế các API cần thiết cho hệ thống

- Dùng Postman test API

Hoàng + Huấn

- Giao diện ban đầu để thực hiện một số chức năng cơ bản

Hoàn thành

7 + 8

10/10 – 23/10

- Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API của hệ thống

- Thêm phân trang vào các API get data

Hoàng + Huấn

- Website có thể phân quyền và xác thực người dùng

Hoàn thành

9+10 24/10 – 6/11

- Xây dựng chức năng mua hàng và thanh toán

- Xây dựng chức năng quản lý thông tin người dùng, đơn hàng, địa chỉ nhận hàng, …

Hoàng + Huấn

- Website có thêm chức năng thêm vào giỏ hàng, mua hàng và quản lý thông tin cho người dùng

Hoàn thành

11+1 2

7/11 – 20/11

- Hoàn thiện chức năng tìm kiếm nâng cao, so sánh sản phẩm, feedback và comment

Hoàng + Huấn

- Website có thêm chức năng tìm kiếm nâng cao các thuộc tính như: tên, khoảng giá và các cấu hình khác

- Chức năng comment cho người dùng và admin; feedback khi người dùng mua hàng thành công

Hoàn thành

- Chức năng so sánh 2 sản phẩm, highlight các thuộc tính tối ưu hơn

13+1 4

21/11 – 4/12

- Xây dựng Website cho admin - Test lại website và fix các bug gặp

phải

Hoàng + Huấn

- Website admin (thêm, sửa, xóa) có thể quản lý người dùng, sản phẩm, feedback, nhập hàng và đơn bán hàng, thống kê,…

Hoàn thành

15 5/12 – 29/12

- Hoàn thiện báo cáo

Hoàng + Huấn

- File Doc chứa toàn bộ nội dung của bài báo cáo

Hoàn thành

Bảng 1 Bảng kế hoạch thực hiện

MỤC LỤC

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

DANH MỤC HÌNH ẢNH

Hình 4 Cấu trúc một API được xây dựng với ExpressJS 20

Hình 14 Usecase tổng quan website phía quản trị viên 44

Hình 16 Sequence “Đăng nhập với tài khoản Google” 78

Hình 18 Sequence “Chỉnh sửa thông tin tài khoản” 80

Hình 28 Sequence “Cập nhật số lượng sản phẩm trong giỏ hàng” 85

Hình 35 Sequence “So sánh 2 sản phẩm” 88

Hình 47 Sequence “Cập nhật thông tin người dùng” 95

Hình 69 Giao diện trang “Quên mật khẩu” 114

Hình 72 Giao diện trang “Quản lý thông tin cá nhân” 117

Hình 76 Giao diện trang “Thêm địa chỉ giao hàng” 123

Hình 79 Giao diện chức năng “Tìm kiếm sản phẩm” 127 Hình 80 Giao diện chức năng “So sánh 2 sản phẩm” 128 Hình 81 Giao diện trang “Lọc sản phẩm nâng cao” 129

Hình 88 Giao diện chức năng “Chọn phương thức thanh toán” 137 Hình 89 Giao diện sau khi mua hàng bằng hình thức COD thành công 137 Hình 90 Giao diện khi chọn phương thức thanh toán qua Paypal 138

Hình 98 Giao diện chức năng “Cập nhật thông tin người dùng” 145

Hình 103 Giao diện chức năng “Cập nhật đánh giá” 150

Hình 105 Giao diện chức năng “Cập nhật nhãn hàng” 152

DANH MỤC BẢNG BIỂU

Bảng 5 Bảng mô tả Use case “Đăng nhập với tài khoản Google” 46 Bảng 6 Bảng mô tả Use case “Đăng nhập với tài khoản đã đăng ký trên hệ thống” 47

Bảng 10 Bảng mô tả Use case “Cập nhật thông tin cá nhân” 50 Bảng 11 Bảng mô tả Use case “Thêm địa chỉ giao hàng” 51 Bảng 12 Bảng mô tả Use case “Cập nhật địa chỉ giao hàng” 51 Bảng 13 Bảng mô tả Use case “Xóa địa chỉ giao hàng” 52

Bảng 15 Bảng mô tả Use case “Xem danh sách sản phẩm” 53 Bảng 16 Bảng mô tả Use case “Xem chi tiết sản phẩm” 54 Bảng 17 Bảng mô tả Use case “Thêm sản phẩm vào giỏ hàng” 55 Bảng 18 Bảng mô tả Use case “Chỉnh sửa số lượng sản phẩm trong giỏ hàng” 55 Bảng 19 Bảng mô tả Use case “Xóa sản phẩm trong giỏ hàng” 56 Bảng 20 Bảng mô tả Use case “Lọc sản phẩm nâng cao” 57 Bảng 21 Bảng mô tả Use case “Thanh toán đơn hàng” 57 Bảng 22 Bảng mô tả Use case “Tìm kiếm sản phẩm theo từ khóa” 58

Bảng 24 Bảng mô tả Use case “Chỉnh sửa đánh giá sản phẩm” 60 Bảng 25 Bảng mô tả Use case “Xóa đánh giá sản phẩm” 60 Bảng 26 Bảng mô tả Use case “So sánh 2 sản phẩm” 61 Bảng 27 Bảng mô tả Use case “Bình luận tại trang chi tiết sản phẩm” 62 Bảng 28 Bảng mô tả Use case “Chỉnh sửa bình luận” 62

Bảng 30 Bảng mô tả Use case “Thích/Bỏ thích bình luận” 64

Bảng 33 Bảng mô tả Use case “Quản lý đơn hàng” 66

Bảng 36 Bảng mô tả Use case “Sửa tên khách hàng” 68 Bảng 37 Bảng mô tả Use case “Sửa trạng thái tài khoản” 69 Bảng 38 Bảng mô tả Use case “Cập nhật trạng thái đơn hàng” 69

Bảng 40 Bảng mô tả Use case “Cập nhật thông tin sản phẩm” 71

Bảng 42 Bảng mô tả Use case “Chỉnh sửa đánh giá phía khách hàng” 72 Bảng 43 Bảng mô tả Use case “Xóa đánh giá của khách hàng” 73

Bảng 45 Bảng mô tả Use case “Chỉnh sửa thương hiệu” 74

Bảng 47 Bảng mô tả Use case “Thêm đơn nhập hàng” 75 Bảng 48 Bảng mô tả Use case “Chỉnh sửa đơn nhập hàng” 76

Bảng 60 Chi tiết giao diện trang “Xác nhận tài khoản” 113 Bảng 61 Chi tiết giao diện trang “Quên mật khẩu” 114 Bảng 62 Chi tiết giao diện trang “Nhập mật khẩu mới” 115

Bảng 64 Chi tiết giao diện trang “Quản lý thông tin cá nhân” 118 Bảng 65 Chi tiết giao diện trang “Quản lý đơn hàng” 120 Bảng 66 Chi tiết giao diện trang “Chi tiết đơn hàng” 121

Bảng 67 Chi tiết giao diện trang “Quản lý sổ địa chỉ” 122 Bảng 68 Chi tiết chức năng thêm địa chỉ giao hàng 123 Bảng 69 Chi tiết giao diện trang “Chat với admin” 125 Bảng 70 Chi tiết giao diện trang “Đổi mật khẩu” 126 Bảng 71 Chi tiết giao diện chức năng “Tìm kiếm sản phẩm” 127 Bảng 72 Chi tiết chức năng “So sánh 2 sản phẩm” 129 Bảng 73 Chi tiết giao diện trang “Lọc nâng cao” 130 Bảng 74 Chi tiết giao diện trang “Chi tiết sản phẩm” 131 Bảng 75 Chi tiết giao diện trang “Chi tiết giỏ hàng” 132

Bảng 77 Chi tiết giao diện trang “Đánh giá sản phẩm” 134

Bảng 80 Chi tiết chức năng “Chọn phương thức thanh toán” 137 Bảng 81 Chi tiết giao diện sau khi mua hàng bằng COD thành công 137 Bảng 82 Chi tiết giao diện khi chọn phương thức thanh toán bằng Paypal 138 Bảng 83 Chi tiết giao diện trang “Đăng nhập phía admin” 141

Bảng 85 Chi tiết các thông tin hiển thị trên Dashboard 143

Bảng 87 Chi tiết giao diện trang “Quản lý người dùng” 145 Bảng 88 Chi tiết giao diện chức năng “Chỉnh sửa thông tin người dùng” 146 Bảng 89 Chi tiết giao diện trang “Quản lý đơn hàng” 147 Bảng 90 Chi tiết giao diện trang “Quản lý sản phẩm” 148

Bảng 92 Chi tiết giao diện trang “Quản lý đánh giá” 150

Bảng 94 Chi tiết giao diện trang “Quản lý nhãn hàng” 152 Bảng 95 Chi tiết chức năng “Cập nhật nhãn hàng” 152 Bảng 96 Chi tiết giao diện trang “Quản lý đơn nhập” 154 Bảng 97 Chi tiết giao diện trang “Chi tiết đơn nhập” 154 Bảng 98 Chi tiết giao diện chức năng “Thêm đơn nhập” 155

PHẦN MỞ ĐẦU 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong bối cảnh công nghệ thông tin và kỹ thuật ngày càng phát triển, cũng như sau ảnh hưởng nghiêm trọng của đại dịch COVID-19 lên toàn bộ đời sống xã hội hiện nay, việc chuyển đổi số đang trở nên phổ biến và là ưu tiên hàng đầu trong tất cả các lĩnh vực đặc biệt là lĩnh vực bán hàng online

Vì thế, việc chuyển đổi từ bán hàng truyền thống sang bán hàng online là điều không thể thiếu và hiện tại nó là xu hướng của thế giới và đem lại lợi ích to lớn cho các cửa hàng bán lẻ So với cách mua sắm truyền thống thì việc sử dụng kênh mua bán trực tiếp cho phép khách hàng có thể mua sắm mọi lúc mọi nơi giúp tiết kiệm thời gian; ngoài ra việc thanh toán và quản lý đơn hàng cho người dùng cũng dễ dàng hơn,…

Nhận thức được thực tiễn ấy và với mong muốn đáp ứng được nhu cầu thị trường và quan trọng nhất là tiết kiệm được thời gian cũng như đem đến nhiều sự lựa chọn hơn cho người dùng, nhóm chúng em quyết định chọn và phát triển chủ đề tiểu luận chuyên ngành “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LAPTOP”

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua bán online hiện nay và các đặc điểm nổi bật từ các sàn thương mại điện tử đã có sẵn Bên cạnh đó là các công nghệ áp dụng để hiện thực hoá sản phẩm Cụ thể như sau:

Tập trung nghiên cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệ thống các APIs hỗ trợ truy xuất và thao tác với dữ liệu một cách chính xác và nhanh chóng nhất

- Sử dụng cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dữ liệu trong hệ thống

- Về giao diện cho người dùng trải nghiệm nhóm chúng em tiến hành nghiên cứu Framework ReactJS, Redux và một số thư viện được hỗ trợ cho ReactJS để xây dựng và xử lý giao diện và cho

người dùng sử dụng trên website - Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json

Web Token và hash password làm bảo mật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soát thông qua Token

3 PHẠM VI NGHIÊN CỨU

Website chủ yếu tập trung đi vào việc xử lý các nghiệp vụ cơ bản của một website bán hàng online như: xem danh sách các sản phẩm , thêm sản phẩm vào giỏ hàng cá nhân, tương tác, bình luận và đánh giá trên từng sản phẩm có trên hệ thống, quản lý trạng thái các đơn hàng, quản lý thông tin cá nhân, so sánh số liệu giữa hai sản phẩm, thanh toán, tìm kiếm và lọc sản phẩm nâng cao, … Về phần lõi xử lý, xây dựng đầy đủ các APIs phục vụ phần hiển thị cho người dùng cuối

4 MỤC TIÊU CỦA ĐỀ TÀI

Mục tiêu chính của đề tài là xây dựng một website bán laptop trực tuyến hiệu quả, đáp ứng nhu cầu mua sắm của người tiêu dùng và mang lại giá trị kinh doanh cho cửa hàng Tạo ra một trải nghiệm mua sắm trực tuyến tốt cho khách hàng, đảm bảo tính bảo mật và an toàn và cung cấp đầy đủ thông tin về sản phẩm giúp khách hàng dễ dàng lựa chọn sản phẩm phù hợp

- Các mục tiêu cụ thể bao gồm: + Khảo sát phân tích các website bán laptop hiện có, xác định những yếu tố cần có của một website kinh doanh laptop trực tuyến

+ Tạo ra một hệ thống quản lý khách hàng, doanh thu, sản phẩm, đơn hàng, cho người quản trị dễ dàng quản lý Đảm bảo tính chính xác của những đơn hàng cũng như các thông tin của sản phẩm, doanh thu, khách hàng,

+ Xây dựng website với giao diện đơn giản, dễ sử dụng và thân thiện với khách hàng

+ Cung cấp thông tin đầy đủ và chi tiết về các sản phẩm laptop bao gồm mô tả sản phẩm, hình ảnh, kích cỡ, giá cả với số lượng sẵn có để khách hàng có thể đặt mua trực tuyến hoặc tham khảo trước khi đến cửa hàng mua sắm

+ Cung cấp thông tin chi tiết cho khách hàng về những đơn hàng họ đã đặt

+ Đảm bảo tính bảo mật và an toàn cho khách hàng khi mua hàng trực

tiện lợi - Để thực hiện những mục tiêu trên, nhóm đã sử dụng những công

nghệ: ReactJS, NodeJS, ExpressJS, JSON Web Token (JWT)

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay Đồng thời, nâng cao kỹ năng làm việc nhóm và áp dụng các kiến thức này vào thực tiễn

Khi đề tài nhóm chúng em được áp dụng vào thực tế, việc mua bán online các sản phẩm laptop sẽ thuận tiện và dễ dàng hơn; đem lại các lợi ích to lớn cho các cửa hàng bán lẻ trên toàn thế giới Thay vì phải sắp xếp thời gian đi đến các của hàng để lựa chọn sản phẩm thì người dùng chỉ cần truy cập vào website, giải quyết được các vấn đề về khoảng cách địa lý cũng như thời gian

diện.- Thiết kế cơ sở dữ liệu và kiểm thử

Hoàn thành tốt

Nguyễn Văn Hoàng

- Thiết kế cơ sở dữ liệu - Xử lý Back – End - Viết giao diện bên Admin - Vẽ Diagram

- Viết báo cáo phần Back-End và các phần còn lại

Hoàn thành tốt

Bảng 2 Phân công công việc

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

1.1 KIẾN TRÚC CHUNG CỦA HỆ THỐNG

1.2 CƠ SỞ LÝ THUYẾT

1.2.1 Giới thiệu về MERN Stack.

MERN Stack là một bộ công nghệ phát triển ứng dụng web bao gồm MongoDB (Cơ sở dữ liệu), Express.js (Framework backend), React (Thư viện frontend) và Node.js (Môi trường chạy mã backend) Sự kết hợp của các công nghệ này tạo nên một kiến trúc phát triển toàn diện cho việc xây dựng ứng dụng web hiệu quả

1.2.2 Áp dụng vào hệ thống.

Hệ thống xây dựng trên MERN Stack tuân theo mô hình Client-Server, trong đó các khách hàng truy cập vào giao diện người dùng (client) để tương tác với hệ thống

Client sử dụng React để xây dựng giao diện người dùng (UI) cho cửa hàng trực tuyến, hiển thị sản phẩm, giỏ hàng, thanh toán và các chức năng khác

Server sử dụng Express.js và Node.js để xử lý các yêu cầu từ client và tương tác với cơ sở dữ liệu MongoDB Ngoài ra, server còn xử lý các yêu cầu liên quan đến quản lý đơn hàng, quản lý người dùng, xử lý thanh toán và các tính năng phục vụ cho phía quản trị

- Cơ sở dữ liệu: MongoDB được sử dụng làm cơ sở dữ liệu cho hệ thống để lưu trữ thông tin về sản phẩm, danh mục, khách hàng, đơn hàng và các thông tin khác liên quan MongoDB cho phép lưu trữ dữ liệu dưới dạng tài liệu JSON linh hoạt, giúp quản lý thông tin sản phẩm và dữ liệu liên quan một cách hiệu quả

- Backend: Node.js là môi trường chạy mã JavaScript trên máy chủ, cho phép viết mã backend bằng JavaScript và xử lý các yêu cầu từ client thông qua Express.js

Express.js và Node.js cung cấp nền tảng backend cho hệ thống Express.js được sử dụng để xây dựng các API để xử lý yêu cầu từ client như đăng nhập, đăng ký, xem sản phẩm, thêm vào giỏ hàng, thanh toán và quản lý đơn hàng - Frontend:

React là thư viện JavaScript phát triển giao diện người dùng (UI) cho hệ thống React cho phép xây dựng các thành phần UI tái sử dụng như danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán, đăng nhập và các chức năng khác

React giúp tạo ra giao diện người dùng tương tác mượt mà và quản lý trạng thái ứng dụng một cách hiệu quả thông qua bộ thư viện redux

- Giao tiếp giữa các thành phần: Giao tiếp giữa client và server được thực hiện thông qua các API RESTful

Client gửi yêu cầu HTTP (GET, POST, PUT, DELETE) đến server thông qua các endpoint đã được định nghĩa trong Express.js

Server xử lý yêu cầu, truy xuất dữ liệu từ cơ sở dữ liệu MongoDB và trả về kết quả cho client dưới dạng JSON

- Tích hợp thanh toán: Để xử lý thanh toán trong hệ thống, nhóm sẽ tích hợp các cổng thanh toán phổ biến như PayPal và VNPAY

Khi khách hàng thực hiện thanh toán, client gửi yêu cầu thanh toán đến server Server sẽ gọi API của cổng thanh toán để xử lý thanh toán và nhận kết quả trả về Sau đó, server cập nhật trạng thái thanh toán và tạo đơn hàng trong cơ sở dữ liệu - Web socket:

Socket.io cho phép truyền dữ liệu và sự kiện giữa client và server trong thời gian thực giúp cập nhật dữ liệu trực tiếp mà không cần reload trang

Khi người dùng truy cập vào hệ thống, server thiết lập một kết nối socket với client bằng cách sử dụng phương thức connect Khi kết nối thành công, server và client có thể giao tiếp theo hai chiều

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

o Quản lý thông tin cá nhân o Trang chi tiết sản phẩm laptop thể hiện đầy đủ các thông

số kỹ thuật, một bài viết review sản phẩm, o Hỗ trợ thanh toán qua 3 hình thức: thanh toán khi nhận

hàng, thành toán qua VNPAY, thanh toán trả góp - Ưu điểm:

o Bố cục giao diện rõ ràng, dễ thao tác cho người mới sử dụng o Bộ lọc đầy đủ với các nhu cầu mà người dùng muốn tìm kiếm o Có responsive thích hợp với mọi màn hình khác nhau

o Hỗ trợ việc đăng nhập vào hệ thống với nhiều phương thức khác nhau

o Hỗ trợ việc thanh toán đa dạng các phương thức - Nhược điểm:

o Chưa có phần đánh giá và nhận xét cho từng loại sản phẩm o Chưa có phần hỏi đáp với quản trị viên cho từng loại sản phẩm o Có một số lỗi khi khi thực hiện việc tìm kiếm và lọc sản phẩm

o Hỗ trợ thanh toán với 3 hình thức khác nhau: tiền mặt, thanh toán qua thẻ ngân hàng, trả góp

- Ưu điểm:

o Bố cục rõ ràng, dễ thao tác cho người mới sử dụng o Giao diện sáng – đẹp

o Dễ sử dụng o Trên mỗi card sản phẩm đều thể hiện rõ các thông số chính

của sản phẩm và các voucher khuyến mãi của cửa hàng Có responsive thích ứng với mọi thiết bị màn hình khác

nhau o Hỗ trợ nhiều hình thức thanh toán khác nhau - Nhược điểm:

o Hỗ trợ duy nhất một phương thức đăng nhập qua số điện thoại

o Bình luận về sản phẩm o Tìm kiếm và lọc nâng cao o Thêm, sửa, xóa giỏ hàng o Hỗ trợ thanh toán bằng tiền mặt hoặc là qua paypal - Ưu điểm:

o Giao diện đơn giản dễ sử dụng o Hỗ trợ nhiều phương thức đăng nhập khác nhau o Mỗi card sản phẩm đều thể hiện rõ những thông số kỹ

thuật chính, số lượng review đánh giá về sản phẩm đó - Nhược điểm:

o Tốc độ load web chậm o Nên hỗ trợ thêm nhiều hình thức thanh toán khác nữa o Nên hỗ trợ dịch qua nhiều ngôn ngữ khác

o Bình luận về sản phẩm o Tìm kiếm và lọc nâng cao o Thêm, sửa, xóa giỏ hàng và thanh toán - Ưu điểm:

o Giao diện tối giản – sáng – đẹp – dễ sử dụng o Hỗ trợ đa ngôn ngữ

o Bộ lọc sản phẩm đa dạng o Hỗ trợ trên mọi thiết bị màn hình khác nhau o Mỗi card sản phẩm đều thể hiện rõ những thông số kỹ

thuật chính, số lượng review đánh giá về sản phẩm đó o Tốc độ load web nhanh

- Nhược điểm:

2.2 XÁC ĐỊNH YÊU CẦU

2.2.1 Các tác nhân của hệ thống

* Web bán laptop gồm 3 tác nhân chính là: khách hàng (thành viên của hệ thống), quản trị viên ( người quản lý hệ thống), khách vãng lai ( chưa là thành viên của hệ thống)

● Khách vãng lai: có quyền và chức năng sau: đăng ký, xác thực tài khoản, so sánh thông số kỹ thuật giữa 2 sản phẩm, xem danh sách sản phẩm, xem chi tiết thông tin sản phẩm, thêm, sửa, xóa giỏ hàng, tìm kiếm từ khóa và lọc nâng cao sản phẩm, tải bản báo giá

● Khách hàng: có quyền và chức năng sau:đăng nhập, quên mật khẩu, xem danh sách sản phẩm, xem chi tiết thông tin của sản phẩm, đánh giá và nhận xét sản phẩm, thêm, sửa, xóa sản phẩm vào giỏ hàng, tìm kiếm và lọc sản phẩm theo từ khóa, thanh toán, cập nhật thông tin cá nhân, quản lý đơn hàng, chat với Quản trị viên, đổi mật khẩu, so sánh thông số giữa 2 sản phẩm với nhau, bình luận sản phẩm, tài bản báo giá

● Quản trị viên: có quyền và chức năng sau: đăng nhập, quản lý khách hàng, xem được thống kế doanh thu, quản lý sản phẩm, quản lý nguồn hàng, quản lý đơn hàng khách hàng, quản lý đánh giá và nhận xét của khách hàng

2.2.2 Yêu cầu chức năng

STT Yêu cầu Loại yêu

cầu Ghi chú

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

đăng ký hoặc thông qua tài khoản của google để vào hệ thống

Lưu trữ - Người dùng: đã có tài khoản hệ

thống hoặc tài khoản google - Người dùng cần nhập email, mật khẩu

2 Khách hàng đăng ký tài khoản

để truy cập vào hệ thống Lưu trữ

- Người dùng: khách vãng lai - Người dùng cần nhập họ tên, email, mật khẩu

Hình SEQ Hình \* ARABIC 11 Kiến trúc chi tiết của hệ thống sử dụng MERN Stack

3 Người dùng cần phải xác thực

tài khoản đã đăng ký để mới chính thức là thành viên của hệ thống

Lưu trữ - Người dùng: khách vãng lai

- Người dùng vào email đã đăng ký trước đó để lấy mã xác nhận Hệ thống sẽ gửi một mã xác nhận qua email yêu cầu khách vãng lai phải xác nhận

4 Người dùng có thể xem và cập

nhật thông tin cá nhân

Lưu trữ và kết xuất

- Người dùng: khách hàng - Người dùng nhập thông tin muốn cập nhật và nhận nút cập nhật thông tin

5 Người dùng có thể thêm, sửa,

xóa, đặt làm mặc định địa chỉ và thông tin giao nhận hàng

Lưu trữ và kết xuất

- Người dùng: khách hàng - Người dùng nhấn thêm địa chỉ để thêm vào thông tin người nhận - Mỗi cái item địa chỉ khi người dùng nhấn mặc định Hệ thống sẽ lấy địa chỉ đó làm mặc định - Mỗi cái item địa chỉ khi người dùng nhấn chỉnh sửa thì người dùng có thể chỉnh sửa địa chỉ ở item đó - Mỗi cái item địa chỉ khi người dùng nhấn xóa thì địa chỉ của item đó sẽ bị xóa

6 Người dùng có thể xem các

trạng thái đơn hàng và có thể hủy đơn hàng

Lưu trữ và kết xuất

- Người dùng: khách hàng - Hủy đơn hàng khi đơn hàng đó đang ở trạng thái chờ xử lý

7 Người dùng có thể chat với

Admin như message

Lưu trữ và kết xuất

- Người dùng: khách hàng - Người dùng sẽ chat được real time có các chức năng trả lời tin nhắn, xóa tin nhắn, thả icon, …

8 Người dùng có thể đổi lại mật

khẩu Lưu trữ

- Người dùng: khách hàng - Người dùng có thể cập nhật lại mật khẩu mới Yêu cầu người dùng

phải nhập chính xác mật khẩu hiện tại mới đổi được

9 Người dùng có thể lấy lại mật

khẩu khi quên mật khẩu

Lưu trữ - Người dùng: khách hàng

- Người dùng có thể lấy lại mật khẩu Yêu cầu người dùng nhập Email đã đăng ký hệ thống Hệ thống sẽ gửi một mã xác nhận qua Email đó và yêu cầu người dùng phải xác nhận Xác nhận thành công người dùng sẽ được chuyển sang trang đổi mật khẩu mới

10 Người dùng có thể đăng xuất

12 Người dùng có thể xem trang

chi tiết sản phẩm

Kết xuất - Người dùng: khách hàng, khách

vãng lai - Hiện thông tin chi tiết về sản phẩm đó

13 Người dùng có thể tìm kiếm

và lọc sản phẩm nâng cao

Tìm kiếm

- Người dùng: khách vãng lai, khách hàng

- Người dùng có thể tìm kiếm bằng từ khóa

- Người dùng có thể lọc theo giá, theo thương hiệu, màu sắc, nhu cầu, ram

14 Người dùng có thể đưa ra

đánh giá và nhận xét sản phẩm

Lưu trữ và kết xuất

- Người dùng: khách hàng - Người dùng phải là người mua sản phẩm đó rồi mới được đánh giá - Người dùng sẽ đánh giá qua sao và nhập lời nhận xét về sản phẩm đó

15 Người dùng có thể đưa ra bình

luận trả lời câu hỏi với nhau Lưu trữ và kết

xuất

- Người dùng: khách hàng - Người dùng phải đăng nhập mới được bình luận

- Người dùng có thể trả lời bình luận với nhau

- Người dùng có thể chỉnh sửa hoặc xóa bình luận của chính mình - Người dùng có thể like, unlike đối với tất cả bình luận

16 Người dùng có thể thêm, sửa,

xóa giỏ hàng

Lưu trữ và kết xuất

- Người dùng; khách hàng, khách vãng lai

- Người dùng có thể thêm sản phẩm vào giỏ hàng Nếu sản phẩm còn hàng

- Người dùng có thể chỉnh sửa số lượng sản phẩm trong giỏ hàng - Người dùng có thể xóa sản phẩm đó ra khỏi giỏ hàng

17 Người dùng có thể in, lưu file

Lưu trữ, tính toán, kết xuất

- Người dùng: khách hàng

20 Người dùng có thể xem được

thống kê số tiền đã chi ra, thu vào, số lượng các đơn hàng, số lượng người dùng, sản phẩm được mua nhiều nhất, sản phẩm tồn kho theo ngày, tháng, năm

Kết xuất, tính toán

- Người dùng: quản trị viên

21 Người dùng có thể xem danh

sách khách hàng và có thể sửa tên, sửa trạng thái của khách hàng

Kết xuất và lưu trữ

- Người dùng: quản trị viên - Người dùng nhấn vào biểu tượng edit để sửa tên khách hàng

- Người dùng nhấn vào biểu tượng khóa (mở khóa) để chỉnh sửa trạng thái khách hàng

22 Người dùng có thể xem và

chỉnh sửa các trạng thái đơn hàng của khách hàng

Kết xuất và lưu trữ

- Người dùng: quản trị viên - Người dùng nhấn vào view để xem chi tiết đơn hàng và người dùng nhấn Accept Order để cập nhật trạng thái mới của đơn hàng - Người dùng nhấn Cancel Order trạng thái đơn hàng sẽ ở trạng thái đã hủy đơn

23 Người dùng có thể xem và có

thể thêm, sửa, xóa thông tin của sản phẩm

Kết xuất và lưu trữ

- Người dùng: quản trị viên - Người dùng nhấn Add để thêm thông tin sản phẩm

- Người dùng nhấn biểu tượng Edit để chỉnh sửa thông tin sản phẩm - Người dùng nhấn biểu tượng Delete để xóa thông tin sản phẩm

24 Người dùng có thể xem và có

thể sửa, xóa đánh giá của khách hàng

Kết xuất và lưu trữ

- Người dùng: quản trị viên - Người dùng nhấn vào biểu tượng Edit để chỉnh sửa đánh giá sản phẩm

- Người dùng nhấn vào biểu tượng Delete để xóa đánh giá sản phẩm

25 Người dùng có thể xem xem

và có thể thêm, sửa, xóa thương hiệu

Kết xuất và lưu trữ

- Người dùng: quản trị viên - Người dùng nhấn vào nút Add để thêm thương hiệu

- Người dùng nhấn vào biểu tượng Edit để chỉnh sửa tên thương hiệu - Người dùng nhấn vào biểu tượng Delete để xóa tên thương hiệu

26 Người dùng có thể xem và có

thể thêm, sửa, xóa hàng nhập kho

Kết xuất và lưu lưu trữ, tính toán

- Người dùng: quản trị viên - Người dùng nhấn vào nút Add chọn sản phẩm muốn nhập về - Người dùng nhấn vào biểu tượng Edit để chỉnh sửa số lượng sản phẩm nhập về

- Người dùng nhấn vào biểu tượng Delete để xóa sản phẩm nhập về, - Người dùng nhấn vào nút View để xem chi tiết đơn hàng nhập về

Bảng 3 Bảng phân tích các yêu cầu chức năng 2.2.3 Yêu cầu phi chức năng

1 Thao tác trên website nhanh chóng,

mượt mà

Tính hiệu quả

2 Giao diện đơn giản, dễ sử dụng Tính tiện dụng

3 Sử dụng màu sắc hài hòa, dễ chịu Tính tiện dụng

4 Bảo mật thông tin người dùng Tính bảo mật

5 Admin sẽ có một trang riêng để quản

lý

Tính tiện dụng & Tính sẵn sàng

Bảng 4 Bảng phân tích các yêu cầu phi chức năng

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 3.1 LƯỢC ĐỒ USECASE

Link lược đồ use case: uN3zvgGZjZIF5BUvE9588sUwJu

https://app.diagrams.net/#G1DJqjw-● Phía người dùng (client)

Hình 12 Usecase tổng quan phía khách hàng

Hình 13 Usecase chi tiết phía khách hàng

● Phía quản trị viên (admin)

Hình 14 Usecase tổng quan website phía quản trị viên

Hình 15 Usecase chi tiết phía quản trị viên

3.1.1 Mô tả chi tiết Use case

● Phía Người dùng (User)

Use case Đăng nhập với Google

Short Description Người dùng đăng nhập vào hệ thống

Actor Khách hàng

Pre-conditions Người dùng cần phải truy cập vào được trang web

Tài khoản người dùng đã có trong hệ thống và đã được phân quyền Người dùng đã truy cập vào hệ thống nhưng chưa đăng nhập

Post-conditions Người dùng đăng nhập thành công vào hệ thống