Báo cáo Đồ án 1: Xây dựng Ứng dụng quản lý thư viện - ĐH CNTT TPHCM

Tham khảo đồ án Ứng dụng quản lý thư viện xây dựng bằng ReactJS và NodeJS. Tài liệu cung cấp đầy đủ phân tích, thiết kế hệ thống, CSDL và giao diện.

• Tác giả: Phan Châu Hoàng
• Người hướng dẫn: TS. Nguyễn Thị Xuân Hương
• Trường học: Trường Đại học Công nghệ thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ phần mềm
• Đề tài: Ứng dụng quản lý thư viện
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Ứng dụng Quản lý Thư viện

Đồ án ứng dụng quản lý thư viện là một dự án học tập toàn diện được thực hiện bởi sinh viên Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP.HCM. Đây là một hệ thống quản lý thư viện hiện đại sử dụng công nghệ web phía trước (Frontend) với ReactJS và phía sau (Backend) với NodeJS. Mục tiêu chính của đồ án là xây dựng một nền tảng quản lý toàn diện giúp các nhân viên thư viện có thể dễ dàng quản lý sách, bạn đọc, phiếu mượn và xử lý vi phạm. Ứng dụng này được thiết kế để tối ưu hóa quy trình làm việc, nâng cao hiệu suất và cải thiện trải nghiệm người dùng. Với kiến trúc client-server hiện đại, hệ thống đảm bảo tính bảo mật cao thông qua JWT Authentication và cơ sở dữ liệu MySQL mạnh mẽ.

1.1. Mục tiêu và Phạm vi Dự án

Mục tiêu chính của đồ án là xây dựng ứng dụng quản lý thư viện toàn chức năng với giao diện thân thiện. Phạm vi dự án bao gồm quản lý danh sách sách, quản lý thẻ bạn đọc, phiếu mượn sách và xử lý các vi phạm. Hệ thống hỗ trợ các chức năng tìm kiếm nâng cao, lọc dữ liệu và báo cáo chi tiết. Ứng dụng cung cấp dashboard trực quan giúp quản lý viên theo dõi tình hình thư viện một cách hiệu quả và kịp thời.

1.2. Đối tượng Người dùng

Ứng dụng được thiết kế cho nhiều loại người dùng khác nhau bao gồm quản lý viên thư viện, nhân viên thư viện và bạn đọc. Quản lý viên có quyền quản lý toàn bộ hệ thống, tạo tài khoản nhân viên và xem báo cáo. Nhân viên có thể xử lý các giao dịch mượn sách, quản lý thẻ bạn đọc và ghi nhận vi phạm. Các bạn đọc có thể xem danh sách sách và các thông tin liên quan thông qua giao diện thân thiện và dễ sử dụng.

II. Stack Công nghệ Sử dụng

Đồ án ứng dụng quản lý thư viện được xây dựng trên nền tảng công nghệ hiện đại và phổ biến trong ngành phát triển web. Phía frontend sử dụng ReactJS - một thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng động và tương tác cao. Kết hợp với Tailwind CSS, hệ thống cung cấp thiết kế giao diện đẹp mắt và responsive. Phía backend được phát triển bằng NodeJS với Express.js, cung cấp API RESTful hiệu suất cao. Dữ liệu được lưu trữ trong MySQL - cơ sở dữ liệu quan hệ đáng tin cậy và phổ biến. Quản lý trạng thái ứng dụng sử dụng Redux Toolkit, đảm bảo luồng dữ liệu rõ ràng và dễ bảo trì.

2.1. Frontend ReactJS và Tailwind CSS

ReactJS là thư viện JavaScript hàng đầu cho phát triển giao diện người dùng, cho phép xây dựng các thành phần tái sử dụng và tối ưu hóa hiệu suất rendering. Tailwind CSS cung cấp hệ thống utility classes giúp tạo dựng giao diện responsive và hiện đại mà không cần viết CSS tùy chỉnh phức tạp. Kết hợp này tạo ra ứng dụng quản lý thư viện với giao diện người dùng chuyên nghiệp, nhanh chóng và dễ bảo trì.

2.2. Backend NodeJS Express.js và MySQL

