Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 7: Criando a consulta de usuário.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 7: Criando a consulta de usuário.

Nessa parte do nosso tutorial vamos criar um página para consultar os usuários que cadastramos no passo anterior, nessa página também vamos ter um botão para excluir e editar um cadastro existente.

Páginas do tutorial.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 1: Introdução.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 2: Criando os objetos do banco de dados.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 3: Montando o projeto com Spring Boot.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 4: Configurando o Spring Security.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 5: Criando Layout com Thymeleaf.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 6: Criando o cadastro de usuário.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 7: Criando a consulta de usuário.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 8: Excluindo um usuário cadastrado.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 9: Editando um usuário cadastrado.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 10: Testando os acessos do sistema.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 11: Executando a aplicação sem o Tomcat Embedded.

Criando o método de request para consulta.

Vamos abrir a nossa classe UsuarioController e vamos adicionar o método consultar como mostra o código abaixo, esse método vai ser responsável por realizar a consulta no banco de dados e chamar a nossa view(consultarCadastros.html) passando um lista de usuários(List<UsuarioModel>).

Podemos ver no nosso método que estamos adicionando um atributo com o nome de usuariosModel, esse atributo vamos ler na nossa view para mostrar as informações na página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	/***
	 * CONSULTA TODOS USUÁRIOS CADASTRADOS NO SISTEMA
	 * @param model
	 * @return
	 */
	@RequestMapping(value="/consultar", method= RequestMethod.GET)	
	public ModelAndView consultar(Model model) {
 
		/*CONSULTA USUÁRIOS CADASTRADOS*/
		model.addAttribute("usuariosModel", this.usuarioService.consultarUsuarios());
 
		/*RETORNA A VIEW*/
	    return new ModelAndView("consultarCadastros");
	}

Lembrando que quem vai realizar essa request é o arquivo layout.html que contem os menus como mostra a imagem abaixo.

Criando à página de consulta.

Na nossa pasta templates vamos adicionar uma página com o nome de consultarCadastros.html, depois vamos deixar o código da nossa página igual ao código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
	  layout:decorator="@{~/base/layout}">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Blog www.ciceroednilson.com.br"/>
	<meta name="author" content="Cícero Ednilson"/>
 
	<title>Consultar Registros</title>
</head>
<body>
 
<section layout:fragment="content">
 
    <!-- MONTANDO O GRID PARA POSICIONAR O FORMULÁRIO NO CENTRO -->   
   <div class="mdl-grid">   
    <div class="mdl-layout-spacer"></div>    
    <section class="section--center mdl-grid mdl-shadow--4dp mdl-color--white">
 
    <div class="mdl-cell mdl-cell--12-col">
       <div class="alinhar-centro">
	   <i class="material-icons mdl-list__item-avatar">person</i>
	   <span style="padding-left:5px;">Consultar Usuários Cadastrados</span>			  
       </div>
 
       <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
       <!-- CABEÇALHO DA TABELA -->
       <thead>
	  <tr>
	    <th>Código</th>
	    <th class="mdl-data-table__cell--non-numeric">Nome</th>
	    <th class="mdl-data-table__cell--non-numeric">Login</th>
	    <th class="mdl-data-table__cell--non-numeric">Ativo</th>
	    <th class="mdl-data-table__cell--non-numeric">Editar</th>
	    <th class="mdl-data-table__cell--non-numeric">Excluir</th>
	   </tr>
	</thead>
	<tbody>
	<!-- PREENCHENDO A TABELA COM OS USUÁRIOS CADASTRADOS-->
	<th:block th:each="usuarioModel : ${usuariosModel}">
	   <tr>
	    <td th:text="${usuarioModel.codigo}"></td>
	    <td th:text="${usuarioModel.nome}" class="mdl-data-table__cell--non-numeric"></td>
	    <td th:text="${usuarioModel.login}" class="mdl-data-table__cell--non-numeric"></td>
	    <td th:if="${usuarioModel.ativo}" th:text="Sim" class="mdl-data-table__cell--non-numeric"></td>
	    <td th:unless="${usuarioModel.ativo}" th:text="Não" class="mdl-data-table__cell--non-numeric"></td>
	    <td>
		<!-- REALIZANDO A REQUEST PARA EDITAR UM CADASTRO -->
		<form action="#" th:action="@{../usuario/editarCadastro}" method="get">
		  <input type="hidden" name="codigoUsuario" th:value="${usuarioModel.codigo}" />					   			
		  <button type="submit"  class="mdl-chip__action"><i class="material-icons">create</i></button>
		</form>
	    </td>
            <td>
		<!-- EXCLUINDO UM REGISTRO CADASTRADO -->
		<form action="#" th:action="@{../usuario/excluir}" method="post">					   			 
		  <input type="hidden" name="codigoUsuario" th:value="${usuarioModel.codigo}" />								 					   			 
		  <button type="submit"  class="mdl-chip__action" onclick="return confirm('Deseja realmente excluir esse registro?');"><i class="material-icons">delete</i></button>
		</form>
	    </td>
         </tr>
      </th:block>	
   </tbody>	
</table>
 
 
</div>
 
</section>	
<div class="mdl-layout-spacer"></div>
</div>
 
</section>
 
</body>
</html>

Abaixo também podemos ver no nosso projeto à página e o método que criamos.

Testando à página de consulta.

Vamos executar o nosso projeto e efetuar o login com o usuário administrador que cadastramos no início do nosso tutorial.

usuário:cicero
senha:123456

Depois vamos até o menu consulta como mostra imagem abaixo.

E então vamos ver os registros que cadastramos como mostra a imagem abaixo.

Podemos ver que temos uma coluna para editar e outra para excluir um registro cadastrado, se clicarmos em uma dessas opções vamos ver que a aplicação vai apresentar um erro, pois não temos esses métodos criados ainda, na próxima parte do nosso tutorial vamos criar o método para excluir um usuário cadastrado, até a próxima.

Comentários

Name of author

Name: ciceroednilson@gmail.com

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *