Xây dựng website bán đồ nội thất online

Mục tiêu đề tài

- Xây dựng website cho phép quản lý cửa hàng nội thất online, cho phép người dùng mua hàng, tìm kiếm hàng, xem lịch sử mua hàng, cùng với đó là các chức năng để tối ưu hóa dịch vụ chăm sóc khách hàng, nâng cao trải nghiệm mua hàng và tăng cường khả năng tiếp cận khách hàng.

- Xây dựng website với giao diện thân thiện, tối ưu, dễ tiếp cận.

- Xây dựng hệ thống với tốc độ xử lý tối ưu nhất có thể.

Đối tượng sử dụng

- Các công ty sản xuất nội thất, muốn áp dụng công nghệ trong kinh doanh,muốn tạo ra một website để mang lại dấu ấn riêng cho doanh nghiệp của mình.

Phạm vi

- Website admin cho phép quản lý hàng hóa nội thất, thống kê số liệu và quản lý người dùng, nhân viên, đợt giảm giá sản phẩm.

- Website khách hàng cho phép người dùng mua hàng, tìm kiếm thông tin hàng hóa, và các chức năng để tối ưu dịch vụ chăm sóc khách hàng.

Công nghệ sử dụng

- Thiết kế giao diện: Figma

Liên kết

- Github Front-end (Website khách hàng): https://github.com/sang1833/DoAn1_20521767_20521833

- Github Front-end (Website admin): https://github.com/PhucNguyenHoang611/DoAn1_20521767_20521833_A DMIN

- Github Back-end: https://github.com/PhucNguyenHoang611/DoAn1_20521767_20521833_BE

Chương 2 CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ

ReactJS

Virtual DOM

- DOM hay Document Object Model là một cấu trúc trừu tượng của text Mỗi đoạn mã của HTML được gọi là một HTML DOM, các yếu tố trong HTML là các nodes của DOM đó.

- Tại sao chúng ta cần virtual DOM vì khi nodes thay đổi các nodes khác cũng cần thay đổi Chẳng hạn, bạn có 10 items nhưng nếu bạn thay đổi 1 thì DOM cững thay đổi 9 items còn lại quay trở lại trạng thái ban đầu.

- Điều này là không thực sự cần thiết, bởi tốc độ xử lý của DOM nhanh nhưng với các ứng dụng SPA việc thay đổi các DOM liên tục sẽ xảy ra khá chậm và không mang tính khả thi cao khi triển khai ứng dụng lớn Khi đó virtual DOM sẽ được sử dụng để thay thế, được xây dựng dựa trên DOM thực tế.

- Khi thực hiện render một JSX element, các virtual DOM object sẽ được cập nhật khi virtual DOM được cập nhật ReactJS so sánh virtual DOM với virtual DOM trước đó nhằm đảm bảo trước khi thực hiện cập nhật, cập nhật trên DOM thật sau đó và hiển thị trên màn hình.

- Việc sử dụng virtual DOM sẽ giúp tiết kiệm tài nguyên và tốc độ xử lý nhanh hơn vì virtual DOM tập trung cập nhật 1 items duy nhất.

Component

- Khi làm việc trong các project lớn, UI có độ phức tạp cao và cần được chia thành các thành phần nhỏ được gọi là component.

- Trong ReactJS có hai loại component chính là Class component và Function component.

JSX

- JSX là thuật ngữ viết tắt của Javascript XML cho phép việc viết đoạn mãHTML trong React trở nên đơn giản, dễ dàng và có cấu trúc hơn Cú pháp gần tương tự với HTML.

Props & State

- Props và State là hai kiểu dữ liệu React Nếu bạn chỉ mới tìm hiểu thì khá khó để phân biệt ngay từ đầu, nhưng khi bạn bắt đầu công việc code thì sẽ nhanh chóng có thể phân biệt được hai loại dữ liệu này.

- Sự khác biệt lớn nhất giữa hai kiểu dữ liệu này: Trong khi state thì private và chỉ thay đổi bên trong component thì Props mang tính external, được truyền từ component cao hơn theo phân cấp.

- Props là tham số được chuyển qua lại giữa các React component và được truyền qua các component với cú pháp tương tự HTML attributes.

- State là một object lưu trữ giá trị của các thuộc tính trong component và tồn tại trong phạm vi của component đó Khi giá trị của state được thay đổi, component sẽ được render lại.

- Cách để cài đặt state khá đơn giản là việc cài đặt hàm getInitialState() vào component, và trả về bất cứ gì bạn muốn cài đặt trong state của component này.

- Để thay đổi state, chúng ta gọi hàm this.setState(), và truyền vào state mới giống như một tham số.

React Lifecycle

- React Lifecycle là một vòng đời của component Trong khi render một component thì ReactJS thực hiện nhiều tiến trình khác nhau và được lặp lại nhiều lần với các component.

- Khi một component được gọi lên trước, nó sẽ tiến hành cài đặt props và state tiếp đó là mounting, unmounting, update, v.v khi đó bạn cần sử dụng hỗ trợ của các hàm lifecycle.

NodeJS

- NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ.

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.

- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học.

- Chia sẻ cùng code ở cả phía client và server.

- NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

- Cộng đồng hỗ trợ tích cực.

- Cho phép stream các file có kích thước lớn.

- Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay.

- Khó thao tác với cơ sử dữ liệu quan hệ.

- Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác.

- Cần có kiến thức tốt về JavaScript.

- Không phù hợp với các tác vụ đòi hỏi nhiều CPU.

ExpressJS

- ExpressJS là một framework miễn phí và mã nguồn mở dành cho việc xây dựng ứng dụng web trên nền tảng Node.js Với ExpressJS, người dùng có thể nhanh chóng thiết kế và phát triển các ứng dụng web và API một cách dễ dàng và tiện lợi Điều này đặc biệt hữu ích cho các nhà phát triển và lập trình viên đã quen thuộc với JavaScript.

- Vì ExpressJS là một framework phát triển ứng dụng web trên Nodejs, các lập trình viên có thể sử dụng mã đã có sẵn để xây dựng các ứng dụng web đơn trang (SPA), đa trang hoặc kết hợp cả hai Ngoài ra, ExpressJS còn cung cấp một kiến trúc MVC (Model-View-Controller) hữu ích để tổ chức các ứng dụng web phía máy chủ.

- Với các tính năng hỗ trợ nâng cao của Nodejs, ExpressJS giúp giảm bớt sự phức tạp của việc xây dựng API hiệu quả Nếu không sử dụng ExpressJS, lập trình viên sẽ phải viết rất nhiều mã để xử lý các yêu cầu khác nhau.

- Nhưng ExpressJS giúp cho việc này trở nên đơn giản hơn đáng kể Với sự hỗ trợ từ cộng đồng và các thư viện bên thứ ba, ExpressJS là một công cụ hữu ích cho việc xây dựng các ứng dụng web và API trên Nodejs.

Lợi ích khi sử dụng:

- ExpressJS là một công nghệ rất dễ học và sử dụng nếu bạn đã biếtJavaScript Điều này giúp cho việc phát triển back-end dễ dàng hơn rất nhiều Bởi vì mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Nodejs, ExpressJS cho phép mã được thực hiện một cách nhanh chóng và hiệu quả.

- ExpressJS giúp giảm một nửa thời gian viết mã nhưng vẫn giúp nhà phát triển xây dựng các ứng dụng web hiệu quả Nó còn cung cấp các tính năng khác nhau giúp tiết kiệm công sức rất nhiều.

- Sử dụng ExpressJS tương đối dễ dàng vì nó hỗ trợ JavaScript, một ngôn ngữ rất dễ học đối với bất kỳ ai Do đó, ExpressJS được coi là một công cụ tuyệt vời để cho những người mới bắt đầu tham gia vào lĩnh vực phát triển ứng dụng web và có thể giúp họ gặt hái thành công.

- Ngoài ra, ExpressJS được phát triển dựa trên nền tảng Nodejs Đây chính là một kiến trúc hướng sự kiện và nó có khả năng xử lý lên đến hàng nghìn yêu cầu của khách hàng trong cùng một lúc Đó cũng là điều mà PHP không thể thực hiện được Nodejs được thiết kế đặc biệt để hỗ trợ các ứng dụng web thực.

- Việc sử dụng tiền một cách hiệu quả để tối đa hóa lợi nhuận là một điều quan trọng đối với bất kỳ doanh nghiệp nào ExpressJS là một ứng dụng web miễn phí và mã nguồn mở, do đó không có lý do gì để không sử dụng framework này.

MongoDB

- MongoDB, được biết đến như cơ sở dữ liệu NoSQL phổ biến nhất, là cơ sở dữ liệu định hướng tài liệu mã nguồn mở Thuật ngữ 'NoSQL' có nghĩa là'không có mối quan hệ' (Non-relational) Điều đó có nghĩa là MongoDB không dựa trên cấu trúc cơ sở dữ liệu quan hệ giống như bảng mà cung cấp một cơ chế hoàn toàn khác để lưu trữ và truy xuất dữ liệu Định dạng lưu trữ này được gọi là BSON (tương tự như định dạng JSON).

Cấu trúc tài liệu MongoDB đơn giản:

- CSDL SQL sẽ lưu trữ dữ liệu ở định dạng bảng Dữ liệu này được lưu trữ trong một mô hình dữ liệu được xác định trước, điều này sẽ không linh hoạt lắm đối với các ứng dụng đang phát triển nhanh trong thế giới thực ngày nay. Các ứng dụng hiện đại cần phải được kết nối với nhau, xã hội hóa và có tính tương tác hơn Các ứng dụng ngày nay đang ngày càng lưu trữ nhiều dữ liệu và các dữ liệu đó đang cần phải được truy cập với tốc độ cao hơn.

- Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) không phải là lựa chọn chính xác khi xử lý dữ liệu lớn do thiết kế của chúng không thể mở rộng theo quy mô ngang Nếu CSDL chạy trên một máy chủ thì nó sẽ đạt đến giới hạn mở rộng Cơ sở dữ liệu NoSQL có khả năng mở rộng hơn và cung cấp hiệu suất vượt trội MongoDB là một cơ sở dữ liệu NoSQL có thể mở rộng quy mô bằng cách thêm ngày càng nhiều máy chủ và tăng hiệu suất với mô hình tài liệu linh hoạt của nó.

Chương 3 THIẾT KẾ HỆ THỐNG

Kiến trúc hệ thống: Mô hình Client – Server

- Hệ thống được xây dựng dựa trên bộ công cụ MERN Stack (MongoDB, ExpressJS, ReactJS, NodeJS).

- Mô hình hệ thống là mô hình client server (mô hình khách chủ) là mô hình mạng máy tính được tạo nên bởi 2 thành phần chính gồm client và server (được dịch ra tiếng Việt là “máy khách” và “máy chủ”) Client sẽ đưa ra các yêu cầu về lưu trữ tài nguyên và dịch vụ cài đặt từ phía server.

- Yêu cầu dữ liệu được máy tính client gửi đến server qua kết nối mạng Internet và sẽ được chấp nhận bởi server Tiếp đó, server sẽ gửi trở lại những gói dữ liệu mà máy client yêu cầu Như vậy với mô hình này, client không hề chia sẻ bất cứ tài nguyên nào do mình nắm giữ.

- Nói cách khác, mô hình client – server là cấu trúc ứng dụng phân tán có chức năng phân vùng các nhiệm vụ (workload) giữa các server (nhà cung cấp dịch vụ hoặc tài nguyên) và client (người yêu cầu dịch vụ) Những ứng dụng của mô hình Client Server phổ biến nhất hiện nay đó là nền tảng Email, World Wide Web…

- Client nghĩa là “khách hàng”, như vậy có thể hiểu đơn giản client là một cá nhân, tổ chức đăng ký sử dụng một dịch vụ nào đó Khái niệm này cũng được áp dụng tương tự trong lĩnh vực công nghệ Cụ thể, Client đóng vai trò là máy tính (Host) có thể tiếp nhận dữ liệu hoặc sử dụng dịch vụ nào đó được cung cấp bởi Server (nhà cung cấp dịch vụ)

- Server là máy chủ hoặc phương tiện dùng để phục vụ những dịch vụ nào đó.Trong thế giới kỹ thuật số thì Server chính là máy tính từ xa có nhiệm vụ cung cấp dữ liệu/thông tin hoặc quyền truy cập vào những dịch vụ nào đó.

- Về bản chất, trong mô hình Client – Server thì Client là đối tượng thực hiện yêu cầu và Server sẽ đáp ứng yêu cầu đó (miễn là nó phải thuộc cơ sở dữ liệu).

Yêu cầu chức năng

Sơ đồ Use case

Hình 5: S đ Use case cho đ i tơng 1 ồ Use case cho đối tượng khách hàng ối tượng khách hàng ượng khách hàngng khách hàng

Hình 6: S đ Use case cho đ i tơng 1 ồ Use case cho đối tượng khách hàng ối tượng khách hàng ượng khách hàngng nhân viên

Danh sách các actor

Khách hàng: có thể xem, tìm kiếm sản phẩm mà không cần đăng nhập; có thể đăng ký để sử dụng giỏ hàng, wishlist, mua hàng và quản lý tài khoản

3 Sale Staff Nhân viên quản lý đơn hàng

4 Storage Staff Nhân viên quản lý kho

Danh sách các use case

Customer Đăng nhập Đăng nhập để sử dụng đầy đủ các chức năng của hệ thống Đăng ký Đăng ký tài khoản khách hàng Đăng xuất Đăng xuất khỏi hệ thống

Quên mật khẩu Yêu cầu thay đổi mật khẩu

Tìm kiếm sản phẩm Tìm kiếm sản phẩm theo yêu cầu

Xem danh sách sản phẩm Xem danh sách tất cả sản phẩm

Xem thông tin sản phẩm Xem thông tin chi tiết sản phẩm Đặt hàng Tạo đơn hàng Đánh giá sản phẩm Viết đánh giá sản phẩm

Xem lịch sử đơn hàng Xem danh sách các đơn hàng

