📌 EL INFORMATICO 👷 IBERO : Read

Mostrando las entradas con la etiqueta Read. Mostrar todas las entradas

miércoles, 1 de enero de 2025

Java Web : Proyecto Create, Read, Update and Delete (CRUD) con Spring Boot, DB Mysql y Thymeleaf + Boostrap (MVC)

#01: Creación del Proyecto en Spring Tool Suite – Estructura de Paquetes y Entidad Empleado

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 como motor de plantillas para la capa de presentación y MySQL como base de datos para el almacenamiento persistente de datos. Desde la configuración inicial del entorno hasta la implementación de funcionalidades CRUD completas, este artículo es ideal para quienes buscan fortalecer sus habilidades en desarrollo web utilizando tecnologías modernas y el poderoso framework Spring Boot. A lo largo del tutorial, se cubrirán conceptos esenciales como la configuración de la conexión a la base de datos MySQL, la creación de entidades JPA, la definición de controladores, y el diseño de vistas interactivas con Thymeleaf, proporcionando una guía práctica para desarrollar aplicaciones robustas y escalables.

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
Mysql Driver
Thymeleaf
Spring web
Spring data JPA

Descarga el proyecto y ábrelo en tu IDE.
Configura el archivo application.properties para acceso a la base de datos en Mysql.

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:

Spring boot devtools
Mysql Driver
Thymeleaf
Spring web
Spring data JPA

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 para el código :

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

Service Interfaces
Services Implements

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 Empleado.
Define los atributos de la entidad y usa las anotaciones de JPA (@Entity, @Id, @GeneratedValue, etc.).

Endidad Empleado

La entidad Empleado se utiliza para mapear los datos de los empleados en la base de datos. A continuación se presenta la definición de la clase:

package com.ibero.web.entities;
import javax.persistence.*;
import java.io.Serializable;

@Entity
@Table(name = "employee")
public class Empleado implements Serializable {

@Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

private String nombre;

private String apePaterno;

private String apeMaterno;

private String nomCompleto;

private String tDocumento;

private String documento;

private String foto;

@PrePersist
    @PreUpdate
    public void prepersiste() {
        this.nomCompleto = this.nombre + " " + this.apePaterno + " " + this.apeMaterno;
    }

// Getters y Setters

public Integer getId() {
        return id;
    }

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

public String getNombre() {
        return nombre;
    }

public void setNombre(String nombre) {
        this.nombre = nombre;
    }

public String getApePaterno() {
        return apePaterno;
    }

public void setApePaterno(String apePaterno) {
        this.apePaterno = apePaterno;
    }

public String getApeMaterno() {
        return apeMaterno;
    }

public void setApeMaterno(String apeMaterno) {
        this.apeMaterno = apeMaterno;
    }

public String getNomCompleto() {
        return nomCompleto;
    }

public void setNomCompleto(String nomCompleto) {
        this.nomCompleto = nomCompleto;
    }

public String getTDocumento() {
        return tDocumento;
    }

public void setTDocumento(String tDocumento) {
        this.tDocumento = tDocumento;
    }

public String getDocumento() {
        return documento;
    }

public void setDocumento(String documento) {
        this.documento = documento;
    }

public String getFoto() {
        return foto;
    }

public void setFoto(String foto) {
        this.foto = foto;
    }
}

Configuración del archivo `application.properties` de Spring Boot

Esta configuración establece el nombre de la aplicación como TutorialWebMysql y define que se ejecutará en el puerto 8090. También configura los detalles de conexión a la base de datos MySQL, incluyendo el driver, la URL de conexión, el nombre de usuario y la contraseña. Finalmente, se establece que Hibernate deberá crear las tablas en la base de datos si no existen.

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

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)♠