MỞ ĐẦU 4. MỤC TIÊU CỦA ĐỀ TÀI Với đề tài “XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE”, em đã đưa ra một số mục tiêu để xây dựng một website đáp ứng các chức năng sau: - Giới thiệu danh sách các sản phẩm đến người tiêu dùng và thông tin chi tiết của từng sản phẩm. - Hỗ trợ người tiêu dùng bookmark các sản phẩm mình yêu thích. - Hỗ trợ người tiêu dùng đánh giá và nhận xét các sản phẩm.
- Hỗ trợ người tiêu dùng thêm các sản phẩm vào giỏ hàng, mua hàng và thanh toán (trực tuyến bằng Paypal và VNPay). - Hỗ trợ người tiêu dùng quản lý các đơn hàng và hoàn trả đơn hàng nếu có lỗi. - Hỗ trợ người tiêu dùng chat và trao đổi thông tin với quản trị viên. - Hỗ trợ cửa hàng quản lý thông tin (doanh thu, kho, sản phẩm…).
- Hỗ trợ cửa hàng lưu trữ thông tin an toàn. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Qua quá trình xây dựng webiste bán hàng, em không chỉ có thêm kiến thức lý thuyết mà còn tiếp thu thêm kinh nghiệm thực tế và những kỹ thuật khi xây dựng một hệ thống với các công nghệ hiện đại. Ngoài ra, các doanh nghiệp kinh doanh có thể sử dụng webiste này để tăng doanh số, tăng thêm lượng khách hàng và giữ chân khách hàng với những sự tiện lợi từ hệ thống mang lại, đồng thời việc quản lý kinh doanh trở nên dễ dàng hơn. Bên cạnh đó, việc theo dõi và quản lý đơn hàng trở nên linh hoạt, dễ dàng hơn giúp duy trì tính chính xác và nhanh chóng trong quy trình kinh doanh bán hàng.
Trang 3 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.js là gì? Next.js là một Framework được sử dụng để xây dựng và phát triển giao diện phía Client được xây dựng dựa trên nền tảng của ReactJS.js hỗ trợ phát triển ứng dụng Web đơn trang (Single-Page Applications) và ứng dụng Web tĩnh (Static Websites) với hiệu suất cao, hỗ trợ SSR (Server-Side Rendering) và tạo trang tĩnh (SSG - Static Site Generation).js sử dụng mô hình kiến trúc "Pages and Components". Mỗi trang được đại diện bởi một tệp tin trong thư mục "pages".js sẽ tự động xử lý định tuyến và điều hướng cho các trang này. Các thành phần (components) có thể được tạo và sử dụng lại cho các trang khác nhau. Các tính năng nổi bật của Next.js hỗ trợ SSR một cách dễ dàng.
Khi một yêu cầu đến từ máy khách, Next.js có thể tạo và trả về trang hoàn chỉnh từ phía máy chủ. Điều này giúp cải thiện tốc độ tải trang ban đầu và cải thiện trải nghiệm người dùng. SSR cũng hữu ích cho SEO (Search Engine Optimization), vì các công cụ tìm kiếm có thể hiểu được nội dung được hiển thị từ phía máy chủ. [2] Trang 4 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Hình 2.
SSR – Server-Side Rendering Next.js hỗ trợ tạo trang tĩnh trước thời gian (pre-rendering). Trang tĩnh được tạo ra trong quá trình xây dựng ứng dụng và được lưu trữ dưới dạng các tệp HTML tĩnh. Khi một yêu cầu đến, Next.js chỉ cần phục vụ các tệp HTML đã được tạo trước, giúp cải thiện hiệu suất và giảm tải cho máy chủ.js cung cấp một hệ thống định tuyến mạnh mẽ. Bằng cách sử dụng các tệp tin trong thư mục "pages", bạn có thể xác định các tuyến đường và điều hướng cho ứng dụng của mình.js hỗ trợ định tuyến động, cho phép bạn tạo các tuyến đường có tham số và tùy chỉnh quy tắc định tuyến.
Hiện nay, Next.js được đánh giá là một Framework mạnh mẽ cho việc phát triển ứng dụng Web ở phía Client. Với các khả năng mạnh mẽ như hỗ trợ SSR, tạo trang tĩnh, quản lý trạng thái linh hoạt,… Ngoài ra, nó còn là một nền tảng đáng tin cậy và hiệu quả cho việc phát triển và xây dựng ứng dụng Web hiện nay. Trang 5 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Ưu và nhược điểm của Next.js - Mang lại khả năng SEO mạnh mẽ hơn.
- Hỗ trợ cả SSG (Static-Side Generation), SSR (Server-Side Rendering) Ưu và CSR (Client-Side Rendering) điểm - Tự động code spilting giúp tối ưu hóa hiệu suất khi load trang. - Mang đến cho người dùng trải nghiệm tốt hơn. - Mang đến tính bảo mật cao về dữ liệu - Một số plugin và thư viện hỗ trợ có thể cần phải tùy chỉnh lại để có thể Nhược sử dụng được trong Next. điểm - Bị giới hạn trong việc định tuyến trên tệp.
Người phát triển không thể thay đổi cách mà các trang (pages) giao tiếp với nhau. Ưu và nhược điểm của Next.js Trang 6 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Cơ sở dữ liệu phi quan hệ (NoSQL) là gì? NoSQL ra đời nhằm đáp ứng nhu cầu lưu trữ, quản lý và truy xuất dữ liệu cần hiệu suất cao và tính linh hoạt. NoSQL cho phép mở rộng một cách dễ dàng và linh hoạt.
NoSQL ra đời chủ yếu tập trung vào các kho lưu trữ dữ liệu phân tán với nhu cầu lưu trữ khối lượng lớn dữ liệu. Một vài Cơ sở dữ liệu phi quan hệ (NoSQL) như: MongoDB, CouchDB, Redis, DynamoDB,… 1. MongoDB là gì? MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL. Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đích hướng đến đối tượng.
MongoDB hoạt động dựa vào các khái niệm Collection và Document. Đồng thời, nó có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng. [8] Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt. Điều này cho phép dữ liệu không cần thiết phải tuân theo bất kỳ một dạng cấu trúc nào.
Vì thế, MongoDB có thể lưu trữ những dữ liệu có cấu trúc đa dạng và phức tạp. Dữ liệu trong MongoDB được lưu bằng định dạng kiểu JSON. Logo MongoDB Một số khái niệm quan trọng khi làm việc với MongoDB: - Collections: Có thể hiểu Collections tương đương mới Bảng (Table) ở cơ sở dữ liệu SQL. Một Collection là tập hợp các Documents.
Khi khởi tạo Trang 7 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Collection không cần định nghĩa trước các cột, hàng hay kiểu dữ liệu. Một Collection sẽ thuộc về một Database duy nhất. - Documents: Là một bản ghi thuộc Collection. Có cấu trúc là một JSON.
Gồm các cặp key – value. Mỗi Key sẽ đại điện cho tên của Field (Trường). Các Documents trong một Collection không nhất thiết phải có cùng số cặp key – value hay cấu trúc giống nhau. Ngoài ra, để giao tiếp giữa MongoDB và Express thì Mongoose là một thư viện khá hữu ích.
Mongoose là một thư viện NodeJS mô hình hóa đối tượng (Object-Document Mapper - ODM) được sử dụng để tương tác giữa MongoDB và Express. Cung cấp một cách dễ dàng để định nghĩa các mô hình (Models) của các đối tượng dựa trên Schema để tương tác với MongoDB. Ngoài ra, Mongoose còn cung cấp các phương thức làm việc và xử lý các hoạt động như thêm, sửa, xóa và cập nhật dữ liệu trên MongoDB. Truy vấn dữ liệu: Khi muốn truy vấn dữ liệu từ Express đến MongoDB có thể sử dụng Mongoose hoặc MongoDB Driver để tạo ra các truy vấn phức tạp để truy vấn dữ liệu cần thiết.
MongoDB hỗ trợ các truy vấn mạnh mẽ như truy vấn theo điều kiện, truy vấn theo phạm vi,… 1. Ưu và nhược điểm của MongoDB Ưu - Có hiệu suất, tốc độ truy vấn dữ liệu cao. điểm - Tính linh hoạt và dễ dàng mở rộng. Nhược - Vì là một Cơ sở dữ liệu phi quan hệ, nên cần phải quản lý tốt mối quan điểm hệ giữa các bảng với nhau trách gây ra xung đột dữ liệu.
Ưu và nhược điểm của MongoDB Trang 8 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Cơ sở dữ liệu quan hệ là gì? Cơ sở dữ liệu quan hệ (Relational Database) là một loại cơ sở dữ liệu dựa trên mô hình quan hệ, trong đó dữ liệu được tổ chức thành các bảng (table). Mỗi bảng bao gồm các hàng (row) và cột (column), tương tự như một bảng tính (spreadsheet). Các hàng đại diện cho các bản ghi (record) và các cột đại diện cho các trường (field).
[6] Một vài Cơ sở dữ liệu quan hệ như: MySQL, Microsoft SQL Server, PostgreSQL, Oracle Database, SQLite… 1. MySQL là gì? MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở được phát triển bởi công ty MySQL AB, hiện thuộc sở hữu của Oracle Corporation. MySQL được sử dụng rộng rãi trong các ứng dụng web để lưu trữ, truy xuất và quản lý dữ liệu một cách hiệu quả. Đây là một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất thế giới, đặc biệt là trong cộng đồng phát triển web.
Logo MySQL Một số khái niệm quan trọng khi làm việc với MySQL: - Bảng (Table): Một cấu trúc tổ chức dữ liệu trong cơ sở dữ liệu, gồm các hàng (rows) và cột (columns). Mỗi bảng thường đại diện cho một thực thể trong hệ thống như khách hàng, sản phẩm, đơn hàng, v.v Trang 9 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT - Hàng (Row): Còn gọi là bản ghi (record), mỗi hàng trong bảng chứa dữ liệu về một đơn vị thực thể. Ví dụ, một hàng trong bảng khách hàng có thể chứa thông tin về một khách hàng cụ thể. - Cột (Column): Còn gọi là trường (field), mỗi cột trong bảng đại diện cho một thuộc tính của thực thể.
Ví dụ, bảng khách hàng có thể có các cột như ID, tên, địa chỉ, số điện thoại. Ngoài ra, để giao tiếp giữa MySQL và NextJS thì Prisma là một thư viện khá hữu ích. Prisma là một ORM (Object-Relational Mapping) hiện đại cho Node.js và TypeScript, giúp làm việc với cơ sở dữ liệu một cách dễ dàng, linh hoạt và an toàn. Khi sử dụng Prisma cùng với Next.js, chúng ta có thể xây dựng các ứng dụng web mạnh mẽ với khả năng truy cập và quản lý cơ sở dữ liệu MySQL một cách hiệu quả.
[10] Sử dụng Prisma với Next.js giúp chúng ta quản lý cơ sở dữ liệu MySQL một cách trực quan và hiệu quả. Bằng cách sử dụng Prisma Client, chúng ta có thể truy vấn và thao tác dữ liệu dễ dàng trong các API routes và các hàm server- side rendering của Next.js, giúp xây dựng các ứng dụng web phức tạp một cách nhanh chóng và an toàn 1. Ưu và nhược điểm của MySQL - Có hiệu suất, tốc độ truy vấn dữ liệu cao. Ưu - Có khả năng mở rộng và tính bảo mật cao.
điểm - Là mã nguồn mở và miễn phí. - Có cộng đồng hỗ trợ rộng lớn. Nhược - Hạn chế trong tích hợp với các công cụ quản trị. điểm - Gặp vấn đề về hiệu suất với dữ liệu lớn.
Ưu và nhược điểm của MySQL. Trang 10 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Shadcn/ui là gì?