xây dựng website quản lý dịch vụ làm đẹp cho thú cưng

Đồ án với đề tài Website quản lý dịch vụ chăm sóc, làm đẹp cho thú cưng được xây dựng bằng ngôn ngữ lập trình Javascipt, sử dụng NodeJS, ReactJS, ExpressJS framework và sử dụng hệ quản t

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

Đà Nẵng, 01/2024

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

Đà Nẵng, 01/2024

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI: XÂY DỰNG WEBSITE QUẢN LÝ DỊCH VỤ

LÀM ĐẸP CHO THÚ CƯNG

Giảng viên hướng dẫn duyệt

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Đồ án với đề tài Website quản lý dịch vụ chăm sóc, làm đẹp cho thú cưng được xây dựng bằng ngôn ngữ lập trình Javascipt, sử dụng NodeJS, ReactJS, ExpressJS framework và sử dụng hệ quản trị cơ sở dữ liệu NO-SQL MONGODB

Website bao gồm các chức năng chính dành cho người sử dụng là khách hàng như: xem danh sách các dịch vụ, tìm kiếm các dịch vụ, xem giá dịch vụ, đăng ký dịch vụ Đối với người sử dụng là nhân viên có các chức năng như: xem và tìm kiếm Khách hàng, quản lý Xác nhận dịch vụ, quản lý đặt dịch vụ, … Đối với người sử dụng là chủ doanh nghiệp hoặc người quản lý thì ngoài các chức năng của nhân viên, có thể sử dụng các chức năng khác như xem thống kê, quản lý nhân viên, quản lý khách hàng, quản lý dịch vụ, quản lý thời gian,…

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: TS Nguyễn Tấn Thuận Sinh viên thực hiện: Lê Lương Minh Hiếu Mã SV: 1911505310121

1 Tên đề tài:

Xây dựng website quản lý dịch vụ làm đẹp cho thú cưng

2 Các số liệu, tài liệu ban đầu:

− Dựa trên qui định upload tài liệu, các qui tắc đặt câu hỏi

3 Nội dung chính của đồ án:

Quá trình xây dựng website quản lý dịch vụ làm đẹp cho thú cưng: − Thu thập thông tin tài liệu liên quan và khảo sát thực tế − Phân tích thiết kế các chức năng của hệ thống

− Phân tích thiết kế cơ sơ dữ liệu − Thiết kế giao diện cho các chức năng − Xây dựng hệ thống website

− Kiểm thử chương trình − Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến

− Website quản lý dịch vụ chăm sóc, làm đẹp cho thú cưng − File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 05/09/2023 6 Ngày nộp đồ án: 21/01/2024

Đà Nẵng, ngày tháng năm 2024

LỜI NÓI ĐẦU

i

Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ chúng em thực hiện đề tài này Đặc biệt là TS Nguyễn Tấn Thuận đã tận tình giúp đỡ em trong suốt quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin cảm ơn quý thầy cô thuộc ngành Công nghệ thông tin khoa Công nghệ số, trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong suốt thời gian 4 năm trên giảng đường để em có thể thực hiện tốt đề tài này Đặc biệt, em xin gởi lời cảm ơn chân thành tới TS Nguyễn Tấn Thuận, cùng TS Hoàng Thị Mỹ Lệ - giáo viên chủ nhiệm lớp 19T1 đã giúp đỡ em rất nhiều trong quá trình học tập và công việc

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nên không thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý để em có thể hoàn thiện đề tài Và những lời góp ý đó có thể giúp em có thể tránh được những sai lầm sau này

Em xin chân thành cảm ơn!

Em xin cam đoan: - Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn

của thầy Nguyễn Tấn Thuận - Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên

công trình, thời gian, địa điểm công bố - Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em

xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT vi

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH vii

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng và phạm vi nghiên cứu 1

a Đối tượng nghiên cứu 1

b Pham vi nghiên cứu 1

3 Phương pháp nghiên cứu 1

2.2.3 Yêu cầu phi chức năng 11

2.3 Biểu đồ Use Case 11

2.3.1 Use Case tổng quát 11

2.3.7 Quản lý nhân viên 14

2.3.8 Quản lý thời gian 15

2.4.2 Kịch bản Use-case “Quản lý tài khoản” 17

2.4.3 Kịch bản Use-case “Xem danh sách và tìm kiếm dịch vụ” 18

2.6.8 Thêm mới thời gian 35

2.7 Thiết kế bảng cơ sở dữ liệu 36

3.1 Công cụ xây dựng 45

3.2 Giao diện chương trình 45

3.2.1 Giao diện trang chủ 45

3.2.2 Giao diện chọn dịch vụ 46

3.2.3 Giao diện chọn dịch vụ cho khách 46

3.2.4 Giao diện xác nhận Quản lý dịch vụ 47

3.2.5 Giao diện Tạo mới ngày phục vụ 47

3.2.6 Giao diện quản lý Hóa đơn 48

3.2.7 Giao diện Quản lý Đặt dịch vụ 48

3.2.8 Giao diện In hóa đơn 49

3.2.9 Giao diện quản lý khách hàng 49

3.2.10 Giao diện quản lý thời gian 50

3.2.11 Giao diện thống kê 50

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 51

TÀI LIỆU THAM KHẢO 52

DANH MỤC BẢNG BIỂU

iv

Bảng 2.4.1 Kịch bản Use-case “Đăng nhập” 17

Bảng 2.4.2 Kịch bản Use-case “Quản lý tài khoản” 18

Bảng 2.4.3 Kịch bản Use-case “Xem danh sách và tìm kiếm dịch vụ” 18

Hình 1.2.1 Mô hình Express Framework với Node.js Server 6

Hình 2.3.1 Use Case tổng quát 11

Hình 2.3.2 Use case đăng nhập 12

Hình 2.3.3 Use case quản lý tài khoản 12

Hình 2.3.4 Use case xem danh sách và tìm dịch vụ 13

Hình 2.3.5 Use case đặt dịch vụ 13

Hình 2.3.6 Use case quản lý đặt dịch vụ 14

Hình 2.3.7 Use case quản lý nhân viên 14

Hình 2.3.8 Use case quản lý thời gian 15

Hình 2.3.9 Use case quản lý khách hành 15

Hình 2.3.10 Use case quản dịch vụ 16

Hình 2.3.11 Use case thống kê 16

Hình 2.5.1 Activity “Đăng nhập” 22

Hình 2.5.2 Activity “Quản lý tài khoản” 23

Hình 2.5.3 Activity “Xem và tìm kiếm dịch vụ” 24

Hình 3.2.3 Giao diện “Chọn dịch vụ cho khách” 46

Hình 3.2.4 Giao diện “Quản lý dịch vụ” 47

Hình 3.2.5 Giao diện “Tạo mới ngày phục vụ” 47

Hình 3.2.6 Giao diện “Quản lý Hóa đơn” 48

Hình 3.2.7 Giao diện “Quản lý Đặt dịch vụ” 48

Hình 3.2.8 Giao diện “In hóa đơn” 49

Hình 3.2.9 Giao diện “Quản lý khách hàng” 49

Hình 3.2.10 Giao diện “Quản lý thời gian” 50

Hình 3.2.11 Giao diện “Thống kê” 50

Stt Chữ viết tắt Giải nghĩa

1 CNTT Công nghệ thông tin 2 SVTH Sinh viên thực hiện

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

vii

1 HTML Hyper Text Markup

Language

Ngôn ngữ đánh dấu siêu văn bản

2 ERD Entity Relationship

Diagram Sơ đồ thực thể quan hệ 3 OOP Object Oriented

Progamming Lập trình hướng đối tượng 4 MVC Model – View - Controller

5 API Application Programming

Interface Giao diện lập trình ứng dụng

MỞ ĐẦU 1 Mục tiêu đề tài

Xây dựng website quản lý dịch vụ chăm sóc, làm đẹp cho thú cưng Với các chức năng cụ thể:

• Đối khách hàng: gồm các chức năng cơ bản - Xem danh sách dịch vụ, xem chi tiết về dịch vụ - Tìm kiếm dịch vụ

- Đăng ký đặt dịch vụ • Đối với nhân viên: bao gồm các chức năng quản lý

- Xem danh sách khách hàng - Tìm kiếm khách hàng - Quản lý dịch vụ, tìm kiếm dịch vụ - Quản lý đặt dịch vụ

- Đặt dịch vụ cho khách hàng • Đối với admin: giống với nhân viên và có thêm một số chức năng

- Xem thống kê (theo dịch vụ, theo khách hàng, theo doanh thu,…) - Quản lý nhân viên

- Quản lý khách hàng - Quản lý ngày giờ

2 Đối tượng và phạm vi nghiên cứu

a Đối tượng nghiên cứu

Phân tích thiết kế chức năng đặt, quản lý dịch vụ thú cưng

b Pham vi nghiên cứu

Đề tài được áp dụng cho doanh nghiệp kinh doanh dịch vụ chăm sóc thú cưng

3 Phương pháp nghiên cứu

• Phương pháp nghiên cứu lý thuyết thu thập thông tin qua internet, tài liệu, sách để tìm được các cơ sở lý thuyết liên quan vấn đề mình nghiên cứu • Phương pháp triển khai thực nghiệm: xây dựng website

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

5 Cấu trúc đồ án

Cấu trúc đồ án tốt nghiệp gồm các phần như sau:

- Mở đầu: Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và mục đích khi xây dựng và phát triển đề tài Xác định rõ phạm vi và đối tượng hướng đến, giải pháp công nghệ để triển khai, xây dựng đề tài, đồng thời phân tích đặc tả yêu cầu nghiệp vụ

- Chương I: Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình Javascript, ExpressJS, ReactJS và hệ quản trị cơ sở dữ liệu MongoDB

- Chương II: Phân tích các tác nhân và chức năng của từng tác nhân, yêu cầu phi chức năng của hệ thống Thiết kế sơ đồ use-case, sơ đồ hoạt động, sơ đồ ERD Thiết kế cơ sở dữ liệu Xây dựng kịch bản cho từng use-case trong hệ thống

- Chương III: Xây dựng giao diện và chức năng của hệ thống - Kết luận: Kết luận chung cho các chương trong đồ án Trình bày những vấn đề đã giải quyết đồng thời trình bày hướng phát triển

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Ngôn ngữ lập trình JavaScript

1.1.1 JavaScript là gì?

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript.

1.1.2 Lịch sử phát triển

Trong lĩnh lực phát triển web, JavaScript là ngôn ngữ lập trình phổ biến và được sử dụng rộng rãi Đây là ngôn ngữ được Brendan Eich phát triển vào năm 1995 Ban đầu, JavaScript được thiết kế để tương tác với các trang web động và cung cấp các chức năng tương tác động cho người dùng

Trong suốt 28 năm, JavaScript đã trải qua rất nhiều thay đổi Sau khi Netscape tuyên bố rằng JavaScript sẽ được chuẩn hóa, ECMA International (European Computer Manufacturers Association) đã tiếp nhận JavaScript và đổi tên thành ECMAScript ECMAScript đã trở thành một tiêu chuẩn quốc tế và là nền tảng cho các ngôn ngữ lập trình khác như TypeScript và CoffeeScript

Năm 2000, JavaScript được cải tiến để có thể xử lý các ứng dụng web động và phức tạp hơn Nhiều thư viện và framework JavaScript như jQuery, AngularJS, ReactJS và VueJS ra đời và hỗ trợ cho việc phát triển ứng dụng web ngày càng dễ dàng hơn

Năm 2009, Node.js ra đời cho phép JavaScript chạy trên máy chủ và thực hiện các tác vụ phức tạp như xử lý dữ liệu và tạo các ứng dụng web đa nền tảng

Lịch sử phiên bản javaScript: − ES1 ECMAScript 1 (1997) − ES2 ECMAScript 2 (1998) − ES3 ECMAScript 3 (1999) − ES4 ECMAScript 4

− ES5 ECMAScript 5 (2009) − ES6 ECMAScript 2015

o ECMAScript 2016

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

o ECMAScript 2017 o ECMAScript 2018 o ECMAScript 2019 o ECMAScript 2020

1.2 ExpressJs Framework

1.2.1 Đôi nét về lịch sử

Express.js, thường được gọi là Express, là một framework web phổ biến cho Node.js Được phát triển bởi TJ Holowaychuk và sau đó được duy trì bởi cộng đồng, Express đã trở thành một trong những công cụ quan trọng nhất để xây dựng ứng dụng web với Node.js Dưới đây là một số điểm quan trọng về lịch sử của Express.js:

Ngày ra mắt ban đầu (2010): Express.js được giới thiệu lần đầu tiên vào năm 2010 TJ Holowaychuk, một nhà phát triển nổi tiếng trong cộng đồng Node.js, là người sáng tạo ra Express với mục đích giúp đơn giản hóa việc phát triển ứng dụng web với Node.js

Phiên bản đầu tiên (0.14.0): Phiên bản đầu tiên của Express có số phiên bản là 0.14.0 Tuy nhiên, như nhiều dự án mã nguồn mở khác, Express đã trải qua nhiều sự thay đổi và cải tiến từ cộng đồng phát triển

Express 3.x và 4.x: Express 3.x đã đưa ra một số thay đổi đáng kể trong cách ứng dụng được cấu trúc và quản lý Express 4.x tiếp tục phát triển và cung cấp nhiều tính năng mới cùng với việc cải thiện hiệu suất và ổn định

Middleware và Routing: Một trong những điểm mạnh của Express là hỗ trợ middleware và routing Middleware giúp xử lý các yêu cầu HTTP và thực hiện các tác vụ trung gian như xác thực, ghi log, nén dữ liệu, và nhiều tính năng khác Routing cho phép xác định cách các yêu cầu HTTP nên được xử lý bởi ứng dụng

Sự phổ biến và sự ổn định: Do tính linh hoạt và đơn giản, Express đã trở thành một lựa chọn phổ biến cho việc phát triển ứng dụng web Node.js Sự ổn định và sự hỗ trợ mạnh mẽ từ cộng đồng đã giúp Express duy trì vị thế của mình trong thời gian dài

Phiên bản hiện tại và tương lai: Express vẫn đang tiếp tục phát triển Có thể có các phiên bản mới và cải tiến trong tương lai để đáp ứng yêu cầu ngày càng phức tạp của ứng dụng web hiện đại

1.2.2 Tổng quan về ExpressJs

Express.js là một framework web cho Node.js được sử dụng để xây dựng ứng dụng web và API Dưới đây là một tổng quan về Express:

− Mục Đích và Tính Linh Hoạt:

o Express được thiết kế để giúp đơn giản hóa quá trình xây dựng ứng dụng web và API sử dụng Node.js

o Tính linh hoạt của Express cho phép người phát triển tự do chọn lựa các thành phần và thư viện khác nhau để tích hợp vào ứng dụng của họ

− Middleware:

o Express sử dụng hệ thống middleware mạnh mẽ Middleware là các hàm có thể xử lý các yêu cầu HTTP trước khi đến đích cuối cùng o Middleware giúp thực hiện các chức năng như xác thực, log, nén dữ

liệu, và nhiều tác vụ khác − Routing:

o Express cung cấp một hệ thống routing linh hoạt cho việc xác định cách các yêu cầu HTTP nên được xử lý

o Các tuyến đường (routes) được định nghĩa để ánh xạ URL đến các xử lý cụ thể

− Template Engines:

o Mặc dù Express không buộc bạn sử dụng bất kỳ template engine nào cụ thể, nhưng nó hỗ trợ nhiều template engine phổ biến như EJS, Pug (trước đây là Jade), Handlebars, và nhiều cái khác

− Phát triển Ứng dụng Web và API:

o Express thích hợp cho cả việc xây dựng ứng dụng web truyền thống và API dựa trên RESTful hoặc GraphQL

o Nó cung cấp các công cụ hữu ích cho việc xử lý yêu cầu HTTP, phản hồi (response), và quản lý trạng thái ứng dụng

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

Hình 1.2.1 Mô hình Express Framework với Node.js Server

1.3 Tổng quan về hệ quản trị cơ sở dữ liệu MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu (DBMS) phi quan hệ và hướng tài liệu (document-oriented) được phát triển bởi MongoDB Inc Đây là một hệ quản trị cơ sở dữ liệu NoSQL, có nghĩa là nó không tuân theo mô hình quan hệ truyền thống, mà thay vào đó sử dụng mô hình dữ liệu tài liệu linh hoạt

Dưới đây là một số đặc điểm quan trọng và tổng quan về MongoDB: − Hướng Tài Liệu: MongoDB lưu trữ dữ liệu dưới dạng JSON-like (BSON)