NodeJS cung cấp môi trường runtime hiệu suất cao cho JavaScript phía server, hỗ trợ xử lý đồng thời và không đồng bộ. Express.js - framework web phổ biến nhất cho NodeJS, giúp xây dựng RESTful API một cách đơn giản. MySQL được sử dụng như cơ sở dữ liệu chính, đảm bảo tính toàn vẹn dữ liệu và bảo mật thông qua các ràng buộc khóa ngoại và mã hóa mật khẩu.

2.3. Bảo mật JWT Authentication

JWT (JSON Web Token) được sử dụng để xác thực người dùng, cung cấp cơ chế bảo mật stateless hiệu quả. Mỗi request từ client gửi kèm token được ký mã hóa, server xác minh token trước khi cấp quyền truy cập. Phương pháp này tăng cường bảo mật cho ứng dụng quản lý thư viện, ngăn chặn truy cập trái phép và bảo vệ dữ liệu người dùng.

III. Thiết kế Hệ thống và Cơ sở Dữ liệu

Hệ thống ứng dụng quản lý thư viện được thiết kế theo kiến trúc client-server hiện đại, đảm bảo sự tách biệt rõ ràng giữa logic phía trước và phía sau. Thiết kế cơ sở dữ liệu tuân theo chuẩn hóa dữ liệu (normalization) để tối ưu hóa hiệu suất và giảm thiểu dư thừa. Hệ thống bao gồm các bảng dữ liệu chính như Users, Readers, Books, BorrowRecords, Violations và Publications. Mỗi bảng được thiết kế với khóa chính (Primary Key) và khóa ngoài (Foreign Key) để đảm bảo tính toàn vẹn dữ liệu. Sơ đồ Use Case được sử dụng để mô tả tất cả các yêu cầu chức năng của hệ thống, giúp đội phát triển hiểu rõ các tương tác của người dùng.

3.1. Thiết kế Cơ sở Dữ liệu

Cơ sở dữ liệu ứng dụng quản lý thư viện được tổ chức thành nhiều bảng có mối quan hệ logic rõ ràng. Bảng Users lưu trữ thông tin nhân viên, bảng Readers lưu trữ thẻ bạn đọc, bảng Books chứa danh sách sách trong thư viện. Bảng BorrowRecords ghi lại các phiếu mượn và trả sách, bảng Violations theo dõi các vi phạm của bạn đọc. Thiết kế này đảm bảo dữ liệu được lưu trữ hiệu quả và dễ dàng truy vấn.

3.2. Phân tích Yêu cầu Chức năng

Yêu cầu chức năng của ứng dụng bao gồm quản lý người dùng, quản lý sách, quản lý phiếu mượn và xử lý vi phạm. Hệ thống hỗ trợ các hoạt động CRUD cơ bản (Create, Read, Update, Delete) cho tất cả các entity chính. Ngoài ra, cần có các chức năng tìm kiếm nâng cao, lọc dữ liệu, xuất báo cáo và quản lý thông báo để nâng cao hiệu suất quản lý thư viện.

IV. Các Màn hình Chính và Kết quả Đạt được

Ứng dụng quản lý thư viện cung cấp hơn 30 màn hình chức năng, bao gồm màn hình đăng nhập, đăng ký, quên mật khẩu và dashboard chính. Các màn hình quản lý người dùng cho phép thêm, sửa, xóa và xem chi tiết nhân viên. Màn hình quản lý sách hỗ trợ quản lý đầu sách, tựa sách, ấn phẩm và các bản sách cụ thể. Màn hình phiếu mươn sách giúp ghi nhận các hoạt động mượn và trả sách. Màn hình xử lý vi phạm cho phép theo dõi và xử lý các vi phạm của bạn đọc. Giao diện được thiết kế nhất quán, thân thiện và dễ sử dụng trên các thiết bị khác nhau. Đồ án đạt được mục tiêu là tạo một hệ thống quản lý thư viện hiệu quả, hiện đại và dễ bảo trì.

4.1. Danh sách Các Màn hình Chính

Ứng dụng bao gồm các màn hình quản lý quan trọng như quản lý người dùng, quản lý thẻ bạn đọc, quản lý sách, quản lý phiếu mượn và quản lý vi phạm. Mỗi màn hình được thiết kế với giao diện trực quan hiển thị danh sách dữ liệu, các nút hành động (Thêm, Sửa, Xóa, Xem chi tiết), và các công cụ tìm kiếm lọc nâng cao. Màn hình cài đặt cho phép người dùng thay đổi thông tin cá nhân và quản lý các tùy chọn hệ thống.

