Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website thương mại điện tử về nội thất

Về nội dung đề tài & khối lượng thực hiện: Nội dung đề tài rõ ràng, bám sát mục tiêu xây dựng một website thương mại điện tử về nội thất với các chức năng cần thiết.. Ưu điểm: Các chức n

KIẾN THỨC CƠ BẢN

TỔNG QUAN VỀ MERN STACK

2.1.1 Khái niệm về MERN Stack

MERN viết đầy đủ là MERN stack, là một bộ công nghệ mã nguồn mở liên quan đến JavaScript Gồm các công nghệ: MongoDB, Express, React/React Native và Nodejs

MERN stack đã được công nhận là một lựa chọn đáng tin cậy và hiệu quả cho việc phát triển các ứng dụng web Hơn nữa, tính chất open source của các thành phần trong MERN stack đảm bảo sự hỗ trợ rộng rãi từ cộng đồng, các bản cập nhật liên tục và truy cập vào một loạt các tài nguyên

2.1.2 Các thành phần trong MERN stack

MERN stack là một tập hợp các công nghệ dựa trên JavaScript được sử dụng cùng nhau để phát triển các ứng dụng web Stack này bao gồm MongoDB, Express, React và Node.js

React là một thư viện JavaScript mã nguồn mở cho front-end, dùng để xây dựng giao diện người dùng dựa trên các thành phần

MongoDB là một cơ sở dữ liệu có dạng NoSQL Đặc điểm của nó là không có ràng buộc quan hệ, phân tán, mã nguồn mở, có khả năng lưu trữ, xử lý một lượng rất nhỏ cho tới lượng dữ liệu cực lớn Trong mô hình MEAN stack, MongoDB đóng vai trò là cơ sở dữ liệu cho website và có khả năng kết nối dễ dàng với NodeJS và ExpressJS

NodeJS là một môi trường cho phép chạy JavaScript ở phía server mà không cần trình duyệt Nó có nhiệm vụ tiếp nhận những Request và gửi trả những Response nếu có, cụ thể trong mô hình MEAN stack thì những Request này sẽ đến từ Angular ở phía client hay browser của người dùng NodeJS cũng có nhiệm vụ xử lý những tính toán logic ở phía server, xử lý vấn đề bảo mật như xác thực, phân quyền… hay khả năng thao tác với các tập tin và giao tiếp với cơ sở dữ liệu MongoDB

ExpressJS là một framework của NodeJS, nó cũng cấp thêm những chức năng giúp cho quá trình làm việc bằng NodeJS được dễ dàng hơn, cụ thể có thể là giúp dễ

17 dàng hơn khi xử lý những Request tới những địa chỉ khác nhau từ phía người dùng Nói chung, ExpressJS giúp cho công việc xử lý ở phía backend trở nên dễ dàng và nhanh chóng hơn

2.1.3 Cách thức MERN stack hoạt động

Hình 2 Cách thức Mern stack hoạt động

2.1.4 Ưu điểm của MERN Stack

Vì MERN stack là một môi trường JavaScript toàn diện, nó cung cấp một trải nghiệm mã nguồn mở, nhất quán và có khả năng mở rộng bao trùm toàn bộ quy trình phát triển ứng dụng và phù hợp với lập trình viên ở các mức độ kỹ năng khác nhau Nó cho phép các developer sử dụng một ngôn ngữ duy nhất và một bộ công cụ nhất quán để xây dựng cả front-end và back-end của ứng dụng của họ, giảm thiểu thời gian và độ phức tạp của phát triển

Và vì MERN stack là một framework mã nguồn mở phổ biến, các developer sẽ có được một cộng đồng nhiệt tình và hỗ trợ để chia sẻ kiến thức, giải quyết vấn đề và học hỏi liên tục Ngoài ra, việc không có phí bản quyền có thể mang lại những khoản tiết kiệm chi phí đáng kể

MERN stack xuất sắc trong việc xây dựng các giao diện người dùng tương tác và có khả năng mở rộng Điều này làm cho nó trở thành một lựa chọn tốt cho việc xây dựng các ứng dụng phải xử lý lượng truy cập lớn và đáp ứng sự tăng trưởng nhanh chóng Phần lớn khả năng mở rộng này là nhờ vào việc sử dụng MongoDB, một cơ sở dữ liệu định hướng tài liệu nổi tiếng với tốc độ và hiệu quả trong các hoạt động lưu trữ và truy xuất dữ liệu

MERN stack hỗ trợ nhiều tùy chọn triển khai và nền tảng, bao gồm nhiều môi trường dựa trên đám mây Sự linh hoạt này cho phép các developer chọn nền tảng đám mây phù hợp nhất với yêu cầu của họ

Ngoài ra, MERN stack cung cấp một trải nghiệm phát triển nhất quán trên các nền tảng đa dạng Điều này hữu ích cho việc di chuyển ứng dụng giữa các nền tảng khác nhau, chẳng hạn từ Amazon Web Services (AWS) sang Oracle Cloud Infrastructure (OCI), mà không cần phải thay đổi mã nhiều Khả năng di chuyển này giúp tiết kiệm thời gian và công sức quý báu và đảm bảo sự đồng nhất về giao diện và chức năng, bất kể nền tảng cơ bản.

NODEJS

NodeJS là một framework môi trường hỗ trợ dịch và thực thi chương trình được viết bằng JavaScript mà không cần dùng tới trình duyệt

NodeJS ra đời nhờ những lập trình viên đầu tiên của JavaScript mở rộng nó từ một ngôn ngữ chỉ có thể thực thi trên trình duyệt thành ngôn ngữ có thể thực thi độc lập trên máy tính