documents Mỗi document là một bản ghi độc lập chứa các cặp khóa-giá trị − Các Bản Ghi Độc Lập: Dữ liệu được lưu trữ trong các bản ghi độc lập, không

yêu cầu cấu trúc đồng nhất cho tất cả các documents trong một collection − Collections và Documents: Trong MongoDB, các bản ghi được tổ chức

thành collections Mỗi collection là một nhóm các documents liên quan đến một loại dữ liệu cụ thể

− Khóa Chính và Tìm Kiếm: Mỗi document trong MongoDB có một khóa chính (primary key) duy nhất để xác định định danh của nó MongoDB hỗ trợ tìm kiếm nhanh chóng dựa trên các trường trong document và sử dụng các index để tăng tốc quá trình tìm kiếm

− Query Nguyên Mẫu: Để truy vấn dữ liệu, MongoDB sử dụng một ngôn ngữ truy vấn linh hoạt, gọi là Query Nguyên Mẫu (Query by Example)

− Replication và Sharding: MongoDB hỗ trợ tính năng sao chép dữ liệu (replication) để tăng khả năng sẵn sàng và độ tin cậy Sharding cho phép chia nhỏ dữ liệu và phân phối nó trên nhiều máy chủ để đảm bảo hiệu suất và mở rộng

− JSON-like Documents và BSON MongoDB sử dụng định dạng BSON (Binary JSON) để lưu trữ dữ liệu, giúp tăng tốc quá trình đọc/ghi và giảm dung lượng lưu trữ so với JSON

− Cộng Đồng Lớn và Hỗ Trợ: MongoDB có một cộng đồng lớn, năng động và tích cực đóng góp vào việc phát triển và hỗ trợ Có cả các công cụ quản lý như MongoDB Compass giúp quản lý và tương tác với cơ sở dữ liệu MongoDB

1.4 Restful API

RESTful API (Representational State Transferful Application Programming Interface) là một kiến trúc thiết kế cho việc xây dựng và triển khai các dịch vụ web Nó được thiết kế để tận dụng các nguyên tắc cơ bản của giao thức HTTP và được xem là một cách tiếp cận linh hoạt và đơn giản để xây dựng các dịch vụ web tương tác

Dưới đây là một số điểm chính về RESTful API: − Kiến Trúc Dựa Trên Tài Nguyên: RESTful API tập trung vào việc làm việc

với tài nguyên (resources) Mỗi tài nguyên được định danh duy nhất bằng một URI (Uniform Resource Identifier)

− Phương Thức HTTP: RESTful API sử dụng các phương thức HTTP để thực hiện các hoạt động trên tài nguyên Các phương thức chính bao gồm GET (lấy dữ liệu), POST (tạo mới), PUT (cập nhật), DELETE (xóa)

− Biểu Diễn Dữ Liệu: Dữ liệu được truyền tải giữa máy khách và máy chủ thông qua các định dạng biểu diễn như JSON hoặc XML JSON thường được ưa chuộng do đơn giản và dễ đọc

− Stateless (Không Lưu Trạng Thái): RESTful là kiến trúc stateless, nghĩa là mỗi yêu cầu từ máy khách đều chứa đủ thông tin cần thiết để hiểu và xử lý yêu cầu, không cần dựa vào bất kỳ trạng thái trước đó nào

− Quản lý Tài Nguyên Được Tách Biệt: Mỗi tài nguyên được quản lý và truy cập thông qua các URI độc lập, và các tài nguyên không nên chứa thông tin về cách chúng được triển khai

− Hạn Chế Tính Trạng Thái (Statelessness): Tính trạng thái được giữ ở máy khách, giảm bớt gánh nặng cho máy chủ và giúp tăng cường khả năng mở rộng

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

− Tiêu Chuẩn Hóa Giao Tiếp: RESTful API thường sử dụng các tiêu chuẩn như URI, phương thức HTTP, và các định dạng biểu diễn để đơn giản hóa giao tiếp giữa các hệ thống

− Ứng Dụng Rộng Rãi: RESTful API được sử dụng rộng rãi trong phát triển web và di động Nó cung cấp một cách tiếp cận đơn giản và hiệu quả cho việc tích hợp giữa các hệ thống khác nhau

