Programação Web

Programação Web Roteiro Aula Prática Unidade 4 Seção 3 2 ROTEIRO DE AULA PRÁTICA NOME DA DISCIPLINA Programação Web Unidade 4 Seção 43 OBJETIVOS Definição dos objetivos da aula prática 1 Criar uma página frontend com um formulário contendo um campo para inserção da data de nascimento e um botão para realizar consulta de signo 2 Desenvolver uma página frontend que contenha o resultado da consulta ao signo zodiacal 3 Desenvolver a lógica necessária para realizar a consulta a um arquivo XML que contenha as informações de cada signo 4 Desenvolver a estilização das páginas formulário e resultado 5 Testar a aplicação INFRAESTRUTURA Instalações Laboratório de Informática Materiais de consumo Descrição Quantid de materiais por procedimentoatividade Não se aplica Software Sim x Não Em caso afirmativo qual Visual Studio Code Pago Não Pago X Tipo de Licença Gratuita Descrição do software VSCode O Visual Studio Code é um editor de códigofonte desenvolvido pela Microsoft para Windows Linux e macOS Ele inclui suporte para depuração controle de versionamento Git 3 incorporado realce de sintaxe complementação inteligente de código snippets e refatoração de código Equipamento de Proteção Individual EPI Não se aplica PROCEDIMENTOS PRÁTICOS ProcedimentoAtividade Nº 1 Atividade proposta Desenvolver um uma página web para descobrir o seu signo de acordo com a sua data de nascimento A página inicial irá conter um formulário para que o usuário insira sua data de nascimento e clique em um botão que irá redirecionalo para uma outra página contendo as principais informações do seu signo zodiacal Para a estilização do conteúdo será necessário utilizar Bootstrap e folhas de estilo próprias Procedimentos para a realização da atividade Para a realização desta aula pratica você deverá utilizar o software VSCODE Ademais você precisará possuir também o XAMPP instalado em seu computador Faça o download e instale na sua máquina httpswwwapachefriendsorgdownloadhtml 1 Localize o local onde o xampp foi instalado no seu computador e crie uma pasta com o nome Project dentro do caminho xampphtdocs 2 Abra o VsCode e escolha a opção Open Folder Escolha a pasta que acabou de criar e abra o projeto Ou você pode simplesmente arrastar a pasta até o VSCode e ela abrira como um projeto nele Crie a seguinte estrutura no seu projeto assets css stylecss imgs js layouts headerphp 4 indexphp showzodiacsignphp signosxml 3 Primeiramente monte o arquivo XML signosxml Para isso crie a sua estrutura da seguinte forma xml version10 signos signo dataInicio2103dataInicio dataFim2004dataFim signoNomeÁriessignoNome descricaoLorem ipsum dolor sit ametdescricao signo 4 Preencha manualmente este arquivo XML com as informações de todos os signos zodiacais Você pode consultar a seguinte pagina para tal httpsptwikipediaorgwikiSignoastrolC3B3gico 5 Crie uma estrutura básica HTML no arquivo indexphp você pode fazer isso automaticamente digitando e pressionando enter 6 Agora mova toda a parte do topo até o final da tag head para um outro arquivo chamado headerphp 7 Adicione ao arquivo headerphp o link para o Bootstrap link hrefhttpscdnjsdelivrnetnpmbootstrap520distcssbootstrapmincss relstylesheet integritysha384gH2yIJqKdNHPEq0n4MqaHGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNlvI1Bx crossoriginanonymous 8 Vamos voltar ao arquivo indexphp Inclua nele o arquivo headerphp da seguinte forma php includeheaderphp 9 Inclua um título para a página e se desejar você pode incluir outros elementos como uma logo e um menu 10 Agora inclua um formulário com o campo datanascimento Este formulário deverá ser do tipo POST Utilize as classes bootstrap para a formatação dos elementos do formulário As informações deste formulário serão enviadas à página que iremos criar a seguir portanto lembrese de incluir o atributo action dentro do seu formulário 5 form idsignoform methodPOST actionshowzodiacsignphp 11 Agora vamos implementar o arquivo showzodiacsignphp Primeiramente inclua nele o arquivo headerphp php includeheaderphp 12 Crie uma variável para receber o valor da data de nascimento da página anterior com o formulário datanascimento POSTdatanascimento 13 Crie também uma variável que irá manipular o arquivo XML que criamos anteriormente Para isto usaremos a função simplexmlloadfile do PHP signos simplexmlloadfilesignosxml 14 Agora vamos iniciar com a parte mais simples Vamos iterar as informações deste arquivo xml Imagine que a variável signos contém uma lista de signos e cada tag com por exemplo dataInicio pode ser acessada a partir do objeto signo da seguinte forma signodataInicio 15 Agora que temos uma lista com todos os signos e suas informações podemos criar a lógica para que seja apresentado ao usuário somente o signo que contem a datanascimento dentro do seu range de datas dataInicio dataFim 16 Dica note que a data de nascimento contém o ano de nascimento do usuário porem a dataInicio e dataFim do nosso XML não contém o ano portanto será necessário criar algumas funções para transformar as datas inicio e fim em datas validas Isso é necessário para que seja possível verificar se a datanascimento está dentro do range de maneira mais fácil 17 Se desejar insira um link para voltar à página inicial Você também pode optar por realizar a validação da data inserida pelo usuário através do uso de HTML5 ou Javascript 18 Crie a estilização da página como preferir procurando utilizar ao máximo os recursos do Bootstrap 6 Figura 1 Formulário Fonte Elaborada pelo autor Figura 2 Resultado Fonte Elaborada pelo autor Checklist 1 Utilização de um editor de código sugerido neste documento 2 Criação do arquivo XML que contém as informações de cada signo 7 3 Criação da página inicial contendo um formulário com um campo para a data de nascimento 4 Criação de uma página que apresente como resultado do signo do usuário 5 Criação da uma lógica para a leitura do arquivo XML 6 Criação da lógica de adaptação de datas para que seja possível verificar em qual range a data de nascimento do usuário se encaixa 7 Teste da aplicação verificando o seu funcionamento RESULTADOS Resultados da aula prática Uma pasta com arquivos que contenha a estrutura do projeto como informado na descrição da atividade ou seja 3 arquivos com extensão PHP que contenham o topo das páginas a página inicial e o resultado a ser obtido um arquivo de estilização com extensão CSS e um arquivo XML com as informações dos signos