4.2. Kết quả và Hướng Phát triển

Đồ án đã hoàn thành thành công với đầy đủ các chức năng yêu cầu, cung cấp một ứng dụng quản lý thư viện hoàn chỉnh cho các thư viện quy mô vừa và nhỏ. Hướng phát triển tương lai bao gồm tích hợp báo cáo thống kê nâng cao, SMS/Email notification, mobile application và machine learning để đề xuất sách cho bạn đọc dựa trên lịch sử mượn sách.

Trích đoạn nội dung tài liệu

Chương 1 – Giới thiệu đề tài: Trình bày lý do chọn đề tài, mục tiêu, phạm vi, đối tượng sử dụng, phương pháp thực hiện, công nghệ sử dụng và kết quả mong đợi.  Chương 2 – Cơ sở lý thuyết: Trình bày một số vấn đề mà các nghiên cứu trong và ngoài nước đưa ra, từ đó đưa ra giải pháp. Đồng thời trình bày về các kiến thức nền tảng sử dụng để phục vụ cho đồ án.  Chương 3 – Phân tích và thiết kế hệ thống: Đặc tả và mô hình hóa các yêu cầu phần mềm; trình bày các bản thiết kế của đồ án, bao gồm thiết kế hệ thống, thiết kế đối tượng, thiết kế dữ liệu và thiết kế giao diện.

 Chương 4 – Xây dựng Website: Trình bày quy trình cài đặt, kiểm thử và triển khai sản phẩm.  Chương 5 – Kết luận: Kết luận lại những vấn đề đã giải quyết và trình bày ở các phần trước và nêu ra hướng phát triển cho sản phẩm trong tương lai. GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Trong thời đại công nghệ phát triển nhanh chóng, ngành thời trang không chỉ dừng lại ở việc cung cấp sản phẩm, mà còn phải đáp ứng được nhu cầu trải nghiệm mua sắm tiện lợi, hiện đại và mang tính cá nhân hóa cao.

Các shop thời trang trực tuyến hiện nay phần lớn đã đáp ứng được nhu cầu cơ bản của khách hàng, như hiển thị sản phẩm, thanh toán trực tuyến, hay quản lý đơn hàng. Tuy nhiên, những vấn đề như thiếu tính tương tác, gợi ý sản phẩm chưa chính xác, và khó khăn trong việc hỗ trợ khách hàng vẫn còn tồn tại. Để giải quyết các hạn chế này, việc tích hợp công nghệ chatbot thông minh vào hệ thống website shop thời trang là một giải pháp mang tính thực tiễn cao. Chatbot không chỉ hỗ trợ khách hàng trong việc tìm kiếm, gợi ý sản phẩm mà còn cải thiện đáng kể hiệu quả giao tiếp giữa shop và khách hàng, từ đó nâng cao trải nghiệm mua sắm.

Đề tài “Xây dựng website shop thời trang tích hợp chatbot tư vấn” được thực hiện nhằm mang đến giải pháp công nghệ hiện đại, giúp shop thời trang không chỉ tối ưu hóa quản lý bán hàng mà còn xây dựng mối quan hệ tốt hơn với khách hàng, phù hợp với xu hướng chuyển đổi số trong kinh doanh hiện nay. Mục tiêu đề tài  Xây dựng một website quản lý thư viện với giao diện thân thiện, trực quan, hài hòa, đáp ứng được các chức năng cần thiết của một website quản lý.  Nâng cao trải nghiệm người dùng và hỗ trợ người thủ thư trong việc quản lý thư viện.  Đảm bảo hệ thống hoạt động ổn định, dễ mở rộng và đáp ứng nhu cầu sử dụng thực tế.

Đối tượng nghiên cứu 1. Các công nghệ  Website bán hàng trực tuyến: Nghiên cứu và áp dụng các công nghệ web hiện đại như HTML, Tailwind CSS, JavaScript, ReactJS để xây dựng giao diện người dùng và xử lý các yêu cầu từ khách hàng.  Backend và cơ sở dữ liệu: Nghiên cứu các công nghệ backend như Node.js và MySQL để xử lý các yêu cầu, quản lý sản phẩm và đơn hàng. Đối tượng người dùng  Người thủ thư: Người sử dụng website để quản lý thư viện bao gồm các quản lý như quản lý sách, quản lý bạn đọc, mượn, trả sách.

