Blog de Juaniquillo

Esta es la segunda parte del artículo “Como crear un sistema para subir imágenes usando Dreamweaver, PHP y MySQL“, donde explico como integrar la funcionalidad de subir archivos (principalmente imágenes) al uso de Dreamweaver. En este artículo explicaré como organizar las imágenes que han sido subidas al servidor y también añadiremos una manera de borrar tanto las imágenes físicas como también la entrada en la base de datos. Este es el resultado del último artículo. Vamos a usar lo que ha se ha hecho hasta ahora como base para esta segunda parte.

Primero trabajaremos con el CSS. Vamos a tomar prestado el CSS de la galería hoverbox sacado del blog de Nathan Smith. No utilizaremos la funcionalidad hover, sólo la forma de organizar las imágenes.  El CSS puede ser bajado aquí. Yo he modificado un poco el CSS conforme a mis necesidades. Este es el archivo final:

/* ///////////// Hoja de estilo CSS Subir archivos con Dreamweaver 2 //////////// */

/* general */

* {padding:0px;margin:0px;}

/* formulario */

#form1{
	padding: 10px;
	width:250px;
	margin:0 auto;
	background: #F5F5F5;
	border: 1px solid #CCCCCC;
}
#form1 label{display:block;font-weight:bold;padding:5px 0;}
.enviar{display:block; padding:10px 0 5px;text-align:center;}

/* --------- Hover box CSS --------- */

a
{
	text-decoration: none;
}

#container
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 20px 50px 50px;
	position: relative;
	width: 640px;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p
{
	clear: both;
	font: 10px Verdana, sans-serif;
	text-align: center;
	margin-bottom:10px;
	text-align:center;
}

p a
{
	background: inherit;
	color: #993333;
	font-weight:bold;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

Para los thumbnails usaremos la librería PHPImagen de nuestro gran amigo okram. Con ésta podemos crear imágenes nuevas para nuestros thumbnails que se ajusten a cualquier tamaño sin que se distorsionen. Bajamos la librería de SourceForge y la incluimos en nuestro script. Para mayor organización voy a crear una carpeta llamanda “include” en cual incluiré las librerías necesarias si acaso necesitara alguna más. Para usar la librería debemos primero crear un archivo PHP el cual funcionará como nuestra imagen. Este archivo crea una instancia de la clase Imagen y a ésta le podemos pasar valores de como va a ser nuestra imagen. Este archivo lo he llamado img.php (comentado lo mejor que he podido) y lo he puesto en la raiz (root) del proyecto:

<!--?php <br ?-->
/**
 * @author Myokram
 * @copyright 2007
 */

//si se pide el source
if(isset($_GET['source'])) {
    highlight_file(__FILE__);
    exit;
}

//ruta de la imagen
$imagen = $_GET['file'];

//se busca el tamaño de la imagen
$tama_imag = getimagesize($imagen);
$ancho_img = $tama_imag[0];
$alto_img = $tama_imag[1];

//incluimos la librería
include_once "include/PHPImagen.lib.php";

//Instanciamos la clase
$imagen = new Imagen($imagen);

//si el ancho es mayor a alcho real de la imagen el ancho sera el ancho real
$nuevo_ancho = ($_GET['ancho'] //si el alto es mayor a alto real de la imagen el alto sera el ancho real
$nuevo_alto = ($_GET['alto'] resize($nuevo_ancho, $nuevo_alto, $cut);

//Si se pide que se baje la imagen
if(isset($_GET['download'])) $imagen->doDownload();
//si no se pide que se baje se muestra la imagen
else $imagen->doPrint();

?>

el root debería verse así:

Una vez tenemos los archivos en su sitio procedemos a alterar el html/php de la lista no-ordenada.  Primero que nada le agregamos la clase “hoverbox” para atar la lista al nuevo CSS. Luego usamos algunos párrafos (<p>) para mejor organización. Añadimos enlaces tanto a la imagen como uno nuevo que luego usaremos para borrar la imagen deseada. Este último enlace enviaría la variable “id” la cual será igual al id del archivo que queremos borrar y un pequeño código javascript para confirmar que la imagen está siendo borrada. También he añadido la clase “imagen_grande” al enlace de la imagen para poder atarla al javascript que usaremos para mostrar las imágenes más grandes. He decidido no incluir el nombre que el usuario decide ponerle a la imagen para poder tener mayor control del  diseño, aunque he dejado el nombre en el ALT Text:

<!--?php if ($totalRows_Recordset1 --> 0) { // Show if recordset not empty ?></pre>
&nbsp;
<ul class="hoverbox">
<ul class="hoverbox">
	<li>
<a class="imagen_grande" href="imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>"><img src="img.php?file=imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>&ancho=100&alto=75&cut" alt="<?php echo $row_Recordset1['nombre_archivos']; ?>" width="75" height="100" /></a>

<a onclick="javascript: if(!confirm('¿Está seguro?')) return false;" href="include/borrar.php?id=<?php echo $row_Recordset1['id_archivos']; ?>">borrar</a></li>
</ul>
</ul>
&nbsp;
<pre>
<!--?php  } // Show if recordset not empty ?-->

Como pueden ver he enlazado el thumbnail a la imagen original pero el “src” (source) del mismo lo he cambiado al archivo img.php y le he pasado varios parámetros GET. A continuación discuto los siguientes valores. El “Query string” GET es el siguiente: “file=imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>&amp;ancho=100&amp;alto=75&amp;cut“. Separamos los valores por el

&

, el cual es el entity HTML del &. Las variables son las siguientes:

1. file – Es igual a la ruta de la imagen, en este caso la ruta (imagenes) más la variable del nombre del archivo sacada de nuestra base de datos.
2. ancho – el ancho en pixeles deseado de la imagen, en este caso 100.
3. alto – el altoen pixeles deseado de la imagen, en este caso 75.
4. cut – se incluye si se quiere forzar la imagen a ser del tamaño especificado. el script “croppea” la imagen para llevarla a ese tamaño.

Para mostrar la imagen usaremos un lightbox cualquiera. En este caso he usado la versión 1.3.2 de  Fancybox, un plugin de jQuery el cual crea efectos de lightbox muy atractivos. Incluimos jQuery primero. Yo ya había incluido jquery y el UI de jquery desde google en la primera parte de este artículo. Bajamos Fancybox y agregamos la carpeta completa a nuestroa carpeta “js”, donde guardamos todo nuestro javascript. Fancybox también incluye los plugin de easing y de mousewheel, ambos para jQuery. No tenemos la necesidad de usar el de mousewheel en este tutorial pero sí el de easing. Incluimos tanto el CSS de Fancybox y los plugins de Fancybox y de easing al HTML. Al final yo quedé con algo así:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.2/fancybox/jquery.easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.pack.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>

Luego creamos el javascript que se encargará de crear los lightboxes Fancybox. En el archivo “javascript.js” que está en el la carpeta “js” excribimos:

$(document).ready(function(){

	$('.imagen_grande').fancybox({
		'transitionIn':'elastic',
		'transitionOut':'elastic',
	});

})

Si todo sale bien podremos ver el efecto “lightbox” de Fancybox al darle clic a las imágenes. Fancybox se encarga de re-dimensionar la imagen de acuerdo a nuestra resolución, algo que no hace el plugin lightbox original.

Sólo nos falta habilitar el enlace de borrar imágenes. Para esto usaremos la función de dreamweaver de borrar record y la modificaremos un poco para que también se borre la imagen real. Hay dos formas de usar la función de borrar de dreamweaver: incluir el script en la misma página donde está lo que se quiere borrar o tener la funcionalidad en una página aparte. Yo voy a optar por la segunda opción en este caso.

Creamos un archivo PHP nuevo y lo llamamos “borrar.php” y lo incluimos en la carpeta “include”. Abrimos ese archivo, borramos todo el HTML y vamos al panel de “Comportamientos del servidor” (Server Behaviors). Le damos clic al símbolo de más (+) y escogemos “Eliminar registro”:

En la ventana que sale escogeremos “primary key value” en el primer campo y después  la conexión correspondiente, la tabla de archivos, el campo del id de la tabla (en este caso id_archivos), escogemos “numérico” (numeric), escogemos parámetro URL (ya que enviaremos la variable por medio del URL String), especificamos que la variable se va a llamar “id” y por último escogemos la página donde será enviado el usuario después de la operación (en este caso “../index.php”).

Con esto es suficiente para eliminar un record si enviamos el id correspondiente en el URL Query String. Ahora necesitamos agregar el código que borre la imagen real del disco duro. Para eso necesitamos saber el nombre del archivo que vamos a borrar. Por eso debemos hacer una consulta a la base de datos que devuelva el record que vamos a borrar antes de borrarlo. Para eso, hacemos un recorset de esta con un filtro de que el campo “id_archivos” del la tabla “archivos” sea igual a la variable URL “id”:

Con este recordset tendremos el siguiente código:

$colname_Recordset1 = "-1";
if (isset($_GET['id'])) {
  $colname_Recordset1 = $_GET['id'];
}

mysql_select_db($TU_BASE_DE_DATOS, $TU_CONECCION);
$query_Recordset1 = sprintf("SELECT * FROM archivos WHERE id_archivos = %s", GetSQLValueString($colname_Recordset1, "int"));
$Recordset1 = mysql_query($query_Recordset1, $TU_CONECCION) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

mysql_free_result($Recordset1);

Necesitamos mover ese código dentro de la condición del código producido por la función de borrar, osea, después de:

if ((isset($_GET['id'])) && ($_GET['id'] != "")) {

También necesitamos recuperar el nombre del archivo. Podemos arrastrarlo de el panel del Panel Vinculaciones (Bindings Panel). Lo ponemos antes de:

mysql_free_result($Recordset1);

Esto nos da la variable que contiene el nombre del archivo, en mi caso:

$row_Recordset1['archivo_archivos']

Lo mejor es crear una variable para almacenar el nombre y la ruta del archivo. Lo hacemos de esta forma:

//variable para almacenar el nobre del archivo
$nombre_archivo = '../imagenes/'.$row_Recordset1['archivo_archivos'];

Para borrar el archivo lo mejor es verificar primero si existe para no tener errores PHP. Para eso usamos la función file_exists(). Si existe entonces lo borramos con la función unlink():

//verificamos si el archivo existe. si existe lo borramos
if(file_exists($nombre_archivo)) unlink($nombre_archivo );

Ya con ésto la galería queda lista. Se le podría agregar también una paginación pero eso lo dejo a la discreción de ustedes. La última parte de este tutorial podría ser añadir una paginación de las de Dreamweaver, o una usando la librería PHPaging, también hecha por el gran okran, así como también hablar más acerca de las validaciones PHP y Javascript.

• Demo
• Descargar