Chương 1: Khảo sát thực trạng và xác định yêu cầu hệ thống Hỗ trợ khai báo: Vue.js sử dụng mô hình lập trình khai báo, giúp cho việc viết code trở nên dễ dàng và dễ hiểu. Hỗ trợ DOM: Vue.js cung cấp các API để thao tác với DOM, giúp cho việc tạo giao diện người dùng trở nên đơn giản và hiệu quả hơn. Bên cạnh VueJS, hệ thống còn sử dụng một số thư viện khác hỗ trợ xây dựng giao diện nhanh chóng và đẹp mắt như: Ant design vue: là một thư viện hỗ trợ xây dựng giao diện cực kì mạnh mẽ, với các ưu điểm như gọn nhẹ, đẹp mắt, bao gồm nhiều các component được xây dựng sẵn giúp cho quá trình phát triển Frontend diễn ra dễ dàng và nhanh chóng. Bootstrap: là một front-end framework miễn phí gồm các đoạn mã HTML, CSS, Javascript giúp các lập trình viên phát triển website dễ dàng và nhanh hơn.
Bootstrap sử dụng mã nguồn mở và một số công cụ khác nhau giúp tạo ra một mẫu Website hoàn chỉnh. Axios: là một thư viện HTTP client dựa trên Promise dành cho node.js và trình duyệt. Nó có thể chạy trong cả trình duyệt và node. Axios cung cấp một API đơn giản và dễ sử dụng để thực hiện các yêu cầu HTTP, bao gồm GET, POST, PUT, DELETE, HEAD, OPTIONS và PATCH, hỗ trợ bất đồng bộ, tự động chuyển đổi json, … 1.
Sơ kết chương Trong chương 1, đồ án đã khảo sát nghiệp vụ và thu thập yêu cầu thực tế được rút ra từ một số trang web đặt phòng khách sạn trực tuyến phổ biến. Từ những dữ liệu đó, chương này đưa ra yêu cầu phù hợp và các chức năng chính của hệ thống. Đồng thời, nghiên cứu công nghệ phù hợp và giới thiệu về các công nghệ, các thư viện hỗ trợ được sử dụng trong hệ thống. Hệ thống sử dụng ngôn ngữ lập trình Java và Spring Boot cho phía backend bởi khả năng mở rộng dễ dàng, sự hỗ trợ mạnh mẽ từ cộng đồng phát triển, và tính ổn định cũng như tính bảo mật cao của ngôn ngữ này.
Hệ cơ sở dữ liệu được lựa chọn là MySQL. Về phần frontend, đồ án sử dụng HTML, CSS, và JavaScript như là các ngôn ngữ tiêu chuẩn cho việc phát triển giao diện người dùng. Để tăng cường trải nghiệm người dùng và quản lý trạng thái của ứng dụng một cách hiệu quả, đồ án đã tích hợp Vue.js, một framework JavaScript dễ sử dụng đồng thời mang lại hiệu suất tốt cho hệ thống cùng với các thư viện hỗ trợ như Ant Design Vue, Bootstrap, Axios. Chương 2 sẽ đi vào bước phân tích cụ thể của hệ thống đặt phòng khách sạn.
Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG 2. Biểu đồ usecase tổng quát Hình 2.1: Biểu đồ usecase tổng quát 2. Biểu đồ usecase chi tiết - Biểu đồ usecase chức năng quản lý thông tin cá nhân Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống Hình 2.2: Biểu đồ usecase chức năng quản lý thông tin cá nhân - Biểu đồ usecase chức năng khách hàng xem chi tiết khách sạn Hình 2.3: Biểu đồ usecase chức năng khách hàng xem chi tiết khách sạn - Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống - Biểu đồ usecase chức năng đặt phòng và thanh toán Hình 2.4: Biểu đồ usecase chức năng đặt phòng và thanh toán - Biểu đồ usecase chức năng đánh giá khách sạn Hình 2.5: Biểu đồ usecase đánh giá khách sạn - Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống - Biểu đồ usecase chức năng quản lý khách sạn yêu thích Hình 2.6: Biểu đồ usecase chức năng quản lý khách sạn yêu thích - Biểu đồ usecase chức năng quản lý khách sạn Hình 2.7: Biểu đồ usecase quản lý khách sạn Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống - Biểu đồ usecase chức năng xem thống kê khách sạn của doanh nghiệp Hình 2.8: Biểu đồ usecase xem thống kê khách sạn của doanh nghiệp - Biểu đồ usecase chức năng quản lý tiện nghi Hình 2.9: Biểu đồ usecase chức năng quản lý tiện nghi - Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống - Biểu đồ usecase chức năng quản lí tài khoản Hình 2.10: Biểu đồ usecase chức năng quản lý tài khoản - Biểu đồ usecase chức năng xem thống kê của Admin Hình 2.11: Biểu đồ usecase chức năng Xem thống kê của Admin Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống 2. Xây dựng kịch bản cho các usecase UC1: Đăng ký Bảng 2.1: Kịch bản usecase Đăng ký Tên Usecase Đăng ký Tác nhân Khách hàng Tiền điều kiện Người dùng có email Hậu điều kiện Người dùng đăng ký tài khoản thành công và có thể sử dụng để truy cập vào hệ thống Kịch bản chính 1.
Khách hàng truy cập vào ứng dụng và click nút “Đăng ký” trên màn hình 2. Giao diện đăng ký hiện ra 3. Khách hàng nhập họ tên, số điện thoại, email, mật khẩu (nhập 2 lần) và các thông tin cá nhân khác và click “Đăng ký” 4. Hệ thống kiểm tra và không thấy tài khoản tồn tại trên hệ thống 5.
Hệ thống lưu thông tin đăng ký vào cơ sở dữ liệu 6. Hệ thống thông báo đăng ký thành công cho người dùng và chuyển sang trang đăng nhập Kịch bản ngoại lệ 3. Khách hàng không nhập đủ thông tin các trường bắt buộc 3. Hệ thống đưa ra cảnh báo và không thực hiện đăng ký 4.
Hệ thống thông báo email này đã được sử dụng để đăng ký tài khoản UC2: Đăng nhập Bảng 2.2: Kịch bản usecase Đăng nhập Tên Usecase Đăng nhập Tác nhân Người dùng Tiền điều kiện Người dùng đã đăng ký tài khoản thành công Hậu điều kiện Người dùng đăng nhập thành công và có thể truy cập vào hệ thống Kịch bản chính 1. Khách hàng truy cập vào ứng dụng và click nút “Đăng nhập” 2. Giao diện đăng nhập hiện ra Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống 3. Khách hàng nhập email, mật khẩu và click “Đăng nhập” 4.
Hệ thống kiểm tra thông tin đăng nhập 5. Hệ thống thông báo đăng nhập thành công 6. Hệ thống chuyển hướng người dùng về trang chủ với vai trò của người dùng Kịch bản ngoại lệ 3. Khách hàng không nhập đủ thông tin các trường bắt buộc 3.
Hệ thống đưa ra cảnh báo và không thực hiện đăng nhập 5. Hệ thống đưa ra thông báo đăng nhập không thành công do email hoặc mật khẩu không đúng UC3: Quên mật khẩu Bảng 2.3: Kịch bản usecase Quên mật khẩu Tên Usecase Quên mật khẩu Tác nhân Người dùng (bao gồm cả khách hàng, doanh nghiệp và admin) Tiền điều kiện Người dùng có tài khoản hợp lệ có thể đăng nhập vào hệ thống Hậu điều kiện Người dùng đổi mật khẩu thành công Kịch bản chính 1. Tại giao diện đăng nhập, người dùng click Quên mật khẩu 2. Giao diện Quên mật khẩu hiện ra 3.
Người dùng nhập Email đã đăng ký tài khoản rồi ấn Gửi 4. Hệ thống kiểm tra email và thông báo kiểm tra thư mới trong email 5. Người dùng kiểm tra email rồi click vào link trong email 6. Hệ thống chuyển sang giao diện nhập mật khẩu mới 7.
Người dùng nhập mật khẩu (2 lần) và click Cập nhật mật khẩu 8. Hệ thống thông báo cập nhật mật khẩu thành công cho người dùng Kịch bản ngoại lệ 4. Hệ thống thông báo email không tồn tại trong hệ thống 7. Người dùng nhập thiếu trường hoặc 2 mật khẩu không trùng khớp 7.
Hệ thống đưa ra cảnh báo và không thực hiện cập nhật mật khẩu Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống UC4: Quản lí thông tin cá nhân Bảng 2.4: Kịch bản usecase Quản lý thông tin cá nhân Tên Usecase Quản lí thông tin cá nhân Tác nhân Khách hàng Tiền điều kiện Người dùng có tài khoản với vai trò khách hàng Hậu điều kiện Người dùng chỉnh sửa thông tin cá nhân thành công Kịch bản chính 1. Tại giao diện trang chủ, khách hàng click menu 2. Một menu hiện lên với mục Thông tin cá nhân 3. Khách hàng click Thông tin cá nhân của menu 4.
Giao diện Thông tin cá nhân hiện lên 5. Khách hàng click nút chỉnh sửa trên màn hình 6. Các trường thông tin trên màn hình cho phép chỉnh sửa 7. Người dùng chỉnh sửa thông tin cá nhân và click Cập nhật 8.
Hệ thống thông báo chỉnh sửa thông tin thành công Kịch bản ngoại lệ 8. Hệ thống thông báo số điện thoại đã được sử dụng cho tài khoản khác UC5: Xem chi tiết khách sạn Bảng 2.5: Kịch bản usecase Xem chi tiết khách sạn Tên Usecase Xem chi tiết khách sạn Tác nhân Khách hàng Tiền điều kiện Khách hàng không cần có tài khoản đăng nhập hệ thống Hậu điều kiện Khách hàng xem được thông tin chi tiết của khách sạn Kịch bản chính 1. Tại giao diện trang chủ cho khách hàng, khách hàng nhập thông tin địa điểm, thời gian thuê phòng, số lượng người và bấm Tìm kiếm 2. Giao diện Danh sách Khách sạn hiện ra với một danh sách các khách sạn 3.
Người dùng click vào một khách sạn bất kỳ 4. Hệ thống chuyển đến giao diện chi tiết khách sạn Nguyễn Văn Hiếu – D19CNPM1 Đồ án tốt nghiệp đại học Chương 2: Phân tích hệ thống 5. Người dùng xem các thông tin chi tiết của khách sạn Kịch bản ngoại lệ 2. Hệ thống chuyển sang giao diện Danh sách khách sạn nhưng không có khách sạn nào phù hợp với yêu cầu tìm kiếm UC6: Đặt phòng và thanh toán Bảng 2.6: Kịch bản usecase Đặt phòng và thanh toán Tên Usecase Đặt phòng và thanh toán Tác nhân Khách hàng Tiền điều kiện Khách hàng không cần có tài khoản đăng nhập hệ thống Hậu điều kiện Khách hàng đặt phòng và thanh toán thành công Kịch bản chính 1.
Tại giao diện trang chủ cho khách hàng, khách hàng nhập thông tin địa điểm, thời gian thuê phòng, số lượng người và bấm Tìm kiếm 2. Giao diện Danh sách Khách sạn hiện ra với một danh sách các khách sạn 3. Người dùng click vào một khách sạn bất kỳ 4. Hệ thống chuyển đến giao diện chi tiết khách sạn 5.
Người dùng chọn phòng, chọn số lượng cho từng phòng rồi click Đặt phòng 6. Hệ thống chuyển sang giao diện Đặt phòng với các mục nhập thông tin cá nhân của khách hàng 7. Khách hàng nhập thông tin cá nhân, chọn phương thức thanh toán rồi bấm tiếp tục 8.