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

Review

We have just completed our application! In the previous sections, we have discussed the functional specs, created the Java classes, declared the configuration files, and wrote the HTMl files. In this section, we will build and run the application using Maven, and show how to import the project in Eclipse.

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

Running the Application

Access the source code

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

Preparing the data source

1. Run MongoDB (see Part 2 for instructions)
2. There's no need to create any collections because Spring will create them automatically
3. There's no need to populate the database with sample data because our InitMongoService will insert our sample data automatically

Building with Maven

1. Ensure Maven is installed
2. Open a command window (Windows) or a terminal (Linux/Mac)
3. Run the following command:
   

   mvn tomcat:run

4. You should see the following output:
   

   [INFO] Scanning for projects...
   [INFO] Searching repository for plugin with prefix: 'tomcat'.
   [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from central
   [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from snapshots
   [INFO] ------------------------------------------
   [INFO] Building spring-mongodb-tutorial Maven Webapp
   [INFO]    task-segment: [tomcat:run]
   [INFO] ------------------------------------------
   [INFO] Preparing tomcat:run
   [INFO] [apt:process {execution: default}]
   [INFO] [resources:resources {execution: default-resources}]
   [INFO] [tomcat:run {execution: default-cli}]
   [INFO] Running war on http://localhost:8080/spring-mongodb-tutorial
   Jan 20, 2012 8:45:19 PM org.apache.catalina.startup.Embedded start
   INFO: Starting tomcat server
   Jan 20, 2012 8:45:19 PM org.apache.catalina.core.StandardEngine start
   INFO: Starting Servlet Engine: Apache Tomcat/6.0.29
   Jan 20, 2012 8:45:19 PM org.apache.catalina.core.ApplicationContext log
   INFO: Initializing Spring root WebApplicationContext
   Jan 20, 2012 8:45:22 PM org.apache.coyote.http11.Http11Protocol init
   INFO: Initializing Coyote HTTP/1.1 on http-8080
   Jan 20, 2012 8:45:22 PM org.apache.coyote.http11.Http11Protocol start
   INFO: Starting Coyote HTTP/1.1 on http-8080
   

Note: If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

1. Follow the steps with Building with Maven
2. Open a browser
3. Enter the following URL (8080 is the default port for Tomcat):
   

   http://localhost:8080/spring-mongodb-tutorial/

Import the project in Eclipse

1. Ensure Maven is installed
2. Open a command window (Windows) or a terminal (Linux/Mac)
3. Run the following command:
   

   mvn eclipse:eclipse -Dwtpversion=2.0

4. You should see the following output:
   

   [INFO] Scanning for projects...
   [INFO] Searching repository for plugin with prefix: 'eclipse'.
   [INFO] org.apache.maven.plugins: checking for updates from central
   [INFO] org.apache.maven.plugins: checking for updates from snapshots
   [INFO] org.codehaus.mojo: checking for updates from central
   [INFO] org.codehaus.mojo: checking for updates from snapshots
   [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
   [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
   [INFO] -----------------------------------------
   [INFO] Building spring-mongodb-tutorial Maven Webapp
   [INFO]    task-segment: [eclipse:eclipse]
   [INFO] -----------------------------------------
   [INFO] Preparing eclipse:eclipse
   [INFO] No goals needed for project - skipping
   [INFO] [eclipse:eclipse {execution: default-cli}]
   [INFO] Adding support for WTP version 2.0.
   [INFO] -----------------------------------------
   [INFO] BUILD SUCCESSFUL
   [INFO] -----------------------------------------
   

   This command will add the following files to your project:
   

   .classpath
   .project
   .settings
   target

   You may have to enable "show hidden files" in your file explorer to view them
   
5. Open Eclipse and import the project

Conclusion

That's it! We've have successfully completed our Spring MVC 3.1 web application. We've learned how to setup MongoDB and access it through Spring Data MongoDB. Furthermore, we used AJAX to make the application responsive.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History

---

Revision	Date	Description
1	Jan 20 2012	Uploaded tutorial and Github repository
2	Jan 22 2012	Updated description of InitMongoService
3	Jan 23 2012	Added class, use case, and activity diagrams

---

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

Subscribe by reader Subscribe by email Share

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

Review

In the previous section, we have created the configuration files and discussed them accordingly. In this section, we will focus on the view layer, in particular the HTML files and JavaScript codes.

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

HTML Files (with AJAX)

To improve the user experience, we will use AJAX to make the application responsive. All actions will be performed on the same page (no page refresh). Consequently, we only have one HTML page for the entire application. The rest are JavaScript files.

Notice how we've structured the HTML page. Basically, we followed the concept of separation of concerns by separating markup tags, CSS, and JavaScript code. We tried as much as possible to make the JavaScript code and CSS styles unobtrusive.

A Closer Look

At first glance, this JSP file seems complex. On the contrary, it's quite simple. Let's break it into smaller pieces for clarity:

URLs
The following declares our URLs as mapped to our UserController. We're using the url taglib to make the URL portable.


Imports
Here we're importing custom CSS and JavaScript files, along with jQuery.

What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Source: http://jquery.com/

JavaScript initialization
Here we're preparing the URLs, attaching functions to our buttons, and initially loading the table. The main chunk of the JavaScript code is referenced from an external JavaScript file custom.js

• loadTable(): Performs an AJAX request and populates our table with records
• toggleForms(): Hides and shows specific forms based on the passed argument
• toggleCrudButtons(): Hides and shows buttons
• hasSelected(): Checks whether a record has been selected
• fillEditForm(): Fills the Edit form with details based on the selected record
• submitDeleteRecord(): Submits a delete request via AJAX
• submitNewRecord(): Submits a create new record request via AJAX
• submitUpdateRecord(): Submits an update record request via AJAX

Table and buttons
This is a simple table for displaying records. The buttons are for interacting with the data.


Forms
These are forms used when adding and editing records.

Preview

If we run our application, this is what we shall see:

Entry page

For more screenshots, please visit Part 1 of this tutorial and check the Screenshots section.

Next

In the next section, we will build and run the application using Maven, and show how to import the project in Eclipse. 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 5) ~

Subscribe by reader Subscribe by email Share

Spring Security 3.1 - Implement UserDetailsService with Spring Data JPA (Part 2)

Review

In the previous section, we have laid down the functional specs of the application. In this section, we will discuss the project's structure, write the Java classes, and organize them in layers.

Table of Contents

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

Project Structure

Our application is a Maven project and therefore follows Maven structure. As we create the classes, we've organized them in logical layers: domain, repository, service, and controller.

Here's a preview of our project's structure:

The Layers

Domain Layer

This layer contains two domain classes, User and Role. They represent our database tables, user and role respectively. Because we're developing a JPA-based repository, both classes must be annotated with JPA annotations.




Specifying the entity name inside the @Entity is not required. However, I've encountered instances where the tables are created in lowercase and uppercase, i.e user and USER. For consistency, I've specified them here.

Controller Layer

This layer contains two controllers, AccessController and MediatorController.

• AccessController is responsible for handling access related requests, mainly login and logout requests
• MediatorController is responsible for handling requests to common pages such as user and admin pages

Service Layer

This layer contains a single service, CustomUserDetailsService. Its main purpose is to retrieve user information from our custom database and translate that user information into a format that Spring Security understands. Take note of the helper methods provided within this class.



What's the logic here?

1. We must implement UserDetailsService because we have a custom database
2. loadUserByUsername method must return an object that implements the UserDetails interface
3. We must map our domain org.krams.domain.User to org.springframework.security.core.userdetails.User
4. We must map numerical roles as SimpleGrantedAuthority objects
5. We are responsible for interpreting what each numerical role value represents
6. ROLE_USER and ROLE_ADMIN are abitrary values we assigned to numerical values

Repository Layer

This layer contains a single interface, UserRepository. And this is our data access object (DAO). With the help of Spring Data JPA, Spring will automatically provide the actual implementation.

What is Spring Data JPA?
Spring JPA is part of the umbrella Spring Data project that makes it easy to easily implement JPA based repositories.

Implementing a data access layer of an application has been cumbersome for quite a while. Too much boilerplate code has to be written to execute simple queries as well as perform pagination, and auditing. Spring JPA aims to significantly improve the implementation of data access layers by reducing the effort to the amount that's actually needed. As a developer you write your repository interfaces, including custom finder methods, and Spring will provide the implementation automatically.

Source: http://www.springsource.org/spring-data/jpa

Utility classes

TraceInterceptor class is an AOP-based utility class to help us debug our application. This is a subclass of CustomizableTraceInterceptor (see Spring Data JPA FAQ)

Next

In the next section, we will focus on the configuration files and create them accordingly. Click here to proceed.

---

Share the joy: blogger tutorials Social Bookmarking Blogger Widget I'm reading: Spring Security 3.1 - Implement UserDetailsService with Spring Data JPA (Part 2) ~

Subscribe by reader Subscribe by email Share