Registration Form using Angular and MySQL

In this article, we are going to develop a registration form using angular as the Front end and MySQL as the backend. We make use of spring boot to write Restful API.

Requirements for this project :

• Use any IDE to develop the Angular project.
• Use any IDE such as Eclipse or Netbeans etc of your choice to write a java Project using Spring Boot Frame Work.
• MySQL for the database.

Here I have Divide the whole project into three sections.

1. Database Creation using MySQL.
2. Writing API using Spring Boot.
3. Form Creation using Angular.

MySQL

You can use the Command line in the case of window or Terminal in ubuntu. Since I was working in ubuntu I used Terminal. You need to Run Xampp and mysql -u root to start your MySQL shell. After that, we need to Create the database, in our case we used user_db and with a table named as a user.

MySQL

Xampp

tableScript.sql

Java

We need to connect front end Angular to Database which can be done by using java along with spring boot framework.

First of all, we need to create a maven project. The file we need to create in src/main/java consists of main, API, service, repository, and entity class under a package called com.swathi.

Pom.xml

All the dependency of the project will be added in pom.xml.

main class — DemoPr

Now, We will start with the main class, we need to annotate demoProjectApllication with Spring Boot @SpringBootApplication annotation is used to mark a configuration class that declares one or more @Bean methods and also triggers auto-configuration and component scanning. It’s the same as declaring a class with @Configuration, @EnableAutoConfiguration, and @ComponentScan annotations.

Rest API class

The above image shows the class where we are writing all the restful API Methods.

A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data. That data can be used to GET, PUT, POST, and DELETE data types, which refers to the reading, updating, creating, and deleting of operations concerning resources[1].

For registration purposes, we need to Map the Post method which is done by annotating registration() by @PostMapping. The @RequestBody annotation maps the HttpRequest body to a transfer or domain object, enabling automatic deserialization of the inbound HttpRequest body onto a Java object.

Entity DTO Class

A Data Transfer Object (commonly known as a DTO) is usually an instance of a POCO (plain old CLR object) class used as a container to encapsulate data and pass it from one layer of the application to another. You would typically find DTOs being used in the service layer to return data to the presentation layer.

Entity Class

Creating Entity class :

• Add the @Entity annotation to the class.
• Add the @Id annotation to the property that represents the primary key of the table.
• Add the @Table annotation to the class to identify the name of the database table if it is different from the name of the entity class.

An entity is a lightweight persistence domain object. Typically, an entity represents a table in a relational database, and each entity instance corresponds to a row in that table. The primary programming artifact of an entity is the entity class, although entities can use helper classes.[2]

Service Interface

Service Implementation class

This UserServiceImpl class implements the UserService interface.
Here we have to Autowired the UserRepository Interface. We can Encrypt the password before saving the user’s Password to Database, which is done by using Base64 from java.util.

Repository Interface

In the repository, Interface extends PagingAndSorting. PagingAndSortingRepository is an extension of CrudRepository to provide additional methods to retrieve entities using the pagination and sorting abstraction.

Now, We have successfully written a restful API and service and persistence layer. Will see how we can connect java to MySQL.

1. We have to provide a database source URL, in our case it is jdbc:mysql://localhost:3306/user_db, where user_db is our database name and 3306 is the port number from the application log, we got after running the server.
2. The username of the data source in my case it is root.

All This needs to be defined in the properties file named application.

application Properties

Log4J2 provides various components, such as loggers, appenders, and layouts that work together to perform logging in an application.

log4j2 properties

We are done with the Backend part. Now, we will see how we can call this API from Angular Component.

Angular

Create Reactive form, with input Field for user name, mobile number, mail id, and password.

Will define User class having variable name similar to UserDTO Class from UserDTO.

user.component.ts

In Service Class, we will create the method named registration which will take user detail as a parameter. Inject HttpClient from ‘@anngular/common/http’. we call the method from API using URL http://localhost:8765/userAuth/registeruser and pass user data as the body.

user-authentication.service.ts

In register.component.ts, we define method name register which will be call on press of Register button from the registration form.

Github Link for the complete code of angular and java are separately given below, have a look at it.

Angular Code

swathiacharya/Form-using-Angular

Java Code

swathiacharya/JavaRestApi-connectiong-mySQL-and-Angular

Reference

[1] https://searchapparchitecture.techtarget.com/definition/RESTful-API

[2] https://docs.oracle.com/javaee/6/tutorial/doc/bnbpz.html.

Conclusion

You’ve made it this far, congratulations! In this article you have learned about:

• How to create a Database using MySQL.
• How To Connect Database and Angular Project.
• Wrote RestFul API for Registration form by using Spring boot Framework.

If you liked this article, share it with everyone! 😄

Happy Codding!

Thank you! 😃