NodeJS cũng giống với trình duyệt hiện nay, được chạy dựa trên V8 JavaScript engine - công cụ giúp trình duyệt dịch và thực thi JavaScript Ngoài ra, NodeJS cung cấp một số thư viện không có sẵn trong V8 engine

● Một số khái niệm tiêu biểu trong NodeJS

- Event: mỗi một thao tác, yêu cầu (request) đến server đều được

NodeJS xem là một sự kiện (event)

- Event Queue: hàng đợi sự kiện là nơi tất cả các sự kiện (event) đã đi vào sẽ lần lượt được xử lý theo cơ chế FIFO, tức là các sự kiện đến server trước sẽ được NodeJS xử lý trước, các sự kiện đến server sau sẽ được xử lý sau

- Callbacks: là các thao tác, các xử lý, các hàm sẽ được thực hiện sau khi đã thực thi hoàn thành một hàm định nghĩa callback Việc sử dụng callback giúp cho lập trình viên quản lý các vấn đề về

- Message: nội dung thông báo tương ứng với từng callback

- Blocking I/O: là cơ chế được ứng dụng trong phần lớn các ngôn ngữ server-side, cơ chế này quản lý các request đến server và lần lượt cho thực hiện yêu cầu của request tiếp theo khi request đang xử lý đã hoàn thành Từ đây dễ thấy được rằng nếu các yêu cầu xử lý của request đến sớm tiêu tốn nhiều thời gian thì các request đến sau bắt buộc phải đợi toàn bộ thời gian xử lý này Với NodeJS việc quản lý các request yêu cầu được thay thế bằng cơ chế xử lý Non-Blocking I/O để giải quyết vấn đề thời gian chờ nêu trên

- Thread Pool: là một chương trình viết bằng ngôn ngữ C++ được tích hợp bên trong NodeJS, chương trình này cho phép xử lý đa luồng Đây chính là môi trường xử lý chính cho tất cả tác vụ được server NodeJS xử lý và các tác vụ này cũng được xử lý trên các luồng khác nhau

- Event Loop: là một vòng lặp vô tận, nó chuyển các yêu cầu đã nhận sang Thread Pool, đồng thời mỗi một yêu cầu cũng được tự động đăng ký một Callback, khi yêu cầu được xử lý xong hàm Callback tương ứng sẽ được thực thi

Nguyên tắc hoạt động quan trọng nhất tạo nên khả năng xử lý với tốc độ cao của NodeJS đến từ việc xử lý Non-Blocking Quá trình xử lý này cho phép NodeJS nhận và xử lý đồng thời nhiều tác vụ thông qua duy nhất một luồng xử lý (Single thread) thay vì tạo nhiều luồng xử lý tương ứng với các request ở các ngôn ngữ Server truyền thống

20 đã có Các tác vụ được nhận vào luồng xử lý nếu không được quy định tuần tự thực hiện (phải hoàn thành công việc A trước rồi sau đó bắt đầu thực hiện công việc công việc B) sẽ được cho phép truy cập tài nguyên song song lẫn nhau mà không bị khóa lại (Blocking) đợi tác vụ trước đó Từ đó mà những tác vụ diễn ra không liên quan đến nhau có thể xử lý song song độc lập với nhau, rút ngắn lượng lớn thời gian xử lý cho server NodeJS

Kết hợp với xử lý quá trình xử lý Non-Blocking là Callbacks và Event Loop giúp cho NodeJS quản lý tất cả các tác vụ được được thực thi Cụ thể khi một tác vụ được xử lý Non-Blocking hoàn thành sẽ gửi về 1 Callback với ý nghĩa thông báo với hệ thống rằng tác vụ đã thực hiện xong hoàn toàn Trước đó khi các tác vụ này được định nghĩa thì callback của từng tác vụ cũng đã được đưa vào Event Table để chờ các sự kiện (Event) cho phép thực thi Khi Event mong chờ của tác vụ được diễn ra cũng là lúc các message của tác vụ đang chờ trong Event Table được di chuyển sang Event Queue chờ thực hiện theo nguyên tắc “đến trước thực hiện trước” (First In First Out - FIFO) Song song với quá trình này là quá trình Event Loop thực hiện một vòng lặp vô tận kiểm tra có message nào đang đợi trong Event Queue hay không và Thread Pool có đang thực hiện tác vụ nào hay không, nếu đồng thời có message đang chờ và Thread Pool có thể tiếp nhận tác vụ Event Loop sẽ đưa phần tử đầu tiên của Queue vào Thread Pool xử lý và gửi về callback khi tất cả các message quy định callback tương ứng đã hoàn thành Nếu không còn message nào trong Event Queue vòng lặp Event Loop vẫn luôn luôn được chạy để kiểm tra và xử lý ngay khi có tác vụ chờ

Tổng thể với sự kết hợp giữa các đặc trưng tiêu biểu: Non-Blocking I/O, Callbacks, Event Loop một server NodeJS xử lý bất đồng bộ (asynchronous) các đồng bộ các tác vụ được yêu cầu và trả về kết quả ngay khi các tác vụ được hoàn thành thông qua callback Còn quá trình xử lý và phản hồi callback này được xử lý với sự điều phối, quản lý của vòng lặp vô tận xử lý sự kiện Event Loop lấy từng message của quy định callback thực hiện với tài nguyên hệ thống và phản hồi callback khi tất cả message quy định callback tương ứng đã hoàn thành

