Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » 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 9: Editando um usuário cadastrado.

Nessa parte do nosso tutorial vamos criar uma página para editar um registro cadastrado no banco de dados.

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 os métodos para editar um registro.

Na nossa classe UsuarioController vamos adicionar dois métodos, um com o nome de editarCadastro que vai ser responsável por carregar a nossa view com os dados preenchidos, e outro com o nome de salvarAlteracao que vai ser responsável por salvar as alterações realizadas no registro selecionado, vamos deixar nosso código como mostra a imagem 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
	/***
	 * CONSULTA UM USUÁRIO PELO CÓDIGO PARA REALIZAR ALTERAÇÕES NAS INFORAMÇÕES CADASTRADAS.
	 * @param codigoUsuario
	 * @param model
	 * @return
	 */
	@RequestMapping(value="/editarCadastro", method= RequestMethod.GET)		
	public ModelAndView editarCadastro(@RequestParam("codigoUsuario") Long codigoUsuario, Model model) {
 
		/*CONSULTA OS GRUPOS CADASTRADOS*/
		List<GrupoModel> gruposModel =grupoService.consultarGrupos();			
 
		/*CONSULTA O USUÁRIO PELO CÓDIGO*/
		UsuarioModel usuarioModel = this.usuarioService.consultarUsuario(codigoUsuario);
 
		/*DEIXA SELECIONADO OS GRUPOS CADASTRADOS PARA O USUÁRIO*/
		gruposModel.forEach(grupo ->{
 
		    usuarioModel.getGrupos().forEach(grupoCadastrado->{
 
		 	if(grupoCadastrado!= null){
			    if(grupo.getCodigo().equals(grupoCadastrado))
				grupo.setChecked(true);
			}					
		    });				
 
		});
 
 
		/*ADICIONANDO GRUPOS PARA MOSTRAR NA PÁGINA(VIEW)*/
		model.addAttribute("grupos", gruposModel);
 
		/*ADICIONANDO INFORMAÇÕES DO USUÁRIO PARA MOSTRAR NA PÁGINA(VIEW)*/
		model.addAttribute("usuarioModel", usuarioModel);
 
		/*CHAMA A VIEW /src/main/resources/templates/editarCadastro.html*/
	    return new ModelAndView("editarCadastro");
	 }
 
         /***
	 * SALVA AS ALTERAÇÕES REALIZADAS NO CADASTRO DO USUÁRIO
	 * @param usuarioModel
	 * @param result
	 * @param model
	 * @param redirectAttributes
	 * @return
	 */
	@RequestMapping(value="/salvarAlteracao", method= RequestMethod.POST)
	public ModelAndView salvarAlteracao(@ModelAttribute 
					    @Valid UsuarioModel usuarioModel, 
					    final BindingResult result,
					    Model model,
					   RedirectAttributes redirectAttributes){
 
		boolean isErroNullCampos = false;
 
		/*AQUI ESTAMOS VERIFICANDO SE TEM ALGUM CAMPO QUE NÃO ESTÁ PREENCHIDO,
		 * MENOS O CAMPO DA SENHA, POIS SE O USUÁRIO NÃO INFORMAR VAMOS MANTER A
		 * SENHA JÁ CADASTRADA*/
		for (FieldError fieldError : result.getFieldErrors()) {
		    if(!fieldError.getField().equals("senha")){
		 	isErroNullCampos = true;	
		    }	
		}
 
		/*SE ENCONTROU ERRO DEVEMOS RETORNAR PARA A VIEW PARA QUE O 
		 * USUÁRIO TERMINE DE INFORMAR OS DADOS*/
		if(isErroNullCampos){
 
		    List<GrupoModel> gruposModel =grupoService.consultarGrupos();			
 
		    gruposModel.forEach(grupo ->{
 
		         if(usuarioModel.getGrupos() != null && usuarioModel.getGrupos().size() >0){
 
			     /*DEIXA CHECADO OS GRUPOS QUE O USUÁRIO SELECIONOU*/
			     usuarioModel.getGrupos().forEach(grupoSelecionado->{
 
			         if(grupoSelecionado!= null){
				    if(grupo.getCodigo().equals(grupoSelecionado))
				        grupo.setChecked(true);
			         }					
		             });				
			  }
 
		     });
 
		     /*ADICIONANDO GRUPOS PARA MOSTRAR NA PÁGINA(VIEW)*/
		     model.addAttribute("grupos", gruposModel);
 
		     /*ADICIONANDO O OBJETO usuarioModel PARA MOSTRAR NA PÁGINA(VIEW) AS INFORMAÇÕES DO USUÁRIO*/
		     model.addAttribute("usuarioModel", usuarioModel);
 
		     /*RETORNANDO A VIEW*/
		     return new ModelAndView("editarCadastro");	
		}
		else{
 
		     /*SALVANDO AS INFORMAÇÕES ALTERADAS DO USUÁRIO*/
		     usuarioService.alterarUsuario(usuarioModel);
 
		}
 
		/*APÓS SALVAR VAMOS REDIRICIONAR O USUÁRIO PARA A PÁGINA DE CONSULTA*/
		ModelAndView modelAndView = new ModelAndView("redirect:/usuario/consultar");
 
		/*RETORNANDO A VIEW*/
		return modelAndView;
	}

