[Introdução ao PHP] Desenvolvendo uma Aplicação Web Funcional! Criando um Quadro de Avisos Simples com Integração de Banco de Dados
Nos artigos anteriores, aprendemos a sintaxe básica do PHP e como recuperar e exibir dados de um banco de dados. No entanto, a verdadeira diversão das aplicações web vem da capacidade dos usuários de "adicionar" ou "excluir" dados, permitindo uma interação bidirecional. Essa "manipulação de dados pelo usuário" é, sem dúvida, o núcleo de todos os serviços da web.
Neste artigo, mobilizaremos todo o conhecimento que adquirimos até agora para desenvolver uma aplicação web completa e integrada com um banco de dados: um quadro de avisos de notas simples. Este quadro de avisos possui três funções básicas de uma aplicação web: postar notas (Create), exibir uma lista (Read) e excluí-las (Delete). O código será um pouco longo, mas se você copiar e colar este único arquivo e executá-lo em seu servidor, você terá sua própria "aplicação web funcional". Por favor, desfrute da imensa sensação de realização que a programação proporciona!
Para preparar seu ambiente para rodar o PHP (ambiente de desenvolvimento), se você ainda não configurou o XAMPP, por favor, consulte [Introdução ao PHP] Um Guia Completo para Baixar e Instalar o XAMPP!. Após a instalação, basta colocar seu arquivo PHP na pasta especificada (como `htdocs`), e você estará pronto!
1. CRUD: O Design Básico de uma Aplicação Web
As aplicações web que usamos todos os dias, como redes sociais, blogs e sites de comércio eletrônico, são fundamentalmente baseadas em quatro operações de dados. Elas são conhecidas pelo acrônimo CRUD.
- Create (Criar): Criar e postar novos dados.
- Read (Ler): Ler e exibir dados.
- Update (Atualizar): Atualizar e editar dados existentes.
- Delete (Excluir): Excluir dados.
Desta vez, implementaremos três dessas funções — C, R e D, excluindo a Atualização (edição) — e daremos nosso primeiro passo no desenvolvimento de aplicações web.
2. Na prática! Desenvolvendo um Quadro de Avisos de Notas Simples
Então, vamos começar. Implementaremos todas as funcionalidades de postagem, exibição e exclusão em um único arquivo PHP.
Passo A: Preparando o Banco de Dados e a Tabela
Primeiro, precisamos criar uma tabela `memos` para armazenar as notas. Por favor, execute a seguinte instrução SQL em uma ferramenta de gerenciamento de banco de dados como o phpMyAdmin.
CREATE TABLE memos (
id INT AUTO_INCREMENT PRIMARY KEY,
content VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Vamos adicionar alguns dados de exemplo
INSERT INTO memos (content) VALUES
('Começar a estudar PHP'),
('Pensar no menu do jantar de hoje'),
('Criar uma lista de compras para o fim de semana');Passo B: O Arquivo PHP com Todas as Funcionalidades
É aqui que a verdadeira ação começa. Por favor, salve o código a seguir com um nome como `memo.php`. Todas as informações de conexão com o banco de dados, a lógica de adição de dados, a lógica de exclusão e a lógica de exibição estão contidas neste único arquivo.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Quadro de Avisos Simples</title>
<style>
body { font-family: sans-serif; padding: 20px; max-width: 700px; margin: auto; background-color: #f9f9f9; }
h1, h2 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
.memo-form { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
textarea { width: 100%; height: 60px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; }
button { padding: 10px 20px; border: none; background-color: #28a745; color: white; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #218838; }
.memo-list { list-style: none; padding: 0; }
.memo-item { background: #fff; padding: 15px; border-left: 5px solid #007bff; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.memo-content { flex-grow: 1; }
.memo-date { font-size: 0.8em; color: #888; display: block; margin-top: 5px; }
.delete-btn { background-color: #dc3545; }
.delete-btn:hover { background-color: #c82333; }
.error-message { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1>Quadro de Avisos Simples</h1>
<?php
// --- Informações de Conexão com o Banco de Dados ---
$db_host = 'localhost';
$db_name = 'your_database_name';
$db_user = 'your_username';
$db_pass = 'your_password';
try {
$pdo = new PDO("mysql:host={$db_host};dbname={$db_name};charset=utf8", $db_user, $db_pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// --- Processamento de Dados (se for uma requisição POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['action']) && $_POST['action'] === 'add') {
// 【Criar】 Processo de adicionar nota
if (!empty($_POST['content'])) {
$stmt = $pdo->prepare("INSERT INTO memos (content) VALUES (:content)");
$stmt->execute([':content' => $_POST['content']]);
}
} elseif (isset($_POST['action']) && $_POST['action'] === 'delete') {
// 【Excluir】 Processo de excluir nota
if (isset($_POST['id'])) {
$stmt = $pdo->prepare("DELETE FROM memos WHERE id = :id");
$stmt->execute([':id' => $_POST['id']]);
}
}
// Redirecionar para si mesmo após o processamento para evitar envio duplo
header('Location: ' . $_SERVER['SCRIPT_NAME']);
exit;
}
// --- Exibição de Dados (se for uma requisição GET) ---
// 【Ler】 Obter lista de notas
$stmt = $pdo->prepare("SELECT * FROM memos ORDER BY created_at DESC");
$stmt->execute();
$memos = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo '<div class="error-message">Erro no Banco de Dados: ' . htmlspecialchars($e->getMessage()) . '</div>';
die(); // Termina o script em caso de erro
}
?>
<!-- Formulário para postar nota -->
<section class="memo-form">
<h2>Postar uma nova nota</h2>
<form action="" method="POST">
<input type="hidden" name="action" value="add">
<textarea name="content" required></textarea>
<button type="submit">Postar</button>
</form>
</section>
<!-- Exibição da lista de notas -->
<section>
<h2>Lista de Notas</h2>
<ul class="memo-list">
<?php if ($memos): ?>
<?php foreach ($memos as $memo): ?>
<li class="memo-item">
<div class="memo-content">
<?php echo htmlspecialchars($memo['content']); ?>
<span class="memo-date">(<?php echo $memo['created_at']; ?>)</span>
</div>
<form action="" method="POST" style="display:inline;">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="id" value="<?php echo $memo['id']; ?>">
<button type="submit" class="delete-btn">Excluir</button>
</form>
</li>
<?php endforeach; ?>
<?php else: ?>
<li>Ainda não há postagens.</li>
<?php endif; ?>
</ul>
</section>
</body>
</html>
Importante: Não se esqueça de alterar as informações de conexão com o banco de dados para corresponderem ao seu próprio ambiente antes de executar este código.
O que acha? Você deve conseguir confirmar a série de ações: postar uma nota a partir do formulário a adiciona à lista em tempo real, e pressionar o botão de excluir faz essa nota desaparecer. Esta é a operação básica CRUD (neste caso, CRD) do desenvolvimento de aplicações web.
3. Explicação do Código e Pontos Chave
Este único arquivo de código contém várias técnicas importantes.
Mecanismo para Gerenciar Tudo em um Único Arquivo
Esta aplicação gerencia o envio de dados (POST) e a exibição da página (GET) no mesmo arquivo. Ela usa `if ($_SERVER['REQUEST_METHOD'] === 'POST')` para agrupar o processamento de "quando o formulário é enviado". Ela recebe tanto adições quanto exclusões como requisições POST e, após o processamento, redireciona para si mesma. Esta é uma técnica chamada de padrão Post/Redirect/Get (PRG), e é eficaz para prevenir o "envio duplo", onde os mesmos dados são enviados várias vezes quando o botão de atualizar do navegador é pressionado.
Utilização do Tipo de Input Oculto (hidden)
Tanto o formulário de postagem quanto o botão de exclusão enviam dados para o mesmo arquivo via POST. Para distinguir qual processo é desejado, usamos `<input type="hidden">`.
Desta forma, ao enviar dados ocultos que não são exibidos na tela, como "`action`" (que tipo de operação) e "`id`" (qual nota visar), o lado do PHP pode olhar para os dados recebidos e executar o processo apropriado (adicionar ou excluir).
4. Resumo e Próximos Passos
Bom trabalho! Desta vez, criamos uma aplicação web dinâmica, um "Quadro de Avisos Simples", que se integra com um banco de dados e possui funcionalidades de Criar, Ler e Excluir. A experiência de ver o código que você escreveu funcionando de fato como um "aplicativo" no navegador deve lhe dar uma grande sensação de realização.
Este conceito de CRUD é a base de todas as aplicações web. A partir daqui, você pode expandir ainda mais a funcionalidade, como:
- Adicionar um recurso de edição (Atualizar) para as notas.
- Integrá-lo com uma função de login de usuário para torná-lo uma lista de tarefas pessoal.
- Reforçar a validação do conteúdo postado (por exemplo, verificação do número de caracteres).
Nós o encorajamos a usar este quadro de avisos como base para se desafiar no desenvolvimento de sua própria aplicação original!