Construye un tablero de estado impresionante

Spanish (Español) translation by Valentino (you can also view the original English article)

Cuando Panic dio a conocer su panel de estado al mundo, quedé impresionado e inspirado. En el tutorial y el screencast de hoy, te mostraré cómo crear un tablero de estado similar.

Visión general

Esto es lo que tendrá nuestro tablero de estado: en la parte superior, habrá un gráfico de páginas vistas; Se necesitaría otro tutorial para obtener esos datos de Google Analytics, así que por hoy, solo usaremos algunos datos aleatorios. Luego, extraeremos nuestros próximos eventos de Google Calendar. Tendremos una tabla de estado del proyecto, extrayendo datos de una base de datos. Finalmente, mostraremos tweets de nuestra "empresa" y otras personas que mencionen a nuestra empresa. ¡Vamos!

Antes de comenzar, debo mencionar que los íconos que uso en este proyecto provienen del conjunto gratuito de Smashing Magazine titulado On Stage; desafortunadamente, no puedo incluirlos en los archivos de demostración, pero aquí hay una lista de los nombres de archivo a los que les renombré para el proyecto (la mayor parte del proyecto depende de los nombres de los archivos); He cambiado el tamaño de los iconos a 64x64px; Debería ser obvio a medida que avanza en el tutorial qué iconos pertenecen a dónde.

bazquirk.png
behind.png
complete.png
foobar.png
gadget.png
gizmo.png
jane.png (editted buddy.psd)
joe.png (editted buddy.psd)
john.png (editted buddy.psd)
ontime.png
sally.png (editted buddy.psd)
waiting.png
widget.png

Paso 1 Comienza con el marcado

Si bien nuestra página terminada tendrá contenido dinámico, primero crearemos la interfaz utilizando contenido estático para configurar todo, y luego trabajaremos en el código del lado del servidor más tarde.

Aquí está nuestro caparazón preliminar:

 
	<!DOCTYPE html> 
	<html> 
	<head> 
	    <meta charset='utf-8' /> 
	    <title>Status Board</title> 
	    <link rel="stylesheet" href="default.css" /> 
	</head> 
	<body> 
	<div id="wrap"> 
	    <div id="data"></div> 
	    <div id="projects"></div>  
	    <div id="twitter"></div> 
	</div> 
	</body> 
	</html>

Nada difícil: tres divs en un div envolvente. Echemos un vistazo a los datos div # ahora mismo. Dentro de él, pondremos dos divs:

1
2	<div id="visits"></div>
3	<div id="schedule">
4	<h1>Schedule</h1>
5	<ul>
6	<li><em>3/22</em>Meet with Chris <small>details go here</small></li>
7	<li><em>3/26</em>Holiday</li>
8	<li><em>4/15</em>Foobar Deadline</li>
9	<li><em>5/24</em>Office Party</li>
10	</ul>
11	</div>

Completaremos el número de visitas div# con JavaScript en un momento. En cuanto a div # schedule, hemos incluido una lista. Más tarde, extraeremos estos datos de Google Calendar, pero esto nos dará algo sobre lo que construir la interfaz. La parte importante es que hemos envuelto la fecha del evento en etiquetas EM y los detalles del evento en etiquetas pequeñas.

La siguiente sección principal es div # proyectos. Esto nos mostrará la información más reciente sobre los proyectos en los que está trabajando nuestra pequeña empresa imaginaria. Al igual que el programa, lo extraeremos de una fuente de datos (una base de datos, en este caso); por ahora, es solo una tabla estática:

 
	<table> 
	    <tbody> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/gizmo.png" /></td><td>Gizmo</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/ontime.png" />On Time</td> 
	            <td>Joe Sally</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/widget.png" /></td><td>Widget</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/behind.png" />Behind</td> 
	            <td>John Joe Jane</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/gadget.png" /></td><td>Gadget</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/complete.png" />Complete</td> 
	            <td>Sally Jane</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/foobar.png" /></td><td>Foobar</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/waiting.png" />Waiting</td> 
	            <td>John Joe</td> 
	        </tr> 
	        <tr> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/bazquirk.png" /></td><td>Bazquirk</td> 
	            <td><img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/ontime.png" />On Time</td> 
	            <td>Sally Jane Joe</td> 
	        </tr> 
	    </tbody> 
	</table>

