Complete Web Application: Angular Twitter Bootstrap Spring MVC, Data and Security

55

Posted on November 3, 2013 by

Share it now!

Hello, how are you?

Today we will see how to create a complete Java web application using Spring, Angular, JQuery, Twitter Bootstrap, Tiles, Maven, Tomcat, JPA/Hibernate.

The project that will be done here in this post will be used in another post that I will write, because of this future post, in this post will be described a detailed environment configuration. I will be using linux as my operational system (OS), but almost nothing will change if you use Windows or other OS.

I received a lot of emails asking for a post using Spring in a full web application, all the applications already posted here were using JEE technology (JSF, EJB, JPA). In this post we will see a project using Spring framework with the following modules: Spring MVC, SpringData e Spring Security. We will see how to do internationalization (i18n) with SpringMVC and templates with Tiles framework.

Postgre will be the database used here, but if you want use it with MySQL just add the MySQL jar to the project and change some configuration. In this post will be displayed both Postgre and MySQL configurations.

It is possible to find the source code of this project in the last page of this post, and to make everybody happy, 3 downloading ways will be available in the end of the post. In this post we will focus in the Spring/JPA code and some of the JPS code highlighting the Angular and Bootstrap libraries, all the JSP code, classes and configurations can be downloaded in the last page.

What we will see in here:

Page 02: Environment Setup
Page 03: Creating the project
Page 04: Understanding the “pom.xml”, “log4j.xml” and the “context.xml” files
Page 05: Creating the Spring and the project XMLs
Page 06: Tiles – Page templates
Page 07: Project Model Classes
Page 08: Using SpringData as Repository (DAO); creating User Service
Page 09: Using SpringData as Repository (DAO); creating Contact Service
Page 10: Creating the Controllers
Page 11: Using Restful approach with SpringMVC
Page 12: Understanding the Login, SpringMVC Interceptor and the Security Rules
Page 13: First Contact with Angular.js and the SpringMVC
Page 14: Using Angular.js bind in a HTML table
Page 15: Internationalization (i18n) with Spring
Page 16: Understanding the Twitter Bootstrap role
Page 17: Running the project

Let us get started!

