xây dựng trang web thương mại điện tử

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 t

Phân tích và thiết kế hệ thống

Tóm tắt kiến thức cơ bản

Hình 2.1.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

Copies for internal use only in Phenikaa University ĐỒ Á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

+ Hooks (Các khái niệm React Hooks): React Hooks là một tính năng giúp bạn sử dụng trạng thái và các tính năng của React trong các thành phần hàm (functional components), thay vì phải sử dụng các thành phần lớp (class components) Các hooks phổ biến bao gồm `useState`, `useEffect`, và

Để tạo ứng dụng đa trang, thư viện định tuyến như React Router đóng vai trò quan trọng trong việc quản lý định tuyến và hiển thị các trang khác nhau trong ứng dụng.

Copies for internal use only in Phenikaa University

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

Hình 2.1.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 (Field): Mỗi document trong MongoDB bao gồm các cặp key-value, gọi là các trường (field) 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 đó

+ 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

Mô hình tổng quan của hệ thống nghiên cứu

2.2.1 Website được thiết kế theo mô hình MVC

Mô hình MVC (Model-View-Controller) là một kiến trúc phát triển phần mềm được sử dụng rộng rãi trong việc xây dựng ứng dụng web và ứng

The Model-View-Controller (MVC) architectural pattern is commonly used for developing user interfaces in software applications The pattern decouples the application into three main components: the model, view, and controller The model manages the application's data and business logic, the view displays the user interface, and the controller handles user input and communication between the model and view.MVC promotes code reusability and maintainability by separating the concerns of the application It also allows for easier testing and debugging, as the components can be tested independently.The MVC pattern is widely used in web development frameworks such as Ruby on Rails, Django, and Spring MVC.

- Model đại diện cho dữ liệu và logic dữ liệu của ứng dụng Nó chứa thông tin về cách dữ liệu được lưu trữ, truy cập và xử lý Model không có thông tin về cách giao diện người dùng hoặc điều khiển ứng dụng Nó chỉ tập trung vào quản lý dữ liệu và cung cấp các phương thức để truy cập và cập nhật dữ liệu

View (Giao diện Người dùng):

- View là phần giao diện người dùng của ứng dụng Nó đại diện cho cách dữ liệu từ Model được hiển thị cho người dùng View không chứa logic kinh doanh và không thể tự mình thay đổi dữ liệu Thay vào đó, nó hiển thị thông tin dựa trên dữ liệu từ Model và gửi các tương tác người dùng đến Controller để xử lý

Controller là trung tâm xử lý logic kinh doanh và quản lý luồng điều khiển của ứng dụng Nó đóng vai trò như cầu nối giữa Model và View Từ View, Controller tiếp nhận yêu cầu của người dùng, sau đó tương tác với Model để truy xuất hoặc cập nhật dữ liệu cần thiết Cuối cùng, Controller cập nhật View để hiển thị thông tin mới cho người dùng.

Hình 2.2.1.1: Hình vẽ minh họa Mô hình MVC:

Hình 2.2.1.2: Các thành phần trong mô hình MVC

Luồng xử lí trong mô hình MVC: bạn có thể hình dung cụ thể và chi tiết qua từng bước dưới đây:

 Khi một yêu cầu của từ máy khách (Client) gửi đến Server Thì bị Controller trong MVC chặn lại để xem đó là URL request hay sự kiện

 Sau đó, Controller xử lý input của user rồi giao tiếp với Model trong MVC

 Model chuẩn bị data và gửi lại cho Controller

 Cuối cùng, khi xử lý xong yêu cầu thì Controller gửi dữ liệu trở lại View và hiển thị cho người dùng trên trình duyệt

Hình 2.2.1.3: Ý nghĩa của Mô hình MVC:

Tách biệt Chức năng: Mô hình này tách biệt các chức năng của ứng dụng thành các phần riêng lẻ, giúp dễ dàng quản lý và bảo trì mã nguồn

Mô hình MVC bảo đảm tính bảo mật bằng cách không cho phép View truy cập trực tiếp vào dữ liệu và logic kinh doanh Tất cả các tương tác với dữ liệu phải đi qua Controller, đảm bảo dữ liệu được bảo vệ khỏi truy cập trái phép.

Phát triển Đồng thời: Mô hình này cho phép nhiều nhóm phát triển làm việc đồng thời trên các phần khác nhau của ứng dụng mà không gây xung đột

Tái sử dụng Code: Bạn có thể tái sử dụng lại các phần của Mô hình MVC trong các phần của dự án khác, ví dụ: sử dụng Model hoặc Controller trong các phần của ứng dụng khác

