Relatório de Aula Prática - Programação WEB

Prévia do material em texto

ITÁPOLIS - SP 
2024 
 
 
 
 
 
UNIVERSIDADE ANHANGUERA UNIDERP 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
EDER PABLO DO CARMO SILVA 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUPERIOR EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS 
RELATÓRIO DE AULA PRÁTICA – PROGRAMAÇÃO WEB 
 
 
 
 
ITÁPOLIS - SP 
2024 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
PORTIFÓLIO AULA PRÁTICA: 
PROGRAMAÇÃO WEB 
 
Produção textual individual apresentada como 
Relatório de Aula Prática referente a disciplina: 
PROGRAMAÇÃO WEB, do curso de 
graduação em ANÁLISE E 
DESENVOLVIMENTO DE SISTEMAS. 
 
 
UNIVERSIDADE ANHANGUERA UNIDERP 
 
 
 
EDER PABLO DO CARMO SILVA 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUMÁRIO 
1.INTRODUÇÃO..........................................................................................3 
2.OBJETIVO E DESENVOLVIMENTO........................................................4 
 2.1. Instalação das Ferramentas.......................................................................4 
 2.2. Estruturação do Projeto .............................................................................4 
 2.3. Desenvolvimento dos Arquivos .................................................................4 
 2.4.Implementação da Lógica em PHP ............................................................4 
 2.5. Teste da Aplicação.....................................................................................5 
3.ARQUIVOS................................................................................................6 
 3.1 Arquivo Style.css ........................................................................................6 
 3.2 Arquivo Footer:............................................................................................7 
 3.3 Arquivo Header:...........................................................................................7 
 3.4 Arquivo Index:..............................................................................................7 
 3.5 Arquivo show_zodiac_sign.php ..................................................................8 
 3.6 Arquivo Signos.xml .....................................................................................9 
4.RESULTADOS........................................................................................10 
5.CONCLUSÃO..........................................................................................11 
6.BIBLIOGRAFIA.......................................................................................12
 3 
1 . INTRODUÇÃO 
A astrologia é uma prática que atravessa milênios, que desperta o 
interesse mundial por suas profundas raízes culturais e por sua capacidade de 
oferecer insights sobre personalidade e até mesmo destino. Cada signo do zodíaco 
possui características distintas que nos ajudam a entender o comportamento e os 
relacionamentos entre as pessoas. A interpretação dos astros, que conecta 
observações astronômicas e tradições esotéricas, permanece relevante, adaptando-
se a um contexto moderno. 
Este projeto visa para criar uma página web interativa que calcula o signo 
zodiacal a partir da data de nascimento. Tal empreendimento exige uma abordagem 
cuidadosa tanto na apresentação ou em relação a funcionalidade. A página inicial 
deve ser simples e intuitiva, com um formulário para que o usuário possa inserir sua 
data de nascimento. Após a inserção dos dados, ao clicar em um botão, o usuário 
será direcionado a uma página com informações mais detalhadas, específicas sobre 
seu signo. 
Na intenção de apresentar também uma experiência razoável ao usuário, 
o uso do framework Bootstrap é fundamental, pois oferece um design responsivo e 
moderno. O Visual Studio Code (VSCode) é a ferramenta ideal para o 
desenvolvimento, proporcionando um ambiente robusto e eficiente, enquanto o 
XAMPP facilita a hospedagem local da aplicação. O projeto envolve várias etapas, 
como a manipulação de dados em PHP, estilização com CSS e a estruturação da 
interface em HTML. Com a utilização precisa destas tecnologias, nosso projeto cria 
uma aplicação funcional, permitindo aos usuários que descubram seu signo de 
maneira interativa, consolidando o aprendizado adquirido no decorrer das aulas e 
através das ferramentas de desenvolvimento web, o que também torna a astrologia 
mais acessível e próxima do contexto diário do usuário. 
 
 
 4 
2 . OBJETIVOS E DESENVOLVIMENTO 
Nosso objetivo é desenvolver uma aplicação web que permita aos 
usuários descobrir seu signo zodiacal a partir da data de nascimento. O projeto será 
dividido em várias etapas, para garantir uma implementação bem-sucedida e uma 
experiência de usuário satisfatória. 
 
2.1. Instalação das Ferramentas: 
 O primeiro passo consiste na instalação e configuração das ferramentas 
necessárias. O XAMPP foi instalado para fornecer um servidor local Apache, 
permitindo rodar os arquivos PHP e HTML de forma eficiente. O Visual Studio Code 
(VSCode) foi escolhido como editor de código, devido à sua interface amigável e 
suporte a diversas extensões, facilitando a codificação e depuração do projeto. 
 