Thêm sản phẩm yêu thích Thêm sản phẩm vào danh sách yêu thích Đổi mật khẩu Thay đổi mật khẩu Cập nhật thông tin cá nhân Thay đổi thông tin cá nhân

Quản lý địa chỉ Thêm, xóa, sửa địa chỉ nhận hàng

Quản lý giỏ hàng Thêm, xóa, sửa sản phẩm, trong giỏ hàng

Admin Đăng nhập Đăng nhập vào hệ thống Đăng xuất Đăng xuất khỏi hệ thống Đổi mật khẩu Thay đổi mật khẩu

Xem thống kê Xem thông tin thống kế của hệ thống

Quản lý sản phẩm Thêm, xóa, sửa, tìm kiếm sản phẩm Quản lý nhập kho

Xem, xác nhận yêu cầu nhập kho, gửi yêu cầu nhập kho

Quản lý đơn hàng Xem thông tin, thay đổi trạng thái đơn hàng

Quản lý khách hàng Xem thông tin, tìm kiếm khách hàng

Quản lý nhân viên Thêm, xóa, sửa, tìm kiếm nhân viên Quản lý đợt giảm giá

Thêm, xóa, sửa, tìm kiếm đợt giảm giá, áp dụng đợt giảm giá cho sản phẩm Sale Staff Đăng nhập Đăng nhập vào hệ thống Đăng xuất Đăng xuất khỏi hệ thống Đổi mật khẩu Thay đổi mật khẩu

Quản lý sản phẩm Xem chi tiết, tìm kiếm sản phẩm

Quản lý đơn hàng Xem thông tin, thay đổi trạng thái đơn hàng

Storage Staff Đăng nhập Đăng nhập vào hệ thống Đăng xuất Đăng xuất khỏi hệ thống Đổi mật khẩu Thay đổi mật khẩu

Quản lý sản phẩm Xem chi tiết, tìm kiếm sản phẩmQuản lý nhập kho Xem, gửi yêu cầu nhập kho

Đặc tả use case

Tên use case Đăng nhập

Mô tả Đăng nhập để sử dụng đầy đủ các chức năng của hệ thống

Trigger Nhấn vào nút đăng nhập Điều kiện tiên quyết Thiết bị có kết nối mạng

Tài khoản có tồn tại trong hệ thống

Kết quả Đăng nhập thành công và chuyển qua trang chủ

1 Hệ thống hiển thị màn hình đăng nhập

2 Khách hàng nhập email và mật khẩu

3 Hệ thống xác nhận email và mật khẩu đúng định dạng

4 Hệ thống xác nhận tài khoản có tồn tại trong database

5 Đăng nhập thành công, chuyển qua trang chủ

3a Email và mật khẩu không đúng định dạng, use case tiếp tục ở bước 2 4a Tài khoản không tồn tại trong database, use case tiếp tục ở bước 2

Tên use case Đăng ký

Mô tả Đăng ký tài khoản khách hàng

Trigger Nhấn vào nút đăng ký Điều kiện tiên quyết Thiết bị có kết nối mạng

Kết quả Đăng ký thành công và chuyển qua trang chủ

1 Hệ thống hiển thị màn hình đăng ký

2 Khách hàng nhập email, mật khẩu và các thông tin cần thiết

4 Hệ thống kiểm tài khoản có tồn tại trong database hay không

5 Hệ thống gửi OTP qua email cho khách hàng

6 Khách hàng nhập OTP nhận được để hoàn tất đăng ký tài khoản.

7 Hệ thống xác thực OTP và hoàn tất đăng ký.

8 Đăng ký thành công, chuyển qua trang chủ

3a Email và mật khẩu không đúng định dạng, use case tiếp tục ở bước 2 4a Tài khoản đã tồn tại trong database, use case tiếp tục ở bước 2

7a OTP không đúng, use case tiếp tục ở bước 6

3.2.4.3 Đăng xuất (khách hàng)Tên use case Đăng xuất

Mô tả Đăng xuất khỏi hệ thống

Trigger Nhấn vào nút đăng xuất Điều kiện tiên quyết Đăng nhập thành công vào hệ thống

Kết quả Đăng xuất khỏi hệ thống và quay lại trang đăng nhập

1 Khách hàng bấm chọn đăng xuất

2 Hệ thống thoát khỏi tài khoản đang đăng nhập

3 Hệ thống quay lại trang đăng nhập

Tên use case Quên mật khẩu

Mô tả Yêu cầu thay đổi mật khẩu

Trigger Nhấn vào nút Đổi mật khẩu Điều kiện tiên quyết Thiết bị có kết nối mạng

Email có tồn tại trong database

Kết quả Yêu cầu đổi mật khẩu thành công

1 Hệ thống hiển thị màn hình đổi mật khẩu

2 Khách hàng nhập email đã dùng để đăng ký tài khoản

3 Hệ thống gửi email và OTP xác nhận cho khách hàng

4 Khách hàng nhập OTP đã được nhận

5 Hệ thống xác thực OTP

6 Khách hàng nhập mật khẩu mới

7 Đổi mật khẩu thành công

Kịch bản thay thế 5a OTP không đúng, use case tiếp tục ở bước 4

3.2.4.5 Tìm kiếm sản phẩmTên use case Tìm kiếm sản phẩm

Mô tả Tìm kiếm sản phẩm cần tìm

Trigger Nhấn vào nút Tìm kiếm sản phẩm Điều kiện tiên quyết Thiết bị có kết nối mạng

Kết quả Hiển thị danh sách sản phẩm theo yêu cầu

Kịch bản chính 1 Khách hàng nhập tên sản phẩm cần tìm

2 Hệ thống hiển thị danh sách sản phẩm theo tên đã nhập

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

Tên use case Xem danh sách sản phẩm

Mô tả Xem danh sách tất cả sản phẩm

Trigger Nhấn vào nút Sản phẩm Điều kiện tiên quyết Thiết bị có kết nối mạng

Kết quả Hiển thị danh sách tất cả sản phẩm

Kịch bản chính 1 Khách hàng nhấn vào nút Sản phẩm

2 Hệ thống hiển thị màn hình danh sách sản phẩm

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

Tên use case Xem thông tin sản phẩm

Mô tả Xem thông tin chi tiết sản phẩm

Trigger Nhấn vào sản phẩm bất kỳ Điều kiện tiên quyết Thiết bị có kết nối mạng

Kết quả Hiển thị màn hình chi tiết sản phẩm

Kịch bản chính 1 Khách hàng nhấn vào sản phẩm bất kỳ

2 Hệ thống hiển thị màn hình thông tin chi tiết sản phẩm

Tên use case Đặt hàng

Mô tả Xác nhận mua hàng

Trigger Nhấn vào nút thanh toán Điều kiện tiên quyết

Thiết bị có kết nối mạng Đăng nhập vào hệ thống thành công

Có sản phẩm trong giỏ hàng

Kết quả Đặt hàng thành công

1 Khách hàng nhấn vào nút thanh toán

2 Hệ thống hiển thị màn hình thông tin chi tiết đơn hàng

3 Khách hàng nhập thông tin nhận hàng và chọn phương thức thanh toán

4 Khách hàng nhấn vào nút Xác nhận

5 Hệ thống thêm đơn hàng mới vào database

Tên use case Đánh giá sản phẩm

Mô tả Đánh giá sản phẩm sau khi mua hàng

Trigger Nhấn vào nút đánh giá Điều kiện tiên quyết

Thiết bị có kết nối mạng Đăng nhập vào hệ thống thành côngTrạng thái đơn hàng đã hoàn tất

Kết quả Đánh giá sản phẩm của khách hàng được lưu lại

1 Khách hàng nhấn vào nút đánh giá

2 Hệ thống hiển thị màn hình đánh giá sản phẩm

3 Khách hàng nhập tiêu đề, nội dung đánh giá, hình ảnh và xếp hạng cho sản phẩm

4 Khách hàng nhấn vào nút Gửi nhận xét

5 Hệ thống thêm đánh giá mới vào database

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

Tên use case Xem lịch sử đơn hàng

Mô tả Xem lịch sử đơn hàng đã đặt

Trigger Nhấn vào nút Hóa đơn mua hàng Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập vào hệ thống thành công

Kết quả Hiển thị danh sách hóa đơn đã đặt của khách hàng

1 Khách hàng nhấn vào nút Hóa đơn mua hàng

2 Hệ thống hiển thị màn hình danh sách hóa đơn đã đặt của khách hàng

3.2.4.11 Thêm sản phẩm yêu thích

Tên use case Thêm sản phẩm yêu thích

Mô tả Thêm sản phẩm vào danh sách yêu thích

Trigger Nhấn vào nút Yêu thích ở danh sách sản phẩm hoặc màn hình chi tiết sản phẩm Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập vào hệ thống thành công

Kết quả Sản phẩm được thêm vào danh sách yêu thích

1 Khách hàng nhấn vào nút Yêu thích ở danh sách sản phẩm hoặc màn hình chi tiết sản phẩm

2 Hệ thống lưu thông tin sản phẩm vào danh sách yêu thích của khách hàng

Tên use case Đổi mật khẩu

Mô tả Đổi mật khẩu cho tài khoản

Trigger Nhấn vào nút Đổi mật khẩu Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Đổi mật khẩu thành công

2 Khách hàng nhập mật khẩu cũ và mật khẩu mới

3 Hệ thống xác nhận mật khẩu đúng định dạng

4 Hệ thống xác nhận mật khẩu cũ trong database

3a Mật khẩu không đúng định dạng, use case tiếp tục ở bước 2 4a Mật khẩu không tồn tại trong database, use case tiếp tục ở bước 2

3.2.4.13 Cập nhật thông tin cá nhânTên use case Cập nhật thông tin cá nhân

Mô tả Thay đổi thông tin cá nhân của khách hàng

Trigger Nhấn vào nút Thông tin tài khoản Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập vào hệ thống thành công

Kết quả Thông tin khách hàng cập nhật thành công

1 Khách hàng nhấn vào nút Thông tin tài khoản

2 Hệ thống hiển thị màn hình chi tiết tài khoản

3 Khách hàng nhập thông tin mới

4 Khách hàng nhấn nút Cập nhật

5 Hệ thống cập nhật thông tin khách hàng vào database

Tên use case Quản lý địa chỉ

Mô tả Thêm, xóa, sửa địa chỉ nhận hàng

Trigger Nhấn vào nút Danh sách địa chỉ Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Thêm, xóa, sửa địa chỉ nhận hàng thành công

Kịch bản chính 1 Khách hàng nhấn vào nút Danh sách địa chỉ

2 Hiển thị trang quản lý địa chỉ

3 Khách hàng chọn chức năng

- Thêm địa chỉ nhận hàng

4 Khách hàng nhập thông tin địa chỉ

6 Hệ thống lưu địa chỉ vào database

- Sửa địa chỉ nhận hàng

7 Khách hàng nhập thông tin địa chỉ

9 Hệ thống cập nhật địa chỉ vào database

10 Nhân viên chọn địa chỉ để xóa

11 Hệ thống xóa địa chỉ khỏi database

- Đặt địa chỉ mặc định:

12 Nhân viên chọn địa chỉ đặt làm mặc định

13 Hệ thống cập nhật địa chỉ vào database

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

Mô tả Thêm, xóa, sửa sản phẩm trong giỏ hàng

Trigger Nhấn vào nút Giỏ hàng Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Thêm, xóa, sửa sản phẩm trong giỏ hàng thành công

Kịch bản chính 1 Khách hàng nhấn vào nút Giỏ hàng

2 Hiển thị trang giỏ hàng

3 Khách hàng chọn chức năng

- Thêm sản phẩm vào giỏ hàng

4 Khách hàng chọn sản phẩm trong màn hình danh sách sản phẩm

5 Khách hàng nhấn vào nút Thêm vào giỏ hàng

6 Hệ thống cập nhật sản phẩm vào giỏ hàng

- Chỉnh sửa sản phẩm trong giỏ hàng

7 Khách hàng chọn sản phẩm để chỉnh sửa

8 Khách hàng chỉnh sửa số lượng sản phẩm và nhấn nút xác nhận

9 Hệ thống cập nhật sản phẩm trong giỏ hàng

- Xóa sản phẩm khỏi giỏ hàng:

10 Nhân viên chọn sản phẩm để xóa

11 Hệ thống xóa sản phẩm khỏi giỏ hàng

Tên use case Đăng nhập

Mô tả Đăng nhập vào hệ thống

Trigger Nhấn vào nút đăng nhập Điều kiện tiên quyết Thiết bị có kết nối mạng

Tài khoản có tồn tại trong hệ thống

Kết quả Đăng nhập thành công và chuyển qua trang chủ

1 Hệ thống hiển thị màn hình đăng nhập

2 Nhân viên nhập email và mật khẩu

4 Hệ thống xác nhận tài khoản có tồn tại trong database

5 Đăng nhập thành công, chuyển qua trang chủ

3a Email và mật khẩu không đúng định dạng, use case tiếp tục ở bước 2 4a Tài khoản không tồn tại trong database, use case tiếp tục ở bước 2

Tên use case Đăng xuất

Mô tả Đăng xuất khỏi hệ thống

Trigger Nhấn vào nút đăng xuất Điều kiện tiên quyết Đăng nhập thành công vào hệ thống

Kết quả Đăng xuất khỏi hệ thống và quay lại trang đăng nhập

1 Nhân viên bấm chọn đăng xuất

2 Hệ thống thoát khỏi tài khoản đang đăng nhập

3 Hệ thống quay lại trang đăng nhập

Tên use case Đổi mật khẩu

Mô tả Đổi mật khẩu cho tài khoản

Trigger Nhấn vào nút Đổi mật khẩu Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Đổi mật khẩu thành công

2 Nhân viên nhập mật khẩu cũ và mật khẩu mới

3 Hệ thống xác nhận mật khẩu đúng định dạng

4 Hệ thống xác nhận mật khẩu cũ trong database

3a Mật khẩu không đúng định dạng, use case tiếp tục ở bước 2 4a Mật khẩu không tồn tại trong database, use case tiếp tục ở bước 2