El div # twitter nos mostrará dos grupos de tweets: los realizados por nuestra empresa y los que mencionan nuestra empresa. Usaremos twitterlib de Remy Sharp para hacer esto. Aquí está el marcado que necesitaremos:

1
2	<div id="our_tweets"></div>
3	<div id="their_tweets"></div>

Finalmente, importaremos los scripts que estamos usando:

jQuery
twitterlib
Complemento jQuery Flot
- ExplorerCanvas para IE (necesario para Flot)
Complemento de animación de pausa / reanudación de jQuery

Por supuesto, en producción, pondrías todo esto en un archivo.

 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
	<script type="text/javascript" src="js/twitterlib.min.js"></script> 
	<!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]--> 
	<script type="text/javascript" src="js/jquery.flot.min.js"></script> 
	<script type="text/javascript" src="js/jquery.pauseanimate.js"></script> 
	<script type="text/javascript" src="js/statBoard.js"></script>

El último archivo aquí, statBoard.js será nuestra propia creación.

Transmisión de pantalla completa

Paso 2 Embellecerlo con CSS

Antes de comenzar con CSS, así es como se verá nuestro producto terminado; esto debería hacer que el CSS sea un poco más claro.

Primero, configuraremos el cuerpo y h1, así como también configuraremos todos nuestros divs de contenido principal para contener a sus hijos.

 
	body { 
	    background: #f3f3f3; 
	    font:bold 25px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
	    color:#494949; 
	} 
 
	h1 { margin:0; padding:0; font-size:40px; } 
 
	#wrap > div { overflow:hidden; }

A continuación, consideremos ese primer div de contenido, que tiene una identificación de datos.

 
	#data { 
	    margin-bottom:40px; 
	} 
	#visits { 
	    width:48%; 
	    margin-right:2%; 
	    float:left; 
	    font-size:12px; 
	} 
	#tooltip { 
	    position: absolute; 
	    display:none; 
	    padding: 2px 5px; 
	    background:#494949; 
	    color:#fefefe; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	}

Le daremos a ese div un margen inferior de 40px, solo para respirar. Luego pasaremos a su primer hijo, div # visitas: flotar hacia la izquierda, establecer su ancho y margen derecho, y reducir el tamaño de la fuente.

¿De dónde viene este div de información sobre herramientas? Se insertará cuando creemos el gráfico de análisis usando un complemento jQuery. Aquí, configuramos los estilos visuales, además de posicionarlos absolutamente y ocultarlos. Cuando pasamos el cursor sobre puntos en nuestro gráfico, se colocará y luego se desvanecerá.

Veamos a continuación div # schedule:

 
	#schedule  { 
	    float:left; 
	    background:#494949; 
	    color:#f3f3f3; 
	    width:44%; 
	    padding:3%; 
	    overflow:hidden; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	} 
	#schedule ul { 
	    list-style-type:none; 
	    margin:0; 
	    padding:0; 
	} 
	#schedule li { 
	    margin-bottom:5px; 
	    width:1000px; 
	} 
	#schedule em { 
	    font-style:normal; 
	    background:#aa3636; 
	    margin-right:10px; 
	    display:inline-block; 
	    width:50px; 
	    padding:0 10px; 
	    border-radius:15px; 
	    -moz-border-radius:15px; 
	    -webkit-border-radius:15px; 
	} 
	#schedule small { 
	    font-size:12px; 
	    color:#bababa; 
	    font-style:italic; 
	}

Esto no debería ser demasiado difícil de entender; queremos que div # schedule esté a la derecha de div # visitas, por lo que lo flotamos hacia la izquierda y nos aseguramos de que el ancho + relleno sea igual al 50%. Luego agrega un poco de color y afeita las esquinas. El desbordamiento: lo oculto es importante. Recuerda que estaremos ingresando los detalles del evento; no queremos que los detalles se ajusten a más de una línea, por lo que los dejaremos desbordar y luego ocultaremos el desbordamiento.

El estilo de ul y li es bastante simple; le hemos dado al li un ancho de 1000px para que esos detalles no se ajusten.

A continuación, tenemos el ems dentro de div # schedule. Aquí es donde irán nuestras citas. Eliminamos la cursiva habitual estableciendo el estilo de fuente en normal. Al configurar la pantalla en bloque en línea, podemos establecer un ancho en 50px; dado que mostramos la fecha en el formato m / d, esto debería verse bien en todos los casos. Y por supuesto, redondear las esquinas.

Finalmente, para los detalles, usamos la etiqueta pequeña; estableceremos el tamaño de fuente, el estilo de fuente y el color.

La siguiente sección principal de nuestro tablero de estado es div # proyectos.

 
	#projects table { 
	    width:100%; 
	    border-spacing:5px;  
	} 
	#projects td { 
	    padding:2px; 
	    background:#efefef; 
	    border-radius:3px; 
	    -moz-border-radius:3px; 
	    -webkit-border-radius:3px; 
	} 
	#projects td:not(:last-child) { 
	    text-align:center; 
	} 
	#projects img { 
	    vertical-align:middle; 
	}

Nos aseguraremos de que nuestra tabla ocupe todo el ancho de la página; también daremos a las celdas algo de margen con espaciado de bordes. Le daremos a cada celda un poco de acolchado y redondearemos ligeramente las esquinas. Luego, usemos algunos selectores CSS3 para centrar el texto en cada celda, excepto la última; si el navegador no admite: not () o: last-child, esta regla se ignorará y todas las celdas permanecerán alineadas a la izquierda: no es gran cosa. Finalmente, centraremos verticalmente las imágenes.

Solo nos queda el div de twitter:

 
	#twitter > div {  
	    overflow:hidden; 
	    font-size:20px; 
	} 
 
	#twitter ul { 
	    list-style-type:none; 
	    width:5000px; 
	    position:relative; 
	} 
	#twitter li { 
	    float:left; 
	    margin-right:10px; 
	} 
	#twitter img { 
	    vertical-align:middle; 
	    margin-right:10px; 
	    border:0; 
	    height:20px; 
	    width:20px; 
	}

Actualmente, nuestro div # twitter tiene solo dos divs vacíos dentro. Pronto cargaremos los tweets con JavaScript, pero esto es lo que queremos que suceda: cada div dentro de div # twitter será una marquesina, desplazando tweets por la pantalla. Por lo tanto, configuraremos esos divs para ocultar su desbordamiento y también configuraremos su fuente en 5px menos que el resto de la página. Para las listas, eliminaremos las viñetas, la posicionaremos relativamente (para que podamos animar la posición correcta para hacer el marco) y estableceremos el ancho en 5000px; Explicaré el ancho una vez que lleguemos al JavaScript. Cada elemento de la lista (cada tweet) se flotará a la izquierda y se le dará un poco de margen derecho. Finalmente, las imágenes (mostraremos imágenes de perfil de Twitter) tienen el estilo apropiado.

Paso 3 Interactuar con él con JavaScript

¡Vamos al JavaScript! Para no saturar el espacio de nombres global, crearemos una única función que devolverá los métodos de nuestro tablero de estado. Aquí está el caparazón con el que comenzaremos:

 
	var statBoard = function () { 
	    return { 
	        graphVisits    : function (selector) {}, 
	        twitterize     : function (selector, fn, subject) {}, 
	        iconizeWorkers : function (selector) {} 
	    } 
	}

Primero construyamos graphVisits; probablemente querrás obtener análisis de Google Analytics o de la aplicación de estadísticas que elijas. Sin embargo, solo vamos a generar algunos datos aleatorios para nuestro ejemplo.

Primero, configuraremos nuestras variables:

 
	var el = $(selector), 
	    data = [], prev = null, 
	    showTooltip = function (x, y, contents) { 
	        $('<div />', { 
	            id : 'tooltip', 
	            text : contents, 
	            css : { 
	                top: y + 5, 
	                left: x + 5 
	            } 
	        }).appendTo('body').fadeIn(200); 
	    };

Respectivamente, tenemos el elemento en el que insertaremos el gráfico, la matriz de datos que pasaremos al complemento Flot jQuery, prev, que verás en uso, y una función showTooltip. Esto crea esa información sobre herramientas div # que diseñamos anteriormente, la agrega al cuerpo y la desvanece.

 
	el.height($('#schedule').outerHeight()); 
 
	for (i = 0; i < 32; i++) { 
	    data.push([new Date(2010, 2, i).getTime(), Math.floor(Math.random() * 6000)]); 
	}

A continuación, establecemos la altura del elemento que contendrá el gráfico; el complemento de flot requiere esto. Lo configuramos a la misma altura de div # schedule; El método externalHeight de jQuery devuelve la altura del objeto, incluidos el relleno y el borde. Luego, llenaremos nuestros datos de matriz; el complemento de flot acepta una matriz de matrices, cada una de las cuales tiene una coordenada xey. Para nuestras coordenadas x, usaremos una fecha de JavaScript; los valores que pasamos al constructor Date son el año, el mes y el día (hay más, para establecer la hora). Establecemos el año en 2010 y el mes en marzo (se basa en cero, por lo que enero = 0). Esto nos permitirá tener fechas en la parte inferior. Estableceremos la coordenada y en un número aleatorio.

(Nota: En el screencast, dije erróneamente que el parámetro de año se basaba en la época de Unix, por lo que poner 10 resultaría en 1980; esto es incorrecto; lo que he explicado arriba es correcto).

1
2	$.plot(el, [{ data: data, color:'#494949', lines : { show: true }, points : { show : true} }],
3	{ xaxis : { mode : 'time', timeformat : '%b %d' }, grid : { hoverable : true, clickable : true } });

Ahora creamos el gráfico; llamaremos al método plot y pasaremos el elemento que contendrá el gráfico como primer parámetro. El segundo parámetro es una matriz, con un solo objeto: los datos serán nuestra matriz de datos, el color será el color de nuestra línea gráfica; luego, configuramos los objetos de líneas y puntos para mostrar: verdadero; las líneas "conectarán los puntos" en nuestro gráfico, y los puntos harán que cada punto de datos sea más prominente. Podríamos poner varios objetos como este en la matriz del segundo parámetro para graficar múltiples conjuntos de datos.

El último parámetro es otro objeto; establece algunas propiedades en el gráfico. Configuraremos el eje x para que esté en modo de tiempo; el formato de hora es cómo queremos que se formatee la fecha. Según la documentación de Flot, "% b% d" dará uso al mes y al día. Luego, configuramos la cuadrícula habilitada como flotante y en la que se puede hacer clic.

 
	el.bind('plothover', function (event, pos, item) { 
	    if (item) { 
	        if (prev != item.datapoint) { 
	            prev = item.datapoint; 
	            $('#tooltip').remove(); 
	            showTooltip(item.pageX, item.pageY, item.datapoint[1]); 
	        } 
	    } 
	    else { 
	        $('#tooltip').remove(); 
	        prev = null; 
	    } 
	});

El siguiente paso es crear la funcionalidad de información sobre herramientas. El evento plothover se activa cada vez que pasas el cursor sobre el gráfico y pasa tres parámetros a los controladores de eventos: el evento, la posición y el punto de datos sobre el que se desplaza. Primero, verificaremos si estamos en un artículo. Si es así, comprobaremos si prev no es igual a la posición del punto. Si no es así, significa que no estábamos en este punto en el último plothover (podríamos movernos en un elemento, recuerde). Por lo tanto, registraremos en qué punto estamos, nos aseguraremos de que la información sobre herramientas no se muestre en otro lugar y mostraremos la información sobre herramientas en la nueva posición. Si prev es igual al punto de datos actual, no necesitamos hacer nada, porque la información sobre herramientas ya se muestra. Finalmente, si no estamos en un punto, nos aseguraremos de que la información sobre herramientas no se muestre y estableceremos prev de nuevo en nulo.

Ese es el final de nuestra función graphVisits; pasemos a nuestra función twitterize:

1
2	twitterize : function (selector, fn, subject) {
3	var container = $(selector);

Twitterize toma tres parámetros: el selector del elemento en el que cargar los tweets, el nombre de la función que queremos llamar en la biblioteca twitterlib y el asunto de nuestra llamada de twitter; esto podría ser un nombre de usuario si usamos la función de línea de tiempo, o podría ser una cadena de búsqueda si usamos la función de búsqueda.

Una vez que estemos en la función, obtendremos el contenedor de tweets.

 
	twitterlib[fn](subject, { limit : 10 }, function (tweets) { 
	    var list = $('<ul />'), i, 
	        len = tweets.length, 
	        totalWidth = 0;

A continuación, llamamos twitterlib. Usamos el nombre de la función pasado y establecemos el asunto como el primer parámetro. Luego, usamos el objeto de opciones para decirle a la biblioteca que solo nos obtenga los diez últimos tweets que coincidan con nuestra solicitud. Finalmente, agregamos una función de devolución de llamada, que toma los tweets que obtenemos de twitterlib. Lo primero es lo primero, establecemos nuestras variables. Los verá todos en uso.

 
	for (i = 0; i < len; i++ ) { 
		$('<li><a><img/></a></li>') 
				.find('a') 
				.attr('href', 'http://www.twitter.com/' + tweets[i].user.screen_name + '/status/' + tweets[i].id) 
				.end() 
				.find('img') 
				.attr('src', tweets[i].user.profile_image_url) 
				.end() 
			.append(this.ify.clean(tweets[i].text)) 
			.appendTo(list); 
	} 
	container.append(list);

Ahora recorremos cada tweet del grupo. Crearemos un fragmento HTML de un elemento de lista y una imagen envuelta en un ancla en su interior. Buscamos el ancla, establecemos el href y usamos end () para volver al li. Luego buscamos la imagen, configuramos la fuente y regresamos al elemento de la lista. Finalmente, agregamos el texto del tweet al elemento de la lista, que lo colocará después del ancla. Ejecutamos este texto a través de twitterlib.ify.clean; esto vinculará los enlaces, menciones y hashtags. Luego, agregaremos el elemento de la lista a la lista desordenada que creamos.

Cuando hayamos trabajado con todos nuestros tweets, agregaremos la lista al contenedor.

Flashback: ¿recuerdas cómo configuramos el ancho de #twitter ul en 5000px? Hicimos esto para que cada tweet estuviera en una sola línea y no se ajustara. Esto se debe a que ahora obtendremos el ancho de cada elemento de la lista.

 
	$('li', list).each(function (i, el) { 
	    totalWidth += $(el).outerWidth(true); 
	}); 
 
	list.width(totalWidth);

Recorreremos cada elemento de la lista (podemos usar la lista como un parámetro de contexto) y usaremos la función outerWidth para obtener el ancho. Al igual que outerHeight, outerWidth incluye el borde y el relleno, y (ya que hemos pasado en true) los márgenes. Agregamos todos esos anchos a nuestra variable totalWidth. Ahora totalWidth es el ancho correcto para nuestra lista, así que lo configuraremos.

 
	function scrollTweets() { 
	    var rand = totalWidth * Math.floor(Math.random() * 10 + 15); 
	    list.startAnimation({ 
	        right: totalWidth 
	    }, rand, 'linear', function () { 
	        list.css('right', - container.width()); 
	        scrollTweets(); 
	    }); 
	} 
 
	scrollTweets();

Siguiente orden del día: haz que la lista se desplace. Calcularemos la velocidad de desplazamiento multiplicando el ancho total por un número entero aleatorio entre diez y quince. Luego, hacemos la animación. Normalmente, usaríamos la función animada, pero estamos usando el complemento pauseanimate, así que usamos la función startAnimation. Queremos animar el valor correcto a totalWidth. El parámetro de duración obtiene el número aleatorio. Estableceremos la aceleración en 'lineal'; de forma predeterminada, es 'swing', que entrará fácilmente al principio y saldrá al final. Por último, una función de devolución de llamada: estableceremos la posición correcta de nuestra lista para que el ancho del contenedor sea negativo. Esto lo empujará hacia la derecha de la pantalla. Luego, llamaremos a nuestra función scrollTweets para que se reinicie el ciclo.

Fuera de nuestra función ScrollTweets, la llamaremos para comenzar.

La última parte de twitterize son los eventos de desplazamiento:

 
	    list.hover(function () { 
	        list.pauseAnimation(); 
	    }, function () { 
	        list.resumeAnimation(); 
	    }); 
	}); // end of twitterlib call

Cuando pasamos el cursor sobre nuestra lista de tweets, usaremos el complemento pauseanimate para pausar la animación temporalmente. Usaremos la función resumeAnimation en la función mouseout. ¡Ese es el fin de twitterize!

Nuestra última función cambiará los nombres de los trabajadores por sus imágenes.

 
	iconizeWorkers : function (selector) { 
	    $(selector).each(function (i, el) { 
	        var el = $(el),  
	            workers = el.text().split(' '), 
	            imgs = ''; 
 
	        $.each(workers, function (i, val) { 
	            imgs += '<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/' + val.toLowerCase() + '.png" alt="'+ val + '" />'; 
	        }); 
 
	        el.html(imgs); 
	    }); 
	}

No es demasiado complicado; Obtendremos los elementos que coinciden con el selector que se ha pasado e iteraremos sobre cada uno de ellos. Obtenemos su contenido, lo dividimos en los espacios y lo almacenamos en una matriz llamada trabajadores. Luego, para cada trabajador, agregamos una imagen a la cadena imgs, que usa los nombres para obtener las imágenes. Luego, reemplazamos los nombres con la cadena imgs, usando el método html de jQuery.

Por supuesto, tenemos que llamar a nuestros métodos desde dentro de nuestro HTML:

 
	<script type="text/javascript"> 
	var board = statBoard(); 
 
	board.graphVisits('#visits'); 
	board.iconizeWorkers('#projects tr td:last-child'); 
	board.twitterize('#our_tweets', 'timeline', 'nettuts'); 
	board.twitterize('#their_tweets', 'search', 'nettuts'); 
 
	</script>

Paso 4 Enciéndalo con PHP

El tramo final: obtener los datos con PHP. Primero, obtengamos los datos del proyecto de una base de datos. Esto requiere que hayamos creado una base de datos. Probablemente esté bastante familiarizado con el proceso: encendí PhpMyAdmin e hice una base de datos llamada 'proyectos'. Luego, creé una tabla llamada 'project_status'. Tiene cuatro campos: id (la clave principal que se incrementa automáticamente), nombre, estado y trabajadores. Aquí están los datos que ingresé:

La función que obtiene estos datos no es difícil. ¡Crea un archivo llamado statboard.php y entremos en él!

 
	function getProjects() { 
	    $sql = new mysqli('localhost', 'root', '', 'projects')  or die('could not connect'); 
	    $result = $sql->query("SELECT * FROM project_status"); 
	    $html = ""; 
 
	    while ($row = $result->fetch_object()) { 
	        $name   = ucwords($row->name); 
	        $status = ucwords($row->status); 
	        $img    = str_replace(" ", "", $row->status); 
 
 
	        $html .= "<tr><td><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/$row->name.png' alt='$name' /></td>"; 
	        $html .= "<td>$name</td><td><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/062_status_board/images/$img.png' alt='$status' /> $status</td>"; 
	        $html .= "<td>$row->workers</td>"; 
	    } 
	    return $html; 
	}

Primero creamos una instancia de la clase mysqli y la conectamos a nuestras bases de datos. A continuación, consulte la base de datos para todas las filas. Crearemos una cadena llamada $ html, que devolveremos al final. Luego usaremos un ciclo while para repasar cada fila que recibamos. En nuestro ciclo, establecemos tres variables. Obtenemos el nombre y el estado, y usamos la función PHP ucwords para capacitar las primeras letras de cada palabra. Entonces, obtenemos el estado. Queremos usar este estado como el nombre de los iconos de estado, por lo que usaremos str_replace para eliminar cualquier espacio en la etiqueta de estado. Finalmente, concatenamos la fila de la tabla. Estas tres líneas producirán el mismo HTML que usamos al hacer prototipos.

Una vez que hayamos recorrido cada fila, devolveremos la cadena HTML. Para usar esto en nuestra página, primero tendremos que obtener statBoard.php:

 
	<?php  
	    require('statBoard.php'); 
	?> 
	<!DOCTYPE html>

Luego, eliminaremos la tabla que codificamos anteriormente y agregaremos esto en su lugar:

1
2	<table>
3	<?php echo getProjects(); ?>
4	</table>

Nuestro último trabajo es extraer el calendario de Google Calendar; primero, deberás configurar tu calendario como público; luego, deberás obtener la fuente XML para el calendario.

Haremos esto en dos funciones; comencemos el primero:

 
	function parseCalendarFeed($feed_url, $count = 4) { 
	    $content = file_get_contents($feed_url); 
	    $x = new SimpleXmlElement($content); 
	    $entries = $x->entry; 
	    $arr = array();

Conoce la función parseCalendarFeed; se necesitan dos parámetros: la URL del feed y la cantidad de elementos que queremos obtener. Comenzamos obteniendo el contenido de la URL y creamos un SimppleXmlElement con él. Si inspeccionas ese objeto, verás que los eventos en el calendario están dentro del elemento de entrada; lo almacenaremos para tu uso posterior. Finalmente, crearemos la matriz que devolveremos al final.

1
2	for ($i = 0; $i < count($entries); $i++) {
3	$item = explode("<br />", $entries[$i]->content);
4	array_unshift($item, (string)$entries[$i]->title);

A continuación, recorreremos cada elemento en $ entradas; queremos obtener el elemento de contenido y el elemento de título. Sin embargo, hay un problema con el elemento de contenido; tiene el formato siguiente:

 
	When : [date here] 
	<br /> 
	<br /> 
	Event Status: confirmed 
	<br /> 
	Event Description: [description here]

Entonces, usaremos el método php explode para dividirlo en una matriz, llamada $item, con cada línea como miembro de la matriz. Luego, obtendremos el título de la entrada y usaremos array_unshift para agregarlo al frente de $item.

Cuando termine, tendremos una matriz que se ve así:

 
	array ( 
	    [0] => [event title] 
	    [1] => When: [the date] 
	    [2] => 
	    [3] => Event Status: [the status] 
	    [4] => Event Description: [the description] 
	)

1
2	foreach($item as $k => $v) {
3	if ($k === 2 \|\| $k === 3) {
4	unset($item[$k]);
5	} else {
6	$temp = explode(":", $v);
7	$item[$k] = (isset($temp[1])) ? trim($temp[1]) : $temp[0];
8	}
9	}

Ahora recorremos cada miembro de la matriz $ item; no necesitamos miembros con índice 2 o 3, así que los desarmaremos. Para el resto de los elementos, los dividiremos por coma. Sin embargo, tenemos que usar una expresión ternaria para restablecer el valor, porque el primer elemento (el título) no tiene coma. Si hay un segundo elemento en la matriz temporal, estableceremos el valor en la matriz $ item en la segunda parte, que contiene la información que queremos. Si no tiene una segunda pieza (que será el caso del título), usaremos la primera. Ahora nuestra matriz se ve así:

 
	array ( 
	    [0] => [event title] 
	    [1] => [the date] 
	    [4] => [the description] 
	)

Perfecto . . . excepto que los índices son incorrectos.

 
	        $item = array_values($item); 
	        $item[1] = explode(" ", substr($item[1], 4, 6)); 
	        $months = array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'); 
	        $item[1][0] = array_search($item[1][0], $months) + 1; 
	        $item[1] = implode($item[1], '/'); 
 
	        array_unshift($arr, $item); 
	    } // end for 
	    $arr = array_slice($arr, 0, $count); 
	    return $arr; 
	} // end parseCalendarFeed

Para cuidar los índices, usamos la función array_values y los restablecemos. Ahora lo único que queda es formatear la fecha. Nos gustaría que la fecha tenga el formato 'm / d'. La fecha tiene un índice de 1 en nuestra matriz de elementos, por lo que estableceremos explotar ese miembro; pero no explotamos todo el miembro. Obtenemos una subcadena, comenzando en el índice de caracteres 4 y pasando por 6 caracteres. Esto nos dará el nombre del mes y el número de día.

Necesitaremos comparar el nombre del mes con otra matriz, por lo que creamos la matriz $ meses. Luego, establecemos $ item [1] [0] (el nombre del mes) en el índice del nombre del mes en $ meses más uno. Usamos la función array_search para obtener el índice correcto y agregamos uno porque la matriz está basada en cero. Finalmente, implosionaremos la matriz, que une los miembros, pasando '/' como separador. Ahora nuestra fecha está formateada correctamente. Lo último que debes hacer es ponerlo en $ arr; usamos arrayunshift para ponerlo al principio de la matriz. Una vez terminemos de trabajar con todas las entradas, estarán en orden inverso, que es lo que queremos.

Finalmente, cortaremos la matriz para que solo contenga la cantidad de elementos que queremos. ¡Entonces podemos devolverlo!

Usamos la función parseCalendarFeed en nuestra función getSchedule:

 
	function getSchedule() { 
	    $feed = "http://www.google.com/calendar/feeds/7dsn8r5l974nlqo6uji6t386s4%40group.calendar.google.com/public/basic"; 
	    $events = parseCalendarFeed($feed); 
	    $html = ""; 
	    foreach($events as $event) { 
	        $html .= "<li><em>$event[1]</em> $event[0]"; 
	        if(isset($event[2])) { 
	            $html .= " <small>$event[2]</small></li>"; 
	        } else { 
	            $html .= "</li>"; 
	        } 
	    } 
	    return $html; 
	}

Dentro de esta función, almacenamos la URL del feed y la pasamos a parseCalendarFeed; comenzaremos nuestra cadena $ html y luego recorreremos cada evento. Esto generará la misma estructura HTML que usamos al hacer prototipos; tenemos que comprobar la existencia de detalles ($ event [2]); si están ahí, los agregamos; si no, cerramos el elemento de la lista. Una vez que hemos recorrido todos, devolvemos la cadena $ html.

Para llamar al calendario a la página, use esto en lugar de los elementos de la lista que codificamos:

1
2	&ly;?php echo getSchedule(); ?>

Paso 5: ¡Admíralo con orgullo!

Y eso es; ¡Ese es nuestro tablero de estado completo, que funciona, extrae datos y se desplaza por Twitter! Espero que te hayas divertido y déjame saber lo que piensas.