Ejercicio I

Curso: Algoritmos y Estructura de Datos II

/ Semana I
2024-I

EJERCICIO 02 – SEMANA 1

Objetivo: Escribir un programa que utilice listas (colecciones) y muestre un listado de usuarios

Paso 1: Crear un proyecto desde el menú File → New → Spring Starter Project

Paso 2: En la ventana “New Spring Starter Project”, usar los siguientes datos para completar el
formulario para el nuevo proyecto. Luego, dar clic en botón “Next” (siguiente).

Name: Ejercicio-02-s1 Type: Maven

Packaging: Jar Java version: 17
Language: Java Group: com.fia
Artifact: Ejercicio-02-s1 Version: 0.0.1-SNAPSHOT
Description: Usando Listas con Spring Boot Package: com.fia.colecciones

Use default location Add project to working sets

Pá gin a 1 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 3: Seleccionar la versión más reciente de Sprint Boot, en este caso será 3.2.3. Paso seguido,
debemos seleccionar las “dependencies” (dependencias) que serán parte del Spring Starter Project.

Paso 4: Para seleccionar las dependencias que serán parte de nuestro proyecto, lo podemos hacer
usando el área de búsqueda en la opción Available (Disponible) y escribiendo las dependencias a buscar
o navegando en las diferentes categorías de dependencias.

En nuestro caso, las categorías a buscar serían “Web” para seleccionar la dependencia “Spring Web”,
categoría “Template Engines” para seleccionar la dependencia “Thymeleaf” y categoría “Developer
Tools” para seleccionar la dependencia “Spring Boot DevTools”.

Dependencias
seleccionadas!!

Una vez seleccionadas todas las dependencias, presionar el botón “Next” para que Spring Framework
nos muestre desde donde descargará el programa de creación del Spring Starter Project.

Pá gin a 2 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Si llegamos a esta ventana, presionar el botón “Finish” para terminar el asistente de creación de
proyectos Spring Boot.

Pueden ver que, en la esquina inferior derecha, se inician las descargas del contenido del proyecto. Esto
seguirá avanzando hasta que llegue al 100% o que terminen las descargas, instalaciones y/o
configuraciones.

Pá gin a 3 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Finalmente, al terminar deberá mostrarnos la estructura inicial de un proyecto Spring Boot.

El proyecto Spring Starter crea un programa Java principal, usado para ejecutar/arrancar la aplicación.
En nuestro caso, el programa autogenerado por Spring Boot se llama Ejercicio02S1Application.java
siendo la primera parte del nombre del programa el utilizado por nosotros para el nombre del proyecto
(sin guiones u cualquier otro carácter especial).

Pá gin a 4 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 5: Para iniciar la programación del ejercicio, necesitamos crear otros paquetes o packages Java. Nos
situamos sobre el paquete com.fia.colecciones creado por Spring Boot y le damos clic derecho para crear
un nuevo paquete (New → Package).

El nombre de los paquetes serán com.fia.colecciones.controller y com.fia.colecciones.model. Para ambos

paquetes, las demás opciones o valores las dejamos con los valores por defecto (default) según la ventana
New Java Package.

Pá gin a 5 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 6: Dentro del paquete com.fia.colecciones.controller o controller, le damos clic derecho para crear
una nueva clase (New → Class).

El nombre de la clase Java deberá ser UsuarioController, las demás opciones o valores las dejamos con
los valores por defecto (default) según la ventana New Java Class.

Asimismo, dentro del paquete com.fia.colecciones.model o model, le damos clic derecho para crear
una nueva clase (New → Class).

El nombre de la clase Java deberá ser Usuario, las demás opciones o valores las dejamos con los valores
por defecto (default) según la ventana New Java Class.

Para ambas clases, se deja con el modificador público (Public) para que se acceda desde la vista; si se
selecciona privado (private) o protegido (protected) la vista ya no podrá acceder a ella.

Paso 7: Para la clase UsuarioController, agregamos la anotación @Controller.

Pá gin a 6 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 8: Dentro de la clase UsuarioController, creamos el método getPerfil de tipo String, que será el
método handler responsable de manejar las solicitudes HTTP entrantes del usuario basados en un URL y
enviar una respuesta al usuario. Esta respuesta será de tipo String e indicará que nombre de vista
retornará como html al usuario.

La respuesta que el método getPerfil retorne hacia la vista “perfil” (perfil.html) será manejada por el
objeto Model que es el encargado de transferir la información procesada por el método getPerfil hacia
la página perfil.html señalada.

Refiere a la vista “perfil.html”

Para ello agregamos la anotación @RequestMapping sobre el método getPerfil, para indicarle a la clase
controladora llamada UsuarioController que este método podrá recibir solicitudes de tipo HTTP GET.

Cabe señalar que la anotación @RequestMapping puede recibir solicitudes de tipo HTTP GET, POST,
UPDATE, etc. pero que por default sino se indica el tipo de solicitud a recibir se asume el método GET.

Pá gin a 7 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

El parámetro (“/perfil”) que recibe la anotación @RequestMapping será el utilizado en el URL, durante
las solicitudes de tipo GET del usuario. En nuestro ejercicio, este URL será de la forma abajo indicada,
debiendo la clase controladora UsuarioController a través del método getPerfil retornar una vista o
página web de respuesta llamada “perfil.html”.

http://localhost:8080/perfil
Paso 9: Dentro de la clase Usuario, creamos los siguientes atributos con modificador privado, para que
los datos del objeto Usuario solo puedan ser accedidos o modificados a través de métodos getters /
setters.
private String ape;
private String nom;
private String pass;
private String usu;

Luego, procedemos a generar los getters / setters. Para ello, seleccionamos los atributos recientemente
agregados a la clase Usuario y le damos clic derecho, seleccionando del menú emergente las opciones
Source → Generate Getters and Setters…

Pá gin a 8 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

En la ventana Generate Getters and Setters, seleccionamos todos los atributos con el botón “Select All”
y presionamos el botón “Generate”. Inmediatamente se generara un método getXXX y setXXX por cada
atributo seleccionado del tipo público.

Seguidamente, generamos los métodos constructores para la clase Usuario. Un método constructor sin
campos (Generate Constructors from Superclass…) …

Pá gin a 9 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

… y otro método constructor con campos (Generate Constructor using Fields).

Pá gin a 10 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Luego, de todos los cambios en la clase Usuario procedemos a guardar.

Paso 10: Dentro del método getPerfil de la clase UsuarioController, agregaremos las siguientes líneas
de código Java:
Usuario usu=new Usuario();
usu.setApe("Guerreo");
usu.setNom("José Alonso");
usu.setPass("ay63Mo3W19");
usu.setUsu("ljguerrero");
model.addAttribute("usuario",usu);

Pá gin a 11 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 11: Procederemos ahora a crear la vista o página html. Para lo cual, nos ubicaremos sobre la carpeta
templates y dándole clic derecho seleccionamos del menú emergente las opciones New → Other…

Buscamos en Wizards para HTML y lo seleccionamos,

y presionamos el botón Next.

En la ventana New HTML File, ingresamos el nombre del archivo HTML a crear. Para nuestro ejercicio
sería: perfil.html. Luego, presionamos siguiente para confirmar que la versión de HTML seleccionada sea
HTML 5, y presionamos Finish.

Pá gin a 12 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Finalmente, se creó el archivo HTML llamado perfil.html sobre el cual haremos algunas modificaciones
en el siguiente paso.

Paso 12: Modificamos la vista o página HTML llamada perfil.html ubicada en la carpeta templates.
Vamos a implementar el motor de plantillas (template engine) llamado thymeleaf en nuestra vista.

Para lo cual modificaremos lo siguiente:

1. En la etiqueta “html”, lo reemplazamos por <html xmlns:th="http://www.thymeleaf.org">

2. En la etiqueta “meta”, lo reemplazamos por <meta charset="UTF-8">
3. En la etiqueta “title”, lo reemplazamos por <title>Datos Personales</title>
4. Dentro de la etiqueta “body”, agregamos las siguientes líneas:

<span th:text="${usuario.ape}"></span>
<span th:text="${usuario.nom}"></span>
<br><span th:if="${usuario.usu}" th:text="${usuario.usu}"></span>
<span th:if="${usuario.usu == null}">El usuario no existe!!!</span></br>
<span th:if="${usuario.pass}" th:text="${usuario.pass}"></span>
<span th:if="${usuario.pass == null}">Falta asignar el Password!!!</span>

5. Finalmente, grabamos los cambios del archivo perfil.html y del proyecto.

