Post
Ask Question

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.
    1. -- =============================================   
    2. -- Author : Shanu   
    3. -- Create date : 2016-10-20   
    4. -- Description : To Create Database   
    5.   
    6. -- =============================================   
    7. --Script to create DB,Table and sample Insert data   
    8. USE MASTER;   
    9. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB   
    10. IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'HotelDB' )   
    11. BEGIN   
    12. ALTER DATABASE HotelDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE   
    13. DROP DATABASE HotelDB ;   
    14. END   
    15.   
    16.   
    17. CREATE DATABASE HotelDB   
    18. GO   
    19.   
    20. USE HotelDB   
    21. GO   
    22.   
    23. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'HotelMaster' )   
    24. DROP TABLE HotelMaster   
    25. GO   
    26.   
    27. CREATE TABLE HotelMaster   
    28. (   
    29. RoomID int identity(1,1),   
    30. RoomNo VARCHAR(100) NOT NULL ,   
    31. RoomType VARCHAR(100) NOT NULL ,   
    32. Prize VARCHAR(100) NOT NULL   
    33. CONSTRAINT [PK_HotelMaster] PRIMARY KEY CLUSTERED   
    34. (   
    35. RoomID ASC   
    36.   
    37. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]   
    38. ) ON [PRIMARY]   
    39.   
    40. Insert into HotelMaster(RoomNo,RoomType,Prize) Values('101','Single','50$')   
    41. Insert into HotelMaster(RoomNo,RoomType,Prize) Values('102','Double','80$')   
    42.   
    43. select * from HotelMaster   
    44.   
    45.   
    46. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'RoomBooking' )   
    47. DROP TABLE RoomBooking   
    48. GO   
    49.   
    50. CREATE TABLE RoomBooking   
    51. (   
    52. BookingID int identity(1,1),   
    53. RoomID int ,   
    54. BookedDateFR VARCHAR(20) NOT NULL ,   
    55. BookedDateTO VARCHAR(20) NOT NULL ,   
    56. BookingStatus VARCHAR(100) NOT NULL,   
    57. PaymentStatus VARCHAR(100) NOT NULL,   
    58. AdvancePayed VARCHAR(100) NOT NULL,   
    59. TotalAmountPayed VARCHAR(100) NOT NULL,   
    60. CONSTRAINT [PK_RoomBooking] PRIMARY KEY CLUSTERED   
    61. (   
    62. [BookingID] ASC   
    63.   
    64. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]   
    65. ) ON [PRIMARY]   
    66.   
    67. select * from RoomBooking   
    Stored Procedure

    Run all these procedures one by one in your SQL Server.

    SP to select all records of Hotel Room -
    1. USE HotelDB   
    2. GO   
    3.   
    4. -- =============================================   
    5. -- To Select all Hotels   
    6. -- EXEC USP_HotelMaster_Select ''   
    7. -- =============================================   
    8. CREATE PROCEDURE [dbo].[USP_HotelMaster_Select]   
    9. (   
    10. @RoomNo VARCHAR(100) = ''   
    11. )   
    12. AS   
    13. BEGIN   
    14. SELECT RoomID,RoomNo , RoomType,Prize   
    15. FROM HotelMaster   
    16. WHERE   
    17. RoomNo like @RoomNo +'%'   
    18. Order By RoomNo   
    19. END   
    SP to insert Hotel Room Details.
    1. USE HotelDB   
    2. GO   
    3.   
    4. -- To insert   
    5. -- EXEC [USP_Hotel_Insert] ''   
    6. -- =============================================   
    7. CREATE PROCEDURE [dbo].[USP_Hotel_Insert]   
    8. (   
    9. @RoomNo VARCHAR(100) = '',   
    10. @RoomType VARCHAR(100) = '',   
    11. @Prize VARCHAR(100) = ''   
    12. )   
    13. AS   
    14. BEGIN   
    15. IF NOT EXISTS (SELECT * FROM HotelMaster WHERE RoomNo=@RoomNo)   
    16. BEGIN   
    17.   
    18. INSERT INTO HotelMaster (RoomNo,RoomType,Prize)   
    19. VALUES (@RoomNo,@RoomType,@Prize)   
    20.   
    21. Select 'Inserted' as results   
    22.   
    23. END   
    24. ELSE   
    25. BEGIN   
    26. Select 'Exists' as results   
    27. END   
    28.   
    29. END   
    SP to select all the records of Room Booking Details
    1. -- =============================================   
    2. -- To Select all RoomBooking   
    3. -- EXEC USP_RoomBooking_SelectALL ''   
    4. -- =============================================   
    5. CREATE PROCEDURE [dbo].[USP_RoomBooking_SelectALL]   
    6. (   
    7. @RoomID VARCHAR(100) = ''   
    8. )   
    9. AS   
    10. BEGIN   
    11. SELECT A.RoomNo,   
    12. B.BookingID,   
    13. B.RoomID ,   
    14. B.BookedDateFR,   
    15. B.BookedDateTO,   
    16. B.BookingStatus ,   
    17. B.PaymentStatus,   
    18. B.AdvancePayed,   
    19. B.TotalAmountPayed   
    20. FROM HotelMaster A   
    21. Inner join RoomBooking B   
    22. ON A.RoomID=B.RoomID   
    23. WHERE   
    24. A.RoomID like @RoomID +'%'   
    25.   
    26. END  
    SP to Insert/Update Room Booking Details.
    1. -- To insert   
    2. -- EXEC USP_RoomBooking_Insert ''   
    3. -- =============================================   
    4. CREATE PROCEDURE [dbo].[USP_RoomBooking_Insert]   
    5. (   
    6. @BookingID VARCHAR(100) = '',   
    7. @RoomID VARCHAR(100) = '',   
    8. @BookedDateFR VARCHAR(100) = '',   
    9. @BookedDateTO VARCHAR(100) = '',   
    10. @BookingStatus VARCHAR(100) = '',   
    11. @PaymentStatus VARCHAR(100) = '',   
    12. @AdvancePayed VARCHAR(100) = '',   
    13. @TotalAmountPayed VARCHAR(100) = ''   
    14. )   
    15. AS   
    16. BEGIN   
    17. IF NOT EXISTS (SELECT * FROM RoomBooking WHERE RoomID=@RoomID )   
    18. BEGIN   
    19.   
    20. INSERT INTO RoomBooking   
    21. (RoomID , BookedDateFR, BookedDateTO, BookingStatus , PaymentStatus, AdvancePayed, TotalAmountPayed )   
    22. VALUES   
    23. ( @RoomID , @BookedDateFR, @BookedDateTO, @BookingStatus , @PaymentStatus, @AdvancePayed, @TotalAmountPayed )   
    24.   
    25. Select 'Inserted' as results   
    26.   
    27. END   
    28. ELSE   
    29. BEGIN   
    30. UPDATE RoomBooking   
    31. SET BookedDateFR = @BookedDateFR ,   
    32. BookedDateTO = @BookedDateTO,   
    33. BookingStatus = @BookingStatus,   
    34. PaymentStatus = @PaymentStatus,   
    35. AdvancePayed = @AdvancePayed,   
    36. TotalAmountPayed = @TotalAmountPayed   
    37. WHERE   
    38. RoomID = @RoomID   
    39.   
    40. Select 'Updated' as results   
    41.   
    42. END   
    43. END   
    SP to Delete Booked Detail.
    1. -- =============================================   
    2. -- To Select all user roles   
    3. -- EXEC USP_RoomBooking_Delete ''   
    4. -- =============================================   
    5. Create PROCEDURE [dbo].[USP_RoomBooking_Delete]   
    6. (   
    7. @BookingID VARCHAR(20) = ''   
    8. )   
    9. AS   
    10. BEGIN   
    11. Delete from RoomBooking WHERE BookingID = @BookingID   
    12. Select 'Deleted' as results   
    13. END   
    SP to Select all Booked Room details to be displayed on the dashboard .
    1. -- =============================================   
    2. -- To Select all Hotels   
    3. -- EXEC USP_HotelStatus_Select ''   
    4. -- =============================================   
    5. Create PROCEDURE [dbo].[USP_HotelStatus_Select]   
    6. (   
    7. @RoomNo VARCHAR(100) = ''   
    8. )   
    9. AS   
    10. BEGIN   
    11. SELECT A.RoomNo,   
    12. ISNULL(B.BookedDateFR, '' ) as BookedDateFR,   
    13. ISNULL(B.BookedDateTO, '' ) as BookedDateTO,   
    14. ISNULL(B.BookingStatus, 'Free' ) as BookingStatus,   
    15. ISNULL(B.PaymentStatus, '' ) as PaymentStatus,   
    16. ISNULL(B.AdvancePayed, '0' ) as AdvancePayed,   
    17. ISNULL(B.TotalAmountPayed, '0$' ) as TotalAmountPayed   
    18. FROM HotelMaster A   
    19. Left Outer join RoomBooking B   
    20. ON A.RoomNo=B.RoomID   
    21. Order By A.RoomNo   
    22. 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.

  1. // To select Hotel Details   
  2. [HttpGet]  
  3. public IEnumerable < USP_HotelMaster_Select_Result > getHotelRooms(string RoomNo)   
  4. {  
  5.     if (RoomNo == null) RoomNo = "";  
  6.     return objapi.USP_HotelMaster_Select(RoomNo).AsEnumerable();  
  7. }  
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.
  1. // To insert Hotel Room Details   
  2. [HttpGet]  
  3. public IEnumerable < string > insertHotelRoom(string RoomNo, string RoomType, string Prize) {  
  4.     if (RoomNo == null) RoomNo = "";  
  5.     if (RoomType == null) RoomType = "";  
  6.     if (Prize == null) Prize = "";  
  7.     return objapi.USP_Hotel_Insert(RoomNo, RoomType, Prize).AsEnumerable();  
  8. }  
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.
  1. // to Search all Room Booking Details   
  2. [HttpGet]  
  3. public IEnumerable < USP_RoomBooking_SelectALL_Result > getRoomBookingDetails(string RoomID) {  
  4.         if (RoomID == null) RoomID = "";  
  5.         return objapi.USP_RoomBooking_SelectALL(RoomID).AsEnumerable();  
  6.     }  
  7.     // to Search all Room Dashbard Details   
  8.     [HttpGet]  
  9. public IEnumerable < USP_HotelStatus_Select_Result > getRoomDashboardDetails(string RoomNo) {  
  10.         if (RoomNo == null) RoomNo = "";  
  11.         return objapi.USP_HotelStatus_Select(RoomNo).AsEnumerable();  
  12.     }  
  13.     // To Insert /Update Room Booking   
  14.     [HttpGet]  
  15. public IEnumerable < string > insertRoomBooking(string BookingID, string RoomID, string BookedDateFR, string BookedDateTO, string BookingStatus, string PaymentStatus, string AdvancePayed, string TotalAmountPayed) {  
  16.         if (BookingID == null) BookingID = "0";  
  17.         if (RoomID == null) RoomID = "0";  
  18.         if (BookedDateFR == null) {  
  19.             BookedDateFR = "";  
  20.         } else {  
  21.             BookedDateFR = BookedDateFR.Substring(0, 10);  
  22.         }  
  23.         if (BookedDateTO == null) {  
  24.             BookedDateTO = "";  
  25.         } else {  
  26.             BookedDateTO = BookedDateTO.Substring(0, 10);  
  27.         }  
  28.         if (BookingStatus == null) BookingStatus = "";  
  29.         if (PaymentStatus == null) PaymentStatus = "";  
  30.         if (AdvancePayed == null) AdvancePayed = "";  
  31.         if (TotalAmountPayed == null) TotalAmountPayed = "";  
  32.         return objapi.USP_RoomBooking_Insert(BookingID, RoomID, BookedDateFR, BookedDateTO, BookingStatus, PaymentStatus, AdvancePayed, TotalAmountPayed).AsEnumerable();  
  33.     }  
  34.     // To Delete Music Details   
  35.     [HttpGet]  
  36. public IEnumerable < string > deleteROom(string BookingID) {  
  37.     if (BookingID == null) BookingID = "0";  
  38.     return objapi.USP_RoomBooking_Delete(BookingID).AsEnumerable();  
  39. }  
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”.
  1. // <reference path="../angular.js" />   
  2. /// <reference path="../angular.min.js" />   
  3. /// <reference path="../angular-animate.js" />   
  4. /// <reference path="../angular-animate.min.js" />   
  5. var app;   
  6. (function () {   
  7. app = angular.module("AngularJs_Module", ['ngAnimate']);   
  8. })();   
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.
    1. app.controller("AngularJs_Controller", function($scope, $timeout, $rootScope, $window, $http) {  
    2.             $scope.date = new Date();  
    3.             $scope.MyName = "shanu";  
    4.             // For Hotel Room Details   
    5.             $scope.RoomID = 0;  
    6.             $scope.RoomNo = "";  
    7.             $scope.RoomType = "";  
    8.             $scope.Prize = "";  
    9.             // For Hotel Room Bookin Details   
    10.             $scope.BookingID = 0;  
    11.             $scope.RoomIDs = "";  
    12.             $scope.BookedDateFR = $scope.date;  
    13.             $scope.BookedDateTO = $scope.date;  
    14.             $scope.BookingStatus = "";  
    15.             $scope.PaymentStatus = "";  
    16.             $scope.AdvancePayed = "0$";  
    17.             $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.
    1. // This method is to get all the Room Details.   
    2. selectRoomDetails('');  
    3. selectRoomBookingDetails('');  
    4. selectAvailableStatus('');  
    5.   
    6. function selectRoomDetails(RoomNo) {  
    7.     $http.get('/api/HotelAPI/getHotelRooms/', {  
    8.         params: {  
    9.             RoomNo: RoomNo  
    10.         }  
    11.     }).success(function(data) {  
    12.         $scope.HotelRoomData = data;  
    13.         if ($scope.HotelRoomData.length > 0) {}  
    14.     }).error(function() {  
    15.         $scope.error = "An Error has occured while loading posts!";  
    16.     });  
    17. }  
    18.   
    19. function selectRoomBookingDetails(RoomID) {  
    20.     $http.get('/api/HotelAPI/getRoomBookingDetails/', {  
    21.         params: {  
    22.             RoomID: RoomID  
    23.         }  
    24.     }).success(function(data) {  
    25.         $scope.RoomBookingData = data;  
    26.         if ($scope.RoomBookingData.length > 0) {}  
    27.     }).error(function() {  
    28.         $scope.error = "An Error has occured while loading posts!";  
    29.     });  
    30. }  
    31.   
    32. function selectAvailableStatus(RoomNo) {  
    33.     $http.get('/api/HotelAPI/getRoomDashboardDetails/', {  
    34.         params: {  
    35.             RoomNo: RoomNo  
    36.         }  
    37.     }).success(function(data) {  
    38.         $scope.RoomAvailableData = data;  
    39.         if ($scope.RoomAvailableData.length > 0) {}  
    40.     }).error(function() {  
    41.         $scope.error = "An Error has occured while loading posts!";  
    42.     });  
    43. }  
    Insert Room Detail

    In this method, we pass all the user input room details to be inserted in the database .
    1. //Save Hotel Room   
    2. $scope.saveRoom = function() {  
    3.     $scope.IsFormSubmitted2 = true;  
    4.     $scope.Message = "";  
    5.     if ($scope.IsFormValid2 = false) {  
    6.         $http.get('/api/HotelAPI/insertHotelRoom/', {  
    7.             params: {  
    8.                 RoomNo: $scope.RoomNo,  
    9.                 RoomType: $scope.RoomType,  
    10.                 Prize: $scope.Prize  
    11.             }  
    12.         }).success(function(data) {  
    13.             $scope.roomInserted = data;  
    14.             alert($scope.roomInserted);  
    15.             cleardetails();  
    16.             selectRoomDetails('');  
    17.         }).error(function() {  
    18.             $scope.error = "An Error has occured while loading posts!";  
    19.         });  
    20.     } else {  
    21.         $scope.Message = "All the fields are required.";  
    22.     }  
    23. };  
    Here is the AngularJS Controller code part to perform our Room Booking CRUD operation.
    1. //Edit RoomBooking edit Details   
    2. $scope.roomBookingEdit = function roomBookingEdit(BookingID, RoomID, BookedDateFR, BookedDateTO, BookingStatus, PaymentStatus, AdvancePayed, TotalAmountPayed) {  
    3.         cleardetails();  
    4.         $scope.IsFormValid = true;  
    5.         $scope.showEditMusics = true;  
    6.         $scope.BookingID = BookingID;  
    7.         $scope.RoomIDs = RoomID;  
    8.         $scope.BookedDateFR = BookedDateFR;  
    9.         $scope.BookedDateTO = BookedDateTO;  
    10.         $scope.BookingStatus = BookingStatus;  
    11.         $scope.PaymentStatus = PaymentStatus;  
    12.         $scope.AdvancePayed = AdvancePayed;  
    13.         $scope.TotalAmountPayed = TotalAmountPayed;  
    14.     }  
    15.     //Delete RoomBooking Selete Detail   
    16. $scope.roomBookingDelete = function roomBookingDelete(BookingID) {  
    17.         cleardetails();  
    18.         $scope.BookingID = BookingID;  
    19.         var delConfirm = confirm("Are you sure you want to delete the Room Booking Data ?");  
    20.         if (delConfirm == true) {  
    21.             $http.get('/api/HotelAPI/deleteROom/', {  
    22.                 params: {  
    23.                     BookingID: $scope.BookingID  
    24.                 }  
    25.             }).success(function(data) {  
    26.                 alert("Room Booking Detail Deleted Successfully!!");  
    27.                 cleardetails();  
    28.                 selectRoomBookingDetails('');  
    29.             }).error(function() {  
    30.                 $scope.error = "An Error has occured while loading posts!";  
    31.             });  
    32.         }  
    33.     }  
    34.     //Form Validation   
    35. $scope.$watch("f1.$valid", function(isValid) {  
    36.     $scope.IsFormValid = isValid;  
    37. });  
    38. //Save Room Booking   
    39. $scope.saveroomBooking = function() {  
    40.     $scope.IsFormSubmitted = true;  
    41.     $scope.Message = "";  
    42.     if ($scope.IsFormValid) {  
    43.         $http.get('/api/HotelAPI/insertRoomBooking/', {  
    44.             params: {  
    45.                 BookingID: $scope.BookingID,  
    46.                 RoomID: $scope.RoomIDs,  
    47.                 BookedDateFR: $scope.BookedDateFR,  
    48.                 BookedDateTO: $scope.BookedDateTO,  
    49.                 BookingStatus: $scope.BookingStatus,  
    50.                 PaymentStatus: $scope.PaymentStatus,  
    51.                 AdvancePayed: $scope.AdvancePayed,  
    52.                 TotalAmountPayed: $scope.TotalAmountPayed  
    53.             }  
    54.         }).success(function(data) {  
    55.             $scope.bookingInserted = data;  
    56.             alert($scope.bookingInserted);  
    57.             cleardetails();  
    58.             selectRoomBookingDetails('');  
    59.         }).error(function() {  
    60.             $scope.error = "An Error has occured while loading posts!";  
    61.         });  
    62.     } else {  
    63.         $scope.Message = "All the fields are required.";  
    64.     }  
    65. };  

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.

  1. .columns {   
  2. columns: 4;   
  3. }   
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.

  1. <style>  
  2.     .actualColor {  
  3.         background-color: #64a449;  
  4.         color: #FFFFFF;  
  5.         border: solid 1px #659EC7;  
  6.         font-size: x-large;  
  7.     }  
  8.       
  9.     .changeColor1 {  
  10.         background-color: #e81a1a;  
  11.         color: #FFFFFF;  
  12.         border: solid 1px #659EC7;  
  13.         font-size: x-large;  
  14.         cursor: pointer;  
  15.     }  
  16.       
  17.     .changeColor2 {  
  18.         background-color: #fbe700;  
  19.         color: #be1010;  
  20.         border: dashed 1px #659EC7;  
  21.         font-size: x-large;  
  22.         cursor: pointer;  
  23.     }  
  24.       
  25.     .columns {  
  26.         columns: 4;  
  27.     }  
  28. </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.
  1. <div class="columns">  
  2.     <div ng-repeat="details in RoomAvailableData">  
  3.         <table style='width: 99%;table-layout:fixed;'>  
  4.             <tr ng-class="{actualColor: details.BookingStatus == 'Free', changeColor1: details.BookingStatus == 'Occupied', changeColor2: details.BookingStatus == 'Reserved'}">  
  5.                 <td align="center">  
  6.                     <table style='width: 99%;table-layout:fixed;'>  
  7.                         <tr>  
  8.                             <td> </td>  
  9.                         </tr>  
  10.                         <tr>  
  11.                             <td align="center"> <b>Room NO : {{details.RoomNo}}</b> </td>  
  12.                         </tr>  
  13.                         <tr>  
  14.                             <td align="center"> <b>Status : {{details.BookingStatus}}</b> </td>  
  15.                         </tr>  
  16.                         <tr>  
  17.                             <td align="center"> <span style="font-size:medium">   
  18.  Payment Status :<b> {{details.PaymentStatus}}</b>   
  19.  </span> </td>  
  20.                         </tr>  
  21.                         <tr>  
  22.                             <td align="center"> <span style="font-size:medium">   
  23.  Advance Paid :<b> {{details.AdvancePayed}}</b>   
  24.  </span> </td>  
  25.                         </tr>  
  26.                         <tr>  
  27.                             <td align="center"> <span style="font-size:medium">   
  28.  Total Amount Paid : <b>{{details.TotalAmountPayed}}</b>   
  29.  </span> </td>  
  30.                         </tr>  
  31.                         <tr>  
  32.                             <td align="center"> <span style="font-size:small">   
  33.  Booked From : {{details.BookedDateFR}} ~ {{details.BookedDateTO}}   
  34.  </span> </td>  
  35.                         </tr>  
  36.                         <tr>  
  37.                             <td> </td>  
  38.                         </tr>  
  39.                     </table>  
  40.                 </td>  
  41.             </tr>  
  42.         </table </div>  
  43.     </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.


Similar Articles