Ascenda Hotel Booking Project

Ascenda Hotel Booking Project Report

Members

• Liang Junyi
• Devanshi Joshi
• Fu Meihui
• Huy Nguyen

Introduction

Ascenda is a hotel booking system that allows users to make hotel reservations seamlessly. With the boom of the Millennial traveler, now more than 700 million people are expected to book primarily online by 2023. With that in mind, we are working on a hotel booking system software where guests can choose how long they will stay, the type of room they want, get add-ons, and pay securely online through a payment platform. The system will incorporate the following features, with updates to come in the future:

1. A fast text-based autocomplete search that can suggest relevant places / destinations as users type a destination
2. For a given destination, the dates of stay and number of rooms/guests, the website will return a list of matching hotels as well as the cheapest room for each hotel.
3. For a given hotel, the system will make an API call to provide a list of all matching room types that can be provided by the specified hotel.
4. Once decided, a customer will make their booking and provide payment via a payment gateway. The booking information is then stored in a database with some security features implemented to ensure user privacy.

Video link:

https://github.com/joshidevanshi/HotelbookingsysG8/blob/main/Introduce.mp4

System Design and Implementation

• Front end: HTML, CSS and Javascript
• Back end: Django
• Database: MongoDB, sqlite
• Software Development Diagrams: Figma

Use case diagram

At the beginning of our implementation, we started with analyzing the requirements and summarizing them with use cases. According to the function and feature requirements given by Ascenda Loyalty, we came up with the following nine use cases for our hotel booking system:

1. Search for hotels (at a certain destination)
2. Search for rooms
3. View list of hotels (and sort/filter based on user preference)
4. View list of rooms (based on the user’s search parameters)
5. Book a room
6. Login
7. Register
8. Check booking history
9. Booking Cancellation

In order to help us better understand this system and the relationship between use cases and actors, a use case diagram is created.

From the end users’ perspective, the relationships between these use cases and their possible interactions with this hotel booking system can be visually represented by the use diagram below

Class diagram

A UML class diagram is also created to better depict the structure of our system by showing the system’s classes, their attributes, operations and the relationship among these objects.

Software Development Process and Risk Analysis

Software development process:During discussion, we identified a software development processes that align with our implementation plan: rapid prototyping - easy to implement but also very time consuming

After project meeting 1, we’ve decided to apply rapid prototyping for our software development process. As such we will be creating the front end of the website on figma to implement the required features while we work on making each feature functional using the backend code.

Risks of using this technique:

• Might be time consuming to make the prototype and then translate it into code
• We have inadequate experience in web development and personal data security making the process of prototyping the actual working website will be slower.

However we can mitigate these risks by:

• Integrating snippets of the HTML, CSS code given in figma to implement the features for the front end of the website to replicate the figma template we create into front end code
• We can divide the tasks wisely among us so that each of us can learn and contribute to the making of the website. This will make the process of learning for us more effective and the creation of the actual working website prototype faster.

How to run the project

Our project website has to be locally hosted to run on the user’s computer. In order to do so, follow the steps listed here:
Step 1:

Open the command terminal on your device. cd to the folder where you would like to clone the project.
Step 2:

In the desired location, clone the project by entering:

git clone https://github.com/joshidevanshi/HotelbookingsysG8.git

Step 3:

Create a virtual environment using the command:

virtualenv venv

Step 4:

Activate this virtual environment using:

for Mac → $ source venv/bin/activate

for Windows → > venv/bin/activate

Step 5:

cd hbsproject
Step 6:

Enter these 3 commands:

python3 manage.py makemigrations

python3 manage.py migrate 

python3 manage.py runserver

Step 7:

Paste the link that appears as shown here:

Step 8:

To end the session, simply quit using Control-C as mentioned in the image above.

Front end

• expanding cards

  

• Sticky Navbar

  

• Rotating Navigation Animation

  

• Form Wave

  

Resource : https://github.com/bradtraversy/50projects50days

Engineering challenges: With the use of too many CSS files, the CSS in different files conflict with each other. The way to solve it is to open the html by the browser and use f12 to open the debug mode and change the CSS on the browser first. After finishing online, we can then change the CSS file locally.

Basic features

Feature 1: Destination search

In order to implement a fast text-based autocomplete search, we’ve used Jquery - a Javascript library to first make an API call to the json data provided by Ascenda as user types a destination. To make this a smooth experience for users, we’ve adjusted the drop-down list so that it will only display the top 20 searches instead of the entire data. This not only reduces the loading time, but also makes the UI look more visually appealing in the final product.

With the destination, number of guests, number of rooms and check in , check out date selected, after the user types the search button, our backend will get the user’s data by request.post method. After processing the data, we generate an API link. Calling the API link, we get the hotel data and navigate users to the HotelList page.

Engineering challenges: The API here can not get the information by first calling, we need to let it sleep for some seconds and call the API again to get the data.

Feature 2: Hotel Search Results

After getting the information which users give in Feature 1, we have a HotelList page to list all the hotels that meet the condition. Because the hotel list is always very long, we do the pagination here.

Users can adjust the page by pre or next button to go to adjacent pages, they also can type the page number they want in the input box then type go to button to the destination page.

If there is no hotel available by user’s information. For example, users search for 123abc as a destination. We will show information to inform users there is no hotel available. Also if the page number that user key in is an invalid page number like -1,abc or 100 (which exceed the maximum page number), we will also give the same information to inform the user there is no hotel available.

Engineering challenges: Rendering all the hotels at same time requires a very long time. The way to solve it is using pagination.

Feature 3: Hotel Room Details

In the Hotel List page mentioned in Feature 2, users can click onto each hotel for more details. This is implemented as Feature 3. Rating, a brief introduction and the location information of the hotel with a map of the surrounding can be found on this page. Besides, a list of available rooms and their prices are also implemented for users to refer to. This list of rooms is the result of filtering according to the user input like the number of guests and check-in check-out dates that we get from Feature 1. The booking button will bring the user to Feature 4 to checkout.

Feature 4: Booking data

We implemented a checkout form to get user information and payment details as well as a way to store these in MongoDB with security features implemented. The checkout form would first use the Rest API GET method to get the hotel name, the room type chosen by the customer as well as their check-in, check-out date; these data will be displayed in the top right so users can check and confirm their choices. Users will then fill in the form with their personal information and payment details. Once done, they will click the submit button; this would encrypt the user’s info and store them in MongoDB while also adding the newly created booking to the “Booking History” page.

Engineering challenges: Extra security features must be implemented when users submit their booking. This requires interacting with MongoDB, which can be quite difficult as NoSQL databases are not officially supported by Django itself. Thus, we have to write from scratch the scripts that would allow Django to work seamlessly with MongoDB.

Additional features

Login and Register

We implemented the login and register features to allow the user to create an account. When a first time user registers an account, a user will be able to login to use the website and most importantly view their own booking history. For registering simply enter the email address, set a password and reenter the password again. Upon registration, the user can proceed to the homepage to make a booking. The website has a logout feature which the user can use to exit the website after making a transaction. For users that are already registered, can login to make a booking or/and view their booking history.
Engineering Challenge: In the process of implementing these 2 features, we faced difficulties in authenticating the user by extracting the user information and comparing it to the login information keyed in by the user.

Payment security

To guarantee data security, once users have submitted a booking, the data they submitted will be encrypted before being saved to the database. Furthermore, should the users decide to review their booking info (through the Booking History feature we implement), sensitive information will be partially masked, for example, credit card number will only show the first 4 and last 6 digits. As GDPR (General Data Protection Regulation) requires that end users can request for their private information to be destroyed, we implement a feature for users themselves to delete the private info in our database, which is further elaborated in the “Booking History” feature.

Booking history