Phạm vi nghiên cứu  Phạm vi của dự án sẽ tập trung vào xây dựng các chức năng chính cho website quản lý thư viện, bao gồm: o Quản lý sách: Quản lý cơ sở dữ liệu về sách, bao gồm thêm mới, cập nhật và xóa sách. o Quản lý người dùng: Theo dõi và quản lý thông tin cá nhân, tài khoản của độc giả, và các giao dịch mượn - trả sách của họ. o Quản lý mượn trả sách: Theo dõi trạng thái của các sách đang được độc giả mượn, bao gồm thông tin về thời hạn và tình trạng mượn. o Thông báo, nhắc nhở: Thông báo về sách mới và nhắc nhở thời hạn trả sách o Báo cáo thống kê: báo cáo về tình hình mượn sách, bao gồm các sách được mượn nhiều nhất, người dùng mượn nhiều sách nhất.

Thống kê số lượng sách theo thể loại, tác giả, nhà xuất bản, năm xuất bản.  Với thời gian thực hiện có hạn, dự án sẽ ưu tiên triển khai các chức năng cốt lõi nhằm đảm bảo hệ thống hoạt động hiệu quả, đáp ứng nhu cầu quản lý thư viện một cách thuận tiện và chính xác. Phương pháp thực hiện  Phương pháp nghiên cứu tài liệu: Tìm hiểu các nghiên cứu, tài liệu liên quan đến xây dựng ứng dụng quản lý thư viện.  Phương pháp thiết kế và phát triển hệ thống: Xây dựng hệ thống website, thực hiện phát triển frontend và backend, tích hợp các công nghệ cần thiết.

 Phương pháp kiểm thử: Thực hiện kiểm thử chức năng của hệ thống, đảm bảo website. Công nghệ sử dụng  Công cụ thiết kế UI/UX: Figma.  Ngôn ngữ sử dụng: Javascript.  Xây dựng website: HTML, Tailwind CSS, Javascript.

 Thư viện/Framework sử dụng chính: o Front-end: ReactJS. o Back-end: NodeJS, MySQL.  Source Control: GitHub.  Các công cụ hỗ trợ khác (có thể có): Postman, Docker, v.

Tổng quản về HTML Hình CƠ SỞ LÝ THUYẾT.1 Giới thiệu HTML 2. HTML là gì? HTML - HyperText Markup Language, là loại ngôn ngữ đánh dấu siêu văn bản, thường được sử dụng trong các tài liệu web. Nhưng xét về bản chất, HTML lại không được xem như một ngôn ngữ lập trình, mà nó giống như một ngôn ngữ xác định đâu là ý nghĩa, mục đích và cấu trúc của một tài liệu. Do đó, thay vì sử dụng ngôn ngữ lập trình để thực hiện các chức năng, HTML lại dùng các thẻ để xác định các loại nội dung khác nhau, cũng như mục đích phục vụ cho trang web.

Vai trò của HTML HTML có nhiệm vụ xây dựng cấu trúc siêu văn bản trên một website, hay khai báo các tập tin kỹ thuật số như hình ảnh, video, nhạc. Ngoài ra, nó còn được dùng để phân chia các đoạn văn bản, heading, links, blockquotes. Đồng thời thực hiện dễ dàng các công việc sau: 6  Phân chia và định dạng nội dung: chia đoạn, định dạng và nhấn mạnh văn bản, đặt tiêu đề, ngắt dòng, tạo danh sách, và tạo ký tự đặc biệt.  Tạo liên kết và chèn hình ảnh: bao gồm liên kết nội bộ và liên kết ngoài web, ảnh minh họa,.

thu hút người dùng  Tạo các kiểu mẫu: gồm cách hiển thị các đoạn văn bản, hình ảnh, bảng,.giúp cho trang web đồng nhất và dễ dàng quản lý hơn.  Xác định các thuộc tính của trang web: bao gồm màu sắc, kích thước, vị trí và các thông tin khác. Tổng quan về Tailwind CSS Hình CƠ SỞ LÝ THUYẾT.2 Giới thiệu Tailwind CSS 2. CSS là gì? Tailwind CSS là một framework CSS tiện dụng được xây dựng dựa trên các utility-first class (lớp tiện ích) để giúp phát triển giao diện người dùng nhanh chóng và hiệu quả.