Mô hình này giúp việc kiểm tra và gỡ lỗi trở nên dễ dàng hơn vì các thành phần riêng biệt có thể được kiểm tra độc lập Điều này cho phép các nhà phát triển xác định và sửa chữa các lỗi nhanh chóng và hiệu quả hơn, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

Mô hình MVC tách biệt logic ứng dụng (Model), giao diện người dùng (View) và các thành phần điều khiển (Controller), tăng cường tính tổ chức và dễ quản lý Điều này cho phép các thành phần hoạt động độc lập, dẫn đến hiệu quả cao hơn trong bảo trì và mở rộng ứng dụng.

2.2.3 Xác định yêu cầu người sử dụng

 Xem danh sách sản phẩm

 Xem chi tiết sản phẩm

 Đăng nhập/ Đăng ký- Đăng xuất

 Quản lý danh sách sản phẩm

 Quản lý tài khoản người dùng

2.2.4 Biểu đồ Usecase tổng quan

Hình 2.2.4.1 Biểu đồ Use case của khách hàng

- Khách hàng có thể thực hiện các thao tác:

+ Xem danh sách sản phẩm

+ Xem chi tiết sản phẩm

Copies for internal use only in Phenikaa University ĐỒ ÁN TỐT NGHIỆP Trường Đại học Phenikaa

Hình 2.2.4.2 Biểu đồ Use case quản lý giỏ hàng của khách hàng

- Quản lí giỏ hàng bao gồm:

Hình 2.2.4.3 Biểu đồ Use case tìm kiếm sản phẩm của khách hàng

- Chức năng tìm kiếm có thể:

+ Tìm kiếm theo danh mục

+ Tìm kiếm theo sản phẩm

+ Tìm kiếm theo giá tiền

Hình 2.2.4.4 Biểu đồ Use case của Admin

- Admin có thể thực hiện các chức năng

Hình 2.2.4.5 Biểu đồ Use case quản lý danh mục của Admin

- Quản lí danh mục bao gồm:

Hình 2.2.4.6 Biểu đồ Use case quản lý sản phẩm của Admin

- Quản lí sản phẩm bao gồm:

+ Cập nhật sản phẩm Copies for internal use only in Phenikaa University

Hình 2.2.4.7 Biểu đồ Use case quản lý đơn hàng của Admin

- Chức năng quản lí đơn hàng của Admin bao gồm:

Hình 2.2.4.8 Biểu đồ Use case quản lý người dùng của Admin

- Chức năng quản lí người dùng của Admin bao gồm:

Hình 2.2.4.9 Biểu đồ Use case của người dùng truy cập hệ thống

- Người dùng truy cập hệ thống có thể:

+ Xem trạng thái đơn hàng

2.2.5 Xây dựng biểu đồ lớp

2.2.6 Thiết kế cơ sở dữ liệu

Bảng 2.2.6.1: Danh sách các bảng

STT Tên thực thể Mô tả

1 Products Lưu thông tin danh sách sản phẩm

2 Users Lưu thông tin danh sách người dùng

3 Orders Lưa thông tin danh sách đặt hàng chi tiết

Bảng 2.2.6.2: Bảng products

STT Tên thực thể Kiểu dữ liệu Mô tả

3 Type String Loại sản phẩm

4 Price Number Giá sản phẩm

5 CountInStock Number Sản phẩm còn trong kho

6 Rating Number Đánh giá sản phẩm

7 Description String Miêu tả sản phẩm

Bảng 2.2.6.3: Bảng users

4 isAdmin Boolean Có phải là Admin

5 Phone Number Số điện thoại

Bảng 2.2.6.4: Bảng order

1 Name String Tên sản phẩm

3 Price Number Giá sản phẩm

Number Địa chỉ ship theo thông tin người dùng

7 Total Price Number Tổng tiền sản phẩm trên đơn

Thiết kế và xây dựng Website

Giao diện trang người dùng

Hình 3.1.1 Trang chủ hiển thị

- Giao diện trang chủ gồm :

+ Phân loại category theo loại sản phẩm

- Khi đã đăng ký tài khoản trên hệ thống , người dùng có thể đăng nhập vào để sử dụng dịch vụ Nếu chưa có tài khoản thì người dùng bấm vào tạo tài khoản

- Khi chưa có tài khoản trên hệ thống, người dùng sẽ đăng kí tài khoản bằng email và mật khẩu của mình

- Trang giỏ hàng sẽ bao gồm những sản phẩm người dùng đã bấm chọn

- Khi bấm chọn sản phẩm và bấm mua hàng ở trang giỏ hàng, hệ thống sẽ chuyển tới trang đặt hàng

- Khi chọn xong phương thức thanh toán, bấm vào đặt hàng hệ thống sẽ thông báo dòng chữ: “ Đặt hàng đặt thành công”

Hình 3.1.7 Email sau khi đặt hàng

- Khi khách hàng bấm gửi đơn hàng thì sẽ có email tự động của hệ thống phản hồi đến địa chỉ email mà khách hàng đã cung cấp

Hình 3.1.8 Trang chi tiết đơn hàng

- Giúp khách hàng có thể xem được tình trạng đơn hàng theo cập nhật từ phía người quản trị hệ thống

Hình 3.1.9 Trang chi tiết sản phẩm

- Khách hàng có thể xem chi tiết về sản phẩm, xem các sản phẩm liên quan, và xem hoặc trực tiếp bình luận đánh giá về sản phẩm.

Giao diện trang quản trị

Hình 3.2.1 Trang chủ thống kê

- Trang chủ bao gồm thống kế các sản phẩm danh mục, Số lượng đơn hàng và số lượng người dùng để người quản trị dễ dàng quản lí, kiểm soát

Hình 3.2.2 Trang quản lý sản phẩm

- Trang quản lý sản phẩm có chức năng sửa thông tin sản phẩm, xóa sản phẩm và thêm thông tin sản phẩm mới

Hình 3.2.3 Trang quản lí người dùng

- Trang quản lí người dùng giúp người quản trị quản lí người dùng đang có trong hệ thống như sửa thông tin hoặc xóa người dùng

Hình 3.2.4 Trang quản lí đơn hàng

- Giúp người quản trị có thể quản lí nhiều đơn hàng được đặt từ khách

41 hàng gồm các chức năng xem chi tiết đơn hàng được đặt, xóa đơn hàng, cập nhật trạng thái cho đơn hàng

Kiểm thử và đánh giá

Kiểm thử

Kiểm thử các chức năng của một ứng dụng là một phần quan trọng trong quá trình phát triển để đảm bảo rằng ứng dụng hoạt động đúng cách và đáp ứng các yêu cầu chức năng của nó Dưới đây là một số phương pháp và quy trình thường được sử dụng để kiểm thử các chức năng của ứng dụng:

Kiểm thử Đơn vị (Unit Testing): Kiểm thử đơn vị tập trung vào việc kiểm tra từng phần riêng lẻ của mã nguồn, như hàm hoặc phương thức, để đảm bảo rằng chúng hoạt động đúng cách Điều này thường được thực hiện bằng cách sử dụng các framework kiểm thử đơn vị như Jest cho JavaScript hoặc JUnit cho Java

Kiểm thử tích hợp kiểm tra sự tương tác giữa các thành phần hoặc mô-đun trong ứng dụng Nó đảm bảo rằng quá trình tích hợp các ứng dụng là chính xác Các công cụ kiểm thử tích hợp giao diện người dùng thường dùng bao gồm Cypress hoặc Selenium.

Kiểm thử hàm kiểm tra các chức năng cụ thể của ứng dụng thông qua các kịch bản kiểm thử để xác minh hoạt động chính xác của từng tính năng Kiểm thử này có thể thực hiện thủ công hoặc tự động bằng công cụ kiểm thử.

Kiểm thử Tự động (Automated Testing): Sử dụng công cụ kiểm thử tự động như Selenium, Appium, hoặc các thư viện kiểm thử tự động trong quá trình

43 phát triển để tự động hóa việc thực hiện các tác vụ kiểm thử, giúp tiết kiệm thời gian và đảm bảo tính nhất quán của kiểm thử

Kiểm thử Thủ công (Manual Testing): Kiểm thử thủ công là việc thực hiện kiểm thử bằng tay, bao gồm việc kiểm tra giao diện người dùng, tương tác với ứng dụng và kiểm tra các tính năng mà không cần sử dụng các công cụ tự động Kiểm thử thủ công thường được thực hiện bởi những người kiểm thử chuyên nghiệp

Kiểm thử Tiếp thị (User Acceptance Testing - UAT): Kiểm thử UAT là quá trình cho phép người dùng cuối và các bên liên quan kiểm tra ứng dụng để đảm bảo nó đáp ứng yêu cầu của họ Đây là một phần quan trọng của kiểm thử để đảm bảo rằng ứng dụng sẽ được chấp nhận và sử dụng một cách hợp pháp