NodeJS cung cấp khả năng mở rộng cao NodeJS được nhận xét là dễ mở rộng chương trình cả về chiều rộng lẫn chiều sâu

Vì JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất Những lập trình viên đã biết JavaScript có thể chuyển sang NodeJS mà không gặp nhiều khó khăn

Sử dụng NodeJS, lập trình viên sẽ chỉ cần sử dụng một ngôn ngữ lập trình duy nhất là JavaScript cho cả phần front-end và back-end

Nhờ có tốc độ thông dịch và thực thi nhanh, NodeJS có thêm lợi thế để được chọn làm ngôn ngữ phát triển server-side hiệu quả

Cộng đồng sử dụng NodeJS lớn mạnh cũng giúp các lập trình viên mới tiếp xúc với NodeJS dễ hòa nhập, học hỏi và tháo gỡ khó khăn

Có được sự hỗ trợ từ các công cụ thông dụng tích hợp sẵn trong NodeJS Lập trình viên có thể dễ dàng kiểm tra mã nguồn đã chạy đúng hay chưa với Jasmin trong việc tạo các unit test Tương tự khi cài đặt những thư viện mới phục vụ cho dự án, Node package manager (npm) sẽ là công cụ hỗ trợ đắc lực

Dễ để cho lập trình viên có kinh nghiệm tìm hiểu nhưng lại khá khó cho người mới bắt đầu Đặc biệt là những lập trình viên quen với kiểu lập trình tuần tự (Synchronous)

Vì nó là công nghệ mới, vậy nên thường chỉ thích hợp với những start up Những dự án lớn, quan trọng của các công ty lớn sẽ ít chọn NodeJS để làm.

EXPRESSJS

Express là một framework nhỏ nhưng linh động được xây dựng trên nền tảng NodeJS, framework này cung cấp các chức năng mạnh mẽ để phát triển các ứng dụng web và mobile

Express được sinh ra để làm đơn giản hóa quá trình cấu hình định tuyến, giao tiếp giữa client với server cho lập trình viên Hiện tại framework này đã có thêm nhiều

22 gói trung gian (middleware packages) hỗ trợ đơn giản hóa công việc của lập trình viên như: body-parser, cors, timeout,

Express đang là một trong những framework phổ biến nhất trong lập trình các ứng dụng server-side và được áp dụng trong nhiều framework sử dụng Javascript khác

- Express.js cung cấp một bộ công cụ và API giúp xử lý các phương thức HTTP và quản lý tài nguyên một cách dễ dàng và hiệu quả

- Cộng động đông, phát triển

- Dễ dàng sử dụng, tiếp cận cho người mới

- Tích hợp dễ dàng với các thư viện và công nghệ khác

- Sự linh hoạt trong việc phát triển do đó dẫn đến mỗi nhà phát triển có cách tiếp cận khác nhau gây khó khăn trong việc tìm hiểu mã nguồn của người khác

- Sự linh hoạt cho phép tiếp cận nhiều cách khác nhau

- Thư viện phổ biến trong cộng đồng NodeJs

REACTJS

ReactJS là một thư viện JavaScript được sử dụng để xây dựng các thành phần UI có thể tái sử dụng Theo tài liệu chính thức của React, định nghĩa sau đây được cung cấp:

React là một thư viện để xây dựng các giao diện người dùng có thể kết hợp được

Nó khuyến khích việc tạo ra các thành phần UI có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian Nhiều người sử dụng React như là V trong MVC React trừu tượng hóa DOM khỏi bạn, cung cấp một mô hình lập trình đơn giản hơn và hiệu suất tốt hơn React cũng có thể render trên server sử dụng Node và có thể cung cấp sức mạnh cho các ứng dụng native sử dụng React Native React triển khai luồng dữ liệu phản ứng một chiều, giảm thiểu mã boilerplate và dễ dàng hơn để hiểu so với ràng buộc dữ liệu truyền thống

Sử dụng virtual DOM là một đối tượng JavaScript Điều này sẽ cải thiện hiệu suất của ứng dụng, vì virtual DOM của JavaScript nhanh hơn so với DOM thông thường

Có thể được sử dụng cả trên phía client và server, cũng như với các framework khác

Các pattern về component và dữ liệu cải thiện khả năng đọc mã, giúp duy trì các ứng dụng lớn hơn dễ dàng hơn

Chỉ bao gồm lớp view của ứng dụng, do đó bạn vẫn cần chọn các công nghệ khác để có một bộ công cụ hoàn chỉnh cho phát triển

Sử dụng inline templating và JSX, điều này có thể gây khó khăn cho một số developer.

MONGODB

MongoDB là một cơ sở dữ liệu không sử dụng cấu trúc (NoSQL) được thiết kế để lưu trữ và truy xuất dữ liệu một cách linh hoạt Trái ngược với các cơ sở dữ liệu quan hệ, MongoDB không sử dụng các bảng, hàng, và cột để lưu trữ dữ liệu Thay vào đó, MongoDB sử dụng lưu trữ dữ liệu dưới dạng tài liệu BSON (Binary JSON), mỗi tài liệu tương ứng với một bản ghi độc lập Do đó, trong một collection, các tài liệu có thể có kích thước và cấu trúc khác nhau Sự linh hoạt này giúp MongoDB xử lý dữ liệu động và đa dạng một cách hiệu quả

- Dễ dàng cài đặt: Quá trình cài đặt MongoDB là tương đối đơn giản và nhanh chóng, không mất quá 30 phút để hoàn thành Có thể bắt đầu sử dụng MongoDB một cách dễ dàng và nhanh chóng sau quá trình cài đặt