Tên use case Xem thống kê

Mô tả Xem thông tin thống kê của hệ thống

Trigger Nhấn vào nút Trang chủ Điều kiện tiên quyết

Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thốngTài khoản Admin

Kết quả Hiển thị các biểu đồ thống kê

1 Nhân viên nhấn vào nút Trang chủ

2 Hiển thị trang thống kê

3 Nhân viên nhập năm cần xem thống kê

4 Hệ thống hiển thị biểu đồ thống kê tương ứng với năm

Tên use case Quản lý sản phẩm

Mô tả Thêm, xóa, sửa, tìm kiếm sản phẩm

Trigger Nhấn vào nút Sản phẩm Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Tìm kiếm, thêm, xóa, sửa sản phẩm thành công

Kịch bản chính 1 Nhân viên nhấn vào nút Sản phẩm

2 Hiển thị trang quản lý sản phẩm

3 Nhân viên chọn chức năng

5 Hệ thống lọc dữ liệu theo keyword

6 Nhân viên nhấn vào nút thêm sản phẩm

7 Nhập thông tin sản phẩm

8 Hệ thống lưu sản phẩm vào database, thông báo thành công

9 Nhân viên chọn sản phẩm để chỉnh sửa

11 Hệ thống cập nhập sản phẩm vào database, thông báo thành công

12 Nhân viên chọn sản phẩm để xoá

13 Hệ thống xóa sản phẩm khỏi database, thông báo thành công

- Xem chi tiết sản phẩm:

14 Nhân viên chọn sản phẩm để xem chi tiết

15 Hệ thống hiển thị trang chi tiết sản phẩm

8a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 7 11a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 10

Tên use case Quản lý nhập kho

Mô tả Xem, xác nhận yêu cầu nhập kho, gửi yêu cầu nhập kho

Trigger Nhấn vào nút Nhập kho Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Xác nhận yêu cầu nhập kho, gửi yêu cầu nhập kho thành công

Kịch bản chính 1 Nhân viên nhấn vào nút Nhập kho

2 Hiển thị trang quản lý nhập kho

- Xác nhận yêu cầu nhập kho:

6 Nhân viên nhấn vào nút xác nhận hoặc hủy yêu cầu

7 Hệ thống lưu trạng thái vào database, thông báo thành công

- Gửi yêu cầu nhập kho:

9 Nhân viên chọn thêm sản phẩm

11 Hệ thống cập nhập sản phẩm vào bảng danh sách sản phẩm

12 Nhân viên nhấn vào nút Gửi yêu cầu nhập kho

13 Hệ thống lưu yêu cầu vào database, thông báo thành công

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

Mô tả Xem thông tin, thay đổi trạng thái đơn hàng

Trigger Nhấn vào nút Đơn hàng Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Xem thông tin, thay đổi trạng thái đơn hàng thành công

1 Nhân viên nhấn vào nút Đơn hàng

2 Hiển thị trang quản lý đơn hàng

- Thay đổi trạng thái đơn hàng

6 Nhân viên chọn đơn hàng để xác nhận

7 Nhân viên nhấn vào nút xác nhận đơn hàng

8 Hệ thống cập nhật trạng thái đơn hàng vào database, thông báo thành công

9 Nhân viên chọn đơn hàng để hủy

10 Nhân viên nhấn vào nút hủy

11 Hệ thống cập nhật trạng thái đơn hàng vào database, thông báo thành công

- Xem chi tiết đơn hàng:

12 Nhân viên chọn đơn hàng để xem chi tiết

13 Hệ thống hiển thị trang chi tiết đơn hàng

Tên use case Quản lý khách hàng

Mô tả Xem thông tin, tìm kiếm khách hàng

Trigger Nhấn vào nút Khách hàng Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Xem thông tin, tìm kiếm khách hàng thành công

1 Nhân viên nhấn vào nút Khách hàng

2 Hiển thị trang quản lý khách hàng

- Xem chi tiết khách hàng:

6 Nhân viên chọn khách hàng để xem chi tiết

7 Hệ thống hiển thị trang chi tiết khách hàng

Tên use case Quản lý nhân viên

Mô tả Thêm, xóa, sửa, tìm kiếm nhân viên

Trigger Nhấn vào nút Nhân viên Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Tìm kiếm, thêm, xóa, sửa nhân viên thành công

1 Nhân viên nhấn vào nút Nhân viên

2 Hiển thị trang quản lý nhân viên

6 Nhân viên nhấn vào nút thêm nhân viên

7 Nhập thông tin nhân viên

8 Hệ thống lưu nhân viên vào database, thông báo thành công

9 Nhân viên chọn nhân viên để chỉnh sửa

10 Nhập thông tin nhân viên

11 Hệ thống cập nhập nhân viên vào database, thông báo thành công

8a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 7 11a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 10

3.2.4.25 Quản lý đợt giảm giá Tên use case Quản lý đợt giảm giá

Mô tả Thêm, xóa, sửa, tìm kiếm đợt giảm giá, áp dụng đợt giảm giá cho sản phẩm

Trigger Nhấn vào nút Giảm giá Điều kiện tiên quyết Thiết bị có kết nối mạng Đăng nhập thành công vào hệ thống

Kết quả Tìm kiếm, thêm, xóa, sửa đợt giảm giá, áp dụng đợt giảm giá cho sản phẩm thành công

Kịch bản chính 1 Nhân viên nhấn vào nút Giảm giá

2 Hiển thị trang quản lý đợt giảm giá

6 Nhân viên nhấn vào nút thêm đợt giảm giá

7 Nhập thông tin đợt giảm giá

8 Hệ thống lưu đợt giảm giá vào database, thông báo thành công

9 Nhân viên chọn đợt giảm giá để chỉnh sửa

10 Nhập thông tin đợt giảm giá

11 Hệ thống cập nhập đợt giảm giá vào database, thông báo thành công

12 Nhân viên chọn đợt giảm giá để xóa

13 Nhân viên nhấn vào nút xóa

14 Hệ thống xóa đợt giảm giá khỏi database, thông báo thành công

- Áp dụng đợt giảm giá cho sản phẩm:

15 Nhân viên chọn đợt giảm giá

16 Nhân viên chọn các sản phẩm

17 Hệ thống cập nhật danh sách sản phẩm vào database, thông báo thành công

8a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 711a Thông tin sản phẩm không hợp lệ, use case tiếp tục ở bước 10

Chương 4 THIẾT KẾ CƠ SỞ DỮ LIỆU

Sơ đồ lớp

Hình 7: S đ l pơng 1 ồ Use case cho đối tượng khách hàng ớp

Danh sách các quan hệ

Bảng CUSTOMER

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 customerId ObjectId Khóa chính Mã khách hàng

3 customerFirstName String Tên khách hàng

4 customerLastName String Họ khách hàng

6 customerEmail String Email khách hàng

7 customerPhone String SĐT khách hàng

9 customerAvatar ObjectId Khóa ngoại Mã ảnh đại diện

10 customerStatus Boolean Trạng thái hoạt động

11 customerProvider String Phương thức đăng nhập

12 isVerified Boolean Trạng thái xác thực

