文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

在这篇文章中,我们将学习如何创建一个简单的基于web的酒店房间预订系统, 使用 MVC, AngularJS, 和 WebAPI。

介绍

在这篇文章中,我们将学习如何创建一个简单的基于web的酒店房间预订系统, 使用 MVC, AngularJS, 和 WebAPI。

什么是SHANU酒店房间预订?

SHANU 酒店客房预订是一个基于Web的简单的酒店客房预订系统。 用户可以添加酒店房间的详细信息和房间预订日期。 SHANU酒店预订有两个模块1) 仪表板 2) 房间/预订 CRUD (添加房间和预订)。

第 1 段(可获 1.26 积分)

这个应用程序有两个模块

  1. 房间状态 (仪表板)
  2. 房间/预订 CRUD (添加房间和管理预订)

房间状态:  这是主要的仪表板模块。用户可以在仪表板页面查看所有的空闲/占用和预订房间信息。此模块将帮助用户轻松查看可用的空闲房间。 可用的空闲房间为绿色,占用的房间为红色,预留的房间为黄色。 这种颜色差异将有助于用户看到哪些房间是空闲的,占用了和被预留的。

在这个仪表板页面中,随着房间号和状态,我们也能看到详细信息,比如付款状态是未付还是已付,预先支付的金额,总金额和预定的时间从哪天到哪天。

第 2 段(可获 1.61 积分)

房间/预订CRUD (添加房间和管理预订):

在这个模块,我们将管理房间和房间预订信息。

房间详情页:

在这里用户可以添加房间细节和房间房号,房间类型和价格的细节。

房间/预订CRUD:

这是我们的主要部分,用户将以访客的身份预订房间。 在这里,我们选择房间号,预订日期,预订状态为免费,占用和保留,支付类型为支付,未支付和预付, 预付金额及已付总金额。 我们还可以编辑和删除预订细节。

先决条件

Visual Studio 2015: 你可以从这里下载它。

第 3 段(可获 1.33 积分)

代码

创建数据库和表

下面是用来创建数据库、表以及一些样本数据的 SQL 脚本。在你的 SQL Server 数据库中执行此脚本。我这里用的是 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  
第 4 段(可获 0.43 积分)

存储过程 : 在你的SQL Server上一个一个运行一下存储过程

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 

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

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

-- =============================================    
-- 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 
第 5 段(可获 0.16 积分)

在Visual Studio 2015中创建您的MVC Web应用程序

在安装我们的Visual Studio 2015后, 单击“开始”,然后程序并选择Visual Studio 2015 - Click Visual Studio 2015. 单击“新建”,然后选择“Web“项目,然后选择 ASP.NET Web Application. 请输入您的项目名称,然后单击“确定”。

选择MVC,Web API,点击OK。

添加使用ADO.NET实体数据模型的数据库

右键单击项目,单击 添加, 然后 新项目. 选择 数据,然后 ADO.NET Entity Data Model ,填写名称,然后点击增加

选择"EF Designer from database" 然后点击下一步.

单击新建连接来连接我们的SQL Server数据库.

第 6 段(可获 1.36 积分)

连接到我们的数据库。单击“下一步”选择菜单管理的表和存储过程.。

现在选择所有表和存储过程详细信息,然后单击“完成”.。

添加Web API控制器程序

右键单击 (Controller)控制器 文件夹, 单击“添加”,然后单击“控制器”。

选择Web API 2 Controller – Empty,点击添加并给我们的web API控制器命名。

处理 WEBAPI Controller 的 CRUD功能

选择控制器并添加一个空的Web API 2控制器。向Web API控制器提供您的名称,然后单击“确定”.。在这里为我们的Web API控制器名字为“HotelAPIController”。

我们已经创建了Web API控制器,我们可以看到我们的控制器已经继承了ApiController。

我们都知道Web API是一个简单和容易的方法来为浏览器和手机建立HTTP服务。
Web API有以下四种方法 GET/POST/PUT和DELETE:

第 7 段(可获 1.89 积分)
  • Get 用于请求数据。 (Select)
  • Post 用于创建数据。 (Insert)
  • Put 用于更新数据。
  • Delete 用于删除数据。

Get 方法

我们的示例中只使用了Get 方法,因为我们只用了一个存储过程。我们需要为实体创建一个对象,然后写 Get 方法来进行选择(Select)/插入(Insert)/更新(Update) 和删除(Delete) 操作。

选择(Select) 操作

我们用一个 Get 方法来获取 AlbumMasater 和 MusicDetail 表的详细信息,这里用到了实体对象,返回的结果是 IEnumerable。我们在 AngularJS 中使用这个方法并通过 AngularJS 控制器将结果显示在 MVC 页面中。Ng-Repeat 能帮助我们绑定详细信息。

这里我们看到 getHotelRooms 方法中将搜索参数传入 USP_HotelMaster_Select 存储过程。在存储过程中如果没有指定参数,我们使用 "%" 返回所有记录。

第 8 段(可获 2.06 积分)
// 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();
}

插入操作

和select一样,我们将所有的参数传递给插入的存储过程。 这个insert方法将会返回数据库是否成功插入数据的结果。我们将得到结果,并从AngularJS的控制器显示到MVC应用中。 

第 9 段(可获 0.59 积分)
// 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();

}
同样是酒店房间,我们将使用这些方法来对房间预订详情做CRUD的操作,在这里就是代码中的Select(查询),Insert(插入),Update(更新)和Delete(删除)。
第 10 段(可获 0.36 积分)

接下来我们会创建 AngularJS 控制器和视图页面,通过 CRUD 操作来管理酒店房间及其预订。

房间/房间预订 CRUD  

创建 AngularJS 控制器

首先,在 Scripts 目录下创建一个目录,给它取名为 “MyAngular”。

现在在这个目录下添加 Angular 控制器。

右键单击 MyAngular 目录,然后点击添加新项(Add an New Item)。选择 Web 再选择 AngularJS 控制器(AngularJS Controller),然后对控制器命名。我把这个 AngularJS 控制器命名为 “Controller.js”。

AngularJS 控制器创建好之后,我们可以看到控制器的默认代码中已经定义好了模块。

第 11 段(可获 1.38 积分)

如果没有 AngularJS 包,那就在项目里添加这个包。

右键单击 MVC 项目,然后点击管理 NuGet 包(Manage NuGet Packages)。

搜索到 AngularJS,选中并安装。

创建 AngularJS 脚本文件程序

Modules.js: 我们创建一个名为 “AngularJs_Module” 的 Angular 模块,并将其中添加对 AngularJS JavaScript 的引用。

/// <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']);
})();

 

第 12 段(可获 0.7 积分)

控制器: 在 AngularJS 的控制器中我们已经完成了所有的商业逻辑并从 Web API 中返回所需的数据给 MVC HTML 页面。

1. 变量声明

首先我们声明了即将要用到的本地变量:

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$";
第 13 段(可获 0.46 积分)

方法

Select方法
在 select 方法中,我们要使用 $http.get 从 Web API 获取详细的房间、预订信息和房间状态,并将其显示在仪表盘上。在 get 方法中我们会提供 API 控制器的史称和方法来获取详情。

最后的结果会使用 data-ng-repeat 显示在 MVC HTML 页面中。

// 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!";
        });
}

 

第 14 段(可获 0.76 积分)

插入房间详情

在这个方法中我们传入了用户输入的房间详情信息,并插入到数据库中。

//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.";
        }
    };
第 15 段(可获 0.24 积分)

房间状态仪表盘模块:

这是主模块,我们在这里检查所有状态状态是空闲/占用还是保留,并显示房间的细节。

我们又创建了一个 AngularJS 控制器并命名为 HomeController。我们在这个控制器上获取专辑(Albums)和音乐详情并播放我们的音乐。

在主页上,一行只显示 4 个房间的状态和详情。为了固定为 4 列,我们首先在呈现主页的 index 视图页面添加相应的样式表。

在仪表盘我们根据房间的状态来显示其详情。

我们的房间有 3 种状态

  1. 空闲 (使用绿色表示空闲的房间)
  2. 占用 (使用红色表示被占用的房间)
  3. 保留 (使用花色表示保留的房间)
第 16 段(可获 1.55 积分)

在面板视图页面中,我们使用了不同颜色来标识不同的房间状态。

在 HTML 部分,我们在 div 标签中使用如下样式使得一行显示4列,每一个单元格的背景色是根据房间的状态来决定的。

<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>&nbsp;</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>&nbsp;</td>
                                   </tr>
                               </table>


                           </td>
                       </tr>
       </table>


   </div>
</div>

 

第 17 段(可获 0.51 积分)

尾声

希望你喜欢这个基于 Web 的 Shanu Hotel Room Booking 系统。

这是一个基于 Web 的酒店预订系统,使用 MVC 和 AngularJs 来实现。这个应用可以扩展,根据你的需求添加更多功能。注意在运行这个程序之前,要根据你自己的 SQL Server 设置来修改 web.config,而且不要忘了执行 Zip 附件中的 SQL 语句。

 

第 18 段(可获 0.88 积分)

文章评论