HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY

------ ------

PROJECT REPORT
Hotel Booking Website

Web technologies and e- Services– 139398

GROUP 21
Le Minh Thinh – 20205172
Nguyen Van Tien – 20205195
Nguyen Tan Tien – 20205172

Lecturer: Ph.D. Do Ba Lam

Table of Contents
............................................................................................................................................... 1
Chapter 1: Introduc2on........................................................................................................... 3
1.1 Problem description: ................................................................................................................ 3
1.2 Proposed solution: ................................................................................................................... 3
Chapter 2: Overall descrip2on................................................................................................. 3
2.1 System description ................................................................................................................... 3
2.2 Overall requirement ................................................................................................................. 4
Chapter 3: Requirement analysis and System analysis ............................................................ 5
3.1 Overall...................................................................................................................................... 5
3.2 Usecase specification ............................................................................................................... 5
3.3 Activity Diagram ..................................................................................................................... 8
Chapter 4: Data modeling ..................................................................................................... 16
4.1 ERD......................................................................................................................................... 16
4.2 Data model table ................................................................................................................... 16
Chapter 5: Technology used. ................................................................................................. 18
Front-end...................................................................................................................................... 18
Back-end & API ........................................................................................................................... 18
Chapter 6: Demo Project ....................................................................................................... 19
Chapter 7: Guide to run on local machine ............................................................................. 25
Chapter 8: Conclusion ........................................................................................................... 25
8.1 Summary ................................................................................................................................ 25
8.2 Work Distribution ................................................................................................................. 25
8.3 Problems encounter and lessons learned .............................................................................. 25
8.4 Suggestions for Future Work ................................................................................................. 26
Chapter 1: Introduc1on
1.1 Problem description:
Finding, comparing, and booking accommodations can be a time-consuming and
challenging process for travelers. Many people face difficulties in locating suitable
accommodations that align with their preferences, budget, and desired location.
Moreover, existing booking systems often lack user-friendly interfaces, and efficient
search functions. Consequently, the general users might find the process of finding a
place for their visits daunting and discouraged from completing their bookings.

1.2 Proposed solution:

To address these issues, we decided to deliver a comprehensive and user-friendly
booking accommodation system that simplifies the search, comparison, and booking
process based on specific requirements. This system should offer a seamless and intuitive
user experience, featuring a wide range of accommodation options and efficient search
capabilities.

The primary objective of this project is to develop a booking accommodation system that
streamlines the process of finding and booking accommodations for travelers. By creating
an intuitive and efficient platform, we aim to enhance the overall user experience and
provide a reliable solution for individuals seeking hassle-free accommodation bookings.

Chapter 2: Overall descrip1on

2.1 System description
Our booking website serves as a comprehensive online platform with the primary aim of
offering extensive information about hotels and resorts among users. Users can
effortlessly explore and discover various accommodation options through different
categories or product listings and also offer their places for rental. The system enables
users to filter and sort search results based on their preferences, while also providing
recommendations on trending accommodations to keep them informed about popular
choices.

Furthermore, our system boasts robust search functionality. Users can search for specific
accommodations using keywords and access detailed information about each property,
including amenities, photos, and customer reviews. This empowers users to make well-
informed decisions when selecting their preferred accommodations.
The second objective of our system is to streamline the booking process for users. Once
logged in, users can view comprehensive hotel profiles, explore different room types, and
check availability and pricing. Our system facilitates room reservations and offers a
seamless online payment process, eliminating the need for manual transactions or third-
party payment gateways.

Lastly, our system provides accommodation providers with an intuitive administrative

interface. This interface allows them to easily manage their hotel listings, update room
availability, and efficiently handle reservations. Providers also receive notifications when
their place is booked or when a reservation is canceled.

2.2 Overall requirement

The overall requirements for our booking website project can be outlined as follow:
1. User Registration and Authentication
- Users should be able to create an account and securely log in to the website.
- User authentication and authorization mechanisms should be implemented to
ensure secure access to user-specific features and information.
2. Accommodation Search and Browsing
- Users should be able to search for accommodations based on various criteria
such as the hotel’s name and the facilities provided.
- The system should provide a user-friendly interface for browsing through
different accommodation options, including detailed descriptions, photos, and
reviews.
3. Booking and Reservation Management
- Users should be able to select desired accommodations, check availability, and
make reservations.
- The system should handle reservation requests, update availability in real-
time, and provide confirmation to users upon successful bookings.
4. Security and Data Protection
- The system should employ robust security measures to protect user
information, including secure storage and encryption of sensitive data.
- Privacy regulations and compliance standards should be adhered to, ensuring
the protection of user privacy and data.
5. Documentation and Support
- Comprehensive documentation should be provided, including user guides and
technical documentation for future maintenance and enhancements.
Chapter 3: Requirement analysis and System analysis
3.1 Overall
Actor: Customer – is also owner, login to system to searching accommodation, view
detail, booking, view booking, CRUD accommodation.

