ASP.NET MVC Hotel Booking System Using AngularJS

Introduction

In this article, we will learn how to create a simple web based Hotel Room Booking System, using MVC, AngularJS, and Web API.

What is SHANU Hotel Booking?

SHANU Hotel Booking is a web based simple Hotel Room Booking System. Users can add their hotel room details and block rooms for booked dates. SHANU Hotel Booking has two modules.

1. Room Status (Dashboard)
2. Room/Booking CRUD (Add Room and Manage Bookings)

Room Status

This is the main dashboard module. Users can view all the free/occupied and reserved rooms' Information on dashboard page. This module will help users to easily view the available free rooms. The available rooms will be in green color and occupied rooms will be in red color, and the reserved rooms will be in yellow color. This color difference is useful for users to see which rooms are free, which are occupied, and which are reserved.



In this dashboard page, along with Room Number and Status, we can also see the details like payment status as Paid or Not Paid, advance amount paid, total amount paid, and Booking dates.

Room/Booking CRUD (Add Room and Manage Bookings)



In this module, we will manage room and room booking information.

Room Details



Here, a user can add room details like Room Number, Type, and Price.

Room/Booking CRUD



This is our main part where the user will be booking rooms for the visitors. Here, we select room no., booking dates, status ( Free, Occupied, or Reserved), payment type ( Paid, Not Paid, or Advance Paid), Advance amount paid, and Total amount paid. We can also edit and delete the booking details.

Prerequisites

• Visual Studio 2015: You can download it from here.

Create Database and Table

1. Create Database and Table
   
   The following is the script to create a database, table, and sample insert query. Run this script in your SQL Server. I have used SQL Server 2014.
   

   -- =============================================
   -- Author : Shanu
   -- Create date : 2016-10-20
   -- Description : To Create Database
   
   -- =============================================
   --Script to create DB,Table and sample Insert data
   USE MASTER;
   -- 1) Check for the Database Exists .If the database is exist then drop and create new DB
   IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'HotelDB' )
   BEGIN
   ALTER DATABASE HotelDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE
   DROP DATABASE HotelDB ;
   END
   
   
   CREATE DATABASE HotelDB
   GO
   
   USE HotelDB
   GO
   
   IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'HotelMaster' )
   DROP TABLE HotelMaster
   GO
   
   CREATE TABLE HotelMaster
   (
   RoomID int identity(1,1),
   RoomNo VARCHAR(100) NOT NULL ,
   RoomType VARCHAR(100) NOT NULL ,
   Prize VARCHAR(100) NOT NULL
   CONSTRAINT [PK_HotelMaster] PRIMARY KEY CLUSTERED
   (
   RoomID ASC
   
   )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
   ) ON [PRIMARY]
   
   Insert into HotelMaster(RoomNo,RoomType,Prize) Values('101','Single','50$')
   Insert into HotelMaster(RoomNo,RoomType,Prize) Values('102','Double','80$')
   
   select * from HotelMaster
   
   
   IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'RoomBooking' )
   DROP TABLE RoomBooking
   GO
   
   CREATE TABLE RoomBooking
   (
   BookingID int identity(1,1),
   RoomID int ,
   BookedDateFR VARCHAR(20) NOT NULL ,
   BookedDateTO VARCHAR(20) NOT NULL ,
   BookingStatus VARCHAR(100) NOT NULL,
   PaymentStatus VARCHAR(100) NOT NULL,
   AdvancePayed VARCHAR(100) NOT NULL,
   TotalAmountPayed VARCHAR(100) NOT NULL,
   CONSTRAINT [PK_RoomBooking] PRIMARY KEY CLUSTERED
   (
   [BookingID] ASC
   
   )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
   ) ON [PRIMARY]
   
   select * from RoomBooking

   Stored Procedure
   
   Run all these procedures one by one in your SQL Server.
   
   SP to select all records of Hotel Room -
   

   USE HotelDB
   GO
   
   -- =============================================
   -- To Select all Hotels
   -- EXEC USP_HotelMaster_Select ''
   -- =============================================
   CREATE PROCEDURE [dbo].[USP_HotelMaster_Select]
   (
   @RoomNo VARCHAR(100) = ''
   )
   AS
   BEGIN
   SELECT RoomID,RoomNo , RoomType,Prize
   FROM HotelMaster
   WHERE
   RoomNo like @RoomNo +'%'
   Order By RoomNo
   END

   SP to insert Hotel Room Details.
   

   USE HotelDB
   GO
   
   -- To insert
   -- EXEC [USP_Hotel_Insert] ''
   -- =============================================
   CREATE PROCEDURE [dbo].[USP_Hotel_Insert]
   (
   @RoomNo VARCHAR(100) = '',
   @RoomType VARCHAR(100) = '',
   @Prize VARCHAR(100) = ''
   )
   AS
   BEGIN
   IF NOT EXISTS (SELECT * FROM HotelMaster WHERE RoomNo=@RoomNo)
   BEGIN
   
   INSERT INTO HotelMaster (RoomNo,RoomType,Prize)
   VALUES (@RoomNo,@RoomType,@Prize)
   
   Select 'Inserted' as results
   
   END
   ELSE
   BEGIN
   Select 'Exists' as results
   END
   
   END

   SP to select all the records of Room Booking Details
   

   -- =============================================
   -- To Select all RoomBooking
   -- EXEC USP_RoomBooking_SelectALL ''
   -- =============================================
   CREATE PROCEDURE [dbo].[USP_RoomBooking_SelectALL]
   (
   @RoomID VARCHAR(100) = ''
   )
   AS
   BEGIN
   SELECT A.RoomNo,
   B.BookingID,
   B.RoomID ,
   B.BookedDateFR,
   B.BookedDateTO,
   B.BookingStatus ,
   B.PaymentStatus,
   B.AdvancePayed,
   B.TotalAmountPayed
   FROM HotelMaster A
   Inner join RoomBooking B
   ON A.RoomID=B.RoomID
   WHERE
   A.RoomID like @RoomID +'%'
   
   END

   SP to Insert/Update Room Booking Details.
   

   -- To insert
   -- EXEC USP_RoomBooking_Insert ''
   -- =============================================
   CREATE PROCEDURE [dbo].[USP_RoomBooking_Insert]
   (
   @BookingID VARCHAR(100) = '',
   @RoomID VARCHAR(100) = '',
   @BookedDateFR VARCHAR(100) = '',
   @BookedDateTO VARCHAR(100) = '',
   @BookingStatus VARCHAR(100) = '',
   @PaymentStatus VARCHAR(100) = '',
   @AdvancePayed VARCHAR(100) = '',
   @TotalAmountPayed VARCHAR(100) = ''
   )
   AS
   BEGIN
   IF NOT EXISTS (SELECT * FROM RoomBooking WHERE RoomID=@RoomID )
   BEGIN
   
   INSERT INTO RoomBooking
   (RoomID , BookedDateFR, BookedDateTO, BookingStatus , PaymentStatus, AdvancePayed, TotalAmountPayed )
   VALUES
   ( @RoomID , @BookedDateFR, @BookedDateTO, @BookingStatus , @PaymentStatus, @AdvancePayed, @TotalAmountPayed )
   
   Select 'Inserted' as results
   
   END
   ELSE
   BEGIN
   UPDATE RoomBooking
   SET BookedDateFR = @BookedDateFR ,
   BookedDateTO = @BookedDateTO,
   BookingStatus = @BookingStatus,
   PaymentStatus = @PaymentStatus,
   AdvancePayed = @AdvancePayed,
   TotalAmountPayed = @TotalAmountPayed
   WHERE
   RoomID = @RoomID
   
   Select 'Updated' as results
   
   END
   END

   SP to Delete Booked Detail.
   

   -- =============================================
   -- To Select all user roles
   -- EXEC USP_RoomBooking_Delete ''
   -- =============================================
   Create PROCEDURE [dbo].[USP_RoomBooking_Delete]
   (
   @BookingID VARCHAR(20) = ''
   )
   AS
   BEGIN
   Delete from RoomBooking WHERE BookingID = @BookingID
   Select 'Deleted' as results
   END

   SP to Select all Booked Room details to be displayed on the dashboard .
   

   -- =============================================
   -- To Select all Hotels
   -- EXEC USP_HotelStatus_Select ''
   -- =============================================
   Create PROCEDURE [dbo].[USP_HotelStatus_Select]
   (
   @RoomNo VARCHAR(100) = ''
   )
   AS
   BEGIN
   SELECT A.RoomNo,
   ISNULL(B.BookedDateFR, '' ) as BookedDateFR,
   ISNULL(B.BookedDateTO, '' ) as BookedDateTO,
   ISNULL(B.BookingStatus, 'Free' ) as BookingStatus,
   ISNULL(B.PaymentStatus, '' ) as PaymentStatus,
   ISNULL(B.AdvancePayed, '0' ) as AdvancePayed,
   ISNULL(B.TotalAmountPayed, '0$' ) as TotalAmountPayed
   FROM HotelMaster A
   Left Outer join RoomBooking B
   ON A.RoomNo=B.RoomID
   Order By A.RoomNo
   END

2. Create your MVC Web Application in Visual Studio 2015
   
   After installing Visual Studio 2015, click Start >> Programs >> Visual Studio 2015. Click New >> Project >> Web, and then select ASP.NET Web Application. Enter your project name and click OK.
   
   
   
   Select MVC, WEB API and click OK.

Add Database using ADO.NET Entity Data Model

Right click your project and click Add >> New Item. Select Data >> ADO.NET Entity Data Model, give the name for your EF and click Add.



Select "EF Designer from database" and click Next.



Click on New Connection to connect to the SQL Server database.



When connected to the database, click Next to select the Tables and Stored Procedure for Menu management.



Now, select all the tables and Stored procedure details and click Finish.



Procedure to add our Web API Controller

Right-click the Controllers folder, click Add and then click Controller.



Select Web API 2 Controller – Empty, click add and give name for our WEB API controller.



Working with WEBAPI Controller for CRUD

Select Controller and add an Empty Web API 2 Controller. Provide your name to the Web API controller and click OK. Here, for our Web API Controller, we have given the name “HotelAPIController ".

As we have created Web API controller, we can see that the controller has been inherited with ApiController.

We already know, Web API is a simple and easy way to build HTTP Services for Browsers and Mobiles. It has the following four methods as Get/Post/Put and Delete where.

• Get is used to request for the data. (Select)
• Post is used to create a data. (Insert)
• Put is used to update the data.
• Delete used is to delete the data.

Get Method

In our example, I have used only one Get method since I am using only one Stored Procedure. We need to create an object for our Entity and write our Get Method to do the Select/Insert/Update and Delete operations.

Select Operation

We use a get method to get all the details of the both Room and Room Booking tables, using an entity object that returns the result as IEnumerable. We use this method in AngularJS and display the result in an MVC page from the AngularJS controller. Using ng-Repeat, we can bind the details.

Here, we can see in the getHotelRooms method, we have passed the search parameter to the USP_HotelMaster_Select Stored Procedure. In the Stored Procedure, we used like "%" to return all the records if the search parameter is empty.

// To select Hotel Details
[HttpGet]
public IEnumerable < USP_HotelMaster_Select_Result > getHotelRooms(string RoomNo)
{
    if (RoomNo == null) RoomNo = "";
    return objapi.USP_HotelMaster_Select(RoomNo).AsEnumerable();
}

Insert Operation

The same as select, we passed all the parameters to the insert procedure. This insert method will return the result from the database as a record is inserted or not. We will get the result and display it from the AngularJS Controller to MVC application.

// To insert Hotel Room Details
[HttpGet]
public IEnumerable < string > insertHotelRoom(string RoomNo, string RoomType, string Prize) {
    if (RoomNo == null) RoomNo = "";
    if (RoomType == null) RoomType = "";
    if (Prize == null) Prize = "";
    return objapi.USP_Hotel_Insert(RoomNo, RoomType, Prize).AsEnumerable();
}

Same like Hotel Room, we will be using the methods for Room Booking Details to perform our CRUD operations. Here is the code for Select, Insert, Update, and Delete.

// to Search all Room Booking Details
[HttpGet]
public IEnumerable < USP_RoomBooking_SelectALL_Result > getRoomBookingDetails(string RoomID) {
        if (RoomID == null) RoomID = "";
        return objapi.USP_RoomBooking_SelectALL(RoomID).AsEnumerable();
    }
    // to Search all Room Dashbard Details
    [HttpGet]
public IEnumerable < USP_HotelStatus_Select_Result > getRoomDashboardDetails(string RoomNo) {
        if (RoomNo == null) RoomNo = "";
        return objapi.USP_HotelStatus_Select(RoomNo).AsEnumerable();
    }
    // To Insert /Update Room Booking
    [HttpGet]
public IEnumerable < string > insertRoomBooking(string BookingID, string RoomID, string BookedDateFR, string BookedDateTO, string BookingStatus, string PaymentStatus, string AdvancePayed, string TotalAmountPayed) {
        if (BookingID == null) BookingID = "0";
        if (RoomID == null) RoomID = "0";
        if (BookedDateFR == null) {
            BookedDateFR = "";
        } else {
            BookedDateFR = BookedDateFR.Substring(0, 10);
        }
        if (BookedDateTO == null) {
            BookedDateTO = "";
        } else {
            BookedDateTO = BookedDateTO.Substring(0, 10);
        }
        if (BookingStatus == null) BookingStatus = "";
        if (PaymentStatus == null) PaymentStatus = "";
        if (AdvancePayed == null) AdvancePayed = "";
        if (TotalAmountPayed == null) TotalAmountPayed = "";
        return objapi.USP_RoomBooking_Insert(BookingID, RoomID, BookedDateFR, BookedDateTO, BookingStatus, PaymentStatus, AdvancePayed, TotalAmountPayed).AsEnumerable();
    }
    // To Delete Music Details
    [HttpGet]
public IEnumerable < string > deleteROom(string BookingID) {
    if (BookingID == null) BookingID = "0";
    return objapi.USP_RoomBooking_Delete(BookingID).AsEnumerable();
}

Next, we will create our Angular Controller and View page to perform our CRUD operations to manage both Hotel Room and Room Booking.

Room/Room Booking CRUD



Creating AngularJS Controller

First, create a folder inside the Scripts folder and give it a name as “MyAngular”.



Now, add your Angular Controller inside the folder.

Right click the MyAngular folder and click Add >> New Item. Select Web and then AngularJS Controller and provide a name for the Controller. I have named my AngularJS Controller “Controller.js”.



Once the AngularJS Controller is created, we can see that the controller will have the code with the default module definition and all.

If the AngularJS package is missing, then add the package to your project. Right click your MVC project and click "Manage NuGet Packages".



Search for AngularJS and click Install.



Procedure to Create AngularJS Script Files

Modules.js: Here, we will add the reference to the AngularJS JavaScript and create an Angular Module named “AngularJs_Module”.

// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("AngularJs_Module", ['ngAnimate']);
})();

Controllers

In AngularJS Controller, I have done all the business logic and returned the data from Web API to our MVC HTML page. 

