1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Xây dựng website đặt phòng khách sạn

107 23 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Website Đặt Phòng Khách Sạn
Tác giả Nguyễn Thành Nhất, Nguyễn Thanh Phước
Người hướng dẫn ThS. Nguyễn Minh Đạo
Trường học Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại Đồ Án Tốt Nghiệp
Năm xuất bản 2023
Thành phố Tp. Hồ Chí Minh
Định dạng
Số trang 107
Dung lượng 7,49 MB

Cấu trúc

  • Chương 1: Giới thiệu về đề tài (17)
    • 1.1. Tổng quan về đề tài (17)
    • 1.2. Lý do chọn đề tài (17)
    • 1.3. Mục tiêu của đề tài (17)
  • Chương 2: Khảo sát hiện trạng (18)
    • 2.1. Phân tích đánh giá các công trình (18)
      • 2.1.1. Booking.com (18)
      • 2.1.2 Traveloka (19)
      • 2.1.3. Agoda (20)
    • 2.1. Kinh nghiệm rút ra (20)
  • Chương 3: Phân tích thiết kế hệ thống (21)
    • 3.1. Yêu cầu chức năng hệ thống (21)
      • 3.1.1. Yêu cầu nghiệp vụ (21)
      • 3.1.2. Yêu cầu phi chức năng (23)
      • 3.1.3. Danh sách các tác nhân và chức năng của hệ thống (24)
    • 3.2. Các Use Case chính của hệ thống (25)
      • 3.2.1 Use case tổng quát (25)
      • 3.2.2. Đặc tả usecase (26)
    • 3.3. Các Sequence Diagram chính của hệ thống (60)
      • 3.3.1. Sơ đồ tuần tự quá trình đăng nhập (60)
      • 3.3.2. Sơ đồ tuần tự quá trình tìm kiếm phòng khách sạn (60)
      • 3.3.3. Sơ đồ tuần tự quá trình đặt phòng (61)
      • 3.3.4. Sơ đồ tuần tự quá trình thêm khách sạn (61)
      • 3.3.5. Sơ đồ tuần tự quá trình sửa khách sạn (62)
      • 3.3.6. Sơ đồ tuần tự quá trình xóa khách sạn (0)
      • 3.3.7. Sơ đồ tuần tự quá trình thêm phòng (63)
      • 3.3.8. Sơ đồ tuần tự quá trình sửa phòng (63)
      • 3.3.9. Sơ đồ tuần tự quá trình xóa phòng (64)
      • 3.3.10. Sơ đồ tuần tự quá trình xóa bình luận (0)
      • 3.3.11. Sơ đồ tuần tự quá trình đánh giá khách sạn (65)
      • 3.3.12. Sơ đồ tuần tự quá trình thay đổi thông tin cá nhân (65)
      • 3.3.13. Sơ đồ tuần tự quá trình xác nhận đặt phòng (66)
      • 3.3.14. Sơ đồ tuần tự quá trình thêm ảnh (66)
      • 3.3.15. Sơ đồ tuần tự quá trình xóa ảnh (67)
      • 3.3.16. Sơ đồ tuần tự quá trình thêm khách hàng (67)
      • 3.3.17. Sơ đồ tuần tự quá trình sửa khách hàng (68)
      • 3.3.18. Sơ đồ tuần tự quá trình xóa khách hàng (68)
      • 3.3.19. Sơ đồ tuần tự quá trình thêm chủ khách sạn (69)
      • 3.3.20. Sơ đồ tuần tự quá trình sửa chủ khách sạn (69)
      • 3.3.21. Sơ đồ tuần tự quá trình xóa chủ khách sạn (70)
      • 3.3.22. Sơ đồ tuần tự quá trình thêm quản trị viên (70)
      • 3.3.23. Sơ đồ tuần tự quá trình sửa quản trị viên (71)
      • 3.3.24. Sơ đồ tuần tự quá trình xóa quản trị viên (71)
  • Chương 4: Kiến trúc hệ thống (72)
    • 4.1. Công nghệ sử dụng (72)
      • 4.1.1. Front-end (72)
      • 4.1.2. Back-end (72)
      • 4.1.3. Database (72)
    • 4.2. Database Diagram (73)
  • Chương 5: Tổng kết (74)
    • 5.1. Giao diện hệ thống (74)
      • 5.1.1. Trang chủ (74)
      • 5.1.2. Trang tìm kiếm (76)
      • 5.1.3. Trang chi tiết khách sạn (79)
      • 5.1.4. Trang đăng ký (82)
      • 5.1.5. Trang đăng nhập (83)
      • 5.1.6. Trang quản lý tài khoản (84)
      • 5.1.7. Trang đổi mật khẩu (85)
      • 5.1.8. Trang lịch sử của tôi (86)
      • 5.1.9. Trang yêu thích (88)
      • 5.1.10. Trang quản trị viên (89)
      • 5.1.11. Trang cập nhật tài khoản (90)
      • 5.1.12. Trang thêm tài khoản (92)
      • 5.1.13. Trang quản lý khách sạn (93)
      • 5.1.14. Trang thêm khách sạn (95)
      • 5.1.15. Trang thêm quản lý phòng (97)
      • 5.1.16. Trang thêm phòng (99)
      • 5.1.17. Trang quản lý đặt phòng (102)
    • 5.2. Kết quả đạt được (104)
      • 5.2.1. Ưu điểm (104)
      • 5.2.1. Nhược điểm (104)
    • 5.3. Hướng phát triển (105)
    • 5.4. Tài liệu tham khảo (106)

Nội dung

Giới thiệu về đề tài

Tổng quan về đề tài

Chúng tôi xây dựng website đặt phòng khách sạn nhằm hỗ trợ người dùng dễ dàng tìm kiếm và tham khảo nhiều khách sạn tại các tỉnh thành Việt Nam cho chuyến du lịch của mình Trang web này không chỉ giúp du khách tìm được nơi ở phù hợp với mức giá và nhu cầu cá nhân, mà còn tạo điều kiện cho các đối tác đăng tải thông tin về khách sạn của họ, giới thiệu đến khách du lịch một cách hiệu quả.

Lý do chọn đề tài

Trong những năm gần đây, du lịch đã trở thành một hoạt động phổ biến, đặc biệt vào các dịp lễ, khiến nhu cầu tìm kiếm khách sạn tại các khu du lịch tăng cao Nhiều người gặp khó khăn trong việc xác định tình trạng phòng trống, dẫn đến việc đặt khách sạn trước trở thành xu hướng phổ biến để đảm bảo có chỗ ở khi đi du lịch.

Việc đặt phòng trước giúp du khách dễ dàng sắp xếp lịch trình và chọn lựa nơi ở phù hợp với nhu cầu về giá cả và chất lượng phục vụ Điều này giúp tránh những rắc rối trong việc lựa chọn khách sạn, đảm bảo chuyến đi diễn ra suôn sẻ và trọn vẹn.

Trong thời đại 4.0, việc tìm kiếm khách sạn qua website trở nên cần thiết hơn bao giờ hết Vì lý do này, nhóm chúng em đã quyết định chọn đề tài "Xây dựng website đặt phòng khách sạn" cho khóa luận tốt nghiệp của mình.

Mục tiêu của đề tài

Tạo website giúp người dùng dễ dàng tìm kiếm và đặt phòng khách sạn phù hợp với nhu cầu cá nhân Đồng thời, nền tảng cũng cho phép các đối tác đăng tải thông tin khách sạn, từ đó quảng bá thương hiệu và thu hút nhiều khách hàng hơn.

Khảo sát hiện trạng

Phân tích đánh giá các công trình