Usecase diagram:

3.2 Usecase specification

Search place
Name Search place
Description Users can search places by keywork, price, address ... by search bar
and filter.
Actor User
Precondition no
Basic flow 1. Users enter keyword to search bar and click search buYon,
click to filter, or price scroll bar to search.
2. System process search request.
3. System display places satisfy the condition.
Alternative flow No
Post condition No
View detail place
Name View detail place
Description Users can click to a place and view details about this place
information.
Actor User
Precondition no
Basic flow 1. User enter click to a place want to view detail.
2. System displays all information about places to users.
Alternative no
flow
Post condition no

Register
Name Register
Description Allow anyone to register to become a user.
Actor User
Precondition no
Basic flow 1. Users click on the register buYon.
2. System displays a register form.
3. Users enter username, email, password.
4. The system checks user information.
5. System creates a new user.
6. Notify register successful and go to login page.
Alternative flow At step 4, if system checks user information is invalid, back to step
3 and go on.
Post condition No

Login
Name Login
Description Allow user login to system
Actor User
Precondition User must have an account
Basic flow 1. Users click on login buYon.
2. System displays a login form.
3. Users enter email and password.
4. System check user information
5. Noti login successful and go to home page.
 Alternative flow At step 4, if system checks user information is not exist, system
notify login fail and user must be register.
Post condition No

Booking
Name Booking
Description After user view details about a place, they can book that place.
Actor User
Precondition no
Basic flow 1. On the view detail screen, at booking box, users choose
check-in and checkout day, then fill number of guests, then
click to “booking this place” buYon.
2. System validates information about check-in, checkout day,
number of guests.
3. System shows the form to fill in the full name and phone
number of the user.
4. Then user click to “booking this place”, system notify
booking successful and show detail about booking.
Alternative flow At step 1, if checking, checkout day and number of guests are
invalid, the system notify, and users must choose again.
Post condition No

View booking
Name View booking
Description Users can view the history of booking and view detail.
Actor User
Precondition no
Basic flow 1. Users click the booking option and choose my booking.
2. System shows history of booking.
Alternative flow no
Post condition no

CRUD Place
Name CURD Place
Description Allow users (also is owner) to create, read, update, and delete a
place.
Actor User (Owner)
Precondition no
 Basic flow 1. User clicks on account buYon -> choose “booking” -> my
accommodation.
2. System shows the list of places for this user.
3. To create a new place, user click on “add new place”, the
system shows form create new place, user fills information
and save to finish.
4. To delete a place, the user clicks to that place then click
“delete”.
5. To update a place, user click to that place, system shows
detail information, user modify and save.
Alternative flow No
Post condition No

3.3 Activity Diagram

Search place
View detail place
Register
Login
Create new place
Update
Delete
Chapter 4: Data modeling
4.1 ERD

4.2 Data model table

4.2.1 User
AYribute Type Require Describe Reference
_id objectId Unique ID to identify user
name string User display name
email string true Email account to login
password string Identify account
favorite objectId User favorite place Place

4.2.2 Place
AYribute Type Require Describe Reference
_id objectId Identify place
owner objectId Users own this place User
title string Name of place
address string Address of place
photos string
 description string Introduce to this place
perks string
extraInfor string More information
checkIn number
checkOut number
maxGuests number Maximum number of guests
price number Price for each day for this place
rating number Number of star rating

4.2.3 Booking
AYribute Type Require Describe Reference
_id objectId Unique ID to identify a booking
place objectId true Place
user objectId true
checkIn date true
checkOut date true
name string true
phone string true
price number Total price of this booking

4.2.4 Notification
AYribute Type Require Describe Reference
_id objectId Unique ID to identify notification
user objectId true User
userAct string true
booking objectId true Booking
place string true
checkIn date Default: Date.now
checkOut date Default: Date.now
date date Default: Date.now
content string true
4.2.5 Review

AYribute Type Require Describe Reference

_id objectId Unique ID to identify a review
user objectId true User
place objectId true Place
time date Default: Date.now
rating number true Min: 0, max: 5
content string

Chapter 5: Technology used.

Front-end
5.1.1 React

React is a JavaScript library developed by Facebook, specifically designed for building

single-page applications. It utilizes a component-based architecture, where each
component represents a small part of the user interface that can be reused. React's
virtual DOM and JSX syntax contribute to efficient rendering and allow for a seamless
combination of HTML and JavaScript.
Key Features of React:
- Virtual DOM: React utilizes a virtual DOM to optimize the updating of the user
interface. Instead of updating the entire DOM when changes occur, React only
updates the necessary components, resulting in faster rendering.
- JSX: React allows the writing of HTML code within JavaScript through JSX
syntax, enabling the seamless combination of HTML and JavaScript code.
- State Management: React provides an efficient way to manage application
state. By using state, developers can track and control the state of components,
thereby modifying the user interface accordingly.
React Router:
React Router is a JavaScript library used for managing routing in React applications. It
allows programmers to define paths for navigation between pages and display
corresponding content based on the URL.
Key Features of React Router:
- Single-Page Routing: React Router enables navigation between pages without
the need to reload the entire website.
- Nested Routing: React Router allows the creation of nested routing structures,
where child components can be embedded within a parent page. This helps
organize the source code more efficiently.
Back-end & API

