Crie o banco do planejador e use PHP para mostrar uma atividade cadastrada.
XAMPPphpMyAdminVS CodePHP
Abra a prévia para conhecer o objetivo e liberar as missões.
MISSÃO ATUAL · 01
O que você precisa organizar?
Onde mexer: Seu planejamento para esta atividade
O ENEM está chegando. Vamos construir seu calendário de estudos em três aulas. Hoje, faremos o sistema guardar e recuperar uma atividade. Depois, acrescentaremos o cadastro pelo site e sua identidade visual.
Escolha um conteúdo para revisar e uma data para estudá-lo.
Anote uma tarefa específica: por exemplo, resolver cinco questões de porcentagem.
Você tem uma data, uma área e uma tarefa para cadastrar nesta aula.
MISSÃO ATUAL · 02
Abra o XAMPP
Onde mexer: Windows → menu Iniciar
Pesquise XAMPP no menu Iniciar.
Abra o XAMPP Control Panel.
Abra o painel da instalação usada pelo laboratório.
Nas próximas telas, você iniciará os serviços e localizará a pasta do projeto.
Não encontrou o programa?
Procure o atalho indicado pelo professor. Se o XAMPP não estiver instalado, peça ajuda; não baixe ou instale durante esta missão.
O painel está aberto e você encontrou as linhas Apache e MySQL.
MISSÃO ATUAL · 03
Inicie Apache e MySQL
Onde mexer: XAMPP Control Panel
Apache executará o PHP; o serviço identificado como MySQL guardará os dados.
Na linha Apache, clique em Start. Se já estiver em execução, mantenha como está.
Na linha MySQL, clique em Start. Se já estiver em execução, mantenha como está.
Apareceu um erro?
Chame o professor antes de alterar portas ou configurações. Os endereços desta aula usam a configuração local padrão e devem ser ajustados se o laboratório usar outra porta.
Apache e MySQL indicam execução e mostram o botão Stop.
MISSÃO ATUAL · 04
Encontre a pasta htdocs
Onde mexer: XAMPP Control Panel → Explorer
No painel do XAMPP, clique em Explorer.
Na janela aberta, localize a pasta htdocs e abra com dois cliques.
Qual é o caminho?
Na instalação padrão, C:/xampp/htdocs. Se o XAMPP estiver instalado em outro local, use htdocs dessa instalação. O botão Explorer do painel ajuda a encontrar a pasta correta.
O Explorador de Arquivos está dentro de htdocs.
MISSÃO ATUAL · 05
Crie a pasta meu-plano-enem
Onde mexer: Explorador de Arquivos → htdocs
Dentro de htdocs, clique com o botão direito em uma área vazia e escolha Novo → Pasta.
Nome da pasta: meu-plano-enem
Confirme o nome e abra a pasta criada.
Sua pasta deve ficar assim
meu-plano-enem
A pasta já existe?
Se contém um trabalho seu, preserve-o e confirme com o professor antes de criar ou substituir arquivos. Se for de outra pessoa, peça orientação para não misturar os projetos.
A pasta meu-plano-enem existe dentro de htdocs.
MISSÃO ATUAL · 06
Abra sua pasta no VS Code
Onde mexer: VS Code → Arquivo → Abrir Pasta
Você editará os arquivos nesta pasta. O navegador abrirá o projeto pelo localhost.
Abra o VS Code e escolha Arquivo → Abrir Pasta.
Na janela de seleção, localize htdocs e selecione meu-plano-enem.
Confirme em Selecionar Pasta ou Abrir, conforme a janela.
Sua pasta deve ficar assim
meu-plano-enem
Não vejo o painel lateral
Use Exibir → Explorer no VS Code. Este Explorer é o painel de arquivos do editor; o Explorer do XAMPP abre a pasta da instalação no Windows.
MEU-PLANO-ENEM aparece no painel lateral do VS Code.
MISSÃO ATUAL · 07
Crie o banco planejador_enem
Onde mexer: Navegador → http://localhost/phpmyadmin
O banco local guardará seu planejamento; ele é independente do banco da Biblioteca.
Digite o endereço acima no navegador. No phpMyAdmin, clique em Novo.
Nome do banco: planejador_enem
Clique em Criar e selecione planejador_enem na lista lateral.
A página não abriu?
Confira os serviços Apache e MySQL. Se o laboratório usa outra porta no Apache, use o endereço indicado pelo professor.
Preciso escolher uma colação?
Se a tela pedir, use utf8mb4_unicode_ci. Se o banco já existir, confirme com o professor antes de usar: não apague dados anteriores.
O banco planejador_enem está selecionado na lista lateral.
MISSÃO ATUAL · 08
Crie a tabela atividades
Onde mexer: phpMyAdmin → banco planejador_enem
Cada linha da futura tabela será uma atividade do seu planejamento.
Na área Criar tabela, preencha Nome: atividades
Número de colunas: 6
Confira os valores e clique em Criar ou Executar para configurar as colunas.
A tela de configuração de seis colunas está aberta. A tabela ainda será configurada e salva.
MISSÃO ATUAL · 09
Configure a identificação: id
Onde mexer: phpMyAdmin → formulário de colunas → primeira linha
id identifica cada atividade, mesmo quando duas têm o mesmo título.
Nome: id | Tipo: INT
Em Índice, escolha PRIMARY e confirme se solicitado.
Marque A_I para gerar os números automaticamente. Continue no formulário; ainda não salve.
Onde informo o tamanho?
Não é necessário informar tamanho para INT nesta aula. Mantenha Nulo desmarcado.
A primeira coluna se chama id, usa INT e está com PRIMARY e A_I.
MISSÃO ATUAL · 10
Configure a data: data_estudo
Onde mexer: phpMyAdmin → mesmo formulário → segunda linha
Essa coluna guardará o dia em que você pretende estudar. Deixe Comprimento/Valores vazio.
Nome: data_estudo
Tipo: DATE
Mantenha Nulo desmarcado. Continue no formulário; ainda não salve.
A segunda coluna é data_estudo, do tipo DATE.
MISSÃO ATUAL · 11
Prepare os textos da atividade
Onde mexer: phpMyAdmin → mesmo formulário → linhas 3, 4 e 5
Mantenha Nulo desmarcado. Deixe o comprimento vazio para TEXT.
Linha 3 — Nome: titulo | Tipo: VARCHAR | Comprimento/Valores: 100
Linha 4 — Nome: area | Tipo: VARCHAR | Comprimento/Valores: 30
Linha 5 — Nome: descricao | Tipo: TEXT. Continue no formulário; ainda não salve.
Por que os textos usam tipos diferentes?
VARCHAR guarda um texto com limite definido. O título tem até 100 caracteres e a área até 30. TEXT permite uma descrição mais longa.
As três colunas de texto estão configuradas; falta a situação da atividade.
MISSÃO ATUAL · 12
Configure a situação: concluida
Onde mexer: phpMyAdmin → mesmo formulário → sexta linha
Neste projeto, 0 significa pendente e 1 significa concluída.
Nome: concluida | Tipo: TINYINT
Em Padrão, escolha Conforme definido ou Definido pelo usuário e digite 0.
Mantenha Nulo desmarcado. Ainda não salve: confira a estrutura na próxima tela.
Qual comprimento uso?
Deixe Comprimento/Valores vazio. Para esta atividade não é necessário informar tamanho para TINYINT.
A sexta coluna se chama concluida e tem valor padrão 0.
MISSÃO ATUAL · 13
Confira e salve a tabela
Onde mexer: phpMyAdmin → formulário de colunas
Abra a referência e compare as seis colunas com o seu formulário.
Se estiverem corretas, clique em Salvar.
Na aba Estrutura, confira os nomes e tipos gravados.
A tabela atividades está salva com as seis colunas da referência.
MISSÃO ATUAL · 14
Quando e o que estudar?
Onde mexer: phpMyAdmin → planejador_enem → atividades → Inserir
Deixe o valor de id vazio: o banco gerará o número.
Em data_estudo, informe a data escolhida no início da aula.
Em titulo, escreva uma tarefa curta. Continue neste formulário; ainda não execute.
Como escrevo a data?
Use ano-mês-dia. Por exemplo, 2026-10-25 corresponde a 25 de outubro de 2026. Escolha uma data válida para seu planejamento.
Vejo mais de um formulário
Preencha apenas um registro. Deixe os outros vazios ou marcados para ignorar, conforme a tela do phpMyAdmin.
Data e título estão preenchidos; o cadastro ainda não foi enviado.
MISSÃO ATUAL · 15
Detalhe seu planejamento
Onde mexer: phpMyAdmin → mesmo formulário de inserção
Em area, informe a área de conhecimento da atividade.
Em descricao, explique o que fará: por exemplo, resolver cinco questões e revisar os erros.
Continue no mesmo formulário; ainda não execute.
Quais áreas posso usar?
Escolha Linguagens, Matemática, Ciências da Natureza ou Ciências Humanas.
A área e a descrição foram preenchidas no mesmo registro que recebeu data e título.
MISSÃO ATUAL · 16
Salve sua atividade
Onde mexer: phpMyAdmin → mesmo formulário de inserção
No campo concluida, mantenha o valor 0.
Confira os campos preenchidos e id vazio.
Clique em Executar para enviar o registro.
O cadastro deu erro?
Leia a mensagem e confira se todos os campos foram preenchidos, exceto id. A data deve ser válida. Se não entender o erro, peça ajuda antes de enviar novamente.
O phpMyAdmin informa que o registro foi inserido.
MISSÃO ATUAL · 17
Encontre o registro salvo
Onde mexer: phpMyAdmin → atividades → Visualizar
Abra a aba Visualizar da tabela atividades.
Localize a linha que contém o título cadastrado.
Confira se id recebeu um número e concluida está com 0.
Seu registro está na tabela com os dados que você informou.
MISSÃO ATUAL · 18
Crie o arquivo conexao.php
Onde mexer: VS Code → meu-plano-enem/conexao.php
No painel de arquivos do VS Code, clique com o botão direito na pasta meu-plano-enem e escolha Novo Arquivo.
Nome do arquivo: conexao.php
Copie a base para esse arquivo e salve. Você preencherá a configuração na próxima missão.
Sua pasta deve ficar assim
meu-plano-enem
conexao.php
Para que serve: Preparar o acesso ao banco pela variável $pdo.
〈/〉 Ver código para copiar
Cole no arquivo conexao.php vazio, na raiz de meu-plano-enem. O nome do banco será preenchido na próxima missão.
Código
<?php
// Configuração local do laboratório: confirme usuário e senha com o professor.
$servidor = 'localhost';
$usuario = 'root';
$senha = '';
// COMPLETE: nome do banco que você criou no phpMyAdmin.
$banco = '';
// PDO prepara o acesso ao banco. A página usará a variável $pdo.
$pdo = new PDO(
"mysql:host=$servidor;dbname=$banco;charset=utf8mb4",
$usuario,
$senha,
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]
);
conexao.php está salvo dentro de meu-plano-enem. A configuração ainda será completada; não execute a página agora.
MISSÃO ATUAL · 19
Informe o banco da conexão
Onde mexer: VS Code → conexao.php
Localize a linha $banco = ''; e preencha o nome planejador_enem entre as aspas.
Confira $usuario e $senha com a configuração local informada pelo professor.
Salve com Ctrl+S. A conexão será testada junto da página.
Como fica a linha?
A linha fica: $banco = 'planejador_enem';. Preserve o símbolo $, as aspas e o ponto e vírgula.
Credenciais e porta
Use os dados locais orientados pelo professor. A base sugere root e senha vazia; se a configuração for diferente, ajuste com ajuda. Não use credenciais da hospedagem da Biblioteca.
A variável $banco contém planejador_enem e o arquivo está salvo.
MISSÃO ATUAL · 20
Crie a página index.php
Onde mexer: VS Code → meu-plano-enem/index.php
Na pasta meu-plano-enem do VS Code, crie um novo arquivo.
Nome do arquivo: index.php
Copie a base apresentada e salve. Complete a consulta na próxima missão antes de executar.
Sua pasta deve ficar assim
meu-plano-enem
conexao.php
index.php
Para que serve: Consultar o banco e produzir o HTML que apresenta suas atividades.
〈/〉 Ver código para copiar
Cole no arquivo index.php vazio, ao lado de conexao.php. Na próxima missão, você preencherá o nome da tabela.
Código
<?php
// Reaproveita a conexão. Os dois arquivos ficam na mesma pasta.
require __DIR__ . '/conexao.php';
// COMPLETE: substitua NOME_DA_TABELA pelo nome da tabela criada.
// SELECT busca as colunas; FROM indica a tabela.
// ORDER BY organiza por data e depois por identificação.
$consulta = $pdo->query(
'SELECT id, data_estudo, titulo, area, descricao, concluida
FROM NOME_DA_TABELA
ORDER BY data_estudo, id'
);
// Reúne os registros encontrados em uma lista de atividades.
$atividades = $consulta->fetchAll();
// Exibe dados como texto, sem interpretá-los como código HTML.
function escapar($texto) {
return htmlspecialchars((string) $texto, ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu plano até o ENEM</title>
</head>
<body>
<main class="planejador">
<h1>Meu planejamento</h1>
<?php if (empty($atividades)): ?>
<p>Nenhuma atividade cadastrada.</p>
<?php endif; ?>
<!-- foreach repete este cartão para cada registro encontrado. -->
<?php foreach ($atividades as $atividade): ?>
<article class="atividade">
<h2><?= escapar($atividade['titulo']) ?></h2>
<p>Data: <?= date('d/m/Y', strtotime($atividade['data_estudo'])) ?></p>
<p>Área: <?= escapar($atividade['area']) ?></p>
<p>Planejamento: <?= escapar($atividade['descricao']) ?></p>
<p>Situação: <?= $atividade['concluida'] ? 'Concluída' : 'Pendente' ?></p>
</article>
<?php endforeach; ?>
</main>
</body>
</html>
index.php e conexao.php aparecem na mesma pasta. O nome da tabela ainda será completado.
MISSÃO ATUAL · 21
Informe a tabela da consulta
Onde mexer: VS Code → index.php → consulta SELECT
SELECT busca as colunas; FROM informa a tabela; ORDER BY organiza os resultados.
Localize FROM NOME_DA_TABELA no início do arquivo.
Substitua somente NOME_DA_TABELA por atividades.
Salve com Ctrl+S.
Banco e tabela são a mesma coisa?
Não. planejador_enem é o banco informado em conexao.php. atividades é a tabela usada depois de FROM em index.php.
O trecho da consulta contém FROM atividades, sem alterar os nomes das colunas.
MISSÃO ATUAL · 22
Abra seu planejamento
Onde mexer: Navegador → barra de endereço
Use o endereço localhost. Abrir index.php por duplo clique ou por Live Server não executa o PHP desta aula.
Acesse http://localhost/meu-plano-enem/
Compare o título, a data e os demais dados com a linha cadastrada no phpMyAdmin.
A tabela não foi encontrada
Confira o nome depois de FROM e o banco em conexao.php. Os nomes devem corresponder ao phpMyAdmin.
Conexão falhou ou a página não abriu
Se o servidor não respondeu, confira Apache e a URL. Se aparecer erro de conexão, confira MySQL, usuário, senha e nome do banco com o professor.
Nenhuma atividade apareceu
Confira se o registro foi salvo na tabela atividades do banco planejador_enem. A mensagem de lista vazia significa que a consulta não encontrou registros.
Por que o cartão está dentro de foreach?
fetchAll reúne os registros. foreach percorre essa lista: a cada volta, $atividade contém um registro, usado para preencher um article. Não é necessário escrever outro cartão manualmente a cada cadastro.
A página mostra sua atividade com aparência simples. O visual será desenvolvido depois.
MISSÃO ATUAL · 23
Prove que os dados vêm do banco
Onde mexer: phpMyAdmin → atividades e navegador → http://localhost/meu-plano-enem/
Ao atualizar, o PHP executou outra consulta e montou o HTML com a informação atual do banco.
No phpMyAdmin, edite somente o título da sua atividade e salve.
Volte a http://localhost/meu-plano-enem/ e atualize o navegador.
Confira se o novo título aparece sem editar index.php.
O título não mudou
Confira se salvou a edição, atualizou a página local correta e alterou o mesmo registro e banco usados pelo projeto.
O título na página corresponde ao título atualizado no banco.
MISSÃO ATUAL · 24
Confira sua criação
Onde mexer: Seu projeto local e phpMyAdmin
Confira os itens no computador antes de marcá-los.
Salve os arquivos. Se o computador for compartilhado, siga a orientação do professor para guardar a pasta e exportar o banco.
As verificações estão marcadas e seu trabalho está guardado para continuar.
MISSÃO ATUAL · 25
Como foi construir essa primeira parte?
Onde mexer: Campo de resposta desta missão
Conte em qual parte precisou de mais ajuda: organizar a tabela, conectar o PHP ou mostrar os dados.
Descreva o que aconteceu e o que ajudou você a continuar.
Seu relato foi escrito para ajudar o professor a planejar a próxima aula.
Aula concluída!
Salve sua pasta. Você pode voltar às missões para revisar e mostrar seu trabalho ao professor.