Prévia do material em texto

2
FACULDADE ANHANGUERA – VALPARAÍSO
Análise e Desenvolvimento de Sistemas 
ÍTALLO GUSTAVO DANTAS DE LIMA – 3584019602
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA 
PROGRAÇÃO WEB
Valparaíso, GO
2024
ÍTALLO GUSTAVO DANTAS DE LIMA – 3584019602
 
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA 
PROGRAMAÇÃO WEB
Trabalho de portfólio apresentado como um instrumento avaliativo para a obtenção de pontos para a média semestral.
Orientador: Elisa Antolli Paleari
		
Valparaíso, GO
2024
SUMÁRIO
1.INTRODUÇÃO	4
2. DESENVOLVIMENTO	5
2.1 Preparação do Ambiente	5
2.2 Estrutura do Projeto	5
2.3 Implementação do XML	6
2.4 Criação e Estilização da Página Inicial	8
2.5 Configuração do Formulário HTML	9
2.6 Implementação da Lógica PHP	10
2.7 Validação e Estilização	12
3. RESULTADO	14
4. CONCLUSÃO	16
5.REFERÊNCIAS	17
1.INTRODUÇÃO
No cenário tecnológico atual, a personalização e interatividade das aplicações web desempenham um papel essencial na criação de experiências enriquecedoras para o usuário. Este relatório apresenta o desenvolvimento de uma aplicação web projetada para identificar o signo zodiacal de um usuário com base em sua data de nascimento. A implementação utilizou o ambiente de desenvolvimento local XAMPP, a linguagem PHP para gerenciar a lógica no servidor, e a biblioteca Bootstrap para estilização e responsividade da interface.
O objetivo principal deste projeto é fornecer ao usuário uma experiência intuitiva e acessível, permitindo a inserção de sua data de nascimento para o cálculo e exibição de seu signo zodiacal correspondente. A escolha do PHP como linguagem de back-end possibilitou a criação de uma lógica eficiente para a determinação zodiacal, enquanto o uso do Bootstrap contribuiu para a criação de uma interface visualmente agradável e compatível com diversos dispositivos.
Essa aplicação visa demonstrar como tecnologias de desenvolvimento web podem ser utilizadas de forma integrada para promover interatividade, além de evidenciar a importância da usabilidade e da clareza na criação de interfaces para o usuário final.
2. DESENVOLVIMENTO
Esta seção descreve os passos detalhados tomados para o desenvolvimento da aplicação web, com foco na organização do ambiente, na estruturação do projeto e na implementação dos dados zodiacais em XML.
2.1 Preparação do Ambiente
A primeira etapa consistiu na configuração do ambiente de desenvolvimento, essencial para garantir a funcionalidade adequada do projeto. Foi instalado o pacote XAMPP, que fornece o Apache e o MySQL, além do suporte ao PHP, formando uma plataforma local para testes e execução do código. Em seguida, foi criada uma pasta específica no diretório htdocs do XAMPP para armazenar todos os arquivos do projeto, garantindo fácil acesso e organização dos elementos necessários para a aplicação. Para a edição e gerenciamento do código, utilizou-se o editor Visual Studio Code (VSCode), que permite a integração com o sistema de arquivos e oferece suporte para extensões e ferramentas adicionais, otimizando o desenvolvimento.
2.2 Estrutura do Projeto
Após a preparação do ambiente, foi organizada a estrutura do projeto com diretórios e arquivos categorizados para facilitar a manutenção e a escalabilidade do código. Essa organização permite a separação entre elementos de estilo, lógica de aplicação e dados. A estrutura foi configurada conforme descrito a seguir:
· assets/: Diretório destinado aos recursos visuais e de interação, contendo:
· css/: Pasta para arquivos de estilo, incluindo style.css, responsável pela estilização da interface;
· imgs/: Repositório para imagens utilizadas na aplicação;
· js/: Diretório reservado para arquivos JavaScript, caso fosse necessária alguma interatividade avançada na interface.
· layouts/: Diretório para componentes estruturais reutilizáveis, contendo header.php para gerenciamento da navegação e cabeçalho da aplicação.
· Arquivos principais:
· index.php: Arquivo inicial que compõe a interface de entrada para o usuário, onde ele insere a data de nascimento.
· show_zodiac_sign.php: Responsável por processar a entrada do usuário e exibir o signo correspondente.
· signos.xml: Arquivo XML com as informações detalhadas dos signos zodiacais.
2.3 Implementação do XML
Para armazenar as informações sobre os signos zodiacais, foi criado o arquivo signos.xml. Esse arquivo permite uma estrutura hierárquica e organizada dos dados, facilitando a busca e manipulação das informações de cada signo zodiacal. O signos.xml contém tags específicas para a data inicial e final de cada signo, o nome do signo e uma breve descrição. As informações foram obtidas de fontes confiáveis, como a Wikipedia, e inseridas manualmente para cada um dos doze signos.
O uso de XML como formato de armazenamento oferece flexibilidade e permite que a aplicação acesse os dados de maneira estruturada e escalável, sem sobrecarregar o processamento da aplicação. A seguir, são apresentados exemplos do código XML, ilustrando como os dados foram estruturados para cada signo.
2.4 Criação e Estilização da Página Inicial
Para oferecer uma interface inicial intuitiva e atraente, foi desenvolvido o arquivo index.php com uma estrutura básica em HTML. A estrutura de cabeçalho foi modularizada, transferindo o conteúdo do topo da página para um arquivo separado, header.php, que é incluído em index.php utilizando a função include do PHP. Essa abordagem facilita a manutenção e reutilização do cabeçalho, garantindo uma organização mais clara do código.
O framework Bootstrap foi incorporado ao arquivo header.php para garantir uma estilização responsiva e consistente, proporcionando uma interface moderna e intuitiva ao usuário. A utilização do Bootstrap permitiu a criação de uma experiência de usuário mais agradável, com uma navegação fluida e compatível com diferentes dispositivos e resoluções de tela.
O arquivo index.php permite ao usuário inserir sua data de nascimento, que é então processada para identificar e exibir o signo zodiacal correspondente. Esta página foi estilizada de forma a ser visualmente atraente e simples de usar, alinhando-se ao objetivo de proporcionar uma experiência interativa e informativa.
2.5 Configuração do Formulário HTML
Para permitir a entrada de dados do usuário, foi configurado um formulário em HTML na página index.php, que coleta a data de nascimento e a envia para show_zodiac_sign.php utilizando o método POST. Essa abordagem garante que os dados do usuário sejam transmitidos de forma segura e discreta entre as páginas.
A estilização do formulário foi realizada com o uso do framework Bootstrap, assegurando uma aparência visualmente atraente e uma disposição responsiva dos elementos de entrada. Essa configuração foi essencial para garantir que o formulário mantivesse uma interface consistente, alinhada com o design geral da aplicação.
Abaixo, segue um exemplo do código do formulário, que inclui campos organizados e estilizados para fácil interação do usuário:
 Data de Nascimento:
 
 Verificar Signo
Essa configuração possibilita ao usuário inserir sua data de nascimento de forma simples, intuitiva e com a confiança de que seus dados estão sendo transmitidos para processamento adequado no back-end.
2.6 Implementação da Lógica PHP
Para garantir uma consistência visual em toda a aplicação, o arquivo show_zodiac_sign.php foi configurado para incluir o arquivo header.php. Este procedimento promove a uniformidade da interface, facilitando a navegação e mantendo a padronização do design.
A lógica responsável pelo processamento da data de nascimento e pela determinação do signo zodiacal foi desenvolvida em PHP. A partir da data de nascimento fornecida pelo usuário, a aplicação compara a data com os intervalos de datas dos signos armazenados noarquivo signos.xml. Para realizar essa verificação, foram criadas funções específicas para converter as datas de início e fim de cada signo em formatos válidos e comparáveis. Essa abordagem permite uma comparação precisa das datas, assegurando que o signo correspondente seja identificado corretamente.
Abaixo, apresentamos um exemplo do código PHP implementado para manipulação de datas e verificação do signo, destacando o uso de funções de conversão e comparação de intervalos:
function verificarSigno($dataNascimento, $signos) {
 foreach ($signos as $signo) {
 $inicio = DateTime::createFromFormat('d-m', $signo['data_inicio']);
 $fim = DateTime::createFromFormat('d-m', $signo['data_fim']);
 
 if ($dataNascimento >= $inicio && $dataNascimento