Wednesday, 13 January 2016

Bootstrap integration with Spring + Hibernate app

In this blog i will demonstrate a simple spring + hibernate app registration integration with bootstrap template.

I have downloaded and used template 2 from this link providing bootstrap template:

http://azmind.com/2015/11/06/bootstrap-login-register-forms-templates/


Project Structure:


NOTE: I have added downloaded assets file from the above link in WebContent folder. Also I have copied index.jsp (located at WebContent > views > index.jsp) from downloaded index.html from the above link.

web.xml
----------------------

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <servlet>
    <servlet-name>sdnext</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/config/sdnext-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>sdnext</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

sdnext-servlet.xml
------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
">
<context:property-placeholder location="classpath:resources/database.properties" />
 <context:component-scan base-package="com.c" />


 <tx:annotation-driven transaction-manager="hibernateTransactionManager"/>
 <mvc:annotation-driven />
<mvc:resources mapping="assets/**" location="/assets" />

 <bean id="jspViewResolver"
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="viewClass"
   value="org.springframework.web.servlet.view.JstlView" />
  <property name="prefix" value="/WEB-INF/views/" />
  <property name="suffix" value=".jsp" />
 </bean>

 <bean id="dataSource"
  class="org.springframework.jdbc.datasource.DriverManagerDataSource">
  <property name="driverClassName" value="${database.driver}" />
  <property name="url" value="${database.url}" />
  <property name="username" value="${database.user}" />
  <property name="password" value="${database.password}" />
 </bean>

 <bean id="sessionFactory"
  class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">
  <property name="dataSource" ref="dataSource" />
  <property name="annotatedClasses">
   <list>
    <value>com.c.model.Register</value>
   </list>
  </property>
  <property name="hibernateProperties">
   <props>
    <prop key="hibernate.dialect">${hibernate.dialect}</prop>
    <prop key="hibernate.show_sql">${hibernate.show_sql}</prop>
    <prop key="hibernate.hbm2ddl.auto">${hibernate.hbm2ddl.auto}</prop>    
   </props>
  </property>
  
 </bean>

 <bean id="hibernateTransactionManager"
  class="org.springframework.orm.hibernate3.HibernateTransactionManager">
  <property name="sessionFactory" ref="sessionFactory" />
 </bean>
</beans>

index.jsp (This file was taken as it is from index.html from the downloaded folder from the above mentioned template link. I just converted the form to JSP and changed form tags to make it a JSP file so that it can interact with controller class.)
-----------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">

    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Login &amp; Register Templates</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

    </head>

    <body>

        <!-- Top content -->
        <div class="top-content">
       
            <div class="inner-bg">
                <div class="container">
               
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>Elopade</strong></h1>
                            <div class="description">
                            <p>
                           <strong> Your DREAMS, Our AMBITION </strong> 
                           
                            </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-5">
                       
                        <div class="form-box">
                        <div class="form-top">
                        <div class="form-top-left">
                        <h3>Login to our site</h3>
                            <p>Enter username and password to log on:</p>
                        </div>
                        <div class="form-top-right">
                        <i class="fa fa-key"></i>
                        </div>
                           </div>
                           <div class="form-bottom">
<form:form method="POST" action="login.html" commandName="loginBean" class="login-form">
<!-- Replace "commandName" with "modelAttribute" and it works just same-->
<%--       <div class="form-group">
           <td><form:label path="id" class="sr-only" for="form-username"> User ID </form:label> </td>
           <td><form:input path="id" type="text" value=""  name="form-username" placeholder="Username..." class="form-username form-control" id="form-username"/> </td>
      </div>
       <div class="form-group">
           <td><form:label class="sr-only" for="form-password" path="password">User Password:</form:label></td>
           <td><form:input path="password" type="password" name="form-password" placeholder="Password..." value="" class="form-password form-control" id="form-password"/></td>
      </div> --%>
<button type="submit" class="btn">Sign in!</button>
  
  </form:form>
                   </div>
                   </div>
               
                <div class="social-login">
                        <h3>...or login with:</h3>
                        <div class="social-login-buttons">
                        <a class="btn btn-link-1 btn-link-1-facebook" href="#">
                        <i class="fa fa-facebook"></i> Facebook
                        </a>
                        <a class="btn btn-link-1 btn-link-1-twitter" href="#">
                        <i class="fa fa-twitter"></i> Twitter
                        </a>
                        <a class="btn btn-link-1 btn-link-1-google-plus" href="#">
                        <i class="fa fa-google-plus"></i> Google Plus
                        </a>
                        </div>
                       </div>
                       
                        </div>
                        
                        <div class="col-sm-1 middle-border"></div>
                        <div class="col-sm-1"></div>
                       
                        <div class="col-sm-5">
                       
                        <div class="form-box">
                        <div class="form-top">
                        <div class="form-top-left">
                        <h3>Sign up now</h3>
                            <p>Fill in the form below to get instant access:</p>
                        </div>
                        <div class="form-top-right">
                        <i class="fa fa-pencil"></i>
                        </div>
                           </div>
                           <div class="form-bottom">
                           <form:form role="form" method="POST" class="registration-form" action="save.html" commandName="loginBean">
      <div class="form-group">
           <form:label path="first_name" class="sr-only" for="form-first-name"> First name </form:label>
           <form:input path="first_name" type="text" value=""  name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name"/> 
      </div>
       <div class="form-group">
          <form:label path="last_name" class="sr-only" for="form-last-name">Last name</form:label>
          <form:input path="last_name" type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name"/>
      </div>

  <div class="form-group">
<form:label path="email_id" class="sr-only" for="form-email">Email</form:label>
 <form:input path="email_id" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email" />
        </div>
<div class="form-group">
<form:label path="about_yourself" class="sr-only" for="form-about-yourself">About yourself</form:label>
<form:textarea path="about_yourself"  name="form-about-yourself" placeholder="About yourself..." class="form-about-yourself form-control" id="form-about-yourself" />
</div>

                       <button type="submit" class="btn">Sign me up!</button>
                </form:form>
                   </div>
                        </div>
                       
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>

        <!-- Footer -->
        <footer>
        <div class="container">
        <div class="row">
       
        <div class="col-sm-8 col-sm-offset-2">
        <div class="footer-border"></div>
        <p>Made by Anli Zaimi at <a href="http://azmind.com" target="_blank"><strong>AZMIND</strong></a> 
        having a lot of fun. <i class="fa fa-smile-o"></i></p>
        </div>
       
        </div>
        </div>
        </footer>

        <!-- Javascript -->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->

    </body>

</html>

ControllerClass.java
----------------------------------

package com.c.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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.servlet.ModelAndView;

import com.c.bean.RegisterBean;
import com.c.model.Register;
import com.c.service.RegisterService;


@Controller
public class ControllerClass {

 @Autowired
 private RegisterService registerService;

 @RequestMapping(value = "/save", method = RequestMethod.POST)
 public ModelAndView saveUser( @ModelAttribute("loginBean1") RegisterBean loginBean) {
  Register login = prepareModel(loginBean);
  registerService.addUser(login);  
  return new ModelAndView("redirect:/index.html");
 }

 @RequestMapping(value = "/login", method = RequestMethod.POST)
 public ModelAndView loginUser( @ModelAttribute("loginBean1") RegisterBean loginBean) {

  return new ModelAndView("redirect:/index.html");
 }

 @RequestMapping(value = "/index", method = RequestMethod.GET)
 public ModelAndView welcome(@ModelAttribute("loginBean")  RegisterBean loginBean) {

  return new ModelAndView("index");
 }



 private Register prepareModel(RegisterBean loginBean){
  Register login = new Register();

 login.setEmail_id(loginBean.getEmail_id());
 login.setFirst_name(loginBean.getFirst_name());
 login.setLast_name(loginBean.getLast_name());
 login.setAbout_yourself(loginBean.getAbout_yourself());
 return login;
 }

}

RegisterBean.java
----------------------------------

package com.c.bean;

public class RegisterBean 
 private String email_id;
 private String first_name;
 private String last_name;
 private String about_yourself;
public String getEmail_id() {
return email_id;
}
public void setEmail_id(String email_id) {
this.email_id = email_id;
}
public String getFirst_name() {
return first_name;
}
public void setFirst_name(String first_name) {
this.first_name = first_name;
}
public String getLast_name() {
return last_name;
}
public void setLast_name(String last_name) {
this.last_name = last_name;
}
public String getAbout_yourself() {
return about_yourself;
}
public void setAbout_yourself(String about_yourself) {
this.about_yourself = about_yourself;


}

Register.java
------------------------------

package com.c.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;


@Entity
@Table(name="m_users")
public class Register implements Serializable{

 private static final long serialVersionUID = -723583058586873479L;

 @Id
/* @GeneratedValue(strategy=GenerationType.AUTO)*/
 @Column(name = "email_id")
 private String email_id;

 @Column(name="first_name")
 private String first_name;

 @Column(name="last_name")
 private String last_name;

 @Column(name="about_yourself")
 private String about_yourself;

public String getEmail_id() {
return email_id;
}

public void setEmail_id(String email_id) {
this.email_id = email_id;
}

public String getFirst_name() {
return first_name;
}

public void setFirst_name(String first_name) {
this.first_name = first_name;
}

public String getLast_name() {
return last_name;
}

public void setLast_name(String last_name) {
this.last_name = last_name;
}

public String getAbout_yourself() {
return about_yourself;
}

public void setAbout_yourself(String about_yourself) {
this.about_yourself = about_yourself;
}

public static long getSerialversionuid() {
return serialVersionUID;
}



}

RegisterService.java
-----------------------------------------

package com.c.service;

import java.util.List;

import com.c.model.Register;


public interface RegisterService {

 public void addUser(Register user);

}


RegisterServiceImpl.java
---------------------------------------------

package com.c.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.c.dao.RegisterDao;
import com.c.model.Register;

@Service("registerService")
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true)
public class RegisterServiceImpl implements RegisterService {

 @Autowired
 private RegisterDao registerDao;
 
 @Transactional(propagation = Propagation.REQUIRED, readOnly = false)
 public void addUser(Register user) {
registerDao.addUser(user);
 }
 
}

RegisterDao.java
------------------------------------

package com.c.dao;

import java.util.List;

import com.c.model.Register;

public interface RegisterDao {
 
 public void addUser(Register user);

}

RegisterDaoImpl.java
-------------------------------------------------------

package com.c.dao;

import java.util.List;

import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.c.model.Register;


@Repository("registerDao")
public class RegisterDaoImpl implements RegisterDao {

 @Autowired
 private SessionFactory sessionFactory;
 
 public void addUser(Register user) {
  sessionFactory.getCurrentSession().save(user);
 }
 

}


database.properties
-------------------------------------------

database.driver=org.postgresql.Driver
database.url=jdbc:postgresql://localhost:5432/elopade
database.user=postgres
database.password=01988
hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
hibernate.show_sql=true
hibernate.hbm2ddl.auto=update


Now run the app:

http://localhost:8080/springWIthBootstrapIntegration/
-----------------------------------------------------------------------------------------



Data in database after clicking on "Sign me up!"
------------------------------------------------------------------



No comments:

Post a Comment