đồ án 1 xây dựng website bán giày bóng đá

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện:

Họ tên: Kim Line MSSV: 19521135

TP HỒ CHÍ MINH, NĂM 2023

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

Người nhận xét

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

tên)

LỜI CẢM ƠN

Trước hết em muốn bày tỏ lòng biết ơn sâu sắc đối với trường Đại học Côngnghệ thông tin, đoàn Khoa Công nghệ phần mềm vì đã tạo điều kiện thuận lợi,mang lại cho em cơ hội học tập và nghiên cứu có ý nghĩa

Em cũng muốn bày tỏ lòng cảm ơn đến toàn thể giảng viên, những người đãchia sẻ kiến thức và kinh nghiệm với em trong suốt những năm tháng học tập vừaqua.

Đặc biệt, em xin chân thành cảm ơn đến thầy Huỳnh Tuấn Anh, giảng viênhướng dẫn chính của em trong kì đồ án 1 này Cảm ơn thầy đã dành thời gian quýbáu để hướng dẫn, chỉ bảo và định hình ý tưởng cho em, giúp em vượt qua nhữngkhó khăn và thách thức trong quá trình làm đồ án Sự nhận thức và kiên nhẫn củathầy là nguồn động viên lớn giúp em hoàn thành đồ án một cách tốt nhất có thể.

Tuy nhiên, với kiến thức, chuyên môn hiện tại còn hạn chế nên có thể xuấthiện những thiêú sót trong đồ án, cũng như bài báo cáo của mình Mong quý thầy côchỉ bảo thêm để em có thể hoàn thiện bản thân hơn.

Em tin rằng những kiến thức và kỹ năng mà em đã học được học từ quý thầycô không chỉ là nền tảng quan trọng cho sự phát triển cá nhân mà còn là sự chuẩn bịtốt nhất cho em khi bước vào thế giới công việc.

Một lần nữa, em chân thành cảm ơn sự đóng góp và tận tâm của thầy, cũngnhư sự hỗ trợ của toàn bộ giảng viên trường.

Trân trọng cảm ơn!

TP.HCM, ngày 30 tháng 12 năm 2023

Sinh viên thực hiện Kim Line

1.2 Mục tiêu của đề tài 5

1.3 Đối tượng và phạm vi nghiên cứu 6

2.2 Exspress.js (Bạckend Framework): 8

2.3 React.js (Frontend Library): 8

2.4 Node.js (Runtime Environment): 8

3.2.1 Yêu cầu chức năng 11

3.2.2 Yêu cầu phi chức năng 12

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

4.1 Sơ đồ Use-case 13

CHƯƠNG 5: CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG 20

5.1 Môi trường cài đặt 20

5.2.3.1 Trang sản chi tiết sản phẩm 22

5.2.4 Trang giới thiệu 24

5.2.5 Trang liên hệ 25

5.2.6 Trang giỏ hàng 25

5.2.7 Trang tạo đơn hàng 26

5.2.7.1Thanh toán khi nhận hàng 26

5.2.8 Trang hồ sơ 28

5.2.9 Trang bảng điều khiển của khách hàng 29

5.2.10 Trang bảng điều khiển của Admin 29

DANH MỤC TÀI LIỆU THAM KHẢO 35

BẢNG TIẾN ĐỘ CÔNG VIỆC

Bảng 1: Bảng tiến độ công việc

20/09 – 28/09: Thực hiện phân

01/09 – 05/10: Xây dựng backend

15/10 – 25/10: Triển khai cơ sở dữ

5/10 – 25/11: Phát triển giao diện

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

1

TÓM TẮT ĐỀ TÀI

Trong bối cảnh thị trường mua sắm trực tuyến ngày càng phát triển, bất cứmột cửa hàng kinh doanh nào cũng phải hướng đến việc xây dựng website bán hàngcho riêng mình nhằm mang đến trải nghiệm mua sắm trực tuyến tối ưu và đáp ứngnhanh chóng các nhu cầu đa dạng của khách hàng.Từ đó, thúc đẩy doanh số bánhàng tăng trưởng một cách nhanh chóng

Với nhu cầu thiết thực đó, cùng với niềm đam mê giày bóng đá mãnh liệt nênem đã quyết định tìm hiểu và lựa chọn đề tài “Xây dựng website bán giày bóng đá”cho đồ án của mình Trang web này không chỉ là một nền tảng thương mại điện tửmà còn là nguồn thông tin đáng tin cậy về giày bóng đá cho cộng đồng yêu thể thao.Trong quá trình phát triển, em đã chú trọng vào việc tối ưu hóa giao diện ngườidùng, cung cấp tính năng tìm kiếm thông minh và hệ thống quản lý đơn hàng hiệuquả, tạo nên một trải nghiệm mua sắm trực tuyến tiện lợi và thú vị.

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN1.1.Đặt vấn đề

Hiện nay thương mại điện tử Việt Nam đang phát triển rất nhanh Nhu cầumua sắm trực tuyến của người dùng ngày càng tăng cao Việc xây dựng trang webbán hàng trang sức trực tuyến là điều tất yếu cho những công ty, các tổ chức kinhdoanh muốn hình thành thương hiệu Thương mại điện tử thực sự là một cuộc cáchmạng trong phương thức bán hàng mà nếu biết cách áp dụng thì doanh nghiệp sẽ đạtđược thành công ngoài mong đợi trong việc đưa sản phẩm đến tay người tiêu dùng

Trong thời đại công nghệ số này, sự bùng nổ của thương mại điện tử đã làmthay đổi bức tranh kinh doanh truyền thống, mở ra những cơ hội đầy hướng hẹn vàthách thức đối với các doanh nghiệp Xu hướng mua sắm trực tuyến ngày càng trởthành một phần không thể thiếu trong cuộc sống hằng ngày của chúng ta, khiến choviệc xây dựng và phát triển các trang web thương mại trở nên quan trọng hơn baogiờ hết.

Trong bối cảnh này, đồ án “Xây dựng website bán giày bóng đá” là một cơhội để tiếp cận với xu hướng mạnh mẽ của thương mại điện tử Với sự thuận tiện vàlinh hoạt mà website này mang lại, người tiêu dùng không chỉ dễ dàng tìm kiếm vàso sánh sản phẩm, mà còn, có thể thực hiện giao dịch mọi lúc mọi nơi.

Việc xây dựng một trang web chuyên về giày bóng đá không chỉ đáp ứngnhu cầu mua sắm của người tiêu dùng mà còn tạo ra một không gian trực tuyến độcđáo, nơi mà đam mê và sự đặc sắc của sản phẩm được thể hiện rõ nét Đồ án nàykhông chỉ là việc triển khai một trang web bán hàng, mà còn là cơ hội để bạn hiểusâu hơn về cách quản lý sản phẩm, tương tác với khách hàng, và xây dựng một trảinghiệm mua sắm trực tuyến độc đáo.

1.2.Mục tiêu của đề tài

 Giúp các chủ cửa hàng quản lý tốt hơn về các hoạt động kinh doanh, đôngthời tạo thêm chiến lược marketing mới cho cửa hàng.

 Tạo ra một giao diện người dùng đẹp, dễ sử dụng và tương tác, tối ưu hóatrải nghiệm người dùng trong quá trình mua sắm.

 Phát triển hệ thống quản lý sản phẩm để hiển thị và cập nhật thông tin chi tiếtvề giày bóng đá, bao gồm hình ảnh, giá cả, mô tả,

 Tích hợp các phương thức thanh toán an toàn và tiện lợi, tạo điều kiện thuậnlợi cho việc hoàn tất giao dịch.

 Tích hợp hệ thống đánh giá và nhận xét sản phẩm, tạo sự minh bạch và đángtin cậy trong quá trình mua sắm.

 Cung cấp chức năng tìm kiếm nhanh chóng và hiệu quả, kèm theo các tùychọn lọc để người dùng dễ dàng tìm thấy sản phẩm mong muốn.

 Thiết lập các biện pháp bảo mật để đảm bảo an toàn thông tin cá nhân củakhách hàng trong quá trình giao dịch.

 Nghiên cứu và đề xuất các hướng phát triển tiềm năng để nâng cao chấtlượng và chức năng của trang web trong tương lai.

