spring examples

Thursday, December 10, 2015

Securing Rest Service with Spring Security

Time needed to complete ~25 minutes

1.Introduction

Rest Services are common today and the change to be asked to develop one and secure it is
high, this article will demonstrate how to do that.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.8

3- Tomcat 7.0.55

4- Eclipse Mars 4.5.1

5- Spring 4.1.8
6- Spring Security 4.0.2
7-MySql 5

3.Project Structure

Picture 3.1: Project structure

4. Pojo and Rest Service

- Person pojo class will be used as simple model with, Listing 4.1.

Listing 4.1: Person pojo

   
package org.phoenix.model;

import java.io.Serializable;


public class Person implements Serializable {

 private static final long serialVersionUID = 14567946798436034L;

 private int id; 
 private String name; 
 private String surname; 
 private double salary;

 public Person() {
 }

 public Person(int id, String name, String surname, double salary) {  
  this.id = id;
  this.name = name;
  this.surname = surname;
  this.salary = salary;
 }

 public int getId() {
  return id;
 }

 public void setId(int id) {
  this.id = id;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getSurname() {
  return surname;
 }

 public void setSurname(String surname) {
  this.surname = surname;
 }

 public double getSalary() {
  return salary;
 }

 public void setSalary(double salary) {
  this.salary = salary;
 }

 @Override
 public String toString() {
  return "Person [id=" + id + ", name=" + name + ", surname=" + surname + ", salary=" + salary + "]";
 }

 @Override
 public int hashCode() {
  final int prime = 31;
  int result = 1;
  result = prime * result + id;
  result = prime * result + ((name == null) ? 0 : name.hashCode());
  long temp;
  temp = Double.doubleToLongBits(salary);
  result = prime * result + (int) (temp ^ (temp >>> 32));
  result = prime * result + ((surname == null) ? 0 : surname.hashCode());
  return result;
 }

 @Override
 public boolean equals(Object obj) {
  if (this == obj)
   return true;
  if (obj == null)
   return false;
  if (getClass() != obj.getClass())
   return false;
  Person other = (Person) obj;
  if (id != other.id)
   return false;
  if (name == null) {
   if (other.name != null)
    return false;
  } else if (!name.equals(other.name))
   return false;
  if (Double.doubleToLongBits(salary) != Double.doubleToLongBits(other.salary))
   return false;
  if (surname == null) {
   if (other.surname != null)
    return false;
  } else if (!surname.equals(other.surname))
   return false;
  return true;
 }

}

- Rest Service with 3 methods that will be secured in Listing 4.2.

Listing 4.2: Rest Controller

  

 package org.phoenix.app;  
   
 import java.util.Collection;  
 import java.util.HashMap;  
 import java.util.Map;  
   
 import org.springframework.web.bind.annotation.PathVariable;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 import org.springframework.web.bind.annotation.RestController;  
   
 import org.phoenix.model.Person;  
   
 /*  
  * This is a secured path /p, rest ws   
  *   
  * */  
   
   
 @RestController  
 @RequestMapping("/p")  
 public class PersonRest {  
    
  public static final Map<integer erson=""> map = new HashMap<integer erson="">();  
  {  
  map.put(1, new Person(1,"John","Smith",1000.0));  
  map.put(2, new Person(2,"Bill","Gates",2000.0));  
  map.put(3, new Person(3,"Steve","Balmers",3000.0));  
  map.put(4, new Person(4,"Larry","King",5000.0));  
  }  
    
    
  @RequestMapping(value="/test", method= RequestMethod.GET)  
  public String test(){  
  return "This is a test";  
  }  
    
    
  @RequestMapping("/{id}")  
  public Person getPersonById(@PathVariable int id){  
    
  Person p = map.get(id);  
     
  if(p == null){  
   p = new Person(-1,"Error","No person with id ="+id,-1.0);  
  }   
    
  return p;  
  }  
    
    
  @RequestMapping("/all")  
  public Collection<person> getAllPersons(){   
  return map.values();  
  }  
    
   
 }

5. Spring Configuration

- Spring security configuration Listing 5.1. The path that will be /p/ , only authorized persons
with role ROLE_REST will be able to access the service, the users,roles and passwords are
stored in DB.
Note: don't forget to change username and password for database in security-context file

Listing 5.1: Security Configuration

 <?xml version="1.0" encoding="UTF-8"?>  
   
 <beans:beans xmlns:security="http://www.springframework.org/schema/security"  
      xmlns:beans="http://www.springframework.org/schema/beans"   
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
      xsi:schemaLocation="http://www.springframework.org/schema/beans  
   http://www.springframework.org/schema/beans/spring-beans.xsd  
   http://www.springframework.org/schema/security  
   http://www.springframework.org/schema/security/spring-security-4.0.xsd">  
   
      <security:http pattern="/p/**" create-session="stateless">  
           <security:intercept-url pattern='/**'  
                access="hasRole('ROLE_REST')" />  
           <security:http-basic />  
      </security:http>  
   
   
      <security:authentication-manager>  
           <security:authentication-provider>  
                <security:jdbc-user-service  
                data-source-ref="xdataSource"  
                authorities-by-username-query="select email,authority 
                                               from authority where email=?"  
                users-by-username-query="select email, password, enabled 
                                         from user where email=?" />  
           </security:authentication-provider>  
      </security:authentication-manager>  
   
      <beans:bean id="xdataSource"  
           class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
           <beans:property name="driverClassName" value="com.mysql.jdbc.Driver" />  
           <beans:property name="url"  
                value="jdbc:mysql://localhost:3306/rest_db" />  
           <beans:property name="username" value="yourUsername" />  
           <beans:property name="password" value="youtPassword" />  
      </beans:bean>  
   
 </beans:beans>

6. Database tables

Listing 6.1: DDL for creating tables

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(60) NOT NULL,
  `password` varchar(128) NOT NULL,
  `enabled` tinyint(1) unsigned zerofill NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`),
  UNIQUE KEY `UK_ob8kqyqqgmefl0aco34akdtpe` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;


CREATE TABLE `authority` (
  `email` varchar(60) NOT NULL,
  `authority` varchar(80) NOT NULL,
  PRIMARY KEY (`email`,`authority`),
  KEY `email` (`email`),
  CONSTRAINT `email_fk7` FOREIGN KEY (`email`) REFERENCES `user` (`email`)
  ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


insert into `user` 
values (20,'example@gmail.com','1b4f0e9851971998e732078544c96b36c3d01cedf7caa332359d6f1d83567014',1);
insert into `user` 
values (21,'user2@yahoo.com','60303ae22b998861bce3b28f33eec1be758a213c86c93c076dbe9f558c11c752',1);

insert into `authority` 
values ('example@gmail.com','ROLE_REST');
insert into `authority` values 
('user2@yahoo.com','ROLE_USER');

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

7.1- In browser type http://localhost:8080/SecureRestExample/ will go to home page that is not secure , typing
http://localhost:8080/SecureRestExample/ p/test
http://localhost:8080/SecureRestExample/ p/all
http://localhost:8080/SecureRestExample/ p/1 will ask for username and password
entering
username: example@gmail.com
password: 1b4f0e9851971998e732078544c96b36c3d01cedf7caa332359d6f1d83567014
will access rest service, Picture 7.1.

Picture 7.1: Calling rest service result

7.2- OR can run CallRestServiceAppProgramatically class that uses RestTemplate from eclipse project ExampleRestClient.

8. Eclipse Project

Secured Rest Application Project

Rest Client Project(Calling from Java code)

Friday, October 10, 2014

websocket ActiveMQ

Time needed to complete ~40 minutes

1.Introduction

This post will demonstrate how to use websockets with activeMQ. The client will receive
data from message broker using stomp protocol via websockets.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.8

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring 3.1.1.
6- jQuery and plugins
7- Stomp protocol (stomp.js)
8-ActiveMQ 5.10.0 - Link to home Page
9- Web browser supporting websockets

3.Project Structure

Picture 3.1: Project structure

4. Controller

- HomeController Listing 4.1, is for displaying web page.

Listing 4.1: PageController

   
  package org.phoenix.Controller;  
   
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
   
   
 @Controller  
 public class HomeController {  
        
        
      @RequestMapping(value = "/", method = RequestMethod.GET)  
      public String home(Model model) {  
                       
           return "stock";  
      }  
        
 }

- LiveRandomData class, listing 4.2, will connect and send messages to message broker, new message will be generated every 150 ms, it will send messages to defined destination simData , each message is a list of company objects that contains five companies with the stock price and change, the prices and change data is generated in method generateRandomdata().

note: don't forget to change phoenix-PC in MESSAGE_BROKER_URL to ip address or computer name where ActiveMQ is running.

Listing 4.2: LiveRandomData controller

 
   
public class LiveRandomData{  
        
      private static final Random GENERATOR = new Random();  
      private static final DecimalFormat DF = new DecimalFormat("#.##");  
             
      // Change phoenix-PC to IP or pc name where activeMQ is running  
      private static final String MESSAGE_BROKER_URL = "tcp://phoenix-PC:61616";    
        private static final String DESTINATION = "simData";  
      private static final Gson GSON = new Gson();  
   
   
      private static Map<String, Double> DATA_MAP = new HashMap<String, Double>();  
      static {       
           DATA_MAP.put("TOMATO", new Double(200.0));  
           DATA_MAP.put("CBM", new Double(120.0));  
           DATA_MAP.put("LINK", new Double(124.0));  
           DATA_MAP.put("MOON", new Double(156.0));  
           DATA_MAP.put("HIC", new Double(60.0));  
      }  
             
                      
      public static void main(String args[]) throws Exception {  
             
           //Connect to message broker  
           ConnectionFactory connectionFactory = new ActiveMQConnectionFactory(MESSAGE_BROKER_URL);  
           Connection connection = connectionFactory.createConnection();  
           connection.start();  
   
           // create session and topic  
           Session session = connection.createSession(false,Session.AUTO_ACKNOWLEDGE);  
           Destination destination = session.createTopic(DESTINATION);  
             
           MessageProducer producer = session.createProducer(destination);  
           TextMessage message = session.createTextMessage();  
             
           LiveRandomData liveRandomData = new LiveRandomData();  
   
           // 500 messages will be sent to message broker, a message every 150 ms.   
           for (int i = 0; i < 500; i++) {  
                List<Company> list = liveRandomData.generateRandomdata();  
                message.setText(GSON.toJson(list));  
                producer.send(message);  
   
                TimeUnit.MILLISECONDS.sleep(150);  
           }  
             
           connection.close();  
      }  
   
        
      private List<Company> generateRandomdata() {  
        
           List<Company> result = new ArrayList<Company>();            
           String changeDirection;            
          
           for(String companyName : DATA_MAP.keySet()){                 
                  
                double r = GENERATOR.nextGaussian()/10;                
                changeDirection = (r > 0) ? "up":"down";  
                double newPrice = DATA_MAP.get(companyName).doubleValue() + (r * DATA_MAP.get(companyName).doubleValue() );  
                  
                Company company = new Company(companyName,DF.format(newPrice),changeDirection);  
                                 
                result.add(company);                                
           }  
             
           return result;  
      }  
   
 }

5. View

- Page stock.jsp contains a table Listing 5.1 where the data will be displayed.

Listing 5.1: stock.jsp table

 <div>  
     <button id="connect" onclick="connect();">Connect</button>  
     <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  
   </div>  
   
           <table>  
                <tr >  
                     <th>Company</th>  
                     <th>Price</th>  
                     <th>Change</th>       
                     <th>Plot</th>                      
                </tr>  
                  
                <tbody>  
                <tr id="TOMATO">  
                     <td id="company">TOMATO</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotTOMATO"></td>                      
                </tr>                 
                <tr id="CBM">  
                     <td id="">CBM</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotCBM"></td>                      
                </tr>                 
                <tr id="LINK">  
                     <td id="company">LINK</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotLINK"></td>                           
                </tr>                 
                <tr id="MOON">  
                     <td id="">MOON</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotMOON"></td>                      
                </tr>  
           <tr id="HIC">  
                     <td id="">HIC</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotHIC"></td>                      
                </tr>       
       </tbody>                  
           </table>

6. Configuration

-In /webapp/WEB-INF/spring/appServlet/servlet-context.xml Listing 6.1.

Listing 6.1: servlet-context.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans:beans xmlns="http://www.springframework.org/schema/mvc"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
      xmlns:beans="http://www.springframework.org/schema/beans"  
      xmlns:context="http://www.springframework.org/schema/context"  
      xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd  
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd  
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">  
   
      <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->  
        
      <!-- Enables the Spring MVC @Controller programming model -->  
      <annotation-driven />  
   
      <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->  
      <resources mapping="/resources/**" location="/resources/" />  
   
      <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->  
      <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
           <beans:property name="prefix" value="/WEB-INF/views/" />  
           <beans:property name="suffix" value=".jsp" />  
      </beans:bean>  
        
      <context:component-scan base-package="org.phoenix" />  
             
 </beans:beans>

7. Connection & data display

- Javascript is used to connect to server and get the data Listing 7.1, it is assumed that ActiveMQ is running on the local machine if not change localhost to ip address where ActiveMQ is running, the default port for websocket in ActiveMQ is 61614 this value is defined in apache-activemq-5.10.0/conf/activemq.xml file, the connect() function will initialize stompClient, disable heartbeats(see note), connect to message broker, connect_callback will subscribe to simData topic and error_callback will handle error messages. When message is received callback will handle it.

Note: As to the date of writing this post in ActiveMQ 5.10.0 there is a bug that disconnets the client with message: "Whoops! lost conection to ws://localhost:61614" for this reason heart beats are disabled and in error_callback when connection is lost it will be automatically established again.

Listing 7.1: function to connect, disconnect and handling messages

 var url = "ws://localhost:61614/stomp";  
 var stompClient = null;  
   
 function setConnected(connected) {  
      document.getElementById('connect').disabled = connected;  
      document.getElementById('disconnect').disabled = !connected;            
 }  
   
   
      var connect_callback = function() {  
           stompClient.subscribe("/topic/simData", callback);  
      }  
   
      var error_callback = function(error) {  
           console.log(error);  
           connect(); // This to prevent Whoops! lost connection to ws://localhost:61614/Stomp bug in activeMQ  
      };  
   
      function connect() {  
   
           for (var i = 0; i < 5; i++) {  
                plot[companies[i]] = $.plot($("#Plot" + companies[i]),  
                          [ initData(i) ], options);  
           }  
   
           stompClient = Stomp.client(url,"v11.stomp");  
           stompClient.heartbeat.outgoing = 0;  
           stompClient.heartbeat.incoming = 0;  
           stompClient.connect("", "", connect_callback, error_callback);  
           setConnected(true);  
      }  
   
      function disconnect() {  
           stompClient.disconnect(function() {});  
           setConnected(false);  
      }  
   
      var callback = function(message) {  
   
           if (message) {  
   
                var companylist = JSON.parse(message.body);  
   
                for (var i = 0; i < companylist.length; i++) {  
                     $("#" + companylist[i].name + " td:eq(1)").text(  
                               companylist[i].price);  
   
                     if (companylist[i].change == "up") {  
                          $("#" + companylist[i].name + " td:eq(2)").children('img')  
                                    .attr("src", "/mb/style/up.png");  
                          $("#" + companylist[i].name + " td:eq(2)").css(  
                                    "background-color", "#C3FDB8");  
                     } else {  
                          $("#" + companylist[i].name + " td:eq(2)").children('img')  
                                    .attr("src", "/mb/style/down.png");  
                          $("#" + companylist[i].name + " td:eq(2)").css(  
                                    "background-color", "#ffa796");  
                     }  
   
                     plot[companylist[i].name].setData([ getData(  
                               companylist[i].price, i) ]);  
                     plot[companylist[i].name].draw();  
                }  
   
           } else {  
                alert("Empty message");  
           }  
      }

8. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.
-Start ActiveMQ (E:/Downloads/apache-activemq-5.10.0/bin/win64/activemq.bat for 64bit windows OS)

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.
- In browser type http://localhost:8080/mb/ to see the form picture 7.1. Clicking Connect button, in eclipse run main method in LiveRandomData.

Picture 8.1: Demonstration page

- Video 8.1, shows the display of data.

video 8.1: Data received from server via websocket

9. Eclipse Project

Download project source code

Friday, October 3, 2014

Spring websocket

Time needed to complete ~40 minutes

1.Introduction

This post will demonstrate how to use websockets with spring. The client will receive
data from server using stomp protocol via websockets.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring 4.0.6
6- jQuery and plugins
7- Stomp protocol
8- Web browser supporting websockets

3.Project Structure

Picture 3.1: Project structure

4. Controllers

- Two controllers are used, PageController Listing 4.1, is for displaying web page. LiveRandomData Listing 4.2 is for generating random prices every defined period of time.

Listing 4.1: PageController

   
  package org.phoenix.controller;  
   
 import java.util.Map;  
   
 import javax.servlet.http.HttpServletRequest;  
   
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
   
 @Controller  
 @RequestMapping("/live")  
 public class PageController {  
        
      @RequestMapping(value = "/show", method = RequestMethod.GET)  
      public String displayForm(Map<String, Object> map,Model model, HttpServletRequest request) {  
           return "stock";  
      }  
   
 }

- Method retriveData() is anotated with @Scheduled it will run every 800 ms as it has fixeDdelay = 800 , it will send messages to defined destination /topic/simData , each message is a list of company objects that contains five companies with the stock price and change, the prices and change data is generated in method generateRandomdata().

Listing 4.2: LiveRandomData controller

 
   
 package org.phoenix.live;  
   
 import java.text.DecimalFormat;  
 import java.util.ArrayList;  
 import java.util.HashMap;  
 import java.util.List;  
 import java.util.Map;  
 import java.util.Random;  
   
 import org.phoenix.model.Company;  
 import org.phoenix.model.RandomData;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.messaging.simp.SimpMessagingTemplate;  
 import org.springframework.scheduling.annotation.Scheduled;  
 import org.springframework.stereotype.Controller;  
   
   
 @Controller  
 public class LiveRandomData{  
        
      private static final Random GENERATOR = new Random();  
      private static final DecimalFormat DF = new DecimalFormat("#.##");  
        
      @Autowired   
      private SimpMessagingTemplate msgTempx;  
        
      private static final String DESTINATION = "/topic/simData";  
   
   
      private static Map<String, Double> DATA_MAP = new HashMap<String, Double>();  
      static {       
           DATA_MAP.put("TOMATO", new Double(200.0));  
           DATA_MAP.put("CBM", new Double(120.0));  
           DATA_MAP.put("LINK", new Double(124.0));  
           DATA_MAP.put("MOON", new Double(156.0));  
           DATA_MAP.put("HIC", new Double(60.0));  
      }  
             
      @Scheduled(fixedDelay = 800)                
      public void retriveData() throws Exception {            
           List<Company> companyList = generateRandomdata();            
           RandomData randomData = new RandomData(companyList);  
           msgTempx.convertAndSend(DESTINATION, randomData);  
      }  
   
        
      private List<Company> generateRandomdata() {  
        
           List<Company> result = new ArrayList<Company>();            
           String changeDirection;            
          
           for(String companyName : DATA_MAP.keySet()){                 
                  
                double r = GENERATOR.nextGaussian()/10;                
                changeDirection = (r > 0) ? "up":"down";  
                double newPrice = DATA_MAP.get(companyName).doubleValue() + (r * DATA_MAP.get(companyName).doubleValue() );  
                  
                Company company = new Company(companyName,DF.format(newPrice),changeDirection);  
                                 
                result.add(company);                                
           }  
             
           return result;  
      }  
   
 }

5. View

- Page stock.jsp contains a table Listing 5.1 where the data will be displayed.

Listing 5.1: stock.jsp table

 <div>  
     <button id="connect" onclick="connect();">Connect</button>  
     <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  
   </div>  
   
           <table>  
                <tr >  
                     <th>Company</th>  
                     <th>Price</th>  
                     <th>Change</th>       
                     <th>Plot</th>                      
                </tr>  
                  
                <tbody>  
                <tr id="TOMATO">  
                     <td id="company">TOMATO</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotTOMATO"></td>                      
                </tr>                 
                <tr id="CBM">  
                     <td id="">CBM</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotCBM"></td>                      
                </tr>                 
                <tr id="LINK">  
                     <td id="company">LINK</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotLINK"></td>                           
                </tr>                 
                <tr id="MOON">  
                     <td id="">MOON</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotMOON"></td>                      
                </tr>  
           <tr id="HIC">  
                     <td id="">HIC</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotHIC"></td>                      
                </tr>       
       </tbody>                  
           </table>

6. Configuration

-In /webapp/WEB-INF/spring/appServlet/servlet-context.xml Listing 6.1, in the websocket:message-broker definition the application destination prefix /app is used when sending messages to the server, /stock is the endpoint and it is used by the client to connect to url path using sockjs option.

Listing 6.1: servlet-context.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans:beans xmlns:mvc="http://www.springframework.org/schema/mvc"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"  
      xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"  
      xmlns:task="http://www.springframework.org/schema/task"  
      xmlns:websocket="http://www.springframework.org/schema/websocket"  
      xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd  
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd  
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd  
           http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-4.0.xsd  
           http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.0.xsd">  
   
      <mvc:annotation-driven />  
      <task:annotation-driven />  
      <context:component-scan base-package="org.phoenix" />  
        
      <mvc:resources mapping="/resources/**" location="/resources/" />  
   
      <beans:bean id="viewResolver"  
           class="org.springframework.web.servlet.view.InternalResourceViewResolver"  
           p:prefix="/WEB-INF/views/" p:suffix=".jsp" />  
   
      <websocket:message-broker application-destination-prefix="/app">  
           <websocket:stomp-endpoint path="/stock">  
                <websocket:sockjs />  
           </websocket:stomp-endpoint>  
           <websocket:simple-broker prefix="/topic" />  
      </websocket:message-broker>  
   
 </beans:beans>

7. Connection & data display

- Javascript is used to connect to server and get the data Listing 7.1, the connect() function will use SockJs to connect to endpoint /sws/stock where /sws is the path specified in pom.xml. after that stompClient is initialized and used to connect and subscribe to /topic/simData, when ever message is received dispay() function will handle it and display data . For using sockjs files sockjs-0.3.4.js and stomp.js are included in stock.jsp

Listing 7.1: function to connect, disconnect and handling messages

  function connect() {  
      var socket = new SockJS('/sws/stock');  
      stompClient = Stomp.over(socket);  
             
      for(var i = 0; i < 5; i++){       
            plot[companies[i]] = $.plot($("#Plot"+companies[i]), [ initData(i) ], options);  
           }  
        
      stompClient.connect({}, function(frame) {  
           setConnected(true);                 
           stompClient.subscribe('/topic/simData', function(retriveData) {                      
                display(retriveData.body);  
           });  
      });  
 }  
   
 function disconnect() {  
      stompClient.disconnect();  
      setConnected(false);  
      console.log("Disconnected");  
 }  
   
 function setConnected(connected) {  
      document.getElementById('connect').disabled = connected;  
      document.getElementById('disconnect').disabled = !connected;            
 }  
   
 function display(message) {  
        
      if (message) {  
   
           var companylist = JSON.parse(message).companyList;  
             
           for (var i = 0; i < companylist.length; i++) {  
                $("#" + companylist[i].name + " td:eq(1)").text(companylist[i].price);  
   
                if (companylist[i].change == "up") {  
                     $("#" + companylist[i].name + " td:eq(2)").children('img').attr("src","/sws/style/up.png");  
                     $("#" + companylist[i].name + " td:eq(2)").css("background-color","#C3FDB8");  
                } else {  
                     $("#" + companylist[i].name + " td:eq(2)").children('img').attr("src","/sws/style/down.png");  
                     $("#" + companylist[i].name + " td:eq(2)").css("background-color","#ffa796");  
                }  
                  
                  
                plot[companylist[i].name].setData([ getData(companylist[i].price,i) ]);  
                plot[companylist[i].name].draw();  
           }  
   
      } else {  
           alert("Empty message");  
      }  
 }

8. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/sws/live/show to see the form picture 7.1. Clicking Connect button to start receiving data, Disconnect button to stop.

Picture 8.1: Demonstration page

- Video 8.1, shows the display of data.

video 8.1: Data received from server via websocket

9. Eclipse Project

Download project source code

Sunday, September 28, 2014

Form Wizard

Time needed to complete ~25 minutes
Prerequisite File Upload & Saving

1.Introduction

After uploading files and write them to the file system in the previous 2 articles, now it's time to add some style to the form to look like wizard.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring Core 3.2.9
6- jquery 1.11.1
7- FormToWizard plugin

3.Project Structure

Picture 3.1: Project structure

4. Plugin and css

- FormToWizard -Home page link- is plugin that will transform form to wizard the javascript file
for plugin is in project path /fileUpload3/src/main/webapp/js/formToWizard.js it uses style/form2wizard.css

- Add formTowizard.js and form2wizard.css to carAdForm.jsp Listing 4.1.

Listing 4.1: CarAdForm.jsp

   
  <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
   
 <style>  
 .err {  
      color: red;  
      font-weight: bold;  
 }  
 </style>  
 <link rel="stylesheet" type="text/css" href="<c:url value="/style/form2wizard.css"/>">  
   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script type="text/javascript" src="<c:url value="/js/formToWizard.js"/>"></script>  
 <script type="text/javascript">  
     $(document).ready(function(){  
       $("#UploadForm").formToWizard({ submitButton: 'saveButton' })  
     });  
   </script>  
 </head>  
 <body>  
      <div id="main">  
   
           <div id="content">  
   
                <form:form id="UploadForm" method="post" commandName="car" action="/fu3/carAd/save"  
                     enctype="multipart/form-data">  
                     <form:errors path="*" cssClass="err" />  
                     <fieldset>  
                          <legend>Car Data</legend>  
                          <table>  
                               <tr>  
                                    <td>Manufacturer</td>  
                                    <td><form:input path="manufacturer" id="manufacturer"/></td>  
                                    <td><form:errors path="manufacturer" cssClass="err" /></td>  
                               </tr>  
   
                               <tr>  
                                    <td>Model</td>  
                                    <td><form:input path="model" id="model"/></td>  
                                    <td><form:errors path="model" cssClass="err" />     </td>  
                               </tr>  
   
                               <tr>  
                                    <td>Note</td>  
                                    <td><form:textarea path="note" id="note" rows="5" cols="19" /></td>  
                                    <td><form:errors path="note" cssClass="err" /></td>  
                               </tr>  
                          </table>  
                          <br />  
                     </fieldset>  
                     <fieldset>  
                          <legend>Car Files</legend>  
                          <table id="fileTable">  
                               <tr>  
                                    <td><input name="photos[0]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[1]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[2]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                          </table>  
                     </fieldset>  
                     <p>  
                          <input type="submit" id="saveButton" value="Submit" />  
                     </p>  
                </form:form>  
   
           </div>  
   
      </div>  
   
 </body>  
 </html>

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/fu3/carAd/show to see step 1 of the form wizard, picture 7.1.

Picture 7.1: Step 1 of carAdForm

- There is a validation, clicking Next button without filling data in step 1 will show error message,
fill data and click next to display the 2nd step, picture 7.2

Picture 7.2: Step 2 of carAdForm

-Choose file(s) and submit form. This will display success page, Picture 7.3.

Picture 7.3: success page

8. Eclipse Project

Download project source code

Saturday, September 27, 2014

Spring File Upload 2

Time needed to complete ~20 minutes

1.Introduction

This article will show how to submit form that has file(s) to upload and write them to file system using spring framework.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring Core 3.2.9

3.Project Structure

Picture 3.1: Project structure

4. Form and controller

- CarUploadForm bean contains four fields, listing 4.1.

Listing 4.1: CarUploadForm bean

   
 import java.util.List;  
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 public class CarUploadForm {  
   
      @NotEmpty  
      private String manufacturer;  
   
      @NotEmpty  
      private String model;  
   
      @NotEmpty  
      private String note;  
   
      private List<MultipartFile> photos;  
   
      //setters and getters omitted  
   
 }

- CarAdController, Listing 4.2, the displayForm method will show the form in the get request and when the form is submitted saveForm method will handle the form data, save files to path in the file system. DIRECTORY_PATH is where the files will be written, this example used windows network path \\PC-phoenix\car_images , change is to suite your path (car_images is a shared directory) the controller then return success page.

Listing 4.2: CarAdController

 
   
 @Controller  
 @RequestMapping("/carAd")  
 public class CarAdController {  
   
      private static final Logger log = Logger.getLogger(CarAdController.class);  
        
      private static String DIRECTORY_PATH = "\\\\PC-phoenix\\car_images";  
        
      @ModelAttribute("car")  
      public CarUploadForm createformBeanModel() {  
           return new CarUploadForm();  
      }  
   
      @RequestMapping(value = "/show", method = RequestMethod.GET)  
      public String displayForm(Map<String, Object> map,  
                org.springframework.ui.Model model, HttpServletRequest request) {  
           return "carAdForm";  
      }  
   
      @RequestMapping(value = "/save", method = RequestMethod.POST)  
      public String saveForm(@ModelAttribute("car") @Valid CarUploadForm car,  
                BindingResult bindingResult, Model model) {  
   
           if (bindingResult.hasErrors()) {  
                return "carAdForm";  
           }  
   
           List<String> photoList = new ArrayList<String>();  
           for (MultipartFile imageFile : car.getPhotos()) {  
                photoList.add("image Name: " + imageFile.getOriginalFilename() + " and size in bytes:" + imageFile.getSize());  
           }  
   
           try {  
                saveFiles(car.getPhotos());  
           } catch (IOException e) {  
                log.error(e);  
           }  
   
           model.addAttribute("manufacturer", car.getManufacturer());  
           model.addAttribute("model", car.getModel());  
           model.addAttribute("note", car.getNote());  
           model.addAttribute("photoList", photoList);  
           return "success";  
   
      }  
   
      private static void saveFiles(List<MultipartFile> fileList) throws IOException {  
   
           File filesDirectory = new File(DIRECTORY_PATH);  
   
           if (!filesDirectory.exists()) {  
                filesDirectory.mkdirs();  
           }  
   
           for (MultipartFile fileMultipart : fileList) {  
                  
                File file2disk = new File(DIRECTORY_PATH+File.separator+fileMultipart.getOriginalFilename());  
                fileMultipart.transferTo(file2disk);  
           }  
   
      }  
 }

5. View

- Form is in page carAdForm.jsp, Listing 5.1.

Listing 5.1: carAdForm.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <style>  
 .err {  
      color: red;  
      font-weight: bold;  
 }  
 </style>  
 </head>  
 <body>  
      <div id="main">  
   
           <div id="content">  
   
                <form:form method="post" commandName="car" action="/fu1/carAd/save"  
                     enctype="multipart/form-data">  
                     <form:errors path="*" cssClass="err" />  
                     <fieldset>  
                          <table>  
                               <tr>  
                                    <td>Manufacturer</td>  
                                    <td><form:input path="manufacturer" /></td>  
                                    <td><form:errors path="manufacturer" cssClass="err" /></td>  
                               </tr>  
   
                               <tr>  
                                    <td>Model</td>  
                                    <td><form:input path="model" /></td>  
                                    <td><form:errors path="model" cssClass="err" />     </td>  
                               </tr>  
   
                               <tr>  
                                    <td>Note</td>  
                                    <td><form:textarea path="note" rows="5" cols="19" /></td>  
                                    <td><form:errors path="note" cssClass="err" /></td>  
                               </tr>  
                          </table>  
                          <br />  
                     </fieldset>  
                     <fieldset>  
                          <table id="fileTable">  
                               <tr>  
                                    <td><input name="photos[0]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[1]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[2]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                          </table>  
                     </fieldset>  
                     <p>  
                          <input type="submit" value="Submit" />  
                     </p>  
                </form:form>  
   
           </div>  
      </div>  
 </body>  
 </html>

Listing 5.2: Success page

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>       
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 </head>  
 <body>  
 <table>  
  <tr><td>Manufacturer:</td><td>${manufacturer}</td></tr>  
  <tr><td>Model:</td><td>${model}</td></tr>  
  <tr><td>Note:</td><td>${note}</td></tr>  
  <tr></tr>  
    
    <c:forEach items="${photoList}" var="photo">  
       <tr><td>${photo}</td></tr>  
     </c:forEach>  
    
 </table>  
 </body>  
 </html>

6. Configuration

- In resources/spring/application-config.xml is the multipartResolver bean where the maximum size of each uploaded file can specified, Listing 6.1. Each uploaded file is limited to 1MB (1024000) using property maxUploadedSize.

Listing 6.1: multipartResolver bean definition

 <bean id="multipartResolver"  
           class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
           <!-- the maximum file size in bytes -->  
           <property name="maxUploadSize" value="1024000" />  
      </bean>

- configure tomcat to be able to access \\PC-phoenix\car_images by adding file cars.xml to
path to tomcat diretory/conf/Catalina/localhost, cars.xml has one line, Listing 6.2.

Listing 6.2: cars.xml

 <Context docBase="\\PC-phoenix\car_images"/>

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/fu1/carAd/show to see the form picture 7.1.

Picture 7.1: carAdForm

- Enter some data in text field, select some files and Submit. Picture 7.2. There is a server side validation for Manufacturer,model and note fields, if any of them is not entered error message will be shown.

Picture 7.2: carAdForm data

- After submitting the data entered in the carAdForm will be displayed in success page, picture 7.3.

Picture 7.3: success page

8. Eclipse Project

Download project source code

Spring File Upload 1

Time needed to complete ~20 minutes

1.Introduction

This article will show how to submit form that has file(s) to upload using spring framework.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring Core 3.2.9

3.Project Structure

Picture 3.1: Project structure

4. Form and controller

- CarUploadForm bean contains four fields, listing 4.1.

Listing 4.1: CarUploadForm bean

   
 import java.util.List;  
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 public class CarUploadForm {  
   
      @NotEmpty  
      private String manufacturer;  
   
      @NotEmpty  
      private String model;  
   
      @NotEmpty  
      private String note;  
   
      private List<MultipartFile> photos;  
   
      //setters and getters omitted  
   
 }

- CarAdController, Listing 4.2, the displayForm method will show the form in the get request and when the form is submitted saveForm method will handle the form data then return success.jsp page.

Listing 4.2: CarAdController

 package org.phoenix.controller;  
   
 import java.util.ArrayList;  
 import java.util.List;  
 import java.util.Map;  
   
 import javax.servlet.http.HttpServletRequest;  
 import javax.validation.Valid;  
   
 import org.phoenix.bean.CarUploadForm;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.validation.BindingResult;  
 import org.springframework.web.bind.annotation.ModelAttribute;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 import org.springframework.web.multipart.MultipartFile;  
   
 @Controller  
 @RequestMapping("/carAd")  
 public class CarAdController {  
        
        
       @ModelAttribute("car")  
        public CarUploadForm createformBeanModel() {      
          return new CarUploadForm();  
        }  
        
      @RequestMapping(value = "/show", method = RequestMethod.GET)  
      public String displayForm(Map<String, Object> map,org.springframework.ui.Model model,HttpServletRequest request) {  
            return "carAdForm";       
      }       
        
      @RequestMapping(value = "/save", method = RequestMethod.POST)  
      public String saveForm(@ModelAttribute("car") @Valid CarUploadForm car,BindingResult bindingResult, Model model) {            
                       
           if (bindingResult.hasErrors())  
        {          
         return "carAdForm";  
        }  
                  
           List<String> photoList = new ArrayList<String>();  
           for(MultipartFile imageFile : car.getPhotos()){              
             photoList.add("image Name: "+imageFile.getOriginalFilename() +" and size in bytes:"+imageFile.getSize());  
           }  
             
           model.addAttribute("manufacturer",car.getManufacturer());  
           model.addAttribute("model",car.getModel());  
           model.addAttribute("note",car.getNote());  
           model.addAttribute("photoList", photoList);  
           return "success";  
        
      }  
   
 }

5. View

- Form is in page carAdForm.jsp, Listing 5.1.

Listing 5.1: carAdForm.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <style>  
 .err {  
      color: red;  
      font-weight: bold;  
 }  
 </style>  
 </head>  
 <body>  
      <div id="main">  
   
           <div id="content">  
   
                <form:form method="post" commandName="car" action="/fu1/carAd/save"  
                     enctype="multipart/form-data">  
                     <form:errors path="*" cssClass="err" />  
                     <fieldset>  
                          <table>  
                               <tr>  
                                    <td>Manufacturer</td>  
                                    <td><form:input path="manufacturer" /></td>  
                                    <td><form:errors path="manufacturer" cssClass="err" /></td>  
                               </tr>  
   
                               <tr>  
                                    <td>Model</td>  
                                    <td><form:input path="model" /></td>  
                                    <td><form:errors path="model" cssClass="err" />     </td>  
                               </tr>  
   
                               <tr>  
                                    <td>Note</td>  
                                    <td><form:textarea path="note" rows="5" cols="19" /></td>  
                                    <td><form:errors path="note" cssClass="err" /></td>  
                               </tr>  
                          </table>  
                          <br />  
                     </fieldset>  
                     <fieldset>  
                          <table id="fileTable">  
                               <tr>  
                                    <td><input name="photos[0]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[1]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[2]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                          </table>  
                     </fieldset>  
                     <p>  
                          <input type="submit" value="Submit" />  
                     </p>  
                </form:form>  
   
           </div>  
      </div>  
 </body>  
 </html>

Listing 5.2: Success page

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>       
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 </head>  
 <body>  
 <table>  
  <tr><td>Manufacturer:</td><td>${manufacturer}</td></tr>  
  <tr><td>Model:</td><td>${model}</td></tr>  
  <tr><td>Note:</td><td>${note}</td></tr>  
  <tr></tr>  
    
    <c:forEach items="${photoList}" var="photo">  
       <tr><td>${photo}</td></tr>  
     </c:forEach>  
    
 </table>  
 </body>  
 </html>

6. Configuration

Listing 6.1: multipartResolver bean definition

 <bean id="multipartResolver"  
           class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
           <!-- the maximum file size in bytes -->  
           <property name="maxUploadSize" value="1024000" />  
      </bean>

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/fu1/carAd/show to see the form picture 7.1.

Picture 7.1: carAdForm

Picture 7.2: carAdForm data

- After submitting the data entered in the carAdForm will be displayed in success page, picture 7.3.

Picture 7.3: success page

8. Eclipse Project

Download project source code