Response to Complete Web Application: Angular Twitter Bootstrap Spring MVC, Data and Security

    • uaihebert Post author

      Hello John.

      If you take a look into the persistence.xml file you will see a configuration with the value update.

      All you need is to create the database and run the project.

      If you want to run it with MySQL you should update the database related code, just as the post says.

      Thanks for passing by.

  1. Miguel Salinas Gancedo

    The first one it’s a complete great example, but I have a problem.

    I used mysql database to test your web app and configure de tomcat context to use mysql. EveryThing looks ok initially. I configure some users on system-user table to logon in the system and create some contacts.

    But when I logon and I go to the contacts option menu option and create a new contact, the system don’t show any error, but the contact is not created in the table. Also if I insert from mysql tables a new contact and refresh the web app, also any contact is showed in the web. The web app don’t do any CRUD on the table Contact. What is the problem??

    best regards

    • uaihebert Post author

      Hello Miguel,

      One thing that you could do is to change de LOG level from “INFO” to “DEBUG” in the log4j.xml to see if any error pops up.

      I can not tell you what error is without an error message.

      Thanks for passing by.

    • marouen

      hello,

      can you please send me your example how you Run it with mysql ?
      i like to do it with MySql but till now, using Postgres that i think is less useful than MySql…
      =
      Thanks

      • uaihebert Post author

        Marouen, good afternoon.

        I do not have a MySQL sample. In the post it is detailed all the codes that you should change to use MySQL.

        Thanks for passing by.

  2. Goran

    Hi,
    Thanks for the great post.
    I receive the following error in the web browser when trying to start the application:

    HTTP Status 404 – /uaiContacts/public/template/master.jsp
    type Status report
    message /uaiContacts/public/template/master.jsp
    description The requested resource is not available.

    Can you please tell me what could be wrong ?
    All the jsp are in the places like tutorial says, and the tiles.xml is copied from you source code.
    What am I doing wrong ?

    Thanks

    • uaihebert Post author

      Goran, good night.

      It looks like you service did not start. Take a look at the log to see if it has any error when it starts.

      Thanks for passing by.

      • Goran

        Hi,

        I finally resolved the problem.
        The problem was in tiles.xml file where the configuration path to *.jsp files cause the problem (on my machine).
        In the example, the path to the *.jsp files is “/public/template/master.jsp” but after I changed to “/WEB-INF/public/template/master.jsp” everything is working fine. How in your example this works without “WEB-INF” ?

        Thanks for the replay,
        Goran

  3. marouen

    hello,
    thank you very much for this Rich Example, i found a lot for what i was looking for, i can run you project on Postgres but not with MySql and i did all the required modification, the problem is With MySQL5InnoDBDialect.

    i would like to know how to create a form:select (comboBox) in your Dialogs, i worked with this example in my ex project:

    ROLE_ADMIN
    ROLE_USER

    But i can’t do it in your project, i think because you used the Java Script to communicate between you Controller and Jsp Pages, ?

    • uaihebert Post author

      Hello, marouen

      You can search in the web for angular select that you will find samples to do it.

      Thanks for passing by. I am sorry for the late response, I was very busy this last month.

  4. Pingback: Complete Web Application: Angular Twitter Boots...

  5. nkine

    Dear Ajay,

    first how are you?

    I dewnload your application and when i start it by tomcat7 i have this problem:
    janv. 27, 2014 9:06:29 AM org.apache.catalina.core.AprLifecycleListener init
    Infos: The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: /usr/lib/jvm/java-7-openjdk-i386/jre/lib/i386/server:/usr/lib/jvm/java-7-openjdk-i386/jre/lib/i386:/usr/lib/jvm/java-7-openjdk-i386/jre/../lib/i386:/usr/lib/jvm/java-7-openjdk-i386/jre/lib/i386/client:/usr/lib/jvm/java-7-openjdk-i386/jre/lib/i386::/usr/java/packages/lib/i386:/usr/lib/i386-linux-gnu/jni:/lib/i386-linux-gnu:/usr/lib/i386-linux-gnu:/usr/lib/jni:/lib:/usr/lib
    janv. 27, 2014 9:06:29 AM org.apache.tomcat.util.digester.SetPropertiesRule begin
    Avertissement: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property ‘source’ to ‘org.eclipse.jst.jee.server:uaiContacts’ did not find a matching property.
    janv. 27, 2014 9:06:29 AM org.apache.coyote.AbstractProtocol init
    Infos: Initializing ProtocolHandler ["http-bio-8080"]
    janv. 27, 2014 9:06:29 AM org.apache.coyote.AbstractProtocol init
    Infos: Initializing ProtocolHandler ["http-bio-8443"]
    janv. 27, 2014 9:06:29 AM org.apache.coyote.AbstractProtocol init
    Infos: Initializing ProtocolHandler ["ajp-bio-8009"]
    janv. 27, 2014 9:06:29 AM org.apache.catalina.startup.Catalina load
    Infos: Initialization processed in 450 ms
    janv. 27, 2014 9:06:29 AM org.apache.catalina.core.StandardService startInternal
    Infos: Démarrage du service Catalina
    janv. 27, 2014 9:06:29 AM org.apache.catalina.core.StandardEngine startInternal
    Infos: Starting Servlet Engine: Apache Tomcat/7.0.47
    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.ApplicationContext log
    Infos: No Spring WebApplicationInitializer types detected on classpath
    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.StandardContext listenerStart
    Grave: Exception lors de l’envoi de l’évènement contexte initialisé (context initialized) à l’instance de classe d’écoute (listener) org.springframework.web.context.ContextLoaderListener
    java.lang.NoClassDefFoundError: org/slf4j/LoggerFactory
    at org.apache.commons.logging.impl.SLF4JLogFactory.getInstance(SLF4JLogFactory.java:156)
    at org.apache.commons.logging.impl.SLF4JLogFactory.getInstance(SLF4JLogFactory.java:132)
    at org.apache.commons.logging.LogFactory.getLog(LogFactory.java:685)
    at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:270)
    at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:111)
    at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4939)
    at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5434)
    at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1559)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1549)
    at java.util.concurrent.FutureTask.run(FutureTask.java:262)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
    at java.lang.Thread.run(Thread.java:744)
    Caused by: java.lang.ClassNotFoundException: org.slf4j.LoggerFactory
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1702)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1547)
    … 14 more

    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.StandardContext startInternal
    Grave: Error listenerStart
    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.StandardContext startInternal
    Grave: Erreur de démarrage du contexte [/uaiContacts] suite aux erreurs précédentes
    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.ApplicationContext log
    Infos: Closing Spring root WebApplicationContext
    janv. 27, 2014 9:06:30 AM org.apache.catalina.core.StandardContext listenerStop
    Grave: Exception lors de l’envoi de l’évènement contexte détruit (context destroyed) à l’instance de classe d’écoute org.springframework.web.context.ContextLoaderListener
    java.lang.NoClassDefFoundError: org/slf4j/LoggerFactory
    at org.apache.commons.logging.impl.SLF4JLogFactory.getInstance(SLF4JLogFactory.java:156)
    at org.apache.commons.logging.impl.SLF4JLogFactory.getInstance(SLF4JLogFactory.java:132)
    at org.apache.commons.logging.LogFactory.getLog(LogFactory.java:685)
    at org.springframework.web.context.ContextCleanupListener.(ContextCleanupListener.java:43)
    at org.springframework.web.context.ContextLoaderListener.contextDestroyed(ContextLoaderListener.java:144)
    at org.apache.catalina.core.StandardContext.listenerStop(StandardContext.java:4980)
    at org.apache.catalina.core.StandardContext.stopInternal(StandardContext.java:5626)
    at org.apache.catalina.util.LifecycleBase.stop(LifecycleBase.java:232)
    at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:160)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1559)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1549)
    at java.util.concurrent.FutureTask.run(FutureTask.java:262)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
    at java.lang.Thread.run(Thread.java:744)

    janv. 27, 2014 9:06:30 AM org.apache.coyote.AbstractProtocol start
    Infos: Starting ProtocolHandler ["http-bio-8080"]
    janv. 27, 2014 9:06:30 AM org.apache.coyote.AbstractProtocol start
    Infos: Starting ProtocolHandler ["http-bio-8443"]
    janv. 27, 2014 9:06:30 AM org.apache.coyote.AbstractProtocol start
    Infos: Starting ProtocolHandler ["ajp-bio-8009"]
    janv. 27, 2014 9:06:30 AM org.apache.catalina.startup.Catalina start
    Infos: Server startup in 1472 ms

    • uaihebert Post author

      Hello nkine,

      To run this project in a Tomcat, without the maven plugin, you should use add the libraries described in the pom.xml. You will find the needed dependencies described at the tomcat7 plugin.

      Thanks for passing by.

        • uaihebert Post author

          Hello Nkine,

          If you follow all the steps of the post you will have no problem.

          If the dependency still missing check if the problem is not a corrupted file in your local maven repository.

          Thanks for passing by.

  6. Javier Posadas

    Great Post !
    It worked perfect in my enviroment (SpringSource 3.4.0).
    What really surprised me was the use of the Tomcat plugin, it really can make easier to configure development enviroment.
    I have a question for you. What if I want to deploy project like this to production, in a Tomcat Server or another, what changes are necessary (additional xml files, etc.) and how I can make the deployment ? I just generate the WAR ?
    The Tomcat plugin won´t cause any problems ?

    Thanks in advance.

    Regards, Javier.

    • uaihebert Post author

      Javier, thanks for the feedback.

      If you want to run it in a Tomcat you will need to add all jars described in tomcat plugin of the pom.xml; just the jars of the tomcat7 plugin is needed.

      You will need to copy the configurations of the files found in the tomcat folder.

      Just generate the war file (mvn clean install) and copy the file to the webapps folder.

      Tomcat plugin is just activated by maven. [=

      Thanks for passing by! \o_

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *