Spring MVC Tutorial: Table Booking System

April 26, 2013

This is a new Spring MVC tutorial that sheds light on the implementation of a table booking system introduced in the previous article. We hope you had time to test our online demo and are ready to get down to the creation of this booking app.

To understand this tutorial, you should have basic knowledge of Java. It is also desirable that you are familiar with Hibernate and Spring MVC Framework.

Simply follow the steps described below and you’ll get a fully functional table booking calendar with a flexible configuration and rich booking UI: 

 

 

table_booking_calendar_java

 

 

We have zipped a ready sample for you to download, if you’d like to skip reading the tutorial.

Sign up to DHTMLX JavaPlanner periodic newsletter and get a free demo right now:


 

Step 1. Create a New Project

 

To begin with, we need to create a new dynamic web project in Eclipse IDE. Let’s name it JavaTableBooking.

 

Step 2. Add Spring MVC JAR-files

 

As far as our booking system will be built in the popular Spring MVC framework, we need to add the necessary Spring jar-files to the newly created project. You can either download jar-files from the external Spring MVC resource or get the available JavaPlanner demoapp_spring.war. Copy all Spring jar-files to the directory WebContent/WEB-INF/lib and refresh the project.

Note: The package also includes javaplanner.jar and mysql-connector-java-5.1.17-bin files. You will need them later in this project.

 

Step 3. Configure Spring MVC

 

At this stage we need to create a new directory WebContent/WEB-INF/jsp/ that will contain a view page for the booking calendar.

Then create a controller to map the view. Right-click on the project folder to add a new package ‘com.dhtmlx.booking.controller’.

 java_package_dhx

 

Create WebContent/WEB-INF/web.xml to parse requests to the server. Copy the following code and paste it on the xml page:

 

 

Now we need to declare and configure Spring servlet to send client requests to the controller. Create a new file WebContent/WEB-INF/booking-servlet.xml and update it as follows:

 

 

Step 4. Initialize and Configure JavaPlanner

 

At this step we create a standard JavaPlanner view.
It is achieved thanks to the available jar-files javaplanner.jar and mysql-connector-java-5.1.17-bin contained in WebContent/WEB-INF/lib.
If you haven’t copied them to the directory from JavaPlanner Spring MVC package, do it right now.

 

To add JavaPlanner source code and necessary booking calendar images, copy the codebase files to WebContent/codebase. Refresh the project.

Right-click on the package ‘com.dhtmlx.booking.controller’ to add a new java class. Name it ‘DemoController’. It will map the calendar view.

 

 demo-controller

 

It should have the following code:

 

 

Step 5. Create a Web Page

 

To display the booking calendar on the web page, create a new folder jsp in the directory WebContent/WEB-INF/ and add a new file layout.jsp with the following markup:

 

 

Step 6. Add CSS Classes

 

Now we need to define the calendar markup and its display on the page. Let’s create a new css file ‘demo.css’ in the directory WebContent/codebase/ with the following styles:

 

 

Step 7. Define Booking System Configuration Settings

 

To transform an event calendar into a booking one, we need to update its configuration settings.
Open DemoController.java and modify the scheduler method.

 

At first, add terrace skin and set the initial date and timeline view as it is shown in this snippet:

 

Update the timeline view to display tables in the tree mode and the time scale:

 

 

Update lightbox settings to display contact details, notes and time period for each reservation:

 

 

This is how the lightbox will look on the page:

 

 

lightbox_booking_java

 

Configure date and time display on the timeline scale:

 

 

mini_calendar

 

Enable events loading and saving and render the required view:

 

 

We have also imported the required markers:

 

 

Here is the updated code:

 

 

Step 8. Update the Booking Calendar View

 

Modify layout.jsp in accordance with the configuration updates.

Add a template to define smoking/no-smoking tables and reservations in the calendar.

 

 

Add empty contacts to show them in the event template:

 

 

Add an alert message for reservations that conflict in time.

 

table_reserved_alert

 

 

 

Add a custom time selector to display time scales:

 

 

Update the calendar style by defining the size and outlook of tables and adding a nice booking background:

 

 

Here is the full code:

 

 

If you run the application, you’ll get a web page with a JavaPlanner header that contains a time scale, an integrated mini calendar, navigation buttons and tabs:

 

table_booking_header

 

Step 9. Set up a Database

 

Create a new database in MySQL localhost. Let’s name it ‘booking’ and create a table ‘events’.

 

 

Step 10. Configure Helper Classes

 

To access the database, we need to configure hibernate helper class. Create a new file src/hibernate.cfg.xml and add the following code:

 

 

Create a helper class in the package com.dhtmlx.booking.controller and name it ‘Event’. It provides access to the stored events.

 

Paste in the following code:

 

 

To store and retrieve data from the server create a new file src/Event.hbm.xml:

 

 

Create a new class ‘HibernateUtil’ in com.dhtmlx.booking.controller (required by Hibernate):

 

 

Create another class ‘Table’ in the package com.dhtmlx.booking.controller to fill the collection of tables for reservation on the server side:

 

 

To define the logic for data loading and processing, we need to create a class ‘CustomEventsManager’ in the package com.dhtmlx.booking.controller:

 

 

Add a method for saving updated/inserted/deleted events in the database:

 

 

Create sections with unfolded lists for table reservations by 1-2 and 3-6 people by adding the code provided below:

 

tables_unfolded

 

The full code is the following:

 

 

Step 11. Loading Data in Calendar

 

Update the DemoController.java with the method ‘events’ as it is shown below:

 

 

Run the booking application on server and open http://localhost:8080/JaveTableBooking

Subscribe to our newsletter and get a free demo sample right now:


 

If you find this booking tutorial useful,  share it with your friends and comment below.

Comments (4)

Leave a Reply

Your email address will not be published. Required fields are marked *

7 − = six

You may use these HTML tags and attributes:
<b></b> <i></i> <strike></strike> <a href=""></a>