Portifolio programação Web

Prévia do material em texto

ANÁLISE E DESENVOLVIMENTO DE SISTEMAS 
 
 
 
 
 
Bruno dos Santos Corrêa 
 
 
 
 
 
PROGRAMAÇÃO WEB 
RELATÓRIO DE AULA PRÁTICA 
 
 
Brasília - DF 
2025 
Bruno dos Santos Corrêa 
 
 
 
 
 
PROGRAMAÇÃO WEB 
RELATÓRIO DE AULA PRÁTICA 
 
 
 
 
 
 
 
 
Trabalho de portifólio apresentado como 
requisito parcial para a obtenção de média 
semestral. 
Orientador: Luis Gustavo Cardoso 
 
 
 
Brasília - DF 
2025 
SUMÁRIO 
1. INTRODUÇÃO .................................................................................................................................. 4 
2. DESENVOLVIMENTO ....................................................................................................................... 5 
2.1. Downloads e Instalações ............................................................................................................ 5 
2.2. Criação do Projeto ...................................................................................................................... 7 
3. RESULTADO .................................................................................................................................. 10 
4. CONCLUSÃO.................................................................................................................................. 12 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1. INTRODUÇÃO 
O presente projeto tem como objetivo o desenvolvimento de uma página web 
interativa voltada à identificação do signo zodiacal do usuário a partir de sua data de 
nascimento. A proposta une conceitos de astrologia e programação web, promovendo 
uma experiência prática que integra design, lógica e usabilidade. 
A aplicação contará com uma página inicial contendo um formulário para 
coleta da data de nascimento. Após o envio das informações, o usuário será 
direcionado para uma nova página que exibirá detalhes específicos sobre o signo 
correspondente, incluindo características e curiosidades. 
Para a implementação, será utilizado o Visual Studio Code (VSCode) como 
ambiente de desenvolvimento e o XAMPP como servidor local, garantindo o 
funcionamento adequado do projeto em ambiente web. O framework Bootstrap será 
empregado para assegurar responsividade e estética moderna, complementado por 
folhas de estilo personalizadas (CSS) para aprimorar a identidade visual da interface. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2. DESENVOLVIMENTO 
O objetivo dessa atividade é desenvolver uma aplicação web que permita aos 
usuários descobrir qual é o seu signo do zodíaco com base no preenchimento de um 
formulário informando a data de nascimento e clicar em um botão que redirecionará 
para outra página contendo as principais informações do seu signo zodiacal. 
As etapas a serem seguidas para a realização do projeto é: 
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. 
2.1. Downloads e Instalações 
Para realizar este projeto, foi necessário a instalação do VSCODE 
e do XAMPP. 
 
 
 
 
 
 
 
 
Figura 1 Figura 2 
 
 
 
Após a instalação do XAMPP, uma pasta chamada “Project” deverá 
ser criada dentro do caminho C:\xampp\htdocs. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 3 Figura 4 
Figura 5 
2.2. Criação do Projeto 
No XAMPP foi ativado a conexão “XAMPP>Apache>Start”. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Dentro do VSCODE, foi aberta a pasta “Project”, criada 
anteriormente e dentro dessa página foi criada a estrutura do projeto. 
Figura 8 Figura 9 
Figura 6 
Figura 7 
 
 
 
 
 
 
 
 
 
 
 
Primeiramente foi criada a página principal que contém um 
formulário. Esse formulário terá um campo onde o usuário poderá informar 
sua data de nascimento e um botão para consultar o signo correspondente. 
Foi utilizado o Bootstrap, que auxilia na criação de um layout responsivo e 
visualmente agradável. 
Assim ficou a estrutura do arquivo index.php: 
 
A próxima etapa é desenvolver a página que exibir o retorno da 
pesquisa. Será o local onde o usuário visualizará qual é o seu signo após 
informar a data de nascimento. 
Figura 10 
Figura 11 
O arquivo show_zodiac_signo.php ficou da seguinte forma: 
 
O próximo passo é criar a lógica que fará a consulta a um arquivo 
XML, no qual estarão armazenadas as informações referentes a cada 
signo. Para isso, será desenvolvido o arquivo signos.xml e, em seguida, no 
código JavaScript, será construída a função responsável por carregar esse 
XML e identificar o signo correspondente, de acordo com a data de 
nascimento informada pelo usuário. 
Segue a estrutura da lógica: 
 
Figura 12 
Figura 13 
 
3. RESULTADO 
 
Após finalizar a estrutura de todo o projeto, é hora de realizar os testes para 
saber se todas as funcionalidades estão funcionando corretamente. 
 
Figura 14 
Figura 15 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 16 
Figura 17 
4. CONCLUSÃO 
O desenvolvimento desta aplicação web proporcionou uma experiência 
prática significativa na integração entre conceitos de front-end e back-end, resultando 
em um sistema funcional capaz de identificar e exibir o signo zodiacal do usuário. 
Desde a construção do formulário interativo até a implementação da lógica de leitura 
e processamento de dados em XML, cada etapa contribuiu para consolidar 
conhecimentos essenciais em HTML, CSS, JavaScript e no uso do framework 
Bootstrap para aprimorar a responsividade e o design da interface. 
A execução e os testes em ambiente local possibilitaram compreender de 
forma mais ampla o funcionamento de uma aplicação web completa, reforçando a 
importância da integração entre código, estrutura e experiência do usuário. Ver o 
projeto em pleno funcionamento foi uma demonstração concreta do aprendizado 
adquirido e uma forte motivação para continuar explorando novas tecnologias e 
aprofundar as práticas em desenvolvimento web.