Thay vì sử dụng các class định sẵn cho từng thành phần, Tailwind CSS cung cấp hàng trăm class nhỏ gọn, có thể tái sử dụng, giúp bạn tùy chỉnh giao diện trực tiếp ngay trong mã HTML. Nhờ có Tailwind CSS, việc xây dựng và thiết kế giao diện trở nên linh hoạt, trực quan và ít phụ thuộc vào việc viết CSS thủ công. Các thành phần giao diện được 7 định nghĩa bằng các class tiện ích, giúp việc tinh chỉnh bố cục, màu sắc, kích thước, khoảng cách, và nhiều yếu tố khác dễ dàng hơn. Một số đăc điểm nổi bật của Tailwind CSS:  Utility-first: Tập trung vào các class tiện ích nhỏ gọn, giúp tạo kiểu nhanh chóng mà không cần viết CSS từ đầu.

 Tùy biến cao: Cho phép cấu hình các thiết lập riêng, như màu sắc, kích thước, font chữ, v.  Không giới hạn thiết kế: Khác với các framework khác như Bootstrap, Tailwind không áp đặt sẵn giao diện, giúp bạn thiết kế tự do và sáng tạo hơn. Vai trò của Tailwind CSS Tailwind CSS đóng vai trò quan trọng trong việc hỗ trợ các nhà phát triển xây dựng giao diện web hiệu quả, tối ưu hóa mã nguồn và nâng cao trải nghiệm người dùng. Một số vai trò và lợi ích chính của Tailwind CSS:  Xây dựng giao diện nhanh chóng: Nhờ các class tiện ích được cung cấp sẵn, bạn có thể tạo bố cục và phong cách cho website chỉ bằng cách chỉnh sửa mã HTML mà không cần viết CSS phức tạp.

 Đáp ứng đa nền tảng: Hỗ trợ xây dựng giao diện tương thích với nhiều thiết bị khác nhau, từ điện thoại, máy tính bảng đến màn hình lớn.  Tăng tính cá nhân hóa: Cho phép tùy chỉnh thiết kế giao diện theo phong cách riêng mà không bị ràng buộc bởi các mẫu giao diện cố định.  Tái sử dụng và bảo trì dễ dàng: Các class tiện ích giúp giảm lượng mã CSS cần viết, dễ dàng tái sử dụng và bảo trì khi cập nhật giao diện.  Tối ưu hóa hiệu suất: Tích hợp công cụ như PurgeCSS để loại bỏ mã CSS không sử dụng, giúp giảm dung lượng file CSS và tăng tốc độ tải trang.

Tổng quan về Javascript Hình CƠ SỞ LÝ THUYẾT.3 Giới thiệu Javascript 2. JavaScript là gì? JavaScript hay còn được viết tắt là JS, đây là một trong những ngôn ngữ lập trình phổ biến được nhiều lập trình viên sử dụng, do Brendan Eich ra mắt vào năm 1995. Nhờ các tính năng nổi bật của mình mà hầu hết các Slideshow, Pop-up quảng cáo, cùng tính năng Autocomplete của Google đều có sự góp sức của JavaScript. JavaScript được sử dụng nhằm mục đích biến những website tĩnh nhàm chán sang trang thái động cuốn hút, đồng thời có khả năng tạo sự tương tác, cải thiện hiệu suất máy chủ và nâng cao trải nghiệm người dùng.

Nhưng để thực hiện tốt những hoạt động trên, JavaScript phải cần đến sự hỗ trợ của HTML và CSS. Vai trò của JavaScript JavaScript còn được biết đến là một ngôn ngữ lập trình cho phép các nhà phát triển web thiết kế ra các trang web có khả năng tương tác. Nhờ có sự hỗ trợ của JavaScript, mà các công việc trở nên đơn giản và dễ dàng hơn khi thực hiện như:  Tạo bố cục chuyển động với thư viện ảnh và hiệu ứng động. 9  Xây dựng các trò chơi, hoạt hình 2D hoặc 3D, và các ứng dụng cơ sở dữ liệu phức tạp để tăng tính tương tác trên trang web.

 Tăng cường hành vi người dùng bằng các tính năng như xác nhận hộp thoại, các lời kêu gọi hành động, và các tính năng tương tác khác.  Kiểm soát mặc định của trình duyệt bằng cách thay đổi các hành vi mặc định của trình duyệt, chẳng hạn như xử lý các biểu mẫu đăng ký và đăng nhập của người dùng.