En este tutorial prácticos crearemos una página web completa con una galería de imágenes paginada usando PHP 8, PDO para la conexión a base de datos con un diseño responsivo.
- Stack tecnológico
- Estructura del Proyecto
- Crear los objetos de base de datos
- Configurar la conexión a la base de datos
- Ejecución Local
- Captura de resultados
- Preguntas Frecuentes
En este desarrollo revisaremos acerca de una conexión segura a base de datos usando PDO, creación de la base de datos y tablas, paginación completa con navegación, diseño responsivo que se adapta a todos los dispositivos y efectos visuales al interactuar con las imágenes.
Disponible en GitHub
- Lenguaje de Programación: PHP 8
- Base de datos: MySQL
- Font Awesome
- Validación en navegador: Google Chrome
El directorio doc es para la documentación de GitHuh y fontawesome-free-6.7.2-web es en relación a los icons- podría usar el CDN para no crear dicho directorio
📖 La base de datos nos pemritirá crear las tablas para el almacenamiento y recuperación de datos regisrados.
CREATE SCHEMA IF NOT EXISTS `demo` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;--
-- Estructura de tabla para la tabla `imagenes`
--
CREATE TABLE `imagenes` (
`id` int(11) NOT NULL,
`titulo` varchar(255) NOT NULL,
`descripcion` text DEFAULT NULL,
`ruta_imagen` varchar(500) NOT NULL,
`fecha_subida` timestamp NOT NULL DEFAULT current_timestamp(),
`activa` tinyint(1) DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;--
-- Insertando datos en la tabla `imagenes`
--
INSERT INTO `imagenes` (`id`, `titulo`, `descripcion`, `ruta_imagen`, `fecha_subida`, `activa`) VALUES
(1, 'Paisaje montañoso', 'Hermoso paisaje de montañas con cielo azul', 'images/photo-1506905925346-21bda4d32df4.jpg', '2026-01-14 01:33:16', 1),
(2, 'Ciudad nocturna', 'Rascacielos iluminados en la noche', '', '2026-01-14 01:33:16', 1),
(3, 'Playas tropicales', 'Arena blanca y aguas cristalinas', 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(4, 'Bosque otoñal', 'Árboles con hojas de colores en otoño', 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(5, 'Desierto', 'Dunas de arena al atardecer', 'https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(6, 'Aurora boreal', 'Luces del norte en el cielo ártico', 'https://images.unsplash.com/photo-1502134249126-9f3755a50d78?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(7, 'Cascada', 'Agua cayendo entre rocas', 'https://images.unsplash.com/photo-1512273222628-4daea6e55abb?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(8, 'Atardecer', 'Puesta de sol sobre el océano', 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(9, 'Arquitectura moderna', 'Edificio con diseño innovador', 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(10, 'Flores silvestres', 'Campo lleno de flores coloridas', 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(11, 'Animales salvajes', 'León descansando en la sabana', 'https://images.unsplash.com/photo-1546182990-dffeafbe841d?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(12, 'Comida gourmet', 'Plato exquisitamente presentado', 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(13, 'Arte callejero', 'Mural colorido en la ciudad', 'https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(14, 'Deportes extremos', 'Surfista en una ola gigante', 'https://images.unsplash.com/photo-1506929562872-bb421503ef21?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1),
(15, 'Retrato', 'Retrato artístico en blanco y negro', 'images/photo-1507003211169-0a1dd7228f2d.jpg', '2026-01-14 01:33:16', 1),
(16, 'Espacio', 'Galaxia y estrellas distantes', 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=400&h=300&fit=crop', '2026-01-14 01:33:16', 1);La tabla también se podria crea desde el código PHP, ejecutando desde la página index.php, inclusive se podría insertar los primero registros - NO APLICA PARA ESTE EJEMPLO
- Crear el directorio config y el archivo database.php, ruta final ../config/includes
// config/database.php
class Database {
private static $instance = null;
private $pdo;
private function __construct() {
try {
// Configuración de la base de datos (ajusta según tu entorno)
$host = 'localhost';
$dbname = 'demo';
$username = 'root';
$password = '';
$this->pdo = new PDO(
"mysql:host=$host;dbname=$dbname;charset=utf8mb4",
$username,
$password,
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false
]
);
} catch (PDOException $e) {
die("Error de conexión a la base de datos: " . $e->getMessage());
}
}
public static function getInstance() {
if (self::$instance === null) {
self::$instance = new Database();
}
return self::$instance->pdo;
}
}
?>- Stack tecnológico
- XAMPP Control Panel v3.3.0
- Servidor Apache
- Servidor MySQL
- Clonar el proyecto api-restaurante
git clone https://github.com/devhadson/dsgaleria-imagenes.git- Crea la base de datos ralacional de nombre demo
- Crea las tablas imagenes
- Crea el directorio dsgaleria-imagenes en la unidad (../htdocs/dsgaleria-imagenes/) del servidor XAMPP (Apache).
- Copia los achivos al directorio creado dsgaleria-imagenes
- Carga el sitio web desde el navedagor http://localhost/dsgaleria-imagenes/
En esta solución elaborado es completamente funcional se aplica las mejores prácticas de PHP 8, incluyendo preparación de consultas para evitar inyecciones SQL y un diseño moderno con CSS Grid para la galería de imágenes.
0 Comentarios