Spring Boot Aplicacion Web Parte 3.

1.HTML

yeah!, ahora empezaremos a maquetar nuestra aplicacion con thymeleaf, Bootstrap4 y JQuery.

Utilizaremos la misma estructura de tutoriales anteriores, la creacion de estas dos pantallas estan explicadas en los siguientes videos y luego haremos una pequeña modificacion.

http://cristianruizblog.com/html-ejemplo-de-inicio-de-sesion-con-bootstrap-4/
http://cristianruizblog.com/html-ejemplo-crud-con-bootstrap4/

Despues de estos dos video tendras que incluir esos archivos dentro de tu proyecto Spring Boot y tendras una estructura como esta:

File Structure
File Structure

2.Controller

Para poder navegar estas paginas necesitaremos configurar un controlador que redireccione apropiadamente cada request. Crea una clase Java igual a esta e inicia tu aplicacion, asegurate que ambas paginas se muestre apropiadamente.

package com.cristianruizblog.springbootApp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

	@GetMapping("/")
	public String index() {
		return "index";
	}
	
	@GetMapping("/userForm")
	public String getUserForm() {
		return "user-form";
	}	
}

3.th:include

Para poder hacer el codigo mantenible y facil de modificar separaremos el arhivo user-form.html en varios archivos dentro de la carpeta user-form:

  1. user-view.html: Estructura basica y el codigo de las pestañas(tabs).
  2. user-list.html: Estructura y javascript de la lista de usuarios (Datatable).
  3. user-form.html: Estructura y javascript del formulario para usuarios.

Y necesitaremos utilizar la etiqueta th:include para combinar estos archivos de la siguiente manera.

<div th:include="<archivo html>" th:remove="tag">
th Include Example
th Include Example

No olvides actualizar el controlador para redireccionar a la pagina “user-form/user-view”.

@GetMapping("/userForm")
	public String getUserForm() {
		return "user-form/user-view";
	}

4.Git Commit

HTML Git Commit
HTML Git Commit

Github Commit:
https://github.com/cruizg93/Spring-Boot-Aplicacion/commit/a8e154f39e94a87a1a9982a09c52323929ecf60a

6.Video Paso a Paso

Menu

  1. Setup
  2. Entidades y POJOS
  3. Basic HTML
  4. Lista de Usuarios
  5. Crear Usuario y Validar Campos
  6. Editar Usuario
  7. Eliminar Usuario
  8. Cambiar Contraseña
  9. Spring Security
  10. Paginas de Error
  11. Bonus, Arreglando Cositas
  12. Formulario de registro
  13. Despliegue en Heroku

Gracias por llegar al final de este post.
No se te olvide dejar tus comentario o preguntas aca abajo o en mi twitter @Cruizg93

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *