Portfólio Programação Web

Como instalar vscode:    • Como instalar o VSCODE ?  

Download vscode: https://code.visualstudio.com/download

Como instalar o Xampp:    • Como Instalar o Xampp? [passo a passo]  

Download xampp: https://www.apachefriends.org/pt_br/d...

Introdução


O projeto proposto consiste no desenvolvimento de uma página web simples com front-end e back-end, cujo objetivo é descobrir o signo do usuário com base em sua data de nascimento. A aplicação será implementada utilizando o editor de código Visual Studio Code (VSCode) e o servidor local XAMPP, que permite rodar o PHP e testar o site no ambiente local. Este trabalho visa detalhar o processo de configuração e desenvolvimento da aplicação, com base em um roteiro organizado.


Método


Para desenvolver o projeto, será necessário instalar e configurar as ferramentas VSCode e XAMPP, que vão permitir a criação, edição e execução dos arquivos PHP e HTML. O servidor Apache embutido no XAMPP será utilizado para rodar o projeto localmente.


Os passos do projeto incluem:

1. **Instalação das ferramentas**: Garantir que o VSCode e o XAMPP estejam corretamente instalados e funcionando.

2. **Estruturação do projeto**: Criar a estrutura de pastas no diretório correto.

3. **Desenvolvimento dos arquivos**: Criar os arquivos PHP, XML e CSS necessários para o funcionamento da aplicação.

4. **Teste da aplicação**: Verificar o correto funcionamento do código ao rodar o site no servidor local.


Desenvolvimento


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 `style.css`.

   - Outra pasta importante é a “layouts”, onde estarão os arquivos de cabeçalho (`header.php`) e rodapé (`footer.php`), que serão incluídos em todas as páginas.


3. **Desenvolvimento do Back-end e Front-end**:

   - No arquivo `index.php`, é 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 `signos.xml`.

   - O código PHP em `show_zodiac_sign.php` processa a data e exibe o signo correspondente, juntamente com sua descrição.


4. **Estilo Visual**:

   - O arquivo `style.css` 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.


Conclusão


A proposta deste projeto foi totalmente implementada, resultando em uma página funcional que permite ao usuário descobrir seu signo com base na data de nascimento. 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. A página foi testada e exibiu o resultado correto ao consultar os signos.