Portifólio 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 NOME DA DISCIPLINA Programação Web Unidade 4 Nome Luis HTML Página Inicial e Resultado Estrutura do documento Define o layout básico da página Formulário Coleta a data de nascimento do usuário na página inicial Div resultado Exibe o signo e a descrição na página de resultado adaptando o conteúdo dinamicamente CSS Estilização Cores e fontes Melhora a aparência visual usando um design moderno Botão interativo Oferece feedback visual ao interagir efeito hover Layout centralizado Mantém a página organizada e fácil de navegar XML Base de Dados Signos e datas Armazena os dados de cada signo nome intervalo de datas e descrição Estrutura hierárquica Facilita a leitura e o processamento dos dados pelo JavaScript JavaScript Carregar XML Lê e interpreta o arquivo com os dados dos signos Identificar signo Compara a data de nascimento inserida pelo usuário com os intervalos de cada signo Atualizar página Insere o resultado na área resultado da página de forma dinâmica Este projeto tem como objetivo criar uma aplicação interativa que permite aos usuários descobrir seu signo zodiacal com base na sua data de nascimento A aplicação é composta por uma página inicial onde o usuário insere sua data de nascimento e uma página de resultado que apresenta o signo correspondente e uma descrição detalhada sobre suas características O projeto utiliza diversas tecnologias para funcionar de maneira integrada e eficiente O HTML fornece a estrutura básica das páginas garantindo que elementos como o formulário e o resultado sejam exibidos corretamente O CSS aprimora o design das páginas tornando a interface visualmente agradável e intuitiva com cores suaves e um layout organizado O uso de estilos garante que a experiência do usuário seja funcional e agradável A lógica da aplicação é implementada em JavaScript que desempenha um papel fundamental Ele é responsável por carregar o arquivo XML onde estão armazenadas as informações dos signos como nomes intervalos de datas e descrições O código compara a data de nascimento inserida pelo usuário com os intervalos de cada signo e em seguida atualiza dinamicamente a página de resultado para mostrar o signo e suas características O arquivo XML por sua vez serve como um banco de dados leve e acessível contendo todos os detalhes necessários para determinar o signo Além disso o projeto destacase pela sua simplicidade e adaptabilidade Ele é projetado para ser utilizado em qualquer navegador moderno garantindo acessibilidade aos usuários A aplicação também é modular permitindo que novas funcionalidades como imagens ou informações adicionais sobre os signos sejam facilmente adicionadas no futuro Esta aplicação é uma combinação de funcionalidade design e interatividade proporcionando uma maneira divertida e informativa de explorar os mistérios da astrologia CÓDIGOS DOCTYPE html html langptBR head meta charsetUTF8 meta nameviewport contentwidthdevicewidth initialscale10 titleDescubra Seu Signotitle link relstylesheet hrefstylecss head body div classcontainer header h1Descubra Seu Signoh1 pInforme sua data de nascimento e descubra os mistérios do seu signop header main form actionresultadohtml methodGET label fornascimentoDigite sua data de nascimentolabel input typedate idnascimento namenascimento required button typesubmitDescobrirbutton form main footer p 2025 Astrologia para Todosp footer div body html Estilo geral body fontfamily Arial sansserif margin 0 padding 0 backgroundcolor f4f4f9 color 333 Container principal container maxwidth 600px margin 0 auto padding 20px textalign center background fff boxshadow 0 4px 8px rgba0 0 0 01 borderradius 8px Cabeçalho header marginbottom 20px header h1 fontsize 2em color 5c3b91 Carregar e processar o arquivo XML fetchsignosxml thenresponse responsetext thendata const parser new DOMParser const xml parserparseFromStringdata applicationxml identificarSignoxml function identificarSignoxml const params new URLSearchParamswindowlocationsearch const nascimento new Dateparamsgetnascimento const signos xmlgetElementsByTagNamesigno let signoEncontrado null for let signo of signos const nome signogetElementsByTagNamenome0textContent const descricao signogetElementsByTagNamedescricao0textContent const inicioStr signogetElementsByTagNameinicio0textContent const fimStr signogetElementsByTagNamefim0textContent const inicio new DatenascimentogetFullYear inicioStr const fim new DatenascimentogetFullYear fimStr if fim inicio fimsetFullYearfimgetFullYear 1 if nascimento inicio nascimento fim signoEncontrado nome descricao break