Hiện nay, có rất nhiều website giúp chúng ta đặt phòng khách sạn một cách nhân chóng và dễ dàng như booking.com, …

Hình 2.1: Trang web booking.com

Chức năng cần chú ý: Tìm kiếm khách sạn, đặt phòng, hiện các thông tin liên quan đến khách sạn

Giao diện thiết kế thân thiện và dễ sử dụng, phù hợp với mọi đối tượng người dùng Mỗi khách sạn đều cung cấp hình ảnh chi tiết của từng phòng, giúp người dùng có cái nhìn rõ ràng trước khi đặt phòng.

Tìm kiếm khách sạn dễ dàng với các khách sạn được phân loại theo tỉnh, cho phép người dùng lựa chọn dựa trên số sao, điểm đánh giá và các dịch vụ đi kèm Để đặt phòng, người dùng cần đăng nhập vào hệ thống, chọn phòng mong muốn và cung cấp thông tin cơ bản, sau đó hệ thống sẽ xác nhận yêu cầu đặt phòng.

Chức năng cần chú ý: Tìm kiếm khách sạn, đặt phòng, hiện các thông tin liên quan đến khách sạn

Giao diện thiết kế dễ nhìn với phông màu sáng, có thanh header để mọi người dễ dàng tìm kiếm thông tin khách sạn

Tìm kiếm khách sạn theo tỉnh, chọn ngày bắt đầu và kết thúc, cùng với số lượng người Đặt phòng bằng cách lựa chọn loại phòng, nhập thông tin cơ bản và thực hiện thanh toán.

Chức năng cần chú ý: Tìm kiếm khách sạn, đặt phòng, hiện các thông tin liên quan đến khách sạn, cho thuê nhà

Giao diện thiết kế dễ nhìn với phông màu sáng, có thanh header dễ mọi người dễ dàng tìm kiếm thông tin khách sạn

Tìm kiếm khách sạn dễ dàng theo tỉnh, với tùy chọn chọn ngày bắt đầu, ngày kết thúc và số lượng người Sau khi tìm được khách sạn phù hợp, người dùng chỉ cần chọn phòng và nhập thông tin cần thiết để hoàn tất việc đặt phòng.

Kinh nghiệm rút ra

Nhóm chúng tôi đã khảo sát nhiều website và xác định các chức năng chính cho trang web của mình, bao gồm khả năng đặt phòng khách sạn trực tuyến Người dùng có thể dễ dàng xem và lựa chọn các khách sạn phù hợp, trong khi các chủ khách sạn có thể đăng tải thông tin về cơ sở của họ để quảng bá rộng rãi đến khách hàng.

Phân tích thiết kế hệ thống

Yêu cầu chức năng hệ thống

Bảng 3.1: Yêu cầu nghiệp vụ

STT Yêu cầu nghiệp vụ

Quy định/ công thức liên quan

Biểu mẫu liên quan Mô tả

Chỉnh sửa thông tin cá nhân

Thay đổi các mục như tên, số điện thoại, họ và tên, …

Chỉnh sửa thông tin tài khoản

Thay đổi mật khẩu của người sử dụng

3 Đăng ký tài khoản mới Lưu trữ

Người dùng có thể cần nhập email, mật khẩu, số điện thoại

4 Đăng nhập vào hệ thống Đọc dữ liệu

Người dùng nhập email và mật khẩu

5 Xem thông tin khách sạn Đọc dữ liệu

Người dùng ấn chọn vào khách sạn

6 Sử dụng bộ lọc thông tin Đọc dữ liệu

Người dùng có thể chọn các thuộc tính để lọc như giá tiện, số người, số sao, …

7 Quản lý khách sạn Lưu trữ

Chủ khách sạn có thể chỉnh sửa thông tin, thêm ảnh cho khách sạn,

8 Quản lý phòng Lưu trữ

Chủ khách sạn có thể quản lý thông tin của từng phòng trong khách sạn của mình như thêm, xóa, sửa

9 Quản lý tài khoản Lưu trữ

Quản trị viên có thể quản lý tài khoản như thêm, xóa, sửa tài khoản

10 Bình luận về khách sạn Lưu trữ

Người dùng có thể bình luận về khách sạn đã đặt

11 Xem lịch sử đặt phòng Tra cứu

Người dùng có thể xem lịch sử đặt phòng của mình

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

Bảng 3.2: Yêu cầu chức năng

STT Nội dung Tiêu chuẩn Mô tả chi tiết

Tốc độ xử lý quá trình tương tác của người dùng

Hiệu quả Một lần có thể cho trực tuyến nhiều người dùng

2 Tốc độ tìm kiếm nhanh và chính xác Hiệu quả Tối đa 3s phải có kết quả tìm kiếm

Tiết kiệm được thời gian, tối ưu được cơ sở dữ liệu, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

Tiết kiệm thời gian so với quản lý thủ công Dữ liệu được sao lưu trên máy, có thể dễ dàng phục hồi

Có thể thiết kế thêm theo yêu cầu của doanh nghiệp

Các đối tác có thể yêu cầu thêm tính năng hữu ích cho chương trình

5 Giao diện thân thiện, đơn giản Tiện dụng Khách hàng ở mọi lứa tuổi đều có thể dễ dàng sử dụng

6 Dễ thao tác Tiện dụng Các thao tác nhập xuất chỉnh sửa đơn giản, gần gũi với người dùng

3.1.3 Danh sách các tác nhân và chức năng của hệ thống

Bảng 3.3: Danh sách các tác nhân và chức năng của hệ thống

2 Xem chi tiết khách sạn

3 Lọc khách sạn theo tiêu chí

1 Xem chi tiết khách sạn

2 Lọc khách sạn theo tiêu chí

5 Xem lịch sử đặt khách sạn

7 Chỉnh sửa thông tin cá nhân

8 Viết đánh giá cho khách sạn

2 Thêm, xem, xóa, sửa thông tin khách sạn

3 Thêm, xóa, sửa thông tin phòng của khách sạn

4 Xóa đánh giá tiêu cực khách sạn

5 Xác nhận yêu cầu đặt phòng của khách

Admin (Quản trị viên) 1 Đăng nhập tài khoản

2 Thêm, xóa, sửa các tài khoản khách hàng

3 Thêm, xóa, sửa các tài khoản chủ khách sạn

4 Thêm, xóa, sửa các tài khoản quản trị viên

Các Use Case chính của hệ thống

Hình 3.1: Use case tổng quát

Usecase “Đăng ký tài khoản”

Bảng 3.4: Usecase đăng ký tài khoản

Mã Use Case - ID UC – 1.1

Name Đăng ký tài khoản

Người dùng thực hiện đăng ký để tạo tài khoản mới trên hệ thống

Người dùng muốn tạo tài khoản cá nhân trên hệ thống

- Thành công: Người dùng tạo được tài khoản mới trên hệ thống

- Thất bại: Hệ thống thông báo lỗi, tài khoản của người dùng không được tạo trên hệ thống

1 Người dùng nhập ấn vào nút Đăng ký trên trang header

2 Hệ thống chuyển hướng sang trang đăng ký

3 Người dùng nhập thông tin và ấn nút Đăng ký

4 Hệ thống gửi mail xác thực thông tin đăng kí thành công và cho phép người dùng sử dụng thêm một số tính năng

5 Người dùng vào mail xác nhận và đăng nhập

6 Hệ thống hiện thông báo đăng nhập thành công

Alternative flow Ở bước 4, nếu hệ thống phát hiện có dữ liệu đầu vào nào không hợp lệ, các công việc sau được thực hiện:

4a1 Hệ thống báo lỗi không thể tạo tài khoản

4a2 Use Case quay lại bước 2 của luồng cơ bản

Quy định nghiệp vụ - Professional regulations

- Các trường nhập thông tin không được để trống và phải đúng định dạng một vài

Yêu cầu phi chức năng - Non- functional requirements

Mã Use Case - ID UC – 1.2

Name Đăng nhập vào hệ thống

Mô tả - Brief description Được sử dụng khi người dùng muốn sử dụng một số dịch vụ từ trang web

- Tài khoản người dùng đã được tạo sẵn

- Tài khoản người dùng đã được phân quyền

- Thiết bị của người dùng đã được kết nối internet khi thực hiện đăng nhập

1 Người dùng truy cập đường dẫn trang web

2 Người dùng chọn nút Đăng nhập trên header

3 Hệ thống chuyển hướng sang trang đăng nhập

4 Người dùng nhập tài khoản và chọn nút đăng nhập

5 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng sử dụng thêm một số tính năng

6 Hệ thống hiện thông báo đăng nhập thành công

5a Hệ thống xác thực thông tin đăng nhập không thành công và hiển thị thông báo

5a1 Người dùng chọn lệnh hủy đăng nhập

5a2 Người dùng chọn nút đăng ký

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional

Usecase “Xem thông tin khách sạn”

Bảng 3.6: Usecase xem thông tin khách sạn

Mã Use Case - ID UC – 1.3

Xem chi tiết khách sạn

Người dùng thực hiện chọn thông tin của 1 khách sạn

Người dùng muốn xem thông tin của 1 khách sạn

Usecase bắt đầu khi người dùng muốn xem thông tin của một khách sạn

1 Hệ thống điều hướng người dùng đến chi tiết về khách sạn

Quy định nghiệp - Trường hợp tác nhân là khách sẽ không thể chọn đặt phòng

14 vụ - Professional regulations của khách sạn đó

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Đặt phòng khách sạn”

Bảng 3.7: Usecase đặt phòng khách sạn

Mã Use Case - ID UC – 2.0

Name Đặt phòng khách sạn

Người dùng thực hiện đặt phòng khách sạn

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng muốn xem nội dung chi tiết một bài viết

1 Người dùng truy cập vào trang chi tiết khách sạn

2 Hệ thống hiện ra thông tin của khách sạn

3 Người dùng chọn phòng muốn đặt và tiến hành đặt

4 Hệ thống kiểm tra thông tin người dùng và xác nhận đặt phòng

4a1 Nếu người dùng chưa đăng nhập thì hệ thống chuyển đến trang đăng nhập

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Đánh giá khách sạn”

Bảng 3.8: Usecase đánh giá khách sạn

Mã Use Case - ID UC – 2.1

Name Đánh giá khách sạn

Người dùng thực hiện đánh giá khách sạn đã đặt

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng chọn đánh giá khách sạn

1 Người chọn đánh giá khách sạn đã đặt

2 Hệ thống xuất hiện form đánh giá

3 Người dùng nhập thông tin đánh giá và ấn Đánh giá

4 Hệ thống kiểm tra thông tin và thông báo đánh giá thành công

4a1 Hệ thống thông báo không được để thông tin trống 4a2 Người dùng chọn Đóng kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Thay đổi thông tin cá nhân”

Bảng 3.9: Usecase thay đổi thông tin cá nhân

Mã Use Case - ID UC – 2.2

Thay đổi thông tin cá nhân

Người dùng thực hiện thay đổi thông tin của bản thân

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng chọn thay đổi thông tin cá nhân

1 Người chọn mục Thông tin cá nhân

2 Hệ thống hiện ra trang thông tin cá nhân

3 Người dùng nhập các thông muốn thay đổi và chọn Cập nhật

4 Hệ thống kiểm tra thông tin nhập vào và thông báo cập nhật thành công

4a1 Thông tin để trống hoặc số điện thoại đã tồn tại hệ thống thông báo cập nhật thất bại

4a2 Người dùng chuyển hướng đến trang khác kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Thay đổi mật khẩu”

Bảng 3.10: Usecase thay đổi mật khẩu

Mã Use Case - ID UC – 2.3

Người dùng thực hiện thay đổi mật khẩu của bản thân

Người dùng đã đăng nhập vào hệ thống

Luồng sự kiện - Không có

Usecase bắt đầu khi người dùng chọn thay đổi mật khẩu cá nhân

1 Người dùng chọn mục Đổi mật khẩu

2 Hệ thống hiện ra trang đổi mật khẩu

3 Người dùng nhập mật khẩu cũ và mới sau đó ấn Đổi mật khẩu

4 Hệ thống kiểm tra thông tin nhập vào và thông báo đổi mật khẩu thành công

4a1 Thông tin để trống hoặc mật khẩu cũ không đúng hệ thống thông báo thất bại

4a2 Người dùng chuyển hướng đến trang khác kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Tải ảnh khách sạn lên”

Bảng 3.11: Usecase tải ảnh lên khách sạn

Mã Use Case - ID UC – 3.0

Tải ảnh khách sạn lên

Người dùng thực hiện tải ảnh lên cho khách sạn của mình

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi đăng ảnh khách sạn của mình lên

1 Người chọn khách sạn hiện có

3 Hệ thống hiện ra form upload

4 Người dùng chọn khách sạn, chọn phòng và chọn ảnh ấn

5 Hệ thống kiểm tra thông tin và thông báo đăng ảnh thành công

5a1 File không phải ảnh không hệ thống thông báo thất bại 5a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non-

Bảng 3.12: Usecase thêm khách sạn

Mã Use Case - ID UC – 3.1

Người dùng thực hiện chức năng thêm khách sạn

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người dùng chọn Thêm khách sạn

2 Hệ thống hiện ra form thêm khách sạn

3 Người dùng nhập thông tin khách sạn và chọn Thêm

4 Hệ thống kiểm tra thông tin và thông báo thêm thành công

Luồng thay thế - 4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Bảng 3.13: Usecase sửa khách sạn

Mã Use Case - ID UC – 3.2

Người dùng thực hiện chức năng chỉnh sửa thông tin khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Luồng sự kiện - Không có

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người dùng chọn khách sạn muốn sửa và nhấp Chỉnh sửa

2 Hệ thống hiện ra form chỉnh sửa khách sạn

3 Người dùng nhập thông tin khách sạn và chọn Cập nhật

4 Hệ thống kiểm tra thông tin và thông báo cập nhật thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Bảng 3.14: Usecase xóa khách sạn

Mã Use Case - ID UC – 3.3

Người dùng thực hiện chức năng xóa khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người dùng chọn khách sạn muốn xóa và nhấp Xóa

2 Hệ thống yêu cầu xác nhận có muốn xóa khách sạn

4 Hệ thống thông báo xóa thành công

3a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Xác nhận đặt phòng”

Bảng 3.15: Usecase xác nhận đặt phòng

Mã Use Case - ID UC – 3.4

Người dùng thực hiện chức năng xác nhận đặt phòng

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người chọn khách sạn muốn xác nhận

2 Người dùng xem yêu cầu và thông tin người đặt

3 Người dùng chọn Xác nhận

4 Hệ thống thông báo xác nhận thành công và cập nhật trạng thái đã đặt phía khách hàng

4a1 Người đùng xác nhận Hủy hệ thống thông báo yêu cầu đặt phòng đã bị hủy

Quy định nghiệp vụ - Professional

Yêu cầu phi chức năng - Non- functional requirements

Mã Use Case - ID UC – 3.5

Người dùng thực hiện chức năng thêmphòng cho khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người chọn khách sạn muốn thêm phòng

2 Người dùng ấn nút Thêm phòng