Kiểm thử Hiệu suất (Performance Testing): Kiểm thử hiệu suất đảm bảo rằng ứng dụng hoạt động đúng cách trong điều kiện tải cao Điều này bao gồm kiểm tra tốc độ phản hồi, thời gian tải, và khả năng xử lý của ứng dụng trong tình huống tải lớn

Kiểm thử Bảo mật (Security Testing): Kiểm thử bảo mật kiểm tra các lỗ hổng bảo mật trong ứng dụng để đảm bảo rằng thông tin của người dùng được bảo vệ và ứng dụng không bị tấn công

Kiểm thử các chức năng là một phần quan trọng của quá trình phát triển phần mềm để đảm bảo tính ổn định, an toàn và đáp ứng của ứng dụng Phương pháp kiểm thử cụ thể có thể thay đổi tùy theo yêu cầu và quy trình phát triển của dự án cụ thể Mục đích thử nghiệm/đánh giá: Mục đích chính của quá trình kiểm thử và đánh giá là đảm bảo rằng trang web thương mại điện tử hoạt động đúng cách, đáp ứng được yêu cầu và đảm bảo tính ổn định và bảo mật Ở trong project lần này, em chọn Kiểm thử thủ công các chức năng Các cách thử nghiệm và đánh giá sau đây đã được thực hiện để kiểm tra mục đích này:

Kiểm thử tích hợp: Kiểm tra tích hợp giữa các thành phần, bao gồm

This ReactJS front-end and Express/Node.js back-end application runs flawlessly, with all components interacting seamlessly The internal copies are exclusively used within Phenikaa University.

Kiểm thử giao diện người dùng (UI): Các trang, nút bấm và chức năng hoạt động đúng cách và dễ sử dụng

Kiểm thử tích hợp thanh toán: Quá trình thanh toán diễn ra một cách đáng tin cậy và an toàn

Kiểm thử đảm bảo tính nhất quán: Dữ liệu sản phẩm, giỏ hàng và đơn hàng luôn được cập nhật và duyệt nhất quán.

Đánh giá

Bài toán trong đồ án đã là xây dựng một trang web thương mại điện tử sử dụng ReactJS, MongoDB, Express, và Node.js để cung cấp cho người dùng trải nghiệm mua sắm trực tuyến thuận tiện và an toàn Dưới đây là các kết quả đạt được trong quá trình thực hiện đồ án:

Triển khai ứng dụng ổn định: Trang web đã được triển khai và hoạt động ổn định, cho phép người dùng duyệt sản phẩm, thêm vào giỏ hàng, thực hiện thanh toán và quản lý đơn hàng

Giao diện người dùng hấp dẫn: Giao diện người dùng được thiết kế một cách hấp dẫn và thân thiện với người dùng, cung cấp trải nghiệm mua sắm tốt

Bảo mật đảm bảo: Các biện pháp bảo mật đã được triển khai để đảm bảo rằng thông tin cá nhân của người dùng được bảo vệ khỏi các mối đe dọa an ninh

Quản trị viên: Giao diện quản trị viên cho phép quản trị viên quản lý sản phẩm, danh mục và đơn hàng một cách hiệu quả

Tối ưu hiệu suất: Sử dụng caching để tối ưu hiệu suất trang web, giúp giảm thời gian tải trang và tăng trải nghiệm người dùng

Dự án đã đạt được mục tiêu chính là xây dựng một trang web thương mại điện tử hoạt động ổn định và an toàn Tuy nhiên, còn một số cải tiến và kiến nghị có thể được xem xét:

Mở rộng tính năng: Mở rộng tính năng của trang web để bao gồm đánh giá sản phẩm, chức năng tìm kiếm nâng cao, và hệ thống khuyến mãi

Kiểm thử đối với môi trường thật: Thực hiện kiểm thử trên môi trường thật để đảm bảo rằng trang web hoạt động tốt trong điều kiện thực tế

Bảo mật nâng cao: Liên tục cập nhật và nâng cấp biện pháp bảo mật để bảo vệ trang web khỏi các mối đe dọa mới

Phát triển ứng dụng di động: Xem xét phát triển ứng dụng di động để cung cấp trải nghiệm mua sắm trên nền tảng di động

Tiêu đề	Xây Dựng Trang Web Thương Mại Điện Tử
Tác giả	Nguyễn Trọng Nhật Minh
Người hướng dẫn	ThS. Vũ Quang Dũng
Trường học	Trường Đại Học Phenikaa
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Khóa Luận Tốt Nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	65
Dung lượng	2,16 MB