1.3.Đối tượng và phạm vi nghiên cứu1.3.1 Đối tượng

 Người tiêu dùng: Những người đam mê bóng đá và quan tâm đến việcmua sắm giày bóng đá trực tuyến Bao gồm cả người chơi bóng đá chuyên ngiệp, những người hâm mộ bóng đá và những người tìm kiếm sản phẩm chất lượng.

 Quản trị cửa hàng: những cửa hàng quan tâm đến phương thức bán hàng trực tuyến.

 Các website bán hàng trên thị trường hiện nay.

 Phạm vi chức năng: Trang web sẽ tập trung vào các chức năng như tìm kiếm, lọc sản phẩm, thanh toán, đánh giá sản phẩm, và tương tác người dùng.

 Phạm vi thời gian: Nghiên cứu sẽ tập trung vào quá trình phát triển và triển khai trang web, cũng như đánh giá hiệu suất và thuật toán sau khitrang web đã đi vào hoạt động.

 Phạm vi nghiên cứu mở rộng: Nghiên cứu cũng có thể đề xuất hướng phát triển tương lai và cải tiến cho trang web, bao gồm các tính năng mở rộng và cập nhật công nghệ.

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT2.1.MongoDB (Database):

 Khái niệm cơ bản:

o MongoDB là hệ quản trị cơ sở dữ liệu NoSQL, lưu trữ dữ liệu dướidạng JSON-like BSON

 Schema-less :

o MongoDB không yêu cầu sử dụng schema cố định, giúp linh hoạttrong việc thay đổi cấu trúc dữ liệu mà không cần phải cập nhật toànbộ cơ sở dữ liệu.

2.2.Exspress.js (Bạckend Framework):

 Middleware:

o Express.js sử dụng middleware để xử lý yêu cầu HTTP, giúp quản lý

và xử lý các yêu cầu trước khi đến tay các route xử lý chính. Routing:

o Express.js hỗ trợ việc xác định và xử lý các route dựa trên các HTTP

methods như GET, POST, PUT, DELETE.

2.3.React.js (Frontend Library):

 Components:

o React chia giao diện thành các component tái sử dụng, giúp quản lý và

duy trì mã nguồn một cách hiệu quả. Virtual DOM

o Virtual DOM của React giúp tối ưu hóa hiệu suất của ứng dụng bằng

cách cập nhật chỉ những phần tử cần thiết thay vì cả trang.

2.4.Node.js (Runtime Environment):

 Asynchronous I/O:

o Node.js sử dụng mô hình không đồng bộ (asynchronous) để xử lý

nhiều yêu cầu cùng một lúc, giúp tối ưu hóa hiệu suất Event-Driven Programming:

o Sự kiện và callback được sử dụng để xử lý các tác vụ, giúp ứng dụng

chạy mượt mà và hiệu quả.

2.5.RESTful API:

 Kiến trúc API:

o Sử dụng kiến trúc RESTful để thiết kế các endpoint API, giúp tương

tác linh hoạt và hiệu quả với frontend. HTTP Methods:

o Sử dụng các phương thức HTTP như GET, POST, PUT, DELETE để

thực hiện các thao tác CRUD trên dữ liệu.

2.6.State Management:

 Redux (Optional):

o Redux có thể được sử dụng để quản lý trạng thái ứng dụng, đặc biệt là

khi ứng dụng có nhiều thành phần chia sẻ dữ liệu.

2.7.Authentication và Authorization:

 JSON Web Token (JWT):

o Sử dụng JWT để xác thực người dùng và đảm bảo an toàn cho dữ liệu

gửi qua mạng.

 Middleware và Permissions:

o Sử dụng middleware và quản lý quyền để kiểm soát quyền truy cập

vào các tài nguyên.

2.8.WebSocket (Optional):

 Real-Time Communication:

o Sử dụng WebSocket để cung cấp giao tiếp thời gian thực giữa client

và server, đặc biệt hữu ích trong các trường hợp cần cập nhật dữ liệungay khi có thay đổi.

CHƯƠNG 3: XÁC ĐỊNH VÀ PHÂN TÍCH YÊU CẦU3.1.Các quy trình, nghiệp vụ.

 Khách hàng:

o Đăng ký tài khoản.

o Cập nhật thông tin tài khoản sau khi đăng ký.

o Tìm kiếm sản phẩm theo tên, danh mục, thể loại, từ khoá, giá của sảnphẩm.

o Tìm kiếm sản phẩm theo bộ lọc danh mục, thể loại sản phẩm.o Xem chi tiết sản phẩm.

o Chọn số lượng, kích thước sản phẩm.

