En el desarrollo web hay dos partes importantes, que aunque se relacionan mucho son muy diferentes, estamos hablando del diseño web y la programación web, aprender a separar esto nos facilitará el trabajo en equipo, cada profesional(diseñador y programador) puede trabajar por su lado sin entorpercer el trabajo del otro, con la nueva clase Template podemos lograr esto muy fácil.
Nota: la clase Template es una actualización de la clase_plantilla pero con nuevas opciones, con el fin una vez más de separar totalmente la programación y el diseño de una aplicación web, opciones de las cuales carecía la anterior version, esta actualización fue escrita en su totalidad por Dano.
Nuevas opciones de la clase template:
- Definición de varias rutas: con la nueva propiedad PATH, podemos cambiar fácilmente la ruta del directorio donde se encuentra los archivos de nuestras plantillas. Uso:
$myTemplate = new Template(); $myTemplate->PATH="nombredeDirectorio";
$myTemplate = new Template(); $myTemplate->PATH="nombredeDirectorio"; $myTemplate->setTemplate("nombrePlantilla");
$myTemplate = new Template(); $myTemplate->PATH="nombredeDirectorio"; $myTemplate->setTemplate("nombrePlantilla"); $variable= $myTemplate->setVars(array("unIdenticadorEnLaPlantilla"=> "un valor cualquiera")); $variable.= $myTemplate->setVars(array("unIdenticadorEnLaPlantilla"=> "un valor cualquiera")); echo $myTemplate->show();
Explicación.
En esta oportunidad explicaré el uso de la clase con un ejemplo más completo, para que se note la verdadera funcionalidad de trabajar con esta clase, el ejemplo se tratará de una galeria de imágenes, usando XHTML, CSS, php y la clase Template.
Empecemos con explicar como funcionará la galeria, se tratará de mostrar N imagenes en miniaturas por página, cada imagen tendrá un link de un popUp con la imagen original. El diseño que preparé para la galería fue este:
Nota: en el ejemplo se coloco 6 imágenes por página, en caso de usar el código de este ejemplo, se podrá cambiar sin mayores problemas, editando una linea del código php.
Veamos el código CSS que se uso para el ejemplo:
/* CSS Document */ body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; background-color:#FAFAF5; text-align:center; color:#999900; margin:2px 0; padding:0; } #main{ margin:0 auto; padding:2px 10px; background-color:#FFFFFF; border-left:2px solid #828244; border-right:2px solid #828244; width:720px; text-align:left; } #main a{ color:#CC0000; } #main a:hover{ color:#990000; } h1{ margin:0px; font-size:32px; color:#B35900; } #imagenes{ margin:10px 0; padding:10px 0px; width:720px; font-size:10px; background-color:#FFC166; } #imagenes img{ float:left; margin:6px; padding:3px; width:100px; height:100px; font-size:10px; text-align:center; border:1px solid #828244; background-color:#CCCC99; } .paginador{ margin:15px 0px; padding:2px 2px; width:714px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-color:#F1F1E4; border:1px solid #CCCC99; } .paginador a{ float:left; margin:0; color:#CC9900; text-decoration:none; padding:0 5px; } .paginador a:hover, .paginador .seleccionado{ text-decoration:underline; color:#CC6600; } #footer{ margin:10px 0 0 0; padding:1px 5px; text-align:center; width:708px; color:#8CAF23; font-size:10px; background-color:#F9FCEF; border:1px solid #F1F1E4; } #footer a{ text-decoration:none; padding:0 5px; color:#718C1C; } #footer a:hover{ color:#006633; } .clearit{ clear:both; } /***********Para el popup****************/ #popUp img{ margin:10px; padding:5px; border:1px solid #828244; text-align:center; background-color:#CCCC99; }
Ahora veamos un ejemplo del código xhtml de la galeria ya formateado por la clase Template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="CSS/styles.css" rel="stylesheet" type="text/css" /> <title>Galería de imágenes con Plantillas y CSS - Página 1</title> <script language="JavaScript" type="text/javascript"> function popUp (URL,w,h){ var margen=35; if ((w+margen>screen.width) || (h+margen>screen.height)){ window.open(URL,"ventana1","width="+(w+margen)+", height="+(h+margen)+", scrollbars=yes, menubar=no, location=no, resizable=no"); } else{ window.open(URL,"ventana1","width="+(w+margen)+", height="+(h+margen)+", scrollbars=no, menubar=no, location=no, resizable=no"); } } </script> </head> <body> <div id="main"> <h1>Galería de Imágenes</h1> <p>Este es un claro ejemplo de separar el diseño de la programación con la clase Template escrita por <a href="http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=306">Dano</a>.</p> <div class="paginador"><a href="?pagina=1"><span class="seleccionado">1</span></a><a href="?pagina=2">2</a> <div class="clearit"></div></div> <div id="imagenes"> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional.png',300,300)"><img src="imagenes/miniaturas/logoProvisional.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional2.png',300,300)"><img src="imagenes/miniaturas/logoProvisional2.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional3.png',300,300)"><img src="imagenes/miniaturas/logoProvisional3.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalGris.png',400,400)"><img src="imagenes/miniaturas/logoProvisionalGris.png" title="Tamaño Original: 400 x 400 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalMorado.png',300,300)"><img src="imagenes/miniaturas/logoProvisionalMorado.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalNaranja.png',300,300)"><img src="imagenes/miniaturas/logoProvisionalNaranja.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <div class="clearit"></div> </div> <div class="paginador"><a href="?pagina=1"><span class="seleccionado">1</span></a><a href="?pagina=2">2</a><div class="clearit"></div></div> <p>Ejemplo realizado por <a href="http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=2645">Maikel</a> para la documentación de la clase Template.</p> <p align="center"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" style="border:0;width:88px;height:31px" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="¡CSS Válido!" /> </a></p> </div> </body> </html>
Aqui identificamos el código dinámico, para este ejemplo será lo que este dentro de los div con las clases paginador, y con el id imagenes, ese código lo borraremos y crearemos las plantillas a base de ellos para que esos códigos html sean generados por php. Veamos los códigos de las plantillas necesarias para el ejemplo, para aprovechar las nuevas opciones de la clase, haremos una plantilla Padre, que será la salida del php, es decir, lo que verá nuestro visitante, y unas plantillas hijas que serán las plantillas que usaremos paras las variables dinámicas (código html dinámico que debe ser generado por php), las plantillas hijas se usarán para formatear el contenido de la plantilla padre.
Plantilla Padre: galeria.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="CSS/styles.css" rel="stylesheet" type="text/css" /> <title>Galería de imágenes con Plantillas y CSS - Página {PAGINA}</title> <script language="JavaScript" type="text/javascript"> function popUp (URL,w,h){ var margen=35; if ((w+margen>screen.width) || (h+margen>screen.height)){ window.open(URL,"ventana1","width="+(w+margen)+", height="+(h+margen)+", scrollbars=yes, menubar=no, location=no, resizable=no"); } else{ window.open(URL,"ventana1","width="+(w+margen)+", height="+(h+margen)+", scrollbars=no, menubar=no, location=no, resizable=no"); } } </script> </head> <body> <div id="main"> <h1>Galería de Imágenes</h1> <p>Este es un claro ejemplo de separar el diseño de la programación con la clase Template escrita por <a href="http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=306">Dano</a>.</p> <div class="paginador">{PAGINAS} <div class="clearit"></div></div> <div id="imagenes"> {IMAGENES} <div class="clearit"></div> </div> <div class="paginador">{PAGINAS}<div class="clearit"></div></div> <p>Ejemplo realizado por <a href="http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=2645">Maikel</a> para la documentación de la clase Template.</p> <p align="center"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" style="border:0;width:88px;height:31px" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="¡CSS Válido!" /> </a></p> </div> </body> </html>
Si se fijan he editado ese codigo en las partes que identifique como dinámica, poniendo unos identificadores {PAGINAS} y {IMAGENES}, lo que vaya en esos lugares será generado por php ahora, incluso agregue un identificador {PAGINA} en la etiqueta title.
Plantilla Hija: imagen.tpl
<a href="javascript:popUp('popUp.php?imagen={imagenOriginal}',{descImagen0},{descImagen1})"><img src="{imagen}" title="Tamaño Original: {descImagen0} x {descImagen1} Tipo: {tipoImagen}" alt="{nombreImagen}"/></a>
Como vemos aqui tambien pongo unos identificadores, que también formateará php, si ven el primer código es este código lo que esta dentro del div con id imagenes.
Plantilla Hija: paginas.tpl
<a href="?pagina={numPagina}">{numPagina}</a>
Esto es lo que esta dentro de los div´s con class paginador, tambien usa identificadores para el php, veamos ahora la plantilla que utilizaremos para identificar la pagina actual.
Plantilla Hija: paginaActual.tpl
<a href="?pagina={numPagina}"><span class="seleccionado">{numPagina}</span></a>
Por último veamos la plantilla para el popUp:
popUp.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="CSS/styles.css" rel="stylesheet" type="text/css" /> <title>{TITLE}</title> </head> <body> <div id="popUp"> <img src="{IMAGEN}" /> </div> </body> </html>
Con esto ya tenemos la parte del diseño lista, ahora viene la parte de programación. Vayamos con el codigo php para formatear nuestras plantillas.
Nota: por comodidad yo coloco todas las plantillas dentro de una carpeta llamada plantillas, pero la nueva clase te permite tenerla en cualquier parte, con la propiedad PATH del objeto.
index.php
<?php include("Template.php"); $myTemplate= new Template(); $myTemplate->PATH ="plantillas/"; define("MAXIMO",6,true); // 16 imagenes por pagina. define("IMAGENESMINIATURAS","imagenes/miniaturas", true); // carpeta de las imagenes miniaturas define("IMAGENES","imagenes/originales", true); // carpeta las imagenes originales $imagenesMiniaturas=glob("{".IMAGENESMINIATURAS."/*.jpg,".IMAGENESMINIATURAS."/*.png,".IMAGENESMINIATURAS."/*.gif,".IMAGENESMINIATURAS."/*.bmp}",GLOB_BRACE); $imagenes=glob("{".IMAGENES."/*.jpg,".IMAGENES."/*.png,".IMAGENES."/*.gif,".IMAGENES."/*.bmp}",GLOB_BRACE); $totalImagenes= count($imagenesMiniaturas); //total de imagenes en la IMAGENESMINIATURAS imagenes /************************************************* VALIDACION *************************************************/ function paginaValida($numeroPagina){ global $totalImagenes; //si el numero de pagina es mayor que cero y menor que el total de imagenes($totalImagenes) entre(/) // la cantidad de imagenes por pagina(MAXIMO) if (MAXIMO<=0){die ("el mmo de página debe ser mayor que cero"); exit(); } return (($numeroPagina>0) && ($numeroPagina<=ceil(($totalImagenes/MAXIMO)))); } // Si no existe la variable pagina por el metodo GET // o en tal caso de que exista y no sea vda // mostramos la primera pna, que para nuestro caso es igual a 0 😛 if ((!isset($_GET['pagina'])) || (!paginaValida($_GET['pagina']))){ $inicio= 0; } else{ //sino mostramos la primera pna $inicio= ($_GET['pagina']-1); } /************************************************* VALIDACION *************************************************/ /************************************************** IMAGENES **************************************************/ $IMAGENES=""; $myTemplate->setTemplate("imagen"); for ($i=($inicio*MAXIMO);($i!=$totalImagenes) && ($i<($inicio*MAXIMO)+MAXIMO);$i++){ $descImagen=getimagesize($imagenes[$i]); //extraigo los atributos de la imagen, ancho, alto y tipo de imagen [png,jpg, etc.] $tipoImagen=str_replace("image/","",$descImagen["mime"]);//extraigo el tipo de imagen sin el image/ que me coloca getimagesize $myTemplate->setVars(array("imagenOriginal"=>$imagenes[$i],"imagen" => $imagenesMiniaturas[$i], "descImagen0" => $descImagen[0], "descImagen1"=>$descImagen[1], "tipoImagen"=> $tipoImagen)); $IMAGENES.= $myTemplate->show(); } /************************************************** IMAGENES **************************************************/ /************************************************* PAGINACION *************************************************/ $PAGINAS=""; $i=1; while ($totalImagenes>0){ if (($i-1)==$inicio){ $myTemplate->setTemplate("paginaActual"); } else { $myTemplate->setTemplate("paginas"); } $myTemplate->setVars(array("numPagina" => $i)); $PAGINAS.= $myTemplate->show(); $totalImagenes-=MAXIMO; $i++; } /************************************************* PAGINACION *************************************************/ /********************************************** MOSTRAMOS EL CONTENIDO ****************************************/ $myTemplate->setTemplate("galeria"); $myTemplate->setVars(array("IMAGENES" => $IMAGENES, "PAGINAS"=>$PAGINAS, "PAGINA" => $inicio+1)); echo $myTemplate->show(); /********************************************** MOSTRAMOS EL CONTENIDO ****************************************/ ?>
En la primera línea incluimos la clase Template, luego creamos nuestro objeto myTemplate y en la 3 linea definimos la ruta del directorio donde se encuentra nuestras plantillas con la propiedad PATH, durante el código la podemos cambiar pero como mencione antes, yo por comodidad puse todas las plantillas dentro de una carpeta llamada plantillas. Anteriormente habia dicho que si se quería cambiar el numero de imágenes a mostrar por página en la galería, se podia personalizar fácilmente pues, solo tienes que cambiar el número que ves en la cuarta línea. Bueno la lógica del código la puedes entender leyendo los comentarios, vayamos a los que nos interesa, que es el uso de la clase Template. Dentro de las lineas comentadas que dicen IMAGENES, usamos el objeto, primero inicializo una variable, que es la que usaré para formatear la plantilla. Para escoger la plantilla que formatearemos utilizamos el método setTemplate y le pasamos por parametro el nombre del archivo de la plantilla, sin la extensión, es decir, sin el .tpl, asi que en esa parte del código utilizaremos la plantilla imagen. Luego la tercera línea dentro del for es donde esta lo mejor de esta clase, porque podemos setear variables dinámicas, con la antigua clase no podiamos hacer esto, esto lo hacemos con setVars, le pasamos por parametro un arreglo con los identificadores que tenemos en la plantilla que estamos formateando y los valores que queramos que aparezcan, por ejemplo algo como esto:
<a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional.png',300,300)"><img src="imagenes/miniaturas/logoProvisional.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a>
Por último se le concatenamos a la variable $IMAGENES para cuando vayamos a formatear la plantilla padre le pasemos el valor que tenga esta variable, es decir, cuando termine de ejecutarse el for tendrá algo como esto:
<a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional.png',300,300)"><img src="imagenes/miniaturas/logoProvisional.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional2.png',300,300)"><img src="imagenes/miniaturas/logoProvisional2.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisional3.png',300,300)"><img src="imagenes/miniaturas/logoProvisional3.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalGris.png',400,400)"><img src="imagenes/miniaturas/logoProvisionalGris.png" title="Tamaño Original: 400 x 400 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalMorado.png',300,300)"><img src="imagenes/miniaturas/logoProvisionalMorado.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a> <a href="javascript:popUp('popUp.php?imagen=imagenes/originales/logoProvisionalNaranja.png',300,300)"><img src="imagenes/miniaturas/logoProvisionalNaranja.png" title="Tamaño Original: 300 x 300 Tipo: png" alt=""/></a>
Que es lo que realmente debe aparecer donde esta {IMAGENES} en la plantilla galeria.
Nota: ver código xhtml de galeria.tpl y el primer código html.
Ahora dentro de las lineas comentadas que dicen PAGINACION es donde logramos formatear la paginación, es decir, lo que tenga la variable $PAGINAS, es lo que colocaremos en el identificador PAGINAS en nuestra plantilla padre, lo hacemos muy parecido a lo de IMAGENES pero usando las plantillas hijas correspondientes (paginaActual y paginas). Por último, formateamos la plantilla padre igual como lo haciamos con la clase_plantilla, seleccionamos la plantilla, asignamos los valores a los identificadores que tenemos y hacemos un echo de la plantilla formateada, alli ya estariamos enviando la pagina al visitante como nosotros queramos que sea vea.
Para el popup tambien hacemos uso de la clase template, con su correspondiente plantilla popUp.
Fuente: http://www.cristalab.com/tutoriales/galeria-de-imagenes-con-templates-en-php-c160l/
Pauguau 