Simple galería en php y mysql

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.

44 comentarios en “Simple galería en php y mysql”

  1. daniel dice:

    excelente amigo me parece un trabajo muy bueno. Sigue asi!!!!
    gracias por compartir.

  2. Sergio Alegre dice:

    Un gran aporte, era justo lo que andaba buscando. Bien implementado y explicado

  3. eder dice:

    Muuchas gracias me super sirvio para mi pagina web, ere sgeniaaaal en vddd mil graciaaas por tu post =D

  4. Rikochett dice:

    Bueno el script, felicitaciones. Falta que cuando uno pincha la X no solo elimine el registro, sino también la foto. ¿Cómo agrego el unlink?

    1. sun2012 dice:

      Hola crea una consulta en la función del que obtenga en nombre de la foto y se la pasas a la función unlink, en breve actualizo el codigo, saludos

    2. sun2012 dice:

      En el post puse la nueva función del, saludos.

  5. saira dice:

    no puedo descargar los codigos y no encuentro la clase resize por ningun lado podrias ayudarme gracias

    1. sun2012 dice:

      donde dice descargar código fuente esta el enlace a mega y en el encuentras la class resize.php o clic aqui

  6. luis dice:

    me parece genial pero me gustaria mostrar las imagenes de 1 en 1… cambiando… !! me puedes facilitar algun codigo?

    1. sun2012 dice:

      al final dice Descargar código fuente.

  7. will dice:

    hola , excelente trabajo pero me gustaría hacer que las imágenes pasen solas , como lo podría hacer.

    muchas gracias.

    1. sun2012 dice:

      Hola, pues puedes listar todas las imagenes en un slider jquery, saludos

  8. Manuel Dzul dice:

    Ya me descargue el proyecto de Mega, sin embargo me marca muchos errores a la hora de guardar una nueva imagen:

    Warning: copy(): Filename cannot be empty in C:\xampp\htdocs\gallery\5\index.php on line 15

    Warning: imagecreatefromjpeg(class/upload/slide3.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\gallery\5\class\class\resize.php on line 41

    Warning: imagecreatetruecolor(): Invalid image dimensions in C:\xampp\htdocs\gallery\5\class\class\resize.php on line 126

    Warning: imagejpeg() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\gallery\5\class\class\resize.php on line 131

    Me podrían ayudar, por fa! Saludos =D

    1. Manuel Dzul dice:

      Ya lo solucioné, el detalle estaba con la función ereg_replace dentro de la clase resize.php (linea 35).

      Se debe de cambiar por la función preg_replace.

      Antes – ereg_replace(“.*\.(.*)$”,”\\1″,$imgfile);

      Despues – preg_replace(‘/.*\.(.*)$/’,”\\1″,$imgfile);

      1. sun2012 dice:

        hola, si es que la clase es algo antigua, saludos.

  9. jhefferson dice:

    me sale este error…
    Call to a member function fetch_array() on a non-object in C:\AppServ\www\galeriaphp\index.php on line 34

    1. sun2012 dice:

      Ya creaste la base?

  10. Benito Camelo dice:

    Vos sos Dios?

  11. alvaro dice:

    una consulta, añado un campo a la tabla y ya no me permite insertar mas registros, me pueden indicar como hago, gracias

    1. sun2012 dice:

      En la clase en la función add solo agregas el nuevo campo.

      1. alvaro dice:

        eso hice, primero agregue a la tabla, luego a la funcion, pero nada, este es el codigo
        public function add($titulo, $imagen, $precio){

        parent::Conectar();

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

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

        1. sun2012 dice:

          Te falta un %s

          1. alvaro dice:

            si, eso era, muchas gracias

  12. Roberto dice:

    Excelente, me es de mucha ayuda. Consulta: ¿Cómo hago que index sea sólo para ver la galería, y no para modificar ?

    1. sun2012 dice:

      pues duplica el archivo index.php y ponle panel.php y al index le borras el enlace de subir y los de eliminar y cuando quieras subirlo entras al de panel.php, saludos.

  13. juan dice:

    tengo dos llavez fk que relacionar como hago, para una tabla de radiografia relacionada al id_diagnostico.

  14. Jesus dice:

    Hola,

    Una duda ,si subo dos imágenes con el MISMO nombre ¿Qué sucedería?

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

    Creo que la útlima imagen con el mismo nombre machacaría en el FTP a la otra que se subio ¿no?

    1. sun2012 dice:

      se sobre escribe, saludos.

      1. Jesus dice:

        Se podría resolver, cuando se sube el archivo obteniendo el ID que se le ha asignado antes en BD y ponérselo delante del nombre

        Ejemplo:
        insertamos antes de subir el archivo y con
        $ID = mysqli_insert_id();
        $imagen = “”.$ID.”-“.$foto.””;

        1. sun2012 dice:

          Si, puedes concatenarle cualquier cosa id, fecha, o verificar si ya esta que le agregue copia. Saludos.

  15. mirco dice:

    hola una consulta habría alguna forma de subir varias imágenes a la vez? saludos

    1. sun2012 dice:

      Hola si puedes editar el código del upload y poner un múltiples upload.

  16. Jorge Almaraz dice:

    Tengo una consulta acerca de tu ejercicio la verdad me sirvio de maravilla muchas gracias por compartirlo.
    Mi duda es que cuando agrego mas de 3 imagenes se hace otra pagina nueva en este caso se puede poner todas las imagenes en una sola pagina web y que codigo se modifica del mismo?
    MUCHAS GRACIAS.
    ESPERO RESPUESTA.

    1. sun2012 dice:

      En el código hay una variable que se llama $cantImg = “3”; cambialo por las imágenes que necesitas listar.

      1. Jorge Almaraz dice:

        Hola.
        Si ya le hice asi muchas gracias si me sirvio bastante.
        Diras que como molesto jeje pero ona pregunta lo que pasa es que meti una imagen de 7 mb de peso y cuando la sube no se ve reflejada la imagen me marca como erro cuando la abro.
        ¿Donde puedo modificar los parametros del tamaño para que pueda subir archivos de imagen pesados?
        SALUDOS

        1. sun2012 dice:

          hola, te comento que para esos debes modificar tu php.ini para que suba mayores a 2mb y si no tienes permisos pues tienes que crear un htaccess con la siguiente linea php_value upload_max_filesize 64M. saludos.

          1. Jorge Almaraz dice:

            Hola.
            Muchas gracias me sirvió de maravilla tu codigo es excelente, pero ahora tengo una pregunta:
            ¿Se le puede meter cookies para que si hay sesion abierta se muestre los parametros de eliminar y agregar imagen?.
            GRACIAS.

          2. sun2012 dice:

            Hola, si puedes agregar lo que quieras, sólo es la funcionalidad básica del upload. Saludos.

  17. Cami Lémuz dice:

    no me funcionó, puedes ayudarme?
    me sale esto: Tenemos problemas, regrese en unos minutos: Unknown database ‘minigaleria’

    1. sun2012 dice:

      Ya restauraste la base de datos, va en un archivo sql y si ya pues checa que MySQL este funciona.

  18. Juan Sanchez dice:

    necesito quitarle los errores del mysql_connect a mysqli_connect sin afectar lo demas

    1. sun2012 dice:

      Solo edita las 2 clases y ya, a lo demas no le afecta.

  19. Leonel dice:

    Hola, como hago para añadir todo este código a mi proyecto web?

    1. sun2012 dice:

      copiando y pegando lo que necesites. saludos.

Deja un comentario