Scribd
Cargar
155 vistas20 páginas

Guia SpringBoot Parte3 PDF

Este documento describe los pasos para configurar una aplicación Spring Boot para realizar operaciones CRUD (crear, leer, actualizar, eliminar) sobre tablas de una base de datos. Inicialmente se crean las tablas "curso" y "categoría" en MySQL y se insertan datos de prueba. Luego se genera el esqueleto de la aplicación Spring con plantillas Thymeleaf y se estructura el código para permitir realizar las operaciones CRUD sobre la tabla "alumno". Finalmente, se describen los pasos para agregar funcionalidad CRUD similar sobre la tabla "cur

Cargado por

Dronken Peru
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
155 vistas20 páginas

Guia SpringBoot Parte3 PDF

Este documento describe los pasos para configurar una aplicación Spring Boot para realizar operaciones CRUD (crear, leer, actualizar, eliminar) sobre tablas de una base de datos. Inicialmente se crean las tablas "curso" y "categoría" en MySQL y se insertan datos de prueba. Luego se genera el esqueleto de la aplicación Spring con plantillas Thymeleaf y se estructura el código para permitir realizar las operaciones CRUD sobre la tabla "alumno". Finalmente, se describen los pasos para agregar funcionalidad CRUD similar sobre la tabla "cur

Cargado por

Dronken Peru
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 20

Desarrollo Avanzado de Aplicaciones 2

Semana 9 – Spring Boot

Base de datos: creación de las tablas “curso” y “categoría”


1. Ejecutar el siguiente script en MySql Workbench

use DAA2;
CREATE TABLE `Categoria` (
`cod_cat` int(11) NOT NULL AUTO_INCREMENT,
`des_cat` varchar(255) NOT NULL,
PRIMARY KEY (`cod_cat`)
);
CREATE TABLE `Curso` (
`cod_cur` int(11) NOT NULL AUTO_INCREMENT,
`nom_cur` varchar(255) NOT NULL,
`cat_cur` int(11) NOT NULL,
PRIMARY KEY (`cod_cur`),
FOREIGN KEY (`cat_cur` ) REFERENCES `Categoria` (`cod_cat`)
);

insert into Categoria values (null, 'Programación Web');


insert into Categoria values (null, 'Base de Datos');
insert into Curso values (null,'DAA2',1);
insert into Curso values (null,'BD2',2);
STS: Proyecto spring-mantenimiento

2. Abrir en el STS el proyecto spring-mantenimiento

Creación de la plantilla

3. Crear la capeta “layout” dentro de la carpeta “templates”


4. Crear la página “layout.html” en la carpeta “layout” creada en el punto
anterior.

5. Reemplazar el contenido de la página “layout.htm” por:

<!DOCTYPE html>’
<html xmlns:th="http://www.thymeleaf.org">
<head th:fraget="head">
<meta charset="utf-8">
<title>Desarrollo Avanzado de Aplicaciones 2</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<script type="text/javascript" th:src="@{/js/script.js}"></script>
</head>
<body>
<header th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</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-item nav-link" th:href="@{/alumno/}">Alumnos</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" th:href="@{/curso/}">Cursos</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" th:href="@{#}">Categorías</a>
</li>
</ul>
</div>
</nav>
</header>

<div class="container">

</div>

<footer th:fragment="footer" class="bg-dark text-right text-white fixed-bottom">


<div class="container">
<p>Desarrollo Avanzado de Aplicaciones 2 &copy 2020</p>
</div>

</footer>

</body>
</html>

Aplicación de la plantilla “layout”

Página “listarAlumnos.html”

6. Borrar todo el bloque <head> y reemplazar por:

<head th:replace="layout/layout :: head">


7. En el <body> agregar lo siguiente:

<header th:replace="layout/layout :: header"></header>

8. Agregar lo siguiente antes de cierre </body>

<footer th:replace="layout/layout :: footer">


</footer>

9. Visualizar la página en el navegador

Corrección de acentos
10. En el “Package Explorer” hacer click derecho sobre la página
“listarAlumnos.html”
11. En “Text file encoding” marcar “Other”, seleccionar “UTF-8”, click en
“Apply and Close” y finalmente aceptar el mensaje de confirmación.

12. Corregir las palabras C�digo y Tel�fono en “listarAlumnos.html”

13. Grabar y visualizar la página en el navegador.


Páginas “formAlumnoNuevo.html” y “formAlumnoEditar.html”

14. Repetir los pasos del 6 al 13 para en páginas.

15. Visualizar las páginas en el navegador.

Estructurar el proyecto
Creación de la carpeta “Views”
16. Crear la capeta “views” dentro de la carpeta “templates”

17. Crear la capeta “alumno” dentro de la carpeta “views”

18. Mover las páginas “listarAlumnos.html”, “formAlumnoNuevo.html” y


“formAlumnoEditar.html” a la carpeta “alumno”.

Modificar referencias en “AlumnoController”


19. En “AlumnoController” realizar lo siguiente:

a. Reemplazar @RequestMapping por @RequestMapping("/alumno")


b. En el método “listar”:
i. Reemplazar @GetMapping("/listar")
por @GetMapping("/")
ii. Reemplazar return "listarAlumnos";
por return "/views/alumno/listarAlumnos";
c. En el método nuevoAlumno
reemplazar return "formAlumnoNuevo";
por return "/views/alumno/formAlumnoNuevo";
d. En el método grabarAlumno
reemplazar return "redirect:/listar"
por return "redirect:/alumno/";
e. En el método editarAlumno
reemplazar return "formAlumnoEditar";
por return "/views/alumno/formAlumnoEditar";

f. En el método eliminarAlumno
reemplazar return "redirect:/listar";
por return "redirect:/alumno/";

Modificar referencias en “listarAlumnos.html”

20. Modificar <a th:href="@{/nuevoAlumno}" >Nuevo</a>


por <a th:href="@{/alumno/nuevoAlumno}" >Nuevo</a>

21. Modificar <a th:href="@{/editarAlumno/}+${alumno.codigo}">Editar</a>


Por
<a th:href="@{/alumno/editarAlumno/}+${alumno.codigo}">Editar</a>

Modificar referencias en “formAlumnoNuevo.html” y


“formAlumnoEditar.html”

22. Reemplazar th:action="@{/grabarAlumno}"


Por <a th:action="@{/alumno/grabarAlumno}"

Modificar referencias en “script.js”

23. En la función “eliminar”


Reemplazar "/eliminarAlumno/"
Por "/alumno/eliminarAlumno/"

24. En la función “cancelar”


Reemplazar document.location.href = "/listar";
Por window.history.back();

25. Probar la funcionalidad del CRUD Alumno en el navegador ingresando a


la siguiente dirección:

http://localhost:8080/alumno/
CRUD Curso
26. En el paquete com.daa2.spring.model crear la clase “Categoria” con
los siguientes atributos:

private int cod_cat;


private String des_cat;

27. Para la clase usaremos las siguientes anotaciones:


@Entity
@Table(name="categoria")

Para el atributo cod_cat usaremos las siguientes anotaciones:


@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)

Luego de generar los constructores, getters y setters la clase quedará así:


package com.daa2.spring.model;

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

@Entity
@Table(name="categoria")
public class Categoria {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int cod_cat;
private String des_cat;

public Categoria() {
}

public Categoria(int cod_cat, String des_cat) {


super();
this.cod_cat = cod_cat;
this.des_cat = des_cat;
}

public int getCod_cat() {


return cod_cat;
}

public void setCod_cat(int cod_cat) {


this.cod_cat = cod_cat;
}

public String getDes_cat() {


return des_cat;
}

public void setDes_cat(String des_cat) {


this.des_cat = des_cat;
}
}
28. En el paquete com.daa2.spring.model crear la clase “Curso” con los
siguientes atributos:

private int cod_cur;


private String nom_cur;
private Categoria categoria;

29. Para la clase usaremos las siguientes anotaciones:


@Entity
@Table(name="curso")

Para el atributo cod_cur usaremos las siguientes anotaciones:


@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)

Para el atributo categoría usaremos las siguientes anotaciones:


@ManyToOne
@JoinColumn(name="cat_cur")
private Categoria categoria;

Luego de generar los constructores, getters y setters la clase quedará así:


package com.daa2.spring.model;

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

@Entity
@Table(name="curso")
public class Curso {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int cod_cur;
private String nom_cur;

@ManyToOne
@JoinColumn(name="cat_cur")
private Categoria categoria;

public Curso() {
}
public Curso(int cod_cur, String nom_cur, Categoria categoria) {
super();
this.cod_cur = cod_cur;
this.nom_cur = nom_cur;
this.categoria = categoria;
}

public int getCod_cur() {


return cod_cur;
}

public void setCod_cur(int cod_cur) {


this.cod_cur = cod_cur;
}

public String getNom_cur() {


return nom_cur;
}

public void setNom_cur(String nom_cur) {


this.nom_cur = nom_cur;
}

public Categoria getCategoria() {


return categoria;
}

public void setCategoria(Categoria categoria) {


this.categoria = categoria;
}

30. En el paquete com.daa2.spring.interfaces crear la interface


“ICategoria” la cual debe extender de CrudRepository. La interface
debe quedar así:

package com.daa2.spring.interfaces;

import org.springframework.data.repository.CrudRepository;

import com.daa2.spring.model.Categoria;

public interface ICategoria extends CrudRepository<Categoria, Integer> {


}

31. En el paquete com.daa2.spring.interfaces crear la interface “ICurso” la


cual debe extender de CrudRepository. La interface debe quedar así:

package com.daa2.spring.interfaces;

import org.springframework.data.repository.CrudRepository;
import com.daa2.spring.model.Curso;

public interface ICurso extends CrudRepository<Curso, Integer>{

32. En el paquete com.daa2.spring.interfacesservice crear la interface


“ICategoriaService”. Definir el siguiente método:

public List<Categoria> listarCategorias();

La interface debe quedar así:


package com.daa2.spring.interfacesservice;

import java.util.List;

import com.daa2.spring.model.Categoria;

public interface ICategoriaService {


public List<Categoria> listarCategorias();

33. En el paquete com.daa2.spring.interfacesservice crear la interface


“ICursoService”. Definir los siguientes métodos:

public List<Curso> listarCursos();


public int grabarCurso(Curso pCurso);
public Optional<Curso> cursoPorCodigo(int cod);
public void eliminarCurso(int cod);

La interface debe quedar así:

package com.daa2.spring.interfacesservice;
import java.util.List;
import java.util.Optional;
import com.daa2.spring.model.Curso;

public interface ICursoService {


public List<Curso> listarCursos();
public int grabarCurso(Curso pCurso);
public Optional<Curso> cursoPorCodigo(int cod);
public void eliminarCurso(int cod);

34. En el paquete com.daa2.spring.service crear la clase


“CategoriaService” la cual debe implementar la interface
ICategoriaService.

La clase debe quedar así:

package com.daa2.spring.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.daa2.spring.interfaces.ICategoria;
import com.daa2.spring.interfacesservice.ICategoriaService;
import com.daa2.spring.model.Categoria;

@Service
public class CategoriaService implements ICategoriaService {

@Autowired
private ICategoria cat;

@Override
public List<Categoria> listarCategorias() {
return (List<Categoria>) cat.findAll();
}

35. En el paquete com.daa2.spring.service crear la clase “CursoService”


la cual debe implementar la interface ICursoService.
La clase debe quedar así:
package com.daa2.spring.service;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.daa2.spring.interfaces.ICurso;
import com.daa2.spring.interfacesservice.ICursoService;
import com.daa2.spring.model.Curso;

@Service
public class CursoService implements ICursoService {
@Autowired
private ICurso cur;

@Override
public List<Curso> listarCursos() {
return (List<Curso>) cur.findAll();
}

@Override
public int grabarCurso(Curso pCurso) {
int res=0;
Curso curso = cur.save(pCurso);
if (!curso.equals(null)) {
res=1;
}
return res;
}

@Override
public Optional<Curso> cursoPorCodigo(int cod) {
return cur.findById(cod);
}

@Override
public void eliminarCurso(int cod) {
cur.deleteById(cod);
}

36. En el paquete com.daa2.spring.controller crear la clase


“CursoController”. La clase debe quedar así:

package com.daa2.spring.controller;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.daa2.spring.interfacesservice.ICursoService;
import com.daa2.spring.interfacesservice.ICategoriaService;
import com.daa2.spring.model.Curso;
import com.daa2.spring.model.Categoria;

@Controller
@RequestMapping("/curso")
public class CursoController {

@Autowired
private ICursoService servicio;

@Autowired
private ICategoriaService catservicio;

@GetMapping("/")
public String listar(Model model) {
List<Curso> cursos = servicio.listarCursos();
model.addAttribute("cursos", cursos);
return "/views/curso/listarCursos";
}

@GetMapping("/nuevoCurso")
public String nuevoCurso(Model model) {
List<Categoria> categorias = catservicio.listarCategorias();
model.addAttribute("curso", new Curso());
model.addAttribute("categorias", categorias);
return "/views/curso/formCursoNuevo";
}

@PostMapping("/grabarCurso")
public String grabarCurso(@Validated @ModelAttribute Curso pCurso) {
servicio.grabarCurso(pCurso);
return "redirect:/curso/";
}

@GetMapping("/editarCurso/{codigo}")
public String editarCurso(@PathVariable int codigo, Model model) {
List<Categoria> categorias = catservicio.listarCategorias();
Optional<Curso> c = servicio.cursoPorCodigo(codigo);
model.addAttribute("curso", c);
model.addAttribute("categorias", categorias);
return "/views/curso/formCursoEditar";
}

@GetMapping("/eliminarCurso/{codigo}")
public String delete(@PathVariable int codigo, Model model) {
servicio.eliminarCurso(codigo);
return "redirect:/curso/";
}

}
Front-end
37. En la carpeta “views” crear la carpeta “curso”
38. En la carpeta curso crear la página “listarCursos.html” y copiar lo
siguiente:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head"></head>
<body>
<header th:replace="layout/layout :: header"></header>
<div class="container">
<h1><center>Listado de Cursos</center></h1>
<a th:href="@{/curso/nuevoCurso}" >Nuevo</a>
<table class="table table-striped">
<thead>
<th>Codigo</th>
<th>Nombres</th>
<th>Categoria</th>
<th></th>
</thead>
<tbody>
<tr th:each="curso:${cursos}">
<td th:text="${curso.cod_cur}"></td>
<td th:text="${curso.nom_cur}"></td>
<td th:text="${curso.categoria.des_cat}"></td>
<td>
<a
th:href="@{/curso/editarCurso/}+${curso.cod_cur}">Editar</a>
<a
th:href="@{/curso/eliminarCurso/}+${curso.cod_cur}">Eliminar</a>
</td>
</tr>
</tbody>

</table>
</div>
<footer th:replace="layout/layout :: footer">
</footer>
</body>
</html>

39. En la carpeta curso crear la página “formCursoNuevo.html” y copiar lo


siguiente:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head"></head>
<body>
<header th:replace="layout/layout :: header"></header>
<main class="container">
<form th:action="@{/curso/grabarCurso}" th:object=${curso}
method="post" id="formCurso">
<section class="card">
<div class="card-header">
<h3>Nuevo Curso</h3>
</div>
<div class="card-body">
<div class="form-group">
<label>Nombre</label>
<input th:field="*{nom_cur}"
id="txtNombre" type="text" class="form-control">
<small class="form-text text-
danger" th:if="${#fields.hasErrors('nom_cur')}"
th:errors="*{nom_cur}">
</small>
</div>
<div class="form-group">
<label>Categoria</label>
<select th:field="*{categoria}"
id="cboCategoria" class="form-control">
<option
th:each="categoria:${categorias}"

th:value="${categoria.cod_cat}"

th:text="${categoria.des_cat}"
/>
</select>
</div>
</div>
<div class="card-footer">
<input type="submit" value="Guardar"
class="btn btn-primary">
<input type="button" value="Cancelar"
onclick="cancelarCurso()" class="btn btn-danger">
</div>
</section>
</form>
</main>
<footer th:replace="layout/layout :: footer">
</footer>
</body>
</html>

40. En la carpeta curso crear la página “formCursoEditar.html” y copiar lo


siguiente:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head"></head>
<body>
<header th:replace="layout/layout :: header"></header>
<main class="container">
<form th:action="@{/curso/grabarCurso}" th:object=${curso}
method="post" id="formCurso">
<section class="card">
<div class="card-header">
<h3>Editar Curso</h3>
</div>
<div class="card-body">
<div class="form-group">
<label>Codigo</label>
<input th:field="*{cod_cur}"
id="txtCodigo" type="text" class="form-control" readonly="readonly">
</div>
<div class="form-group">
<label>Nombre</label>
<input th:field="*{nom_cur}"
id="txtNombre" type="text" class="form-control">
</div>
<div class="form-group">
<label>Categoria</label>
<select th:field="*{categoria}"
id="cboCategoria" class="form-control">
<option
th:each="categoria:${categorias}"

th:value="${categoria.cod_cat}"

th:text="${categoria.des_cat}"
/>
</select>
</div>
</div>
<div class="card-footer">
<input type="submit" value="Guardar"
class="btn btn-primary">
<input type="button" value="Cancelar"
onclick="cancelarCurso()" class="btn btn-danger">
</div>
</section>
</form>
</main>
<footer th:replace="layout/layout :: footer">
</footer>
</body>
</html>

Modificar enlaces en la plantilla

41. En la plantilla layout.html reemplazar:

<a class="nav-item nav-link" th:href="@{#}">Alumnos</a>


<a class="nav-item nav-link" th:href="@{#}">Cursos</a>

Por:

<a class="nav-item nav-link" th:href="@{/alumno/}">Alumnos</a>


<a class="nav-item nav-link" th:href="@{/curso/}">Cursos</a>

También podría gustarte