Análise e Desenvolvimento de Sistemas
GUILHERME JOAQUIM DOS SANTOS
Programação Web:
Criar uma página front-end
IPORÃ-PR
2025
GUILHERME JOAQUIM DOS SANTOS
Programação Web:
Criar uma página front-end
Aula prática de linguagem de programação apresentado
como requisito parcial para a obtenção de média
semestral no curso Analise e Desenvolvimento de
Sistemas.
Orientador: Vanessa Matias Leite
Tutor: PROFESSOR
IPORÃ-PR
2025
Sumário
INTRODUÇÃO............................................................................................................................
DESENVOLVIMENTO................................................................................................................
RESULTADO................................................................................................................................
CONCLUSÃO..............................................................................................................................
REFERENCIAS............................................................................................................................
1-INTRODUÇÃO
O objetivo deste projeto foi desenvolver uma página web simples com funcionalidades front-end e
back-end para determinar o signo astrológico do usuário com base em sua data de nascimento.
A aplicação foi desenvolvida utilizando o editor de código Visual Studio Code (VSCode) e o
servidor local XAMPP, que permite rodar o código PHP e testar o site em um ambiente de
desenvolvimento local. Este trabalho detalha o processo de configuração, estruturação e
desenvolvimento da aplicação, seguindo um roteiro organizado para garantir a correta
implementação da proposta.
Tecnologias Utilizadas
Linguagens: PHP, XML, HTML, CSS
Servidor Local: XAMPP (com Apache ativado)
Estilização: Arquivo [Link] e framework Bootstrap
Editor de Código: Visual Studio Code (VSCode)
2-DESENVOLVIMENTO
O projeto seguiu quatro etapas principais: Instalação das Ferramentas, Estruturação do Projeto,
Desenvolvimento do Back-end/Front-end e Estilo Visual.
1. Instalação e Configuração
Instalação do VSCode e do XAMPP.
Testes iniciais para verificar o funcionamento das instalações. No XAMPP, o servidor
Apache foi ativado para garantir que o servidor local estivesse rodando.
2. Estrutura do Projeto
Criação da pasta "PROJECT" dentro do diretório do XAMPP: C:/XAMPP/htdocs.
Organização de pastas para ativos e layouts:
o Pasta assets com a subpasta css, onde foi colocado o arquivo [Link].
o Pasta layouts, contendo os arquivos de cabeçalho ([Link]) e rodapé
([Link]), que seriam incluídos em todas as páginas para padronização.
3. Desenvolvimento do Back-end e Front-end
Front-end ([Link]): Criação de uma interface simples em HTML/PHP onde o usuário
pode inserir sua data de nascimento e submeter o formulário.
Back-end (show_zodiac_sign.php): Ao submeter o formulário, os dados são enviados
para este arquivo.
o O código PHP lê a data de nascimento e a compara com os períodos dos signos
armazenados no arquivo [Link].
o O código processa a data e exibe o signo correspondente, juntamente com sua
descrição.
4. Estilo Visual
O arquivo [Link] foi utilizado para adicionar um layout básico à página, definindo
cores e a organização dos elementos na tela.
O uso do framework Bootstrap facilitou a construção de uma interface amigável e
responsiva, garantindo a boa exibição em diferentes dispositivos.
3-RESULTADO
O resultado do projeto foi a implementação completa da proposta, resultando em uma página web
funcional que permite ao usuário descobrir seu signo com base na data de Estrutura: Todo o
processo, desde a instalação das ferramentas até a criação dos arquivos PHP, XML e CSS, foi
realizado seguindo uma estrutura lógica e organizada.
Teste: A aplicação foi testada no servidor local e exibiu o resultado correto ao consultar os
signos para diferentes datas de nascimento.
4-CONCLUSÃO
A proposta deste projeto foi totalmente implementada com sucesso, entregando uma aplicação que
cumpre seu objetivo. A aplicação demonstrou a capacidade de integrar HTML, CSS, PHP e XML
para criar uma solução web interativa e funcional. A utilização de ferramentas como XAMPP e
VSCode, combinada com o framework Bootstrap, garantiu um processo de desenvolvimento
eficiente e um resultado final profissional e responsivo.