Criando à página de edição de registro.

Na pasta templates do nosso projeto vamos criar uma página com o nome de editarCadastro.html, depois vamos adicionar o 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>Editar cadastro de Usuário</title>
 
	<script type="text/javascript">
 
		function limparMensagem(){
 
			document.getElementById('p-mensagem-sucesso').innerHTML = '';	
		}
 
	</script>
 
</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;">Editar cadastro de Usuário</span>			  
        </div>			
 
       <form action="#" id="formulario-cadastro" th:action="@{../usuario/salvarAlteracao}" th:object="${usuarioModel}" method="post">
	<fieldset>
           <ul class="mdl-list">
	      <li class="mdl-list__item" th:if="${msg_resultado}">						 	
		 <p id="p-mensagem-sucesso" class="sucesso-msg" th:text="${msg_resultado}" >...</p>		
	     </li>
	     <li class="mdl-list__item">			 		  
		 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	            <input class="mdl-textfield__input" type="text" id="input-codigo" th:field="*{codigo}" readonly="readonly"/>
		    <label class="mdl-textfield__label" for="input-codigo">Código...</label>							   
		 </div>
	     </li>			 						 
	     <li class="mdl-list__item">			 		  
		 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		   <input class="mdl-textfield__input" type="text" id="input-nome" th:field="*{nome}" onfocus="limparMensagem()"/>
		   <label class="mdl-textfield__label" for="input-nome">Nome...</label>
		   <p th:if="${#fields.hasErrors('nome')}" th:errors="*{nome}" class="erro-msg">...</p>
		 </div>
	     </li>
	     <li class="mdl-list__item">
		 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		   <input class="mdl-textfield__input" type="text" id="input-login" th:field="*{login}"/>
		   <label class="mdl-textfield__label" for="input-login">Login...</label>
		   <p th:if="${#fields.hasErrors('login')}" th:errors="*{login}" class="erro-msg">...</p>
		</div>
	     </li>			 
             <li class="mdl-list__item">
		 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		   <input class="mdl-textfield__input" type="password" id="input-senha" th:field="*{senha}"/>
		   <label class="mdl-textfield__label" for="input-senha">Senha...</label>							   
		 </div>
	     </li>
	     <li class="mdl-list__item">
		<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-ativo">
		<input type="checkbox" id="checkbox-ativo" class="mdl-checkbox__input" name="ativo" th:checked="*{ativo}"/>
		<span class="mdl-checkbox__label">Ativo</span>
		</label>
	    </li>
 
	    <li class="mdl-list__item">
	        <table>
		  <tr>
		    <td style="color:rgb(96,125,139)">
			<span th:text="Perfil">...</span>						 	  					 	  
            	    </td>
		  </tr>						 	
		  <th:block th:each="grupo, stat : ${grupos}">
		  <tr>
		    <td>
		      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" th:for="${__${grupo.codigo}__}">
		      <input type="checkbox"					  	 
			     th:id="${__${grupo.codigo}__}"
			     th:name="|grupos[${stat.index}]|"
			     th:value="${grupo.codigo}"									  		   
			     class="mdl-checkbox__input" 
			     th:checked="${grupo.checked}"/>
		     <span class="mdl-checkbox__label" th:text="${grupo.descricao}">...</span>
		     </label>
		   </td>
		 </tr>							      							      
		</th:block>
		<tr><td><p th:if="${#fields.hasErrors('grupos')}" th:errors="*{grupos}" class="erro-msg">...</p></td> </tr>
		</table>
	 </li>
      </ul>
  </fieldset>			 
  <div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
       <div class="mdl-cell mdl-cell--4-col" style="padding-right:10px;">
	   <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Salvar</button>
       </div>
  </div>  
</form>
 
</div>
 
</section>	
<div class="mdl-layout-spacer"></div>
</div>
 
</section>
 
</body>
 
</html>

Testando a edição de registro.

Vamos executar a nossa aplicação e vamos até o menu consulta, depois vamos clicar em editar de algum registro como mostra a imagem abaixo.

Veja que abriu a página de edição que criamos, essa página possui as validações de campos da mesma forma da página de cadastro, quando clicarmos no botão salvar ele vai executar o método salvarAlteracao da nossa classe UsuarioController, esse método chama o alterarUsuario da classe UsuarioService que tem uma regra para que se o usuário não informar uma nova senha ele mantem a mesma do cadastro inicial, caso o usuário informe uma senha nova ele atualiza o campo com o novo valor alem dos de mais campos.

Altere algumas informações e depois click em salvar, depois vamos ver nossas alterações na página de consulta.

É isso ai amigos nossa aplicação está completa, na próxima parte vamos testar os perfils de usuário para cada funcionalidade do sistema, 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 *