2.2. Estruturação do Projeto: 
 Após a instalação das ferramentas, a estrutura do projeto foi organizada 
dentro do diretório htdocs do XAMPP, onde todos os arquivos do projeto serão 
armazenados. Criei uma estrutura de pastas clara para organizar os arquivos de 
maneira eficiente. Foi criada a pasta assets para armazenar os arquivos CSS, 
JavaScript e imagens. Além disso, criei uma pasta layouts para arquivos de 
estrutura, como o header.php, e mantive os arquivos principais, como o index.php e 
show_zodiac_sign.php, junto com o arquivo de dados signos.xml. 
 
 2.3. Desenvolvimento dos Arquivos: 
 Para garantir a funcionalidade da aplicação, desenvolvi o arquivo 
signos.xml, que contém as informações dos signos do zodíaco, como o nome, as 
datas de início e término de cada signo e uma breve descrição. Esses dados foram 
organizados manualmente com base em fontes confiáveis, como a Wikipedia. No 
front-end, utilizei o framework Bootstrap para garantir que a interface fosse 
responsiva e atraente, complementando com CSS personalizado para um toque 
único. 
 
 
 
 
 5 
 2.4. Implementação da Lógica em PHP: 
 A principal funcionalidade da aplicação foi implementada em PHP. 
Desenvolvi uma função para carregar e interpretar o arquivo XML, além de uma 
lógica para comparar a data de nascimento do usuário com os intervalos de datas de 
cada signo. Como algumas datas no XML não incluem o ano, foi necessário criar 
funções adicionais para ajustar corretamente os intervalos. Após a verificação da 
data, o sistema exibe o signo correspondente e suas informações. 
 
 2.5. Teste da Aplicação: 
 Por fim, testei a aplicação localmente no servidor Apache, acessando o 
projeto no navegador para verificar se tudo estava funcionando corretamente. 
Durante os testes, revisei o código para garantir que as datas estivessem sendo 
corretamente interpretadas e que o resultado fosse exibido de maneira precisa e 
satisfatória ao usuário. 
 
 
 
 
 
 6 
3 . ARQUIVOS 
3.1 Arquivo Style.css 
 
body { 
 background-color: #e9ecef; 
 font-family: 'Arial ', sans-serif; 
 color: #343a40; 
} 
h1 { 
 margin-bottom: 20px; 
 text-align: center; 
 font-size: 2.5rem; 
 color: #6f42c1; /* Cor do título */ 
} 
.container { 
 max-width: 600px; 
 background-color: #32a0a6; 
 border-radius: 10px; 
 padding: 20px; 
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
 margin: auto; 
} 
.mb-3 { 
 margin-bottom: 1.5rem; 
} 
.form-label { 
 font-weight: bold; 
 margin-bottom: 0.5rem; 
} 
.form-control { 
 border: 1px solid #ced4da; 
 border-radius: 5px; 
 transition: border-color 0.3s; 
} 
.form-control:focus {border-color: #6f42c1; /* Cor ao focar no campo */ 
 box-shadow: 0 0 5px rgba(111, 66, 193, 0.5) ); 
} 
8 
 
.btn { 
 background-color: #6f42c1; /* Cor do botão */ 
 border: none; 
 border-radius: 5px; 
 transition: background-color 0.3s; 
} 
.btn:hover { 
 background-color: #5a32a2; /* Cor do botão ao passar o mouse */ 
} 
footer { 
 text-align: center; 
 margin-top: 20px; 
 font-size: 0.9rem; 
 color: #6c757d; 
} 
 
 
 
 
 7 
3.2 Arquivo footer: 
 
 
 © Descubra Seu Signo. Todos os direitos 
reservados. 
 
 Instagram | 
 Facebook | 
 Twitter 
 
 
 
 
 
 
 
 
 
 
 Qual seu signo? 
 
 
 
 
 
 
 
 
 
 Bem-vindo ao mundo dos Signos! Clique aqui e Descubra seu signo! 
 Saiba qual é o seu signo do zodíaco com base na sua data de 
nascimento. 
 
 
 
 
 
 3.4 Arquivo Index: 
 
 
 Qual é o seu signo? 
 
 
 Informe sua data de 
nascimento 
 
 8 
 
 
 Ver meu signo 
 
 
 
 
 
 
3.5 Arquivo show_zodiac_sign.php 
 
 
 
 O seu signo é: 
 signo as $signo) { 
 $data_inicio = DateTime::createFromFormat('d/m', (string)$signo->dataInicio); 
 $data_fim = DateTime::createFromFormat('d/m', (string)$signo ->dataFim); 
 $data_inicio->setDate($data_nascimento->format('Y'), $data_inicio- 
>format('m'), $data_inicio->format('d')); 
 $data_fim->setDate($data_nascimento->format('Y'), $data_fim->format('m'), 
$data_fim->format('d')); 
 
 if ($data_inicio > $data_fim) { 
 $data_fim->modify('+1 year'); 
 if ($data_nascimento $data_fim) { 
 continue; 
 
} 
 } 
 
 if ($data_nascimento >= $data_inicio && $data_nascimento {$signo->signoNome}"; 
 echo "{$signo->descricao}"; 
 $signo_encontrado = true; 
 break; 
 } 
 } 
 if (!$signo_encontrado) { 
 echo "Não foi possível determinar seu signo. Verifique a 
data informada."; 
 } 
 ?> 
 
 Voltar 
 
 
 
 
 
 
 
 9 
3.6 Arquivo Signos.xml 
 
 
 
 
 21/01 
 18/02 
 Aquário 
 
 
 19/02 
 20/03 
 Peixes 
 
 
 21/03 
 20/04 
 Áries 
 
 
 21/04 
 20/05 
 Touro 
 
 
 21/05 
 20/06 
 Gêmeos 
 
 
 21/06 
 22/07 
 Câncer 
 
 
 23/07 
 22/08 
 Leão 
 
 
 23/08 
 22/09 
 Virgem 
 
 
 23/09 
 22/10 
 Libra 
 
 
 23/10 
 21/11 
 Escorpião 
 
 
 22/11 
 21/12 
 Sagitário 
 
 
 22/12 
 20/01 
 10 
 Capricórnio 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 11 
4 . RESULTADOS 
 
 
 
 
 
 
 
 
 
 12 
5 . CONCLUSÃO 
 
Concluímos que a criação da aplicação web se comportou da maneira 
esperada o que propiciou um resultado bem sucedido. O objetivo era construir de 
formato agradável e ao mesmo tempo prático, uma aplicação em que os usuários 
pudessem descobrir seu signo zodiacal, inserindo no campo determinado sua data 
de nascimento. 
O processo começou com a escolha e instalação das ferramentas adequadas, 
como o XAMPP, que possibilitou o funcionamento do servidor local, e o VSCode, 
utilizado para a codificação. A organização do projeto, respeitando cada etapa, foi 
uma das etapas mais importantes do mesmo, com a criação de pastas estruturadas 
para armazenar os arquivos de maneira eficiente e garantir que o código pudesse ter 
legibilidade. A lógica programada em PHP, responsável por ler o arquivo XML com 
as informações dos signos, funcionou da maneira esperada, sem anomalias ou 
erros, permitindo assim a correta identificação do signo com base nos dados 
inseridos pelo usuário. Para o design da interface, foi adotado o Bootstrap, que 
garantiu a aparência moderna e uma navegação fluida em diferentes dispositivos. 
Nesse viés, temos que o resultado final foi altamente satisfatório, 
proporcionando não só uma solução funcional, mas também um aprofundamento no 
uso de dados XML e na construção de interfaces responsivas. O aprendizado 
adquirido ao longo de todo o projeto foi satisfatório, e útil pra gente que é aluno e 
que tem a intenção de ingressar e trabalhar nessa área. 
 
 
 
 
 
 
 
 
 
 
 13 
6 . BIBLIOGRAFIA 
Bootstrap: 
Bootstrap. Disponível em: https://getbootstrap.com/. Acesso em: 08 dez. 2024. 
 
CSS: 
MOZILLA. MDN Web Docs - CSS. Disponível em: 
https://developer.mozilla.org/en-US/docs/Web/CSS. Acesso em: 08 dez. 2024. 
 
PHP: 
THE PHP GROUP. PHP Documentation. Disponível em: 
https://www.php.net/manual/en/. Acesso em: 08 dez. 2024. 
 
Visual Studio Code: 
MICROSOFT. Visual Studio Code. Disponível em: https://code.visualstudio.com/. 
Acesso em: 08 dez. 2024. 
 
 
XAMPP: 
DOCUMENTAÇÃO OFICIAL. XAMPP Documentation. Disponível em: 
https://www.apachefriends.org/index.html. Acesso em: 08 dez. 2024.