How to use Spring Boot Security in web application – Part VIII

In this post, we will show how to use Spring Boot Security to login, authorization based on user role, logout and error handling.

We will be discussing following use case

  1. A user access a home page for application.
  2. If user is authenticated, he will be redirected to page
  3. If user is not authenticated, he will be challenged to login ( redirected to login page)
  4. User enters credentials
  5. If correct credentials, a session is created and user is verified for role
  6. If incorrect credentials, show an error message
  7. If user is of role USER, he is redirected to user profile page. He can only edit or save his information.
  8. If user is of role ADMIN, he is redirected to list of users page.
  9. If user clicks on logout, session is deleted and user is redirected to login page.
  10. If user (of any role) tries to login after logout, user should be redirected to appropriate page
  11. If user is neither USER nor ADMIN, he is redirected to error page
  12. Handling of CSRF token

To completely understand this post, make sure you have gone through my other posts on Spring Boot series.

  1. Spring Boot REST CRUD API
  2. Swagger Documentation
  3. User Interface using AngularJS

 

Database changes

Since this post involves authorization for users, we have to do some database changes. We will add couple of tables and respective model classes in our REST api modification.

  • Table role
  • Table user_role

create table role (id int(11) auto_increment primary key not null, role varchar(255) )


create table user_role (user_id int(11) primary key not null, role_id int(11) primary key not null))

user_role table helps to maintain many-to-many relationship between user and role table. We will have only two roles for demo purposes USER and ADMIN.

Another change we have done in table user is that we have added field called password_hash to store password set by user/administrator for user to login. We will be storing a hash password value of the original password that user will set.

Dependencies

Since we will be using Spring-security for authentication and authorization purposes, we will add the dependency for spring security as follows:


<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-security</artifactId> </dependency> 

Controllers and Web Layer

Other than those changes mentioned about, we will demonstrate this post in top-down fashion rather than bottom-up fashion.

So for web layer, we will define a new controller LoginController and modify our existing MainController.


package com.betterjavacode.benefits.controller;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.betterjavacode.benefits.entities.User;
import com.betterjavacode.benefits.interfaces.UserManager;

/**
*
* @author Yogesh Mali
*
*/
@Controller
public class LoginController {

public static final Logger LOGGER = LogManager.getLogger(LoginController.class);

@Autowired
UserManager userManager;

/**
*
* @param model
* @return
*/
@RequestMapping(value = "/user", method = RequestMethod.GET)
public String userpage(Model model) {
LOGGER.info(" Enter >> userpage() ");
Authentication auth = SecurityContextHolder.getContext()
.getAuthentication();
String name = auth.getName();
User user = userManager.findUserByEmail(name);
model.addAttribute("name", user.getFirstname());
model.addAttribute("userid", user.getId());
LOGGER.info(" Exit << userpage() ");
return "user";
}

/**
*
* @return
*/
@RequestMapping(value = { "/login" })
public String login() {
return "login";
}

/**
*
* @return
*/
@RequestMapping(value = "/403", method = RequestMethod.GET)
public String Error403() {
return "403";
}
}

As shown in this controller, we have defined a user page, a login page and an error page (403). A user with role of either USER or ADMIN or both can access a user page which shows that logged in user’s profile.

Every user irrespective of roles, will be redirected to login page for authentication. If there are any errors during authentication or authorization, user will be redirected to access denied page (403).

Source code for login page is as below:


<!DOCTYPE html><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head> <title>Benefits Application</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 	<link rel="stylesheet" type="text/css" th:href="@{/css/login.css}" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body>
<div class="container"> <form th:action="@{/login}" method="POST" class="form-signin">
<h3 class="form-signin-heading" th:text="Welcome"></h3>
<input type="text" id="email" name="username"  th:placeholder="Email" class="form-control" style="width:350px"/>
<input type="password"  th:placeholder="Password" id="password" name="password" class="form-control" style="width:350px"/>
<div align="center" th:if="${param.error}">
<p style="font-size: 20; color: #FF1C19;">Email or Password invalid, please verify</p>

</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit" th:text="Login" style="width:350px"></button> </form></div>
</body></html>

This login page shows a simple form to input username (email) and password and process that authentication using spring-security database authentication method.