1. Variable declarations
   
   Firstly, we declared all the local variables needed to be used.
   

   app.controller("AngularJs_Controller", function($scope, $timeout, $rootScope, $window, $http) {
               $scope.date = new Date();
               $scope.MyName = "shanu";
               // For Hotel Room Details
               $scope.RoomID = 0;
               $scope.RoomNo = "";
               $scope.RoomType = "";
               $scope.Prize = "";
               // For Hotel Room Bookin Details
               $scope.BookingID = 0;
               $scope.RoomIDs = "";
               $scope.BookedDateFR = $scope.date;
               $scope.BookedDateTO = $scope.date;
               $scope.BookingStatus = "";
               $scope.PaymentStatus = "";
               $scope.AdvancePayed = "0$";
               $scope.TotalAmountPayed = "0$";

2. Methods
   
   Select Method
   
   In the select method, we have used $http.get to get the details of both, Room and Room Booking and Room Status to display on dashboard from Web API. In the Get method, we provide our API Controller name and method to get the details.
   
   The final result will be displayed to the MVC HTML page, using data-ng-repeat.
   

   // This method is to get all the Room Details.
   selectRoomDetails('');
   selectRoomBookingDetails('');
   selectAvailableStatus('');
   
   function selectRoomDetails(RoomNo) {
       $http.get('/api/HotelAPI/getHotelRooms/', {
           params: {
               RoomNo: RoomNo
           }
       }).success(function(data) {
           $scope.HotelRoomData = data;
           if ($scope.HotelRoomData.length > 0) {}
       }).error(function() {
           $scope.error = "An Error has occured while loading posts!";
       });
   }
   
   function selectRoomBookingDetails(RoomID) {
       $http.get('/api/HotelAPI/getRoomBookingDetails/', {
           params: {
               RoomID: RoomID
           }
       }).success(function(data) {
           $scope.RoomBookingData = data;
           if ($scope.RoomBookingData.length > 0) {}
       }).error(function() {
           $scope.error = "An Error has occured while loading posts!";
       });
   }
   
   function selectAvailableStatus(RoomNo) {
       $http.get('/api/HotelAPI/getRoomDashboardDetails/', {
           params: {
               RoomNo: RoomNo
           }
       }).success(function(data) {
           $scope.RoomAvailableData = data;
           if ($scope.RoomAvailableData.length > 0) {}
       }).error(function() {
           $scope.error = "An Error has occured while loading posts!";
       });
   }

   Insert Room Detail
   
   In this method, we pass all the user input room details to be inserted in the database .
   

   //Save Hotel Room
   $scope.saveRoom = function() {
       $scope.IsFormSubmitted2 = true;
       $scope.Message = "";
       if ($scope.IsFormValid2 = false) {
           $http.get('/api/HotelAPI/insertHotelRoom/', {
               params: {
                   RoomNo: $scope.RoomNo,
                   RoomType: $scope.RoomType,
                   Prize: $scope.Prize
               }
           }).success(function(data) {
               $scope.roomInserted = data;
               alert($scope.roomInserted);
               cleardetails();
               selectRoomDetails('');
           }).error(function() {
               $scope.error = "An Error has occured while loading posts!";
           });
       } else {
           $scope.Message = "All the fields are required.";
       }
   };

   Here is the AngularJS Controller code part to perform our Room Booking CRUD operation.
   

   //Edit RoomBooking edit Details
   $scope.roomBookingEdit = function roomBookingEdit(BookingID, RoomID, BookedDateFR, BookedDateTO, BookingStatus, PaymentStatus, AdvancePayed, TotalAmountPayed) {
           cleardetails();
           $scope.IsFormValid = true;
           $scope.showEditMusics = true;
           $scope.BookingID = BookingID;
           $scope.RoomIDs = RoomID;
           $scope.BookedDateFR = BookedDateFR;
           $scope.BookedDateTO = BookedDateTO;
           $scope.BookingStatus = BookingStatus;
           $scope.PaymentStatus = PaymentStatus;
           $scope.AdvancePayed = AdvancePayed;
           $scope.TotalAmountPayed = TotalAmountPayed;
       }
       //Delete RoomBooking Selete Detail
   $scope.roomBookingDelete = function roomBookingDelete(BookingID) {
           cleardetails();
           $scope.BookingID = BookingID;
           var delConfirm = confirm("Are you sure you want to delete the Room Booking Data ?");
           if (delConfirm == true) {
               $http.get('/api/HotelAPI/deleteROom/', {
                   params: {
                       BookingID: $scope.BookingID
                   }
               }).success(function(data) {
                   alert("Room Booking Detail Deleted Successfully!!");
                   cleardetails();
                   selectRoomBookingDetails('');
               }).error(function() {
                   $scope.error = "An Error has occured while loading posts!";
               });
           }
       }
       //Form Validation
   $scope.$watch("f1.$valid", function(isValid) {
       $scope.IsFormValid = isValid;
   });
   //Save Room Booking
   $scope.saveroomBooking = function() {
       $scope.IsFormSubmitted = true;
       $scope.Message = "";
       if ($scope.IsFormValid) {
           $http.get('/api/HotelAPI/insertRoomBooking/', {
               params: {
                   BookingID: $scope.BookingID,
                   RoomID: $scope.RoomIDs,
                   BookedDateFR: $scope.BookedDateFR,
                   BookedDateTO: $scope.BookedDateTO,
                   BookingStatus: $scope.BookingStatus,
                   PaymentStatus: $scope.PaymentStatus,
                   AdvancePayed: $scope.AdvancePayed,
                   TotalAmountPayed: $scope.TotalAmountPayed
               }
           }).success(function(data) {
               $scope.bookingInserted = data;
               alert($scope.bookingInserted);
               cleardetails();
               selectRoomBookingDetails('');
           }).error(function() {
               $scope.error = "An Error has occured while loading posts!";
           });
       } else {
           $scope.Message = "All the fields are required.";
       }
   };

Room Status Dashboard Module

This is our main module where user can check all room status as Free/Occupied or reserved with all details.



Here, we have created one more AngularJS Controller and named it as HomeController. In this controller, we will get the details of albums and music to play our songs.

On the homepage, we display only 4 Room Status details in one row. To fix the 4 column, first in home page index view page, we add this css style.

.columns {
columns: 4;
}

In dashboard, we display the room details depending on their status.

We have used 3 statuses for rooms.

1. Free (We use Green Color for Free Rooms)
2. Occupied (We use Red Color for Occupied Rooms)
3. Reserved (We use Yellow Color for Reserved Rooms)

In our dashboard View page, we need to add this style to change the color depending on the status.

<style>
    .actualColor {
        background-color: #64a449;
        color: #FFFFFF;
        border: solid 1px #659EC7;
        font-size: x-large;
    }

    .changeColor1 {
        background-color: #e81a1a;
        color: #FFFFFF;
        border: solid 1px #659EC7;
        font-size: x-large;
        cursor: pointer;
    }

    .changeColor2 {
        background-color: #fbe700;
        color: #be1010;
        border: dashed 1px #659EC7;
        font-size: x-large;
        cursor: pointer;
    }

    .columns {
        columns: 4;
    }
</style>

In html part, we have to use this style in div tag to display 4 columns per row with Background color depend on the room status.

<div class="columns">
    <div ng-repeat="details in RoomAvailableData">
        <table style='width: 99%;table-layout:fixed;'>
            <tr ng-class="{actualColor: details.BookingStatus == 'Free', changeColor1: details.BookingStatus == 'Occupied', changeColor2: details.BookingStatus == 'Reserved'}">
                <td align="center">
                    <table style='width: 99%;table-layout:fixed;'>
                        <tr>
                            <td> </td>
                        </tr>
                        <tr>
                            <td align="center"> <b>Room NO : {{details.RoomNo}}</b> </td>
                        </tr>
                        <tr>
                            <td align="center"> <b>Status : {{details.BookingStatus}}</b> </td>
                        </tr>
                        <tr>
                            <td align="center"> <span style="font-size:medium">
 Payment Status :<b> {{details.PaymentStatus}}</b>
 </span> </td>
                        </tr>
                        <tr>
                            <td align="center"> <span style="font-size:medium">
 Advance Paid :<b> {{details.AdvancePayed}}</b>
 </span> </td>
                        </tr>
                        <tr>
                            <td align="center"> <span style="font-size:medium">
 Total Amount Paid : <b>{{details.TotalAmountPayed}}</b>
 </span> </td>
                        </tr>
                        <tr>
                            <td align="center"> <span style="font-size:small">
 Booked From : {{details.BookedDateFR}} ~ {{details.BookedDateTO}}
 </span> </td>
                        </tr>
                        <tr>
                            <td> </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table </div>
    </div>

Conclusion

I hope you all liked this Shanu Hotel Room Booking web based system.

This is a simple web based Hotel Room Booking developed using MVC and AngularJS. This application can be extended to add more features as per your requirement.