1.5 Bootstrap và responsive

Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web Bootstrap bao gồm HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các button và các thành phần giao diện khác, cũng như mở rộng tùy chọn JavaScript Boostrap định nghĩa sẵn các class CSS giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng cho chúng ta áp dùng vào website của mình mà không phải tốn quá nhiều thời gian để tự viết Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Bootstrap cung cấp tính năng responsive và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tương thích với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tính xách tay, máy tính để bàn,

Một khía cạnh khác là responsive web design làm cho trang web cung cấp được trải nghiệm tuyệt vời cho người dùng trên nhiều thiết bị, kích thước màn hình khác nhau Một trang có thể hoạt động tốt bất kể sự biến đổi sẽ cung cấp một trải nghiệm người dùng tốt và nhất quán hơn một trang được thiết kế cho một loại thiết bị và kích thước màn hình cụ thể

1.6 ReactJS Framework

ReactJS, thường được gọi là React, là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook React được thiết kế để xây dựng giao diện người dùng (UI) hiệu quả và linh hoạt cho các ứng dụng web đơn trang (Single Page Applications - SPAs) Dưới đây là một sơ lược về ReactJS:

− Thư Viện JavaScript cho Giao Diện Người Dùng (UI): React tập trung vào việc xây dựng giao diện người dùng và quản lý trạng thái của UI Nó không phải là một framework hoàn chỉnh mà chỉ là một thư viện

− Component-Based Architecture: React sử dụng kiến trúc dựa trên thành phần (component-based architecture), nơi UI được chia thành các thành phần độc lập và có thể tái sử dụng Mỗi thành phần quản lý trạng thái và có thể nhúng vào trong các thành phần khác

− Virtual DOM (Document Object Model): React sử dụng mô hình Virtual DOM để tối ưu hóa hiệu suất Thay vì cập nhật DOM trực tiếp, React tạo ra một bản sao ảo của DOM và chỉ cập nhật những phần cần thiết khi trạng thái thay đổi, giảm thiểu số lượng thao tác trên DOM thực tế

− JSX (JavaScript XML): JSX là một cú pháp mở rộng của JavaScript, cho phép bạn viết mã HTML bên trong mã JavaScript JSX giúp tạo ra các cây phân cấp (component tree) trong React một cách dễ đọc và dễ hiểu

− Unidirectional Data Flow: React áp dụng nguyên tắc dòng dữ liệu một chiều (unidirectional data flow) Dữ liệu chuyển đi từ thành phần cha đến thành phần con thông qua prop, và bất kỳ sự thay đổi trong trạng thái sẽ kích hoạt việc render lại giao diện

− React Hooks: Hooks là một tính năng được giới thiệu trong phiên bản React 16.8, giúp bạn sử dụng trạng thái và các tính năng React mà không cần sử dụng lớp thành phần (class components)

− React Router: React Router là một thư viện riêng biệt giúp quản lý điều hướng trong ứng dụng React, cho phép bạn tạo ra các đường dẫn và chuyển đổi giữa các trang mà không cần tải lại trang

− Ecosystem và Cộng Đồng Mạnh Mẽ: React có một cộng đồng lớn và tích cực, điều này đã tạo ra nhiều thư viện và công cụ hỗ trợ, cũng như nhiều nguồn tài nguyên và ví dụ mã nguồn mở

React đã trở thành một trong những thư viện JavaScript phổ biến nhất cho phát triển giao diện người dùng và được sử dụng rộng rãi trong ngành công nghiệp phần mềm

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Khảo sát hệ thống

2.1.1 Khảo sát thực tế

Hiện nay, nhu cầu nuôi thú cưng tại gia ngày càng tăng cao, nhưng công việc bận rộn nên thời gian dành cho các bé ít đi, việc chăm sóc các bé trở nên khó khăn, vì vậy để phục vụ cho nhu cầu chăm sóc tốt cho các bé, các dịch vụ chăm sóc thú cưng để trở nên dễ dàng tiếp cận hơn thì việc thành lập một website quản lý dịch vụ chăm sóc thú cưng là hết sức cần thiết

2.1.2 Khảo sát người dùng

