Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6 – Parte 2

5 minuto(s)

En esta página:

Demo

En la Parte anterior llamada Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6 – Parte 1, realizamos la creación de un nuevo proyecto para nuestro sistema CRUD, configuramos desde la web de Spring Initializr el nuevo proyecto con las versiones de las herramientas correspondientes, asimismo agregamos las dependencias que necesitaremos para nuestro CRUD, si necesitamos otras dependencias, la agregamos más adelante, no hay problema. Bueno vamos con esta Parte 2 y continuemos con la creación del proyecto.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5 (Final – Código Fuente GitHub)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:

Spotify:	Sound Cloud:	Apple Podcasts

Bien ahora continuemos con el Post: Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6 – Parte 2.

Base de Datos

Para el sistema CRUD voy a usar la base de datos MySQL que es una base de datos ideal para proyectos web normales como este, mi base de datos la voy a crear manualmente desde phpMyadmin que viene con el servidor local XAMPP. A mi base de datos le pondré de nombre crudspring y dentro de ella creo una tabla con el nombre postres.

A la tabla postres le agrego los campos id, nombre, img, precio, stock, created_at y updated_at.

Una vez que tenemos nuestra tabla para gestionar los datos o postres del sistema CRUD, vamos a realizar la conexión entre Spring Framework y MySQL.

La conexión a la base de datos, la vamos a realizar en el archivo llamado application.properties, este archivo se encuentra en sistemacrud > src > main > resources > application.properties


/sistemacrud 
  ├── /.mvn
  ├── /src
      ├── /main
          ├── /java
          ├── /resources
              ├── /static 
              ├── /templates
              ├── application.properties // Abro este Archivo 
      ├── /test 
  ├── /target
  ├── .gitignore
  ├── HELP.md
  ├── mvnw
  ├── mvnw.cmd 
  ├── porn.xml

/sistemacrud

├── /.mvn

├── /src

├── /main

├── /java

├── /resources

├── /static

├── /templates

├── application.properties // Abro este Archivo

├── /test

├── /target

├── .gitignore

├── HELP.md

├── mvnw

├── mvnw.cmd

├── porn.xml

Abrimos el archivo application.properties y dentro de el llamamos a Hibernate, el cual es un Framework de mapeo relacional de objetos especializado en datos, luego colocamos la ruta local de la base de datos mysql crudspring, paso seguido colocamos el usuario, password y el nivel de acceso del usuario root a WARN.


# Configuración de la Base de Datos 
spring.datasource.url=jdbc:mysql://localhost:3306/crudspring
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Configuración de la Base de Datos

spring.datasource.url=jdbc:mysql://localhost:3306/crudspring

spring.datasource.username=root

spring.datasource.password=

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

Adicionalmente agrego las siguientes configuraciones para que mi proyecto funcione óptimamente.


# Mostrar Errores en Consola
logging.level.root=WARN

# Configuracións de Spring DevTools 
spring.devtools.livereload.enable=true 
spring.devtools.restart.enabled=true
spring.devtools.restart.trigger-file=true
spring.devtools.restart.poll-interval=2s
spring.devtools.restart.quiet-period=1s

# Configuración de Thymeleaf
spring.thymeleaf.cache = false 
spring.thymeleaf.prefix = file:src/main/resources/templates/ 

# Refrescar los Archivos Estáticos en las Vistas (Colocamos toda la ruta hacia el directorio 'static')
spring.resources.static-locations=file:///F://old_h_xampp/htdocs/xampp/nc/tutoriales/blog/sistemacrud/src//main/resources/static/ 

# Límite de Peso de los archivos e imágenes a Subir 
spring.http.multipart.max-file-size=10MB
spring.http.multipart.max-request-size=10MB

# Mostrar Errores en Consola

logging.level.root=WARN

# Configuracións de Spring DevTools

spring.devtools.livereload.enable=true

spring.devtools.restart.enabled=true

spring.devtools.restart.trigger-file=true

spring.devtools.restart.poll-interval=2s

spring.devtools.restart.quiet-period=1s

# Configuración de Thymeleaf

spring.thymeleaf.cache = false

spring.thymeleaf.prefix = file:src/main/resources/templates/

# Refrescar los Archivos Estáticos en las Vistas (Colocamos toda la ruta hacia el directorio 'static')

spring.resources.static-locations=file:///F://old_h_xampp/htdocs/xampp/nc/tutoriales/blog/sistemacrud/src//main/resources/static/

# Límite de Peso de los archivos e imágenes a Subir

spring.http.multipart.max-file-size=10MB

spring.http.multipart.max-request-size=10MB

A continuación todo el código del archivo application.properties


# Configuración de la Base de Datos 
spring.jpa.hibernate.ddl-auto=none
spring.datasource.url=jdbc:mysql://localhost:3306/crudspring
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Mostrar Errores en Consola
logging.level.root=WARN

# Configuracións de Spring DevTools 
spring.devtools.livereload.enable=true 
spring.devtools.restart.enabled=true
spring.devtools.restart.trigger-file=true
spring.devtools.restart.poll-interval=2s
spring.devtools.restart.quiet-period=1s

# Configuración de Thymeleaf
spring.thymeleaf.cache = false 
spring.thymeleaf.prefix = file:src/main/resources/templates/

