Spring MVC 3.1, jqGrid, and Spring Data JPA Integration Guide (Part 1)

In this tutorial, we will create a simple CRUD application using Spring MVC 3.1, jqGrid, and Spring Data JPA. We will use jqGrid, a jQuery plugin, to present tabular data as an interactive grid, and Spring Data JPA to simplify the creation of JPA repositories (where Hibernate and MySQL are our JPA vendor and database respectively).

Table of Contents

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: HTML and jqGrid
Part 4: XML configuration
Part 5: Running the Application

Dependencies

• Spring core 3.1.0.RELEASE
• Spring Data JPA 1.1.0 RC1
• jQuery 1.6.4
• jqGrid 4.3.1
• See pom.xml for details

Github
To access the source code, please visit the project's Github repository (click here)

Functional Specs

Before we start, let's define our application's specs as follows:

• A CRUD page for managing users
• Use AJAX to avoid page refresh
• Display reports in an interactive table
• Users have roles. They are either admin or regular (default)
• Everyone can create new users and edit existing ones
• When editing, users can only edit first name, last name, and role fields
• A username is assumed to be unique

Here's our Use Case diagram:

[User]-(View)
[User]-(Add) 
[User]-(Edit) 
[User]-(Delete) 

Database

Our database contains two tables: user and role tables.

user and role table design

User table

The user table contains personal information of each user. Notice the password values are hashed using Md5.

user table

Role table

The role table contains role values of each user. We define a role value of 1 as an admin, while a role value of 2 as a regular user.

role table

Screenshots

Before we start with the actual development, let's preview how our application should look like by providing screenshots. This is also a good way to clarify further the application's specs.

Entry page
The entry page is the primary page that users will see. It contains an interactive table where users can view, add, edit, and delete records on the same page.

Entry page (page 1)

Entry page (page 2)

Entry page (showing all records at once)

Create new record form
This form is used for adding new records. It is displayed when the user clicks on the Add button.

Create new record

Edit existing record form
This form is used for editing existing records. It is displayed when the user clicks on the Edit button. When editing, the form is pre-populated with the selected record's data.

Edit existing record

Alerts
You must select a record first alert is displayed whenever a user tries to edit or delete an existing record without selecting first that record.

Failure alert

Entry has been edited successfully alert is displayed whenever a successful action has been done, for example editing of an existing record.

Success alert

Filtered records
Records can be filtered by typing keywords on the menu toolbar.

Filtered records

Next

In the next section, we will discuss the project's structure and write the Java classes. Click here to proceed.

---

Share the joy: blogger tutorials Social Bookmarking Blogger Widget I'm reading: Spring MVC 3.1, jqGrid, and Spring Data JPA Integration Guide (Part 1) ~

Subscribe by reader Subscribe by email Share