4 Home page

The Home link in the navigation bar leads to this page, which should display:

• A carousel below the navigation bar. This carousel should rotate five pictures about the PSA. The pictures can be about buildings, apartments, etc. and can be downloaded from Internet and then modified. When searching images on the Internet, you should use royalty-free image websites such as Pixabay (www.pixabay.com) and Unsplash (www.unsplash.com) to avoid copyright issues. Each picture needs to have a caption when being displayed by the carousel.

• Two columns below the carousel. The left column should consist of 7 basic columns, and display a welcome message and an introduction to the hotel. The right column should consist of 5 basic columns, and display a list of links about tourist spots and amenities that can be easily reached from PSA. The two columns should stack up when the viewport width is less than 576px (NB: choose the right column class to use in Bootstrap).

  5 Models

  This website should use the three Model classes described in the subsections below. Each class has certain properties. The requirements on these properties are also given. Appropriate data types and data annotations should be applied to fulfil these requirements.

  You should fully create these Model classes first, and then scaffold them one by one, and then migrate them to database together.

  NB: During scaffolding, you should choose the ApplicationDbContext used by Identity as the DbContext (i.e., select the database used by Identity). During migration, in case you see the complaint that SQLite does not support certain operation, you should comment out the corresponding migration code in the Up() and Down() methods related to that operation. These two methods can be found in the .cs file under the 'Migrations' folder.
  

  0. 6 The links for logged-in travellers

     This section gives the requirements for the links in the navigation bar for logged-in travellers. You should implement the Razor page for each link based on the requirements.

     Moreover, you should use the [Authorize] annotation to only allow the users with the role of 'Travellers' to access these links.

     6.1 The 'My Details' link

     This link should allow a registered/logged-in traveller to enter/modify the following details: Surname, Given Name, and Postcode. Entering details is the first thing a newly-registered traveller should do. A newly-registered traveller should be redirected to this 'My Details' page upon successful registration.

     If this is the first time that a traveller enters his/her details, a new record should be created in the Traveller table with the traveller's Email property taken from the Identity package.

     If the traveller's details already exist in the database, this page should allow the traveller's details to be modified.

     The traveller should be acknowledged with his/her latest details upon successful entering or modification to his/her details.

     Hint: you can refer to Lecture 9 slides on how to implement this page.
      6.2 The 'Search apartments' link 6.2.1 Web form and validation

     This ‘Search apartments’ link should allow a logged-in traveller to search available apartments by displaying a web form with the following input devices, all of which are mandatory:

     1. The number of bedrooms (Should be implemented with a select tag helper, consisting of options for 1 bedroom, 2 bedrooms and 3 bedrooms. You can either use static options of 1, 2 and 3 bedrooms within the select tag helper, or use dynamic options by querying the database to obtain possible bedroom counts. If you choose to use dynamic options, you need to explore how to obtain 'distinct' bedroom counts by using SelectList() method.)

     2. CheckIn date (Only Date part is needed; Should be displayed by an input tag helper)

     3. CheckOut date (Only Date part is needed; Should be displayed by an input tag helper)

     4. Submit button

     You should use a View Model (refer to Lecture 7) to specify the annotations and validations for the input devices in this web form.

     6.2.2 Raw SQL for searching apartments

     Once the form submission is successfully validated, you should construct a raw SQL query (discussed in Lecture 12) to search the available apartments. Note that you should use a single query, not multiple queries. While this query is a little complex, we provide the following hints:

     • Suppose there are two bookings of the same apartment: bookingA and bookingB. The exact condition for these two bookings to have no overlap can be expressed as follows:

                  bookingA.Checkout <= bookingB.Checkin OR bookingB.Checkout <=
                                        bookingA.Checkin
       

       Then, it is easy to understand that the equivalent condition for these two bookings to have overlap is:

                   bookingA.Checkin < bookingB.Checkout AND bookingB.Checkin <
                                        bookingA.Checkout
       

     • The structure of your single SQL query should be as follows: first, use a main query to find all apartments satisfying the bedroom count requirement; then, use a subquery to find all apartments that have overlaps with the traveller’s intended period; finally, use the NOT IN operator to exclude those apartments found by the subquery from the main query. For how to construct a single query consisting of a main query and a subquery, refer to Lecture 12.

       6.2.3 Displaying the search results as links

       After the SQL query returns, you should display the results in a table underneath the ‘Submit’ button. This table should contain the following properties from the Apartment class: ID, Level, BedroomCount, and Price.

       The Apartment ID displayed in the above table should be a hyperlink, which points to the ‘Book an apartment’ page described in Subsection 6.3, and is appended with a query string comprising the following values: Apartment ID, CheckIn date, and CheckOut date. If this hyperlink is clicked, the ‘Book an apartment’ page will be invoked, with the values in the query string displayed in the web form of that page. Refer to Subsection 6.3 for how to support this.

       If no apartments satisfy the searching criteria, a message should be displayed to the traveller underneath the ‘Submit’ button.

       This feature is intended as a challenging part of this project. You should try to explore and get it done by yourself. There can be different ways for this implementation. No matter which way you take, you need to understand the following:

       • The format of the query string.

       • The names in the query string should exactly use those of the input devices in the web form in Subsection 6.3. You can view the page source of the web form in 6.3 via a web browser to be sure of them.

       • The values in the query string are just strings with no quotes needed. The Model Binding mechanism in Razor pages will ensure they are received and converted to the proper data types by the page in 6.3.

         6.3 The 'Book an apartment' link 6.3.1 The web form and validation

         This ‘Book an apartment’ link should allow a logged-in traveller to book a hotel apartment by displaying a web form with the following input devices, all of which are mandatory:

         1. The apartment ID (should range between 1 and 16).

         2. CheckIn date (Only Date part is needed; Should be displayed by an input tag helper)

         3. CheckOut date (Only Date part is needed; Should be displayed by an input tag helper)

         4. Submit button

         A traveller can book an apartment by filling the above form. The form should be submitted by POST method. After the user inputs are successfully validated, it is still needed to check whether the submitted booking is available. Please construct a raw SQL query to do this based on the hints given in Subsection 6.2.2. If this booking is NOT available, you should display the above form again and show a message for the traveller to advise this unavailability.

         6.3.2 Inserting the booking into database

         If the apartment to book is available, you should insert a record about this booking into the Booking table. Note that, the cost of the booking should equal the apartment’s price per night times the number of nights (you should figure out how to calculate this by C#).

         If the ‘insert’ is successful, you should inform the traveller with the following info below the web form above: the apartment booked, the level, the CheckIn and CheckOut dates, and the cost of this booking.

         6.3.3 Receiving query string from Subsection 6.2

         The web form of this page should be able to receive the query string values composed in Subsection 6.2 and display them. Then, the traveller can further modify the inputs if he/she wants, otherwise he/she can click the submit button.

         Implementing the reception of query string values is actually easy. You only need to add the annotation [BindProperty(SupportsGet = true)] to the object bound with the above web form. Then, the Model Binding mechanism will automatically populate query string values into this object before the OnGet() method is invoked. Note that the OnGet() does not need any method parameters for this due to the use of BindProperty.