Archivo por autor

Uploadify: Subida de archivos con jQuery

jueves 31 de marzo de 2011

La última página web que hemos creado en Uhuru Labs, Navarro y Soler CAD-PLM Software, requería una sección donde los usuarios de la web pudieran mandar a nuestro cliente ficheros de un tamaño considerable. Teniendo este requerimiento empezamos a investigar por la red buscando algún uploader que no fuese el simple formulario de subida de ficheros, sino que proporcionara algo más, aparte de ser fácilmente configurable.

Enamorados como estamos de jQuery y de todo lo que lleva consigo esta potente librería en javascript, buscamos algún uploader que estuviera hecho a partir de jQuery y encontramos Uploadify. Un pequeño vistazo por encima nos hizo darnos cuenta de las grandes posibilidades que tenía este pequeño trozo de código.

Al estar utilizando WordPress como backend primero miramos si había algún plugin hecho ya que nos facilitara las cosas. Encontramos uno, pero no conseguimos hacerlo funcionar, así que lo pusimos a pelo en la plantilla que estábamos creando. Nos basamos en la última versión que tiene uploadify ahora mismo estable, la 2.1.4, ya que la beta 3.0 carecía de documentación y no queríamos embarrarnos las manos con cosas no probadas.

Una vez bajado el archivo comprimido con todos los archivos necesarios, descomprimimos en la carpeta de nuestro tema. Con lo que quedaría todo dentro de una carpeta, en nuestro caso la llamamos uploadify.

Entonces hicimos la carga de los archivos .js necesarios y de la hoja de estilos .css. Nosotros siempre cargamos las hojas de estilo en la etiqueta <head>:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.css" />

y la carga de los archivos javascript lo hacemos en el footer.php, justo antes del cierre del tag <body>:

<!-- Uploadify -->
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/jquery.uploadify.v2.1.4.js"></script>

Utilizamos el código php bloginfo(‘template_url’) para poner la dirección absoluta donde se encuentran los archivos.

Queríamos que cada cliente tuviera su propio directorio para subir archivos con lo que necesitábamos el nombre de usuario una vez logueado el cliente. Así que en la página donde queríamos el uploader pusimos este trozo de código:

<script type="text/javascript">
var files = new Array();
var user = '<?php echo $username; ?>';
var $cont = 0;
           jQuery(document).ready(function() {
             jQuery('#file_upload').uploadify({
               'uploader'  : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.swf',
               'script'    : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.php',
               'cancelImg' : '<?php bloginfo( 'template_url' ); ?>/uploadify/cancel.png',
               'folder'    : '<?php echo URI_UPLOADS.'/'.$username.'/'; ?>',
               'auto'      : false,
               'removeCompleted' : false,
               'simUploadLimit' : 3,
               'buttonText' : '<?php _e('SELECCIONAR','nysplm'); ?>',
               'multi' : true,
               'onError' : function (event,ID,fileObj,errorObj) {
                 alert(errorObj.type + ' Error: ' + errorObj.info);
               },
               'onComplete' : function (event, ID, fileObj, response, data) {
                        var json = {"name": fileObj['name'], "size": fileObj['size'], "type": fileObj['type']};
                        files[$cont] = json;
                        $cont++;
                },
               'onAllComplete' : function (event, data) {
                        //alert("Response: "+response);
                        send_confirmation(data);
                        $cont = 0;
                        files = [];
                 }
              });
           });

Donde le decimos a uploadify:

  • uploader: donde está el archivo .swf que contiene el código flash que nos permitirá subir los archivos
  • script: donde está el archivo .php que necesita uploadify para hacer la carga de los archivos
  • cancelImg: donde se encuentra la imagen que se muestra para cancelar la subida de los archivos
  • folder: el directorio donde queremos subir los archivos. En nuestro caso esto es dinámico, así el cliente subirá los archivos a su propio directorio.
  • auto: indica que la subida no será automática, sino que el usuario deberá, una vez cargados los archivos, presionar un enlace para comenzar la carga.
  • removeCompleted: indicamos que no quite de pantalla los archivos subidos.
  • simUploadLimit: establecemos a 3 ficheros el límite de subida simultánea.
  • buttonText: ya que este gran software está en inglés, utilizamos esta opción para cambiar el texto del botón de carga de archivos.
  • multi: indicamos que se pueden subir varios archivos simultáneamente.
  • onError: función que mostrará una alerta js si se produce algún error.
  • onComplete: función que se ejecutará cada vez que se suba correctamente uno de los ficheros
  • onAllComplete: función que se ejecutará cuando se hayan subido todos los ficheros.

Alguien se habrá dado cuenta del comentario que hay en el onAllComplete:

 alert("Response: "+response);

Esto sirve de mucha ayuda cuando estamos desarrollando. Puede ser que el archivo no se suba correctamente por falta de permisos. Esto para uploadify no es un error, ya que no es competencia suya, con lo que el error es devuelto a la función onAllComplete en lugar de lanzar un error la función onError. Por ello, si vemos que no se muestra ningún error pero el archivo no se sube al servidor correctamente, descomentar esta línea puede aclarar que está pasando.

Y por último, y no menos importante, habrá que poner el tag donde se cargará uploadify:

<input id="file_upload" name="file_upload" type="file" />
<a href="javascript:$('#file_upload').uploadifyUpload();"><?php _e('Subir archivos','nysplm'); ?></a>

donde ponemos el input con el identificador que cargará uploadify y un enlace para subir los archivos simultáneamente.

Y hasta aquí, esperamos haber sido de ayuda. Si alguien tiene alguna duda pues a comentar. Ayudaremos en lo que podamos.

Pods CMS

lunes 25 de octubre de 2010

Al empezar la creación de una página web siempre nos habíamos preguntado cual sería la mejor opción a la hora de elegir un CMS.

Nuestras investigaciones por internet y después de barajar varias opciones hizo que descubriéramos Pods CMS. Pods es un plugin para WordPress que lo convierte en un cms cómodo, rápido y muy fácil de configurar.

Para empezar a trabajar con Pods simplemente hay que bajar el plugin y activarlo en una instalación de WordPress. Podéis encontrar el plugin Pods CMS en la web de plugins para wordpress.

Pods funciona principalmente como un generador de tipos de contenido, desde el punto de vista del programador podríamos verlo como un generador de clases, esto es, permite definir un modelo y asignarle varios campos de diferente tipo para luego poder crear objetos de dicha clase e interaccionar con ellos. Simplemente con esta funcionalidad ya es suficiente para dejarte con los ojos abiertos, pero hay mucho más.

Con Pods puedes hacer cualquier cosa, ya que tienes muchas formas de sacar la información introducida en la base de datos:

  • Mediante páginas desde Pods en el área de administración. En estas páginas se puede poner tanto código php como caracteres comodín en las URL. Por ejemplo la página recetas/* será el handler por defecto de todas las páginas que empiecen por recetas/. Una forma de routing sencilla para el usuario…
  • Se puede también añadir código en php directamente en los templates del tema que estés utilizando en WordPress.
  • Utilizar shortcode de WordPress para incluir instancias de Pods o detalles de un Pod específico dentro de páginas o entradas de WordPress.
  • Y por último y la más importante de todas creo yo, la API de Pods, que te permite hacer CRUD directamente de cualquier Pod que tengas creado en el sistema. Esto viene de perlas por ejemplo para hacer plugins que utilicen el sistema Pods como entrada de datos en las tablas.

Por poner un ejemplo, estamos trabajando en una web donde utilizamos Pods como entrada de datos en el sistema. Una de las partes de la página principal muestra los servicios más llamativos que proporciona nuestro cliente cada mes. Para ello creamos un Pod (que llamaremos Servicios destacados) que contendrá los siguientes datos: nombre, imagen, activa, oferta del mes, enlace.

Una vez creado el Pod podemos introducir datos desde la sección Add Servicios destacados que aparece en el menú principal de Pods (esto puede cambiarse mediante Pods UI o creando un menú nuevo mediante un plugin, pero eso lo comentaremos en otro post):

Ya introducidos los datos podremos asociar una página de WordPress a un template concreto y modificar ese template para que lea los datos del pod que queremos. En este caso creamos un template con este código:

<?php
/*
Template Name: Servicios destacados
*/
<?php get_header(); ?>
<?php
	// Consultamos la base de datos en Pods. 4 servicios destacados que estén activos
	$imagenes = new Pod('servicios_destacados');
	$imagenes->findRecords('name ASC','4','t.activa = 1');
	$total_imagenes = $imagenes->getTotalRows();
?>

//Bucle por los servicios destacados encontrados para crear la página
<div id="servicios-destacados">
<?php if( $total_imagenes>0 ) : ?>
	<ul>
	<?php while ( $imagenes->fetchRecord() ) : ?>
		<?php
			// iniciamos nuestras variables
			$id        	= $imagenes->get_field('id');
			$nombre      	= $imagenes->get_field('name');
			$imagen  	= $imagenes->get_field('imagen');
			$imagen_url     = $imagen[0]['guid'];
			$enlace		= $imagenes->get_field('enlace');
			if($enlace=="") $enlace = "#";
		?>

		<li>
			<a href="<?php echo $enlace; ?>">
			<img src="<?php echo $imagen_url; ?>" alt="<?php echo $nombre; ?>" />
			</a>
		</li>
	<?php endwhile ?>
	</ul>
<?php endif ?>
</div><!-- #servicios-destacados-->
<?php get_footer(); ?>

En este template lo que hacemos es:

  1. consultar cuatro productos destacados activos
  2. hacer un bucle por los productos para mostrarlos en pantalla

Con esto hemos visto lo fácil que es meter contenido propio en una base de datos utilizando el gran backEnd que tiene WordPress y consultar ese contenido con un template. Todo esto gracias a Pods.

Por último os dejo con un video de uno de los autores rascando un poco por encima las posibilidades de Pods y de su creciente documentación: