Spring MVC 3.1 - Implement CRUD with Spring Data MongoDB (Part 1)

In this tutorial, we will create a simple CRUD application using Spring 3.1 and MongoDB. In particular, we will use Spring MVC to develop the web application and Spring Data MongoDB for the repository.

Table of Contents

Part 1: Introduction and Functional Specs
Part 2: MongoDB setup
Part 3: Java classes
Part 4: XML configuration
Part 5: HTML Files (with AJAX)
Part 6: Running the Application

Dependencies

• Spring core 3.1.0.RELEASE
• Spring Data MongoDB 1.0.0.RELEASE
• MongoDB (server) 2.0.2
• MongoDB (Java driver) 2.7.2
• 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
• 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

If you're new to MongoDB and coming from a SQL-background, please take some time to read the following resource SQL to Mongo Mapping Chart. It's a comparison between SQL and MongoDB.

We have two collections (tables in SQL): user and role. The user collection contains personal information of each user; whereas the role collection contains role values for each user where a value of 1 represents an admin and a value of 2 represents a regular user.

Here's the Class diagram:

# Cool UML Diagram
[User|id;firstName;lastName;username;password;role{bg:orange}]1--1> [Role|id;role{bg:green}]

User document

Below is the JSON structure of the User document after Spring Data MongoDB has created the collection:

{ 
   "_id" : "" , 
   "_class" : "org.krams.domain.User"
   "firstName" : ""
   "lastName" : ""
   "username" : ""
   "password" : "" , 
   "role" : { "$ref" : "role" , "$id" : "" }
}

Notice the role property is a reference to a Role record as indicated by $ref: role property.

Role document

Below is the JSON structure of the Role document after Spring Data MongoDB has created the collection:

{ 
   "_id" : ""
   "_class" : "org.krams.domain.Role"
   "role" : ""
}

Screenshots

Let's preview how the application will look like after it's finished. This is also a good way to clarify further the application's specs.

The Activity diagram:

http://yuml.me/diagram/activity/(start)-%3E%3Cd1%3Eview-%3E(Show%20Records)-%3E%7Ca%7C-%3E(end),%20%3Cd1%3Eadd-%3E(Show%20Form)-%3E%7Ca%7C,%20%3Cd1%3Eedit-%3E%3Cd2%3Ehas%20selected-%3E(Show%20Form)-%3E%7Ca%7C,%20%3Cd2%3Eno%20record%20selected-%3E(Popup%20Alert)-%3E%7Ca%7C,%20%3Cd1%3Edelete-%3E%3Cd3%3Ehas%20selected-%3E(Delete%20Record)-%3E%7Ca%7C,%20%3Cd3%3Eno%20record%20selected-%3E(Popup%20Alert)-%3E%7Ca%7C.

Entry page
The entry page is the primary page that users will see. It contains a table showing user records and four buttons for adding, editing, deleting, and reloading data. All interactions will happen in this page.

Entry page

Edit existing record
When user clicks the Edit button, an Edit Record form shall appear after the table.

Edit record form

When a user submits the form, a success or failure alert should appear.

Success alert

When the operation is successful, the update record should reflect on the table.

Edited record appears on the table

Create new record
When a user clicks the New button, a Create New Record form shall appear after the table.

Create new record form

When a user submits the form, a success or failure alert should appear.

Success alert

When the operation is successful, the new record should appear on the table.

New record shows on the form

Delete record
When user clicks the Delete button, a success or failure alert should appear.

Success alert

Reload record
When user clicks the Reload button, the data on the table should be reloaded.

Errors
When user clicks the Edit or Delete button without selecting a record first, a "Select a record first!" alert should appear.

Error alert

Next

In the next section, we will study how to setup a MongoDB server both in Windows and Ubuntu. Click here to proceed.

---

Share the joy: blogger tutorials Social Bookmarking Blogger Widget I'm reading: Spring MVC 3.1 - Implement CRUD with Spring Data MongoDB (Part 1) ~

Subscribe by reader Subscribe by email Share