# Refrescar los Archivos Estáticos en las Vistas (Colocamos toda la ruta hacia el directorio 'static')
spring.resources.static-locations=file:///D://xampp/htdocs/xampp/nc/tutoriales/blog/sistemacrud/src/main/resources/static/

# Límite de Peso de los archivos e imágenes a Subir 
spring.http.multipart.max-file-size=10MB
spring.http.multipart.max-request-size=10MB

# Configuración de la Base de Datos

spring.jpa.hibernate.ddl-auto=none

spring.datasource.url=jdbc:mysql://localhost:3306/crudspring

spring.datasource.username=root

spring.datasource.password=

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Mostrar Errores en Consola

logging.level.root=WARN

# Configuracións de Spring DevTools

spring.devtools.livereload.enable=true

spring.devtools.restart.enabled=true

spring.devtools.restart.trigger-file=true

spring.devtools.restart.poll-interval=2s

spring.devtools.restart.quiet-period=1s

# Configuración de Thymeleaf

spring.thymeleaf.cache = false

spring.thymeleaf.prefix = file:src/main/resources/templates/

# Refrescar los Archivos Estáticos en las Vistas (Colocamos toda la ruta hacia el directorio 'static')

spring.resources.static-locations=file:///D://xampp/htdocs/xampp/nc/tutoriales/blog/sistemacrud/src/main/resources/static/

# Límite de Peso de los archivos e imágenes a Subir

spring.http.multipart.max-file-size=10MB

spring.http.multipart.max-request-size=10MB

Con esto ya tenemos integrada nuestra aplicación con la base de datos MySQL.

Mencionar que vamos a usar una Arquitectura de Software que es muy popular en el mundo del desarrollo y que se caracteriza por ofrecer una estructura dinámica, práctica, etc. para los proyectos, hablo de MVC (Modelo Vista Controlador) y tal como su nombre lo indica, vamos a tener que crear un modelo, una o muchas vistas y un controlador para poder gestionar las tareas del sistema CRUD.

Modelo

Voy comenzar creando un directorio llamado Model y dentro de el creo mi modelo, para esto creo un archivo llamado Postre.java en sistemacrud > src > main > java > com > sistemacrud > sistemacrud > Model > Postre.java


/sistemacrud 
  ├── /.mvn
  ├── /src
      ├── /main
          ├── /java  
              ├── /com 
                  ├── /sistemacrud  
                      ├── /sistemacrud  
                          ├── /Model  // Creo este directorio 
                              ├── Postre.java // Creo y Abro este Archivo 
                          ├── SistemacrudApplication.java 
  ├── /target
  ├── .gitignore
  ├── HELP.md
  ├── mvnw
  ├── mvnw.cmd 
  ├── porn.xml

/sistemacrud

├── /.mvn

├── /src

├── /main

├── /java

├── /com

├── /sistemacrud

├── /Model // Creo este directorio

├── Postre.java // Creo y Abro este Archivo

├── SistemacrudApplication.java

├── /target

├── .gitignore

├── HELP.md

├── mvnw

├── mvnw.cmd

├── porn.xml

Abro el archivo Postre.java y dentro de el defino los campos de datos que usaré, asimismo les defino el tipo de dato que tendrán, yo les daré el tipo de dato String a todos los campos, menos al id que será un Integer (int) o entero.


package com.sistemacrud.sistemacrud.Model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

// Modelo

@Entity
@Table(name = "postres")
public class Postre {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  public int id;
  public String nombre;
  public String precio;
  public String stock;
  public String img;

  public int getId() {
    return id;
  }

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

  public String getNombre() {
    return nombre;
  }

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

  public String getPrecio() {
    return precio;
  }

  public void setPrecio(String precio) {
    this.precio = precio;
  }

  public String getStock() {
    return stock;
  }

  public void setStock(String stock) {
    this.stock = stock;
  }

  public String getImagen() {
    return img;
  }

  public void setImagen(String img) {
    this.img = img;
  }

}

package com.sistemacrud.sistemacrud.Model;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

// Modelo

@Entity

@Table(name = "postres")

public class Postre {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

public int id;

public String nombre;

public String precio;

public String stock;

public String img;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getNombre() {

return nombre;

}

public void setNombre(String nombre) {

this.nombre = nombre;

}

public String getPrecio() {

return precio;

}

public void setPrecio(String precio) {

this.precio = precio;

}

public String getStock() {

return stock;

}

public void setStock(String stock) {

this.stock = stock;

}

public String getImagen() {

return img;

}

public void setImagen(String img) {

this.img = img;

}

Bueno, hasta aquí llegamos con esta segunda parte del tutorial en donde creamos la base de datos y la tabla postres en donde almacenaremos los registros, asimismo realizamos la conexión entre Spring y MySQL y por último comenzamos con la creación del modelo de nuestro sistema CRUD.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En la siguiente parte vamos a configurar el controlador y un servicio de interface para la aplicación.
Los pasos mencionados en este tutorial pueden cambiar en un futuro, esto no depende de mi, si no de la organización que da soporte a Spring Framework, que suele cambiar el orden y las opciones de su herramienta.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.