CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
ReactJS
React (ReactJs hay React.js) là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2011 và đã tồn tại hơn 10 năm Nguyên lý của React dựa trên cách tiếp cận component-based, cho phép tái sử dụng và tối ưu hóa cho ứng dụng một trang (Single Page Application - SPA) Thư viện này hỗ trợ lập trình viên trong việc xây dựng giao diện người dùng thông qua JSX, một cú pháp mở rộng của JavaScript.
JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render 1 trang web
DOM, hay còn gọi là Document Object Model, là một cấu trúc trừu tượng đại diện cho văn bản Mỗi đoạn mã HTML được xem như một HTML DOM, trong đó các yếu tố của HTML được coi là các nút (nodes) của DOM.
Virtual DOM là cần thiết vì khi một node thay đổi, các node khác cũng phải được cập nhật Ví dụ, nếu bạn có 10 mục và thay đổi một trong số đó, DOM sẽ làm mới 9 mục còn lại, khiến chúng trở về trạng thái ban đầu.
Tốc độ xử lý của DOM là nhanh, nhưng trong các ứng dụng SPA, việc thay đổi DOM liên tục có thể diễn ra chậm và không khả thi cho các ứng dụng lớn Do đó, virtual DOM được sử dụng để thay thế, được xây dựng dựa trên DOM thực tế.
When rendering a JSX element, the virtual DOM objects are updated as the virtual DOM changes ReactJS compares the current virtual DOM with the previous version to ensure that updates are made efficiently before reflecting changes on the real DOM and displaying them on the screen.
- 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
- 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, viết tắt của Javascript XML, giúp đơn giản hóa việc viết mã HTML trong React, mang lại cấu trúc rõ ràng và dễ hiểu Cú pháp của JSX tương tự như HTML, tạo điều kiện thuận lợi cho lập trình viên.
Props và State là hai loại dữ liệu quan trọng trong React Dù ban đầu có thể gây nhầm lẫn, nhưng khi bắt đầu lập trình, bạn sẽ nhanh chóng phân biệt được chúng.
Sự khác biệt chính giữa state và props là state là dữ liệu riêng tư, chỉ có thể thay đổi bên trong component, trong khi props là dữ liệu bên ngoài, được truyền từ component cha xuống theo cấu trúc 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 đối tượng lưu trữ giá trị của các thuộc tính trong component và chỉ tồn tại trong phạm vi của component đó Khi giá trị của state thay đổi, component sẽ được render lại.
To install state in a component, simply implement the getInitialState() function, which allows you to return any desired values to set the component's initial state.
- Để 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 là quá trình diễn ra trong vòng đời của một component, trong đó ReactJS thực hiện nhiều tiến trình khác nhau khi render component Quá trình này được lặp lại nhiều lần với các component khác nhau.
When a component is invoked, it initializes its props and state, followed by processes such as mounting, unmounting, and updating To manage these stages effectively, it is essential to utilize lifecycle methods.
NodeJS
NodeJS là một môi trường runtime mã nguồn mở, đa nền tảng, cho phép chạy ứng dụng web bên ngoài trình duyệt Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS là giải pháp lý tưởng cho các ứng dụng yêu cầu xử lý nhiều dữ liệu nhờ vào mô hình hướng sự kiện 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ở cho việc phát triển ứng dụng web trên nền tảng Node.js Nó cho phép người dùng dễ dàng thiết kế và phát triển ứng dụng web cũng như API một cách nhanh chóng, rất phù hợp cho các lập trình viên quen thuộc với JavaScript.
ExpressJS là một framework phát triển ứng dụng web trên Node.js, cho phép lập trình viên tái sử dụng mã nguồn để xây dựng các ứng dụng web đơn trang (SPA), đa trang hoặc kết hợp cả hai Bên cạnh đó, ExpressJS cung cấp kiến trúc MVC (Model-View-Controller) giúp tổ chức hiệu quả các ứng dụng web phía máy chủ.
Node.js với các tính năng nâng cao giúp Express.js đơn giản hóa quá trình xây dựng API hiệu quả Nếu không có Express.js, lập trình viên sẽ phải viết một lượng mã lớn để xử lý các yêu cầu khác nhau.
ExpressJS đơn giản hóa quá trình xây dựng ứng dụng web và API trên Node.js Nhờ vào sự hỗ trợ từ cộng đồng và nhiều thư viện bên thứ ba, ExpressJS trở thành công cụ hữu ích cho lập trình viên.
Lợi ích khi sử dụng:
ExpressJS là một công nghệ dễ học và sử dụng cho những ai đã quen thuộc với JavaScript, giúp đơn giản hóa quá trình phát triển back-end.
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 tiết kiệm thời gian viết mã, giảm một nửa thời gian so với các phương pháp truyền thống, đồng thời hỗ trợ các nhà phát triển trong việc xây dựng ứng dụng web hiệu quả Ngoài ra, nó còn cung cấp nhiều tính năng hữu ích, giúp giảm bớt công sức trong quá trình phát triển.
ExpressJS là một công cụ phát triển ứng dụng web dễ sử dụng nhờ hỗ trợ ngôn ngữ JavaScript, vốn rất dễ học cho người mới Điều này khiến ExpressJS trở thành lựa chọn tuyệt vời cho những người bắt đầu trong lĩnh vực phát triển web, giúp họ đạt được thành công.
ExpressJS được xây dựng trên nền tảng Node.js, một kiến trúc hướng sự kiện có khả năng xử lý hàng nghìn yêu cầu đồng thời từ khách hàng, điều mà PHP không thể thực hiện Node.js được thiết kế đặc biệt để hỗ trợ các ứng dụng web thực, mang lại hiệu suất cao và khả năng mở rộng tốt.
Sử dụng tiền một cách hiệu quả để tối đa hóa lợi nhuận là điều quan trọng đối với mọi doanh nghiệp ExpressJS, một ứng dụng web miễn phí và mã nguồn mở, là lựa chọn lý tưởng cho các doanh nghiệp nhằm tối ưu hóa quy trình phát triển.
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 client-server, hay còn gọi là mô hình khách-chủ, là một cấu trúc mạng máy tính bao gồm hai thành phần chính: máy khách (client) và máy chủ (server) Trong mô hình này, máy khách gửi yêu cầu về việc lưu trữ tài nguyên và dịch vụ từ máy chủ, tạo nên sự tương tác và trao đổi thông tin hiệu quả giữa hai bên.
Máy tính client gửi yêu cầu dữ liệu đến server qua Internet, và server sẽ chấp nhận yêu cầu này Sau đó, server gửi lại các gói dữ liệu mà client đã yêu cầu Trong mô hình này, client không chia sẻ bất kỳ tài nguyên nào mà mình sở hữu.
Mô hình client-server là cấu trúc ứng dụng phân tán, giúp phân chia các nhiệm vụ giữa các server cung cấp dịch vụ và client yêu cầu dịch vụ Hiện nay, mô hình này được ứng dụng rộng rãi trong các nền tảng như Email và World Wide Web.
Client, hay còn gọi là "khách hàng", là cá nhân hoặc tổ chức đăng ký sử dụng một dịch vụ nào đó Trong lĩnh vực công nghệ, Client được hiểu là máy tính (Host) có khả năng tiếp nhận dữ liệu hoặc sử dụng dịch vụ từ Server (nhà cung cấp dịch vụ).
Server là máy chủ cung cấp dịch vụ trong thế giới kỹ thuật số, đóng vai trò là máy tính từ xa cung cấp dữ liệu và thông tin, cũng như quyền truy cập vào các dịch vụ khác nhau.
Trong mô hình Client – Server, Client là bên gửi yêu cầu, trong khi Server có nhiệm vụ đáp ứng yêu cầu đó, miễn là thông tin yêu cầu nằm trong cơ sở dữ liệu.
THIẾT KẾ CƠ SỞ DỮ LIỆU
Sơ đồ lớp
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ý
Màn hình quên mật khẩu
Hình 10: Màn hình quên mật khẩu
Màn hình sản phẩm
Hình 11: Màn hình sản phẩm
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
Màn hình giỏ hàng
Hình 13: Màn hình giỏ hàng
Màn hình đặt hàng
Hình 14: Màn hình đặ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
Màn hình danh sách địa chỉ
Hình 16: Màn hình danh sá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
Màn hình chi tiết hóa đơn
Hình 18: Màn hình chi tiết hóa đơn
Màn hình đánh giá sản phẩm
ss Hình 19: Màn hình đánh giá sản phẩm
Màn hình đổi mật khẩu
Hình 20: Màn hình đổi mật khẩ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
Màn hình về chúng tôi
Hình 22: Màn hình về 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)
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ủ
STT Biến cố Xử lý
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
STT Biến cố Xử lý
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
STT Biến cố Xử lý
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
STT Biến cố Xử lý
1 Nhấn nút “Xác nhận” Thêm sản phẩm vào database
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 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 icon X Hủy thao tác và trở về màn hình trước
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
STT Biến cố Xử lý
1 Chọn màu sản phẩm Hiển thị ảnh sản phẩm theo màu
2 Nhấn icon X Hủy thao tác và trở về màn hình trước
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
STT Biến cố Xử lý
1 Nhấn nút “Xác nhận” Cập nhật thông tin sản phẩm vào database
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 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
7 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ý danh sách nhập kho
Hình 30: Màn hình quản lý danh sách nhập kho
STT Biến cố Xử lý
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
6 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
Màn hình chi tiết nhập kho
Hình 31: Màn hình chi tiết nhập kho
STT Biến cố Xử lý
1 Nhấn icon X Trở lại màn hình trước
2 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
Màn hình nhập kho
Hình 32: Màn hình nhập kho
STT Biến cố Xử lý
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
6 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 nhập kho
Hình 33: Màn hình thêm sản phẩm nhập kho
STT Biến cố Xử lý
1 Nhấn nút “Xác nhận” Thêm sản phẩm nhập kho
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ý đơn hàng
Hình 34: Màn hình quản lý đơn hàng
STT Biến cố Xử lý
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
5 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
Màn hình chi tiết đơn hàng
Hình 35: Màn hình chi tiết đơn hàng
STT Biến cố Xử lý
1 Nhấn icon X Trở về màn hình trước
2 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
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
STT Biến cố Xử lý
1 Nhấn nút “Chi tiết” Chuyển qua màn hình chi tiết khách hàng
2 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
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
STT Biến cố Xử lý
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
STT Biến cố Xử lý
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
3 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
Màn hình thêm nhân viên
Hình 39: Màn hình thêm nhân viên
STT Biến cố Xử lý
1 Nhấn icon X Hủy thao tác và trở về màn hình trước
2 Nhấn nút “Xác nhận” Thêm nhân viên vào database
3 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước
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
STT Biến cố Xử lý
1 Nhấn icon X Hủy thao tác và trở về màn hình trước
2 Nhấn nút “Xác nhận” Cập nhật nhân viên vào database
3 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước
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á
STT Biến cố Xử lý
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á
5 Tìm kiếm dữ liệu theo cột Lọc dữ liệu theo keyword
Màn hình thêm đợt giảm giá
Hình 42: Màn hình thêm đợt giảm giá
STT Biến cố Xử lý
1 Nhấn icon X Hủy thao tác và trở về màn hình trước
2 Nhấn nút “Xác nhận” Thêm đợt giảm giá vào database
3 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước
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á
STT Biến cố Xử lý
1 Nhấn icon X Hủy thao tác và trở về màn hình trước
2 Nhấn nút “Xác nhận” Cập nhật thông tin đợt giảm giá vào database
3 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước
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
STT Biến cố Xử lý
1 Nhấn icon X Hủy thao tác và trở về màn hình trước
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
3 Nhấn nút “Hủy bỏ” Hủy thao tác và trở về màn hình trước
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
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
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
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
Màn hình thêm loại phòng
Hình 49: Màn hình thêm loại phòng
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
Màn hình quản lý màu
Hình 51: Màn hình quản lý màu
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
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
Màn hình thêm nhà cung cấp
Hình 55: Màn hình thêm nhà cung cấp
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
