Thursday, March 8, 2012

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

Introduction

In this tutorial, we will create a simple CRUD application using Spring 3.1 and Neo4j. We will based this tutorial on a previous guide for MongoDB. This means we will re-use our existing design and implement only the data layer to use Neo4j as our data store.


Dependencies

  • Spring core 3.1.0.RELEASE
  • Spring Data Neo4j 2.1.0.M1
  • Neo4j Kernel 1.6
  • Neo4j Cypher 1.6
  • Neo4j Cypher DSL 1.6
  • 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 specification as follows:
  • A CRUD page for managing users
  • Use AJAX to avoid page refresh
  • Users have roles: 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 Neo4j and Spring Data Neo4j and coming from a SQL-background, please take some time to read the following references:

In its simplest form, Neo4j is a NoSQL graph database containing nodes and relationships.

What is Neo4j?

The Neo4j data model consists of nodes and relationships, both of which can have key/value-style properties. What does that mean, exactly? Nodes are the graph database name for records, with property keys instead of column names. That's normal enough. Relationships are the special part. In Neo4j, relationships are first-class citizens, meaning they are more than a simple foreign-key reference to another record, relationships carry information.

Source: Spring Data Neo4j - Chapter 4. Learning Neo4j

What is a Graph database?

A graph database stores data in a graph, the most generic of data structures, capable of elegantly representing any kind of data in a highly accessible way.

“A Graph —records data in→ Nodes —which have→ Properties”

“Nodes —are organized by→ Relationships —which also have→ Properties”

“A Traversal —navigates→ a Graph; it —identifies→ Paths —which order→ Nodes”

“An Index —maps from→ Properties —to either→ Nodes or Relationships”

“A Graph Database —manages a→ Graph and —also manages related→ Indexes”


Source: What is a Graph Database?

From Java to Neo4j

We have two Java classes representing our domain: User and Role. Here is the Class diagram:

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

In Neo4j, User and Role are nodes, and the link between the two is a relationship. In Part 2 we will demonstrate how to declare them as nodes and how to create the relationship.

Here's 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.

Screenshots

Let's preview how the application will look like after it's finished. This is also a good way to clarify further our application's specs. Note: These are the same screenshots you will see from the Spring MVC 3.1 - Implement CRUD with Spring Data MongoDB guide (We're reusing the exact presentation layer).

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 write the Java classes and discuss the application's layers. Click here to proceed.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring MVC 3.1 - Implement CRUD with Spring Data Neo4j (Part 1) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

10 comments:

  1. This is great stuff! Care to connect with me at peter dot neotech... dot com for doing more and attributing to your real name?

    Thanks!

    ReplyDelete
  2. Thanks for this great step by step tutorial.Really made my day.

    Pointer -
    - I don't know why App is not running in IE(9) and Mozilla 11,but it worked great in Chrome 17.

    Thanks..

    ReplyDelete
  3. To be more precise
    In Chrome - All functionality works.
    New/Edit/Delete functionality does not work in IE.
    New/Edit functionality does not work in Firefox.

    Thanks.

    ReplyDelete
  4. I was having the same issues with regards to the jQuery submit calls failing silently from the user.jsp page. I noticed the preventDefault() call inside the two submit calls was referring to a variable, 'event', but the variable was missing from the function parameter list. This is what they look like now:

    $('#newForm').submit(function(event) {
      event.preventDefault();
      submitNewRecord();
    });

    $('#editForm').submit(function(event) {
      event.preventDefault();
      submitUpdateRecord();
    });

    can anyone else confirm that this works for them?

    ReplyDelete
  5. I think it's because I've tested this application in Chrome only. When running non-Chrome browsers, can you enable the developer tools window to see if there are any JavaScript errors?

    @Len, after adding that event variable, did the application work on non-Chrome browsers?

    ReplyDelete
  6. thank you for this tutorial, but i am having trouble running it in eclipse.. i am a total beginner.. what is the process.. do i download the zip from github and then import as existing maven project? once i've done that, how to i build and deploy (step by step for a beginner instructions would be great).. thanks again, i think graph databases are really important, but there is a lack of good tutorials out there..

    ReplyDelete
  7. just to let others know.. i now have it working..
    download the zip from github.. and put the spring-neo4j-tutorial folder somewhere you know.
    in eclipse file->import->maven->existing maven projects
    navigate to the location of the spring-neo4j-tutorial you sorted above
    the project imports and all the dependencies will be downloaded as per the pom.xml
    to run it right-click on the root folder of the project in eclipse package explorer
    select run as->maven build
    this won't work but then you can right-click on the root folder of the project again but this time choose run as->run configurations
    listed under Maven Build should be the configuration you set up in the previous step (should be called spring-neo4j-tutorial)
    click on it
    to the right hand side, in goals enter this:
    tomcat:run
    now you can run as again and it should try and start
    unfortunately i got the following error:

    SEVERE: Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener

    java.lang.NoClassDefFoundError: org/springframework/beans/factory/NoUniqueBeanDefinitionException

    Using this page here i solved it:
    https://github.com/SatishAb/invsys/issues/1

    I did this by adding this dependency to the pom.xml:


    org.springframework
    spring-orm
    3.1.0.RELEASE


    then run as again and it should work..
    navigate to http://localhost:8080/spring-neo4j-tutorial/ and you should see the web app..
    hope this helps someone too..

    thanks again for the tutorial..

    ReplyDelete
  8. having said all that.. i just tried adding a user, but the users list remains blank, even on clicking reload. no errors in the eclipse console. anyone know why or have a fix? thanks

    ReplyDelete
  9. Excellent stuff thank you for your time.

    ReplyDelete
  10. Great stuff Krams please try share something you can Thanks Pro

    ReplyDelete