ROTEIRO DE AULA PRÁTICA
CLIQUE AQUI! PARA VISUALIZAR O MANUAL!
Favor conferir se o manual acima está idêntico ao que precisa, pois existe outro trabalho com o mesmo TITULO no site com conteúdos diferentes.
NOME DA DISCIPLINA: Programação Web
Unidade 4
Seção 4.3
OBJETIVOS Definição dos objetivos da aula prática:
1. Criar uma página front-end 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 front-end 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 procedimento/atividade 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ódigo-fonte 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 Procedimento/Atividade 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á redireciona-lo 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: https://www.apachefriends.org/download.html. 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 — style.css — imgs — js – layouts — header.php
4
– index.php – show_zodiac_sign.php – signos.xml 3. Primeiramente monte o arquivo XML “signos.xml”. Para isso, crie a sua estrutura da seguinte forma: <?xml version=”1.0″?> <signos> <signo> <dataInicio>21/03</dataInicio> <dataFim>20/04</dataFim> <signoNome>Áries</signoNome> <descricao>Lorem ipsum dolor sit amet.</descricao> /signo> 4. Preencha manualmente este arquivo XML com as informações de todos os signos zodiacais. Você pode consultar a seguinte pagina para tal: https://pt.wikipedia.org/wiki/Signo_astrol%C3%B3gico. 5. Crie uma estrutura básica HTML no arquivo index.php (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 header.php. 7. Adicione ao arquivo header.php o link para o Bootstrap: <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx” crossorigin=”anonymous”> 8. Vamos voltar ao arquivo index.php. Inclua nele o arquivo header.php da seguinte forma: <?php include(‘header.php’); ?> 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 “data_nascimento”. 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 lembre-se de incluir o atributo “action” dentro do seu formulário.
5
<form id=”signo-form” method=”POST” action=”show_zodiac_sign.php”> 11. Agora vamos implementar o arquivo “show_zodiac_sign.php”. Primeiramente inclua nele o arquivo “header.php”: <?php include(‘header.php’); ?> 12. Crie uma variável para receber o valor da data de nascimento da página anterior com o formulário. $data_nascimento = $_POST[‘data_nascimento’]; 13. Crie também uma variável que irá manipular o arquivo XML que criamos anteriormente. Para isto usaremos a função simplexml_load_file do PHP: $signos = simplexml_load_file(“signos.xml”); 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: $signo->dataInicio. 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 “data_nascimento” 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 “data_nascimento” 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.
Avaliações
Não há avaliações ainda.