@RequestMapping(value = "/home", method = RequestMethod.GET)
public String homepage(Model model) {
LOGGER.info(" Enter &gt;&gt; homepage() ");
Authentication auth = SecurityContextHolder.getContext()
.getAuthentication();
String name = auth.getName();
User user = userManager.findUserByEmail(name);
model.addAttribute("name", user.getFirstname());
LOGGER.info(" Exit &lt;&lt; homepage() ");
return "index";
}

Changes in MainController are about authenticated user and passing that user’s first name to model to display in html page. UserManager in service layer has been enhanced to return an user based on username (which is email) . We have also added email to be unique as a constraint in database.

User page for an user with role USER is nothing but a user profile information which he can edit and update any time.


<html ng-app="benefitApp"><html ng-app="benefitApp"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Benefit Application</title><script>document.write('<base href="' + document.location + '" />');</script>	<link rel="stylesheet" href="/css/bootstrap.css" /><script src="https://code.angularjs.org/1.6.1/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.js"></script><script type="text/javascript" src="./js/app.js"></script></head><body ng-controller="UserCtrl">Hello
<p th:text="${name}"></p>

<div>
<ul class="menu">
	<li><a th:href="@{'userProfile/' + ${userid}}">Profile</a></li>
</ul>
<div ng-view="ng-view"></div>
</div>
<div class="input-group">
<div class="controls">    <a ng-click="logout()" class="btn btn-small">Logout</a></div>
</div>
</body></html>

Authentication

Now we have the application ready with all the required backend details for adding authentication part. Remember we are using spring-security for authentication and authorization of an application.


package com.betterjavacode.benefits;

import javax.sql.DataSource;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@Configuration
@ComponentScan("com.betterjavacode.benefits.services")
@EnableWebSecurity
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    public static final Logger LOGGER = LogManager.getLogger(SecurityConfig.class);

    @Autowired
    private SimpleAuthenticationSuccessHandler loginSuccess;

    @Autowired
    private LogoutSuccess logoutSuccess;

    @Autowired
    private BCryptPasswordEncoder bCryptPasswordEncoder;

    @Autowired
    private DataSource dataSource;

    @Value("${spring.queries.users-query}")
    private String usersQuery;

    @Value("${spring.queries.roles-query}")
    private String rolesQuery;

    @Autowired
    protected void configureGlobal(AuthenticationManagerBuilder auth) throws &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Exception {
       LOGGER.info(" Enter &gt;&gt; configureGlobal() ");
       auth.jdbcAuthentication()
       .usersByUsernameQuery("select email,password_hash,enabled from user where email=?")
       .authoritiesByUsernameQuery("select u.email,r.role from user u inner join user_role ur on(u.id=ur.user_id) inner join role r on(r.id=ur.role_id) where u.email=?")
       .dataSource(dataSource)
       .passwordEncoder(bCryptPasswordEncoder);
       LOGGER.info(" Exit &lt;&lt; configureGlobal() ");
    }

   /**
   * Handle Login - Authentication and Redirection
   */
   @Override
   protected void configure(HttpSecurity http) throws Exception {
            http.csrf()
                .disable()
                .authorizeRequests()
                .antMatchers("/home")
                .hasAuthority("ADMIN")
                .antMatchers("/user")
                .hasAnyAuthority("USER", "ADMIN")
                .and()
                .formLogin()
                .loginPage("/login")
                .successHandler(loginSuccess)
                .permitAll()
                .and()
                .logout()
                .logoutSuccessHandler(logoutSuccess)
                .deleteCookies("JSESSIONID")
                .invalidateHttpSession(false)
                .permitAll()
                .and()
                .exceptionHandling()
                .accessDeniedPage("/403");

    }

    /**
     * Exclude resources from user-access
     */
     @Override
     public void configure(WebSecurity web) throws Exception {
        web.ignoring()
        .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**");
     }
}

What’s happening in this code?

  • When a user with role ADMIN or USER calls either /home or /user pages respectively, the user will be challenged to login.
  • Once the user inputs credentials, they are validated against JDBC database authentication mechanism provided by spring-security.
  • If user of role USER tries to access ADMIN home page, user will be redirected to 403 page. Redirection strategy is handled by an authentication success handler.
  • If user clicks LOGOUT button on the page he is on, he will be logged out of application and redirected back to login page. All the cookies will be deleted. Redirection will be handled by logout success handler.

 

Changes in AngularJS User Interface Controller

As shown in user.html page, once the user with role USER is logged in, he sees url for his profile information. If user clicks this url, user sees his or her profile information. This page has a controller called UserCtrl which basically handles the logout on this initial page. User Profile is shown on userprofile.html page which has singleusercontroller. This angular js controller handles updating user profile information or logout. Rest of the code will be updated in github repository for self-explanation.

Handling CSRF Token

There are two ways Cross-Site Request Forgery token can be handled in Spring application. First way is by disabling this token generation. This is not a recommended approach as this put your application to possible CSRF security attacks for hackers. If you are just doing this for demo purposes, you can disable this in SecurityConfig.java by calling http.csrf().disable().

As spring points out, CSRF Protection should be used for any request that could be processed by a browser by normal users.

We will be using spring security to handle CSRF token on server side rather than on client side.  So every request that will come to server will be intercepted to add a CSRF token and then verified. Angular JS verifies the cookie for CSRF token before a user can post any request.

Add a CSRF Filter Class

We will add a filter that will handle setting of CSRF token in a cookie. Angular JS expects a cookie name to be as XSRF-TOKEN. This class will look like below:


public class CSRFHeaderFilter extends OncePerRequestFilter {

  @Override
  protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
      CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
      if (csrf != null) {
      Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
      String token = csrf.getToken();
      if (cookie == null || token != null && !token.equals(cookie.getValue())) {
        cookie = new Cookie("XSRF-TOKEN", token);
        cookie.setPath("/");
        response.addCookie(cookie);
      }
      }
     filterChain.doFilter(request, response);

   }

}

Now we will enable csrf token in SecurityConfig as shown below


.and()
.csrf()
.csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CSRFHeaderFilter(), CsrfFilter.class);

What is csrfTokenRepository?

We tell spring-security to expect CSRF token in the format that Angular wants to send it back , a header called X-XSRF-TOKEN instead of default X-CSRF-TOKEN. With these changes, we don’t have to do anything on client side.


private CsrfTokenRepository csrfTokenRepository() {
HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
repository.setHeaderName("X-XSRF-TOKEN");
return repository;
}

Demo

In this post, we showed how to use spring security for authentication and authorization. Now we will show how to run the application. Once the application is built and run from eclipse, access the page https://localhost:8443/home , we will see below screen:

LoginScreenIt will be the same screen if you access https://localhost:8443/user. Now if we enter credentials of an admin user, we will see below screen:

AdminScreen.JPG

User screen will be as below:

UserScreen

 

If you click logout, it will log the user out and show login screen again. In this way, we showed how we can use spring security for authentication and authorization. Code for this is available at Github repository.

 

References

Following articles were referred while preparing this demo:

  1. Spring Boot Security
  2. Login Page Angular JS and Spring Security

Microservices – A Primer

What is Microservices?

Wikipedia definition says

Microservices is a variant of the service-oriented architecture (SOA) architectural style that structures an application as a collection of loosely coupled services.

But there is no official definition of Microservices by industry standards. It’s recent phenomenon in software industry to architect the new softwares which should be light weight, easier to deploy and scale, easier to refactor individually and could work independently.

To understand in details, you can definitely read Martin Fowler’s Microservices or Chris Richardson’s Microservices.

We will not be covering this post in detail as compared to link I have posted here. Microservices are small services that can run independently, but can also easily communicate with other services.

Microservice Architecture vs Monolithic Architecture

In traditional monolithic architecture style, there is a single application with single code base. An application contains number of modules which are interrelated and can have external dependencies. It’s a multi-tier enterprise application and has been used to build software for long.

Microservice architecture style was born out of need to build an application that could easily be supported for mobile applications. Older style was not easy to support for mobile and new generation way to handling of data. Any large enterprise application can be easily built using microservices architecture style.

How to identify Microservice Architecture Pattern?

A simple ground rule of microservice architecture pattern is to build a standalone service that can be run without depending on any other service. That means for a large application can have more than one services talking to each other, communicating with their own databases, but still performing the business logic. Databases are used to ensure loose coupling of services.

