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: 






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’.



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.




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:





Configure date and time display on the timeline scale:





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.






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:




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:




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 (5)

  • Pingback: JavaPlaner: Control Web Java para crear calendarios | Un poco de Java

  • sa,


  • AQbdullah umair,

    is it complere code or not here are any code file we to write by our self i think

  • Abdullah umair,

    it is ideed very helpful thanx for guiding .

  • Husna Yusuf,

    I tried this project, but there are some errors. In Table.java, setLabel(this.name…) is undefined. and in CustomsEventManager.java, The method addChild(DHXCollection) in the type Table is not applicable for the arguments (Table). and public Integer –> return event.getId() is wrong. what should i do with this error?
    i’m looking forward to your reply.


Leave a Reply

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

− three = 4

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