Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » 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 6: Criando o cadastro de usuário.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nessa parte do nosso tutorial vamos criar o controller e à página de cadastro para inserirmos um novo usuário 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 o Controller de Usuário.

No pacote br.com.ciceroednilson.webapp.controller da nossa aplicação vamos adicionar uma classe com o nome de UsuarioController, depois vamos deixar nossa classe com 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
122
123
124
125
126
127
128
129
130
131
132
package br.com.ciceroednilson.webapp.controller;
 
import java.util.List;
 
import javax.validation.Valid;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
import br.com.ciceroednilson.webapp.model.GrupoModel;
import br.com.ciceroednilson.webapp.model.UsuarioModel;
import br.com.ciceroednilson.webapp.service.GrupoService;
import br.com.ciceroednilson.webapp.service.UsuarioService;
 
/**
 * 
 * @author Cícero Ednilson
 * 
 *OBJETO RESPONSÁVEL POR REALIZAR AS ROTINAS DE USUÁRIO.
 * 
 */
@Controller
@RequestMapping("/usuario") 
public class UsuarioController {
 
	/**INJETANDO O OBJETO GrupoService*/
	@Autowired
	private GrupoService grupoService;
 
	/**INJETANDO O OBJETO UsuarioService*/
	@Autowired 
	private UsuarioService usuarioService;
 
 
 
	/***
	 * CHAMA A FUNCIONALIDADE PARA CADASTRAR UM NOVO USUÁRIO NO SISTEMA
	 * @param model
	 * @return
	 */
	@RequestMapping(value="/novoCadastro", method= RequestMethod.GET)	
	public ModelAndView novoCadastro(Model model) {
 
		/*LISTA DE GRUPOS QUE VAMOS MOSTRAR NA PÁGINA*/
		model.addAttribute("grupos", grupoService.consultarGrupos());
 
		/*OBJETO QUE VAMOS ATRIBUIR OS VALORES DOS CAMPOS*/
		model.addAttribute("usuarioModel", new UsuarioModel());
 
	    return new ModelAndView("novoCadastro");
	}
 
 
 
	/***
	 * SALVA UM NOVO USUÁRIO NO SISTEMA
	 * @param usuarioModel
	 * @param result
	 * @param model
	 * @param redirectAttributes
	 * @return
	 */
	@RequestMapping(value="/salvarUsuario", method= RequestMethod.POST)
	public ModelAndView salvarUsuario(@ModelAttribute 
								@Valid UsuarioModel usuarioModel, 
								final BindingResult result,
								Model model,
								RedirectAttributes redirectAttributes){
 
		/*VERIFICA SE TEM ALGUM ERRO (@NotEmpty),
		 *SE TIVER ALGUM ERRO DEVEMOS RETORNAR PARA A MESMA PÁGINA PARA O USUÁRIO CORRIGIR*/
		if(result.hasErrors()){
 
 
 
			List<GrupoModel> gruposModel =grupoService.consultarGrupos();			
 
			/*POSICIONANDO OS CKECKBOX SELECIONADOS
			 * 
			 * SE O SISTEMA ENCONTROU ALGUM ERRO DE VALIDAÇÃO DEVEMOS 
			 * BUSCAR OS GRUPOS E MARCAR COMO SELECIONADO NOVAMENTE 
			 * PARA MOSTRAR NÁ PÁGINAS DA FORMA QUE O USUÁRIO ENVIO A REQUEST*/
			gruposModel.forEach(grupo ->{
 
				if(usuarioModel.getGrupos() != null && usuarioModel.getGrupos().size() >0){
 
					usuarioModel.getGrupos().forEach(grupoSelecionado->{
 
						/*DEVEMOS MOSTRAR NA PÁGINA OS GRUPOS COM O CHECKBOX SELECIONADO*/
						if(grupoSelecionado!= null){
							if(grupo.getCodigo().equals(grupoSelecionado))
								grupo.setChecked(true);
						}					
					});				
				}
 
			});
 
			/*ADICIONA O GRUPOS QUE VÃO SER MOSTRADOS NA PÁGINA*/
			model.addAttribute("grupos", gruposModel);
 
			/*ADICIONA OS DADOS DO USUÁRIO PARA COLOCAR NO FORMULÁRIO*/
			model.addAttribute("usuarioModel", usuarioModel);
 
			/*RETORNA A VIEW*/
			return new ModelAndView("novoCadastro");	
		}
		else{
 
			/*SALVANDO UM NOVO REGISTRO*/
			usuarioService.salvarUsuario(usuarioModel);
 
		}
 
 
		ModelAndView modelAndView = new ModelAndView("redirect:/usuario/novoCadastro");
 
		/*PASSANDO O ATRIBUTO PARA O ModelAndView QUE VAI REALIZAR 
		 * O REDIRECIONAMENTO COM A MENSAGEM DE SUCESSO*/
		redirectAttributes.addFlashAttribute("msg_resultado", "Registro salvo com sucesso!");
 
		/*REDIRECIONANDO PARA UM NOVO CADASTRO*/
		return modelAndView;
	}
}

Podemos ver na nossa classe que temos apenas dois métodos, um com o nome de “novoCadastro” que vai ser executado quando for realizada a request pelo menu que fica no arquivo layout.html conforme mostra a imagem abaixo.

Atenção: Não esqueça de ler os comentários para entender melhor o código.

Também temos o método “salvarUsuario” que vai ser executado quando realizarmos o post da página de cadastro de usuários que vamos criar mais a frente.

As requests para esse controller são feita através das anotações(Annotations) @RequestMapping, então como temos um anotação nosso controller devemos sempre executar as nossas requests através do caminho /RequestMappingDoController/RequestMappingDoMetodo, exemplo: /usuario/novoCadastro.

Criando a página de cadastro de usuário.

Para criar a página de cadastro de usuário vamos adicionar na pasta templates um arquivo html com o nome de novoCadastro.html, depois vamos adicionar o código abaixo.

Podemos ver no nosso código que estamos informando no atributo th:action=”@{../usuario/salvarUsuario}” do nosso form à request que deve ser executada, também podemos ver no atributo th:object=”${usuarioModel}” o objeto que vamos passar na nossa request, nos inputs podemos ver um atributo com o nome th:field=”*{nome}”, esse atributo que vai setar os valores no nosso model(usuarioModel).

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
122
123
124
<!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>Novo 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;">Novo Cadastro de Usuário</span>			  
</div>
 
<form action="#" id="formulario-cadastro" th:action="@{../usuario/salvarUsuario}" th:object="${usuarioModel}" method="post">
	<fieldset>
	<ul class="mdl-list">
 
			<!-- MENSAGEM A SER MOSTRADA APÓS EXECUTARMOS O POST -->
	 <li class="mdl-list__item" th:if="${msg_resultado}">						 	
	 	<p id="p-mensagem-sucesso" class="sucesso-msg" th:text="${msg_resultado}" >...</p>		
	 </li>
 
	 <!-- CAMPO NOME -->
	 <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>
 
	 <!-- CAMPO LOGIN -->
	 <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>
 
	 <!-- CAMPO SENHA -->
	 <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>
		   <p th:if="${#fields.hasErrors('senha')}" th:errors="*{senha}" class="erro-msg">...</p>
		 </div>
	 </li>
 
	 <li class="mdl-list__item">
 
	 	<table>
	 	  <tr>
	 	  	<td style="color:rgb(96,125,139)">
	 	  		<span th:text="Perfil">...</span>						 	  					 	  
	 	  	</td>
	 	  </tr>				
	 	  <!-- MONTA OS CKECKBOXS COM OS GRUPOS -->		 	
		   <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 à página de cadastro.

Agora vamos executar a nossa aplicação, para isso basta clicar com o botão direito sobre a classe WebappApplication e ir até Run As -> Java Application, assim vamos executar a nossa aplicação com o Tomcat que já vem no Spring Boot, depois basta efetuar o login conforme à imagem abaixo.

usuário:cicero
senha:123456

Agora vamos até o menu Cadastro como mostra imagem abaixo.

Quando clicamos no menu Cadastro podemos ver a nossa página dentro do nosso template(layout.html), isso é possível por que na tag html nos adicionamos o atributo layout:decorator=”@{~/base/layout}”, e em section layout:fragment=”content” estamos informando a parte do template(layout.html) onde nossa página deve ficar.

Se clicarmos no botão salvar da nossa página sem preencher todos os campos obrigatórios vamos ver as mensagens conforme a imagem abaixo.

Essas validações são feitas no método salvarUsuario do controller UsuarioController conforme a imagem abaixo.

As mensagens de erro apresentadas estão na classe UsuarioModel como mostra a imagem abaixo.

Agora vamos preencher todos os campos e salvar um novo registro.

Depois de salvar um novo registro devemos ver a mensagem abaixo.

Quando colocarmos o foco no campo nome a mensagem de sucesso some da página, isso acontece por que temos uma função javascript(limparMensagem) que foi adicionada ao evento onfocus do input, assim o formulário fica pronto para um novo cadastro.

Depois podemos ver os registros que cadastramos no Banco de Dados.

36

É isso ai, nessa parte do nosso tutorial deixamos pronto a nossa página de cadastro, na próxima parte do nosso tutorial vamos criar a página que vai consultar os registros cadastrados, 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 *

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×