Đồ án Kỹ thuật: tốt nghiệp xây dựng trang website đặt phòng khách sạn

Đồ án nghiên cứu tốt nghiệp xây dựng trang website đặt phòng khách sạn, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán kỹ thuật.

• Tác giả: Phạm Thị Như Hảo
• Người hướng dẫn: ThS. Lê Thị Minh Châu
• Trường học: Trường Đạ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
• Đề tài: Ứng Dụng Vuejs Version 2 Và Spring Restful API Vào Xây Dựng Website Đặt Phòng Khách Sạn
• Loại tài liệu: Graduation Project
• Năm xuất bản: 2020
• Địa điểm: Ho Chi Minh City

Tóm tắt

I. Giới thiệu về đồ án tốt nghiệp xây dựng website đặt phòng khách sạn

Đồ án tốt nghiệp xây dựng website đặt phòng khách sạn là một dự án học thuật được thực hiện bởi sinh viên ngành Công Nghệ Thông Tin tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh. Dự án này nhằm mục đích phát triển một nền tảng đặt phòng trực tuyến hiện đại, hỗ trợ chuỗi khách sạn quản lý dịch vụ và nâng cao trải nghiệm khách hàng. Thông qua việc ứng dụng các công nghệ web tiên tiến như Vue.js version 2 và Spring RESTful API, nhóm tác giả đã xây dựng một hệ thống toàn diện với các tính năng thực tiễn. Đây là một bước đột phá trong việc số hóa ngành du lịch và khách sạn, giúp tối ưu hóa quy trình đặt phòng và quản lý thông tin khách hàng một cách hiệu quả.

1.1. Mục đích và ý nghĩa của đề tài

Mục đích chính của đồ án là xây dựng một website đặt phòng khách sạn chuyên nghiệp, giúp khách hàng dễ dàng tìm kiếm và đặt phòng trực tuyến. Ý nghĩa của dự án nằm ở việc ứng dụng công nghệ số để cải thiện dịch vụ khách sạn, giảm chi phí vận hành và tăng độ hài lòng của khách hàng. Hệ thống này còn hỗ trợ các chuỗi khách sạn quản lý thông tin phòng, giá cả và đặt phòng một cách tập trung, nâng cao hiệu quả kinh doanh trong thời đại số hóa.

1.2. Đối tượng sử dụng và lợi ích

Website đặt phòng này phục vụ cho hai đối tượng chính: khách hàng tìm kiếm và đặt phòng trực tuyến, và nhân viên khách sạn quản lý thông tin đặt phòng. Lợi ích bao gồm việc cung cấp trải nghiệm người dùng mượt mà, hỗ trợ đăng nhập qua Facebook và Google, tìm kiếm phòng nhanh chóng theo tiêu chí như giá, vị trí và loại phòng. Hệ thống cũng cho phép thanh toán trực tuyến an toàn, lưu lịch sử đặt phòng và nhận thông báo cập nhật.

II. Công nghệ sử dụng trong dự án website đặt phòng khách sạn

Để xây dựng website đặt phòng khách sạn hiện đại, nhóm tác giả đã lựa chọn các công nghệ web phổ biến và mạnh mẽ. Vue.js version 2 được sử dụng cho phía frontend, giúp xây dựng giao diện người dùng động, responsive và có tương tác cao. Spring RESTful API được sử dụng cho phía backend, cung cấp các dịch vụ web an toàn và có khả năng mở rộng. Kết hợp giữa frontend và backend, dự án đã tạo ra một hệ thống đặt phòng hoàn chỉnh với hiệu suất tối ưu, bảo mật dữ liệu khách hàng và khả năng xử lý lượng truy cập lớn. Các công nghệ này được cộng đồng phát triển ưa thích vì tính ổn định, bảo trì tốt và tài liệu đầy đủ.

2.1. Vue.js version 2 Framework frontend

Vue.js version 2 là một JavaScript framework linh hoạt, được sử dụng để xây dựng giao diện người dùng tương tác. Nó cung cấp data binding hai chiều, các component tái sử dụng và quản lý state hiệu quả thông qua Vuex. Vue.js giúp tạo ra một website đặt phòng với giao diện đẹp, responsive trên các thiết bị khác nhau, và trải nghiệm người dùng mượt mà khi tìm kiếm, lọc phòng và thực hiện đặt phòng. Ngoài ra, Vue.js có thư viện router cho điều hướng trang, HTTP client cho gọi API dễ dàng.

2.2. Spring RESTful API Framework backend

Spring Framework là nền tảng Java mạnh mẽ, cung cấp khung làm việc RESTful API cho phía backend của website đặt phòng. Spring giúp quản lý dữ liệu khách hàng, phòng khách sạn, đơn đặt phòng một cách an toàn và hiệu quả. Nó hỗ trợ kết nối cơ sở dữ liệu, xác thực người dùng, phân quyền truy cập và xử lý các yêu cầu HTTP từ frontend. Spring RESTful API đảm bảo tính bảo mật cao, khả năng mở rộng tốt và dễ bảo trì, là lựa chọn tối ưu cho các ứng dụng web quy mô lớn.

III. Tính năng chính của website đặt phòng khách sạn

Website đặt phòng khách sạn được phát triển với nhiều tính năng thực tiễn để phục vụ nhu cầu của khách hàng và nhân viên khách sạn. Các tính năng bao gồm hệ thống xác thực người dùng với hỗ trợ đăng nhập qua Facebook và Google, công cụ tìm kiếm thông minh để khách hàng lọc phòng theo tiêu chí như ngày check-in, check-out, số lượng khách và loại phòng. Website cũng cung cấp giao diện quản lý đặt phòng cho nhân viên theo dõi, cập nhật trạng thái đơn đặt phòng. Hệ thống thanh toán trực tuyến được tích hợp để khách hàng có thể thanh toán trực tiếp, ghi chú và đánh giá phòng giúp khách hàng khác tham khảo, cùng các tính năng lưu lịch sử đặt phòng và gửi thông báo email xác nhận đơn hàng.

3.1. Chức năng tìm kiếm và đặt phòng

Chức năng tìm kiếm là trái tim của website đặt phòng, cho phép khách hàng nhập ngày check-in, check-out, số người và loại phòng để tìm các phòng phù hợp. Kết quả tìm kiếm hiển thị thông tin phòng chi tiết như hình ảnh, giá, tiện nghi, đánh giá từ khách hàng khác. Sau khi chọn phòng, khách hàng có thể xem thêm chi tiết và thực hiện đặt phòng trực tuyến bằng cách điền thông tin cá nhân, chọn phương thức thanh toán và xác nhận đơn đặt phòng. Hệ thống tự động kiểm tra tính sẵn có của phòng và gửi email xác nhận cho khách hàng.

3.2. Quản lý thông tin và tương tác người dùng

Website đặt phòng cung cấp bảng điều khiển cá nhân cho khách hàng quản lý hồ sơ, lịch sử đặt phòng, phương thức thanh toán lưu trữ. Khách hàng có thể đánh giá và bình luận về phòng đã ở, giúp khách hàng tiềm năng đưa ra quyết định tốt hơn. Hệ thống thông báo gửi email hoặc push notification về xác nhận đặt phòng, nhắc nhở check-in và các tin tức khuyến mãi từ khách sạn. Các nhân viên khách sạn có giao diện riêng để quản lý đơn đặt phòng, cập nhật trạng thái phòng, xử lý hủy phòng và tạo báo cáo doanh thu.

IV. Quá trình phát triển và kết quả đạt được của đồ án

Quá trình phát triển đồ án tốt nghiệp website đặt phòng khách sạn bắt đầu từ khâu phân tích yêu cầu, nghiên cứu các website đặt phòng hiện có để hiểu rõ quy trình nghiệp vụ. Tiếp theo là thiết kế hệ thống, bao gồm sơ đồ cơ sở dữ liệu, kiến trúc API và wireframe giao diện người dùng. Nhóm tác giả sau đó lập trình frontend bằng Vue.js và backend bằng Spring Framework. Quá trình kiểm thử đảm bảo hệ thống hoạt động ổn định, xử lý đúng các trường hợp sai, bảo mật dữ liệu khách hàng. Kết quả đạt được là một website đặt phòng khách sạn hoàn chỉnh với giao diện thân thiện, tính năng đầy đủ, hiệu suất tối ưu. Dự án này chứng minh khả năng ứng dụng thực tiễn các công nghệ web hiện đại để giải quyết các bài toán thực tế trong ngành du lịch.

4.1. Các bước thực hiện dự án