- Tính linh hoạt: Dữ liệu trong MongoDB linh hoạt vì nó được lưu trữ dưới dạng các tài liệu JSON Các tài liệu JSON có thể có bất kỳ số lượng trường nào, với bất kỳ kiểu dữ liệu nào Điều này cho phép lưu trữ dữ liệu một cách linh hoạt,

- Tích hợp nhiều ngôn ngữ: MongoDB có thể được tích hợp với nhiều ngôn ngữ lập trình phổ biến, bao gồm JavaScript, Python, Java, Ruby, Node.js, và nhiều ngôn ngữ

24 khác MongoDB cung cấp các driver chính thức cho các ngôn ngữ này, giúp việc truy cập và quản lý cơ sở dữ liệu MongoDB trở nên dễ dàng

- Không có ràng buộc: MongoDB không có các ràng buộc dữ liệu như RDBMS, vì vậy khi thao tác với MongoDB, cần hết sức cẩn thận để tránh các lỗi dữ liệu

- Không hỗ trợ JOIN: MongoDB không hỗ trợ JOIN giống như Cơ sở dữ liệu quan hệ, có thể mã hóa thủ công nhưng có thể gây chậm và ảnh hưởng hiệu suất

- Tính linh hoạt và độ mở rộng

- Tương thích tốt với NodeJs thông qua Mongoose

CHATBOT

- Chatbot là các chương trình máy tính được thiết kế để mô phỏng cuộc trò chuyện của con người Chatbot sử dụng GPT-4, một mô hình ngôn ngữ tự nhiên tiên tiến, có khả năng tạo ra các phản hồi văn bản dựa trên đầu vào của người dùng

- GPT-4 (Generative Pre-trained Transformer 4) là phiên bản thứ tư của loạt mô hình GPT do OpenAI phát triển GPT-4 được huấn luyện trên một lượng lớn dữ liệu văn bản và có khả năng hiểu và tạo ra ngôn ngữ tự nhiên với độ chính xác cao

- Huấn Luyện Trước (Pre-training): GPT-4 được huấn luyện trên một tập dữ liệu rất lớn bao gồm sách, bài báo, trang web, và nhiều nguồn khác để học cách sử dụng ngôn ngữ

- Điều Chỉnh (Fine-tuning): Sau khi huấn luyện trước, mô hình được điều chỉnh trên các tập dữ liệu cụ thể để cải thiện hiệu suất trong các nhiệm vụ nhất định

- Khả năng hiểu biết tốt, tạo ra ngôn ngữ gần giống với ngôn ngữ con người

- Có thể thực hiện nhiều nhiệm vụ khác nhau trong cùng một khung hình

- Độ chính xác của thông tin đôi lúc chưa cao

- Yêu cầu tài nguyên để tính toán và triển khai

PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ

- Giao diện và thiết kế: Website có một giao diện đẹp và hấp dẫn Thiết kế website sử dụng màu sắc tươi sáng và hình ảnh chất lượng cao, tạo cảm giác trực quan và hứng thú Các thành phần giao diện được bố trí một cách hợp lý và dễ hiểu, giúp người dùng dễ dàng tìm kiếm thông tin và sản phẩm

- Trải nghiệm người dùng: Website cung cấp một trải nghiệm người dùng tốt Quá trình mua hàng được thực hiện một cách thuận tiện và dễ dàng, với các tùy chọn thanh toán và giao hàng linh hoạt

- Nhược điểm : Giao diện quá nhiều chữ gây rối mắt , thanh menu dọc chưa có nhiều thông tin như event, một số loại sách tiêu biểu, chưa tạo nhiều event cho khách hàng

- Giao diện và thiết kế: Website nội thất “Zara Home” có giao diện sạch đẹp và chuyên nghiệp Thiết kế website tập trung vào hiển thị sản phẩm và nội dung chính, giúp người dùng dễ dàng tìm kiếm thông tin và mua sắm

- Nội dung: Website cung cấp nội dung đầy đủ về các sản phẩm, bao gồm thông tin chi tiết, giá cả và đánh giá từ khách hàng Điều này giúp người dùng có đủ thông tin để đưa ra quyết định mua hàng

- Tìm kiếm sản phẩm: Giao diện tìm kiếm trên trang web có thể cần được cải thiện để người dùng dễ dàng tìm kiếm và lọc sản phẩm theo các tiêu chí cụ thể

PHÂN TÍCH CHỨC NĂNG HỆ THỐNG

Bảng 1 Phân tích chức năng hệ thống

- Quản lý loại sản phẩm

- Quản lý thông tin sản phẩm

- Quản lý danh mục sản phẩm

- Quản lý địa chỉ giao hàng

- Quản lý thông tin cá nhân

- Đặt hàng và thanh toán

- Theo dõi trạng thái đơn hàng

- Xem lịch sử đơn hàng

- Xem thông tin sản phẩm

- Quản lý danh sách yêu thích

- Có các chức năng cơ bản của người dùng

- Quản lý danh sách người dùng

- Cập nhật trạng thái đơn hàng

PHÂN TÍCH YÊU CẦU

- Đáp ứng nhu cầu thị trường, thông tin sản phẩm luôn được cập nhật đáp ứng nhu cầu của người mua

- Hỗ trợ tư vấn người mua sản phẩm, tiết kiệm được chi phí và thời gian

- Màu sắc bắt mắt phù hợp với lĩnh vực quảng cáo giới thiệu marketing

- Dễ sử dụng cho khách hàng

