Việc tôi muốn tạo ra một trang website giúp đáp ứng các nhu cầu của dùng trong việc tìm kiếm , lựa chọn các mặt hàng thời trang một cách dễ dàng và nhanh chóng nhất.Thông qua những kiến
Trang 1TRƯỜNG ĐẠI HỌC
SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
HCMC University of Technology and Education
KHOA CÔNG NGHỆ THÔNG TIN
NGÀNH CÔNG NGHỆ THÔNG TIN
BÁO CÁO ĐỒ ÁN
CÔNG NGHỆ PHẦN MỀM MỚI
WEBSITE BÁN ĐỒ THỂ THAO
GVHD: ThS Nguyễn Minh Đạo
Sinh viên thực hiện:
Nguyễn Hoàng Kha 20110500
Thành phố Hồ Chí Minh, tháng 12 năm 2023
Trang 2MỤC LỤC
Chương 1: TÌM HIỂU TỔNG QUAN ĐỀ TÀI 3
1.1 Lý do thực hiện đề tài 3
1.2 Nội dung thực hiện 3
1.3 Phương pháp thực hiện 3
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 5
2.1 Tìm hiểu chung về ReactJS 5
2.2 Tìm hiểu chung về Nodejs 5
2.3 Tìm hiểu chung về Redux 7
2.4 Tìm hiểu chung về Hooks 8
2.5 Tìm hiểu chung về Axios 8
2.6 Tìm hiểu chung về JWT 8
2.7 Tìm hiểu chung về MongoDB 9
2.8 Tìm hiểu về Refesh token 10
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 11
3.1 Phân tích 11
3.1.1 Mô tả nghiệp vụ 11
3.2 Thiết kế website 12
3.2.1 Trang chủ 12
3.2.2 Trang sản phẩm 12
3.2.3 Trang Giỏ Hàng 12
3.2.4 Trang Thanh Toán 13
3.2.5 Trang Đơn Hàng của tôi 13
3.2.6 Trang thông tin người dùng 13
3.2.7 Giao diện đăng nhập 13
3.2.8 Giao diện đăng ký 14
3.2.9 Giao diện Admin quản lý sản phẩm 14
3.2.10 Giao diện quản lý người dùng 15
3.2.11 Giao diện quản lý đơn hàng 15
3.3 Phân tích bố cục code 16
3.3.1 Backend 16
CHƯƠNG 4: KẾT LUẬN VÀ KIẾN NGHỊ 27
4.1 Kết luận 27
Trang 34.2 Kết quả đạt được 28
4.3 Hạn chế 28
4.4 Hướng phát triển 28
TÀI LIỆU THAM KHẢO 29
CHƯƠNG 1:
Trang 4Chương 1: TÌM HIỂU TỔNG QUAN ĐỀ TÀI
1.1 Lý do thực hiện đề tài
Hiện nay, việc kinh doanh các mặt hàng về thời trang nói chung cũng như thờitrang online hiện đang rất phát triển và nhu cầu ngày dùng ngày càng tăng Việctôi muốn tạo ra một trang website giúp đáp ứng các nhu cầu của dùng trong việctìm kiếm , lựa chọn các mặt hàng thời trang một cách dễ dàng và nhanh chóngnhất
Thông qua những kiến thức mà tôi đã học và tìm hiểu, tôi cũng muốn tận dụngnhững công nghệ , kỹ thuật mới để xây dựng , thiết kế và phát triển một trangwebsite đa chức năng, dễ sử dụng và đáp ứng đủ các nhu cầu phức tạp
1.2 Nội dung thực hiện
Nodejs: Nodejs là một nền tảng lập trình được sử dụng để phát triển các ứng dụngweb Với Nodejs, bạn có thể xây dựng các chức năng back-end cho website nghe nhạctrực tuyến
Trang 5Redux: Redux là một thư viện JavaScript được sử dụng để quản lý trạng thái(state) của ứng dụng Với Redux, việc quản lý dữ liệu trên website nghe nhạc trực tuyến
sẽ trở nên dễ dàng hơn
Redux Persist: Redux Persist là một thư viện được sử dụng để lưu trữ trạng tháicủa ứng dụng trong localStorage hoặc AsyncStorage (trên mobile) Với Redux Persist,bạn có thể lưu trữ các thông tin như đăng nhập, playlist và các cài đặt khác
Axios: Axios là một thư viện JavaScript được sử dụng để gửi yêu cầu HTTP từclient đến server Với Axios, bạn có thể dễ dàng gọi API và xử lý dữ liệu trả về.JWT: JWT (JSON Web Tokens) là một chuẩn mã hóa token được sử dụng để xácthực người dùng trong các ứng dụng web Với JWT, bạn có thể bảo mật thông tin đăngnhập của người dùng trên website nghe nhạc trực tuyến
MongoDB: MongoDB là một hệ thống quản lý cơ sở dữ liệu NoSQL được sửdụng để lưu trữ dữ liệu cho website nghe nhạc trực tuyến Với MongoDB, việc quản lý vàlưu trữ các thông tin như bài hát, album, nghệ sĩ và thông tin người dùng sẽ trở nên dễdàng hơn
Trang 6CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1 Tìm hiểu chung về ReactJS
ReactJS (hoặc React) là một thư viện JavaScript mã nguồn mở được pháttriển bởi Facebook Nó được sử dụng để xây dựng giao diện người dùng cho các ứngdụng web đơn trang (Single Page Applications - SPAs)
Một số khái niệm cơ bản và tính năng quan trọng của React:
Component-Based Architecture (Kiến trúc dựa trên thành phần): React xây dựnggiao diện người dùng bằng cách sử dụng các thành phần (components) Mỗi thànhphần đại diện cho một phần nhỏ và tái sử dụng có thể của giao diện người dùng.Thành phần giúp quản lý và tái sử dụng mã nguồn dễ dàng hơn
Virtual DOM (DOM Ảo): React sử dụng một biểu diễn ảo của DOM (VirtualDOM) để tối ưu hóa hiệu suất Khi có sự thay đổi trong trạng thái của ứng dụng,React tạo ra một Virtual DOM, so sánh nó với DOM hiện tại, và chỉ cập nhật nhữngphần thay đổi thực sự Điều này giúp giảm tải cho DOM thực và cải thiện hiệu suấtứng dụng
JSX (JavaScript XML): JSX là một phần của React cho phép viết mã HTML giốngXML trong mã JavaScript Nó cung cấp cú pháp dễ đọc và viết cho việc định nghĩacác thành phần React
Unidirectional Data Flow (Luồng dữ liệu một chiều): React thực hiện luồng dữliệu một chiều từ cha đến con, giúp dễ dàng theo dõi và quản lý trạng thái ứng dụng.Tích hợp dễ dàng: React có thể kết hợp với nhiều thư viện và framework khác nhưRedux để quản lý trạng thái, React Router để quản lý điều hướng, và nhiều thư việnkhác để mở rộng chức năng của ứng dụng
Cộng đồng lớn: React có một cộng đồng lớn và tích cực, với nhiều tài liệu vànguồn thông tin hữu ích Điều này làm cho việc học và phát triển ứng dụng React trởnên thuận lợi
2.2 Tìm hiểu chung về Nodejs
Trang 7Node.js là một môi trường thực thi JavaScript được xây dựng trên JavaScriptruntime V8 của Chrome Node.js cho phép chúng ta chạy mã JavaScript trên máychủ, thường được sử dụng để xây dựng các ứng dụng web có tính chất thời gian thực,đặc biệt là các ứng dụng đơn trang (single-page applications - SPAs).
Dưới đây là một số khái niệm cơ bản và tính năng chính của Node.js:
JavaScript Everywhere: Node.js giúp mở rộng sức mạnh của JavaScript từphía client-side (trình duyệt) sang server-side (máy chủ) Điều này cho phéplập trình viên sử dụng cùng một ngôn ngữ lập trình (JavaScript) trên cả haimôi trường
Asynchronous and Event-Driven: Mô hình lập trình của Node.js là khôngđồng bộ (asynchronous), sử dụng các sự kiện (event-driven) Điều này cónghĩa là Node.js có thể xử lý nhiều yêu cầu mà không cần tạo ra nhiềuluồng (threads), giúp tối ưu hiệu suất của ứng dụng
Non-blocking I/O (Input/Output): Node.js không chặn (non-blocking) I/O,cho phép xử lý nhiều yêu cầu I/O cùng một lúc mà không cần chờ đợi kếtquả trước khi di chuyển sang công việc khác Điều này làm tăng hiệu suấtcủa ứng dụng
CommonJS Modules: Node.js sử dụng hệ thống module CommonJS, giúpquản lý và tổ chức mã nguồn một cách hiệu quả Điều này giúp phát triểnứng dụng theo mô hình modul và tái sử dụng mã nguồn dễ dàng
NPM (Node Package Manager): NPM là một công cụ quản lý gói (packagemanager) cho Node.js, giúp lập trình viên dễ dàng cài đặt, quản lý và chia
sẻ thư viện JavaScript và công cụ khác nhau
Server-side Development: Node.js được sử dụng chủ yếu để xây dựng cácứng dụng máy chủ, như các ứng dụng web, API, và các ứng dụng có tínhchất thời gian thực
Cộng Đồng Lớn: Node.js có một cộng đồng lớn và tích cực, với nhiều thưviện và framework hữu ích được phát triển và duy trì
Trang 8Tóm lại, Node.js là một môi trường thực thi JavaScript mạnh mẽ, đặc biệt là trongviệc xây dựng các ứng dụng máy chủ có khả năng xử lý đồng thời nhiều kết nối, cóhiệu suất cao và có tính tương tác cao.
2.3 Tìm hiểu chung về Redux
Redux là một thư viện quản lý trạng thái (state management) cho ứng dụng
JavaScript Nó thường được sử dụng chủ yếu trong các ứng dụng React, nhưng cũng
có thể tích hợp với các thư viện hoặc framework khác Redux giúp quản lý trạng tháiứng dụng một cách dễ dàng, dựa trên các nguyên tắc cụ thể như mô hìnhunidirectional data flow và immutability
Dưới đây là một số khái niệm và tính năng quan trọng của Redux:
Store: Redux duy trì một "store" là nơi lưu trữ toàn bộ trạng thái của ứng dụng.
Trạng thái này có thể được truy cập và cập nhật thông qua các "action"
Action: Là các đối tượng mô tả sự kiện hoặc hành động sẽ xảy ra trong ứng dụng.
Action chứa ít nhất một thuộc tính type để xác định loại hành động và thường kèmtheo dữ liệu (payload) để cập nhật trạng thái
Reducer: Reducer là các hàm xử lý các action và trả về một bản sao mới của trạng
thái Reducer không thay đổi trạng thái hiện tại mà tạo ra một bản sao mới, giúp duytrì tính nguyên tắc "immutability"
Dispatch: Action được gửi đi thông qua một hàm gọi là dispatch Khi dispatch
được gọi, nó sẽ chuyển action tới reducer để xử lý và cập nhật trạng thái
Middleware: Middleware là các lớp trung gian có thể mở rộng hoặc thay đổi cách
Redux hoạt động Middleware thường được sử dụng để xử lý các tác vụ như ghi log,
xử lý side effects, hay thậm chí là thực hiện các yêu cầu mạng
Unidirectional Data Flow: Redux tuân theo mô hình luồng dữ liệu một chiều, từ
trên xuống Action được gửi từ components, đi qua reducers, và cập nhật store Cáccomponents theo dõi sự thay đổi của store và cập nhật giao diện người dùng tươngứng
Redux thường được sử dụng trong các ứng dụng lớn và phức tạp, nơi quản lý trạngthái trở nên quan trọng để tránh tình trạng lộn xộn và khó bảo trì Mặc dù có thể có
Trang 9một số độ phức tạp ban đầu khi sử dụng Redux, nhưng nó mang lại sự quản lý trạngthái mạnh mẽ và có thể mở rộng cho ứng dụng của bạn.
2.4 Tìm hiểu chung về Hooks
React Hooks là một tính năng của React phiên bản 16.8 trở đi, giúp lập trìnhviên quản lý trạng thái và các tính năng của React components một cách dễ dàng hơn.Hooks được thiết kế để sử dụng trong các functional components, giúp chúng ta sửdụng các tính năng của class components mà không cần sử dụng class
2.5 Tìm hiểu chung về Axios
Axios là một thư viện HTTP client được sử dụng trong các ứng dụng JavaScript vàNode.js để tương tác với các API từ máy chủ Thư viện này cho phép các lập trình viêngửi các yêu cầu HTTP (GET, POST, PUT, DELETE, ) đến các API, và xử lý các phảnhồi được trả về từ máy chủ
Axios cho phép thiết lập các thông số cấu hình để tùy chỉnh các yêu cầu HTTP và
xử lý phản hồi, bao gồm cách xử lý lỗi và định dạng dữ liệu trả về (JSON, XML, HTML,v.v.)
Với Axios, việc tương tác với các API trở nên đơn giản và tiện lợi hơn, và đặc biệthơn là nó cho phép lập trình viên xử lý các yêu cầu HTTP bất đồng bộ (asynchronousrequests) một cách dễ dàng
2.6 Tìm hiểu chung về JWT
JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa cáchtruyền thông tin an toàn giữa các bên dưới dạng JSON JWT được sử dụng chủ yếu đểxác thực và xác định người dùng sau khi họ đã đăng nhập vào một ứng dụng
Dưới đây là một số khái niệm và tính năng quan trọng của JWT:
Cấu Trúc JWT: JWT bao gồm ba phần cơ bản:
Header: Chứa các thông tin về loại token và thuật toán sử dụng
Payload: Là phần chứa các thông tin về người dùng (claim)
Signature: Chữ ký số được tạo ra bằng cách ký (sign) phần header và payload
sử dụng một khóa bí mật
Trang 10Xác Thực (Authentication): JWT thường được sử dụng để xác thực người dùng saukhi họ đã đăng nhập vào một ứng dụng Sau khi người dùng đăng nhập thành công,server tạo ra một JWT và gửi nó về cho client Client sẽ gửi JWT này trong mỗi yêucầu tiếp theo, giúp server xác định người dùng.
Tính Di Động (Stateless): JWT là stateless, nghĩa là server không cần lưu trữ trạngthái của người dùng đã đăng nhập Thông tin cần thiết để xác định người dùng đượcchứa trong chính JWT, giúp giảm áp lực cho server
Phân Quyền (Authorization): JWT cũng có thể chứa thông tin về quyền lợi của ngườidùng (claims) Điều này giúp ứng dụng thực hiện kiểm tra quyền lợi một cách dễdàng
Phương Thức Truyền Thông Tin An Toàn: JWT thường được sử dụng qua HTTPS đểđảm bảo tính an toàn của thông tin Chữ ký số giúp ngăn chặn bất kỳ sự thay đổi nàotrong dữ liệu trên đường truyền
Dễ Dàng tích Hợp: JWT có thể dễ dàng tích hợp với nhiều loại ứng dụng, bao gồm cảứng dụng web, mobile apps, và dịch vụ web
Thời Hạn (Expiration): JWT thường có thể được thiết lập với một thời hạn (expirationtime) Sau khi thời hạn này hết, JWT sẽ không còn hiệu lực, giúp giảm rủi ro bảo mật.JWT là một công nghệ phổ biến trong việc xác thực và phân quyền trong các ứngdụng web và dịch vụ web, đặc biệt khi cần tích hợp giữa các hệ thống khác nhau
2.7 Tìm hiểu chung về MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ, phân tán, mã nguồn mở
Nó sử dụng kiểu dữ liệu JSON để lưu trữ và truy vấn dữ liệu, thay vì sử dụng bảng vàquan hệ như các hệ quản trị cơ sở dữ liệu quan hệ truyền thống
Một số đặc điểm của MongoDB bao gồm:
Tính linh hoạt: MongoDB cho phép lưu trữ dữ liệu với các định dạng khác nhau,giúp cho việc phát triển ứng dụng trở nên linh hoạt hơn
Tính mở rộng: MongoDB có thể dễ dàng mở rộng để đáp ứng nhu cầu lưu trữ dữliệu tăng lên
Trang 11Tính khả dụng cao: MongoDB hỗ trợ tính năng replica set và sharding giúp đảmbảo tính khả dụng và độ tin cậy của hệ thống.
Tính năng tìm kiếm đầy đủ văn bản: MongoDB hỗ trợ tìm kiếm dữ liệu với nhiềutiêu chí khác nhau, trong đó có tính năng tìm kiếm đầy đủ văn bản
Các ngôn ngữ lập trình được hỗ trợ bởi MongoDB bao gồm JavaScript, Python,Ruby, C++, C#, Java và PHP
2.8 Tìm hiểu về Refesh token
Refresh Token là một chuỗi đại diện cho quyền truy cập, tương tự như AccessToken Tuy nhiên, Refresh Token không được sử dụng để truy cập tài nguyên, mà thayvào đó, nó được sử dụng để đổi lấy Access Token mới khi Access Token hiện tại hết hạn.Quá trình hoạt động thông thường của Refresh Token là như sau: khi người dùngđăng nhập thành công, hệ thống trả về một cặp Access Token và Refresh Token AccessToken thường có thời hạn hợp lý ngắn Khi Access Token hết hạn, ứng dụng sử dụngRefresh Token để yêu cầu đổi lấy Access Token mới Nếu Refresh Token vẫn còn hạn,
hệ thống cung cấp một cặp mới Access Token và Refresh Token Bằng cách này, sử dụngRefresh Token có thể giúp tăng cường tính bảo mật và cung cấp trải nghiệm người dùngthuận lợi hơn khi truy cập các tài nguyên của ứng dụng
Tuy nhiên, quản lý Refresh Token cũng đặt ra nhiều thách thức về an toàn.Refresh Token cần được mã hóa và lưu trữ an toàn Chính sách về thời gian hết hạn và tái
sử dụng cũng cần được đặt ra để đảm bảo tính bảo mật của ứng dụng
Một số điều quan trọng để lưu ý khi sử dụng Refresh Token bao gồm:
1 Mã Hóa An Toàn: Refresh Token cần được mã hóa bằng các phương thức an
toàn để tránh bị tấn công
2 Lưu Trữ An Toàn: Refresh Token nên được lưu trữ an toàn, thường là trên
server, để ngăn chặn truy cập trái phép
3 Thời Gian Hết Hạn và Tái Sử Dụng: Thiết lập chính sách thời gian hết hạn và
tái sử dụng để giảm thiểu rủi ro bảo mật
4 Cơ Mechanism Đổi Mới: Thiết kế một cơ chế đổi mới để ngăn chặn việc sử dụng
Refresh Token cũ khi người dùng đã đăng xuất hoặc thay đổi mật khẩu
Trang 125 Ghi Log An Toàn: Ghi log hoạt động liên quan đến Refresh Token để theo dõi và
Trước khi thực hiện mua sản phẩm người dùng phải thực hiện việc đăngnhập hoặc đăng kí tài khoản để có thể trải nghiệm tính năng mua sản phẩm.Tại đây người dùng có thể mua một sản phẩm hoặc nhiều sản phẩm cùngmột lúc Và người dùng cũng có thể xem tình trạng cũng như thông tin đơn hàngmình đã đặt
Trang 163.2.11 Giao diện quản lý đơn hàng
Trang 173.3 Phân tích bố cục code
3.3.1 Backend
Index.js: thiết lập một máy chủ Express, cấu hình các middleware, kết nốiđến cơ sở dữ liệu MongoDB, và sử dụng các tuyến đường được định nghĩatrong module router
OrderController:
CreateOrder:
• Hàm này xử lý việc tạo đơn hàng mới
• Nó trích xuất thông tin cần thiết từ body của request nhưpaymentMethod, itemsPrice, shippingPrice, totalPrice, fullName,address, city, và phone
• Hàm kiểm tra xem có bất kỳ trường nào bị thiếu không, và nếu có, nótrả về một phản hồi với thông báo lỗi
• Nếu tất cả các trường cần thiết đều có mặt, hàm gọi hàm createOrder
từ mô-đun OrderService và trả về phản hồi
GetAllOrderDetails:
• Hàm này lấy tất cả chi tiết đơn hàng cho một người dùng cụ thể
• Nó trích xuất userId từ tham số của request