Watch This Youtube Video to Understand the Code, Click Here
Here in this article, I'm going to create a Simple CRUD based Web project using Spring Boot, Thymeleaf, Spring Data JPA, Lombok, Maven with MySql Database.
In this project I'm creating an user, updating the user and deleting the user. This article is very useful for who are start creating web pages using Spring boot.
Home Page
 |
| Home Page |
Adding New User Page
 |
| Adding an User Page |
Updating New User Page
 |
| Updating an User Page |
Steps to create the project.
- Open Spring Initializer and fill the details of your project like Maven version , java version, Project name etc. as shown below and add the the required depenedencies.
- Lombok
- Thymeleaf
- MySql Driver
- Spring Data Jpa
- Spring Web
- Import the project in your IDE, i'm using intellij IDE.
- When import is successfull, you can see the project in left side of the panel.
- Expand the Project and packages and add all the classes and Html files and in configure the properties in application.properties files.
- Configure the application by adding below configuration on application.properties file
spring.datasource.url = jdbc:mysql://localhost:3306/database_namespring.datasource.username = rootspring.datasource.password = rootspring.datasource.driver-class-name = com.mysql.cj.jdbc.Driverspring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialectspring.jpa.hibernate.ddl-auto = updatespring.jpa.show-sql = true
- Now Create the following classes and HTML files in respective packages as shown in above picture. In this project I'm not create the service class because in this project there is no need of any service class, if you want to add you can add.
User.javapackage com.example.userWebApp;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import javax.persistence.*;
@Entity
@Table
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public class User {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String name;
private String phone;
}UserController.javapackage com.example.userWebApp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
@Controller
public class UserController {
@Autowired
private UserDao userDao;
@GetMapping("/")
public ModelAndView home(){
List<User> list =userDao.findAll();
return new ModelAndView("home","any",list);
}
@GetMapping("/add")
public String addNewUser(){
return "addnewuser";
}
@PostMapping("/save")
public String saveUser(@ModelAttribute User user){
userDao.save(user);
return "redirect:/";
}
@RequestMapping("/update/{id}")
public String updateUser(@PathVariable("id") Integer id, Model model){
User returnedUser = userDao.findById(id).get();
model.addAttribute("any",returnedUser);
return "update";
}
@RequestMapping("/delete/{id}")
public String deleteUser(@PathVariable Integer id){
userDao.delete(userDao.findById(id).get());
return "redirect:/";
}
}UserDao.javapackage com.example.userWebApp;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface UserDao extends JpaRepository<User,Integer> {
}home.html<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>User Home Page</title>
</head>
<body style="background: #b3b3cc">
<div>
<center >
<h1 style="color:white">User Mangement</h1>
<a style="color:green" th:href="@{/add}">Add New User</a><br><br>
<table border ="2" style="color: black">
<tr style="color: black">
<th>User Id</th>
<th>User Name</th>
<th>User Phone</th>
<th style="color:yellow">Action</th>
</tr>
<tr style="color:#004d00" th:each="u:${any}">
<th th:text="${u.id}"></th>
<th th:text="${u.name}"></th>
<th th:text="${u.phone}"></th>
<th>
<table>
<tr>
<td><a style="color:blue" th:href="@{/update/{id} (id=${u.id})}">Update</a></td>
<td><a style="color:red" th:href="@{/delete/{id} (id=${u.id})}">Delete</a></td>
</tr>
</table>
</th>
</tr>
</table>
</center>
</div>
</body>
</html>addnewuser.html<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>User Home Page</title>
<style>
body{
}
</style>
</head>
<body style="background: #b3b3cc">
<div>
<center >
<h1 style="color:white">User Mangement</h1>
<a style="color:green" href="/">See All User</a><br><br>
<form method="post", th:action="@{/save}">
<h3>Adding an user</h3>
<table style="color: black"><tr><th>User Name</th><th><input type ="text"placeholder="enter user name" name="name"></th></tr>
<tr><th>User Phone</th><th><input type ="number"placeholder="enter user phone number" name="phone"></th></tr>
<tr><th><button type="submit">Add</button></th></tr>
</table>
</form>
</center>
</div>
</body>
</html>update.html<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>User Home Page</title>
</head>
<body style="background: #b3b3cc">
<div>
<center >
<h1 style="color:white">User Mangement</h1>
<a style="color:green" href="/">See All User</a>
<form , method="post" th:action="@{/save}" th:object="${any}">
<h3>Updating User</h3>
<input type="hidden" name="id" th:value="${any.id}">
<table style="color: black"><tr><th>Update User Name</th><th><input type ="text"placeholder="enter user name" name="name"th:value="${any.name}"></th></tr>
<tr><th>Update User Phone</th><th><input type ="number"placeholder="enter user phone number" name="phone"th:value="${any.phone}"></th></tr><tr><th><button type="submit">Update</button></th></tr></table>
</form>
</center>
</div>
</body>
</html>Now run the main Spring boot application, and open any browser hit the http://localhost:8080/Your application is started.Watch This Youtube Video to Understand the Code, Click HereDatabase.Thankyou!
No comments:
Post a Comment