Registration Form in Spring boot with Angular

Posted on November 18, 2022

10 min read

1,225

In this tutorials will teach you how to do the Restful API to add the records in to the mysql database.how to insert the records into mysql database step by step via spring boot layer architecture process using industrial standards.

Create the Package entity inside the package create the class Employee

Employee

package com.example.Registation.Entity;
import javax.persistence.*;

@Entity
@Table(name="employee")
public class Employee 
{
    @Id
    @Column(name="employee_id", length = 45)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int employeeid;

    @Column(name="employee_name", length = 255)
    private String employeename;

    @Column(name="address", length = 255)
    private String address;

    @Column(name="mobile", length = 20)
    private int mobile;

    public Employee(int employeeid, String employeename, String address, int mobile) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.address = address;
        this.mobile = mobile;
    }

    public Employee() {
    }

    public int getEmployeeid() {
        return employeeid;
    }

    public void setEmployeeid(int employeeid) {
        this.employeeid = employeeid;
    }

    public String getEmployeename() {
        return employeename;
    }

    public void setEmployeename(String employeename) {
        this.employeename = employeename;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "Employee{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", address='" + address + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.example.Registation.Entity;

import javax.persistence.*;

@Entity

@Table(name="employee")

public class Employee

{

@Id

@Column(name="employee_id", length = 45)

@GeneratedValue(strategy = GenerationType.AUTO)

private int employeeid;

@Column(name="employee_name", length = 255)

private String employeename;

@Column(name="address", length = 255)

private String address;

@Column(name="mobile", length = 20)

private int mobile;

public Employee(int employeeid, String employeename, String address, int mobile) {

this.employeeid = employeeid;

this.employeename = employeename;

this.address = address;

this.mobile = mobile;

}

public Employee() {

}

public int getEmployeeid() {

return employeeid;

}

public void setEmployeeid(int employeeid) {

this.employeeid = employeeid;

}

public String getEmployeename() {

return employeename;

}

public void setEmployeename(String employeename) {

this.employeename = employeename;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "Employee{" +

"employeeid=" + employeeid +

", employeename='" + employeename + '\'' +

", address='" + address + '\'' +

", mobile=" + mobile +

'}';

}

Create the Package Dt0 inside the package create the class EmployeeDTO

EmployeeDTO

package com.example.Registation.Dto;

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

public class EmployeeDTO {


    private int employeeid;
    private String employeename;
    private String address;
    private int mobile;

    public EmployeeDTO(int employeeid, String employeename, String address, int mobile) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.address = address;
        this.mobile = mobile;
    }

    public EmployeeDTO() {
    }

    public int getEmployeeid() {
        return employeeid;
    }

    public void setEmployeeid(int employeeid) {
        this.employeeid = employeeid;
    }

    public String getEmployeename() {
        return employeename;
    }

    public void setEmployeename(String employeename) {
        this.employeename = employeename;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "EmployeeDTO{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", address='" + address + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.example.Registation.Dto;

import javax.persistence.Column;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

public class EmployeeDTO {

private int employeeid;

private String employeename;

private String address;

private int mobile;

public EmployeeDTO(int employeeid, String employeename, String address, int mobile) {

this.employeeid = employeeid;

this.employeename = employeename;

this.address = address;

this.mobile = mobile;

}

public EmployeeDTO() {

}

public int getEmployeeid() {

return employeeid;

}

public void setEmployeeid(int employeeid) {

this.employeeid = employeeid;

}

public String getEmployeename() {

return employeename;

}

public void setEmployeename(String employeename) {

this.employeename = employeename;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "EmployeeDTO{" +

"employeeid=" + employeeid +

", employeename='" + employeename + '\'' +

", address='" + address + '\'' +

", mobile=" + mobile +

'}';

}

Create the Package Controller inside the package create the class EmployeeController

EmployeeController

package com.example.Registation.EmployeeController;
import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin
@RequestMapping("api/v1/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @PostMapping(path = "/save")
    public String saveEmployee(@RequestBody EmployeeDTO employeeDTO)
    {
        String id = employeeService.addEmployee(employeeDTO);
        return id;
    }
}

package com.example.Registation.EmployeeController;

import com.example.Registation.Dto.EmployeeDTO;

import com.example.Registation.Service.EmployeeService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

@RestController

@CrossOrigin

@RequestMapping("api/v1/employee")

public class EmployeeController {

@Autowired

private EmployeeService employeeService;

@PostMapping(path = "/save")

public String saveEmployee(@RequestBody EmployeeDTO employeeDTO)

{

String id = employeeService.addEmployee(employeeDTO);

return id;

}

Create the Package Service inside the package create the one class EmployeeServiceIMPL and create one interface EmployeeService

Employee Service

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;

public interface EmployeeService {
    String addEmployee(EmployeeDTO employeeDTO);
}

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;

public interface EmployeeService {

String addEmployee(EmployeeDTO employeeDTO);

}

EmployeeServiceIMPL

package com.example.Registation.Service.impl;
import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Entity.Employee;
import com.example.Registation.Repo.EmployeeRepo;
import com.example.Registation.Service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class EmployeeIMPL implements EmployeeService 
 {
    @Autowired
    private EmployeeRepo employeeRepo;
    @Override
    public String addEmployee(EmployeeDTO employeeDTO) 
       {

        Employee employee = new Employee(
                employeeDTO.getEmployeeid(),
                employeeDTO.getEmployeename(),
                employeeDTO.getAddress(),
                employeeDTO.getMobile()
        );
        employeeRepo.save(employee);
        return employee.getEmployeename();
    }
}

package com.example.Registation.Service.impl;

import com.example.Registation.Dto.EmployeeDTO;

import com.example.Registation.Entity.Employee;

import com.example.Registation.Repo.EmployeeRepo;

import com.example.Registation.Service.EmployeeService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

@Service

public class EmployeeIMPL implements EmployeeService

{

@Autowired

private EmployeeRepo employeeRepo;

@Override

public String addEmployee(EmployeeDTO employeeDTO)

{

Employee employee = new Employee(

employeeDTO.getEmployeeid(),

employeeDTO.getEmployeename(),

employeeDTO.getAddress(),

employeeDTO.getMobile()

);

employeeRepo.save(employee);

return employee.getEmployeename();

}

Create the Package EmployeeRepo inside the package create one interface EmployeeRepo

EmployeeRepo

package com.example.Registation.Repo;

import com.example.Registation.Entity.Employee;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;

@EnableJpaRepositories
@Repository
public interface EmployeeRepo extends JpaRepository<Employee,Integer> {
}

package com.example.Registation.Repo;

import com.example.Registation.Entity.Employee;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

import org.springframework.stereotype.Repository;

@EnableJpaRepositories

@Repository

public interface EmployeeRepo extends JpaRepository<Employee,Integer> {

}

Angular

First you have to run the Back-end Spring Boot Application

Study RestFul Api How to Works for beginners here.

if you not watch my angular tutorial please watch them then only you will clear of angular link here.

After That Create a new component in Angular

ng g c employee

1	ng g c employee

in the employee.component.html paste the following code.

employeetable.component.html

<div class="container mt-4" >
    <div class="card">
        <h1>Employee Registation</h1>
<form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}" class="form-control" id="name" placeholder="Enter Name">

    </div>

    <div class="form-group">
        <label>address</label>
        <input type="text" [(ngModel)]="address" [ngModelOptions]="{standalone: true}" class="form-control" id="address" placeholder="Enter address">
  
      </div>

      <div class="form-group">
        <label>Mobile</label>
        <input type="text" [(ngModel)]="mobile" [ngModelOptions]="{standalone: true}" class="form-control" id="mobile" placeholder="Enter Mobile">
  
      </div>
    
    <button type="submit" class="btn btn-primary mt-4" (click)="save()" >Submit</button>
  </form>
</div>
<div>

<h1>Employee Registation</h1>

<form>

</div>

<label>address</label>

</div>

<label>Mobile</label>

</div>

<button type="submit" class="btn btn-primary mt-4" (click)="save()" >Submit</button>

</form>

</div>

<div>

employee.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent 
{
  name: string ="";
  address: string ="";
  mobile: Number =0;

  constructor(private http: HttpClient) 
  {}

register()
  {
  
    let bodyData = {
      "employeename" : this.name,
      "address" : this.address,
      "mobile" : this.mobile
    };
 
    this.http.post("http://localhost:8085/api/v1/employee/save",bodyData).subscribe((resultData: any)=>
    {
        console.log(resultData);
        alert("Employee Registered Successfully")
        
        this.name = '';
        this.address = '';
       this.mobile  = 0;
    });
  }
save()
  {
        this.register();
  }
}

import { HttpClient } from '@angular/common/http';

import { Component } from '@angular/core';

@Component({

selector: 'app-employee',

templateUrl: './employee.component.html',

styleUrls: ['./employee.component.scss']

})

export class EmployeeComponent

{

name: string ="";

address: string ="";

mobile: Number =0;

constructor(private http: HttpClient)

{}

{

let bodyData = {

"employeename" : this.name,

"address" : this.address,

"mobile" : this.mobile

};

this.http.post("http://localhost:8085/api/v1/employee/save",bodyData).subscribe((resultData: any)=>

{

console.log(resultData);

alert("Employee Registered Successfully")

this.name = '';

this.address = '';

this.mobile = 0;

});

}

save()

{

this.register();

}

Registration Form in Spring boot with Angular

Employee

EmployeeDTO

EmployeeController

Employee Service

EmployeeServiceIMPL

EmployeeRepo

Angular

i have attached the video link below. which will do this tutorials step by step

Create Maven project in Intellij

Django Vue.js Full Stack App

Django React Full Stack Project

Spring boot with Angular MongoDB database Full Stack Project

Node js Angular Mongodb Search Functionality

Registration Form using Node js Angular Mongodb

Leave a Reply Cancel reply

Check Also

Create Maven project in Intellij

Recent Posts