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
   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
   17. CREATE DATABASE HotelDB
   18. GO
   20. USE HotelDB
   21. GO
   23. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'HotelMaster' )
   24. DROP TABLE HotelMaster
   25. GO
   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
   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]
   40. Insert into HotelMaster(RoomNo,RoomType,Prize) Values('101','Single','50$')
   41. Insert into HotelMaster(RoomNo,RoomType,Prize) Values('102','Double','80$')
   43. select * from HotelMaster
   46. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'RoomBooking' )
   47. DROP TABLE RoomBooking
   48. GO
   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
   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]
   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
   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
   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
   18. INSERT INTO HotelMaster (RoomNo,RoomType,Prize)
   19. VALUES (@RoomNo,@RoomType,@Prize)
   21. Select 'Inserted' as results
   23. END
   24. ELSE
   25. BEGIN
   26. Select 'Exists' as results
   27. END
   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 +'%'
   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
   20. INSERT INTO RoomBooking
   21. (RoomID , BookedDateFR, BookedDateTO, BookingStatus , PaymentStatus, AdvancePayed, TotalAmountPayed )
   22. VALUES
   23. ( @RoomID , @BookedDateFR, @BookedDateTO, @BookingStatus , @PaymentStatus, @AdvancePayed, @TotalAmountPayed )
   25. Select 'Inserted' as results
   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
   40. Select 'Updated' as results
   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.

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.
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.
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”.
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('');
   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. }
   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. }
   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.

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.

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.
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.