One of the additional features we implemented is a booking history, where users can view their past bookings and subsequently, delete them if they wish to cancel a certain booking. When users open a booking history page, it would show the details of the bookings they’ve made (hotel name, room type, check-in and out date, contact info, etc.). The data is added when users first complete the check-out form.
To augment this with security requirements, we’ve also added the “delete booking” feature. For any certain booking, users can choose to cancel a booking by pressing the “delete booking” located to the right of that booking. This would proceed to delete the booking data in the booking history as well as completely removing the booking details in the database. Thus, users can seamlessly delete their booking without their personal information being compromised.

Database Cache

Another additional feature we implemented is a database cache. When a user visits the BookHistory page, we will get the booking detail information from our database. The cache method can reduce the time wasted for a user a second time visiting this page within minutes.

Here is a plot to show the difference between a user visiting the BookHistory page 20 times without using cache and using cache . It spends nearly the same time as the user first visits the page, but using cache reduces a lot of time for the later visiting.To activate this cache, you can go to hbsproject\hbsproject\settings.py and change the path here.

‘LOCATION’: ‘D:\django_caches’

Engineering challenges here: Getting data from a database needs some time. The way to solve it is using cache to reduce the average time. It also does not occupy too much memory because after some time, it will automatically delete the cache data.

Testing

We included three types of testing in our project which included unit testing, auto testing and fuzzing tests.

Unit Testing

We wrote unit tests in the tests.py file in the Django “hbsApp”. These unit tests are written to check whether the urls are redirected to the right pages as required and defined in the urls.py file. We even wrote tests to check for the register, login and index pages.

Testing Challenge: We were all new to unit testing so learnt more about them from the lessons in class and referred to online sources.

Auto Testing

Method : UI Testing

Tools : Selenium

It will help us test the web’s Performance

• login :
  • input : user email, user password
  • output : True/False
  • Testcase:
    • correct login account
    • login without user email (missing information)
    • login with non-exist user email
    • login with wrong password
• register :
  • input : user id, user password, check password
  • output : True/False
  • Testcase:
    • correct register account
• destination search:
  • input : destination, number of rooms, number of guests, check in date, check out date
  • output : HotelList page
  • Testcase:
    • valid destination
    • invalid destination
• book a room :
  • after user book a room, the booking history should display user’s booking
  • Next page :input : pre, next or go to button with key in page number
  • output : go to the destination page
  • Testcase:
    • next button, go to next page
    • key in 10000 and go to, result in no hotel available

Here we also apply the fuzz testing. To give some random input.

Testing challenges: We are not familiar with using the fuzz testing tools. So we directly generate the random input by ourselves using python

Database

Register

Upon registration by keying in the required information, this user information is saved into the in-built sqlite database in Django. Using the User authentication system in the Django framework, the login feature can compare the information entered by the user to the information saved into the database when the user registers for the first time.

Booking detail

When users created a booking, they would be required to fill in a form with their personal information as well as the payment details. This info would then be stored in MongoDB, where Personal Identifiable Information (PII) such as email address, credit card number, etc. would be encrypted to protect user privacy, which is also a requirement by Ascenda. The database entry can also be deleted by the users themselves through the additional “Delete Booking” feature we implemented.

Further improvements

Due to the limited time provided and the gaps in our knowledge, there is still room for further improvement and future features.

1. Searching Speed: speed is essential for a ecommerce website like this, up till now the destination search still takes a few second and this can be shorten by applying better searching algorithm in the future
2. Security: We have implemented security features to protect user’s payment privacy, further implementations like registration verification or double verification can be applied to protect the system from rogue programs.
3. Additional Features:
   1. Membership Function: Member user can find the lowest price room in the destination
   2. User Comments Page: To get user’s feedback on
      1. The reason why do they want to cancel the booking
      2. User experience for our future improvement
   3. Filter method : People can filter the hotel list based on their requirements like price, rating, some facilities and so on.