A large enterprise e-commerce application can consist of following services

  1. Backend service REST API to manage data
    1. Account Service
    2. Shipment Service
    3. Inventory Service
  2. Runtime service to handle runtime and backend data to process business logic
  3. Logging service
  4. Error Handling service
  5. Session service

UI for the e-commerce application can be built independently to use backend services to show/edit data.

By standards, there are few rules to identify microservices patterns

  1. Decomposition by business capability
  2. Database per service pattern
  3. API gateway pattern
  4. Client-side discovery and Server-side discovery

Pros and Cons of Microservices

Pros

  1. Deployability – They can independently be deployed.
  2. Reliability – A fault in the service can only bring down that service, depending on handling in application, rest of the application can still be accessed.
  3. Scalability – Each microservice can be scaled depending on requirements using clusters and grids.
  4. Availability – Dispatching the patch or newer version of service requires less downtime compared to regular monolithic application.
  5. Management – Easier to manage
  6. Design and Development – Each service can be developed independently and helps developer to manage the service easily without worrying about other services.

Cons

  1. Performance – All services involved in application have to communicate with each other over network and that could hamper the performance.
  2. Testability – Automated tests are harder to manage and run.
  3. Memory usage – Possible duplicate data across services and lot of duplication in cache.

References

You can read more about Microservices at following links:

  1. Microservices by Chris Richardson
  2. Microservices by Martin Fowler
  3. Stackoverflow post about microservices

Design Pattern – Prototype Pattern – Part VI

If you want to read about previous posts related to design patterns, series of posts about design patterns are

  1. Introduction to design patterns
  2. Singleton Pattern
  3. Factory Pattern
  4. Abstract Factory Pattern
  5. Builder Pattern

The next post about Prototype design pattern will cover creation design pattern that we have been writing about till now.

When to use Prototype Design Pattern?

Since this is a creational design pattern, this is used when decision is to reduce creation cost of object through standard way. There can be argument about how this is then different from abstract factory pattern. The key benefit of Prototype design pattern is that it optimizes the use case where multiple objects of same type will have mostly same data.

Major example is reading configuration data from a file/database over a network. Also if you want to hide the logic of creating new instance from the client.

How to use Prototype Design Pattern?

In this pattern, there is an interface of Prototype that has method for clone and any concrete class implementing this interface, implements the method to clone the object.


public interface Car {

Car clone();

}

We have an interface Car which we will implement in our concrete classes.


package com.bettterjavacode.designpatterns.prototypeexample;

public class Toyota implements Car {

private final String CARNAME = "Toyota";

public Car clone() {
return new Toyota();
}

@Override
public String toString() {
return CARNAME;
}

}

We will have a factory class that will get us a prototype based on type of object we have passed. This will look like below:


package com.bettterjavacode.designpatterns.prototypeexample;

import java.util.HashMap;
import java.util.Map;

public class CarFactory {

private static final Map<String, Car> prototypes = new HashMap<String, Car>();

static {
prototypes.put("toyota", new Toyota());
prototypes.put("lexus", new Lexus());
prototypes.put("bmw", new BMW());
}

public static Car getPrototype(String type) {
return prototypes.get(type)
.clone();
}
}

Now our demo class will pass the type of car as an argument to print the carname. That will look like below:


package com.betterjavacode.designpatterns;

import com.bettterjavacode.designpatterns.prototypeexample.Car;
import com.bettterjavacode.designpatterns.prototypeexample.CarFactory;

public class PrototypeDemo {

public static void main(String[] args) {
if (args.length > 0) {
for (String type : args) {
Car prototype = CarFactory.getPrototype(type);
if (prototype != null) {
System.out.println(prototype);
}
}
} else {
System.out.println(" Run again with arguments");
}

}

}

Conclusion

In this post, we showed how to use prototype design pattern. The code for this is available here

References

  1. Design Patterns – Prototype
  2. Prototype Pattern

Design Patterns – Builder Pattern – Part V

Continuing the series of posts about design patterns, we will talk about builder pattern in this post. Builder pattern is of type creational design pattern. One of the major uses of Builder pattern is when there are too many constructor parameters to handle.

When to use Builder Pattern?

Builder pattern enforces a step by step approach to create a complex object. The object can not be used till it’s a finished product. It helps to encapsulate complex creation logic. One of the examples from real time is file creation with a format. If you are create a file about certain format (example xml, csv), you can builder pattern to create simple logical approach to creating file.

How to use Builder Pattern?

Lately working on a project to build an EDI file to transfer between customer, I have to create a file of format 834. So 834 file format varies according to different health insurance carrier. This file format contains headers, records and trailers. Headers indicate different paradigm about the file and the customer and who is sending it. To show example of builder pattern, I will use one of the headers of this file format and how it can be created using builder pattern.

One of the headers is called Transactional Group Header. This header looks like below in a real file

ST*834*5432853*005010X220A1~

First field “ST” indicates that it is a transactional group. All the records for one customer can lie between ST and SE. 834 is a transaction code for file format. Since this is 834 file format, code is 834. 5432853 is a unique transaction control number, this can be anything between 4 digits in length to maximum 9 digits in length. 005010X220A1 is a implementation reference number.

Our implementation of the class with have fields for each of these field from header, a private constructor and a static builder class. This is shown below:


public class TransactionalHeader implements Serializable {
private static final long serialVersionUID = 7517644545656169045L;

private String st;

private String transactioncode;

private String transactioncontrolnumber;

private String implementationreference;

public static class Builder {

private String st;

private String transactioncode;

private String transactioncontrolnumber;

private String implementationreference;

public Builder st(String st) {

this.st = st; return this;

}

public Builder transactioncode(String transactioncode) {

this.transactioncode = transactioncode; return this;

}

public Builder transactioncontrolnumber(String transactioncontrolnumber) {                            this.transactioncontrolnumber = transactioncontrolnumber; return this;

}

public Builder implementationreference(String implementationreference) {                                this.implementationreference = implementationreference; return this;

}

public TransactionalHeader build() {

return new TransactionalHeader(this);

}

}

private TransactionalHeader(Builder builder) {

this.st = builder.st;

this.transactioncode = builder.transactioncode;

this.transactioncontrolnumber = builder.transactioncontrolnumber;

this.implementationreference = builder.implementationreference;

}

public String toString() {

String result = "";

StringBuffer sb = new StringBuffer();

sb.append(st);

sb.append(FileUtil.FIELD_SPLITTER);

sb.append(transactioncode);

sb.append(FileUtil.FIELD_SPLITTER);

sb.append(transactioncontrolnumber);

sb.append(FileUtil.FIELD_SPLITTER);

sb.append(implementationreference);

sb.append("~");

result = sb.toString();

return result;

}

}

This was our builder class. Let’s create a demo class that will use this builder class to build an object that will give us transactional header in file. This will look like below:


public String getTransactionalHeader() {

String result = "";

TransactionalHeader th = new TransactionalHeader.Builder()

.st("ST")

.transactioncode(TRANSACTION_IDENTIFIER_CODE)

.transactioncontrolnumber(FileUtil.getTransactionControlNumber())

.implementationreference("005010X220A1").build();

result = th.toString();

return result;

}

In this way, builder design pattern can be used to construct complex objects. One of the easy way to identify when to use this design pattern is when you have more than 4 or more parameters in your constructor.

Code for this post is available to download here.

 

How To: AngularJS User Interface to CRUD Spring Boot REST API

In this post, we will add an user interface using AngularJS to the REST api we created here.

Controller for home page

First we will create a controller in Spring Boot rest api to call our home page. All the requests that will come to web server, will go through this controller and controller will return a home page for the request based on path.

MainController.java will look like below:


package com.betterjavacode.benefits.controller;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MainController {

public static final Logger LOGGER = LogManager.getLogger(MainController.class);

@RequestMapping(value = "/home", method = RequestMethod.GET)
public String homepage() {
LOGGER.info(" Enter >> homepage() ");
return "index";
}
}

Any request coming to https://localhost:8443/home will return a page from index.html.

Create a Home Page

Now, we will create an index.html page. We will also be using angular JS framework as part of this home page so that we can build a single page application. If you are not aware of Angular JS or new to this framework, you can read about it AngularJS. One thing to remember while creating this page is a directory structure. Lot of issues that arise to create html pages are because of directory structure. Directory structure will look like below:

directorystructure

The home page index.html page is under main/resources/templates/ directory and it looks like below


<html ng-app="benefitApp">

<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Benefit Application</title>

<script>document.write('<base href="' + document.location + '" />');</script>

	<link rel="stylesheet" href="/css/bootstrap.css" />

