Galería de imágenes con Bootstrap, PHP y MySQL

He recibido muchas peticiones de mis lectores para crear galería de  imágenes con la posibilidad de que dicha galería tenga un panel de administración en donde el usuario podrá: ver, crear,  editar y eliminar las imágenes; así como actualizar el texto del título y la descripción de dichas imágenes, por lo que en este tutorial voy a mostrar cómo crear una galería de imágenes con bootstrap, php y mysql.  Usando un fragmento de código desde bootsnipp  se ha creado un galería muy fácil de entender, con PHP y MySQL haremos que la carga de las imágenes sea dinámica.

Galería de imágenes con Bootstrap, PHP y MySQL

¿Qué es lo que haremos?

Diseño de la base de datos: Para este ejemplo hemos creado una base de datos llamada test_gallery la cual tiene la estructura siguiente,  para hacer funcional este script, se deberá crear manualmente la base de datos MySQL, luego ejecutar la consulta siguiente en la base de datos que hemos creado.

Conexión a la base de datos: Para conectarnos a la base de datos creada en el paso anterior debemos editar el archivo “conexion.php”,  y luego colocar los datos de conexión según corresponda a nuestro servidor de base de datos.

Archivo index.php: El archivo index.php contiene el código necesario para poder mostrar nuestras la galería de imágenes, las cuales son cargadas de forma dinámica desde nuestra base de datos MySQL.

Administración de la Galería de Imágenes

Para la administración de la galería de imágenes se ha creado un directorio llamado “admin”, y dentro de dicho directorio el archivo bannerlist.php, el cual hace de una llamada al archivo  ajax/banner_ajax.php, el código es el siguiente:

Archivo ajax/banner_ajax.php:  Se encarga de procesar las peticiones recibidas vía ajax desde el archivo creado en el paso anterior.  La funcionalidad de dicho archivo es la de listar las imágenes previamente cargadas a nuestra base de datos.

Paginar registros: el archivo “ajax/pagination.php” contiene una función que se encargará de paginar los registros usando ajax.


Creación del archivo top_menu.php:  
Siempre dentro de nuestra carpeta de administración “admin”, debemos crear un archivo llamado “top_menu.php”, el cual contiene un pequeño menú de nuestra aplicación.

El archivo footer.php: Este archivo se encuentra en la carpeta admin y contiene los créditos del auto 😀

Cargando una nueva imagen al servidor: para cargar una imagen al servidor hemos creado un archivo llamado “banneradd.php” , el cual se debe crear dentro de la carpeta admin.

El archivo creado anteriormente hace dos peticiones vía ajax:

  1. Para cargar una imagen
  2. Para registrar datos relacionados a la imagen en la base de datos MySQL

Creación del archivo ajax/upload_banner.php: 

Creación del archivo ajax/editar_banner.php: 

Editando las imágenes: Para editar las imágenes, así como el contenido relacionado a las imágenes se ha creado el archivo “banneredit.php”,  dicho archivo se encarga de mostrar un formulario con el titulo, descripción, orden y estado de la imagen; y por supuesto que también muestra la imagen que se esta editando.

Este código podría ser  útil para los desarrolladores o diseñadores web que deseen una solución rápida para mostrar galerías de imágenes en cualquier sitio web.  Te invito a que descargues el código completo mostrado a continuacion o que eches un vistazo a la demostración.

 

Demostración frontend Demostración backend Descargar