Simple galería en php y mysql

Stay hungry, stay foolish

Steve Jobs

A continuación realizare una simple galería en php y mysql, las funcionalidades básicas que contiene son:

  • Listado de imágenes con paginación
  • Agregar imágenes
  • Crear la miniatura de la imagen con la librería resize.php
  • Guardar los nombres de las imágenes en la base de datos
  • Eliminar imagenes
  • Usas la librería fancybox para mostrar las imágenes


Lo primero que crearemos es la base de datos con el nombre minigaleria y la tabla imágenes, a continuación muestro la estructura de la tabla:

CREATE TABLE IF NOT EXISTS `imagenes` (
  `idimagen` int(11) NOT NULL AUTO_INCREMENT,
  `titulo` varchar(250) NOT NULL,
  `imagen` varchar(250) NOT NULL,
  PRIMARY KEY (`idimagen`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1  ;

Después creamos una clase llamada principal en donde tendremos la función conectar y pondremos los datos para conectarnos al servidor mysql

public function Conectar() {
        $servidor = "localhost";
        $user = "root";
        $password = "";

        $link = mysql_connect($servidor, $user, $password);

        if (!$link)
            die("Tenemos problemas, regrese en unos minutos: " . mysql_error());

        mysql_query("SET NAMES 'utf8'");

        $bd = "minigaleria";

        if (!mysql_select_db($bd))
            die("Tenemos problemas, regrese en unos minutos: " . mysql_error());

        return $link;
    }

Después creamos nuestra clase imágenes la cual extendemos de la clase principal para poder realizar las consultas con la base de datos.

<?php
	require_once 'principal.php';
	class Imagenes extends Principal{
		private $imagen;
		private $tImg;	//total de imagenes

		public function __construct(){
			$this->imagen = array();
		}
		// Traemos las imagenes para el index
		public function getImagenes($inicio,$cantImg){
			parent::Conectar();
			$query = sprintf(
						"select
						idimagen,
						titulo,
						imagen
						from
						imagenes
						order by idimagen desc
						limit %s,%s;",
						parent::comillas_inteligentes($inicio),
						parent::comillas_inteligentes($cantImg)
					);

			//echo $query;exit;
			$result = mysql_query($query);

			if(!$result)
				die("Regrese más tarde");

			while ($reg = mysql_fetch_assoc($result)) {
				$this->imagen[] = $reg;
			}

			return $this->imagen;
		}
		//*****************************************************************************
		public function TotalImagenes(){
			$query = "select count(*) as total from imagenes";
			$result = mysql_query($query,parent::Conectar());

			if ($reg = mysql_fetch_array($result)) {
				$this->tImg = $reg["total"];
			}

			return $this->tImg;
		}
		//*****************************************************************************
                public function add($titulo, $imagen){

			parent::Conectar();

                                    $consulta = sprintf(
								"INSERT INTO imagenes values(
									null, %s, %s
								);",
								parent::comillas_inteligentes($titulo),
                                                parent::comillas_inteligentes($imagen)

								);
					//echo $consulta;exit;
					mysql_query($consulta);

                }
                //*****************************************************************************
                public function del($id){
			parent::Conectar();

				$query = sprintf(
						"DELETE FROM imagenes WHERE idimagen = %s;",
						parent::comillas_inteligentes($id)
					);
				mysql_query($query);
				header("Location: index.php");

		}
	}	//Fin clase
?>

Actualización del código en la función del() de la clase Imagenes, ya que solo elimina el registro de la base de datos pero no la imagen de la carpeta upload.

 public function del($id) {
                    parent::Conectar();
                    // buscamos el nombre de la imagen para eliminarlo
                    $query1 = sprintf(
                            "SELECT * FROM imagenes WHERE idimagen = %s;", parent::comillas_inteligentes($id)
                            );
                    
                    $result = mysql_query($query1);
                    $reg = mysql_fetch_array($result);
                    // eliminamos imagen
                    $ruta = "upload/".$reg["imagen"];
                    unlink($ruta);
                    // eliminamos miniatura
                    $ruta2 = "upload/tumb_".$reg["imagen"];
                    unlink($ruta2);
                    // eliminamos el registro de la base de datos
                    
                    $query = sprintf(
                            "DELETE FROM imagenes WHERE idimagen = %s;", parent::comillas_inteligentes($id)
                            );
                    
                    mysql_query($query);
                    header("Location: index.php");
                }

Creamos nuestro archivo para subir imágenes, al momento de subir crearemos nuestro tumb para ellos utilizamos la clase resize.php

require("class/resize.php")

luego la utilizamos de la siguiente manera

$thumb = new thumbnail("upload/$foto"); // ubicación de la imagen
    $thumb->size_width(300); // largo de la imagen
    $thumb->size_height(200); // alto de la imagen
    $thumb->jpeg_quality(100); // calidad de la imagen en un rango de 1 al 100%
    $thumb->save("upload/tumb_$foto"); // guardamos la miniatura

La estructura del archivo es la siguiente:

<?php
require("class/imagenes.php");
require("class/resize.php");

$obj = new Imagenes;

if (isset($_POST["guardar"])) {
    $titulo = $_POST["titulo"];
    $foto = $_FILES["foto"]["name"];
    $temp = $_FILES["foto"]["tmp_name"];
    $tamano = $_FILES["foto"]["size"];
    $tipod = $_FILES["foto"]["type"];

    $foto = str_replace(" ", "_", $foto); // Quitamos los espacios en blanco en los nombres de las imagenes
    copy($temp, "upload/$foto");
    $imagen = "$foto";

    // realiza el resize del tumb
    $thumb = new thumbnail("upload/$foto");
    $thumb->size_width(300);
    $thumb->size_height(200);
    $thumb->jpeg_quality(100);
    $thumb->save("upload/tumb_$foto");
    // Final resize
    $obj->add($titulo, $imagen);

    echo "<script type='text/javascript'>window.location='index.php';</script>";
}
?>
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Agregar imagen</title>
    </head>

    <body>
        <h2>Agregar imagen</h2>
        <form action="" method="post" enctype="multipart/form-data">
            Título<br>
            <input type="text" name="titulo"><br>
            <input name="foto" type="file" id="foto" value="" /><br>

            <input name="guardar" type="submit" class="btn" id="guardar" value="Guardar" />
        </form>

    </body>
</html>

y por ultimo el listado, para ello incluimos la class imagen y nuestra libreria fancybox y listamos de la siguiente manera.

<?php
                foreach ($datos as $d) {
                    ?>
                    <article>
                        <div class="tituloPost">
                            <?php echo $d['titulo']; ?>
                            <a href="javascript:void(0);" onclick="eliminiar('delImagen.php', '<?php echo $d["idimagen"]; ?>')" title="Eliminar imagen">[ X ]</a>
                        </div>

                        <a class="fancybox" href="upload/<?php echo $d['imagen']; ?>" data-fancybox-group="gallery" title="<?php echo $d['titulo']; ?>">
                            <img src="upload/tumb_<?php echo $d["imagen"]; ?>"/>
                        </a>

                    </article>
                    <?php
                }
                ?>

Para la parte de paginación pueden leer los post:

http://www.codedrinks.com/paginacion-de-registros-de-una-base-mysql-con-php-y-jquery-parte-1/

http://www.codedrinks.com/paginacion-de-registros-de-una-base-mysql-con-php-y-jquery-parte-2/

Descargar código fuente.