<script src="https://code.angularjs.org/1.6.1/angular.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.js"></script>

<script type="text/javascript" src="./js/app.js"></script>

</head>

<body ng-controller="MainCtrl">

Hello {{name}}!
<div>
<ul class="menu">
	<li><a href="listUser">user-list</a></li>
	<li><a href="listCompany">company-list</a></li>
</ul>
<div ng-view="ng-view"></div>
</div>
</body></html>

Home page shows that this is an angular app with name “benefitApp”. This also declares a controller “MainCtrl” with an angular view. Important to see we are importing angular.js, angular-route.js and angular-resource.js modules. Click on user-list or company-list, will show list of users and list of companies respectively.

Create a controller

Now to handle the controller (MainCtrl), we added in index.html, we will add app.js which will declare the controller. This javascript file also contains config data to handle all the routing of pages. That’s why we will be importing “ngRoute” and “ngResource” angular modules.


var app = angular.module('benefitApp', ['ngRoute','ngResource']);

var app = angular.module('benefitApp', ['ngRoute','ngResource']);
app.controller('MainCtrl', function($scope, $routeParams) {

$scope.name = 'World';

$scope.$routeParams = $routeParams;

})

Through out the interaction on web pages, we will be using different controllers for editing user or company information and creating user or company. The same file app.js will also handle routing of these pages which is shown below


app.config(function($routeProvider,$locationProvider) {

$locationProvider.html5Mode(true);

$routeProvider.when('/listUser',

{templateUrl: 'views/listUser.html', controller: 'userController'});

$routeProvider.when('/listCompany',

{templateUrl: 'views/listCompany.html', controller: 'companyController'});

$routeProvider .when('/editUser/:userId',

{ templateUrl : 'views/editUser.html' }) ;

$routeProvider .when('/editCompany/:companyId',

{ templateUrl : 'views/editCompany.html' }) ;

$routeProvider.when('/createUser',

{templateUrl:'views/createUser.html'});

$routeProvider.when('/createCompany',

{templateUrl:'views/createCompany.html'});

});

Rest of the code showing all controllers’ logic has been skipped for post purposes. It is available on github repository.

UserController or CompanyController are calling rest apis which we have built using Spring boot.

Demo

Now build the code and run our embedded tomcat webserver. Fire up the url https://localhost:8443/home – it will look like below:

homepage

Click on user-list and it will show list of users inside the same page as below:

listofuserspage

Click on edit button and we will see a form to update user information:

edituserpage

Download –

In this post, we showed how to create a simple CRUD user interface using angular JS for Spring Boot REST api. The code for this is available at repository

Design Pattern – Abstract Factory Pattern – Part IV

In the continuation of design pattern series, till now we have covered IntroductionSingleton Pattern and Factory Pattern. In current post, we will cover the next creational type of design pattern and that is Abstract Design Pattern.

So what is abstract factory pattern?

Well, it’s an interface to create families of related or dependent objects without client knowing the implementation details.

Difference between abstract factory pattern and factory pattern

One common theme between these two patterns is that they decouple the client system from implementation details.

  • Factory pattern creates object through inheritance.
  • Abstract factory pattern creates object through composition.
  • Abstract factory provides an interface to create family of related objects.
  • Factory pattern aka factory method pattern is inherited in subclasses to create concrete objects.

In previous post, we saw an interface vehicle, implemented by different classes Car, Bus, Motorcycle, Truck and a class VehicleFactory returned different classes.

Abstract Factory pattern gives a layer of abstraction over regular factory pattern and in the process it isolates factories. The pattern returns factories of related objects. So If I want a car of Toyoto types, it can return me factories of Camry, Corolla, Avalanche etc.

Now to show Abstract Factory pattern, we will create an abstract class which will return car mileage. This will look like below:


public abstract class CarMileage {

protected double distance;
protected double gas;

public abstract void getCarMileage(double dist, double gasfilled);

public void calculateCarMileage(double dist, double gasfilled) {
double carmileage = dist / gasfilled;
System.out.println(" Your car mileage is " + carmileage);
}
}

Now each related concrete class will extend this class to return us car mileage. We will have Camry, Corolla and Avalanche as different car of types Toyota. As part of abstract factory pattern, we will add an abstract class that will return me factories of car mileage. This is shown as below:


public abstract class AbstractFactory {
public abstract CarMileage getCarMileage(String car);
}

A concrete subclass CarFactory of AbstractFactory, will return us different car mileage based on the car name we have passed.


public class CarFactory extends AbstractFactory {

@Override
public CarMileage getCarMileage(String car) {

if (car == null || car.equals("")) {
return null;
}
if (car.equalsIgnoreCase("camry")) {
return new CamryCarMileage();
} else if (car.equalsIgnoreCase("corolla")) {
return new CorollaCarMileage();
} else if (car.equalsIgnoreCase("avalanche")) {
return new AvalanceCarMileage();
}
return null;
}

}

To demo this by implementing a client class which will ask user input for carname, distance covered and gas filled. Based on carname, AbstractFactory will return us a factory for CarMileage. This factory of CarMileage will return us calculated car mileage for that car.


public class AbstractFactoryPatternDemo {

public static void main(String[] args) throws IOException {

BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

System.out.println(" Enter the car name you want mileage for: ");

String carname = br.readLine();
System.out.println("\n");
System.out.println("Enter the distance covered: ");

String distanceStr = br.readLine();
double distance = Double.parseDouble(distanceStr);
System.out.println("\n");
System.out.println("Enter the gas you had filled: ");
System.out.println("\n");
String gasStr = br.readLine();
double gas = Double.parseDouble(gasStr);

AbstractFactory af = FactoryCreator.getFactory();
CarMileage cm = af.getCarMileage(carname);

cm.getCarMileage(distance, gas);

}

}

 

In this post, we showed how to use abstract factory pattern when we want to create a family of related objects but without specifying their concrete sub-classes.

Download

The code for this post is available github repo.

Design Patterns – Factory Pattern – Part III

In this article, we will see how to use a factory pattern. Factory pattern is a creational type of design pattern, in short it provides a way to create objects. Another important point to note about this design pattern is that client who uses factory pattern is not aware of the implementation of factory pattern.

Even in our previous post Spring Boot REST CRUD API, we have used factory pattern to implement managers at service level. As part of this post, we will show another example of factory pattern. Factory pattern mainly used in cases when client just needs a class/object that can handle the job of doing the work at runtime without knowing any details of how it was implemented.

To show how to implement factory pattern, let’s assume we have different types of vehicles and we want to know what their maximum speed is.

Create an interface –

Our interface of vehicle will have a method to return a max speed of vehicle.


package com.betterjavacode.designpatterns.factoryexample;

public interface Vehicle {

void speed();

}

Now, we will have different classes (car, truck,bus,motorcycle) that will implement this interface to return their maximum speed. For article purposes, we will only be showing one class.


package com.betterjavacode.designpatterns.factoryexample;

public class Car implements Vehicle {

 public void speed() 

{
   System.out.println("Max Speed of this car is 100 mph");
}

}

To get an instance of an object, we will create a factory class that will return me appropriate instance of vehicle object based on what vehicle type I pass.


package com.betterjavacode.designpatterns.factoryexample;

public class VehicleFactory {

public Vehicle getVehicle(String vehicleType)
{
   if (vehicleType == null) 
   {
      return null;
}
   if (vehicleType.equalsIgnoreCase("car")) {
     return new Car();
   }
   if (vehicleType.equalsIgnoreCase("bus")) {
     return new Bus();
   }
   if (vehicleType.equalsIgnoreCase("motorcycle")) 
   {
     return new Motorcycle();
   }
   if ( vehicleType.equalsIgnoreCase("truck")) 
   {
     return new Truck();
   }
    return null;
}

}

A factory pattern demo class will get any of object of type vehicle at runtime.


package com.betterjavacode.designpatterns;

import com.betterjavacode.designpatterns.factoryexample.Vehicle;
import com.betterjavacode.designpatterns.factoryexample.VehicleFactory;

public class FactoryPatternDemo {

public static void getSpeed(String vehicleType) {
 VehicleFactory vehicleFactory = new VehicleFactory();

Vehicle veh1 = vehicleFactory.getVehicle(vehicleType);

veh1.speed();
 }

}

In this example, we have shown how to implement a design pattern type factory pattern. The code for this is available design patterns.

References

  1. Factory Pattern Example
  2. Factory Pattern