relatorio_aula_pratica_programacao_web

Prévia do material em texto

UNIVERSIDADE NORTE DO PARANÁ 
 
ENGENHARIA DE SOFTWARE 
LINIKER THIERS SIMÕES SILVA 
 
 
 
 
 
 
 
 
 
 
 
 
RELATÓRIO AULA DA PRÁTICA DE PROGRAMAÇÃO WEB 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Entre Rios – Ba 
2025 
 
Introdução 
O presente relatório refere-se à atividade prática da disciplina de Programação Web, com 
o objetivo de desenvolver um sistema web capaz de identificar o signo do zodíaco de um 
usuário com base em sua data de nascimento. 
 
A atividade buscou integrar os conhecimentos adquiridos ao longo da disciplina, envolvendo 
criação de páginas com formulários, leitura de dados de um arquivo XML via PHP e 
estilização com Bootstrap e CSS. O projeto foi implementado com o auxílio do Visual Studio 
Code e XAMPP, como ambientes de desenvolvimento e execução local. 
 
Para mais detalhes, o repositório do projeto está disponível em: 
https://github.com/LinikerThiers/signos_php 
 
Métodos 
 
Para o desenvolvimento da atividade prática da disciplina de Programação Web, foram 
utilizados conceitos fundamentais do desenvolvimento de aplicações web dinâmicas como 
PHP, Html, Css, e manipulação de arquivos xml. O objetivo principal era implementar uma 
página que permitisse ao usuário descobrir o seu signo do zodíaco a partir da sua data de 
nascimento, realizando o processamento da lógica via PHP e estruturando os dados dos 
signos em um arquivo XML externo. 
 
A construção do projeto seguiu uma abordagem modular e organizada, respeitando a 
estrutura proposta no roteiro da prática. O projeto foi dividido em partes bem definidas: 
formulário de entrada, processamento da lógica, estrutura dos dados XML, layout 
modularizado e estilização com Css/Bootstrap. 
 
 Estrutura de Arquivos e Organização 
 
A estrutura do projeto foi criada conforme solicitado, organizando os arquivos em pastas 
específicas para layout e estilos: 
 
 
 
Essa organização tem como objetivo separar responsabilidades, facilitando a manutenção 
e promovendo boas práticas de desenvolvimento web. 
 
 
 
 
 
 
 
 
 Criação e Estrutura do Arquivo XML 
 
Para representar os dados dos signos, foi criado o arquivo signos.xml. Ele contém a 
estrutura com os seguintes elementos: 
 
 
 
Cada elemento representa um signo do zodíaco com suas respectivas datas de 
início e fim, nome e uma possível descrição. Esse formato facilita a leitura e o 
processamento com PHP usando simplexml_load_file(). 
 
 
 Desenvolvimento da Lógica com PHP 
 
A lógica principal foi desenvolvida no arquivo show_zodiac_sign.php, que recebe a data 
enviada pelo formulário da página index.php e compara essa data com os intervalos 
definidos no XML. Para isso, foi utilizada a classe DateTime do PHP, permitindo realizar a 
comparação precisa entre as datas. 
 
Como o XML não possui o ano nos campos dataInicio e dataFim, foi necessário adaptar 
essas datas dinamicamente para o mesmo ano da data de nascimento inserida pelo usuário, 
garantindo assim uma comparação válida e coerente. Também foi implementada uma lógica 
especial para lidar com signos que cruzam o final e o início do ano, como Capricórnio (22/12 
a 20/01), utilizando a função modify('+1 year'). 
 
Essa abordagem permite determinar exatamente qual signo corresponde à data inserida, 
de maneira eficiente e reutilizável. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Implementação do Formulário e Estrutura da Página Inicial 
 
A página index.php foi responsável por apresentar ao usuário o campo para inserção da 
data de nascimento e o botão de envio. O formulário foi criado com os seguintes elementos: 
 
 
 
Utilizou-se o método POST para maior segurança e o formulário foi estilizado com Bootstrap, 
tornando o layout mais agradável e responsivo. 
 
 Modularização com header.php e footer.php 
 
Para evitar repetição de código e facilitar a organização do projeto, as seções comuns às 
páginas, como o cabeçalho e o rodapé, foram movidas para arquivos separados 
(header.php e footer.php) dentro da pasta layout. Esses arquivos foram incluídos nas 
páginas por meio da função include() do PHP. 
 
Essa técnica permite que qualquer modificação no layout principal do site (como títulos, 
menus ou rodapé) seja feita em um único lugar, refletindo em todas as páginas 
automaticamente. 
 
 Estilização com CSS e Bootstrap 
 
Para complementar a formatação do Bootstrap, foi criado um arquivo de estilo 
personalizado style.css dentro da pasta assets/css. Nele foram definidos estilos adicionais, 
como: 
 
1. Fundo claro e container centralizado 
2. Botões com cantos arredondados 
3. Efeitos de foco em inputs 
4. Tipografia limpa e moderna com Google Fonts 
 
Essa personalização proporcionou uma identidade visual ao projeto e melhorou a 
experiência do usuário final. 
 
 
 
 
 
Resultados 
 
A atividade foi concluída com sucesso, resultando em um site funcional que, recebe a data 
de nascimento do usuário via formulário, processa a data comparando com os intervalos 
definidos no XML, exibe corretamente o signo correspondente e uma breve descrição e 
permite retornar à página inicial para uma nova consulta. 
 
O sistema foi testado com diversas datas e funcionou conforme esperado. A organização 
modular do código contribuiu para uma estrutura limpa e de fácil manutenção. 
 
 
Conclusão 
 
A realização deste projeto proporcionou uma experiência prática completa de 
desenvolvimento web, unindo conceitos de front-end com foco na linguagem PHP. Foi 
possível aplicar os aprendizados sobre manipulação de formulários, leitura e uso de 
arquivos XML, modularização de páginas, estilização com CSS e Bootstrap, estruturação 
organizada de diretórios e arquivos. 
 
O exercício contribuiu para o desenvolvimento técnico, promovendo a consolidação de boas 
práticas e oferecendo uma visão clara de como construir aplicações web dinâmicas e 
funcionais. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
show_zodiac_sign.php: 
 
 
header.php: 
 
 
 
footer.php: 
 
 
 
 
 
 
site: