MEU PORTFOLIO FRAMEWORKS

Prévia do material em texto

ANHANGUERA
Frameworks Para Desenvolvimento de Software
Gabriel Dos Santos Blaas
Pelotas, 2025
Depois de instalar os softwares e configurar criei um código para teste:
Código de Teste
jsp
CopiarEditar
 Teste Tomcat
 Servidor Tomcat configurado com sucesso!
 Aplicação Java Web rodando via Spring MVC no NetBeans.
Atividade Prática 2 – Formulário com Consumo da API ViaCEP
Objetivo:
Construir um formulário HTML5 estilizado com Bootstrap que, ao digitar o CEP, preenche automaticamente os campos de Rua, Bairro, Cidade e Estado.
1. Estrutura do Projeto
No NetBeans:
· Criar projeto HTML5/JavaScript
Nome: cadastroEndereco
· Criar arquivos:
· index.html
· style.css
· controller.js
2. Código do Formulário – index.html
html
CopiarEditar
 
 
 Cadastro de Endereço
 
 
 Cadastro de Endereço
 
 
 CEP
 
 
 
 Rua
 
 
 
 Bairro
 
 
 
 Cidade
 
 
 
 Estado
 
 
 
 
3. Código JavaScript – controller.js
javascript
CopiarEditar
document.getElementById('cep').addEventListener('blur', function() {
 let cep = this.value.replace(/\D/g, '');
 if (cep.length === 8) {
 fetch(`https://viacep.com.br/ws/${cep}/json/`)
 .then(response => response.json())
 .then(data => {
 if (!data.erro) {
 document.getElementById('rua').value = data.logradouro;
 document.getElementById('bairro').value = data.bairro;
 document.getElementById('cidade').value = data.localidade;
 document.getElementById('estado').value = data.uf;
 } else {
 alert('CEP não encontrado!');
 }
 })
 .catch(() => alert('Erro ao buscar o CEP!'));
 } else {
 alert('CEP inválido!');
 }
});
4. CSS – style.css
css
CopiarEditar
body {
 background-color: #f8f9fa;
}
form {
 max-width: 500px;
}
Atividade Prática 3 – Formulário de Cadastro com Spring MVC e Bootstrap
Objetivo:
Criar um formulário de cadastro de usuário com 12 campos, utilizando Spring Web MVC e estilização com Bootstrap 5.
1. Configuração do Projeto
No NetBeans:
· File > New Project
· Categoria: Java with Ant → Java Web → Web Application
· Nome: cadastroUsuario
· Servidor: Apache Tomcat 8.x
· Versão Java EE: Java EE 8
· Selecionar Spring Web MVC
· Versão Spring: 4.3.29 ou superior
2. Adicionando Bootstrap no index.jsp
jsp
CopiarEditar
 
 
 Formulário de Cadastro
 
Formulário de Cadastro
 
 
 Nome
 
 
 
 Sobrenome
 
 
 
 
 Email
 
 
 
 Senha
 
 
 
 
 CEP
 
 
 
 Rua
 
 
 
 
 
 Bairro
 
 
 
 Cidade
 
 
 
 Estado
 
 
 
 
 
 Número
 
 
 
 Complemento
 
 
 
 Cadastrar
3. Teste
· Iniciar o Tomcat pelo NetBeans.
· Acessar no navegador:
http://localhost:8080/cadastroUsuario/
· Exibe o formulário responsivo com os 12 campos solicitados, pronto para receber os dados.
Atividade Prática 4 – Formulário HTML5 com Validação e Consumo da API ViaCEP
Objetivo:
Construir um formulário HTML5 de cadastro de cliente com 12 campos, utilizando Bootstrap 5 para estilização, JQuery para validação e a API ViaCEP para preenchimento automático do endereço.
1. Estrutura do Projeto
No NetBeans:
· Criar projeto HTML5/JavaScript chamado cadUsuario
· Criar arquivos:
· index.html (formulário)
· main.js (consumo da API ViaCEP)
· validation.js (validações com JQuery)
2. HTML – index.html
html
CopiarEditar
 
 
 Cadastro de Cliente
 
 
Cadastro de Cliente
 
 
 Nome
 
 
 
 Sobrenome
 
 
 
 
 Email
 
 
 
 Senha
 
 
 
 
 CEP
 
 
 
 Rua
 
 
 
 
 Bairro
 
 
 
 Cidade
 
 
 
 Estado
 
 
 
 
 
 Número
 
 
 
 Complemento
 
 
 
 Cadastrar
3. Consumo da API – main.js
javascript
CopiarEditar
$("#cep").blur(function(){
 let cep = $(this).val().replace(/\D/g, '');
 if (cep.length === 8) {
 $.getJSON(`https://viacep.com.br/ws/${cep}/json/`, function(data) {
 if (!("erro" in data)) {
 $("#rua").val(data.logradouro);
 $("#bairro").val(data.bairro);
 $("#cidade").val(data.localidade);
 $("#estado").val(data.uf);
 } else {
 alert("CEP não encontrado!");
 }
 });
 } else {
 alert("CEP inválido!");
 }
});
4. Validação de Campos – validation.js
javascript
CopiarEditar
$("#cadastroForm").submit(function(e){
 e.preventDefault();
 
 let email = $("#email").val();
 let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 if (!emailPattern.test(email)) {
 alert("E-mail inválido!");
 return;
 }
 
 let camposVazios = false;
 $("#cadastroForm input[required]").each(function(){
 if ($(this).val().trim() === "") {
 camposVazios = true;
 }
 });
 
 if (camposVazios) {
 alert("Preencha todos os campos obrigatórios!");
 return;
 }
 
 alert("Cadastro realizado com sucesso!");
});
5. Teste
· Abrir o index.html no navegador.
· Digitar 01001-000 no campo CEP → Preenche Rua, Bairro, Cidade e Estado automaticamente.
· Testar com email inválido → Exibe alerta de erro.
· Preencher tudo corretamente → Exibe “Cadastro realizado com sucesso!”.