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.

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.

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.

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 .