Aula Prática Programação web para Back-End

Disciplina:Programaçãowebparaback-end ROTEIRODEAULAPRÁTICA1 Unidade: Aula(WhiteLabel)/Seção(KLS): SOFTWARE ☒Software/☐Acessoon-line ☐Pago/☒NãoPago Infraestrutura: Computador; SoftwaredeambientededesenvolvimentoparacodificaçãodepáginaswebemJSF(Java)com EclipseIDE. Descriçãodosoftware: EclipseéumaIDEparadesenvolvimentoJava,porémsuportaváriasoutraslinguagensapartir depluginscomoC/C++,PHP,ColdFusion,Python,ScalaeKotlin.Elefoi feitoemJavaesegue omodeloopensourcededesenvolvimentodesoftware. ATIVIDADEPRÁTICA1 Atividadeproposta: Desenvolver umpequenoprojetodeumcurrículowebutilizandoHTML5eCSS3.Noteque aindanãodeveráser utilizado JSF. Nessaprimeiraatividade, pretende-se familizar como ambientededesenvolvimento,utilizandolinguagembásicadeprogramaçãoweb. Objetivos:-CriarfamiliaridadecomambientededesenvolvimentoEclisecomservidorWildFly.-Construir estruturadeumprojetowebnoambientededesenvolvimento java, utilizandoas linguagensHTMLeCSS,paraweb,comEclipse;-Desenvolverumumpequenoprojetodecriaçãodeumcurrículoweb.-Compreenderoprocessodeconfiguraçõesnecessáriasparafuncionamentodoambientede desenvolvimentoEclipse. Procedimentosparaarealizaçãodaatividade: Paracumprir comopropostodessaaulaprática, énecessário ter previamente instaladoo EclipseeoTemurin. Tendo issogarantido, crieuma formadeorganizaçãodepastaspara receberosarquivosdeseuprojeto. 1-Criar dentrodapastaeclipse-workspace, definidaduranteoprocessode instalaçãoda ferramenta, umasubpastachamada”Atividade1″, paraoarmazenamentodosarquivosdesse projeto. Crie um novo projeto indo ao menu File > New > Dynamic Web Project. 2- Depois do projeto criado, clique com o botão direito em cima da pasta webapp (que fica em src > main), escolha a opção New e HTML File, para criar um arquivo do tipo HTML. Siga os passos sugeridos pela ferramenta e nomeie o arquivo como index.html. 3- Crie uma nova pasta clicando com o botão direito em cima de webapp e coloque o nome de _css. Dentro dela, crie um arquivo de estilo, clicando com o botão direito sobre ela (_css), New >CSSFile. 4- Construa o código em HTML para criação de um mini projeto de currículo web com seus dados pessoais. Para isso, previamente, é necessário reunir todas as informações necessárias para isso. Escolaridade, Dados pessoais, Cursos, Experiências profissionais, e etc. Além disso, escolha uma bela foto para compor o seu currículo web. Note que toda a parte de estilo de seu projeto deverá ser implementada com CSS. Coisas como tipo de fonte, cores, tamanho e etc, tudo deve ser implementado em CSS. Não esqueça que será necessário ligar seu arquivo e estilo ao seu arquivo HTML. 5- Para que a etapa anterior possa ser completada com êxito, você precisará utilizar o elemento , do HTML, para linkar o arquivo de estilo ao seu projeto. Para isso, basta inserir a linha a seguir, entre os elementosdo seu projeto, assim:6- Dentro do arquivo index.html, você deverá: a) Conferir se a estrutura do HTML foi criada adequadamente no momento da criação do arquivo; b) Utilizando elementos simples como elmentos de parágrafo, de hieraquias (

a

), e outros de seu conhecimento, compor o seu projeto de modo que ele contenha suas informações essenciais para um currículo. c) Organizar seus dados em sessões, como: Dados pessoais, Experiências profissionais, Formação, Trabalhos voluntários, e outros. d) Utilize hiperlinks para colocar na sessão de Dados pessoais, links para redes sociais como Linkedin e Instagram. e) Insira uma foto e ajuste-a para que ela fique do lado direito da tela, ou seja, o lado oposto aos dados contidos na sessão “Dados pessoais”. 7- O arquivo de estilo, deve se chamar style.css para padronização. No entanto, é possível nomeá-lo de outras formas. 8- Dentro do arquivo de estilo, certifique-se de iniciar o arquivo com a regra correta para especificar a codificçaão de caracteres a ser utilizada na folha de estilo. 9- Organize os seletores por ordem, de forma organizada e devidamente indentado. Tente organiza-lo de acordo com a estrutura do seu HTML. Por exemplo, se em sua estrutura HTML você tem a utilização de um elemento

, em seguida de um elemento

e por fim, um elemento

, organize os seletores nessa mesma ordem. Pode não parecer, mas faz toda diferença quando se trabalhar em um projeto mais robusto. Adicione as regras de estilos de seu interesse em seu currículo web. Checklist: 1- Download das ferramentas e preparação do ambiente de desenvolvimento com Eclipse. 2- Criação de um projeto e organização dos arquivos e pastas criados. 3- Criação de arquivo HTML e construção do projeto utilizando elementos simples para composição de um currículo web; 4- Criação de uma pasta para armazenar o arquivo de estilo e criação do arquivo de estilo para escrita das regras de estilização. 5- Configuração do servidor Wildfly para apresentação do resultado do projeto pelo navegador de internet, utilizando o referido servidor. Resultado: Aluno, você deverá entregar: Construção de um projeto de currículo web com estrutura utilizando linguagem de marcação HTML5 e linguagem de estilo CSS3, a partir da correta configuração do ambiente de desenvolvimento Eclipse, com Temurin e o servidor de aplicações WildFly para apresentação do projeto desenvolvido em um browser. Todo o projeto deverá contar com estrutura de pastas sugerida na criação de projeto do Eclipse e, adicionalmente, com uma pasta _css que abrigará o arquivo de estilos, um arquivo de HTML e uma imagem. Referências: Alura- Novo projeto web usando eclipse. Disponível em: <https://www.alura.com.br/apostila java-web/novo-projeto-web-usando-eclipse>. Acesso em: 18, agosto de 2022. C ROTEIRODEAULAPRÁTICA2 Unidade:Digiteaqui Aula(WhiteLabel)/Seção(KLS):Digiteaqui SOFTWARE ☒Software/☐Acessoon-line ☐Pago/☒NãoPago Infraestrutura: Computador; SoftwaredeambientededesenvolvimentoparacodificaçãodepáginaswebemJSF(Java)com EclipseIDE. Descriçãodosoftware: EclipseéumaIDEparadesenvolvimentoJava,porémsuportaváriasoutraslinguagensapartir depluginscomoC/C++,PHP,ColdFusion,Python,ScalaeKotlin.Elefoi feitoemJavaesegue omodeloopensourcededesenvolvimentodesoftware. ATIVIDADEPRÁTICA2 Atividadeproposta: Criar umprojetoutilizandoJavaServerFaces, ondedeveráser construídoumformuláriode contato, semelhanteaos formuláriosutilizandosnagrandemaioriadasempresasquecontam comsistemae-commerce.Empresascomo:Americanas,MagazineLuizaeoutros,contamcom ummodelodeformuláriosemelhanteaopropostonessaatividade. Objetivos: CompreenderoprocessodecriaçãodeprojetowebparautilizaçãodoframeworkJavaServer Faces; RealizarconfiguraçõesbásicasdoJSFparaoprojetoemquestão; ConstruirformuláriodecadastroutilizandoJSF. Procedimentosparaarealizaçãodaatividade: Seránecessárioaconstruçãodeumprojetonovo.Sugere-seutilizaronomeAtividade2para efeito de organização considerando esse roteiro de atividades. Oprocesso de criação do referidoprojetoésemelhanteaodaatividade1,contudoagora,seránecessárioconfiguraroJSF parautilizá-lonesseprojeto. OJSFutilizadonesteprojeto, foiodeverdão2.3.Veja: 1- Em seguida, deve-se realizar a configuração do campo de implementação de biblioteca, o “JSF Implementation Library” e deixá-lo desativado, como na imagem a seguir: 2- Será necesário instalar a biblioteca do JSF no projeto. Para isso, deve-se acessar o endereço: <https://maven.java.net/content/repositories/releases/org/glassfish/javax.faces/2.3.0/&gt; e produrar a versão javax.faces-2.3.0.jar, a escolhida para esse projeto. Baixe e coloque o arquivo na pasta lib (para isso, basta copiar e colar o arquivo na pasta). 3- Duas configurações novas devem ser feitas no momento de construir uma página HTML. Agora, iremos criar um arquivo de nome formulario.xhtml e na tela seguinte, o template a ser usado é “New XHTML file (1.0 transitional), veja nas imagens: 4- Agora será necessário fazer uma pequena alteração na estrutura de código criada no arquivo. Note, na linha 3, que será necessário fazer uma inclusão, adicionando o seguinte código:5- Será necessário criar o código utilizando essa “variável” h utilizada no escopo do projeto. Defina, pelo menos, 4 campos em seu formulário para informações como: Nome, Sobrenome, Fone e e-mail. 6- Crie o arquivo de CSS, dentro de uma pasta com o mesmo nome só que escrito tudo em minúsculo, _css. O nome do arquivo, dessa vez, pode se main.css. Em seguida, faça as configurações de estilo para tamanho de campos imput, que nesse caso se chamam e adicione a propriedade styleClass aos elementos no arquivo .XHTML, esta, será a responsável por aplicar a estilização desejada. Veja: 7- Cuidado para realizar a indentação do código corretamente. Basta utilizar a indentação criada pelo próprio editor. 8- Adicione o projeto ao servidor WildFly clicando com o botão direito em cima do nome do projeto, “Run As” > “Run on Server”, escolha o WildFly na lista de servidor localhost que aparecerá na tela e pressione o botão Finish. 9- Para visualizar o resultado de seu projeto, basta clicar com botão direito em cima do nome do arquivo XHTML, nesse caso, formulario.xhtml, “Run As” > “Run on Server”, escolha o WildFly na lista de servidor localhost que aparecerá na tela e pressione o botão Finish. Note que ao abrir o navegador padrão em seu computador, o caminho do servidor apresentará o nome faces, como isso: <localhost:8080/Atividade2/faces/formulario.xhtml>. Isso é necessário para que a biblioteca JSF seja carregada no seu projeto. Checklist: 1- Ambiente de desenvolvimento Eclipse, JDK e WildFly devidamente configurado e funcionando. 2- Criação de um projeto e organização dos arquivos e pastas criados. 3- Download e configuração da biblioteca javax.faces-2.3.0.jar no projeto, para utilização do framework JavaServer Faces. 3- Criação de arquivo XHTML e construção do projeto para criação de um formulário de consulta utilizando JavaServer Faces. 4- Criação de uma pasta css e do arquivo main.css para codificação da folha de estilo utilizada no projeto. 5- Utilização dos principais elementos javaServer Faces para construção de um formulário simples de contato. Resultados da aula prática: Aluno, você deverá entregar: Criação, estrutura, organização e codificação de um projeto simples de construção de um formulário de contato, utilizando o framework JavaServer faces de forma integrada ao CSS para estilização do referido formulário. Além disso, será necessário levantar o projeto utilizando o chamamento do framework mencionado na URL a ser digitada no navegador, incluindo o padrão de mapeamento, o URL Mapping Patterns que deve ser configurado no momento de criação do projeto. Referências: Tutorial das Ferramentas JSF- Construir um Aplicativo JSF 2.0. Disponível em: <https://www.ibm.com/docs/pt-br/rsm/7.5.0?topic=started-jsf-tools-tutorial-jsf-20&gt;. Acesso em: 18, agosto de 2022. Java Server Faces Technology. Disponível em: <https://www.oracle.com/java/technologies/javaserverfaces.html&gt;. Acesso em: 18, agosto de 2022. ROTEIRODEAULAPRÁTICA3 Unidade:Digiteaqui Aula(WhiteLabel)/Seção(KLS):Digiteaqui SOFTWARE ☒Software/☐Acessoon-line ☐Pago/☒NãoPago Infraestrutura: Computador; SoftwaredeambientededesenvolvimentoparacodificaçãodepáginaswebemJSF(Java)com EclipseIDE. Descriçãodosoftware: EclipseéumaIDEparadesenvolvimentoJava,porémsuportaváriasoutraslinguagensapartir depluginscomoC/C++,PHP,ColdFusion,Python,ScalaeKotlin.Elefoi feitoemJavaesegue omodeloopensourcededesenvolvimentodesoftware. ATIVIDADEPRÁTICA3 Atividadeproposta: ImplementarumpequenoprojetoparacriaçãodeumformulárioutilizandoJavaServerFacese ManagedBeanparacadastrodenomedeusuárioe, utilizandoArrayList, imprimir na telado navegador onomecadastrado.Oprojetodeveutilizar linguagemCSSparaestilizaçãodos campos. Objetivos: CompreendereutilizarJavaServerFaces,ManagedBeanseArrayListparainserçãodenome deusuáriosnumalistadenomeseexibirnonavegador,nomomentodesuainserção,onome inserido. Procedimentosparaarealizaçãodaatividade: Para realização dessa atividade, será necessário fazer uso do ManagedBeans. Nesse momento, utilizaremosabean@Namede@RequestScoped.Épreciso frisarqueaprimeira, substituiua@ManagedBeanquefoidescontinuada. 1-Crieumnovoprojeto,semelhanteàconstruçãorealizadanasatividadesanteriores.Váem File>New>DynamicWebProject. 2-DêonomedeCadastroUsuariosaoprojeto,marqueocampo“TargetRuntime”comWidlfly 23.0e, emseguida, nocampo “Configuraration”, seteparaaopçãoJavaServer Facesv2.3 Project. 3-Avanceatéatelaquemostraocampo“JSFImplementationLibrary”poisdeixaremosesse campomarcado coma opção “Disable LibraryConfiguration”. Isso, porque copiaremos a biblioteca java.faces-2.3.0.jar para a pasta src/webapp/WEB-INF/lib, como nos projetos anteriores. 4- Agora, vamos criar a pasta css dentro de src/webapp/ e, dentro da pasta css, criaremos o arquivo main.css. 5- Em seguida, ainda na pasta src/webapp/ vamor criar o arquivo XHTML com nome cadastro.xhtml, clicando com o botão direito sobre a mencionada pasta, New, HTMLFile. Na tela que surge, você deverá substituir o nome do arquivo para cadastro.xhtml e, em seguida, clicar no botão Next. Na lista de templates que aparece, escolha a opção New XHTML File (1.0 transitional). Não esqueça de alterar a linha do elementodo arquivo para:6- No arquivo cadastro.xhtml, você deverá construir um código, que deverá contar com apenas umcampo para inserção e nome. 7- Agora é a hora de construir estilo de página para o seu arquivo. Vá para o arquivo main.css e, utilizando as propriedades de seu interesse, formate o seu campo utilizando recursos de cores, tamanhos, fontes e etc. 8- Crie agora um arquivo de classe java em seu projeto. Mas antes, é necessário criar um pacakge. Para isso, vá para JavaResources, src/main/java, clique com o botão direito sobre essa opção Other. Na janela que abrirá, pesquise no campo Wizards pelo termo package, como na imagem a seguir: 9- Na tela seguinte, você poderá definir um nome. Então, utilize br.com.cadUser. Clique em Finish e, em cima do pacote criado, clique com o botão direito do mouse, New, Class dê o nome Pessoa no campo que aparecerá. Não altere nenhuma outra configuração. Veja: 10-Araizdediretóriodeveráficardaseguinteforma: 11-Finalmente,crieocódigodaclasse,umatributonomedotipoprivadoeumatributoprivado dotipoArrayList,paraarmazenarosnomesdigitados.Nãoesqueçadecriarosmétodosgetters esettersdeambososatributos. Checklist: 1-AmbientededesenvolvimentoEclipse, JDK, pacoteeWildFlydevidamenteconfiguradoe funcionando. 2-Criaçãodeumprojetoeorganizaçãodosarquivosepastascriados. 3-Downloadeconfiguraçãodabiblioteca javax.faces-2.3.0.jar noprojeto, parautilizaçãodo framework JavaServer Faces. 3- Criação de arquivo XHTML e construção do projeto para criação de um formulário com um campo para preenchimento de nome. 4- Criação de um pacote. 5- Criação de uma pasta css e do arquivo main.css para codificação da folha de estilo utilizada no projeto. 6- Criação de um arquivo de classe java para compor o back-end do projeto. 7- Utilização dos principais elementos javaServer Faces para construção de um formulário simples de contato. 8- Utilizar notações bean @Named e @RequestScoped para funcionamento do projeto. Resultados da aula prática: Aluno, você deverá entregar: Criação, estrutura, organização e codificação de um miniprojeto de página web com formulário contando com um campo para preenchimento de nome. O referido formulário deverá exibir o nome digitado logo abaixo, utilizando ArrayList que deverá ser implementado com framework JavaServer faces de forma integrada ao CSS para estilização do referido formulário. Além disso, será necessário empregar notações de ManagedBean no projeto e configurar o chamamento do framework mencionado na URL a ser digitada no navegador, incluindo o padrão de mapeamento, o URL Mapping Patterns que deve ser configurado no momento de criação do projeto. Referências: Criando e configurando um proejto web- JSF 2, Primefaces 3 e CDI. Disponível em: <https://www.devmedia.com.br/criando-e-configurando-um-projeto-web-jsf-2-primefaces-3-e cdi/25251#:~:text=Para%20configurar%2C%20clique%20com%20o,em%20OK%2C%20confirm e%20figura%208.>. Acesso em: 18, agosto de 2022. ROTEIRODEAULAPRÁTICA4 Unidade:Digiteaqui Aula(WhiteLabel)/Seção(KLS):Digiteaqui SOFTWARE ☒Software/☐Acessoon-line ☐Pago/☒NãoPago Infraestrutura: Computador; SoftwaredeambientededesenvolvimentoparacodificaçãodepáginaswebemJSF(Java)com EclipseIDE. Descriçãodosoftware: EclipseéumaIDEparadesenvolvimentoJava,porémsuportaváriasoutraslinguagensapartir depluginscomoC/C++,PHP,ColdFusion,Python,ScalaeKotlin.Elefoi feitoemJavaesegue omodeloopensourcededesenvolvimentodesoftware. ATIVIDADEPRÁTICA4 Atividadeproposta: Configurar a integração da ferramenta Eclipse como sistema de controle de versão git juntamentecomaplataformadehospedagemdecódigofonteearquivos,github. Objetivos:-Compreenderosdetalhesnecessáriosparaconfiguraçãoeintegraçãodaferramentaeclipse comsistemadecontroledeversãoGiteaplataformadehospedagemdecódigo-fonte,github.-Realizarasetapasdecriaçãoderepositóriolocaleremotoerealizar registrosdecommitsde alteraçãodessesrepositórios.-ConfigurarrepositóriogitemprojetosjácriadosnaIDEEclipse. Procedimentosparaarealizaçãodaatividade: Para realização dessa atividade, será necessário ter configurado o ambiente de desenvolvimento Eclipse comprojetos já criados. Alémdisso, é importante ter conta na plataformagithubcriada. 1-Vamos criar a conta na plataforma github. Incialmente, acesse a plataforma em: <https://github.com/>e,emseguida,cliquenobotãoSignupqueapareceránatela. 2-Nasequênciaseránecessáriopreencheralgunscamposcomo: email, senha, nome de usuário, que não pode conter espaços e/ou caracteres especiais como “ç”, e na última pergunta, você pode teclar a letra “n” para não receber mensagens da plataforma. Basta seguir as etapas seguintes. Você deve inserir um e-mail válido pois, possivelmente, você receberá uma confirmação por e-mail, em forma de código ou link, para ativar sua conta. 3- Agora, vamos abrir o projeto no Eclipse que pretendemos controlar com git. Em seguida, acesse sua conta no github e crie um novo repositório. Vá no botão New e crie um repositório com o nome Atividade-JSF. No campo Description coloque algo como “Projeto de aplicação Java com Eclipse.” Marque a opção “Add a README file” e clique sobre o botão “Create repository”. 4- Faça o upload da pasta do seu projeto para o repositório criado. Sugere-se arrastar a pasta para cima do espaço dedicado ao upload na página do git. Veja: 5- Depois de soltar a pasta do projeto sobre a área, aparecerá todos os arquivos que foram carregados e será possível realizar o primeiro commit, na área Commit changes. O commit, em linhas gerais, deve ser escrito para registrar quais alterações foram realizadas no repositório. Neste caso, acabamos de inserir arquivos de código do projeto ao repositório. 6- Depois de escrever o texto do commit, basta clicar no botão Commit changes. 7- Agora podemos nos desconectar da conta no github pois o processo de configuração, agora, acontece no eclipse. Abra a ferramenta. 8- Remova o projeto completamente de sua IDE, e, em seguida, faça a configuração dos repositório do git. Para isso, vá em Window > Show View > Other > Git > Git Repositories. 9- Na janela que abrirá, vamos escolher a opção Clone a Git repository. Será necessário copiar a URL do repositório criado. Veja um exemplo: <https://github.com/leonardossrocha/Atividade JSF>. 10- Depois que o repositório for clonado, será necessário clicar com o botão direito do mouse sobre o nome do repositório e clicar na opção Import Projects. 11- Para finalizar, vamos fazer uma pequena alteração no repositório, vamos inserir um comentário em um dos arquivos do projeto. Sugere-se a inclusão de um comentário no arquivo cadastro.xhtml, logo depois do elemento , dessa maneira:

Cadastro de usuário

12- Clique com o botão direito do mouse sobre o projeto é escolha a opção Team > Commit. Paracerá uma tela e nela, haverá uma área escrita Commit Message. Nela, você insere a mensagem de registro da alteração realizada. 13- Por fim, é necessário escolher o botão Commit and Push, para commitar e já enviar as alterações para o repositório remoto. Caso você não tenha internet, é possível realizar só o commit localmente, escolhendo a opção Commit. Será solicitado as credenciais de acesso á conta, basta informar e clicar em Log In. Checklist: 1- Criar a conta na plataforma github. 2- Iniciar processo de configuração do Git na IDE eclipse. 3- Criar um repositório remoto e carregar os arquivos do projeto para ele. 4- Clonar e importar o repositório na IDE Eclipse. 5- Realizar alterações no código executar um commit com push para o repositório remoto. Resultados da aula prática: Aluno, você deverá entregar: Aplicação com repositório remoto devidamente criado. Código da aplicação commitada, clone para máquina local feito e primeiro commit e push direto da IDE Eclipse para a plataforma github. Referências: Git no Eclilpse. Disponível em: <https://git-scm.com/book/pt-pt/v2/Appendix-A%3A-Git-em Outros-Ambientes-Git-no-Eclipse>. Acesso em: 18, agosto de 2022

Aula Prática Programação web para Back-End