Crear una galería de fotos en ASP

Mapa Web

Portada Lista de Códigos ASP Crear una galería de fotos en ASP

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 ""
´Nos muestra el nombre de nuestra carpeta en la web devuelta
Response.Write "" & ObjetoCarpeta.Name & ": "

´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 & " "
Next

Response.Write ""

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.

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.

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(" ")
Response.Write("<TABLE BORDER=""0"" ALIGN=""center"" STYLE=""font-size:75%"">")
Response.Write("<TR><TD COLSPAN=""3"">RESULTADOS</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> ")

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 320x240 PX.

También existe un

<a ref.=>
que vincula a la imagen con la ruta, viendo que estas están en 320x240 y que en realidad son de 640x480 actúa como si las agrandara.

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.

Autor: WebExperto
http://www.webexperto.com/

Portada

Capítulos del Manual de ASP

Crear una Página ASP

Agregar secuencias de comandos del servidor

Combinar HTML y comandos de secuencias de comandos

Utilizar directivas ASP