\nsoftware
\nROTEIRO DE AULA\u00a0PR\u00c1TICA\u00a01
\nUnidade:
\nAula (White Label)\/Se\u00e7\u00e3o (KLS):
\nSOFTWARE
\n\u2612Software \/ \u2610 Acesso on-line
\n\u2610Pago\u00a0\/ \u2612 N\u00e3o Pago
\nInfraestrutura:
\nComputador;
\nSoftware IDE NetBeans com Java JDK instalado e configurado. Descri\u00e7\u00e3o do software:
\nNetBeans \u00e9 uma IDE de desenvolvimento gratuita e de c\u00f3digo aberto. \u00datil no desenvolvimento
\nde softwares utilizando as linguagens: Javascript, HTML5, PHP, C\/C++ e Java. Ferramenta
\nmultiplataforma podendo ser instalada no Linux, macOS e Windows. ATIVIDADE PR\u00c1TICA 1
\nAtividade proposta:
\nConfigurar um servidor que ser\u00e1 necess\u00e1rio para que a IDE NetBeans execute os projetos
\ndesenvolvidos sobre essa ferramenta. Para essa atividade, faremos a instala\u00e7\u00e3o do Tomcat
\ncomo servidor padr\u00e3o para rodas as aplica\u00e7\u00f5es e para testar, voc\u00ea dever\u00e1 \u201clevantar\u201d uma
\naplica\u00e7\u00e3o web simples para testar esse servidor. Objetivos:
\n\u2013 Criar familiaridade com ambiente de desenvolvimento NetBeans. \u2013 Configurar servidor Tomcat para exibir aplica\u00e7\u00f5es desenvolvidas em Java; \u2013 Compreender como testar o servidor tomcat. Procedimentos para a realiza\u00e7\u00e3o da atividade:
\nPara cumprir com o proposto dessa aula pr\u00e1tica, \u00e9 necess\u00e1rio ter previamente instalado o
\nNetbeans e o Java JDK. 1 \u2013 Acessar a p\u00e1gina do servidor de internet Tomcat. Sua escolha se d\u00e1 por se tratar de um
\nservidor tamb\u00e9m desenvolvido pela Apache, mesma criadora do NetBeans. O que assegurar\u00e1
\ntotal integra\u00e7\u00e3o entre as ferramentas. Para isso, acesse a p\u00e1gina do Tomcat em:
\n<https:\/\/tomcat.apache.org\/download-native.cgi><\/a>;.
\n2 \u2013 Trabalharemos com a vers\u00e3o 8.x do servidor. Procure na p\u00e1gina por essa vers\u00e3o para ter
\nacesso \u00e0 \u00e1rea de download. 3 \u2013 Ao acessar a \u00e1rea de download, procure pela sess\u00e3o \u201cCore\u201d da p\u00e1gina. Nela, n\u00f3s teremos
\nacesso a vers\u00f5es distintas desse servidor. Aten\u00e7\u00e3o \u00e0 arquitetura de sua m\u00e1quina para que voc\u00ea
\nn\u00e3o escolha a vers\u00e3o errada. De modo geral, a vers\u00e3o para arquitetura 32bits est\u00e1 sendo
\ndescontinuada porque essa arquitetura de processadores foi descontinuada. Muito
\nprovavelmente voc\u00ea utilizar\u00e1 a vers\u00e3o 64bits, mas tenha certeza. Para isso, voc\u00ea pode acessar
\na propriedade do \u201cMeu Computador\u201d e encontrar a informa\u00e7\u00e3o de arquitetura de seu
\nprocessador. 4 \u2013 Fa\u00e7a o download da vers\u00e3o de arquivos .zip, ou seja, faremos o download da vers\u00e3o zipada
\nde arquivos, ou seja, 64-bit Windows.zip. Veja:
\n5 \u2013 Ap\u00f3s o download ser realizado, descompacte o arquivo em um local no seu computador. Pode ser na pasta Downloads mesmo, pois vamos mudar a localiza\u00e7\u00e3o da pasta. 6 \u2013 Agora, vamos mover essa pasta apache-tomcat-8.5.82 para o Disco Local C: de nosso
\ncomputador. Vamos coloc\u00e1-lo solto, como mostra a imagem a seguir:
\n7 \u2013 Agora, abra o NetBeans e crie um novo projeto, um projeto Java Web. Para isso, ser\u00e1
\nnecess\u00e1rio escolher essa op\u00e7\u00e3o na categoria Java with Ant > Java Web > Web Application. 8 \u2013 Escolha o local onde o projeto ser\u00e1 salvo, d\u00ea um nome para o projeto e Click no bot\u00e3o
\n\u201cNext\u201d. 9 \u2013 Na tela que surgir\u00e1, ser\u00e1 necess\u00e1rio escolher o servidor Apache Tomcat or TomEE e
\ncnofigurar a op\u00e7\u00e3o \u201cServer Location\u201d que \u00e9 a pasta que acabamos de colocar no disco local C:
\nNessa mesma tela pode-se definir um usu\u00e1rio e senha para acessar o servidor. 10 \u2013 Na tela seguinte ser\u00e1 exibida a vers\u00e3o do Java EE que est\u00e1 sendo utilizada e voc\u00ea dever\u00e1
\navan\u00e7ar, clicando no bot\u00e3o \u201cNext\u201d. Na tela seguinte, selecione o framework Spring Web MVC e
\nclique no bot\u00e3o \u201cFinish\u201d. Ao escolher essa op\u00e7\u00e3o, uma estrutura em HTML ser\u00e1 criada gra\u00e7as
\nao framework escolhido na etapa anterior. Execute a aplica\u00e7\u00e3o e acesse o link gerado pelo
\nTomcat no navegador para ver sua aplica\u00e7\u00e3o. Checklist:
\n1 \u2013 Download das ferramentas e prepara\u00e7\u00e3o do ambiente de desenvolvimento com NetBeans. 2 \u2013 Download do servidor Tomcat no site oficial do Apache. 3 \u2013 Organizar pasta do servidor no computador e iniciar o NetBeans;
\n4 \u2013 Criar um novo projeto do tipo Java Web, e realizar as etapas de configura\u00e7\u00e3o do servidor. 5 \u2013 Instalar o framework Spring MVC para construir uma projeto simples web para executar o
\nservidor e testar a aplica\u00e7\u00e3o no navegador. Resultado: Aluno, voc\u00ea dever\u00e1 entregar:
\nConfigura\u00e7\u00e3o do servidor Tomcat na vers\u00e3o 8.x para servidor \u00e0s aplica\u00e7\u00f5es web desenvolvidas
\nna IDE Netbeans. Voc\u00ea dever\u00e1 configurar, ao criar um novo projeto web, o servidor tomcat e
\ninstalar o framework Spring MVC para constru\u00e7\u00e3o de um projeto simples web utilizando o
\nframework em quest\u00e3o para testar a configura\u00e7\u00e3o do servidor tomcat. C
\nRefer\u00eancias:
\nTutorial Tomcat \u2013 Instala\u00e7\u00e3o e configura\u00e7\u00e3o B\u00e1sica. Dispon\u00edvel em:
\n<http:\/\/www.mhavila.com.br\/topicos\/java\/tomcat.html><\/a>;. Acesso em: 20, setembro de 2022.
\nROTEIRO DE AULA PR\u00c1TICA 2
\nUnidade: Digite aqui
\nAula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui
\nSOFTWARE
\n\u2612Software \/ \u2610 Acesso on-line
\n\u2610Pago \/ \u2612 N\u00e3o Pago
\nInfraestrutura:
\nComputador;
\nSoftware IDE NetBeans com Java JDK instalado e configurado. Descri\u00e7\u00e3o do software:
\nNetBeans \u00e9 uma IDE de desenvolvimento gratuita e de c\u00f3digo aberto. \u00datil no desenvolvimento
\nde softwares utilizando as linguagens: Javascript, HTML5, PHP, C\/C++ e Java. Ferramenta
\nmultiplataforma podendo ser instalada no Linux, macOS e Windows. ATIVIDADE PR\u00c1TICA 2
\nAtividade proposta:
\nCriar um pequeno projeto composto de um formul\u00e1rio para consumo de API de endere\u00e7o
\noferecida pelos Correios. A proposta consiste em digitar o CEP e partir disso, os demais
\ncampos serem preenchidos comas informa\u00e7\u00f5es de rua, bairro, cidade e estado. Esse consumo
\nde API dever\u00e1 ser feito com javascript. O Formul\u00e1rio para isso dever\u00e1 ser constru\u00eddo em
\nHTML5 e a parte de estilo pode-se criar um arquivo de estilo e tamb\u00e9m utilizar o framework
\nBootstrap. Objetivos:
\nCompreender o processo de constru\u00e7\u00e3o de um projeto web utilizando HTML5, Javascript e
\nCSS3;
\nCriar formul\u00e1rio utilizando a linguagem HTML5;
\nEstilizar o formul\u00e1rio criado em HTML5 com CSS3;
\nConfigurar a utiliza\u00e7\u00e3o do framework de estilos bootstrap 5;
\nImplementar consumo de API de endere\u00e7o disponibilizado pelos correios utilizando javascript;
\nProcedimentos para a realiza\u00e7\u00e3o da atividade:
\nPara a condu\u00e7\u00e3o dessa atividade, crie um novo projeto HTML5\/Javascript. Note que nessa
\natividade voc\u00ea far\u00e1 uso apenas do framework Bootstrap, se assim desejar. Recomenda-se sua
\nutiliza\u00e7\u00e3o para que a estiliza\u00e7\u00e3o da p\u00e1gina criada possa ser feita a contento. 1 \u2013 Crie um novo projeto, escolha nas categorias o HTML5\/Javascript > HTML5\/JS Application. Fique a vontade para escolher o nome que desejar para o projeto, mas, para efeitos did\u00e1ticos, o
\nchamaremos de cadastroEndereco. 2 \u2013 Na etapa seguinte, ser\u00e1 oferecido a op\u00e7\u00e3o de utilizar algum template. Nesse primeiro
\nmomento, optaremos por n\u00e3o utilizar nenhum template, bastando, para isso, escolher a op\u00e7\u00e3o
\n\u201cno site template\u201d. 3 \u2013 Na estrutura de diret\u00f3rios, ser\u00e1 necess\u00e1rio criar os arquivos de javascript e css. Note que o
\narquivo index.html j\u00e1 foi criado automaticamente. No entanto, ser\u00e1 necess\u00e1rio alter\u00e1-lo para
\ninserir o c\u00f3digo necess\u00e1rio para cria\u00e7\u00e3o de um pequeno formul\u00e1rio composto de, no m\u00ednimo, 5
\ncampos sendo eles: CEP, Rua, Bairro, Cidade, Estado. No entanto, pode-se inserir mais dois
\ncampos: N\u00famero e Complemento. Dever\u00e1 ficar parecido com o que mostra a imagem a seguir:
\nFonte: Elaborado pelo autor. 4 \u2013 A estrutura de c\u00f3digo criada no arquivo index.html, dever\u00e1 ser semelhante ao que \u00e9
\nmostrado a seguir:
\n<!DOCTYPE html><\/p>\n
<html> Elaboramos os portf\u00f3lios, j\u00e1 deixamos prontos, nas normas da ABNT e conforme os requisitos da universidade. F\u00e1cil assim! O MELHOR \u00c9 QUE VOC\u00ca COMPRA E J\u00c1 BAIXA NA HORA O SEU ARQUIVO EM WORD! Sabemos que conciliar trabalho, fam\u00edlia, vida profissional e estudos \u00e9 dif\u00edcil hoje em dia, por isso, estamos aqui para ajudar voc\u00ea. Conte com nossa qualidade, experi\u00eancia e profissionalismo adquirindo seu portf\u00f3lio conosco. GARANTIMOS SEU CONCEITO!<\/p>\n Os envios s\u00e3o imediatos. Ap\u00f3s sua compra, o trabalho j\u00e1 \u00e9 disponibilizado instantaneamente aqui em nosso site e no seu e-mail.<\/p>\n Caso haja alguma solicita\u00e7\u00e3o de corre\u00e7\u00e3o\/altera\u00e7\u00e3o por parte do tutor, basta entrar em contato conosco pelo\u00a0WhatsApp\u00a0que provid\u00eanciaremos sem custo algum.<\/p>\n Os arquivos s\u00e3o enviados em formato Word e s\u00e3o edit\u00e1veis.<\/p>\n Sim, com certeza. Basta clicar no \u00edcone do WhatsApp no cantinho da tela. Ser\u00e1 um prazer atend\u00ea-lo(a).<\/p>\n
\n<head>
\n<title>Cadastre-se<\/title>
\n<meta charset=\u201dUTF-8\u2033>
\n<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033>
\n<\/head>
\n<body>
\n<div>TODO write content<\/div>
\n<\/body>
\n<\/html>
\n5 \u2013 Agora, \u00e9 necess\u00e1rio alterar o c\u00f3digo apresentado, para escrever, nessa estrutura, o
\nformul\u00e1rio apresentado anteriormente. 6 \u2013 Crie o arquivo de CSS. Isso pode ser feito clicando sobre o diret\u00f3rio \u201cSite Root\u201d com o bot\u00e3o
\ndireito do mouse e, em seguida, escolher a op\u00e7\u00e3o \u201cCascading Style Sheet..\u201d Ao arquivo, d\u00f4 o
\nnome de style. 7 \u2013 Agora, da mesma forma, crie o arquivo de Javascript e d\u00ea o nome a ele de controller.js. 8 \u2013 Sugere-se utilizar o navegador Google Chrome para ver o resultado do c\u00f3digo
\nimplementando por voc\u00ea no NetBeans. Por esse motivo, pode ser necess\u00e1rio instalar\/ativar
\nextens\u00e3o do netbeans no referido navegador. Veja:
\n9 \u2013 Caso aconte\u00e7a, v\u00e1 nas configura\u00e7\u00f5es do navegador, encontre a op\u00e7\u00e3o extens\u00f5es e pesquise
\npor NetBeans. Caso j\u00e1 tenha instalado, basta que a extens\u00e3o seja ativada. De outra forma, basta instalar a referida extens\u00e3o. A ativa\u00e7\u00e3o pode ser feita como mostra a imagem a seguir:
\nChecklist:
\n1 \u2013 Ambiente de desenvolvimento NetBeans com m\u00e1quina virtual Java JDK devidamente
\ninstalados e funcionando. 2 \u2013 Cria\u00e7\u00e3o de um projeto web para implementar c\u00f3digos em HTML5, CSS3 e Javascript. 3 \u2013 Cria\u00e7\u00e3o dos arquivos de css e javascript no projeto. 4 \u2013 Implementa\u00e7\u00e3o de c\u00f3digo em HTML5 para criar um pequeno formul\u00e1rio composto de, no
\nm\u00ednimo, 5 campos de endere\u00e7o sendo: CEP, Rua, Bairro, Cidade e Estado. 5 \u2013 Configura\u00e7\u00e3o de extens\u00e3o netbeans no navegador google Chrome para que seja poss\u00edvel
\nver o website implementado, funcionando.
\nResultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:
\nCria\u00e7\u00e3o, estrutura, organiza\u00e7\u00e3o e codifica\u00e7\u00e3o de um projeto simples escrito utilizando as
\ntecnologias HTML5, CSS3 e Javascript, bem como framework bootstrap, para estiliza\u00e7\u00e3o de um
\nformul\u00e1rio de endere\u00e7o que consumir\u00e1 API do correio e, a partir do preenchimento de um
\ncampo e CEP, fornecer\u00e1 as demais informa\u00e7\u00f5es relativas ao referido CEP como; Rua, Bairro, Cidade e Estado. Refer\u00eancias:
\nAcessando webservice de CEP . Dispon\u00edvel em: <https:\/\/viacep.com.br\/><\/a>;. Acesso em: 20, setembro de 2022.
\nROTEIRO DE AULA PR\u00c1TICA 3
\nUnidade: Digite aqui
\nAula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui
\nSOFTWARE
\n\u2612Software \/ \u2610 Acesso on-line
\n\u2610Pago \/ \u2612 N\u00e3o Pago
\nInfraestrutura:
\nComputador;
\nSoftware IDE NetBeans com Java JDK instalado e configurado. Descri\u00e7\u00e3o do software:
\nNetBeans \u00e9 uma IDE de desenvolvimento gratuita e de c\u00f3digo aberto. \u00datil no desenvolvimento
\nde softwares utilizando as linguagens: Javascript, HTML5, PHP, C\/C++ e Java. Ferramenta
\nmultiplataforma podendo ser instalada no Linux, macOS e Windows. ATIVIDADE PR\u00c1TICA 3
\nAtividade proposta:
\nImplementar um formul\u00e1rio de cadastro utilizando spring mvc e bootstrap 5. Esse formul\u00e1rio de
\ncadastro dever\u00e1 conter campos para inser\u00e7\u00e3o de nome, sobrenome, email, senha, CEP, rua, bairro, cidade, estado, n\u00famero e complemento. Objetivos:
\nAplicar conceitos relacionados \u00e0 utiliza\u00e7\u00e3o dos frameworks Spring web MVC e Boostrap 5 para
\nconstru\u00e7\u00e3o de um formul\u00e1rio totalmente estilizado com CSS, de cadastro de usu\u00e1rio, muito
\ncomumente encontrado em aplica\u00e7\u00f5es diversas na web, principalmente para cadastro de
\nusu\u00e1rios em websites de e-commerce. Procedimentos para a realiza\u00e7\u00e3o da atividade:
\n\u00c9 necess\u00e1rio ter devidamente configurado a IDE Netbeans, a m\u00e1quina virtual Java JDK e o
\nservidor Tomcat, que ser\u00e1 utilizado para levantar a aplica\u00e7\u00e3o desenvolvida em Spring web
\nMVC. O resultado esperado deve se assemelhar ao que \u00e9 visto na imagem a seguir:
\n1 \u2013 Crie um novo projeto, semelhante \u00e0 constru\u00e7\u00e3o realizada nas atividades anteriores. V\u00e1 em
\nFile > New Project. 2 \u2013 Escolha a op\u00e7\u00e3o Java Web dispon\u00edvel na categoria Java with Ant. Em seguida ,na \u00e1rea
\nProjects, escolha Web Application. 3 \u2013 Na sequ\u00eancia, ser\u00e1 necess\u00e1rio definir um nome para o projeto no campo \u201cProject Name\u201d. Padronize e d\u00ea o nome de cadastroUsuario. 4 \u2013 Avance para a tela seguinte e confira se o servidor Apache Tomcat est\u00e1 definido e veja se a
\nm\u00e1quina virtual (Java EE Version) foi setada, em seguida, avance para a etapa seguinte. 5 \u2013 Agora, \u00e9 necess\u00e1rio margar o Framework Spring Web MVC para que o mesmo seja
\ncarregado no projeto. Deixe a op\u00e7\u00e3o \u201cSpring Library\u201d com a vers\u00e3o do Spring 4.3.29, ou
\nsuperior. 6 \u2013 A \u00e1rvore de diret\u00f3rio criada pela IDE deve ser semelhante ao que \u00e9 exibido na imagem a
\nseguir:
\n7 \u2013 Em seguida, ao arquivo index.jsp, criado pelo Spring, voc\u00ea dever\u00e1 adicionar o CDN do
\nbootstrap, para isso, procure pelo framework na vers\u00e3o 5, na internet, e localize o link do CDN. Depois, inseri-o na \u00e1rea do <head> da p\u00e1gina index.jsp. O c\u00f3digo deve ser algo parecido com:
\n<link href=\u201dhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css”<\/a>;
\nrel=\u201dstylesheet\u201d integrity=\u201dsha384- EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\u201d crossorigin=\u201danonymous\u201d>
\n8 \u2013 Fa\u00e7a uma pequena confer\u00eancia visual no arquivo WEB-INF\/redirect.jsp e veja se nas
\nconfiguar\u00e7\u00f5es desse arquivo, o redirecionamento que est\u00e1 sendo feito, aponta para o arquivo
\nindex.htm. Dever\u00e1 estar assim:
\n<%@page contentType=\u201dtext\/html\u201d pageEncoding=\u201dUTF-8\u2033%>
\n<% response.sendRedirect(\u201cindex.htm\u201d); %>
\n9 \u2013 Construa seu formul\u00e1rio conforme solicitado no enunciado dessa atividade, n\u00e3o esquecendo
\nque toda a estiliza\u00e7\u00e3o do mesmo dever\u00e1 ser feita utilizando classes prontas do Bootstrap 5. 10 -Insira um t\u00edtulo na p\u00e1gina do formul\u00e1rio com o termo \u201cFormul\u00e1rio de Cadastro\u201d. 11 \u2013 As classes com estilos prontos, definidas pelo Bootstrap, podem ser pesquisadas direto no
\nsite oficial em: <https:\/\/getbootstrap.com\/docs\/5.0\/getting-started\/introduction\/><\/a>;. Checklist:
\n1 \u2013 Ambiente de desenvolvimento NetBeans, JDK, servidor Tomcat 8.x devidamente configurado
\ne funcionando. 2 \u2013 Cria\u00e7\u00e3o de um projeto utilizando o framework Spring Web MVC. 3 \u2013 Configura\u00e7\u00e3o do CDN do Bootstrap 5 no arquivo index.jsp, criado pelo Spring Web MVC. 3 \u2013 Verifica\u00e7\u00e3o do redirecionamento feito no arquivo redirect.jsp, do projeto web. 4 \u2013 Escrita do c\u00f3digo para cria\u00e7\u00e3o do formul\u00e1rio. 5 \u2013 Utiliza\u00e7\u00e3o de estilos definidos pelo Bootstrap 5 em todo o formul\u00e1rio criado. 6 \u2013 Iniciar servidor Tomcat. 7 \u2013 Verificar se a aplica\u00e7\u00e3o est\u00e1 rodando normalmente, atrav\u00e9s do servidor Tomcat. Resultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:
\nCria\u00e7\u00e3o, estrutura\u00e7\u00e3o, estiliza\u00e7\u00e3o e codifica\u00e7\u00e3o de um pequeno formul\u00e1rio, composto de 12
\ncampos, com utiliza\u00e7\u00e3o do maior n\u00famero de estilos poss\u00edveis e dispon\u00edveis atrav\u00e9s do
\nframework Bootstrap 5, com projeto estruturado sobre o Framework Spring Web MVC. Refer\u00eancias:
\nServing Web Content with Spring MV. Dispon\u00edvel em: <https:\/\/spring.io\/guides\/gs\/serving-web-<\/a>\u00a0content\/>. Acesso em: 20, setembro de 2022.
\nIntrodu\u00e7\u00e3o ao Spring web MVC. Dispon\u00edvel em:
\n<https:\/\/netbeans.apache.org\/kb\/docs\/web\/quickstart-webapps-spring_pt_BR.html><\/a>;. Acesso em:
\n20, setembro de 2022.
\nROTEIRO DE AULA PR\u00c1TICA 4
\nUnidade: Digite aqui
\nAula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui
\nSOFTWARE
\n\u2612Software \/ \u2610 Acesso on-line
\n\u2610Pago \/ \u2612 N\u00e3o Pago
\nInfraestrutura:
\nComputador;
\nSoftware IDE NetBeans com Java JDK instalado e configurado. Descri\u00e7\u00e3o do software:
\nNetBeans \u00e9 uma IDE de desenvolvimento gratuita e de c\u00f3digo aberto. \u00datil no desenvolvimento
\nde softwares utilizando as linguagens: Javascript, HTML5, PHP, C\/C++ e Java. Ferramenta
\nmultiplataforma podendo ser instalada no Linux, macOS e Windows. ATIVIDADE PR\u00c1TICA 4
\nAtividade proposta:
\nImplementar uma aplica\u00e7\u00e3o para cadastro de usu\u00e1rio utilizando HTML5\/JavaScript. Esse
\nformulario pode ser semelhante ao constru\u00eddo na atividade anterior e dever\u00e1 conter dados
\nb\u00e1sicos como: Nome, Sobrenome, email, senha, cep, rua, bairro, cidade, estado, numero e
\ncomplemento. Ser\u00e1 necess\u00e1rio construir parte do c\u00f3digo em JavaScript para validar os campos, verificando se todos foram preenchidos, validar o e-mail, para verificar se ele foi preenchido
\ncorretamente. Essa valida\u00e7\u00e3o do e-mail dever\u00e1 ser implementada com framework java ou at\u00e9
\nmesmo biblioteca, como a JQuery. Todo o formul\u00e1rio dever\u00e1 ser TOTALMENTE estilizado
\nutilizando o framework bootstrap. Objetivos:
\n\u2013 Aplicar conceitos de programa\u00e7\u00e3o web utilizando Linguagem HTML5, CSS e javascript; \u2013 Utilizar recursos prontos do Framework Bootstrap para estiliza\u00e7\u00e3o do formul\u00e1rio criado em
\nHTML5; \u2013 Implementar o consumo da API ViaCep, para preenchimento autom\u00e1tica dos campos de
\nendere\u00e7o a partir do CEP. \u2013 Utilizar a biblioteca JQuery para implementar a valida\u00e7\u00e3o de campos do formul\u00e1rio, principalmente o campo de e-mail. Procedimentos para a realiza\u00e7\u00e3o da atividade:
\nPara realiza\u00e7\u00e3o dessa atividade, ser\u00e1 necess\u00e1rio ter configurado o ambiente de
\ndesenvolvimento NetBeans, java JDK e servidor Tomcat. 1 \u2013 Vamos criar um novo projeto do tipo HTML5\/JavaScript.
\n2 \u2013 Ao projeto, daremos o nome de cadUsuario e n\u00e3o faremos uso de nenhum template
\ndispon\u00edvel no processo de cria\u00e7\u00e3o de um novo projeto, pois construiremos nosso formul\u00e1rio
\ntotalmente baseado no framework Bootstrap. 3 \u2013 Em uma das telas que surgem no momento de cria\u00e7\u00e3o de um novo projeto
\nHTML5\/JavaScript, ser\u00e1 necess\u00e1rio desmarcar algumas ferramentas que s\u00e3o disponibilizadas. Elas n\u00e3o ser\u00e3o necess\u00e1rias nesse momento para o que vamos implementar em termos de
\nprojeto. Desmarque todas as op\u00e7\u00f5es. Veja:
\n4 \u2013 Crie um formul\u00e1rio simples contendo todos os campos a seguir: Nome, Sobrenome, email, senha, cep, rua, bairro, cidade, estado, numero e complemento. Esse formul\u00e1rio dever\u00e1 separar
\nas informa\u00e7\u00f5es de endere\u00e7o para que possamos implementar o consumo da API (ViaCEP),
\ntarefa j\u00e1 realizada em atividade anterior. Acesse o site do bootstrap 5 em:
\n<https:\/\/getbootstrap.com\/docs\/5.0\/getting-started\/introduction\/><\/a>; e pesquise as informa\u00e7\u00f5es
\nnecess\u00e1rias para constru\u00e7\u00e3o do formul\u00e1rio de cadastro que devemos construir nessa atividade. 5 \u2013 Adicione a biblioteca do JQuery, que auxiliar\u00e1 na valida\u00e7\u00e3o de campos do formul\u00e1rio. Dever\u00e1
\nficar semelhante a isso:
\n<head>
\n<title>Cadastro de Cliente<\/title>
\n<meta charset=\u201dUTF-8\u2033>
\n<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033>
\n<link href=\u201dhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css”<\/a>;
\nrel=\u201dstylesheet\u201d integrity=\u201dsha384- EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\u201d crossorigin=\u201danonymous\u201d>
\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js<\/a>
\n<\/head>
\n6 \u2013 Crie um arquivo separado para implementar o consumo da API de endere\u00e7os por CEP. Voc\u00ea
\npode dar o nome a esse arquivo de main.js.
\n7 \u2013 Crie agora um novo arquivo para implementar as valida\u00e7\u00f5es. Fa\u00e7a separadamente do
\narquivo onde ser\u00e1 colocado o javascript de consumo da API. Isso para evitar que tenha
\nproblemas na execu\u00e7\u00e3o do c\u00f3digo em javascript em seu projeto. A esse arquivo d\u00ea o nome de
\nvalidation.js. 8 \u2013 N\u00e3o esque\u00e7a de implementar a valida\u00e7\u00e3o para todos os campos. Pesquise sobre express\u00f5es
\nregulares, pois ser\u00e1 necess\u00e1rio para realizar a valida\u00e7\u00e3o do campo de e-mail com uso de
\nJQuery. 9 \u2013 O Resultado final pode se assemelhar ao apresentado na imagem a seguir:
\nChecklist:
\n1 \u2013 Criar novo projeto do tipo HTML5\/Javascript. 2 \u2013 Realizar pesquisas para utiliza\u00e7\u00e3o de estilos definidos no framework Bootstrap 5. 3 \u2013 Construir o formul\u00e1rio em HTML5. 4 \u2013 Adicionar a biblioteca JQuery para implementar a valida\u00e7\u00e3o de campos, sobretudo o campo
\nde e-mail. 5 \u2013 Implementar dois arquivos de javascript, um para as valida\u00e7\u00f5es e outro para consumo da
\nAPI da ViaCEP. Resultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:
\nAplica\u00e7\u00e3o pr\u00e1tica de constru\u00e7\u00e3o de c\u00f3digo HTML5\/Javascript com uso de framework bootstrap
\n5 e biblioteca javascript JQuery para valida\u00e7\u00e3o de campos de formul\u00e1rio de cadastro de
\nClientes. Refer\u00eancias:
\nComo validar email com javascript. Dispon\u00edvel em:
\n<https:\/\/www.horadecodar.com.br\/2020\/09\/13\/como-validar-email-com-javascript\/><\/a>;. Acesso em:
\n22, setembro de 2022. Validando e-mail em inputs HTML com javascript. Dispon\u00edvel em:
\n<https:\/\/www.devmedia.com.br\/validando-e-mail-em-inputs-html-com-javascript\/26427><\/a>;. Acesso
\nem: 22, setembro de 2022. Bootstrap. Dispon\u00edvel em: <https:\/\/getbootstrap.com\/docs\/5.0\/getting-started\/introduction\/><\/a>;. Acesso em: 22, setembro de 2022.<\/p>\nComo funciona?<\/h4>\n
Como se realizam os envios?<\/h4>\n<\/div>\n<\/div>\n
Em quanto tempo recebo o portf\u00f3lio?<\/h4>\n<\/div>\n<\/div>\n
E se o portf\u00f3lio que comprei precisar de corre\u00e7\u00e3o?<\/h4>\n<\/div>\n<\/div>\n
Qual o formato do arquivo?<\/h4>\n<\/div>\n<\/div>\n
Caso eu tiver alguma d\u00favida, terei suporte no p\u00f3s venda?<\/h4>\n<\/div>\n<\/div>\n
![\"projeto](\"https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao-300x300.jpeg?resize=144%2C144\")
<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n![\"PORTFOLIO](\"https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2022\/04\/conceitomaximo.png?resize=161%2C46\" "\\"portfolio")
<\/a><\/p>\n![\"\"](\"http:\/\/portifolioos-prontos.com\/wp-content\/uploads\/2022\/04\/PIX-300x107.webp\")
\u00a0\u00a0![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/visa@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/boleto@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mastercard@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/amex@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/diners@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/elo@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/hipercard@2x.png\")
![](\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mercadopago@2x.png\")
<\/div>\n<\/div>\n<\/div>\n","protected":false},"featured_media":23298,"template":"","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"%%post_title%% %%sitetitle%%","_seopress_titles_desc":"%%post_content%%","_seopress_robots_index":""},"product_cat":[109,140,282,530,58,145,148,149,144,147,150,276,15],"product_tag":[],"class_list":{"0":"post-23294","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-analise-e-desenvolvimento-de-sistemas","7":"product_cat-ciencia-da-computacao","8":"product_cat-ciencia-de-dados","9":"product_cat-computacao-em-nuvem","10":"product_cat-cursos-de-t-i","11":"product_cat-desenvolvimento-back-end","12":"product_cat-desenvolvimento-mobile","13":"product_cat-desenvolvimento-web","14":"product_cat-engenharia-de-software","15":"product_cat-seguranca-da-informacao","16":"product_cat-sistemas-de-informacao","17":"product_cat-tecnologia-da-informacao","18":"product_cat-uncategorized","20":"first","21":"instock","22":"downloadable","23":"virtual","24":"purchasable","25":"product-type-simple","26":"col-xs-6 col-sm-4","27":"col-mf-5","28":"un-5-cols"},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/23294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/types\/product"}],"version-history":[{"count":0,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/23294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media\/23298"}],"wp:attachment":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media?parent=23294"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_cat?post=23294"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_tag?post=23294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}