Bước 1 - Phân tích yêu cầu: Nghiên cứu quy trình đặt phòng khách sạn, phỏng vấn các bên liên quan. Bước 2 - Thiết kế: Xây dựng sơ đồ ER, thiết kế cơ sở dữ liệu MySQL, API endpoints, giao diện Figma. Bước 3 - Phát triển Frontend: Xây dựng component Vue.js, trang tìm kiếm, đặt phòng, quản lý tài khoản. Bước 4 - Phát triển Backend: Tạo controllers, services, repositories Spring, intergrate Facebook/Google OAuth. Bước 5 - Kiểm thử: Test tính năng, tìm lỗi, tối ưu hiệu suất. Bước 6 - Triển khai: Deploy lên server, cấu hình domain, SSL certificate.

4.2. Kết quả và đóng góp của dự án

Kết quả đạt được bao gồm một website đặt phòng khách sạn hoàn chỉnh, tích hợp công nghệ Vue.js và Spring RESTful API, với giao diện đẹp mắt, responsive trên mobile, tablet, desktop. Đóng góp chính của dự án là cung cấp giải pháp số hóa cho ngành khách sạn, giúp tăng hiệu quả kinh doanh, cải thiện trải nghiệm khách hàng. Dự án còn được đánh giá cao về tính thực tiễn, ứng dụng các công nghệ web tiên tiến và tuân thủ các tiêu chuẩn code của lập trình viên chuyên nghiệp, là nền tảng tốt cho sinh viên bước vào sự nghiệp.

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

Chương 1: Tổng quan 9 Báo cáo đồ án tốt nghiệp Chương 2. Tổng quan về REST và RESTful API 2. Khái niệm API (Application Programming Interface) là một tập hợp các quy tắc, cơ chế mà dựa vào đó các ứng dụng có thể tương tác với nhau, cho phép kết nối giữa các ứng dụng, thực hiện thao tác truy xuất hoặc cập nhật dữ liệu. 1 Vị trí của API trong luồng giao tiếp của ứng dụng REST (Representational State Transfer) được giới thiệu lần đầu vào năm 2000 trong luận văn tiến sĩ của Thomas Fielding là hệ thống các ràng buộc (constraints), quy ước đối với một hệ thống.

RESTful API là sự vận dụng các tiêu chuẩn, ràng buộc REST vào trong việc thiết kế, xây dựng API để quản lí thao tác với các tài nguyên ứng dụng. 2 Thiết kế REST API Chương 2: Cơ sở lý thuyết 10 Báo cáo đồ án tốt nghiệp Khi một hệ thống đảm bảo các ràng buộc REST thì có thể gọi là RESTful. Các ràng buộc REST bao gồm: Kiến trúc client-server: Ứng dụng REST nên có kiến trúc Client-Server. Trong đó Client là nơi gửi yêu cầu thao tác với tài nguyên Server là nơi lưu trữ các tài nguyên.

Client và server sẽ được phát triển độc lập với nhau. Client không cần phải biết về business logic và Server không cần quan tâm đến giao diện người dùng. 3 Kiến trúc client-sever của REST Stateless (phi trạng thái): Server và client sẽ không lưu bất kì trạng thái nào của nhau trong phiên làm việc, điều này giúp máy chủ không phải duy trì, cập nhật các trạng thái làm việc. Mỗi request chứa đầy đủ thông tin (query params, header, URI).

Đây có thể sẽ là một hạn chế trong trường hợp client cần gửi một lượng lớn dữ liệu về server thì hệ thống sẽ tiêu tốn nhiều băng thông Cacheability (có khả năng cache): Các response có thể được lấy ra từ cache của server giúp giảm thiểu thời gian xử lý, để đảm bảo sự chính xác và tránh sự sai lệch do trùng lập của các response khi lấy từ cache thì các request tương ứng với từng response phải có tính duy nhất. Layered system (phân lớp hệ thống): Hệ thống được chia làm nhiều lớp (repository, service, controller), làm cho các thành phần trong hệ thống tách biệt nhau, dễ dàng mở rộng và phát triển hệ thống. Mỗi lớp chỉ tương tác với lớp ngay phía trên hoặc dưới nó. Chương 2: Cơ sở lý thuyết 11 Báo cáo đồ án tốt nghiệp Hình 2.

4 Ví dụ về cách thức phân lớp hệ thống trong REST Uniform interface (chuẩn hoá các interface): đây là ràng buộc mà quyết định sự khác biệt giữa REST API và non-REST API. Với ràng buộc này người thiết kế cần phải thiết kế cách giao tiếp giữa các ứng dụng theo một chuẩn nào đó sao cho dù là nền tảng web hay mobile đều có thể truy cập được. Chính vì việc có những quy ước chuẩn cho việc giao tiếp giữa các thành phần trong hệ thống đã giúp cho việc truy cập đến các tài nguyên trên server trở nên linh hoạt hơn. Từ đó mà có nhiều API được xây dựng dựa trên REST 2.

Cách thức hoạt động Request được gửi từ Client đến Server dưới dạng web URL như HTTP GET, POST, PUT, DELETE, … (tương ứng với thao tác CRUD, thêm, lấy, sửa, xóa dữ liệu). Sau đó Server sẽ trả về dữ liệu tương ứng dưới dạng HTML, XML, Image hoặc JSON. Hiện nay JSON là dạng dữ liệu trả về phổ biến trong thiết kế Web services. Chương 2: Cơ sở lý thuyết 12 Báo cáo đồ án tốt nghiệp Hình 2.

5 Cách thức hoạt động của REST API 2. Ưu điểm Hiệu năng (Performance): Sử dụng REST trong thiết kế giúp tăng hiệu năng của hệ thống. Tính khả biến (Modifiability): với các hệ thống cần thay đổi các tài nguyên liên tục, sử dụng REST với việc tạo request đơn giản sẽ giúp việc thực hiện các thay đổi trở nên đơn giản hơn. Tính mở rộng (Scalability): nhờ vào ràng buộc Layered system chi hệ thống thành nhiều lớp nhỏ giúp cho hệ thống dễ dàng mở rộng hơn Tính linh hoạt (Portability): việc chuẩn hoá interface (ràng buộc Uniform Interface) giúp hệ thống trở nên linh hoạt hơn, có thể sử dụng cho cho nhiều nền tảng khác nhau như mobile, web,.

Trong sáng (Visibility): Các request rõ ràng, dễ hiểu Đơn giản (Simplicity): cách thức xây dựng rất đơn giản Tính tin cậy (Realiability): khó để xảy ra lỗi trong giao tiếp giữa các thành phần trong hệ thống. Nhược điểm So với SOAP (Simple Object Access Protocol) thì API có phần kém hơn về độ bảo mật. Do ràng buộc Stateless nên các trạng thái của client và server không được lưu trữ trong trường hợp khối lượng thông tin phải truyền tải lớn hơn, gây tốn tài nguyên hệ thống. Chỉ hoạt động dựa trên giao thức HTTP.

Tổng quan về framework Vuejs 2. Giới thiệu về framework Vuejs Vue.js là một JavaScript framework bao gồm rất nhiều các công cụ tùy chọn khác nhau phục vụ cho việc xây dựng các giao diện tương tác với người dùng. Về mặt kĩ thuật Vuejs sử dụng mô hình MVVM (Model View View Model) và tập trung vào Chương 2: Cơ sở lý thuyết 13 Báo cáo đồ án tốt nghiệp lớp ViewModel của mẫu MVVM, kết nối View và Model thông qua các ràng buộc dữ liệu hai chiều các thao tác DOM thực tế và định dạng đầu ra được abstracted thành Directives và Filters. Với mục tiêu là cung cấp các cách thức kết nối với các API nhanh nhất có thể, Vuejs không hẳn là một framework đầy đủ mà được thiết kế để xây dựng nên một lớp view đơn giản và linh hoạt, thích hợp với các nhu cầu xây dựng phát triển giao diện nhanh.

6 Mô hình MVVM trong Vuejs 2. Ưu điểm của Vuejs Kích thước nhỏ gọn: tỷ lệ thành công của JavaScript framework sẽ phụ thuộc vào kích thước của nó. Kích thước càng nhỏ thì công năng sử dụng càng nhiều. Kích thước của vue.js framework là 18–21KB, người dùng sẽ không mất nhiều thời gian để tải xuống và sử dụng.

Dễ dàng để tìm hiểu và vận dụng vào việc phát triển ứng dụng. Nhờ cấu trúc đơn giản của vue.js, người dùng có thể dễ dàng thêm vuejs vào dự án website đang thực hiện của mình. Các ứng dụng có quy mô nhỏ cũng như quy mô lớn đều có thể được phát triển thông qua framework này. Cấu trúc của vuejs đơn giản giúp người dùng dễ dàng nhận biết và phát hiện lỗi trong trường hợp có vấn đề phát sinh trong code.

Tích hợp đơn giản: Vue.js cũng là framewoek được các web developer sử dụng khá phổ biến nhờ việc dễ dàng trong quá trình tích hợp với các ứng dụng hiện có. Sự tiện lợi này xuất phát từ Vue.js được xây dựng dựa trên JavaScript framework do đó có thể tích hợp được vào các ứng dụng xây dựng trên JavaScript tương đối đơn giản. Chương 2: Cơ sở lý thuyết 14 Báo cáo đồ án tốt nghiệp Tài liệu chi tiết: hệ thống tài liệu về Vue.js đầy đủ và toàn diện giúp cho người học dễ tìm hiểu và tiếp cận. Tính linh hoạt: Vue.js cho phép người dùng viết mẫu trong các tệp HTML.

Tính linh hoạt của Vue.js cũng giúp các developer phát triển React.js và bất kỳ JavaScript framework mới nào cảm thấy dễ hiểu khi tiếp cận. Giao tiếp 2 chiều (two ways binding): Vue.js cũng hỗ trợ việc giao tiếp hai chiều nhờ kiến trúc MVVM khá dễ dàng trong việc xử lý các HTML block. Nhược điểm của Vuejs Vuejs mặc dù có thể áp dụng vào các dự án lớn như không phù hợp. Vì thời gian ra đời có phần chậm hơn các framework khác như Reactjs nên mức độ phổ biến của Vuejs có phần kém hơn, cộng đồng cũng nhỏ hơn nên vấn đề tìm kiếm các sự hỗ trợ khi gặp vấn đề cũng gặp nhiều hạn chế.

Tổng quan về Spring Framework 2. Giới thiệu về Spring Framework Spring là một framework rất phổ biến đối với lập trình viên Java và được dùng rất nhiều trong việc xây dựng nên các ứng dụng bằng ngôn ngữ Java nói chung và ứng dụng Web nói riêng. Spring Framework có kích thước gọn nhẹ, có thể được dùng để xây dựng nên các ứng dụng có hiệu năng cao. Spring có các tính năng hỗ trợ nhà phát triển có thể thiết kế ứng dụng có tính tái sử dụng code cao, cũng như kiểm thử dễ dàng nhờ vào module Test của Spring.

Chương 2: Cơ sở lý thuyết 15 Báo cáo đồ án tốt nghiệp Hình 2. 7 Các modules và kiến trúc của Spring Framework 2. Ưu điểm của Spring Framework Spring Framework cung cấp, định nghĩa nên những template cho những công nghệ như JDBC, Hibernate, JPA để thao tác với cơ sở dữ liệu. Vì thế giảm đi lượng code cần viết một cách đáng kể do Spring đã lược bớt nhưng bước cơ bản của các công nghệ trên.

Spring Framework có tính loose coupling (liên kết lỏng lẻo) nhờ vào tính chất Dependecy Injection. Cũng nhờ vào tính chất này mà các ứng dụng Spring được phát triển nhanh chóng và dễ dàng kiểm thử hơn. Spring gọn nhẹ, Spring Framework không bắt buộc lập trình viên phải kế thừa bất kì lớp hoặc implement interface nào. Spring hỗ trợ cho nhà phát triển nhiều tính năng khác như: caching, validation, transactions, formatting,….

Chương 2: Cơ sở lý thuyết 16 Báo cáo đồ án tốt nghiệp 2. Spring Boot và Spring MVC Bảng 2. 1 So sánh Spring Boot và Spring MVC Spring Boot Spring MVC Spring Boot là một module của Spring Spring MVC là một framework web dựa giúp xây dựng và đóng gói ứng dụng dễ trên mô hình Model-View-Controller sử dàng. dụng Spring framework Cung cấp các cấu hình mặc định giúp dể Cung cấp các tính năng để xây dựng nên dàng khởi tạo nên một dự án sử dụng một ứng dụng web.

Spring framework Nhà phát triển không cần phải cấu hình Không cung cấp các cấu hình mặc định, thủ công nhà phát triển phải cấu hình thủ công Tốn ít thời gian để tạo và phát triển sản Cần nhiều thời gian hơn cho việc tạo và phẩm phát triển sản phẩm Tích hợp môi trường deploy bên ngoài Cần phải bắt buộc cài đặt và tích hợp môi là không bắt buộc vì Spring boot có tích trường deploy bên ngoài để chạy sản hợp sẵn một server apache để deploy phẩm  ứng dụng  Run on Server (apache,…) Run on Spring Boot App Chương 2: Cơ sở lý thuyết 17 Báo cáo đồ án tốt nghiệp Chương 3: PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU 3. Yêu cầu người dùng Bảng 3.