- Hỗ trợ quản trị viên quản lý tốt website

MÔ HÌNH HÓA YÊU CẦU CHỨC NĂNG

3.4.2.1 Các chức năng dành cho Admin

Hình 6 Usecase Admin đăng nhập

Bảng 2 Usecase Admin đăng nhập

Tên Usecase Đăng nhập admin

Mô tả Usecase Usecase này cho phép admin đăng nhập vào hệ thống, khôi phục lại mật khẩu

Tiền điều kiện Không có

Hậu điều kiện Đăng nhập thành công

1 Người dùng truy cập vào trang đăng nhập

2 Hệ thống giao diện đăng nhập

3 Người dùng nhập thông tin tên người dùng và mật khẩu

4 Hệ thống kiểm tra thông tin hợp lệ

5 Hệ thống đăng nhập cho người dùng thành công

3a Người dùng chọn nút quên mật khẩu, hệ thống điều hướng đến trang quên mật khẩu

3b Người dùng nhập email khôi, xác nhận mật khẩu, nhập mã xác nhận

3c Hệ thống xác nhận khôi phục mật khẩu thành công, chuyển hướng đến trang đăng nhập, Tiếp tục các bước 3, 4, 5

Luồng ngoại lệ 4a Hệ thống kiểm tra thông tin không hợp lệ, Usecase kết thúc

Hình 7 Usecase Admin xem báo cáo Bảng 3 Usecase Admin xem báo cáo

Tên Usecase Xem báo cáo

Use case này cho phép Admin thực hiện xem thống kê báo cáo doanh thu của toàn hệ thống, theo tháng, theo năm hoặc của từng khách hàng

Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý hệ thống với vai trò

1 Admin vào phần “Manager” và chọn phẩn xem thống kê

2 Hệ thống hiển thị các kết quả thống kê

Luồng ngoại lệ Không có

Hình 8 Usecase Admin quản lý người dùng Bảng 4 Usecase Admin quản lý người dùng

Tên Usecase Quản lý người dùng

Mô tả Usecase Use case này cho phép Admin thực hiện thao tác xem thông tin nguyền dùng và cập nhật quyền người dùng

+ Thông báo thao tác thực hiện thành công

+ Các thay đổi được lưu vào hệ thống

1 Admin chọn chức năng “Quản lý người dùng”

2 Hệ thống hiển thị danh sách tất cả các người dùng của hệ thống quản lý

3 Admin chọn người dùng cần cập nhật quyền, chọn quyền mới và chọn “Cập nhật”

4 Hệ thống vô hiệu hóa người dùng Admin đã chọn và thông báo

“Cập nhật thành công thành công”

Luồng thay thế Không có

Hình 9 Usecase Admin quản lý đơn hàng Bảng 5 Usecase Admin Quản lý đơn hàng

Tên Usecase Quản lý đơn hàng

Mô tả Usecase Use case này cho phép Admin thực hiện thao tác xem thông tin chi tiết đơn hàng, cập nhật trạng thái đơn hàng và hủy đơn hàng

1 Admin chọn chức năng “Order” trong danh mục “Manager”

2 Hệ thống hiển thị danh sách đơn hàng trên hệ thống

3 Admin chọn đơn hàng cần cập nhật từ processing sang dispathced để xác nhận đơn hàng

5 Hệ thống thông báo thành công và cập nhật trạng thái đơn hàng từ PROCESSING sang DISPATHED

Luồng thay thế 3a Admin chọn “Cancel Order” để hủy đơn hàng

4b Hệ thống kiểm tra, có các thông tin thay đổi không hợp lệ

5b Thông báo lỗi, Use case dừng lại

Hình 10 Usecase Admin quản lý sản phẩm Bảng 6 Usecase Admin Quản lý sản phẩm

Tên Usecase Quản lý sản phẩm

Mô tả Usecase Use case này cho phép Admin thực hiện thao tác xem, sửa sản phẩm, vô hiệu xóa và hủy vô hiệu hóa sản phẩm

1 Admin chọn chức năng “Quản lý sản phẩm”

2 Hệ thống hiển thị danh sách tất cả các sản phẩm

4 Hệ thống hiện giao diện để Admin điền thông tin tạo mới sản phẩm

5 Admin nhập thông tin sau đó chọn “Tạo”

7 Hệ thống lưu thông tin sản phẩm vào thông báo “Thao tác thành công”

3a Admin chọn sản phẩm cần cập nhật thông tin và chọn “Sửa” 4a Hệ thống hiện form để Admin điền thông tin cập nhật sản phẩm 5a Admin sửa thông tin sản phẩm sau đó chọn “Sửa”

Tiếp tục thực hiện bước 6 và bước 7

3b Admin chọn sản phẩm cần vô hiệu hóa và chọn “Vô hiệu hóa” Tiếp tục thực hiện bước 7

3c Admin chọn sản phẩm cần hủy vô hiệu hóa và chọn “Hủy vô hiệu hóa”

Tiếp tục thực hiện bước 7

6a Hệ thống kiểm tra các thông tin nhập vào không hợp lệ 7a Thông báo lỗi “Thông tin sản phẩm không hợp lệ”, Usecase dừng lại

Hình 11 Usecase Admin quản lý danh mục Bảng 7 Usecase Admin Quản lý danh mục

Tên Usecase Quản lý danh mục

Use case này cho phép Admin thực hiện thao tác thêm, sửa đổi danh mục và vô hiệu hóa, hủy vô hiệu hóa danh mục trong hệ thống

1 Admin chọn chức năng “Quản lý danh mục”

