Frameworks Para Desenvolvimento de Software

Prévia do material em texto

UNIVERSIDADE UNOPAR 
ANALISE E DESENVOLVIMENTO DE SISTEMAS
GUILHERME DE SOUZA GASPAR - RA 3866888304
ROTEIRO DE AULA PRÁTICA
FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE
IRAQUARA-BA 2025
GUILHERME DE SOUZA GASPAR – RA 3866888304
ROTEIRO DE AULA PRÁTICA
FRAMEWORKS PARA DESENVOLVIMENTO DE SOFTWARE
Portifólio apresentado à Universidade ANHANGUERA, como requisito para a obtenção de média semestral na disciplina de Frameworks para desenvolvimento de software.
IRAQUARA-BA 2025
SUMÁRIO
INTRODUÇÃO	3
DESENVOLVIMENTO	4
MÉTODO E RESULTADOS	14
CONCLUSÃO	6
1. INTRODUÇÃO
As atividades propostas tem por objetivo solidificar, e fixar os conhecimentos adquiridos em aulas, foram realizadas através, das ferramentas NetBeans, Tomcat, e Java JDK, as ferramentas proporcionaram ambientes altamente iterativos, de fácil desenvolvimento.
Conforme solicitado no roteiro de aula prática foi necessário instalar todas as ferramentas necessárias, criar um formulário para cadastro de endereço contendo informações como CEP, Rua, Bairro, Cidade, Número e Complemento, também foi necessário criar alguns formulários de cadastro contendo além das informações acima, Nome e sobrenome
2. DESENVOLVIMENTO
2.1 MÉTODO E RESULTADOS ATIVIDADE 1
a) Instalar TomCat, NetBeans e o Java JDK.
b) Descompactar a pasta do TomCat e mover para o disco Local C: (C:).
c) Abrir o NetBeans e criar um novo projeto Java Web.
Imagem 1: Criação de um novo projeto
d) Escolher o local onde será salvo o projeto.
e) Selecionar o servidor TomCat.
Imagem 2: Selecionando servidor TomCat
f) Definir usuário e senha para o servidor.
Imagem 3: Configurando servidor TomCat
g) Selecionar o framework Spring Web MVC.
h) Executar uma aplicação teste no NetBeans
i) Acessar o link gerado pelo Tomcat no navegador para ver sua aplicação em funcionamento.
Imagem 4: Estrura básica de spring MVC
Imagem 5: Código para testar o projeto na web
Imagem 6: Resultado teste web.
ATIVIDADE 2
a) Criar um novo Projeto:
b) Definir a estrutura do Projeto:
c) No index.html, criar um formulário com os campos: CEP, Rua, Bairro, Cidade,
Estado, Número e Complemento
d) Estilizar o Style.css, utilizando o framework Bootstrap 5 para estilização adicional.
e) Implementar no controller.js, a lógica para consumir a API de endereço dos Correios usando Javascript.
f) Testar no Navegador.
Imagem 7: Codigo para cadastro
Imagem 8: edição css
Imagem 9: edição java
Imagem 10: Resultado do código
Imagem 11: Consulta de CEP
Imagem 12: Consulta de CEP não existente
ATIVIDADE 3
a) Criação do Projeto:
· No NetBeans, ir em File > New Project.
· Selecionar Java Web na categoria Java with Ant e escolher Web Application.
· Nomear o projeto como cadastroUsuario.
b) Configuração do Projeto:
o Definir o servidor Apache Tomcat e a versão do Java EE.
· Marcar o framework Spring Web MVC e usar a versão Spring atualizada.
c) Adicionar Bootstrap:
o No arquivo index.jsp, adicionar o CDN do Bootstrap 5 no :
d) Verificar o redirecionamento:
o No arquivo WEB-INF/redirect.jsp, verificar se o redirecionamento aponta para index.htm:
e) Construir o Formulário:
o No index.jsp, criar o formulário com os campos: Nome, Sobrenome, Email, Senha, CEP, Rua, Bairro, Cidade, Estado, Número e Complemento.
· Utilizar classes do Bootstrap 5 para estilizar o formulário.
f) Título da Página:
o Adicionar o título “Formulário de Cadastro” na página do formulário.
g) Teste da Aplicação:
· Iniciar o servidor Tomcat e verifiar se a aplicação está rodando corretamente.
Imagem 13: Código para geração do formulário
Imagem 14: Direcionamento Index.js
Imagem 15: Resultado formulario
ATIVIDADE 4
1. Criação do Projeto:
· Criar um novo projeto HTML5/JavaScript no NetBeans.
· Nomar o projeto como cadUsuario e não utilizar nenhum template.
2. Configuração Inicial:
· Desmarcar todas as ferramentas adicionais durante a criação do projeto.
3. Construção do Formulário:
· Criar um formulário em HTML5 com os campos: Nome, Sobrenome, Email, Senha, CEP, Rua, Bairro, Cidade, Estado, Número e Complemento.
· Utilizar o Bootstrap 5 para estilizar o formulário.
4. Adicionar JQuery:
· No do index.html, adicionar o CDN do Bootstrap e JQuery
5. Consumo da API ViaCEP:
· Criar um arquivo main.js para implementar o consumo da API ViaCEP e preencher os campos de endereço automaticamente.
6. Validação de Campos:
· Criar um arquivo validation.js para implementar a validação dos campos do formulário.
· Utilizar expressões regulares para validar o campo de email com JQuery.
7. Teste da Aplicação:
· Verificar se todos os campos são validados corretamente e se o consumo da API ViaCEP está funcionando.
Imagem 16: Codigo CadUsuario
Imagem 17: Conf. CSS
Imagem 18: Resultado do código.
3. CONCLUSÃO
Essas atividades proporcionaram uma compreensão prática de configuração de servidores e ambientes de desenvolvimento, criação e estilização de formulários web com HTML5, CSS3 e Bootstrap, Consumo de APIs externas e validação de dados com JavaScript e JQuery e a utilização de frameworks como Spring MVC para desenvolvimento de aplicações web robustas. Essas habilidades são fundamentais para o desenvolvimento de aplicações web eficiente, ajudando na compreensão para desafios mais complexos no futuro.
image2.png
image3.jpeg
image4.jpeg
image5.jpeg
image6.jpeg
image7.jpeg
image8.png
image9.jpeg
image10.jpeg
image11.jpeg
image12.jpeg
image13.jpeg
image14.jpeg
image15.jpeg
image16.jpeg
image17.png
image18.jpeg
image19.jpeg
image20.jpeg
image1.png