Pá gin a 13 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 12: Procedemos a ejecutar la aplicación Ejercicio02S1Application.java

Revisamos si la consola de Spring Boot muestra algún error después de ejecutar la aplicación.

Si no hay errores en el log de la consola, probamos el acceso URL http://localhost:8080 abriendo un

programa explorador (browser). En este caso, se muestran errores, debido a que no hay vista o página
HTML implementada para la ruta “/”.

Ahora probamos el acceso con el URL o ruta http://localhost:8080/perfil que es la ruta definida en la
anotación @RequestMapping para nuestro método “getPerfil”. Con esto confirmamos, la correcta
ejecución de la aplicación Ejercicio02S1Application.

Pá gin a 14 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 13: Volvemos a editar la clase UsuarioController, para agregar un nuevo método handler. Para lo
cual, adicionamos las siguientes líneas de código Java:
// Agregar código debajo de la definición de la clase UsuarioController
ArrayList<Usuario> listaUsu=new ArrayList<>();

//-------------------------------------------------------------------------------------------------------

// Agregar código después del método getPerfil

@RequestMapping("/listar")
public String getListar(Model model) {
listaUsu.add(new Usuario("Toledo Cruz", "Luis Enrique", "ltoledoc", "987654321"));
listaUsu.add(new Usuario("Seminario Salazar", "Rosalva", "rseminarios", "sem123"));
listaUsu.add(new Usuario("Santillaña Hernandez", "Jorge", "jsantillñah", "xSd1456"));
listaUsu.add(new Usuario("Apeña Carbajal", "Reina", "rapeñac", "WWW999"));

model.addAttribute("usuarios",listaUsu);

return "listar";

Pá gin a 15 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 14: Procederemos ahora a crear la vista o página html. Para lo cual, nos ubicaremos sobre la carpeta
templates y dándole clic derecho seleccionamos del menú emergente las opciones New → Other…

Buscamos en Wizards para HTML y lo seleccionamos,

y presionamos el botón Next.

En la ventana New HTML File, ingresamos el nombre del archivo HTML a crear. Para nuestro ejercicio
sería: listar.html. Luego, presionamos siguiente para confirmar que la versión de HTML seleccionada sea
HTML 5, y presionamos Finish.

Pá gin a 16 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Finalmente, se creó el archivo HTML llamado listar.html sobre el cual haremos algunas modificaciones
en el siguiente paso.

Paso 12: Modificamos la vista o página HTML llamada listar.html ubicada en la carpeta templates.
Vamos a implementar el motor de plantillas (template engine) llamado thymeleaf en nuestra vista.

Para lo cual modificaremos lo siguiente:

1. En la etiqueta “html”, lo reemplazamos por <html xmlns:th="http://www.thymeleaf.org">

2. En la etiqueta “meta”, lo reemplazamos por <meta charset="UTF-8">
3. En la etiqueta “title”, lo reemplazamos por <title>Listado de Usuarios</title>
4. Dentro de la etiqueta “body”, agregamos las siguientes líneas:
<div th:if="${usuarios.isEmpty()}">no hay usuarios en la lista!</div>

<table th:if="${not usuarios.isEmpty()}">

<thead>
<tr>
<th>Apellido</th>
<th>Nombre</th>
<th>Usuario</th>
<th>Password</th>
</tr>
</thead>

<tbody>
<tr th:each="usuario: ${usuarios}">
<td th:text="${usuario.ape}"></td>
<td th:text="${usuario.nom}"></td>
<td th:text="${usuario.usu}"></td>
<td th:text="${usuario.pass}"></td>
</tr>
</tbody>
</table>

5. Finalmente, grabamos los cambios del archivo listar.html y del proyecto.

Pá gin a 17 / 18
 Ejercicio I
Curso: Algoritmos y Estructura de Datos II
/ Semana I
2024-I

Paso 13: Procedemos a ejecutar la aplicación Ejercicio02S1Application.java

Revisamos si la consola de Spring Boot muestra algún error después de ejecutar la aplicación.

Si no hay errores en el log de la consola, probamos el acceso URL http://localhost:8080/listar abriendo

un programa explorador (browser), usando la ruta “/listar” que es la ruta definida en la anotación
@RequestMapping para nuestro método “getListar”. Con esto confirmamos, la correcta ejecución de la
aplicación Ejercicio02S1Application.

Pá gin a 18 / 18