2 Hệ thống hiển thị danh sách tất cả các danh mục

4 Hệ thống hiện form để Admin điền thông tin tạo mới danh mục

5 Admin nhập thông tin sau đó chọn “Tạo”

7 Hệ thống lưu thông tin danh mục vào thông báo “Thao tác thành công”

3a Admin chọn danh mục cần cập nhật thông tin và chọn “Sửa” 4a Hệ thống hiện form để Admin điền thông tin cập nhật danh mục

5a Admin sửa thông tin danh mục sau đó chọn “Sửa”

Tiếp tục thực hiện bước 6 và bước 7

3b Admin chọn danh mục cần vô hiệu hóa và chọn “Vô hiệu hóa” Tiếp tục thực hiện bước 7

3c Admin chọn danh mục cần hủy vô hiệu hóa và chọn “Hủy vô hiệu hóa”

Tiếp tục thực hiện bước 7

6a Hệ thống kiểm tra các thông tin nhập vào không hợp lệ

7a Thông báo lỗi “Thông tin danh mục không hợp lệ”, Usecase dừng lại

Hình 12 Usecase Admin quản lý đánh giá

Bảng 8 Usecase Admin Quản lý danh mục

Tên Usecase Quản lý đánh giá

Mô tả Usecase Use case này cho phép Admin thực hiện xem và duyệt đánh giá của customer trong mục quản lý đánh giá của hệ thống

1 Admin chọn chức năng “Quản lý đánh giá”

2 Hệ thống hiển thị danh sách tất cả các đánh giá

3 Admin chọn đánh giá cần thao tác

4 Hệ thống hiển thị button ẩn hoặc hiện theo trạng thái của đánh giá để admin tiến hành thao tác

5 Admin nhấn button ẩn hoặc hiện

6 Hệ thống hiển thị thông báo “Cập nhật đánh giá thành công”

3.4.2.2 Các chức năng dành cho Staff

Hình 13 Usecase Staff đăng nhập Bảng 9 Usecase Staff Đăng nhập

Tên Usecase Đăng nhập Staff

Mô tả Usecase Usecase này cho phép Staff đăng nhập vào hệ thống

3b Người dùng nhập email khôi, xác nhận mật khẩu, nhập mã xác nhận

3c Hệ thống xác nhận khôi phục mật khẩu thành công, chuyển hướng đến trang đăng nhập,

Hình 14 Usecase Staff quản lý người dùng Bảng 10 Usecase Staff Quản lý người dùng

Tên Usecase Quản lý người dùng

Mô tả Usecase Use case này cho phép Staff thực hiện thao tác xem thông tin nguyền dùng

Hậu điều kiện Hệ thống hiển thị thông tin người dùng

1 Staff chọn chức năng “Quản lý người dùng”

2 Hệ thống hiển thị danh sách tất cả các người dùng của hệ thống quản lý

3 Staff chọn người dùng cần xem thông tin

4 Hệ thống hiển thị thông cơ bản của người dùng

Hình 15 Usecase Staff quản lý đơn hàng Bảng 11 Usecase Staff Quản lý đơn hàng

Mô tả Usecase Use case này cho phép Staff thực hiện thao tác xem thông tin chi tiết đơn hàng, cập nhật trạng thái đơn hàng và hủy đơn hàng

1 Staff chọn chức năng “Order” trong danh mục “Manager”

3 Staff chọn đơn hàng cần cập nhật từ processing sang dispathced để xác nhận đơn hàng

5 Hệ thống thông báo thành công và cập nhật trạng thái đơn hàng từ PROCESSING sang DISPATHED

Luồng thay thế 3a Staff chọn “Cancel Order” để hủy đơn hàng

4b Hệ thống kiểm tra, có các thông tin thay đổi không hợp lệ 5b Thông báo lỗi, Use case dừng lại

3.4.2.3 Các chức năng dành cho Customer

Hình 16 Usecase Customer đăng ký Bảng 12 Usecase Customer đăng ký

Mô tả Usecase Usecase này cho phép Customer đăng ký tài khoản mới

Hậu điều kiện Đăng ký thành công

1 Người dùng truy cập vào trang đăng kí

2 Hệ thống giao diện đăng kí

3 Người dùng nhập thông tin tên người dùng và mật khẩu, và các thông tin cá nhân cần thiết

Hình 17 Usecase Customer đăng nhập Bảng 13 Usecase Customer Đăng nhập

Tên Usecase Đăng nhập Customer

Mô tả Usecase Usecase này cho phép Customer đăng nhập vào hệ thống, khôi phục lại mật khẩu

3b Người dùng nhập email khôi, xác nhận mật khẩu,

44 nhập mã xác nhận 3c Hệ thống xác nhận khôi phục mật khẩu thành công, chuyển hướng đến trang đăng nhập,

3.4.2.3.3 Quản lý thông tin cá nhân

Hình 18 Usecase Customer quản lý thông tin Bảng 14 Usecase Customer Quản lý tài khoản và thông tin cá nhân

Tên Usecase Quản lý tài khoản và thông tin cá nhân

Mô tả Usecase Use case này cho phép Customer thay đổi thông tin cá nhân, đổi mật khẩu

Tiền điều kiện Đăng nhập thành công vào hệ thống mua hàng với vai trò Customer

+ Các thay đổi được lưu thành công vào hệ thống + Thông báo thay đổi thành công

1 Khách hàng truy cập vào trang quản lý tài khoản

2 Hệ thống hiển thị form thông tin tài khoản

3 Người dùng chỉnh sửa thông tin tài khoản và chọn “Lưu”

