Table of Contents
Part 1: Introduction and Functional SpecsPart 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:
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:
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:
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:
|
Subscribe by reader
Subscribe by email
Share
