📌 EL INFORMATICO 👷 IBERO : Java Web : Proyecto Create, Read, Update and Delete (CRUD) con Spring Boot, DB en memoria H2 y Thymeleaf (MVC)

Explora el desarrollo de un proyecto Java Web paso a paso con Spring Boot, que abarca las operaciones básicas de Create, Read, Update y Delete (CRUD). En este tutorial, aprenderás a construir una aplicación utilizando el patrón de arquitectura MVC, con Thymeleaf para la capa de presentación y una base de datos en memoria H2 para el almacenamiento temporal de datos. Desde la configuración inicial hasta la implementación de funcionalidades CRUD completas, este artículo es ideal para quienes buscan fortalecer sus habilidades en desarrollo web con tecnologías modernas y el framework Spring Boot.

Creación del Proyecto

Para crear un proyecto existen dos formas, uno es utilizando el Spring Initializr y la otra es desde el Spring Tools Suite, los pasos son los siguientes:

Opción 01:

Abre Spring Initializr https://start.spring.io/ y selecciona las opciones de proyecto (maven, versión de Java 17).
Agrega las dependencias necesarias:

Spring boot devtools
H2 database
Thymeleaf
Spring web
Spring data JPA

Descarga el proyecto y ábrelo en tu IDE.
Configura el archivo application.properties para la base de datos en memoria H2.

Opcion 02:

Abre el IDE Spring Tool Suite

Para crear el proyecto sigue File > New >Others > Spring Boot > Spring started project.

Presionamos siguiente y agregamos las dependencias:

Por ultimo presionamos finish y se creará el proyecto.

Creación de la Estructura de los paquetes

En esta parte creamos los paquetes para el crud.

Crea los paquetes básicos:

Entities para las entidades.
Repositories para la interfaz de repositorio.
Service para la lógica de negocio.
Controllers para los controladores.

Creación de la Entidad

En esta parte, definiremos la entidad principal que servirá como modelo de datos en el proyecto. Esta entidad representará una tabla en la base de datos.

Crea una clase en el paquete Entities llamado People.
Define los atributos de la entidad y usa las anotaciones de JPA (@Entity, @Id, @GeneratedValue, etc.).

package com.ibero.web.entities;

import java.io.Serializable;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.PrePersist;
import jakarta.persistence.PreUpdate;
import jakarta.persistence.Table;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotEmpty;

@Entity
@Table(name = "peoples")
public class People implements Serializable{
	
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Integer id;
	
	@NotEmpty (message = "¡El nombres no debe ser vacío!")
	@NotBlank (message = "Complete el nombres con valores")
	@Column   (name = "names")
	private String names;
	
	@NotEmpty(message = "¡El apellidos no debe ser vacío!")
	@NotBlank (message = "Complete el apellidos con valores")
	private String lastNames;
	
	private String FullNames;
	
	//Cuando se crea una nuevo registro y se actualiza:
	@PrePersist
	@PreUpdate
	public void Prepersist() {
		this.FullNames = this.names + " " + this.lastNames;
	}
	
	public Integer getId() {
		return id;
	}

public void setId(Integer id) {
		this.id = id;
	}

public String getNames() {
		return names;
	}

public void setNames(String names) {
		this.names = names;
	}

public String getLastNames() {
		return lastNames;
	}

public void setLastNames(String lastNames) {
		this.lastNames = lastNames;
	}

public String getFullNames() {
		return FullNames;
	}

public void setFullNames(String fullNames) {
		FullNames = fullNames;
	}
	private static final long serialVersionUID = 1L;
}

Creación de la Interface Repository.

En esta sección, crearemos la interfaz del repositorio, que permitirá realizar las operaciones CRUD en la base de datos sin escribir consultas SQL manuales.

Creación de la Clase Service

En esta sección, crearemos una clase de servicio que se encargará de la lógica de negocio del proyecto, manejando las operaciones de creación, lectura, actualización y eliminación.

package com.ibero.web.services;

import java.util.List;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.ibero.web.entities.People;
import com.ibero.web.repositories.IPeopleDao;

import jakarta.persistence.EntityManager;
import jakarta.persistence.PersistenceContext;

@Service
public class PeopleService implements IPeopleDao{

@PersistenceContext
	private EntityManager emManager;
	
	@SuppressWarnings("unchecked")
	@Transactional(readOnly = true)
	@Override
	public List<People> findAll() {
		return emManager.createQuery("from People").getResultList();
	}

@Override
	@Transactional
	public void savePeople(People people) {
		if(people.getId() != null && people.getId() > 0) {
			emManager.merge(people);
		}else {
			emManager.persist(people);
		}
	}

@Override
	@Transactional(readOnly = true) //Indica que es solo de lectura
	public People findById(Integer id) {
		return emManager.find(People.class, id);
	}

@Override
	@Transactional
	public void deletePeopleById(Integer id) {
		People people = findById(id);
		emManager.remove(people);
	}
}

Creación de la Clase Controller

En esta parte, configuraremos la clase de controlador para manejar las solicitudes de la aplicación y definir las rutas para las operaciones CRUD.

package com.ibero.web.controllers;

import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.bind.support.SessionStatus;

import com.ibero.web.entities.People;
import com.ibero.web.services.PeopleService;

import jakarta.validation.Valid;

@Controller
@SessionAttributes("people")
public class PeopleController {
	
	private final Logger log = LoggerFactory.getLogger(getClass());
	
	@Autowired
	private PeopleService peoservice;
	
	@GetMapping("/")
	public String showList(Model model) {
		List<People> peoples = peoservice.findAll();
		model.addAttribute("titlePage","Lista de Personas");
		model.addAttribute("peoples",peoples);
		return "showList";
	}
	
	@GetMapping("/showForm")
	public String showForm(Model model) {
		model.addAttribute("titleForm","Registrar Datos de la Persona");
		model.addAttribute("people",new People());
		return "form";
	}
	
	@PostMapping("/showForm")
	public String processForm(@Valid People people, BindingResult result,SessionStatus status,Model model) {
		if(result.hasErrors()) {
			model.addAttribute("titleForm", people.getId() != null && people.getId() > 0 ? "Editar Datos de la Persona" : "Registrar Datos de la Persona");
	        return "form";
		}
		peoservice.savePeople(people);
		status.setComplete();
		return "redirect:/";
	}
	
	@GetMapping("/showForm/{id}")
	public String showForm(@PathVariable Integer id, Model model) {
		People people = null;
		if(id > 0) {
			people = peoservice.findById(id);
		}else {
			return "redirect:/";
		}
		model.addAttribute("titleForm","Editar datos del Persona");
		model.addAttribute("people",people);
		return "form";
	}
	
	@GetMapping("/deleteById/{id}")
	public String deleteById(@PathVariable Integer id) {
		if(id > 0) {
			peoservice.deletePeopleById(id);
		}
		return "redirect:/";
	}
}

Creación de la Vista para Listar Registros con Thymeleaf

Aquí crearemos una vista en Thymeleaf para mostrar la lista de registros almacenados en la base de datos, utilizando HTML y expresiones de Thymeleaf para renderizar los datos.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<title>Home</title>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" th:href="@{/}">Menu</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false"
			aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link" th:href="@{/}">TODOS<span
						class="sr-only">(current)</span>
				</a></li>
				<li class="nav-item"><a class="nav-link" th:href="@{/showForm}">NUEVO</a></li>
			</ul>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="container">
			<div class="col-6">
				<h1 th:text="${titlePage}"></h1>
				<table>
					<thead>
						<tr>
							<th>Id</th>
							<th>Nombre Completo</th>
							<th>....</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="item: ${peoples}">
							<td th:text="${item.id}"></td>
							<td th:text="${item.FullNames}"></td>
							<td>
								<a class="btn btn-primary btn-xs" th:href="@{/showForm/}+ ${item.id}">Editar</a>
								<a class="btn btn-danger btn-xs" th:href="@{/deleteById/}+ ${item.id}">Eliminar</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

Creación de la Vista Form para Crear y Editar Registros

En esta sección, crearemos una vista de formulario que permita a los usuarios ingresar y actualizar datos de los registros, aprovechando la capacidad de Thymeleaf para enlazar formularios con el controlador.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<title>Formulario</title>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" th:href="@{/}">Menu</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false"
			aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link" th:href="@{/}">Home<span
						class="sr-only">(current)</span>
				</a></li>
				<li class="nav-item"><a class="nav-link" th:href="@{/showForm}">Registrar</a></li>
			</ul>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="container">
			<div class="col-6">
				<h1 th:text="${titleForm}"></h1>
				<form th:action="@{/showForm}" th:object="${people}" method="post"
					class="p-4 shadow rounded bg-light">
					<div class="mb-3">
						<label for="names" class="form-label">Nombre</label> 
						<input type="text" th:field="*{names}" class="form-control" placeholder="Ingrese su nombre" 
							th:errorclass="'form-control alert-danger'"/>
						<div class="form-text text-danger" th:if="${#fields.hasErrors('names')}" th:errors="*{names}"></div>	
					</div>
					<div class="mb-3">
						<label for="lastNames" class="form-label">Apellido</label> 
						<input type="text" th:field="*{lastNames}" class="form-control"	placeholder="Ingrese su apellido" 
							th:errorclass="'form-control alert-danger'"/>
						<div class="form-text text-danger" th:if="${#fields.hasErrors('lastNames')}" th:errors="*{lastNames}"></div>
					</div>
					<div class="d-flex justify-content-end">
						<button type="submit" class="btn btn-success">Registrar Persona</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

Ultimo antes de probar el proyecto creamos un archivo en la src/main/resources llamado import.sql que tendrá dos valores para insertar a travez de el insert de SQL.

Configuramos el archivo application.properties

En cuentra el código fuente del proyecto en el GitHub del Canal : Proyecto CRUD☻

Revisa los Videos del Canal de Youtube : Guía Completa: Cómo Crear un CRUD con Spring Boot, DB en memoria H2 y Thymeleaf (MVC)♠

📌 EL INFORMATICO 👷 IBERO

Menu

buscador

Visita

sábado, 26 de octubre de 2024

Java Web : Proyecto Create, Read, Update and Delete (CRUD) con Spring Boot, DB en memoria H2 y Thymeleaf (MVC)

Creación del Proyecto

Creación de la Estructura de los paquetes

Creación de la Entidad

Creación de la Interface Repository.

Creación de la Clase Service

No hay comentarios.:

Publicar un comentario

Adblock Detectado