13 isActive Boolean Trạng thái tài khoản

Bảng STAFF

1 staffId ObjectId Khóa chính Mã nhân viên

3 staffFirstName String Tên nhân viên

4 staffLastName String Họ nhân viên

5 staffEmail String Email nhân viên

6 staffPhone String SĐT nhân viên

8 staffStartWork Date Ngày vào làm

9 staffStatus Number Trạng thái nhân viên

10 privilege Number Chức vụ nhân viên

Bảng PRODUCT_IMAGE

1 staffId ObjectId Khóa chính Mã nhân viên

3 staffFirstName String Tên nhân viên

4 staffLastName String Họ nhân viên

5 staffEmail String Email nhân viên

6 staffPhone String SĐT nhân viên

8 staffStartWork Date Ngày vào làm

9 staffStatus Number Trạng thái nhân viên

10 privilege Number Chức vụ nhân viên

1 productId ObjectId Khóa chính Mã sản phẩm

2 productName String Tên sản phẩm

3 productDescription String Mô tả sản phẩm

4 productPrice Number Giá sản phẩm

5 productCategoryId ObjectId Khóa ngoại Mã loại sản phẩm

6 productSubcategoryId ObjectId Khóa ngoại Mã loại phòng

7 productDiscountId ObjectId Khóa ngoại Mã đợt giảm giá

8 productQuantity Number Số lượng sản phẩm

9 productSold Number Số lượng sản phẩm đã bán

10 productStatus Boolean Trạng thái sản phẩm

11 productSupplierId ObjectId Khóa ngoại Mã nhà cung cấp

4.2.4 Bảng PRODUCT_IMAGESTT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 productImageId ObjectId Khóa chính Mã ảnh sản phẩm

2 productId ObjectId Khóa ngoại Mã sản phẩm

3 productColorId ObjectId Khóa ngoại Mã màu sản phẩm

4 productImage ObjectId Khóa ngoại Mã ảnh

Bảng PRODUCT_COLOR

1 productColorId ObjectId Khóa chính Mã màu sản phẩm

3 colorId ObjectId Khóa ngoại Mã màu

Bảng PRODUCT_DIMENSION

1 productDimensionId ObjectId Khóa chính Mã kích thước sản phẩm

3 productLength Number Chiều dài sản phẩm

4 productWidth Number Chiều rộng sản phẩm

5 productHeight Number Chiều cao sản phẩm

6 productWeight Number Trọng lượng sản phẩm

Bảng CATEGORY

1 categoryId ObjectId Khóa chính Mã loại sản phẩm

2 categoryName String Tên loại sản phẩm

Bảng COLOR

1 productColorId ObjectId Khóa chính Mã màu sản phẩm

3 colorId ObjectId Khóa ngoại Mã màu

1 productDimensionId ObjectId Khóa chính Mã kích thước sản phẩm

3 productLength Number Chiều dài sản phẩm

4 productWidth Number Chiều rộng sản phẩm

5 productHeight Number Chiều cao sản phẩm

6 productWeight Number Trọng lượng sản phẩm

1 categoryId ObjectId Khóa chính Mã loại sản phẩm

2 categoryName String Tên loại sản phẩm

1 subcategoryId ObjectId Khóa chính Mã loại phòng

2 subcategoryName String Tên loại phòng

4.2.9 Bảng COLORSTT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 colorId ObjectId Khóa chính Mã màu

3 colorHex String Mã HEX của màu

Bảng SUPPLIER

1 supplierId ObjectId Khóa chính Mã nhà cung cấp

2 supplierName String Tên nhà cung cấp

Bảng CART

1 cartId ObjectId Khóa chính Mã giỏ hàng

2 customerId ObjectId Khóa ngoại Mã khách hàng

3 cartStatus Boolean Trạng thái giỏ hàng

Bảng CART_ITEM

1 cartItemId ObjectId Khóa chính Mã mặt hàng

2 cartId ObjectId Khóa ngoại Mã giỏ hàng

Bảng ORDER

1 orderId ObjectId Khóa chính Mã đơn hàng

3 staffId ObjectId Khóa ngoại Mã nhân viên

4 orderCode String Code đơn hàng

5 orderStatus String Trạng thái đơn hàng

7 orderAddress ObjectId Khóa ngoại Địa chỉ nhận hàng

8 paymentMethod ObjectId Khóa ngoại Phương thức thanh toán

9 orderShippingFee Number Phí vận chuyển

10 orderCompleteDay Date Ngày hoàn tất

Bảng ORDER_ITEM

1 orderItemId ObjectId Khóa chính Mã mặt hàng

2 orderId ObjectId Khóa ngoại Mã đơn hàng

6 productPrice Number Tổng giá trị sản phẩm

7 productSalePrice Number Giá sản phẩm sau giảm

Bảng IMPORT

1 importId ObjectId Khóa chính Mã nhập kho

2 staffId ObjectId Khóa ngoại Mã nhân viên

3 importDate Date Ngày nhập kho

4 importStatus String Trạng thái nhập kho

Bảng IMPORT_DETAIL

1 importDetailId ObjectId Khóa chính Mã chi tiết nhập kho

2 importId ObjectId Khóa ngoại Mã nhập kho

5 productSupplierId ObjectId Khóa ngoại Mã nhà cung cấp

Bảng FEEDBACK

1 feedbackId ObjectId Khóa chính Mã đánh giá

5 orderId ObjectId Khóa ngoại Mã đơn hàng

6 feedbackRating Number Xếp hạng sản phẩm

7 feedbackTitle String Tiêu đề đánh giá

8 feedbackContent String Nội dung đánh giá

Bảng FEEDBACK_IMAGE

1 feedbackImageId ObjectId Khóa chính Mã ảnh đánh giá

2 feedbackId ObjectId Khóa ngoại Mã đánh giá

3 feedbackImage ObjectId Khóa ngoại Mã ảnh

Bảng ADDRESS

1 addressId ObjectId Khóa chính Mã địa chỉ

3 receiverFirstName String Tên người nhận

4 receiverLastName String Họ người nhận

5 receiverPhone String SĐT người nhận

6 receiverAddress String Địa chỉ người nhận

9 receiverCity String Tỉnh / Thành phố

10 isDefault Boolean Địa chỉ mặc định

Bảng DISCOUNT

1 discountId ObjectId Khóa chính Mã đợt giảm giá

2 discountName String Tên đợt giảm giá

4 discountPercent Number Phần trăm giảm

5 discountStartDate Date Ngày bắt đầu

6 discountEndDate Date Ngày kết thúc

Bảng WISHLIST

1 wishlistId ObjectId Khóa chính Mã yêu thích

Bảng PAYMENT

1 paymentId ObjectId Khóa chính Mã thanh toán

2 paymentType String Loại thanh toán

3 paymentStatus Boolean Trạng thái thanh toán

Bảng ATTACHMENT

1 attachmentId ObjectId Khóa chính Mã tệp đính kèm

2 attachmentMimeType String Loại tệp đính kèm

3 attachmentName String Tên tệp đính kèm

4 attachmentSize Number Kích thước tệp đính kèm

Chương 5 THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Màn hình trang chủ

