Roteiro Aula Prática Programação Web
ROTEIRO DE AULA PRÁTICA
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
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 webpara 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 xampp\htdocs\.
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
– 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.