3 Hệ thống hiện ra form thêm phòng

4 Người dùng nhập thông tin phòng và chọn Thêm

5 Hệ thống kiểm tra thông tin và thông báo thêm thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Mã Use Case - ID UC – 3.6

Người dùng thực hiện chức năng chỉnh sửa thông tin phòng của khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người dùng chọn khách sạn muốn sửa

2 Người dùng chọn phòng muốn chỉnh sửa

3 Hệ thống hiện ra form chỉnh sửa phòng khách sạn

4 Người dùng nhập thông tin phòng khách sạn và chọn

5 Hệ thống kiểm tra thông tin và thông báo cập nhật thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Mã Use Case - ID UC – 3.7

Người dùng thực hiện chức năng xóa phòng khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người chọn khách sạn muốn xóa phòng

2 Người dùng chọn phòng và ấn Xóa

3 Hệ thống yêu cầu xác nhận có muốn xóa phòng khách sạn

5 Hệ thống thông báo xóa thành công

4a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional

Yêu cầu phi chức năng - Non- functional requirements

Bảng 3.19: Usecase xóa bình luận

Mã Use Case - ID UC – 3.8

Người dùng thực hiện chức năng xóa bình luận tiêu cực về khách sạn

Người dùng đã đăng nhập vào hệ thống Đã có ít nhất một khách sạn

Usecase bắt đầu khi người dùng mở trang quản lý khách sạn

1 Người chọn khách sạn muốn xóa bình luận

2 Người dùng chọn bình luận và ấn Xóa

3 Hệ thống yêu cầu xác nhận có muốn xóa bình luận

5 Hệ thống thông báo xóa thành công

4a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Bảng 3.20: Usecase thêm khách hàng

Mã Use Case - ID UC – 4.0

Người dùng thực hiện chức năng thêmkhách hàng

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý khách hàng

1 Người dùng chọn tab quản lý khách hàng

2 Người dùng ấn nút Thêm khách hàng

3 Hệ thống hiện ra form thêm khách hàng

4 Người dùng nhập thông tin khách hàng và chọn Thêm

5 Hệ thống kiểm tra thông tin và thông báo thêm thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Bảng 3.21: Usecase sủa khách hàng

Mã Use Case - ID UC – 4.1

Người dùng thực hiện chức năng chỉnh sửa thông tin khách hàng

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý khách hàng

1 Người dùng chọn tab quản lý khách hàng

2 Người dùng chọn khách hàng muốn chỉnh sửa

3 Hệ thống hiện ra form chỉnh sửa khách hàng

4 Người dùng nhập thông tin khách hàng và chọn Cập nhật

5 Hệ thống kiểm tra thông tin và thông báo cập nhật thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức Không có

Bảng 3.22: Usecase xóa khách hàng

Mã Use Case - ID UC – 4.2

Người dùng thực hiện chức năng xóa khách hàng

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý khách hàng

1 Người chọn tab quản lý khách hàng

2 Người dùng chọn khách hàng và ấn Xóa

3 Hệ thống yêu cầu xác nhận có muốn xóa khách hàng

5 Hệ thống thông báo xóa thành công

4a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Thêm chủ khách sạn ”

Bảng 3.23: Thêm chủ khách sạn

Mã Use Case - ID UC – 4.4

Người dùng thực hiện chức năng thêmchủ khách sạn

Người dùng đã đăng nhập vào hệ thống

Luồng sự kiện - Không có

Usecase bắt đầu khi người dùng mở trang quản lý chủ khách sạn

6 Người dùng chọn tab quản lý chủ khách sạn

7 Người dùng ấn nút Thêm chủ khách sạn

8 Hệ thống hiện ra form thêm chủ khách sạn

9 Người dùng nhập thông tin chủ khách sạn và chọn Thêm

10 Hệ thống kiểm tra thông tin và thông báo thêm thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Sửa chủ khách sạn”

Bảng 3.24: Usecase sửa chủ khách sạn

Mã Use Case - ID UC – 4.4

Người dùng thực hiện chức năng chỉnh sửa thông tin chủ khách sạn

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý chủ khách sạn

6 Người dùng chọn tab quản lý chủ khách sạn

7 Người dùng chọn chủ khách sạn muốn chỉnh sửa

8 Hệ thống hiện ra form chỉnh sửa chủ khách sạn

9 Người dùng nhập thông tin chủ khách sạn và chọn Cập nhật

10 Hệ thống kiểm tra thông tin và thông báo cập nhật thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức Không có

Usecase “Xóa chủ khách sạn”

Bảng 3.25: Usecase xóa chủ khách sạn

Mã Use Case - ID UC – 4.5

Người dùng thực hiện chức năng xóa chủ khách sạn

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý chủ khách sạn

6 Người chọn tab quản lý chủ khách sạn

7 Người dùng chọn chủ khách sạn và ấn Xóa

8 Hệ thống yêu cầu xác nhận có muốn xóa chủ khách sạn

10 Hệ thống thông báo xóa thành công

4a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Thêm quản trị viên ”

Bảng 3.26: Usecase thêm quản trị viên

Mã Use Case - ID UC – 4.6

Người dùng thực hiện chức năng thêmquản trị viên

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý quản trị viên

11 Người dùng chọn tab quản lý quản trị viên

12 Người dùng ấn nút Thêm quản trị viên

13 Hệ thống hiện ra form thêm quản trị viên

14 Người dùng nhập thông tin quản trị viên và chọn Thêm

15 Hệ thống kiểm tra thông tin và thông báo thêm thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Sửa quản trị viên”

Bảng 3.27: Usecase sửa quản trị viên

Mã Use Case - ID UC – 4.7

Người dùng thực hiện chức năng chỉnh sửa thông tin quản trị viên

Người dùng đã đăng nhập vào hệ thống

Luồng cơ bản - Usecase bắt đầu khi người dùng mở trang quản lý quản trị viên

11 Người dùng chọn tab quản lý quản trị viên

Basic flow 12 Người dùng chọn quản trị viên muốn chỉnh sửa

13 Hệ thống hiện ra form chỉnh sửa quản trị viên

14 Người dùng nhập thông tin quản trị viên và chọn Cập nhật

15 Hệ thống kiểm tra thông tin và thông báo cập nhật thành công

4a1 Thông tin bị trống hay không hợp lệ hệ thống thông báo thất bại

4a2 Người dùng đóng form kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Usecase “Xóa quản trị viên”

Bảng 3.28: Usecase xóa quản trị viên

Mã Use Case - ID UC – 4.8

Người dùng thực hiện chức năng xóa quản trị viên

Người dùng đã đăng nhập vào hệ thống

Usecase bắt đầu khi người dùng mở trang quản lý quản trị viên

11 Người chọn tab quản lý quản trị viên

12 Người dùng chọn quản trị viên và ấn Xóa

13 Hệ thống yêu cầu xác nhận có muốn xóa quản trị viên Người dùng chọn Đồng ý

14 Hệ thống thông báo xóa thành công

4a1 Người đùng xác nhận Hủy kết thúc usecase

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

Các Sequence Diagram chính của hệ thống

3.3.1 Sơ đồ tuần tự quá trình đăng nhập

Hình 3.2: Sơ đồ tuần tự quá trình đăng nhập

3.3.2 Sơ đồ tuần tự quá trình tìm kiếm phòng khách sạn

Hình 3.3: Sơ đồ tuần tự quá trình tìm phòng khách sạn

3.3.3 Sơ đồ tuần tự quá trình đặt phòng

Hình 3.4: Sơ đồ tuần tự quá trình đặt phòng

3.3.4 Sơ đồ tuần tự quá trình thêm khách sạn

Hình 3.5: Sơ đồ tuần tự quá trình thêm khách sạn

3.3.5 Sơ đồ tuần tự quá trình sửa khách sạn

Hình 3.6: Sơ đồ tuần tự quá trình sửa khách sạn

3.3.6 Sơ đồ tuần tự quá trình xoá khách sạn

Hình 3.7: Sơ đồ tuần tự quá trình xoá khách sạn

3.3.7 Sơ đồ tuần tự quá trình thêm phòng

Hình 3.8: Sơ đồ tuần tự quá trình thêm phòng

3.3.8 Sơ đồ tuần tự quá trình sửa phòng

Hình 3.9: Sơ đồ tuần tự quá trình sửa phòng

3.3.9 Sơ đồ tuần tự quá trình xóa phòng

Hình 3.10: Sơ đồ tuần tự quá trình xóa phòng

3.3.10 Sơ đồ tuần tự quá trình xoá bình luận

Hình 3.11: Sơ đồ tuần tự quá trình xóa bình luận

3.3.11 Sơ đồ tuần tự quá trình đánh giá khách sạn

Hình 3.12: Sơ đồ tuần tự quá trình đánh giá khách sạn

3.3.12 Sơ đồ tuần tự quá trình thay đổi thông tin cá nhân

Hình 3.13: Sơ đồ tuần tự quá trình thay đổi thông tin cá nhân

3.3.13 Sơ đồ tuần tự quá trình xác nhận đặt phòng

Hình 3.14: Sơ đồ tuần tự quá trình xác nhận đặt phòng

3.3.14 Sơ đồ tuần tự quá trình thêm ảnh

Hình 3.15: Sơ đồ tuần tự quá trình thêm ảnh

3.3.15 Sơ đồ tuần tự quá trình xoá ảnh

Hình 3.16: Sơ đồ tuần tự quá trình xoá ảnh

3.3.16 Sơ đồ tuần tự quá trình thêm khách hàng

Hình 3.17: Sơ đồ tuần tự quá trình thêm khách hàng

3.3.17 Sơ đồ tuần tự quá trình sửa khách hàng

Hình 3.18: Sơ đồ tuần tự quá trình sửa khách hàng

3.3.18 Sơ đồ tuần tự quá trình xóa khách hàng

Hình 3.19: Sơ đồ tuần tự quá trình xóa khách hàng

3.3.19 Sơ đồ tuần tự quá trình thêm chủ khách sạn

Hình 3.20: Sơ đồ tuần tự quá trình thêm chủ khách sạn

3.3.20 Sơ đồ tuần tự quá trình sửa chủ khách sạn

Hình 3.21: Sơ đồ tuần tự quá trình sửa chủ khách sạn

3.3.21 Sơ đồ tuần tự quá trình xóa chủ khách sạn

Hình 3.22: Sơ đồ tuần tự quá trình xóa chủ khách sạn

3.3.22 Sơ đồ tuần tự quá trình thêm quản trị viên

Hình 3.23: Sơ đồ tuần tự quá trình thêm quản trị viên

3.3.23 Sơ đồ tuần tự quá trình sửa quản trị viên

Hình 3.24: Sơ đồ tuần tự quá trình sửa quản trị viên

3.3.24 Sơ đồ tuần tự quá trình xóa quản trị viên

Hình 3.25: Sơ đồ tuần tự quá trình xóa quản trị viên

Kiến trúc hệ thống

Công nghệ sử dụng

Về frontend, sử dụng ngôn ngữ TypeScript, CSS, HTML với framework là Angular (Angular CLI: 14.2.3)

TypeScript là một ngôn ngữ mã nguồn mở miễn phí do Microsoft phát triển, có mối liên hệ chặt chẽ với JavaScript Ngôn ngữ này được thiết kế để hỗ trợ việc xây dựng và phát triển các dự án ứng dụng quy mô lớn và phức tạp.

HTML (Ngôn ngữ Đánh dấu Siêu văn bản) là ngôn ngữ được sử dụng để xây dựng các trang web trên World Wide Web, cho phép trình bày thông tin một cách hiệu quả CSS (Cascading Style Sheets) quy định cách thức hiển thị của tài liệu HTML, đóng vai trò quan trọng trong việc thiết kế giao diện web.

Angular là một framework JavaScript và được viết bằng TypeScript Google tạo ra framework này với mục đích viết nên giao diện web (Front-end) 1 cách dễ dàng hơn

Về backend, sử dụng ngôn ngữ Java và framework spring

Java là một ngôn ngữ lập trình bậc cao, hướng đối tượng với tính năng bảo mật mạnh mẽ, đồng thời được coi là một nền tảng độc lập Được phát triển bởi Sun Microsystems dưới sự dẫn dắt của James Gosling, Java chính thức ra mắt vào năm 1995 Ngôn ngữ này có khả năng hoạt động trên nhiều hệ điều hành khác nhau, bao gồm Windows, Mac và các phiên bản UNIX khác.

Spring là một Framework quan trọng trong việc phát triển ứng dụng Java, đặc biệt là Java Enterprise, và được sử dụng bởi hàng triệu lập trình viên trên toàn thế giới Được sáng lập bởi Rod Johnson, Spring đã được phát hành dưới giấy phép Apache 2.0.

Về database, sử dụng ngôn ngữ truy vấn SQL và hệ quản trị cơ sở dữ liệu MySQL

SQL, hay còn gọi là Ngôn ngữ truy vấn có cấu trúc, là một ngôn ngữ dùng để tương tác với cơ sở dữ liệu Nó bao gồm các lệnh giúp lưu trữ, thao tác và truy xuất dữ liệu từ các cơ sở dữ liệu quan hệ.

MySQL is an open-source relational database management system (RDBMS) that operates on a client-server model It serves as software or a service designed to create and manage databases by organizing the relationships between them.

Database Diagram

Tổng kết

Giao diện hệ thống

Bảng 5.1: Chi tiết trang chủ

STT Tên Định dạng Tham chiếu Sự kiện

1 Đăng nhập Link Trang đăng nhập Nhấn vào sẽ chuyển hướng đến trang đăng nhập

2 Đăng ký Link Trang đăng ký Nhấn vào sẽ chuyển hướng đến trang đăng ký

3 Ô địa điểm Dropdown Địa điểm để tìm kiếm

Chọn địa điểm để tìm kiếm

4 Số ngày ở Calender Số ngày ở để lọc phòng

Nhấn vào chọn ngày bắt đầu và ngày kết thúc

5 Số người TextField Số người để lọc phòng

Nhấn vào để chọn số người lớn và trẻ em

6 Tìm kiếm Button Trang tìm kiếm Nhấn vào sẽ chuyển hướng đến trang tìm kiếm

7 Thành phố Card Trang tìm kiếm Nhấn vào sẽ chuyển hướng đến trang tìm kiếm

8 Quản lý tài khoản Link Trang quản lý tài khoản

Nhấn vào sẽ chuyển hướng đến trang quản lý tài khoản

9 Đặt chỗ Link Trang đặt chỗ Nhấn vào sẽ chuyển hướng đến trang đặt chỗ

10 Yêu thích Link Trang yêu thích Nhấn vào sẽ chuyển hướng đến trang yêu thích

11 Đăng ký khách sạn Link Trang quản lý khách sạn

Nhấn vào sẽ chuyển hướng đến trang quản lý khách sạn

12 Đăng xuất Link Thực hiện đăng xuất

Nhấn vào tiến hành đăng xuất

Bảng 5.2: Chi tiết tìm kiếm

STT Tên Định dạng Tham chiếu Sự kiện