Hình 8: Màn hình trang chủ

Màn hình đăng nhập / đăng ký

Hình 9: Màn hình đăng nh p / đăng kýập / đăng ký

Màn hình quên mật khẩu

Hình 10: Màn hình quên m t kh uập / đăng ký ẩu

Màn hình sản phẩm

Hình 11: Màn hình s n ph mản phẩm ẩu

Màn hình chi tiết sản phẩm

Hình 12: Màn hình chi ti t s n ph mết sản phẩm ản phẩm ẩu

Màn hình giỏ hàng

Hình 13: Màn hình gi hàngỏ hàng

Màn hình đặt hàng

Hình 14: Màn hình đ t hàngặt hàng

Màn hình thông tin tài khoản

Hình 15: Màn hình thông tin tài kho nản phẩm

Màn hình danh sách địa chỉ

Hình 16: Màn hình danh sách đ a chịa chỉ ỉ

Màn hình danh sách hóa đơn

Hình 17: Màn hình danh sách hóa đ nơng 1.

Màn hình chi tiết hóa đơn

Hình 18: Màn hình chi ti t hóa đ nết sản phẩm ơng 1.

Màn hình đánh giá sản phẩm

ssHình 19: Màn hình đánh giá s n ph mản phẩm ẩu

Màn hình đổi mật khẩu

Hình 20: Màn hình đ i m t kh uổi mật khẩu ập / đăng ký ẩu

Màn hình danh sách sản phẩm yêu thích

Hình 21: Màn hình danh sách s n ph m yêu thíchản phẩm ẩu

Màn hình về chúng tôi

Hình 22: Màn hình v chúng tôiề chúng tôi

Màn hình đăng nhập (nhân viên)

Hình 23: Màn hình đăng nh p (nhân viên)ập / đăng ký

STT Biến cố Xử lý

1 Nhấn nút “Hiện mật khẩu” (icon mắt) Hiển thị mật khẩu đã nhập

2 Nhấn nút “Đăng nhập” Đăng nhập vào hệ thống

Màn hình trang chủ

Hình 24: Màn hình trang chủ

1 Nhấn icon mũi tên Thu nhỏ thanh menu

2 Đưa chuột vào avatar nhân viên Hiện thông tin và các chức năng

3 Nhấn nút “Sản phẩm” Chuyển sang màn hình quản lý sản phẩm

4 Nhấn nút “Nhập kho” Chuyển sang màn hình nhập kho

5 Nhấn nút “Đơn hàng” Chuyển sang màn hình quản lý đơn hàng

6 Nhấn nút “Khách hàng” Chuyển sang màn hình quản lý khách hàng

7 Nhấn nút “Nhân viên” Chuyển sang màn hình quản lý nhân viên

8 Nhấn nút “Giảm giá” Chuyển sang màn hình quản lý giảm giá

9 Nhấn nút “Đăng xuất” Đăng xuất khỏi hệ thống

10 Nhấn icon lịch Hiện popup chọn năm để hiển thị thống kê

Màn hình đổi mật khẩu

Hình 25: Màn hình đ i m t kh uổi mật khẩu ập / đăng ký ẩu

1 Nhấn nút “Xác nhận” Thay đổi mật khẩu của tài khoản nhân viên

2 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước

3 Nhấn icon X Hủy thao tác và trở về màn hình trước

Màn hình quản lý sản phẩm

Hình 26: Màn hình qu n lý s n ph mản phẩm ản phẩm ẩu

1 Nhấn nút “Thêm sản phẩm” Chuyển qua màn hình thêm sản phẩm

2 Nhấn nút “Chi tiết” Chuyển qua màn hình chi tiết sản phẩm

3 Nhấn nút “Chỉnh sửa” Chuyển sang màn hình chỉnh sửa sản phẩm

4 Nhấn nút “Xóa” Xóa sản phẩm

5 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword

Màn hình thêm sản phẩm

Hình 27: Màn hình thêm s n ph mản phẩm ẩu

1 Nhấn nút “Xác nhận” Thêm sản phẩm vào database

3 Nhấn nút “Thêm màu” Thêm selectbox chọn màu sản phẩm

4 Nhấn nút “Upload” Upload hình ảnh sản phẩm theo màu

5 Nhấn nút “Xóa màu” Xóa selectbox chọn màu sản phẩm

Màn hình chi tiết sản phẩm

Hình 28: Màn hình chi ti t s n ph mết sản phẩm ản phẩm ẩu

1 Chọn màu sản phẩm Hiển thị ảnh sản phẩm theo màu

Màn hình chỉnh sửa sản phẩm

Hình 29: Màn hình ch nh s a s n ph mỉ ửa sản phẩm ản phẩm ẩu

1 Nhấn nút “Xác nhận” Cập nhật thông tin sản phẩm vào database

3 Nhấn nút “Thêm màu” Thêm selectbox chọn màu sản phẩm

4 Nhấn nút “Upload” Upload hình ảnh sản phẩm theo màu

5 Nhấn nút “Xóa màu” Xóa selectbox chọn màu sản phẩm

6 Nhấn nút “Xóa hình” Xóa hình ảnh sản phẩm

Màn hình quản lý danh sách nhập kho

Hình 30: Màn hình qu n lý danh sách nh p khoản phẩm ập / đăng ký

1 Chọn trạng thái nhập kho Lọc dữ liệu theo trạng thái nhập kho

2 Nhấn nút “Chi tiết” Chuyển qua màn hình chi tiết nhập kho

3 Nhấn nút “Xác nhận” Xác nhận yêu cầu nhập kho

4 Nhấn nút “Hủy” Hủy yêu cầu nhập kho

5 Nhấn nút “Nhập kho” Chuyển sang màn hình nhập kho

Màn hình chi tiết nhập kho

Hình 31: Màn hình chi ti t nh p khoết sản phẩm ập / đăng ký

1 Nhấn icon X Trở lại màn hình trước

Màn hình nhập kho

Hình 32: Màn hình nh p khoập / đăng ký

1 Nhấn nút “Thêm sản phẩm” Chuyển qua màn hình thêm sản phẩm

2 Nhấn nút “Xóa tất cả” Xóa tất cả sản phẩm trong bảng

3 Nhấn nút “Yêu cầu nhập kho” Gửi yêu cầu nhập kho cho quản trị viên

4 Nhấn nút “Chỉnh sửa” Chuyển qua màn hình chỉnh sửa sản phẩm

5 Nhấn nút “Xóa” Xóa sản phẩm khỏi bảng

Màn hình thêm sản phẩm nhập kho

Hình 33: Màn hình thêm s n ph m nh p khoản phẩm ẩu ập / đăng ký

1 Nhấn nút “Xác nhận” Thêm sản phẩm nhập kho

Màn hình quản lý đơn hàng

Hình 34: Màn hình qu n lý đ n hàngản phẩm ơng 1.

1 Chọn bộ lọc Lọc dữ liệu theo trạng thái đơn hàng

2 Nhấn nút “Chi tiết” Chuyển qua màn hình chi tiết đơn hàng

3 Nhấn nút “Xác nhận” Xác nhận đơn hàng

4 Nhấn nút “Hủy” Hủy đơn hàng

Màn hình chi tiết đơn hàng

Hình 35: Màn hình chi ti t đ n hàngết sản phẩm ơng 1.

1 Nhấn icon X Trở về màn hình trước

Màn hình quản lý khách hàng

Hình 36: Màn hình qu n lý khách hàngản phẩm

1 Nhấn nút “Chi tiết” Chuyển qua màn hình chi tiết khách hàng

Màn hình chi tiết khách hàng

Hình 37: Màn hình chi ti t khách hàngết sản phẩm

1 Nhấn icon X Trở về màn hình trước

Màn hình quản lý nhân viên

Hình 38: Màn hình qu n lý nhân viênản phẩm

1 Nhấn nút “Thêm nhân viên” Chuyển qua màn hình thêm nhân viên

2 Nhấn nút “Chỉnh sửa” Chuyển qua màn hình chỉnh sửa nhân viên

Màn hình thêm nhân viên

Hình 39: Màn hình thêm nhân viên

2 Nhấn nút “Xác nhận” Thêm nhân viên vào database

Màn hình chỉnh sửa nhân viên

Hình 40: Màn hình ch nh s a nhân viênỉ ửa sản phẩm

2 Nhấn nút “Xác nhận” Cập nhật nhân viên vào database

Màn hình quản lý đợt giảm giá

Hình 41: Màn hình qu n lý đ t gi m giáản phẩm ợng khách hàng ản phẩm

1 Nhấn nút “Thêm đợt giảm giá” Chuyển qua màn hình thêm đợt giảm giá

2 Nhấn nút “Chỉnh sửa” Chuyển qua màn hình chỉnh sửa đợt giảm giá

3 Nhấn nút “Danh sách sản phẩm” Chuyển qua màn hình danh sách sản phẩm

4 Nhấn nút “Xóa” Xóa đợt giảm giá

Màn hình thêm đợt giảm giá

Hình 42: Màn hình thêm đ t gi m giáợng khách hàng ản phẩm

2 Nhấn nút “Xác nhận” Thêm đợt giảm giá vào database

Màn hình chỉnh sửa đợt giảm giá

Hình 43: Màn hình ch nh s a đ t gi m giáỉ ửa sản phẩm ợng khách hàng ản phẩm

2 Nhấn nút “Xác nhận” Cập nhật thông tin đợt giảm giá vào database

Màn hình áp dụng đợt giảm giá cho sản phẩm

Hình 44: Màn hình áp d ng đ t gi m giá cho s n ph mụng đợt giảm giá cho sản phẩm ợng khách hàng ản phẩm ản phẩm ẩu

2 Nhấn nút “Xác nhận” Áp dụng đợt giảm giá cho các sản phẩm được chọn

Màn hình quản lý loại sản phẩm

Hình 45: Màn hình qu n lý lo i s n ph mản phẩm ại sản phẩm ản phẩm ẩu

Màn hình thêm loại sản phẩm

Hình 46: Màn hình thêm lo i s n ph mại sản phẩm ản phẩm ẩu

Màn hình chỉnh sửa loại sản phẩm

Hình 47: Màn hình ch nh s a lo i s n ph mỉ ửa sản phẩm ại sản phẩm ản phẩm ẩu

Màn hình quản lý loại phòng

Hình 48: Màn hình qu n lý lo i phòngản phẩm ại sản phẩm

Màn hình thêm loại phòng

Hình 49: Màn hình thêm lo i phòngại sản phẩm

Màn hình chỉnh sửa loại phòng

Hình 50: Màn hình ch nh s a lo i phòngỉ ửa sản phẩm ại sản phẩm

Màn hình quản lý màu

Hình 51: Màn hình qu n lý màuản phẩm

Màn hình thêm màu

Hình 52: Màn hình thêm màu

Màn hình chỉnh sửa màu

Hình 53: Màn hình ch nh s a màuỉ ửa sản phẩm

Màn hình quản lý nhà cung cấp

Hình 54: Màn hình qu n lý nhà cung c pản phẩm ấp

Màn hình thêm nhà cung cấp

Hình 55: Màn hình thêm nhà cung c pấp

Màn hình chỉnh sửa nhà cung cấp

Hình 56: Màn hình ch nh s a nhà cung c pỉ ửa sản phẩm ấp

Chương 6 CÀI ĐẶT VÀ KIỂM THỬ

Môi trường cài đặt và thử nghiệm

- Môi trường phát triển: Visual Studio Code.

- Môi trường quản lý phiên bản source code: Github.

Kết quả đánh giá

- Giao diện thân thiện, dễ sử dụng, dễ tiếp cận.

- Các chức năng được hoàn thiện và không gặp phải lỗi gì quá nghiêm trọng.

- Tốc độ tải trang, tốc độ phản hồi của hệ thống chưa tối ưu nhưng ổn định, không ảnh hưởng quá nhiều đến trải nghiệm người dùng.

- Có thể đảm bảo bảo mật thông tin người dùng.

Chương 7 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết quả đạt được

- Hiểu rõ hơn về HTML, CSS, TypeScript, JavaScript và thư viện ReactJS để triển Front-end cho website.

- Hiểu rõ hơn về NodeJS, ExpressJS và Mongoose để phát triển Back-end.

- Biết thêm về cách sử dụng Figma để thiết kế giao diện người dùng.

- Biết thêm về các nền tảng deploy website như Vercel, Render.

- Hiểu rõ hơn về quy trình phát triển một website.

Hạn chế

- Tốc độ hệ thống vẫn chưa tối ưu trong việc xử lý lượng dữ liệu lớn.

- Một số chức năng vẫn chưa tối ưu về tính tiện dụng đối với người dùng.

- Bảo mật chặt chẽ thông tin khách hàng là một khó khăn.

- Số lượng chức năng cho khách hàng vẫn chưa đầy đủ so với kế hoạch ban đầu do quản lý thời gian chưa hiệu quả.

Hướng phát triển

- Bổ sung các chức năng mới: Tương tác với người bán như chatbox, dịch vụ tư vấn nội thất và góc cảm hứng nội thất, quản lý các feedback để loại bỏ các feedback nhạy cảm, thống kê doanh thu cho từng khách hàng.

- Tối ưu hóa các chức năng để thuận tiện cho người dùng.

- Tối ưu tốc độ của hệ thống, tăng cường bảo mật.

- Phát triển ứng dụng mobile để tiếp cận thêm với các đối tượng khách hàng mới.

BẢNG PHÂN CÔNG CÔNG VIỆC

Công việc Nguyễn Hoàng Phúc - 20521767 Nguyễn Thanh Sang - 20521833

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

Code Front-end cho website khách hàng x

Code Front-end cho website admin x

Tiêu đề	Xây Dựng Website Bán Đồ Nội Thất Online
Tác giả	Nguyễn Hoàng Phúc, Nguyễn Thanh Sang
Người hướng dẫn	GV Nguyễn Tấn Toàn
Trường học	Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Công Nghệ Phần Mềm
Thể loại	Đồ Án
Năm xuất bản	2023
Thành phố	TP. Hồ Chí Minh

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