5.1.2 {MongoDB}: MongoDB is a NoSQL document database that stores data in

flexible JSON-like documents. It provides scalability, high performance, and
easy integration with Node.js. MongoDB allows developers to store and
retrieve data efficiently in a schema-less manner.
 5.1.3 {Node.js}: Node.js is a JavaScript runtime that allows running JavaScript code
on the server-side. It provides an event-driven, non-blocking I/O model,
making it suitable for building scalable and high-performance web
applications. Node.js has a vast ecosystem of libraries and packages available
through npm, which simplifies development and integration tasks.
5.1.4 {Express.js}: Express.js is a fast and minimalist web application framework for
Node.js. It simplifies the creation of server-side applications and provides
features for handling HTTP requests, defining routes, and implementing
middleware. Express.js is commonly used with Node.js to build the backend
API in MERN stack applications.
We have also prioritized security measures, including the use of JSON Web Tokens
(JWT) for secure user authentication and authorization. By employing JWT, we have
avoided the need to store passwords in plain text, enhancing the overall security of
our system.

Chapter 6: Demo Project

1. Client Homepage:

2. User Search Hotel

3. Hotel Detail Page
4. Reserve
5. See your booking

6. Owned Accommodation Page

7. Favourite Accommodation Page

8. Register Page
9. Login Page
Chapter 7: Guide to run on local machine
Follow these step to run this project on your local machine:
7. Clone this project from your repository: h"ps://github.com/nguyentienict01/Web-
project.git
8. Go to api folder, install the node_modules and start the back-end by:
- cd api
- yarn install
- yarn dev:start
9. Open a new terminal install the node_modules and start the front-end by:
- cd .. (to get out of the api page)
- cd client
- yarn install
- yarn dev
10. Open a web browser on your local machine and open: h"p://localhost:5173/

Chapter 8: Conclusion
8.1 Summary
To sum up, our booking website offers a user-friendly platform that facilitates
accommodation search and booking management. It incorporates various features,
including user registration, accommodation search functionality, and robust booking
management capabilities. Though the system might not be running perfectly given
the fact that all members of our team are inexperienced with coding websites, we gave
our best in bringing out the most desired result, and the project, to some extent, has
been quite an achievement for all of us.
8.2 Work Distribution
+ Le Minh Thinh: Database Design, Back-End API.
+ Nguyen Van Tien: Database Design, Front-End, Report.
+ Nguyen Tan Tien: Database Design, Front-End, Report.

8.3 Problems encounter and lessons learned

- Each member was not familiar with the workflow of git, so there are problems with
pushing and pulling the code up and down. The team had several meetings just to
solve this problem. There are also problems with dividing the workflow as the front-
end cannot work independently from the backend and have to wait for the API to be
available before continuing working.
• This project has been a wonderful opportunity for all members to learn
to use GitHub and other Repository Hosting platforms in general
 - Inconsistent database design: Database Design is very important and should be done
with care before the coding begin. However, as our project was based on a tutorial on
the internet, we have to modify the design several times so that the website can have
the desired features. This unsystematic way of working is troublesome and very
inefficient, and we wasted a lot of time to redesign the system.
• We realize the importance of system design before rolling up our sleeves
to code.
- Clean code: Most of the initial code was not reusable and a change made to one
place usually comes with bug fixes and changes in other places.
• We learn how to make reusable components, which is the key feature of
React. Though the code of many components may still look untidy,
some good efforts have been made to make them more presentable.

8.4 Suggestions for Future Work

We realized that our result is far from a deployable website, and a lot more adjustments
should be made to improve the way this website functions. However, due to the
limitation of time, as well as our limited knowledge, the following proposed
improvements may need some time to be realized.
The first adjustment should be the way we handle images. Right now all images are kept
local since MongoDB is not suitable to hold this type of resource. We are considering
using Docker to solve this problem.
The second modification should be the introduction of a payment system. Currently, the
site only supports booking, but the payment will be made in person between the tenants
and the host. To make the process more streamlined and transparent, a secure payment
system is vitally important.
The third modification would be a more detailed user information database. Currently,
the site allows the sign-up for an unlimited number of users as long as they provide a
correctly formaYed email. In the future, we want to have an email validation step where
users must confirm a registration email before the account is marked as valid. This will
ensure that the booking is made by a real person, reducing the number of incidents for
both the tenants and the hosts.