Creando una galería de fotos

Introducción

Muchos de los lectores de este medio, tendrán en su poder muchas fotografías, de cámaras digitales, escaneadas, etc.
Si tenemos una Web, muchas veces queremos a ellas agregar una Galería Fotográfica, por ejemplo, en una Web personal, en la cual queremos agregar una sección de Fotos de Nuestra familia.

Tenemos varias opciones de hacerlo, agregando una por una las fotografías, que es la forma tradicional, o también podemos hacer la forma, en la cual queremos demostrarla con este artículo, hacerlo con ASP y Base de datos.

¿Como funcionara nuestra Galería Fotográfica?

Simple, haremos una base de datos con los nombres de los archivos de fotos, una vez logrado esto, en una Web que armaremos en ASP, nos listara automáticamente de a 10 fotografías, es algo mas simple que estar agregando de a 1 las fotos no les parece?
Tendremos un sola Web en ASP que paginara cada XX cantidad fotos, con la opción de permitirnos ver todas las fotos que tengamos en nuestra Base de Datos.

¿Como ingresar las fotos a una Base de Datos?

Veremos varios puntos en este artículo, uno de ellos es por ejemplo, como utilizar el sistema FSO (File System Object).
Vamos a centrarnos en este por ahora.
File System Object, u Objeto de Archivos de sistema, nos permite, acceder a información de archivos los cuales se encuentran en nuestro servidor, o PC (Siempre y cuando tengamos IIS o PWS.).
Con este sistema (FSO) podemos manipular archivos, acceder a información de los mismos, añadir escritura etc.
Nosotros nos mantendremos en ver la información de los archivos, nos centraremos en sabes el nombre, ya veremos cual es el objetivo de el mismo.

Listado.asp

<HTML>
<HEAD>
<TITLE>L/TITLE>
</HEAD>
 
<BODY>
<%
´nos crea el Objeto FSO
Set ObjetoFSO = Server.CreateObject("Scripting.FileSystemObject")
 
´nos selecciona la carpeta en la que esta el archivo
Set ObjetoCarpeta = ObjetoFSO.GetFolder(Server.MapPath(""))
 
´nos comienza a listar los archivos
Response.Write "<FONT FACE=Verdana SIZE=2>"
´Nos muestra el nombre de nuestra carpeta en la web devuelta
Response.Write "<B>" & ObjetoCarpeta.Name & "</B>:<BR>"
 
´busca en todos los archivos que encuentra en dicha carpeta y nos devuelve el nombre
For Each Fichero in ObjetoCarpeta.Files
Response.Write Fichero.Name & "<BR>"
 
Next
 
Response.Write "</FONT>"
 
Set Fichero = Nothing
Set ObjetoCarpeta = Nothing
Set ObjetoFSO = Nothing
%>
</BODY>
 
</HTML>

Primero debemos armar una carpeta con todas las fotos que tenemos para mostrar.
Una vez hecho esto, armar el archivo como especifica allí en listado.asp.
Una vez hecho esto debemos ejecutar el archivo listado.asp,  recordemos que debemos hacerlo desde el navegador http://127.0.0.1/listado.asp o http://nombredelapc/listado.asp.

Con esto habremos logrado hacer un listado de los archivos que tenemos.
Obtendremos algo como esto:

En Nuestro navegador nos aparecerán los nombres de las fotos de nuestro directorio en el que tenemos los archivos.
Una vez logrado esto, el haber obtenido los nombres de los archivos debemos seleccionarlos todos y copiarlos, esto lo logramos desde EDICION – Seleccionar Todo, Edición – Copiar.

Hecho esto pasemos a la base de datos en cuestión:
La haremos a nuestra base de datos en Microsoft Access, ya que es un programa preinstalado en la mayoría de las PCS.
Crearemos una Base de datos nueva, a la cual llamaremos en este ejemplo bd2.mdb.

En esta base de datos daremos 2 campos, uno que será ID, Auto numérico, y el otro llamado titulo, de texto.
Allí usaremos un Simple Edición   – Pegar y tenemos todos los nombres de las Fotos cargadas automáticamente en Nuestra Base de Datos.
Si luego queremos ir agregando mas fotos simplemente agregamos un campo con el nombre y automáticamente estará cargada en nuestra Web.

Nos quedara algo como esto:

Hasta aquí hemos visto mucho de pasos alternos, pero todavía no vimos nada de la galería fotográfica en cuestión!, bien, estos pasos que vimos hasta aquí son los pasos a seguir para hacer de una forma mas automatizada nuestra galería fotográfica.

Pasemos a que nos liste en cuestión las fotos que eso es lo importante.
Ya llegando a este punto los programadores ASP, podrán haber visto cuales son los fines de esto, si queremos podemos poner todas las fotos en una sola Web, pero quedaría muy pesada nuestra página, por ende lo solucionaremos con un RecordSet de 10 resultados por página:

Galeria.asp (*)

<%
 
Dim oConn, rs, SQL
Dim PaginaActual                  ‘ en qué pagina estamos
Dim PaginasTotales                ‘ cuántas páginas tenemos
Dim TamPagina                                  ‘ cuantos registros por pagina
Dim CuantosRegistros            ‘ para imprimir solo el nº de registro por pagina que queramos
 
‘cuantos resultados por pagina
TamPagina=10
 
‘Leemos qué página mostrar. La primera vez será la inicial
if Request.Querystring("pagina")="" then
            PaginaActual=1
else
            PaginaActual=CInt(Request.Querystring("pagina"))
end if
 
set oConn=Server.CreateObject("ADODB.Connection")
set rs=Server.CreateObject("ADODB.Recordset")
 
‘ Conexión por OLEDB
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="&Server.MapPath("bd2.mdb")&";"
SQL="SELECT Id, titulo FROM Tabla1;"
 
‘ Defino el tamaño de las páginas
rs.PageSize=TamPagina
rs.CacheSize=TamPagina
 
‘ Abro el recordset
rs.Open SQL, oConn, 1, 2
 
‘Cuento las páginas
PaginasTotales=rs.PageCount
 
‘Compruebo que la pagina actual está en el rango
if PaginaActual < 1 then
            PaginaActual = 1
end if
if PaginaActual > PaginasTotales then
            PaginaActual = PaginasTotales
end if
 
‘Si no existen Fotografías devuelve este mensaje
if PaginasTotales=0 then
 
            Response.Write("No se Encontraron Fotografías.")
  
else
 
            ‘Escribiendo la pagina en HTML con ASP
            rs.AbsolutePage=PaginaActual
            Response.Write("Pagina " & PaginaActual & " de " & PaginasTotales)
            Response.Write("<br><br>")
            Response.Write("<TABLE BORDER=""0"" ALIGN=""center"" STYLE=""font-size:75%"">")
            Response.Write("<TR><TD COLSPAN=""3""><B>RESULTADOS</B></TD>")
            CuantosRegistros=0
            do while not rs.EOF and CuantosRegistros < TamPagina
                        ‘Pinto una línea de la tabla por cada registro
                        Response.Write("<TR>"&VbCrLf)
                        Response.Write("<TD>"&rs.Fields("Id")&"</TD>")
                        Response.Write("<td>""<a href="""&rs.Fields("titulo")&""">""<img border=""0"" src= """&rs.Fields("titulo")&"""width=""320"" height=""240""""</td>")
                        Response.Write("</TR>")
                        CuantosRegistros=CuantosRegistros+1
                        rs.MoveNext
            loop
            Response.Write("</TABLE>")
 
end if
rs.Close
oConn.Close
set rs=nothing
set oConn=nothing
 
‘Muestra los enlaces de a 10 Resultados
Response.Write("<hr>")
if PaginaActual > 1 then
            Response.Write("<A HREF=rspagina.asp?pagina="& PaginaActual-1& ">10 Anteriores</A>&nbsp;&nbsp;&nbsp;")
end if
if PaginaActual < PaginasTotales then
            Response.Write("<A HREF=rspagina.asp?pagina=" & PaginaActual+1 &">10 Siguientes</A>")
end if
 
 
%>

Si vemos hasta aquí esta es la pagina que actuara de galería fotográfica en nuestra Web.
Notemos que hay palabras con color VIOLETA, bien estos son los puntos para su comprensión y su posible cambio. Son 2 los puntos que difieren en este color, uno es  bd2.mdb, que es la base de datos, esto es por si su base de datos tiene otro nombre.
Y el otro es para su fijación, la pagina ASP, toma de los Campos ID y titulo y nos los muestra, el titulo actúa como ruta, <img src=xxxx.jpg>, si notamos bien este código veremos que se encuentra también las etiquetas de tamaño hechas en 320×240 PX.
También  existe un <a ref.=> que vincula a la imagen con la ruta, viendo que estas están en 320×240 y que en realidad son de 640×480 actúa como si las agrandara.
Queda todo esto algo así:

Así nos mostrara todas las fotos que tengamos en nuestra BD, la parte estética se las dejo a Uds. Que deben tener mas ideas.
Espero que les sea de gran ayuda y hasta la próxima.

Mario Matías Sebely  – WebMaster ConozcaMisiones.com
[email protected]
ICQ: 48005476

(*) Recordset de ASPFacil.com

Deja un comentario