Nhu nuôi thú cưng của các hộ gia đình ngày càng cao, nhưng công việc lại bận rộn nên các dịch vụ chăm sóc thú cưng là rất cần thiết cho cả chủ lẫn thú cưng khi bận rộn

2.2 Đặc tả yêu cầu phần mềm

2.2.1 Xác định các tác nhân

❖ Đề tài gồm ba tác nhân chính − Khách hàng (Customer) − Nhân viên (Employee) − Người quản lý (Admin)

2.2.2 Các yêu cầu chức năng

❖ Customer − Xem danh sách dịch vụ, xem chi tiết thông tin về dịch vụ − Tìm kiếm dịch vụ

− Xem giá dịch vụ, lịch đăng ký − Đặt dịch vụ online

− Xem thông tin về shop ❖ Employee

− Xem danh sách khách hàng liên quan − Tìm kiếm khách hàn liên quan

− Quản lý đặt dịch vụ − Đặt dịch vụ cho khách hàng − Quản lý hồ sơ cá nhân − Đăng nhập, đăng xuất, đổi mật khẩu

❖ Admin (gồm các chức năng của employee) − Thống kê

− Quản lý khách hàng

− Quản lý nhân viên − Quản lý dịch vụ − Quản lý thời gian

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

− Giao diện, đẹp mắt, đơn giản, dễ sử dụng − Đảm bảo tính bảo mật, an toàn

− Tốc độ xử lý nhanh chóng − Chức năng xử lý dữ liệu dễ hiểu, dễ tiếp cận

2.3 Biểu đồ Use Case

2.3.1 Use Case tổng quát

Hình 2.3.1 Use Case tổng quát

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

2.3.2 Đăng nhập

Hình 2.3.2 Use case đăng nhập

2.3.3 Quản lý tài khoản

Hình 2.3.3 Use case quản lý tài khoản

2.3.4 Xem danh sách dịch vụ

Hình 2.3.4 Use case xem danh sách và tìm dịch vụ

2.3.5 Đặt dịch vụ

Hình 2.3.5 Use case đặt dịch vụ

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

2.3.6 Quản lý đặt dịch vụ

Hình 2.3.6 Use case quản lý đặt dịch vụ

2.3.7 Quản lý nhân viên

Hình 2.3.7 Use case quản lý nhân viên

2.3.8 Quản lý thời gian

Hình 2.3.8 Use case quản lý thời gian

2.3.9 Quản lý khách hàng

Hình 2.3.9 Use case quản lý khách hành

Xây dựng website quản lý dịch vụ, làm đẹp cho thú cưng

2.4 Kịch bản cho Use Case

2.4.1 Kịch bản Use-case “Đăng nhập”

Description Người dùng đã có tài khoản muốn đăng nhập vào hệ

thống

Thông tin tài khoản

2 Actor nhập thông tin tài khoản (email, mật khẩu) 3 Actor nhấn nút đăng nhập

4 Hệ thống kiểm tra và trả về trang Trang chủ (đã đăng nhập) ➔ Kết thúc use case

Alternative flow Exception flow 2.1 Actor thoát khỏi hệ thống ➔ Use case kết thúc mà

chưa được đăng nhập 3.1 Nhập sai tài khoản hoặc mật khẩu ➔ Thông báo không tìm thấy tài khoản hoặc sai mật khẩu ➔Quay lại bước 2

Bảng 2.4.1 Kịch bản Use-case “Đăng nhập”

2.4.2 Kịch bản Use-case “Quản lý tài khoản”

Use case name Quản lý tài khoản Description Dùng để quản lý hồ sơ cá nhân của người dùng

Basic flow 1 Actor nhấn vào “Cài đặt” ở thanh Sidebar của hệ

thống sau đó nhấn “Thông tin cá nhân” ➔ Use case bắt đầu

2 Thực hiện các thao tác cần thiết (Chỉnh sửa hồ sơ cá nhân hoặc Đổi mật khẩu)

3 Actor nhấn nút “Lưu” 4 Hệ thống lưu lại thông tin của người dùng sau khi thay đổi ➔ Kết thúc Use case

Alternative flow Exception flow 2.1 Nếu Actor cập nhật thông tin không đúng định dạng

➔ Thông báo thông tin cập nhật không hợp lệ 2.3 Nếu người dùng nhập mật khẩu cũ không khớp ➔