5 Hệ thống lưu thay đổi và thông báo thành công

1a Người dùng chọn truy cập vào trang đổi mật khẩu 1b Hệ thống hiển thị trang đổi mật khẩu

1c Người dùng cập nhật mật khẩu mới, ấn vào nút Xác nhận 1d Hệ thống kiểm tra thông tin hợp lệ, Thông báo cập nhật mật khẩu mới thành công

Luồng ngoại lệ 4b Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

3.4.2.3.4 Quản lý địa chỉ giao hàng

Hình 19 Usecase Customer quản lý địa chỉ giao hàng Bảng 15 Usecase Customer Quản lý địa chỉ giao hàng

Tên Usecase Quản lý địa chỉ giao hàng

Mô tả Usecase Use case này cho phép Customer thêm, cập nhật lại địa chỉ giao hàng, xóa địa chỉ giao hàng

Tiền điều kiện Đăng nhập thành công vào hệ thống mua hàng với vai trò

Customer và vào trang quản lý địa chỉ

1 Khách hàng truy cập vào trang quản lý tài khoản

2 Chọn vào mục thêm mới địa chỉ

3 Người dùng chỉnh sửa thông tin địa chỉ và chọn “Lưu”

5 Hệ thống lưu thay đổi và thông báo thành công

2a Chọn vào cập nhập một địa chỉ có sẵn 3a Người dùng chỉnh sửa thông tin địa chỉ và chọn “Lưu”

4a Hệ thống kiểm tra thông tin hợp lệ 5a Hệ thống lưu thay đổi và thông báo thành công

4b Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

4a4a Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

Hình 20 Usecase Customer quản lý giỏ hàng

Bảng 16 Usecase Quản lý giỏ hàng

Tên use case Quản lý giỏ hàng

Mô tả use case Use case này cho phép Customer thêm, xóa, thay đổi số lượng sản phẩm trong giỏ hàng của mình, và tạo đơn hàng

Tiền điều kiện Đăng nhập thành công vào hệ thống mua hàng với vai trò Customer

Hậu điều kiện Thông báo khi sản phẩm được thêm vào giỏ hàng

Các thay đổi được lưu vào hệ thống

1 Khách hàng truy cập vào trang Giỏ hàng

2 Khách hàng chọn sản phẩm cần thay đổi số lượng

3 Hệ thống hiển thị số lượng hiện tại của sản phẩm trong giỏ hàng

4 Khách hàng chỉnh sửa số lượng sản phẩm

5 Hệ thống kiểm tra số lượng hợp lệ

6 Hệ thống lưu thay đổi và thông báo thao tác thành công

1a Khách hàng truy cập trang chi tiết sản phẩm 2a Khách hàng nhập số lượng và chọn ‘Thêm vào giỏ hàng’

Tiếp tục bước 5 2b Khách hàng chọn sản phẩm cần xóa khỏi giỏ hàng và chọn “Xóa” Tiếp tục bước 6

5a Người dùng chọn nút”Place Order” để tiến hành đặt hàng

5a Số lượng sản phẩm âm hoặc vượt quá số lượng tồn kho, thông báo lỗi, Usecase dừng lại

4b1 Khách hàng không xác nhận xóa, Usecase dừng lại

Hình 21 Usecase Customer tìm kiếm sản phẩm Bảng 17 Usecase Tìm kiếm sản phẩm

Tên Usecase Tìm kiếm sản phẩm

Mô tả Usecase Use case này cho phép Customer thực hiện thao tác tìm kiếm sản phẩm theo tên, theo danh mục

Hậu điều kiện Hệ thống hiển thị kết quả tìm kiếm cho người dùng

1 Nhập từ khóa cần tìm vào ô tìm kiếm

2 Nhấn vào biểu tượng tìm kiếm

3 Hệ thống tiến hành ghi nhận từ khóa và trả về kết quả cho người dùng chọn các biểu tượng thuộc tính sách trong bộ lọc mà người dùng mong muốn để tìm kiếm chính xác sách

3a Hệ thống không tìm thấy dữ liệu và trả kết quả rỗng Use case dừng lại

Hình 22 Usecase Customer quản lý đơn hàng Bảng 18 Usecase Quản lý đơn hàng Customer

Mô tả Usecase Use case này cho phép Customer thực hiện thao tác xem thông tin chi tiết đơn hàng và hủy đơn hàng

1 Customer chọn chức năng “My Order”

3 Customer chọn đơn hàng cần xem thông tin chi tiết

4 Hệ thống hiển thị thông tin chi tiết đơn hàng

Luồng thay thế 4a Staff chọn “Cancel Order” để hủy đơn hàng

Hình 23 Usecase Customer quản lý đánh giá Bảng 19 Usecase Quản lý đơn hàng Customer

Tên Usecase Quản lý đánh giá

Mô tả Usecase Use case này cho phép Customer xem đánh giá của sản phẩm, cũng như đánh giá một sản phẩm

1 User chọn sản phẩm muốn đánh giá

2 Hệ thống hiển thị danh sách tất cả các đánh giá của sản phẩm đó

3 User điền thông tin muốn đánh giá

4 User chọn nút đánh giá

5 Hệ thống hiển thị thông báo “Đánh giá thành công”

4a Hệ thống kiểm tra customer chưa từng mua sản phẩm này Usecase dừng lại

3.4.2.3.9 Quản lý danh mục yêu thích

Hình 24 Usecase Customer quản lý danh mục yêu thích Bảng 20 Usecase Quản lý sản phẩm yêu thích