o Đặt hàng, mua hàng (thanh toán sau khi nhận sản phẩm, thanh toánOnline qua Stripe.

o Xem lịch sử mua hàng.o Xem và cập nhật giỏ hàng.

o Bình luận, đánh giá sản phẩm theo số sao, chỉ khách hàng đã mua sảnphẩm đó thì mới có thể bình luận.

 Đối tượng admin:

o Quản lý khách hàng: quản lý khách hàng của toàn hệ thống (thêm,sửa, xóa, cập nhật).

o Quản lý giao diện trang web: cập nhật slide cho giao diện trang chủ,thêm, sửa, xóa, cập nhật sản phẩm, danh mục, thể loại sản phẩm(thêm, sửa, xóa, cập nhật).

o Quản lý sản phẩm: quản lý tất cả các sản phẩm (thêm, sửa, xóa, cậpnhật các sản phẩm hết hàng).

o Quản lý danh mục sản phẩm: quản lý các thông tin về danh mục sảnphẩm(thêm, sửa, xóa, cập nhật).

o Quản lý đơn hàng: xem đơn đặt hàng, xác nhận đơn hàng, các trạng

o Thống kê các thông tin của khách hàng, sản phẩm, danh mục, đơnhàng,

3.2.Yêu cầu phần mềm.3.2.1 Yêu cầu chức năng.

 Đăng ký và đăng nhập

o Người dùng đăng ký tài khoản bằng Email và mật khẩu

o Người dùng thực hiện đăng nhập bằng Email và mật khẩu đã đăng kýđể thực hiện các chức năng theo phân quyền của tài khoản

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

 Yêu cầu về giao diện (GUI): cung cấp giao diện đơn giản, dễ sử dụng, tối ưuhóa trải nghiệm người dùng.

 Yêu cầu về chất lượng:

o Tính tiến hoá: dễ dàng chỉnh sửa và nâng cấp.

o Tính tiện dụng: giao diện hệ thống trực quan, dễ sử dụng, tính tươngtác cao.

o Tính hiệu quả: hệ thống thể hiện đầy đủ thông tin, thời gian phản hồi,thông lượng nhanh chóng

o Tính tương thích: hệ thống hoạt động tốt trên các nền tảng Tươngthích với các loại điều hành

o Tính an toàn, bảo mật: trang web đảm bảo bảo mật thông tin cá nhân,thanh toán của người dùng với hệ thống phân chia quyền rõ ràng.

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG4.1.Sơ đồ Use-case

Hình 1: Use-case Admin

4.1.2.Use-case khách hàng

Hình 2: Use-case khách hàng

4.2 Phân tích hệ thống

Hình 3: Mô hình ERD

4.3.Phân tích và thiết kế Cơ sở dữ liệu

Dựa trên việc xác định yêu cầu và phân tích yêu cầu, ứng dụng webbao gồm các bảng sau đây:

dùngTimeStamps

Tên trườngKiểu dữ liệuKhóa

nhật

CHƯƠNG 5: CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG5.1.Môi trường cài đặt

o Bạckend: JavaScript (Node.js).o Frontend: JavaScript (React).

o Query language: MongoDB query language- Framework và thư viện:

o Bạckend: Express (Node.js framework).o Frontend: React (Material UI).

o State Management: Redux (Optional)o HTTP Client: Axios

- Cơ sở dữ liệu:

o MongDB (NoSQL Database).

o Mongoose (Object Data Modeling library for MongoDB andNode.js).

- Quản lý phiên bản: Github

- Trình quản lý gói và phụ thuộc: Npm (Node Package Manager)- Công cụ vẽ sơ đồ phân tích thiết kế: Draw.io.

- Công cụ phát triển: Vs Code + Postman.

5.1.2.2.Môi trường triển khai

- Hệ điều hành: Windows 11.5.2.Màn hình giao diện

5.2.1.Trang chủ

Hình 1: Màn hình trang chủ

5.2.2.Đăng nhập, đăng ký5.2.2.1 Đăng nhập

Hình 2: Màn hình trang đăng nhập

5.2.2.2 Đăng ký

Hình 3: Màn hình trang đăng ký

5.2.3.Trang sản phẩm

Hình 4: Màn hình trang tài khoản

5.2.3.1Trang sản chi tiết sản phẩm

Hình 5: Màn hình trang chi tiết sản phẩm

5.2.4 Trang giới thiệu

Hình 6: Màn hình trang tài khoản

5.2.5.Trang liên hệ

Hình 7: Màn hình trang liên hệ

5.2.6 Trang giỏ hàng

Hình 8: Màn hình trang giỏ hàng

5.2.7.Trang tạo đơn hàng

Hình 9: Màn hình trang tạo đơn hàng

Hình 10: Màn hình thanh toán khi nhận hàng

5.2.7.2 Thanh toán bằng thẻ

Hình 11: Màn hình thanh toán bằng thẻ

Hình 12: Màn hình thanh toán bằng quét mã QR

Hình 13: Màn hình trang tài khoản

Hình 14: Màn hình cập nhật hồ sơ

5.2.9.Trang bảng điều khiển của khách hàng

Hình 15: Màn hình bản điều khiển của khách hàng

5.2.10 Trang bảng điều khiển của Admin5.2.10.1Quản trị người dùng

Hình 16: Màn hình quản trị người dùng

5.2.10.2Quản trị đơn hàng

Hình 17: Màn hình quản trị đơn hàng

5.2.10.3Quản trị sản phẩm

Hình 18: Màn hình quản trị sản phẩm

Hình 21: Màn hình thêm mới danh mục

Hình 22: Màn hình thống kê

CHƯƠNG 6: TỔNG KẾT6.1.Kết quả đạt được

 Hoàn thành triển khai một trang web thương mại điện tử chuyên về giàybóng đá với giao diện thân thiện và các chức năng quản lý sản phẩm, đánhgiá, và đơn hàng.

 Sử dụng MERN stack để xây dựng backend ổn định, có thể mở rộng dễ dàngvà xử lý các yêu cầu của người dùng một cách linh hoạt.

 Tích hợp cổng thanh toán an toàn và tiện lợi, đồng thời quản lý đơn hàng mộtcách chính xác và linh hoạt.

 Phát triển giao diện người dùng thân thiện, dễ sử dụng và tương tác, tạo ratrải nghiệm mua sắm trực tuyến tích cực cho người dùng.

 Hiện thực quản lý người dùng và xác thực an toàn bằng JWT, bảo vệ thôngtin cá nhân của người dùng.

6.2.Hạn chế

 Cần thêm công việc tối ưu hóa hiệu suất để đảm bảo ứng dụng chạy mượt màvà nhanh chóng, đặc biệt là khi có nhiều người dùng truy cập cùng một lúc  Hệ thống thử nghiệm chưa được triển khai đầy đủ, dẫn đến khả năng phát

hiện lỗi và sửa lỗi còn hạn chế.

 Cần thực hiện đánh giá bảo mật chi tiết và triển khai các biện pháp bảo mậtmạnh mẽ để bảo vệ thông tin cá nhân và giao dịch của người dùng

 Có thể vẫn còn một vài sai sót khác mà chưa phát hiện được

6.3.Hướng phát triển

 Khắc phục những lỗi còn tồn đọng trong quãng thời gian xây dựng dự án  Tiếp tục tối ưu hóa hiệu suất và mở rộng hệ thống để đối mặt với tình trạng

tăng cường của lượng người dùng và dữ liệu.

 Xây dựng ứng dụng di động để mở rộng sự tiện lợi và tiếp cận cho ngườidùng sử dụng điện thoại di động.

 Kết nối với các hệ thống thanh toán và vận chuyển thứ ba để cung cấp nhiều

 Thực hiện triển khai hệ thống thử nghiệm liên tục để đảm bảo rằng mọi thayđổi đều được kiểm tra kỹ lưỡng và không tạo ra vấn đề mới.

 Tích hợp hệ thống thu thập và phản hồi từ người dùng để hiểu rõ hơn về nhucầu của họ và cải thiện trang web.

 Cập nhật chiến lược tiếp thị trực tuyến để tăng cường nhận thức thương hiệuvà tăng cường doanh số bán hàng.

 Liên tục nghiên cứu và áp dụng các công nghệ mới để duy trì tính độc đáo vàtiên tiến của trang web.

 Có thể hỗ trợ thêm đa ngôn ngữ.

DANH MỤC TÀI LIỆU THAM KHẢO

[1] W3Schools Online Web Tutorial [Online] Available: https://www.w3schools.com/.

[2] Stack Overflow [Online] Available: https://stackoverflow.com/.