Aula prática Programação Web

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:
Quantid. de materiais por
Descrição
Não se aplica
Software:
procedimento/atividade
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
2
3
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. – assets — css — style.css — imgs — js – layouts — header.php
Crie a seguinte estrutura no seu projeto:
projeto nele.
o projeto. Ou você pode simplesmente arrastar a pasta até o VSCode e ela abrira como um
2. Abra o VsCode, e escolha a opção “Open Folder”. Escolha a pasta que acabou de criar e abra
“Project” dentro do caminho xampp\htdocs\.
1. Localize o local onde o xampp foi instalado no seu computador e crie uma pasta com o nome
Procedimentos para a realização da atividade:
Atividade proposta:
PROCEDIMENTOS PRÁTICOS
Não se aplica.
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.
Procedimento/Atividade Nº 1
Equipamento de Proteção Individual (EPI):
código.
incorporado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de
– 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:



21/03
20/04
Áries
Lorem ipsum dolor sit amet.
/signo>
4. Preencha manualmente este arquivo XML com as informações de todos os signos zodiacais.
Você
pode
consultar
a
seguinte
pagina
https://pt.wikipedia.org/wiki/Signo_astrol%C3%B3gico.
para tal:
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:
integrity=”sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx” crossorigin=”anonymous”>
8. Vamos voltar ao arquivo index.php. Inclua nele o arquivo header.php da seguinte forma:

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
4
lembre-se de incluir o atributo “action” dentro do seu formulário.