ASP.NET MVC Hotel Booking System Using AngularJS

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.