En el desarrollo web, la creación de un espacio donde los visitantes puedan dejar comentarios es una excelente manera de fomentar la interacción. Este tutorial te guiará a través del desarrollo de un Libro de Visitas en PHP y MySQL, cubriendo desde la configuración de la base de datos hasta la implementación de un frontend responsivo y atractivo.
Te recomiendo que revises mi blog entero, actualmente tengo más de 150 aplicaciones de libre distribución que te podrían servir, aplicaciones en PHP, Javascript, Python, Node JS, así como tutoriales sobre desarrollo web.
Video Explicativo
Estructura y Funcionamiento del Proyecto
Nuestro proyecto se organizará de la siguiente manera:
libro-de-visitas/
│
├── css/
│ └── estilo.css # Estilos responsivos
│
├── js/
│ └── scripts.js # Mejoras de interactividad (opcional)
│
├── index.php # Página principal
├── guardar_visita.php # Procesamiento de entradas
│
└── .htaccess # Configuraciones del servidor (opcional)
Desarrollo del Proyecto
- Configuración de la Base de Datos: Comenzamos creando una base de datos
libro_visitasy una tablavisitaspara almacenar los mensajes de los usuarios.
CREATE TABLE visitas (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(255) NOT NULL,
mensaje TEXT NOT NULL,
fecha TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Backend con PHP:
index.php: Este archivo será el corazón de nuestro libro de visitas. Mostrará un formulario para que los visitantes puedan dejar su nombre y mensaje, además de listar todos los mensajes previos.
<?php
// Conexión a la base de datos (reemplazar con tus propios detalles de conexión)
$host = 'localhost';
$dbname = 'libro_visitas';
$user = 'root';
$password = '';
$dsn = "mysql:host=$host;dbname=$dbname;charset=UTF8";
try {
$pdo = new PDO($dsn, $user, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Error de conexión: " . $e->getMessage();
exit;
}
// Recuperar las visitas de la base de datos
$sql = "SELECT nombre, mensaje, DATE_FORMAT(fecha, '%d/%m/%Y %H:%i') AS fecha_formateada FROM visitas ORDER BY fecha DESC";
$visitas = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libro de Visitas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1>Libro de Visitas</h1>
<form action="guardar_visita.php" method="post">
<input type="text" name="nombre" placeholder="Tu nombre" required>
<textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
<button type="submit">Enviar</button>
</form>
<h2>Mensajes Anteriores</h2>
<?php if ($visitas): ?>
<ul>
<?php foreach ($visitas as $visita): ?>
<li>
<strong><?= htmlspecialchars($visita['nombre'], ENT_QUOTES, 'UTF-8') ?>:</strong>
<?= nl2br(htmlspecialchars($visita['mensaje'], ENT_QUOTES, 'UTF-8')) ?>
<em>(<?= $visita['fecha_formateada'] ?>)</em>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<p>No hay mensajes aún.</p>
<?php endif; ?>
</body>
</html>
guardar_visita.php: Procesa la entrada del formulario, insertando los datos en la base de datos.
<?php
// Conexión a la base de datos
$host = 'localhost';
$dbname = 'libro_visitas';
$user = 'root';
$password = '';
$dsn = "mysql:host=$host;dbname=$dbname;charset=UTF8";
try {
$pdo = new PDO($dsn, $user, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Error de conexión: " . $e->getMessage();
exit;
}
// Validar y sanitizar la entrada
$nombre = filter_input(INPUT_POST, 'nombre', FILTER_SANITIZE_STRING);
$mensaje = filter_input(INPUT_POST, 'mensaje', FILTER_SANITIZE_STRING);
// Verificar que el nombre y el mensaje no estén vacíos
if (empty($nombre) || empty($mensaje)) {
echo "El nombre y el mensaje son obligatorios.";
exit;
}
// Preparar la consulta SQL para insertar la visita
$sql = "INSERT INTO visitas (nombre, mensaje, fecha) VALUES (:nombre, :mensaje, NOW())";
$stmt = $pdo->prepare($sql);
// Vincular los parámetros y ejecutar la consulta
$stmt->bindParam(':nombre', $nombre, PDO::PARAM_STR);
$stmt->bindParam(':mensaje', $mensaje, PDO::PARAM_STR);
try {
$stmt->execute();
// Redireccionar de vuelta a la página principal
header('Location: index.php');
} catch (PDOException $e) {
echo "Error al guardar la visita: " . $e->getMessage();
}
Frontend y Estilos Responsivos:
css/estilo.css: Define los estilos del libro de visitas, asegurando que se vea bien en dispositivos móviles y de escritorio.
:root {
--color-primario: #007bff;
--color-secundario: #6c757d;
--color-fondo: #f8f9fa;
--color-texto: #212529;
}
/* Restablecer algunos estilos por defecto y establecer estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--color-fondo);
color: var(--color-texto);
line-height: 1.6;
padding: 20px;
}
container {
max-width: 800px;
margin: auto;
overflow: hidden;
padding: 0 20px;
}
header {
background: var(--color-primario);
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: 3px solid #darker(var(--color-primario), 10%);
}
header h1 {
text-align: center;
}
form {
margin-top: 20px;
background: #fff;
padding: 20px;
border-radius: 8px;
}
input[type="text"],
textarea {
width: 100%;
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background: var(--color-primario);
color: #fff;
border: 0;
cursor: pointer;
border-radius: 5px;
}
button[type="submit"]:hover {
background: #0056b3;
}
ul {
list-style: none;
margin-top: 20px;
}
li {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
header h1, form, ul {
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
/* Colores adicionales y efectos hover podrían ser agregados aquí */
js/scripts.js (Opcional): Añade interactividad avanzada, como validaciones del lado del cliente o envíos de formulario asincrónicos.
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
let hasError = false;
// Ejemplo de validación simple
if (document.querySelector('input[name="nombre"]').value.trim() === '') {
alert('Por favor, ingresa tu nombre.');
hasError = true;
}
if (document.querySelector('textarea[name="mensaje"]').value.trim() === '') {
alert('Por favor, ingresa un mensaje.');
hasError = true;
}
if (hasError) {
e.preventDefault(); // Previene que el formulario se envíe
}
});
});
.htaccess(Opcional): Puede contener configuraciones específicas del servidor, como URLs amigables.
Implementación y Funcionalidades Clave
- Validación y Seguridad: Es fundamental validar las entradas del usuario tanto en el cliente (JavaScript) como en el servidor (PHP) para evitar inyecciones SQL y ataques XSS.
- Estilos Responsivos: Usamos CSS para garantizar que nuestro libro de visitas se vea bien en cualquier dispositivo, mejorando la experiencia del usuario.
Repositorio del Sistema
Conclusión
Crear un Libro de Visitas con PHP y MySQL es un proyecto enriquecedor que no solo mejora tus habilidades de desarrollo web sino que también te permite experimentar con aspectos críticos como la seguridad de la aplicación, el diseño responsivo, y la interacción del usuario. A través de este proyecto, no solo has aprendido a trabajar con tecnologías del lado del servidor y del cliente sino también a pensar en cómo estructurar aplicaciones web de manera efectiva y atractiva.
Este tutorial es solo el principio. A medida que tus habilidades crezcan, podrás añadir más características, como autenticación de usuarios, moderación de comentarios, o incluso integración con redes sociales. El mundo del desarrollo web está lleno de posibilidades, y proyectos prácticos como este son el primer paso hacia la maestría en la creación de aplicaciones web dinámicas y atractivas.
Para desarrollos a medida me puedes contactar en el siguiente enlace de contacto
