< Back
Figure 1 - Application welcome page
Figure 2 - Entering personal information
Figure 3 - Adding roommates or family members
Figure 4 - Example of adding a family member
Figure 5 - The updated menu, after adding a family member
Figure 6 - Choosing your apartment preferences
Figure 7 - The application complete screen

Jardine Aparments Application

This is a simple application that students use to apply to live at Jardine Apartments on Kansas State University's campus. It was developed using Odyssey HMS, with most code written in VBScript and Javascript.

The first page, seen in Figure 1, welcomes the user to the application and gives basic information they should know before continuing with the application.

The second page, seen in Figure 2, asks the student to enter personal information, such as name, current address, major, class, etc. JQuery is used in this page in a few different ways. For example, when the user selects "United States" as their country, the State drop-down menu will slide down and appear. Likewise, if the user has "United States" selected, and then they choose a different country, the State drop-down menu will slide up and disappear. Also, some of the input boxes are required, and if the user attempts to click the "Next >" button without entering a value, each required box that is missing a value will be outlined in red, and a message will appear informing the user they are missing required values. The user will be unable to go to the next page until they input all required values. When the user clicks the "Next >" button, and all required fields have values, the form is posted and the values are saved to the database using Odyssey HMS's VBScript API.

The third page, seen in Figures 3, 4, and 5, also uses a significant amount of JQuery, as well as AJAX. When the user initially enters the page, it checks to see if they have family members or roommates in the database. Due to Jardine Apartment regulations, a student may only have either family members or roommates (non-related), but not both. Therefore, if the user does not have family members and does not have roommates, the page will resemble Figure 3, showing the option to add either family members or roommates. If the user wishes to add a roommate, they simply type the roommate's student ID number in the text box, and click the green (+) button. When the green (+) button is clicked, an AJAX call is made to search for the given roommate, and if the roommate is found, will automatically save that roommate to the database, and AJAX will return with the name of the roommate next to the box, and the green (+) button will change to a red (-) button for deleting the roommate. If the roommate was not found, or the roommate did not meet certain criteria, the appropriate error message will appear (for example, if the roommate does not exist, if the user tried to add the same roommate again, if the roommate has a different gender than the user, etc.). When at least 1 roommate is added, the family member box slides up and disappears. The user can then only add family members if they first delete all roommates.

If the user wishes to add a family member instead, they can click the green (+) button in the family member's box, and a form appears (as seen in Figure 4) to enter basic information for that family member (unlike roommates, family members do not exist in the database, so cannot be searched for using an ID number). When the user clicks "SAVE", an AJAX method is called, and the family member is saved to the database. The AJAX method returns the newly added family member to the screen, as seen in Figure 5. Also, when at least one family member is added, the roommates box slides up and disappears. The user can then only add roommates if they first delete all family members.

The fourth page, seen in Figure 6, lets the user select the type of apartment they want to live in. Before the page loads, it must check to see which "type" of student the user is, as some types of aparments are only available to certain types of students (for example, some apartment types are only available to students who will have family members living with them). Therefore, the user will only be shown the types of apartments that are availble for them. The user must then fully select at least two apartment preferences (apartment type, number of bedrooms, and floor), and then they will be able to continue (they are also able to enter any notes or comments if they want, which will be read by the appropriate people at the apartment offices). When the user clicks the "Next >" button on this page, a JQuery UI dialog box appears, informing the user they will be redirected to a third-party website to pay a $30 application fee. After paying, the user is redirected back to the application's completion page, seen in Figure 7.



Figure 8 - The initial page for the room search application
Figure 9 - The 'room type' menu appears after selecting a 'room style'
Figure 10 - The available rooms that match the selected room type(s)
Figure 11 - The room details page, showing detailed information of a selected room
Figure 12 - An image-mapped floorplan, showing where the selected room is, as well as nearby available and unavailable rooms
Figure 13 - The room reservation completion page

Room Select Application

This application lets students search for a room to live in at one of the on-campus residence halls. It uses a significant amount of JQuery and AJAX method calls to create a dynamic, single-page experience for finding a room. The application works by continuously adding certain criteria for the room the user wishes to live in, therefore narrowing the results to the rooms that best-match what the user wants.

The first page the user will enter is seen in Figure 8. The first menu that appears is the "select your room style" menu, which consists of radio buttons the user can select. Before the menu is created, the database is queried to get the number of roommates the user will live with. Certain radio buttons may not appear if the user has too many roommates. For example, if the user has 2 or 3 roommates they wish to live with, the "Traditional Private" option will not appear, as they only have rooms for 1 or 2 people. This filter is dynamic however, meaning if someone were to add a "traditional private" room for 4 people to the database, then the radio button would show up. Likewise, if the user has 2 or 3 roommates selected, but there are only 1 and 2 person rooms available under the 'suites' category, the 'suites' option will not appear. Essentially, it filters the "room styles" by looking for currently available rooms that have a number of open spots greater than the number of roommates the user selected.

After selecting a "room style", an AJAX method is called to query the database and retrieve a list of "room types" that are of that style, seen in Figure 9. Again, certain "room types" will only appear if there are any available rooms that have enough open spaces for the user and their roommates to select, which is part of the WHERE clause in that query.

The user may then select multiple "room types", and then press the Search button (if the user presses the search button without selecting at least one room type, an appropriate alert message will appear). Another AJAX call is made, this time retrieving the actual rooms that match the user's criteria, and sorts the rooms by building, room style, floor, and room number (seen in Figure 10). Also shown are green icons, which indicate the number of open spaces in that room, and red icons, which indicate the number of people who have already selected that room as well.

When the user clicks the View/Reserve Room button (seen in Figure 10), they are then taken to the page (seen in Figure 11) to view more detailed information about that room. On this page, the user must also select a "Meal Plan" that they will have during the upcoming semester.

If the user clicks the "Show/Hide Floorplan" link in Figure 11, an image of the floorplan will appear, showing where the user's selected room is on that floor, as well as where the other available and non-available rooms are on that floor (Figure 12).

The colored boxes that appear on this image are created using HTML5's canvas, as well as Javascript. Each floorplan was "image-mapped", so the coordinates for each room, with each room being represented as an <area> tag containing coordinates. Javascript is then used to read the coordinates of each <area> tag, and then javascript is used to draw the appropriately-colored box on the canvas. The user is able to click an available room on the floorplan image to view the details of that room, if they wish.

If the user is satisfied with the room they selected, they may then reserve the room for themselves and their roommates. They are then taken to the completion/confirmation page, seen in Figure 13, and a confirmation email is sent to the user and all of their roommates. From this page, the user may choose to change their room and start their room search process all over again, as long as it is not past a certain deadline, in which case the option to change their room will disappear.



Figure 14 - Jardine agreements menu
Figure 15 - Jardine agreements menu (mobile)

Jardine Agreements Menu

The Jardine Agreements Menu (Figure 14) is a page which simply shows any "agreements" that a student has signed. For example, if a student wants to live in Jardine Apartments, they must complete and sign an agreement. Previous agreements are also shown here, which the student may view.

The back-end for this page was fairly simple. It simply reads from the "Contract Elements" table in the database, which stores information for any room or apartment the student lives in. The query filters the "Contract Elements" by looking for Jardine Apartments, and then menu is built using the retrieved information. If a student has not yet "signed" an agreement, a green box will highlight the button, to attract their attention to it.

Also shown is the mobile version of this page (Figure 15). Due to the fact the menu is a bit long, in order to nicely fit it into a mobile device, I simply edited the CSS to allow for the menu to be scrolled horizontally, thus keeping the rest of the page from being stretched out.