[Introducción a PHP] ¡Desarrollando una Aplicación Web Funcional! Creando un Tablón de Anuncios Sencillo con Integración de Base de Datos
En los artículos anteriores, hemos aprendido la sintaxis básica de PHP y cómo obtener y mostrar datos de una base de datos. Sin embargo, la verdadera diversión de las aplicaciones web radica en la capacidad de los usuarios para "añadir" o "eliminar" datos, permitiendo una interacción bidireccional. Esta "manipulación de datos por parte del usuario" es, sin duda, el núcleo de todos los servicios web.
En este artículo, movilizaremos todo el conocimiento que hemos adquirido hasta ahora para desarrollar una aplicación web completa integrada con una base de datos: un tablón de anuncios de notas sencillas. Este tablón de anuncios cuenta con tres funciones básicas de una aplicación web: publicar notas (Crear), mostrar una lista (Leer) y eliminarlas (Eliminar). El código será un poco largo, pero si copias y pegas este único archivo y lo ejecutas en tu servidor, tendrás tu propia "aplicación web funcional". ¡Por favor, disfruta de la inmensa sensación de logro que se obtiene con la programación!
Para preparar tu entorno para ejecutar PHP (entorno de desarrollo), si aún no has configurado XAMPP, por favor consulta ¡[Introducción a PHP] Guía completa para descargar e instalar XAMPP!. ¡Después de la instalación, simplemente coloca tu archivo PHP en la carpeta especificada (como `htdocs`) y estarás listo!
1. CRUD: El Diseño Básico de una Aplicación Web
Las aplicaciones web que usamos a diario, como las redes sociales, los blogs y los sitios de comercio electrónico, se basan fundamentalmente en cuatro operaciones de datos. Se les conoce por el acrónimo CRUD.
- Create (Crear): Crear y publicar nuevos datos.
- Read (Leer): Leer y mostrar datos.
- Update (Actualizar): Actualizar y editar datos existentes.
- Delete (Eliminar): Eliminar datos.
Esta vez, implementaremos tres de estas funciones —C, R y D, excluyendo la Actualización (edición)— y daremos nuestro primer paso en el desarrollo de aplicaciones web.
2. ¡A la práctica! Desarrollando un Tablón de Anuncios de Notas Sencillas
Bien, ¡manos a la obra! Implementaremos todas las funciones de publicación, visualización y eliminación en un único archivo PHP.
Paso A: Preparación de la Base de Datos y la Tabla
Primero, necesitamos crear una tabla `memos` para almacenar las notas. Por favor, ejecuta la siguiente sentencia SQL en una herramienta de gestión de bases de datos como phpMyAdmin.
CREATE TABLE memos (
id INT AUTO_INCREMENT PRIMARY KEY,
content VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Vamos a insertar algunos datos de ejemplo
INSERT INTO memos (content) VALUES
('Empezar a estudiar PHP'),
('Pensar en el menú de la cena de hoy'),
('Crear una lista de la compra para el fin de semana');Paso B: El Archivo PHP con Todas las Funcionalidades
Aquí es donde empieza lo bueno. Por favor, guarda el siguiente código con un nombre como `memo.php`. Toda la información de conexión a la base de datos, la lógica de adición de datos, la lógica de eliminación y la lógica de visualización están empaquetadas en este único archivo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tablón de Anuncios Sencillo</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>Tablón de Anuncios Sencillo</h1>
<?php
// --- Información de conexión a la base de datos ---
$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);
// --- Procesamiento de datos (si hay una solicitud POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['action']) && $_POST['action'] === 'add') {
// 【Crear】 Proceso para añadir una 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') {
// 【Eliminar】 Proceso para eliminar una nota
if (isset($_POST['id'])) {
$stmt = $pdo->prepare("DELETE FROM memos WHERE id = :id");
$stmt->execute([':id' => $_POST['id']]);
}
}
// Redirigir a sí mismo después del procesamiento para evitar el doble envío
header('Location: ' . $_SERVER['SCRIPT_NAME']);
exit;
}
// --- Visualización de datos (si es una solicitud GET) ---
// 【Leer】 Obtener la 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">Error de base de datos: ' . htmlspecialchars($e->getMessage()) . '</div>';
die(); // Terminar el script en caso de error
}
?>
<!-- Formulario para publicar notas -->
<section class="memo-form">
<h2>Publicar una nueva nota</h2>
<form action="" method="POST">
<input type="hidden" name="action" value="add">
<textarea name="content" required></textarea>
<button type="submit">Publicar</button>
</form>
</section>
<!-- Visualización de la 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">Eliminar</button>
</form>
</li>
<?php endforeach; ?>
<?php else: ?>
<li>Aún no hay publicaciones.</li>
<?php endif; ?>
</ul>
</section>
</body>
</html>
Importante: No olvides cambiar la información de conexión a la base de datos para que coincida con tu propio entorno antes de ejecutar este código.
¿Qué tal? Deberías poder confirmar la serie de acciones: publicar una nota desde el formulario la añade a la lista en tiempo real, y presionar el botón de eliminar hace que esa nota desaparezca. Esta es la operación básica CRUD (en este caso, CRD) del desarrollo de aplicaciones web.
3. Explicación del Código y Puntos Clave
Este único archivo de código contiene varias técnicas importantes.
Mecanismo para Gestionar Todo en un Solo Archivo
Esta aplicación gestiona el envío de datos (POST) y la visualización de la página (GET) en el mismo archivo. Utiliza `if ($_SERVER['REQUEST_METHOD'] === 'POST')` para agrupar el procesamiento de "cuando se envía el formulario". Recibe tanto las adiciones como las eliminaciones como solicitudes POST, y después de procesarlas, se redirige a sí mismo. Esta es una técnica llamada el patrón Post/Redirect/Get (PRG), y es efectiva para prevenir el "doble envío", donde los mismos datos se envían varias veces cuando se presiona el botón de actualización del navegador.
Utilización de la Etiqueta de Entrada de Tipo Oculto (hidden)
Tanto el formulario de publicación como el botón de eliminación envían datos al mismo archivo a través de POST. Para distinguir qué proceso se desea, utilizamos `<input type="hidden">`.
De esta manera, al enviar datos ocultos que no se muestran en la pantalla, como "`action`" (qué tipo de operación) e "`id`" (a qué nota apuntar), el lado de PHP puede mirar los datos recibidos y ejecutar el proceso apropiado (añadir o eliminar).
4. Resumen y Próximos Pasos
¡Buen trabajo! Esta vez, creamos una aplicación web dinámica, un "Tablón de Anuncios de Notas Sencillas", que se integra con una base de datos y tiene funcionalidades de Crear, Leer y Eliminar. La experiencia de ver el código que escribiste funcionando realmente como una "aplicación" en el navegador debería darte una gran sensación de logro.
Este concepto de CRUD es la base de todas las aplicaciones web. A partir de aquí, puedes ampliar aún más la funcionalidad, como por ejemplo:
- Añadir una función de edición (Actualizar) para las notas.
- Integrarlo con una función de inicio de sesión de usuario para convertirlo en una lista de tareas personal.
- Reforzar la validación del contenido publicado (por ejemplo, comprobación del número de caracteres).
¡Te animamos a que utilices este tablón de anuncios como base para desafiarte a ti mismo en el desarrollo de tu propia aplicación original!