1 Ô địa điểm Dropdown Địa điểm để tìm kiếm

Chọn địa điểm để tìm kiếm

2 Số ngày ở Calender Số ngày ở để lọc phòng

Nhấn vào chọn ngày bắt đầu và ngày kết thúc

3 Số người TextField Số người để lọc phòng

Nhấn vào để chọn số người lớn và trẻ em

4 Tìm kiếm Button Thực hiện tìm kiếm Nhấn vào tiến hành tìm kiếm

5 Tự chỉnh ngân sách InputSwitch Thực hiện điều chỉnh giá

Nhấn vào sẽ chuyển sang tự điều chỉnh giá

6 Lọc giá RadioBox Thực hiện chọn giá Nhấn vào sẽ chọn giá và lọc

7 Yêu thích Button Thực hiện thêm yêu thích

Nhấn vào tiến hành thêm khách sạn vào danh sách yêu thích

8 Xem chỗ trống Button Trang chi tiết khách sạn

Nhấn vào sẽ chuyển hướng đến trang chi tiết khách sạn

9 Xếp hạng sao CheckBox Thực hiện chọn sao Nhấn vào sẽ chọn sao và lọc

10 Cách trung tâm RadioBox Thực hiện chọn cách trung tâm

Nhấn vào sẽ chọn cách trung tâm và lọc

11 Điềm đánh giá RadioBox Thực hiện chọn c Nhấn vào sẽ chọn cách trung tâm và lọc

5.1.3 Trang chi tiết khách sạn

Hình 5.5: Trang chi tiết khách sạn – 1

Hình 5.6: Trang chi tiết khách sạn - 2

Hình 5.7: Trang chi tiết khách sạn – 3

Bảng 5.3: Chi tiết khách sạn

STT Tên Định dạng Tham chiếu Sự kiện

1 Ảnh khách sạn Image Trang ảnh của khách sạn

Nhấn vào sẽ hiện lên trang ảnh của khách sạn

2 Bình luận Button Trang bình luận Nhấn vào sẽ hiện lên trang bình luận của khách sạn đó

3 Số ngày ở Calender Số ngày ở để lọc phòng

Nhấn vào chọn ngày bắt đầu và ngày kết thúc

4 Tìm kiếm Button Thực hiện tìm kiếm Nhấn vào tiến hành tìm kiếm

5 Tên phòng Link Trang chi tiết phòng

Nhấn vào hiện lên trang chi tiết phòng

6 Số lượng Option Số lượng phòng đặt Nhấn vào chọn số lượng phòng muốn đặt

7 Đặt cọc Button Thực hiện đặt cọc Nhấn vào sẽ chuyển tới trang thanh toán Paypal

8 Đặt phòng Button Thực hiện đặt phòng

Nhấn vào sẽ chuyển tới trang thanh toán Paypal

9 Đóng trang chi tiết phòng

Button Trang chi tiết khách sạn

Nhấn vào sẽ chuyển đến trang chi tiết khách sạn

10 Ảnh phòng Image Trang ảnh của phòng

Nhấn vào sẽ hiện lên trang ảnh của phòng

11 Đặt ngay Button Trang chi tiết khách sạn

Nhấn vào sẽ chuyển đến trang chi tiết khách sạn

Bảng 5.4: Chi tiết đăng ký

STT Tên Định dạng Tham chiếu Sự kiện

1 Ô họ TextField Họ dùng để đăng ký

Nhập họ để đăng ký

2 Ô tên TextField Tên dùng để đăng ký

Nhập tên để đăng ký

3 Ô email TextField Email dùng để đăng ký

Nhập email để đăng ký

4 Ô điện thoại TextField Số điện thoại dùng để đăng ký

Nhập số điện thoại để đăng ký

5 Ô mật khẩu TextField Mật khẩu dùng để đăng ký

Nhập mật khẩu để đăng ký

6 Ô xác nhận mật khẩu TextField Xác nhận mật khẩu dùng để đăng ký

Nhập lại mật khẩu để đăng ký

7 Đăng ký Button Thực hiện đăng ký Nhấn vào sẽ thực hiện đăng ký

8 Đăng nhập Link Trang đăng nhập Nhấn vào sẽ chuyển hướng đến trang đăng nhập

Bảng 5.5: Chi tiết đăng nhập

STT Tên Định dạng Tham chiếu Sự kiện

1 Đăng nhập Google Button Đăng nhập vào

Nhấn vào chuyển hướng đến trang đăng nhập bằng Google

2 Ô email TextField Email dùng để đăng nhập

Nhập email để đăng nhập

3 Ô mật khẩu TextField Mật khẩu dùng để đăng nhập

Nhập mật khẩu để đăng nhập

4 Đăng nhập Button Thực hiện đăng nhập

Nhấn vào sẽ thực hiện đăng nhập

5 Đăng ký Link Trang đăng ký Nhấn vào sẽ chuyển hướng đến trang đăng ký

5.1.6 Trang quản lý tài khoản

Hình 5.10: Trang quản lý tài khoản

Bảng 5.6: Chi tiết quản lý tài khoản

STT Tên Định dạng Tham chiếu Sự kiện

1 Hồ sơ Link Trang thông tin khách hàng

Nhấn vào sẽ chuyển hướng tới trang thông tin khách hàng

2 Đổi mật khẩu Link Trang đổi mật khẩu Nhấn vào sẽ chuyển hướng tới trang trang đổi matah khẩu

3 Lịch sử của tôi Link Trang lịch sử của tôi Nhấn vào sẽ chuyển hướng tới trang lịch sử của tôi

4 Yêu thích Link Trang yêu thích Nhấn vào sẽ chuyển hướng tới trang yêu thích

5 Ô email TextField Email của khách hàng

Hiện email của khách hàng

6 Ô tên TextField Tên của khách hàng Hiện tên của khách hàng có thể chỉnh sửa

7 Ô họ TextField Họ của khách hàng Hiện họ của khách hàng có thể chỉnh sửa

8 Ô số điện thoại TextField Số điện thoại của khách hàng

Hiện số điện thoại của khách hàng có thể chỉnh sửa

Button Thực hiện cập nhật thông tin

Nhấn vào sẽ cập nhật thông tin

10 Trang chủ Button Trang chủ Nhấn vào sẽ chuyển hướng đến trang chủ

Hình 5.11: Trang đổi mật khẩu

Bảng 5.7: Chi tiết đổi mật khẩu

STT Tên Định dạng Tham chiếu Sự kiện

1 Ô mật khẩu cũ TextField Mật khẩu cũ để đổi mật khẩu

Nhập mật khẩu cũ để đổi mật khẩu

2 Ô mật khẩu mới TextField Mật khẩu mới để đổi mật khẩu

Nhập mật khẩu mới để đổi mật khẩu

3 Ô nhập lại mật khẩu mới

TextField Nhập lại mật khẩu mới để đổi mật khẩu

Nhập lại mật khẩu mới để đổi mật khẩu

4 Đổi mật khẩu Button Thực hiện đổi mật khẩu

Nhấn vào sẽ đổi mật khẩu

5.1.8 Trang lịch sử của tôi

Hình 5.12: Trang lịch sử của tôi

Hình 5.13: Trang chi tiết đặt phòng

Bảng 5.8: Chi tiết lịch sử của tôi

STT Tên Định dạng Tham chiếu Sự kiện

1 Sắp tới Link Trang sắp tới Nhấn vào sẽ chuyển tới trang đơn đặt phòng sắp tới

2 Hoàn tất Link Trang hoàn tất Nhấn vào sẽ chuyển tới trang đơn đặt phòng đã hoàn tất

3 Đã hủy Link Trang đã hủy Nhấn vào sẽ chuyển tới trang đơn đặt phòng đã hủy

4 Chi tiết Button Trang chi tiết đơn đặt phòng

Nhấn vào sẽ chuyển tới trang chi tiết đơn đặt phòng

5 Thanh toán Button Trang thanh toán Nhấn vào sẽ chuyển tới trang thanh toán Paypal

6 Hủy Button Thực hiện hủy đơn đặt phòng

Nhấn vào sẽ thực hiện chức năng hủy phòng

Bảng 5.9: Chi tiết yêu thích

STT Tên Định dạng Tham chiếu Sự kiện

1 Số ngày ở Calender Số ngày ở để lọc phòng

Nhấn vào chọn ngày bắt đầu và ngày kết thúc

2 Số người TextField Số người để lọc phòng

Nhấn vào để chọn số người lớn và trẻ em

3 Áp dụng Button Thực hiện lọc phòng

Nhấn vào để thực hiện lọc phòng

4 Xóa khách sạn Button Thực hiện xóa khách sạn

Nhấn vào để xóa khách sạn khỏi danh sách yêu thích

5 Xem chỗ nghỉ Button Tranh chi tiết khách sạn

Nhấn vào sẽ chuyển tới trang chi tiết khách sạn

Hình 5.15: Trang quản trị viên

Bảng 5.10: Chi tiết quản trị viên

STT Tên Định dạng Tham chiếu Sự kiện

1 Quản trị viên Link Trang tài khoản quản trị viên

Nhấn vào sẽ chuyển đến trang tài khoản quản trị viên

2 Chủ khách sạn Link Trang tài khoản chủ khách sạn

Nhấn vào sẽ chuyển đến trang tài khoản chủ khách sạn

3 Khách hàng Link Trang tài khoản khách hàng

Nhấn vào sẽ chuyển đến trang tài khoản khách hàng

Button Trang cập nhật tài khoản

Nhấn vào sẽ chuyển đến trang cập nhật tài khoản

5 Xóa tài khoản Button Thực hiện xóa tài khoản

Nhấn vào sẽ xóa tài khoản

6 Thêm tài khoản Button Trang thêm tài khoản Nhấn vào sẽ chuyển đến trang thêm tài khoản

5.1.11 Trang cập nhật tài khoản

Hình 5.16: Trang cập nhật tài khoản

Bảng 5.11: Chi tiết cập nhật tài khoản

STT Tên Định dạng Tham chiếu Sự kiện

1 Ô họ TextField Họ dùng để cập nhật tài khoản

Nhập họ để cập nhật tài khoản

2 Ô tên TextField Tên dùng để cập nhật tài khoản

Nhập tên để cập nhật tài khoản

3 Ô email TextField Email dùng để cập nhật tài khoản

Nhập email để cập nhật tài khoản

4 Ô điện thoại TextField Số điện thoại dùng để cập nhật tài khoản

Nhập số điện thoại để cập nhật tài khoản

5 Ô mật khẩu TextField Mật khẩu dùng để cập nhật tài khoản

Nhập mật khẩu để cập nhật tài khoản

TextField Xác nhận mật khẩu dùng để cập nhật tài khoản

Nhập lại mật khẩu để cập nhật tài khoản

Button Thực hiện cập nhật tài khoản

Nhấn vào sẽ thực hiện cập nhật tài khoản

Hình 5.17: Trang thêm tài khoản

Bảng 5.12: Chi tiết thêm tài khoản

STT Tên Định dạng Tham chiếu Sự kiện

1 Ô họ TextField Họ dùng để thêm tài khoản

Nhập họ để thêm tài khoản

2 Ô tên TextField Tên dùng để thêm tài khoản

Nhập tên để thêm tài khoản

3 Ô email TextField Email dùng để thêm tài khoản

Nhập email để thêm tài khoản

4 Ô điện thoại TextField Số điện thoại dùng để cập thêm khoản

Nhập số điện thoại để thêm tài khoản

5 Ô mật khẩu TextField Mật khẩu dùng để thêm tài khoản

Nhập mật khẩu để thêm tài khoản

TextField Xác nhận mật khẩu dùng để thêm tài khoản

Nhập lại mật khẩu để thêm tài khoản

7 Thêm tài khoản Button Thực hiện thêm tài khoản

Nhấn vào sẽ thực hiện thêm tài khoản

5.1.13 Trang quản lý khách sạn

Hình 5.18: Trang quản lý khách sạn – 1

Hình 5.19: Trang quản lý khách sạn - 2

Bảng 5.13: Chi tiết trang quản lý khách sạn

STT Tên Định dạng Tham chiếu Sự kiện

1 Thêm khách sạn Button Trang thêm khách sạn Nhấn vào sẽ chuyển đến trang thêm khách sạn

2 Chọn khách sạn CheckBox Thực hiện chọn khách sạn

Nhấn vào sẽ thực hiện chọn khách sạn

3 Bữa sáng InputSwitch Thực hiện điều chỉnh bữa sáng

Nhấn vào sẽ chuyển điều chỉnh giá trị cho bữa sáng

4 Giáp biển InputSwitch Thực hiện điều chỉnh giáp biển

Nhấn vào sẽ chuyển điều chỉnh giá trị cho giáp biển

InputSwitch Thực hiện điều chỉnh giáp biển du lịch bền vững

Nhấn vào sẽ chuyển điều chỉnh giá trị cho du lịch bền vững

TextField Xác nhận mật khẩu dùng để thêm tài khoản

Nhập lại mật khẩu để thêm tài khoản

7 Tiện nghi Button Trang tiện nghi Nhấn vào sẽ chuyển tới trang điều chỉnh tiện nghi cho khách sạn

8 Hình ảnh Button Trang hình ảnh Nhấn vào sẽ chuyển tới trang điều chỉnh

79 hình ảnh cho khách sạn

9 Sửa Button Trang cập nhật khách sạn

Nhấn vào sẽ chuyển tới trang cập nhật khách sạn

10 Xóa Button Thực hiện xóa khách sạn

Nhấn vào sẽ tiến hành xóa khách sạn

Hình 5.20: Trang thêm khách sạn

Bảng 5.14: Chi tiết thêm khách sạn

STT Tên Định dạng Tham chiếu Sự kiện

1 Tên khách sạn TextField Tên khách sạn để thêm khách sạn

Nhập tên khách sạn để thêm khách sạn

2 Mô tả TextField Mô tả để thêm khách sạn

Nhập mô tả để thêm khách sạn

3 Tỉnh, thành phố TextField Tỉnh, thành phố để thêm khách sạn

Nhập tỉnh, thành phố để thêm khách sạn

4 Địa chỉ TextField Địa chỉ để thêm khách sạn

Nhập địa chỉ để thêm khách sạn

5 Cách trung tâm TextField Cách trung tâm để thêm khách sạn

Nhập cách trung tâm để thêm khách sạn

6 Chính sách hủy TextField Chính sách hủy để thêm khách sạn

Nhập chính sách hủy để thêm khách sạn

7 Các tiện nghi Button Trang tiện nghi Nhanass vào sẽ chuyển hướng đến trang tiện nghi

8 Số sao Button Thực hiện chọn sao Nhấn vào sẽ tiến hành chọn số sao

9 Bữa sáng InputSwitch Thực hiện điều chỉnh bữa sáng

Nhấn vào sẽ chuyển điều chỉnh giá trị cho bữa sáng

InputSwitch Thực hiện điều chỉnh giáp biển du lịch bền vững

Nhấn vào sẽ chuyển điều chỉnh giá trị cho du lịch bền vững

11 Giáp biển InputSwitch Thực hiện điều chỉnh giáp biển

Nhấn vào sẽ chuyển điều chỉnh giá trị cho giáp biển

12 Lưu Button Thực hiện lưu khách sạn

Nhấn vào sẽ tiến hành lưu khách sạn

5.1.15 Trang thêm quản lý phòng

Hình 5.21: Trang quản lý phòng – 1

Hình 5.22: Trang quản lý phòng - 2

Bảng 5.15: Chi tiết quản lý phòng

STT Tên Định dạng Tham chiếu Sự kiện

1 Thêm phòng Button Trang thêm phòng Nhấn vào sẽ chuyển đến trang thêm phòng

2 Loại phòng TextField Loại phòng để cập nhật phòng

Nhập loại phòng để cập nhật phòng

4 Diện tích TextField Diện tích để cập nhật phòng

Nhập diện tích để cập nhật phòng

5 Giá TextField Giá để cập nhật phòng Nhập giá để cập nhật phòng

6 Người lớn TextField Người lớn để cập nhật phòng

Nhập người lớn để cập nhật phòng

7 Trẻ em TextField Trẻ em để cập nhật phòng

Nhập trẻ em để cập nhật phòng

8 Giảm giá TextField Giảm giá để cập nhật phòng

Nhập giảm giá để cập nhật phòng

9 Giường đơn TextField Giường đơn để cập nhật phòng

Nhập giường đơn để cập nhật phòng

10 Giường đôi TextField Giường đôi để cập nhật phòng

Nhập giường đôi để cập nhật phòng

11 Số lượng TextField Số lượng để cập nhật phòng

Nhập số lượng để cập nhật phòng

12 Hút thuốc InputSwitch Thực hiện điều chỉnh hút thuốc

Nhấn vào sẽ chuyển điều chỉnh giá trị cho hút thuốc

13 Tiện nghi Button Trang tiện nghi Nhấn vào sẽ chuyển tới trang điều chỉnh tiện nghi cho phòng

14 Hình ảnh Button Trang hình ảnh Nhấn vào sẽ chuyển tới trang điều chỉnh hình ảnh cho phòng

15 Cập nhật Button Thực hiện cập nhật Nhấn vào vào sẽ tiến hành cập nhật phòng

16 Hủy cập nhât Button Thực hiện hủy cập nhật Nhấn vào vào sẽ tiến hành hủy cập nhật phòng

17 Xóa Button Thực hiện xóa phòng Nhấn vào sẽ tiến hành xóa khách sạn

18 Sửa Button Trang cập nhật phòng Nhấn vào sẽ chuyển tới trang cập nhật phòng

Bảng 5.16: Chi tiết thêm phòng

STT Tên Định dạng Tham chiếu Sự kiện

1 Đóng Button Trang quản lý phòng Nhấn vào sẽ đóng trang thêm phòng và chuyển tới trang quản lý phòng

2 Loại phòng TextField Loại phòng để thêm phòng

Nhập loại phòng để thêm phòng

3 Giá TextField Giá để thêm phòng Nhập giá để thêm phòng

4 Giảm giá TextField Giảm giá để thêm phòng

Nhập giảm giá để thêm phòng

5 Diện tích TextField Diện tích để thêm phòng

Nhập diện tích để thêm phòng

6 Người lớn TextField Người lớn để thêm phòng

Nhập người lớn để thêm phòng

7 Trẻ em TextField Trẻ em để thêm phòng Nhập trẻ em để thêm phòng

8 Giường đơn TextField Giường đơn để thêm phòng

Nhập giường đơn để thêm phòng

9 Giường đôi TextField Giường đôi để thêm phòng

Nhập giường đôi để thêm phòng

10 Số lượng TextField Số lượng để thêm phòng

Nhập số lượng để thêm phòng

11 Tiện nghi Button Trang tiện nghi Nhấn vào sẽ chuyển tới trang điều chỉnh tiện nghi cho phòng

12 Các tiện nghi TextField Các tiện nghi để thêm phòng

Nhập các tiện nghi để thêm phòng

TextField Trong phòng tắm để thêm phòng

Nhập trong phòng tắm để thêm phòng

14 Hướng tầm nhìn TextField Hướng tầm nhìn để thêm phòng

Nhập hướng tầm nhìn để thêm phòng

15 Tiện ích TextField Tiện ích để thêm phòng

Nhập tiện ích để thêm phòng

16 Hút thuốc InputSwitch Thực hiện điều chỉnh hút thuốc

Nhấn vào sẽ chuyển điều chỉnh giá trị cho hút thuốc

17 Lưu Button Thực hiện lưu khách sạn

Nhấn vào sẽ tiến hành lưu phòng

5.1.17 Trang quản lý đặt phòng

Hình 5.25: Trang quản lý đặt phòng

Bảng 5.17: Chi tiết quản lý đặt phòng

STT Tên Định dạng Tham chiếu Sự kiện

1 Khách sạn Link Đơn đặt phòng của khách sạn

Nhấn vào sẽ hiện lên đơn đặt phòng của khách sạn đó

2 Sắp tới Link Trang sắp tới Nhấn vào sẽ chuyển tới trang đơn đặt phòng sắp tới

3 Hoàn tất Link Trang hoàn tất Nhấn vào sẽ chuyển tới trang đơn đặt phòng đã hoàn tất

4 Đã hủy Link Trang đã hủy Nhấn vào sẽ chuyển tới trang đơn đặt phòng đã hủy

5 Hoàn tất Button Thực hiện cập nhật trang thái đơn

Nhấn vào tiến hành cập nhật trạng thái đơn

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

Xây dựng được một trang web có các chức năng cơ bản của một website đặt phòng khách sạn online như tìm kiếm và đặt phòng

Hiểu hơn về các ngôn ngữ được sử dụng như Java, Html, Css và Sql cũng như các framework mới là Angular và Spring

Biết được các làm việc nhóm, chia các công việc cho từng thành viên

Các thao tác trong lúc chuyển trang còn chưa được nhanh

Lượng data của các khách sạn còn khá ít

Giao diện đơn giản chưa được bắt mắt người dùng

Hướng phát triển

Cần hoàn thiện các tính năng còn thiếu và bổ sung thêm nhiều dữ liệu để làm cho trang web trở nên đa dạng hơn Điều này bao gồm việc thêm các khách sạn quốc tế, cung cấp thông tin về các phương tiện di chuyển như máy bay và taxi, cũng như giới thiệu thêm các địa điểm tham quan hấp dẫn cho du khách.

Tài liệu tham khảo

[1] Spring Boot Reference Documentation, https://docs.spring.io/spring- boot/docs/current/reference/htmlsingle/, docs.spring.io, truy cập ngày 25/03/2023

[2] Angular Documentation, https://angular.io/docs, angular.io, truy cập ngày 25/03/2023

Sử dụng Cloudinary để quản lý hình ảnh trong ứng dụng của bạn giúp tối ưu hóa hiệu suất và tiết kiệm băng thông Cloudinary cung cấp các tính năng mạnh mẽ như lưu trữ, xử lý và phân phối hình ảnh một cách dễ dàng Bằng cách tích hợp Cloudinary, bạn có thể cải thiện trải nghiệm người dùng với tốc độ tải trang nhanh hơn và chất lượng hình ảnh tốt hơn Đừng bỏ lỡ cơ hội nâng cao ứng dụng của bạn với giải pháp quản lý ảnh tiên tiến này.

[4] PrimeNG , https://primeng.org/installation, primeng.org, truy cập ngày 25/03/2023

[5] PrimeFlex , https://primeflex.org/installation, primeflex.org ,truy cập ngày 25/03/2023

Ngày đăng: 05/12/2023, 10:04

w