sábado, 11 de abril de 2015

Crea un visualizador de Imágenes

Creamos una página que muestra las postales posibles para elegir dentro de una categoría.

Al pinchar sobre uno de los enlaces de index.php, somos enviados al script verpostales.php que se encarga de mostrarnos las postales disponibles dentro de una categoría. 


En este caso, como podéis ver, la mayoría del código esta realizado en PHP. Aquí os mostramos el listado antes de comentarlo: 


<?
//Incluimos la libreria de funciones
include("funciones.php");

//Creamos el encabezado HTML
html_encabezado("Servicio de postales de DesarrolloWeb","Servicio de postales gratuitas para todo tipo de felicitaciones","postal, navidad, san valentin, cumpleaños, felicitacion");
?>
<table align="center" border="0" cellpadding="2" cellspacing="0" bgcolor="White">
<tr>
   <td align="center" colspan="4" bgcolor="#ccff00"><font color="#9933ff">Te presentamos nuestras postales</font></td>
</tr>
<?
//$tipo ha sido tranferida por URL
//Genero la sentencia SQL distinta si queremos ver todas las postales
if ($tipo!="todas")
   $ssql="Select * From imagenes Where tipo like '".$tipo."%'";
else
   $ssql="Select * From imagenes";

//Conectamos a la BD
$connectid=mysql_conexion();

//Ejecutamos sentencia SQL y recogemos resultado en damefila
$resultid = mysql_db_query("postal",$ssql);
$damefila=mysql_fetch_array($resultid);

//Creamos las celdas con las imagenes/enlace
   while ($damefila)
{
   $i=1;//i es el numero de columnas de la tabla
   echo "<tr>\n";
   while ($i<=4 and $damefila)
   {
      echo '<td><a href="formulario.php?id='.$damefila["id_imagen"].'"><img src="imagenes/'.$damefila["id_imagen"].".gif\" border=\"0\"></a></td>\n";
      ++$i;
      $damefila=mysql_fetch_array($resultid);
   }
   echo "</tr>\n";
}
?>
<tr>
   <td align="center" colspan="4" bgcolor="#ccff00">Haz click sobre la tarjeta que te guste para enviarla</td>
</tr>
</table>
<?
//Liberamos la memoria de consulta
mysql_free_result($resultid);

//Generamos enlace hacia atras y cierre de documento
html_pie_volver($HTTP_REFERER)
?>



Puede verse como la forma de empezar el script coincide con la vista anteriormente : Incluimos la librería de funciones y llamamos a la función que crea el encabezado HTML. 

El paso siguiente es evaluar, mediante un condicional if, si la categoría elegida es una cualquiera o, por el contrario, queremos verlas todas. El tipo de sentencia SQL con la que interrogaremos a la BD cambia en función de ello. 

Una vez elegida la sentencia SQL apropiada realizamos la llamada a la función mysql_conexion() creada por nosotros mismos que nos conecta con la base de datos para, a continuación, ejecutar la sentencia y recoger los datos del primer registro en forma de variable array. 

Es en este punto que tenemos el plato fuerte del script: Dos bucles while anidados que nos permiten recrear una tabla en la que emplazamos en cada celda una imagen que enlaza al script siguiente y que pasa por URL el identificador de la imagen en cuestión. 

El recorrido de los bucles es el siguiente: 

1.-Nos colocamos en la primera columna de la fila ($i=1;) y creamos la etiqueta <tr> 

2.-Entramos en el bucle que genera las celdas y que se finalizara cuando no haya más registros o se llegue al numero máximo de columnas definido arbitrariamente. 

3.-Creamos la celda que aloja la imagen definida para este registro junto con el enlace que envia por URL el identificador de la imagen. 

4.-Nos colocamos en la columna siguiente y pedimos el siguiente registro 

5.-Repetimos 3 y 4 hasta llenar una línea o acabar los registros. 

6.-Cerramos la etiqueta <tr> y volvemos a 1 salvo si los registros se han acabado. 

Para comprender este bucle, nada mejor que ver el código fuente generado por el navegador al ejecutar el script.

La parte final del script se encarga de liberar la memoria ocupada por la consulta que hemos realizado y, a partir de la función html_pie_volver crear un enlace para volver a la página anterior sirviéndose de la variable de sistema $HTTP_REFERER presentada en otro capítulo


Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

No hay comentarios:

Publicar un comentario

Entradas populares