Đặt vấn đề Trong thời đại kỹ thuật số ngày nay, việc mua sắm trực tuyến đã trở thành một phần không thể thiếu của cuộc sống hàng ngày của chúng ta. Với sự phát triển không ngừng của công nghệ thông tin và internet, người tiêu dùng ngày càng có thêm nhiều cơ hội và tiện ích để lựa chọn và mua sắm các sản phẩm và dịch vụ một cách thuận tiện và nhanh chóng. Để phục vụ cho xu hướng này và cung cấp một trải nghiệm mua sắm trực tuyến tốt hơn cho khách hàng, chúng tôi đã quyết định thực hiện dự án xây dựng trang web bán hàng thương mại điện tử.2 Lí do chọn đề tài Tính thời sự: Mua sắm trực tuyến đang trở thành một phần không thể thiếu của cuộc sống hiện đại. Đặc biệt, dịch bệnh COVID-19 đã thúc đẩy sự gia tăng của mua sắm trực tuyến, khiến cho nhu cầu về các trang web bán hàng thương mại điện tử tăng cao.
Việc thực hiện dự án này sẽ giúp chúng tôi đáp ứng một nhu cầu ngày càng tăng cao trong xã hội. Khả năng kinh doanh: Trang web bán hàng thương mại điện tử không chỉ là một công cụ giúp người tiêu dùng mua sắm, mà còn là một cơ hội kinh doanh đáng kể. Việc phát triển và quản lý một trang web bán hàng thương mại điện tử có thể tạo ra nguồn thu nhập ổn định và tiềm năng phát triển kinh doanh trong tương lai. Kỹ năng và kiến thức: Xây dựng một trang web bán hàng thương mại điện tử đòi hỏi kiến thức về thiết kế web, phát triển phần mềm, quản lý cơ sở dữ liệu, 2 và quản lý giao dịch trực tuyến.
Việc thực hiện dự án này sẽ giúp tôi phát triển và nâng cao kỹ năng và kiến thức trong lĩnh vực công nghệ thông tin. Cơ hội học hỏi: Trong quá trình xây dựng trang web này, chúng tôi sẽ được tiếp xúc và học hỏi nhiều kiến thức và kỹ năng mới, từ việc thiết kế giao diện đến việc quản lý dữ liệu và thương mại điện tử. Điều này sẽ làm phong phú hơn kiến thức của chúng tôi và tạo ra cơ hội học hỏi quý báu. Tôi tin rằng việc thực hiện dự án này sẽ mang lại giá trị cho cả tôi và cộng đồng, bằng cách cung cấp một trải nghiệm mua sắm trực tuyến tốt hơn cho khách hàng và tạo ra cơ hội kinh doanh tiềm năng.
Tôi sẽ nỗ lực hết mình để đạt được mục tiêu này và đảm bảo rằng dự án của tôi sẽ thành công.3 Mục tiêu Tạo ra một trang web thương mại điện tử hoàn chỉnh: Mục tiêu chính của đồ án là phát triển và triển khai một trang web thương mại điện tử thực tế và hoạt động, có khả năng bán hàng trực tuyến cho khách hàng. Website được xây dựng phục vụ hai đối tượng chính là người quản trị hệ thống và khách hàng với các chức năng sau: Về phía người dùng: - Tìm kiếm các sản phẩm mà khách hàng cần - Xem thông tin chi tiết của sản phẩm - Chức năng đặt mua và hình thức thanh toán - Khách hàng chọn sản phẩm thêm vào giỏ hàng và xem giá tiền - Giúp khách hàng có lựa chọn thuận tiện, nhanh chóng để mua được sản phẩm mình cần nhanh nhất. Về phía người quản trị hệ thống: - Phải có cơ chế đăng nhập để xác định người có quyền hạn mới có thể đăng nhập vào hệ thống quản trị của website 3 - Quản lí thông tin của khách hàng, thông tin sản phẩm - Thêm các thông tin dữ liệu cập nhật lên cơ sở dữ liệu - Dễ dàng quản lý sản phẩm,danh mục sản phẩm - Tùy chọn chỉnh sửa, xóa các dữ liệu từ trang web thông qua trang của người quản trị. 4 Chương 2 Phân tích và thiết kế hệ thống 2.1 Tóm tắt kiến thức cơ bản 2.1: Hình minh họa ReactJS ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng rộng rãi để xây dựng các ứng dụng web tương tác và giao diện người dùng động.
Dưới đây là một tóm tắt về các kiến thức cơ bản của ReactJS: + Components (Thành phần): ReactJS dựa trên mô hình thành phần, trong đó mọi giao diện người dùng được chia thành các thành phần nhỏ hơn, giúp quản lý mã nguồn dễ dàng hơn. + Virtual DOM (DOM ảo): React sử dụng một cơ chế gọi là Virtual ĐỒ ÁN TỐT NGHIỆP 5 Trường Đại học Phenikaa DOM để tối ưu hóa hiệu suất. Thay vì cập nhật DOM trực tiếp, React tạo ra một bản sao ảo của DOM và so sánh sự khác biệt giữa nó và DOM thực tế, sau đó cập nhật DOM chỉ khi cần thiết. Điều này làm giảm độ trễ và tăng hiệu suất ứng dụng.
+ JSX (JavaScript XML): JSX là một phần quan trọng trong React, cho phép viết mã HTML giống với cú pháp XML trong mã JavaScript. JSX giúp dễ dàng tạo và hiển thị giao diện người dùng trong React. + State (Trạng thái): State là dữ liệu được quản lý bởi một thành phần React và có thể thay đổi theo thời gian. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng tương ứng.
+ Props (Thuộc tính): Props (ngắn gọn của "properties") là các dữ liệu được truyền từ một thành phần cha sang các thành phần con. Điều này giúp tái sử dụng thành phần và làm cho code dễ đọc hơn. Lifecycle Methods (Phương thức vòng đời): React cung cấp một loạt các phương thức vòng đời cho các thành phần, cho phép bạn thực hiện các hành động như khởi tạo, cập nhật hoặc hủy bỏ một thành phần tại các điểm thích hợp trong quá trình tồn tại của nó. + Event Handling (Xử lý sự kiện): React cho phép xử lý sự kiện trên các thành phần bằng cách gắn các hàm xử lý sự kiện vào các sự kiện DOM.
+ Conditional Rendering (Hiển thị điều kiện): React cho phép bạn hiển thị hoặc ẩn các phần của giao diện dựa trên điều kiện. Điều này được thực hiện thông qua các biểu thức điều kiện hoặc các toán tử ba ngôi. Các hooks phổ biến bao gồm `useState`, `useEffect`, và `useContext`. + Routing (Định tuyến): Để xây dựng ứng dụng đa trang, bạn có thể sử dụng các thư viện định tuyến như React Router để quản lý định tuyến và hiển thị các trang khác nhau trong ứng dụng của bạn.
6 ReactJS là một công nghệ mạnh mẽ và phổ biến cho phát triển ứng dụng web hiện đại và tương tác. Việc hiểu cơ bản về các khái niệm và tính năng chính của ReactJS là quan trọng để bắt đầu xây dựng ứng dụng React thành công.2: Hình minh họa MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) phổ biến, được thiết kế để lưu trữ và quản lý dữ liệu dạng tài liệu. Dưới đây là một tóm tắt về kiến thức cơ bản về MongoDB: + Dữ liệu dạng tài liệu: MongoDB lưu trữ dữ liệu dưới dạng tài liệu JSON (BSON - Binary JSON), giúp lưu trữ các bản ghi dạng document (tài liệu) một cách linh hoạt và có cấu trúc linh động. + Collections và Documents: Dữ liệu trong MongoDB được tổ chức trong các collections (tương tự bảng trong cơ sở dữ liệu quan hệ) và mỗi collection chứa nhiều documents (tài liệu).
Mỗi document có thể có cấu trúc khác nhau. Trường có thể chứa dữ liệu đa dạng, bao gồm số nguyên, chuỗi, mảng, tài liệu con, và nhiều kiểu dữ liệu khác. + ObjectId: Mỗi document trong MongoDB được tự động gán một trường _id chứa giá trị ObjectId duy nhất, đây là khóa chính (primary key) mặc định của document đó. ĐỒ ÁN TỐT NGHIỆP 7 Trường Đại học Phenikaa + CRUD Operations (Create, Read, Update, Delete): MongoDB hỗ trợ các hoạt động cơ bản CRUD để thêm, đọc, cập nhật và xóa dữ liệu từ cơ sở dữ liệu.
+ Query Language: MongoDB sử dụng một ngôn ngữ truy vấn để truy xuất dữ liệu từ cơ sở dữ liệu. Truy vấn MongoDB sử dụng cú pháp giống JSON để chỉ định các điều kiện tìm kiếm. + Indexing: MongoDB hỗ trợ việc tạo các chỉ mục (index) để tối ưu hóa tìm kiếm và truy vấn. Chỉ mục giúp cải thiện hiệu suất tìm kiếm trong cơ sở dữ liệu lớn.
+ Replication và Sharding: MongoDB hỗ trợ các tính năng như sao chép dữ liệu (replication) để đảm bảo sự dự phòng và phân tán dữ liệu (sharding) để mở rộng khả năng chịu tải của cơ sở dữ liệu. + Aggregation Framework: MongoDB cung cấp một bộ khung (framework) tự động để thực hiện các phép tổng hợp, xử lý dữ liệu và tính toán trên cơ sở dữ liệu. + Security: MongoDB hỗ trợ các tính năng bảo mật như quyền truy cập, xác thực và mã hóa dữ liệu để đảm bảo an toàn cho cơ sở dữ liệu. MongoDB đã trở thành một trong những cơ sở dữ liệu NoSQL phổ biến nhất, thích hợp cho các ứng dụng có dữ liệu đa dạng và cần mở rộng dễ dàng.
Hiểu cơ bản về các khái niệm và tính năng của MongoDB là quan trọng để làm việc với nó hiệu quả.3: Hình minh họa Express Express.js (thường được gọi là Express) là một khung (framework) phía máy chủ (server-side) dựa trên Node.js, được sử dụng để xây dựng ứng dụng web và API RESTful. Dưới đây là một tóm tắt về kiến thức cơ bản về Express: + Mô hình Middleware: Express sử dụng một mô hình middleware để xử lý các yêu cầu HTTP. Middleware là các hàm được thực thi tuần tự để xử lý yêu cầu trước khi chúng đến tới các xử lý (handlers) cuối cùng. Middleware có thể thực hiện các nhiệm vụ như xác thực, ghi log, cấu hình CORS, và nhiều công việc khác.
+ Routing: Express cho phép bạn xác định các tuyến đường (routes) để xử lý các yêu cầu HTTP cụ thể. Mỗi tuyến đường được liên kết với một hàm xử lý (handler) để thực hiện các logic cụ thể khi có yêu cầu tới. + HTTP Verbs: Express hỗ trợ các phương thức HTTP như GET, POST, PUT, DELETE, PATCH và nhiều phương thức khác, để xử lý các loại yêu cầu khác nhau. + Request và Response Objects: Express cung cấp đối tượng `request` và `response` để bạn có thể truy cập thông tin về yêu cầu và cung cấp phản hồi cho khách hàng.
+ Middleware và Error Handling: Bạn có thể sử dụng middleware để ĐỒ ÁN TỐT NGHIỆP 9 Trường Đại học Phenikaa xử lý lỗi (error handling middleware) và xử lý các lỗi trong ứng dụng Express. + Template Engines: Express cho phép bạn sử dụng các engine template như EJS, Handlebars, hoặc Pug để tạo và hiển thị nội dung động trên trang web. + Static Files: Express cho phép bạn phục vụ các tệp tĩnh như hình ảnh, CSS và JavaScript một cách dễ dàng bằng cách sử dụng middleware `express.