Tên Usecase Quản lý sản phẩm yêu thích

Mô tả Usecase Use case này cho phép Customer xem xóa sửa sản phẩm yêu thích

1 Khách hàng truy cập vào trang Xem sản phẩm hoặc Chi tiết sản phẩm

2 Khách hàng chọn biểu tượng trái tim (chưa được filled) để thêm sản phẩm vào danh sách yêu thích

3 Cập nhật danh sách sản phẩm yêu thích

2a Khách hàng chọn biểu tượng trái tim (được filled) để gỡ sản phẩm khỏi danh sách yêu thích

SEQUENCE DIAGRAM

Hình 25 Sequence diagram đăng nhập

Hình STYLEREF 1 \s 3 SEQ Hình \* ARABIC \s 1 13 Sequence diagram đăng nhập

Hình 26 Sequence diagram đăng ký 3.5.3 Chức năng tìm kiếm

Hình 27 Sequence diagram tìm kiếm

3.5.4 Chức năng quản lý sản phẩm

Hình 28 Sequence diagram quản lí sản phẩm

3.5.5 Chức năng quản lý category

Hình 29 Sequence diagram quản lí cateogry

3.5.6 Chức năng quản lý room

Hình 30 Sequence diagram quản lý room 3.5.7 Chức năng quản lý đơn hàng

Hình 31 Sequence diagram quản lý đơn hàng

3.5.8 Chức năng quản lý khách hàng

Hình 32 Sequence diagram quản lí khách hàng

Hình 33 Sequence diagram chức năng giỏ hàng

3.5.10 Chức năng danh sách yêu thích

Hình 34 Sequence diagram chức năng danh sách yêu thích

CLASS DIAGRAM

Hình 35 Class diagram tổng quát

THIẾT KẾ HỆ THỐNG

THIẾT KẾ CƠ SỞ DỮ LIỆU

4.1.1 Sơ đồ thiết kế cơ sở dữ liệu

Hình 52 Sơ đồ thiết kế cơ sở dữ liệu 4.1.2 Mô tả thiết kế

Bảng 21 Bảng mô tả thuộc tính của User

STT Thuộc tính Kiểu dữ liệu Mô tả

2 firstname String Tên người dùng

4 username String Tên đăng nhập

5 password String Mật khẩu đăng nhập

6 email String Địa chỉ email

7 phoneNumber String Số điện thoại

8 role String Vai trò người dùng

9 wishlist ObjectId Danh sách yêu thích

Bảng 22 Bảng mô tả thuộc tính của order STT Thuộc tính Kiểu dữ liệu Mô tả

1 _id ObjectId Id mặc định mongodb

2 orderId String Mã đơn hàng

2 PaymentMethod String Phương thức thanh toán

3 PaymentStatus String Trạng thái thanh toán

4 name String Tên người nhận hàng

5 email String Địa chỉ email

6 phoneNumber String Số điện thoại

7 products Array[Object] Các sản phẩm trong đơn hàng

8 total Number Tổng đơn hàng

9 addressShipping Array[Object] Địa chỉ giao hàng

10 status String Trạng thái đơn hàng

11 orderTime Date Ngày tạo đơn hàng

12 orderby ObjectId Người dùng tạo đơn hàng

13 coupon ObjectId Mã giảm giá

Bảng 23 Bảng mô tả thuộc tính của category

3 slug String Đường dẫn category

Bảng 24 Bảng mô tả thuộc tính của room STT Thuộc tính Kiểu dữ liệu Mô tả

3 categories Array[Object] Danh sách các category thuộc phòng

Bảng 25 Bảng mô tả thuộc tính của product STT Thuộc tính Kiểu dữ liệu Mô tả

2 code String Mã sản phẩm

3 name String Tên sản phẩm

4 description String Mô tả sản phẩm

5 shortDescription String Mô tả ngắn gọn sản phẩm

6 images Array[Object] Ảnh sản phẩm

7 category ObjectId Danh mục sản phẩm

9 specs Array[Object] Mô tả các thuộc tính sản phẩm

10 price Number Giá sản phẩm

11 sale Number Giảm giá theo %

12 priceSale Number Giá sản phẩm sau khi giảm giá

13 quantity Number Số lượng sản phẩm

14 sold Number Số lượng đã bán

15 totalrating String Tổng sao đánh giá

16 enable Boolean Cho phép ẩn hiện sản phẩm

Bảng 26 Bảng mô tả thuộc tính của cart STT Thuộc tính Kiểu dữ liệu Mô tả

2 products Array[Object] Các sản phẩm trong giỏ hàng

3 cartTotal Number Tổng giá giỏ hàng

4 userId ObjectId Mã Id người dùng

Bảng 27 Bảng mô tả thuộc tính của address

2 nameAddress String Tên địa chỉ

6 note String Ghi chú về địa chỉ

8 userId ObjectId Mã Id người dùng

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

● Clone project từ github: Lojc19/api-ecom (github.com)

● Sử dụng phần mềm Visual Studio Code mở project

● Chạy lệnh npm start để chạy project

● Clone project Client từ github: Lojc19/ecom-web (github.com)

● Clone project Dashboard từ github: luongminhchien1233/Admin_Final (github.com)

● Sử dụng phần mềm Visual Studio Code mở project

● Chạy lệnh npm i sau đó npm run dev

Tiêu đề	Xây dựng website thương mại điện tử về nội thất
Tác giả	Lương Minh Chiến, Bùi Bá Lộc
Người hướng dẫn	Ts. Lê Vĩnh Thịnh
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	113
Dung lượng	9,7 MB