ANHAGUERA
Programação
Web
IGOR DIAS DE OLIVEIRA SILVA
TAGUATINGA/DF
2025
Introdução
O projeto é uma página web simples (front-end e back-end) para descobrir o signo a
partir da data de nascimento. A aplicação será criada usando o editor VSCode e
executada em um servidor local com XAMPP, o que permite rodar PHP e testar o site
no ambiente local. Este trabalho descreve, de forma objetiva, como configurar e
desenvolver a aplicação.
TAGUATINGA/DF
2025
Método/Resultados
1. Instalação e Configuração. Após instalar o VSCode e XAMPP, os testes iniciais
consistem em abrir ambos os softwares para verificar se as instalações foram
bem-sucedidas. No XAMPP, o Apache deve estar ativado para garantir que o
servidor local esteja rodando.
2. **Estrutura do Projeto**: - Criar a pasta "PROJECT" dentro do diretório
“C:/XAMPP/htdocs”. - Dentro de "PROJECT", criar a pasta “assets” e, dentro dela, a
subpasta “css”. Aqui, será colocado o arquivo `[Link]`. - Outra pasta importante é a
“layouts”, onde estarão os arquivos de cabeçalho (`[Link]`) e rodapé
(`[Link]`), que serão incluídos em todas as páginas.
TAGUATINGA/DF
2025
3. **Desenvolvimento do Back-end e Front-end**: - No arquivo `[Link]`, é criada
uma interface simples onde o usuário pode inserir sua data de nascimento. - Ao
submeter o formulário, os dados são enviados para o arquivo `show_zodiac_sign.php`,
que faz a leitura da data de nascimento e compara com os períodos dos signos
armazenados no arquivo `[Link]`. - O código PHP em `show_zodiac_sign.php`
processa a data e exibe o signo correspondente, juntamente com sua descrição.
[Link]
<?php include('assets/layouts/[Link]'); ?> <div class="container mt-5"> <h1
style="color: black;">Qual é o seu signo?</h1> <form id="signo-form"
method="POST" action="show_zodiac_sign.php"> <div class="mb-3"> <label
for="data_nascimento" class="form-label">Informe sua data de nascimento</label>
<br> <input type="date" class="form-control" id="data_nascimento"
name="data_nascimento" required> </div> <div class="text-center"> <button
type="submit" class="btn" style="background-color: #007bff; color: white; border-
radius: 25px;">Ver meu signo</button> </div> </form> </div> <?php
include('assets/layouts/[Link]'); ?> Arquivo show_zodiac_sign.php <?php
include('assets/layouts/[Link]'); ?> <div class="container mt-5 text-center">
<h1 style="color: black;">O seu signo é:</h1> <?php $data_nascimento =
$_POST['data_nascimento']; $signos = simplexml_load_file("[Link]");
$data_nascimento = new DateTime($data_nascimento); $signo_encontrado = false;
foreach ($signos->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_inicio && $data_nascimento >
$data_fim) { continue; } } if ($data_nascimento >= $data_inicio &&
$data_nascimento <= $data_fim) { echo "<h2 style='color: #007bff;'>{$signo-
>signoNome}</h2>"; echo "<p style='color: white;'>{$signo->descricao}</p>";
$signo_encontrado = true; break; } } if (!$signo_encontrado) { echo "<p
style='color: white;'>Não foi possível determinar seu signo. Verifique a data
informada.</p>"; } ?> <a href="[Link]" class="btn" style="background-color:
TAGUATINGA/DF
2025
#007bff; color: white; border-radius: 25px; width: 100px;">Voltar</a> </div> <?php
include('assets/layouts/[Link]'); ?>
show_zodiac_sign.php
<?php include('assets/layouts/[Link]'); ?> <div class="container mt-5 text-
center"> <h1 style="color: black;">O seu signo é:</h1> <?php $data_nascimento =
$_POST['data_nascimento']; $signos = simplexml_load_file("[Link]");
$data_nascimento = new DateTime($data_nascimento); $signo_encontrado = false;
foreach ($signos->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_inicio && $data_nascimento >
$data_fim) { continue; } } if ($data_nascimento >= $data_inicio && $data_nascimento
<= $data_fim) { echo "<h2 style='color: #007bff;'>{$signo->signoNome}</h2>"; echo
"<p style='color: white;'>{$signo->descricao}</p>"; $signo_encontrado = true;
break; } } if (!$signo_encontrado) { echo "<p style='color: white;'>Não foi possível
determinar seu signo. Verifique a data informada.</p>"; } ?> <a href="[Link]"
class="btn" style="background-color: #007bff; color: white; border-radius: 25px;
width: 100px;">Voltar</a> </div> <?php include('assets/layouts/[Link]'); ?>
TAGUATINGA/DF
2025
[Link]
<?xml version="1.0"?> <signos> <signo> <dataInicio>21/01</dataInicio>
<dataFim>18/02</dataFim> <signoNome>Aquário</signoNome> </signo> <signo>
<dataInicio>19/02</dataInicio> <dataFim>20/03</dataFim> <signoNome>Peixes</signoNome>
</signo> <signo> <dataInicio>21/03</dataInicio> <dataFim>20/04</dataFim>
<signoNome>Áries</signoNome> </signo> <signo> <dataInicio>21/04</dataInicio>
<dataFim>20/05</dataFim> <signoNome>Touro</signoNome> </signo> <signo>
<dataInicio>21/05</dataInicio> <dataFim>20/06</dataFim>
<signoNome>Gêmeos</signoNome> </signo> <signo> <dataInicio>21/06</dataInicio>
<dataFim>22/07</dataFim> <signoNome>Câncer</signoNome> </signo> <signo>
<dataInicio>23/07</dataInicio> <dataFim>22/08</dataFim> <signoNome>Leão</signoNome>
</signo> <signo> <dataInicio>23/08</dataInicio> <dataFim>22/09</dataFim>
<signoNome>Virgem</signoNome> </signo> <signo> <dataInicio>23/09</dataInicio>
<dataFim>22/10</dataFim> <signoNome>Libra</signoNome> </signo> <signo>
<dataInicio>23/10</dataInicio> <dataFim>21/11</dataFim>
<signoNome>Escorpião</signoNome> </signo> <signo> <dataInicio>22/11</dataInicio>
<dataFim>21/12</dataFim> <signoNome>Sagitário</signoNome> </signo> <signo>
<dataInicio>22/12</dataInicio> <dataFim>20/01</dataFim>
<signoNome>Capricórnio</signoNome> </signo> </signos>
TAGUATINGA/DF
2025
4. Estilo Visual - O arquivo `[Link]` adiciona um layout básico à página, aplicando
cores e definindo a organização dos elementos na tela. - O uso do Bootstrap facilita a
construção de uma interface amigável e responsiva.
TAGUATINGA/DF
2025
CONCLUSÃO
O projeto foi completamente executado, culminando em uma página operante
que possibilita ao usuário identificar seu signo a partir da data de nascimento.
Todo o workflow, desde a instalação das ferramentas até a elaboração dos
arquivos PHP, XML e CSS, ocorreu dentro de uma estrutura coerente e bem
TAGUATINGA/DF
2025
organizada. A página passou por testes e apresentou o signo correto ao
consultar as informações.
TAGUATINGA/DF
2025