In this blog, we are going to create a Search Field web application. This application includes data in a tabular form with search fields. In this integration, we are using Spring to handle the backend part and Angular to handle the frontend part.

Working of Application

Once we deployed our application on the server, a form generates that contains the data in a tabular form with some search fields.
Now, we can search for the data present in the table from these fields. Here, we are using two search fields – name and email-id.
To search the data, it is required to provide a complete keyword in any of the search fields.

Tools to be used

Use any IDE to develop the Spring and Hibernate project. It may be MyEclipse/Eclipse/Netbeans. Here, we are using Eclipse.
MySQL for the database.
Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.
Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Technologies we used

Here, we are using the following technologies:

Spring 5
Hibernate 5
Angular 6
MYSQL

Create Database

Let’s create a database searchfieldexample. There is no need to create a table as Hibernate automatically created it. Here, we need to provide the data explicitly in the table so that it can appear on the screen to perform search operations. However, we can also import the data from the file present in the download link.

Spring Module

Let’s see the directory structure of Spring we need to follow:

To develop a search field application, follow the below steps: –

Add dependencies to pom.xml file.

pom.xml

<project xmlns=”http://maven.apache.org/POM/4.0.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd”>
<modelVersion>4.0.0</modelVersion>
<groupId>com. tecklearn</groupId>
<artifactId>SearchFieldExample</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>SearchFieldExample Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<springframework.version>5.0.6.RELEASE</springframework.version>
<hibernate.version>5.2.16.Final</hibernate.version>
<mysql.connector.version>5.1.45</mysql.connector.version>
<c3po.version>0.9.5.2</c3po.version>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<!– Spring –>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${springframework.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${springframework.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${springframework.version}</version>
</dependency>
<!– Add Jackson for JSON converters –>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</version>
</dependency>
<!– Hibernate –>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>${hibernate.version}</version>
</dependency>
<!– MySQL –>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.connector.version}</version>
</dependency>
<!– C3PO –>
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>${c3po.version}</version>
</dependency>
<!– Servlet+JSP+JSTL –>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!– to compensate for java 9 not including jaxb –>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.0</version>
</dependency>
<!– JUnit dependency –>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>SearchFieldExample</finalName>
</build>
</project>

Create the configuration classes
Instead of XML, we perform annotation-based configuration. So, we create two classes and specify the required configuration in it.

DemoAppConfig.java

package com. tecklearn.searchfieldexample.config;
import java.beans.PropertyVetoException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.mchange.v2.c3p0.ComboPooledDataSource;
@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan(“com. tecklearn.searchfieldexample”)
@PropertySource(value = { “classpath:persistence-mysql.properties” })
@PropertySource(value = { “classpath:persistence-mysql.properties” })
@PropertySource(value = { “classpath:application.properties” })
public class DemoAppConfig implements WebMvcConfigurer {
@Autowired
private Environment env;
@Bean
public DataSource myDataSource() {
// create connection pool
ComboPooledDataSource myDataSource = new ComboPooledDataSource();
// set the jdbc driver
try {
myDataSource.setDriverClass(“com.mysql.jdbc.Driver”);
}
catch (PropertyVetoException exc) {
throw new RuntimeException(exc);
}
// set database connection props
myDataSource.setJdbcUrl(env.getProperty(“jdbc.url”));
myDataSource.setUser(env.getProperty(“jdbc.user”));
myDataSource.setPassword(env.getProperty(“jdbc.password”));
// set connection pool props
myDataSource.setInitialPoolSize(getIntProperty(“connection.pool.initialPoolSize”));
myDataSource.setMinPoolSize(getIntProperty(“connection.pool.minPoolSize”));
myDataSource.setMaxPoolSize(getIntProperty(“connection.pool.maxPoolSize”));
myDataSource.setMaxIdleTime(getIntProperty(“connection.pool.maxIdleTime”));
return myDataSource;
}
private Properties getHibernateProperties() {
// set hibernate properties
Properties props = new Properties();
props.setProperty(“hibernate.dialect”, env.getProperty(“hibernate.dialect”));
props.setProperty(“hibernate.show_sql”, env.getProperty(“hibernate.show_sql”));
props.setProperty(“hibernate.format_sql”, env.getProperty(“hibernate.format_sql”));
props.setProperty(“hibernate.hbm2ddl.auto”, env.getProperty(“hibernate.hbm2ddl”));
return props;
}
// need a helper method
// read environment property and convert to int
private int getIntProperty(String propName) {
String propVal = env.getProperty(propName);
// now convert to int
int intPropVal = Integer.parseInt(propVal);
return intPropVal;
}
@Bean
public LocalSessionFactoryBean sessionFactory(){
// create session factorys
LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
// set the properties
sessionFactory.setDataSource(myDataSource());
sessionFactory.setPackagesToScan(env.getProperty(“hibernate.packagesToScan”));
sessionFactory.setHibernateProperties(getHibernateProperties());
return sessionFactory;
}
@Bean
@Autowired
public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
// setup transaction manager based on session factory
HibernateTransactionManager txManager = new HibernateTransactionManager();
txManager.setSessionFactory(sessionFactory);
return txManager;
}
}

MySpringMvcDispatcherServletInitializer.java

package com. tecklearn.searchfieldexample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
@Override
protected Class<?>[] getRootConfigClasses() {
// TODO Auto-generated method stub
return null;
}
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[] { DemoAppConfig.class };
}
@Override
protected String[] getServletMappings() {
return new String[] { “/” };
}
}

Create the entity class
Here, we are creating an Entity/POJO (Plain Old Java Object) class.

User.java

package com. tecklearn.searchfieldexample.entity;
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=”user”)
public class User {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column(name=”userId”)
private int userId;
@Column(name=”name”)
private String name;
@Column(name=”email_id” )
public String emailId;
@Column(name=”qualification”)
public String qualification;
public User() {}
public User(int userId, String name, String emailId, String qualification) {
super();
this.userId = userId;
this.name = name;
this.emailId = emailId;
this.qualification = qualification;
}
public int getUserId() {
return userId;
}
public void setUserId(int userId) {
this.userId = userId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmailId() {
return emailId;
}
public void setEmailId(String emailId) {
this.emailId = emailId;
}
public String getQualification() {
return qualification;
}
public void setQualification(String qualification) {
this.qualification = qualification;
}
@Override
public String toString() {
return “User [userId=” + userId + “, name=” + name + “, emailId=” + emailId + “, qualification=” + qualification
+ “]”;
}
}

Create the DAO interface
Here, we are creating the DAO interface to perform database related operations.

UserDAO.java

package com. tecklearn.searchfieldexample.DAO.interfaces;
import java.util.List;
import com. tecklearn.searchfieldexample.entity.User;
public interface UserDAO {
public int SaveUser(User user);
public List<User> getFilteredData(User user);
}

Create the DAO interface implementation class

UserDAOImpl.java

package com. tecklearn.searchfieldexample.DAO.implementation;
import java.util.ArrayList;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import com. tecklearn.searchfieldexample.DAO.interfaces.UserDAO;
import com. tecklearn.searchfieldexample.entity.User;
@Repository(“userDAO”)
public class UserDAOImpl implements UserDAO {
@Autowired
SessionFactory sessionFactory;
public int SaveUser(User user) {
Session session = null;
try {
session = sessionFactory.getCurrentSession();
int userId = (Integer) session.save(user);
return userId;
}
catch(Exception exception)
{
System.out.println(“Excption while saving data into DB ” + exception);
return 0;
}
finally
{
session.flush();
}
}
public List<User> getFilteredData(User user) {
Session session = null;
try
{
session = sessionFactory.getCurrentSession();
ArrayList<Object> list_field = new ArrayList<Object>();
ArrayList<Object> list_value = new ArrayList<Object>();
if(user.getName()==null || user.getName()==””){}else{list_field.add(“name”);list_value.add(user.getName());}
if(user.getEmailId()==null || user.getEmailId()==””){}else{list_field.add(“emailId”);list_value.add(user.getEmailId());}
switch (list_field.size()) {
case 0:
Query<User> query0 = session.createQuery(“from User”);
return query0.list();
case 1:
Query query1 = session.createQuery(“from User where ” + list_field.get(0) +” = :value0″);
query1.setParameter(“value0”, list_value.get(0));
return query1.list();
case 2:
Query query2 = session.createQuery(“from User where ” + list_field.get(0) +” =:value0 and ” + list_field.get(1) + ” =:value1″);
query2.setParameter(“value0”, list_value.get(0));
query2.setParameter(“value1”, list_value.get(1));
return query2.list();
}
return null;
}
catch(Exception exception)
{
System.out.println(“Error while getting Filtered Data :: ” + exception.getMessage());
return null;
}
finally
{
session.flush();
}
}
}

Create the service layer interface
Here, we are creating a service layer interface that acts as a bridge between DAO and Entity classes.

UserService.java

package com. tecklearn.searchfieldexample.service.interfaces;
import java.util.List;
import com. tecklearn.searchfieldexample.entity.User;
public interface UserService {
public int SaveUser(User user);
public List<User> getFilteredData(User user);
}

Create the service layer implementation class

UserServiceImpl.java

package com. tecklearn.searchfieldexample.service.implementation;
import java.util.List;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com. tecklearn.searchfieldexample.DAO.interfaces.UserDAO;
import com. tecklearn.searchfieldexample.entity.User;
import com. tecklearn.searchfieldexample.service.interfaces.UserService;
@Service(“userService”)
public class UserServiceImpl implements UserService {
@Autowired
UserDAO userDAO;
@Transactional
public int SaveUser(User user) {
return userDAO.SaveUser(user) ;
}
@Transactional
public List<User> getFilteredData(User user) {
return userDAO.getFilteredData(user);
}
}

Create the controller class

UserController.java

package com. tecklearn.searchfieldexample.restcontroller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com. tecklearn.searchfieldexample.entity.User;
import com. tecklearn.searchfieldexample.service.interfaces.UserService;
@RestController
@RequestMapping(“/api”)
@CrossOrigin(origins = “http://localhost:4200”, allowedHeaders = “*”, exposedHeaders = “Authorization”)
public class UserController {
@Autowired
private UserService userService;
@PostMapping(“/saveUser”)
public int saveAdminDetail(@RequestBody User user) {
return userService.SaveUser(user);
}
@PostMapping(“/filterData”)
public List<User> getFilteredData(@RequestBody User user) {
return userService.getFilteredData(user);
}
}

Creating the properties file
Here, we are creating the properties file inside the src/main/resources in the project.

persistence-mysql.properties

#
# JDBC connection properties
#
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
#
# Connection pool properties
#
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
#
# Hibernate properties
#
<!– hibernate.dialect=org.hibernate.dialect.MySQLDialect –>
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com. tecklearn.searchfieldexample.entity

Angular Module

Let’s see the directory structure of Angular we need to follow:

Create an Angular project

Let’s create an Angular project by using the following command:

ng new SearchFieldExample

Here, SearchFieldExample is the name of the project.

Install Bootstrap CSS framework

Use the following command to install bootstrap in the project.

npm install bootstrap@3.3.7 –save

Now, include the following code in the style.css file.

@import “~bootstrap/dist/css/bootstrap.css”;

Generate Component
Open the project in visual studio and then use the following command to generate Angular component:
ng g c ShowData

Let’s also create a service class by using the following command: –

ng g s services/User

Edit the app.module.ts file
- Import HttpModule – Here, we are importing HttpModule for server requests and specifying it in imports array.
- Register Service class – Here, we are mentioning the service class in providers array.
- Import ReactiveFormsModule – Here, we are importing ReactiveFormsModule for reactive forms and specifying it in imports array.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
// import ReactiveFormsModule for reactive form
import { ReactiveFormsModule } from ‘@angular/forms’;
// import Http module
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
import { ShowDataComponent } from ‘./show-data/show-data.component’;
import { UserService } from ‘./services/user.service’;
@NgModule({
declarations: [
AppComponent,
ShowDataComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
HttpModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }

Edit the app.component.html file

<app-show-data></app-show-data>

Create the User.ts class

Let’s create a class by using the following command: –

ng g class classes/User

Now, specify the required fields within the User class.

export class User {
name : string;
emailId : string;
qualification : string;
}

The purpose of this class is to map the specified fields with the fields of the Spring entity class.

Edit the user.service.ts file

import { Injectable } from ‘@angular/core’;
import { User } from ‘../classes/user’;
import { Http } from ‘@angular/http’;
@Injectable({
providedIn: ‘root’
})
export class UserService {
private baseUrl = “http://localhost:8080/SearchFieldExample/api/”;
constructor(private http : Http) { }
getData(user : User)
{
let url = this.baseUrl + “filterData”;
return this.http.post(url , user);
}
}

Edit the show-data.component.ts file

import { Component, OnInit } from ‘@angular/core’;
import { User } from ‘../classes/user’;
import { UserService } from ‘../services/user.service’;
import { FormGroup, FormControl } from ‘@angular/forms’;
@Component({
selector: ‘app-show-data’,
templateUrl: ‘./show-data.component.html’,
styleUrls: [‘./show-data.component.css’]
})
export class ShowDataComponent implements OnInit {
private user = new User();
private data;
constructor(private userService : UserService) { }
ngOnInit() {
this.getData(this.user);
}
form = new FormGroup({
name : new FormControl(),
email : new FormControl()
});
getData(user)
{
this.userService.getData(user).subscribe(
response => {
this.data = response.json();
},
error => {
console.log(“error while getting user Details”);
}
);
}
searchForm(searchInfo)
{
this.user.name = this.Name.value;
this.user.emailId = this.Email.value;
this.getData(this.user);
}
get Name()
{
return this.form.get(‘name’);
}
get Email()
{
return this.form.get(’email’);
}
}

Edit the show-data.component.html file

<br><br>
<div class=”row”>
<div class=”col-md-offset-4 col-md-4″>
<form [formGroup]=”form” #searchInfo (ngSubmit)=”searchForm(searchInfo)”>
<table>
<tr>
<td> <input type=”text” formControlName=”name” placeholder=”Enter name” class=”form-control”> </td>
<td> <input type=”text” formControlName=”email” placeholder=”Enter EmailId” class=”form-control”> </td>
<td><button class=”btn btn-primary hidden-xs”>Search</button></td>
</tr>
</table>
</form>
</div>
</div>
<br><br>
<div class=”row”>
<div class=”col-md-offset-4 col-md-4″>
<table class=”table table-bordered table-striped table-responsive”>
<tr>
<th>Name</th>
<th>Email</th>
<th>Qualification</th>
</tr>
<ng-container *ngFor=”let item of data”>
<tr>
<td>{{item.name}}</td>
<td>{{item.emailId}}</td>
<td>{{item.qualification}}</td>
</tr>
</ng-container>
</table>
</div>
</div>

Once completed, enter the URL http://localhost:4200/ at the web browser. The following web page occurs:

Now, we can search the data by providing a specific keyword in the search field.

Search by name:

Search by email-id:

So, this brings us to the end of blog. This Tecklearn ‘Spring Angular Search Field Application’ blog helps you with commonly asked questions if you are looking out for a job in Angular JS and Front-End Development. If you wish to learn Angular JS and build a career in Front-End Development domain, then check out our interactive, Angular JS Training, that comes with 24*7 support to guide you throughout your learning period. Please find the link for course details:

https://www.tecklearn.com/course/angular-js-training/

Angular JS Training

About the Course

Angular JS certification training is designed for developers who are responsible for building applications using AngularJS. Through a combination of presentations and hands-on practices, participants will explore Angular comprehensively and learn to build components, directives, template-driven forms, routing, etc. for complex data-centric (enterprise) applications. This Angular online training will update your knowledge and skills with the current Angular version to lift your career.

Why Should you take Angular JS Training?

The average salary for “Angular Developer” ranges from approximately $92,814 per year for a Developer to $113,069 per year for a Full Stack Developer (Indeed.com).
YouTube, Google, Cisco, Nike, Samsung, Microsoft, Forbes, BMW and many Fortune 500 companies are using Angular as their front-end development framework to deliver an engaging user experience.
Angular’s powerful cross-platform feature allows developers to build progressive web applications and native mobile applications.

What you will Learn in this Course?

Introduction to Angular

Introduction to Angular
Comparison between front-end tools
Angular Architecture
Building blocks of Angular
Angular Installation
Angular CLI
Angular CLI commands
Angular Modules

Angular Components and Data Binding

Working of Angular Applications
Angular App Bootstrapping
Angular Components
Creating A Component Through Angular CLI
Ways to specify selectors
Template and styles
Installing bootstrap to design application
Data Binding
Types of Data Binding
Component Interaction using @Input and @Output decorator
Angular Animations

TypeScript

What is TypeScript
Need of TypeScript
How to install TypeScript
Nodemon for monitoring changes
Interfaces in Class, String Templates, Maps,
Sets and Object Restructuring

Directives and Pipes in Angular

Angular Directives
@Component Directive
Structural Directives
Attribute Directives
Custom Directives
Pipes
Built-in Pipes
Chaining pipes
Custom pipes
Pipe Transform Interface & Transform Function
Pure and Impure pipes

Angular Services and Dependency Injection

Angular service
Need for a service
Dependency Injection
Creating a service
Hierarchical Injector
Injecting A Service into Another Service
Observables
RxJS Library
Angular’s Interaction with Backend
Parts of an Http Request
HttpClient

Forms in Angular

Forms in Angular
What are their functions
Advantages of Forms
Various Types of Forms
What is Angular Validation and Model driven approach

Angular Routing

Angular Routing
Angular Routing benefits and features
Building a single page application and updating it dynamically with Angular Routing
What is Parameter Routing
Router Lifecycle Hooks and Child Routes

Authentication and Security in Angular

What is Authentication?
Authentication and authorization
Types of Authentication
Where to store tokens?
JSON Web Tokens (JWT)
Authentication in Angular application
Security threats in web application

Testing Angular applications

Testing of Angular applications
Deployment of Angular Test Bed for testing on Angular framework
Setup of various tools for testing
Testing services in Angular Framework
E2E and Document Object Model testing

Got a question for us? Please mention it in the comments section and we will get back to you.

433