fao201 - cgi 3

Tutorial CGI I II III
Introducci�n a SQL
Tutorial VBScript

Fao.gif (4164 bytes)

Tutorial de CGI III

Imagenes Clikeables.

A pesar que este tipo de elementos no este conectado directamente con los scripts CGI pense en incluirlos dado que tambien son una de las formas de incrementar la interactividad entre los usuarios y el web site.

Basicamente una imagen clikeable (es una acepcion que invente, ya fue, la que me parecio mas correcta en castellano) es una imagen, un grafico que cuando es clikeada en alguna de sus partes envia las coordenadas X e Y de la posicion del Mouse en ese momento y el server a partir de ellas genera un enlace con otras paginas.

El uso mas comun de este tipo de imagenes es crear barras de herramientas personalizadas o regiones en un grafico que permitan al usuario navegar hasta un nuevo documento.

En teoria existen tres formas de lograr este tipo de im�genes;

Server-Side Image Maps (antigua)
Es la forma m�s antigua, utilizaba un Form para enviar la informaci�n y habia que programar un script en el server que procesara dicha informaci�n.

Server-Side Image Maps (Moderna)
Es la forma mas com�n y m�s ampliamaente utilizada, utiliza el tag ISMAP y la informaci�n es procesada por el web server.

Clien-Side Image Maps
Es la forma m�s moderna ( y menos difundida) s�lo soportad por los browsers en sus �ltimas versiones, y la informaci�n es procesada por el mismo browser.

Como todos los Web servers de la actualidad soportan la segunda forma, descartaremos la revision de la primera y comenzaremos directamente a usar el tag ISMAP.

Partiendo de una imagen (un .GIF) elegiremos dentro de ella las areas que funcionaran como links a otros documentos.
Dichas areas pueden ser definidas en base a uno om�s de los siguientes elementos.

RECT(x1,y1)(x2,y2) Determina un area rectangular en base a los v�rtices de su diagonal principal.
CIRCLE(a,b,r) Determina un circulo de centro (a,b) y de radio r.
POLY(x1,y1)(x2,y2)....(xn,yn) Determina un poligono cuyos v�rtices (x,y) son dispuestos secuencialmente uno detr�s de otro.

Almacenaremos estos elementos en un archivo que tendr� mas o menos el siguiente formato:

default/default.htm

RECTANGULE(475,157)(611,344)/principal.htm
RECTANGULE(233,182)(447,359)/buscar.htm
CIRCLE(130,54,20/circulo.htm
POLY(46,27)(57,33)(58,23)(68,35)(46,27)/carita.htm

Usando un paquete gr�fico cualquiera y revisando la posici�n del cursor podremos construir este tipo de archivos, el �nico problema es que nos puede resultar bastante tedioso hacerlo "a mano".
Existe un freeware realmente excelente llamado MapThis que hace todo el trabajo por nosotros que puede ser bajado de cualquier repositorio de shareware como OAK, Garbo, CICA,SimTel,etc.

Veamos entonces la estructura del archivo. La primera l�nea linkea el documento que ser� cargado en caso de que no clikeemos en ninguna de las areas especificadas por los elementos que definimos. Si omitimos el tipo de elemento el server tomara por default el RECT.
Por convenci�n, agregaremos el parametro ISMAP y haremos un hyperlink al .MAP de esta manera.

Entonces una vez cargada pla p�gina en nuestro browser, cad vez que clikeemos en alguna parte de la imagen, el browserenviara las coordenadas de ubicaci�n en la que nos encontr�bamos (esos numeritos que aparecen en la barra de status) al server, y luego de esperar su proceso, este ultimo nos devolvera la respuesta correspondiente.

Este mecanismo (Server-Side), induce un cierto retardo (el proceso por parte del server de nuestro pedido) por lo cual recientemente Netscape introdujo un nuevo mecanismo conocido como Client-Side Image Maps el cual veremos a continuaci�n.

Client-Side Image Maps
En vez de realizar la conversi�n coordenadas/hyperlink en el server, esta sera realizada por el browser.
El .MAP que definiamos en el metodo anterior AHORA debe ser incluido DENTRO del codigo HTML con el siguiente formato:

y el link en el tag img quedar�a as�:
<img src="/imagenes/barrita.gif" usemap="#barradetareas">

En mapname definimos el nombre del mapa y en usemap lo referenciamos. Al probarlo podremos ver que en la barra de status no aparecen las coordenadas sino directamente el nombre de la pagina en cuestion. Si utilizamos nombres de pagina significativos esto puede ser de gran ayuda para el usuario.

Este metodo obviamente es mucho m�s rapido (no implica un intercambio de informacion con el server) pero tiene la desventaja de que no esta implementado en todos los browsers todavia, a peras de que sta propuesto como est�ndar para la definicion del HTML 3.0.
Para cubrir este aspecto podemos utilizar los dos metodos simultaneamente de esta manera.

Si el browser no llegara a entender el usemap, procesara nuestro pedido en base al link del ismap.

Desempaquetando Informaci�n.

Aunque este tema puede resultar algo "tecnico" creo que resulta interesante incorporarlo al tutorial, ya que nos permite conocer el funcionamiento de esas "cajas negras" que son las librer�as, las cuales hemos utilizado al programar nuestros scripts.
Sabemos que cuando usamos el metodo POST toda la informaci�n de un form es "empaquetada" en una variable llamada QUERY_STRING, pero... en que forma?

La variable QUERY_STRING puede almacenar solamente un string continuo sin espacios, de manera que para enviar varios campos (y espacios) debe existir alg�n tipo de codificaci�n de los mismos.
De hecho, podemos verla en el siguiente ejemplo.
Supongamos que en nuestro Form solicitamos los siguientes datos:

Nombre: Sebastian
Edad: 22
Simpatizante de : Boca Juniors

Como deciamos estos datos deben de ser empaquetados en un �nico string, estyo se hace poniendo un "&" (ampersand) entre cada variable y reemplazando cada esepacio por un signo "+", con lo cual conseguimos que la variable quede as�:

"QUERY_STRING = "nombre=Sebastian&edad=22&equipo="Boca+Juniors""

Adicionalmente ciertyos caracteres son reemplazados por su valor ASCCI en un formato hexadecimal (%xx). Como vemos, esta ensalada de letras es imposible de manejar tal como esta, por lo tanto recurriremos a los "parsers" cuya funci�n es la de separar estos valores en c�modas y agradables variables.

Parsers CGI

La rutina escrita en Perl es un poco (s�lo un poco) m�s clara que su correspondiente equivalente en C, por lo tanto la utilizaremos para la explicaci�n del funcionamiento de un parser.
Perl utiliza los llamados "arrays asociativos" que son muy similares a los arrays que todos conocemos, excepto por la salvedad ( y a la vez gran ventaja) de que los indices no son numericos, sino alfanumericos.
Como es esto?. En esta rutina, todos los campos que se separan son almacenadosen un array asociativo con el nombre @in. Si queremos acceder al contenido del campo edad, por ejemplo, este se encuentra en la posicion "edad" y el codigo empleado es el siguiente.
@in{'nombre'};

Lo que sigue es la rutina &ReadParse ( que figura en la libreria "cgi-lib.pl" de S.E.Brener ) comentada ampliamente para su mejor entendimiento

#Perl Routines to Manipulate CGI input
#[email protected]

#ReadParse
#Lee los datos enviados con POST o GET, los convierte a texto simple, y pone
#un campo =valor en cada componente de la lista "@in"
#Tambien crea pares de campo/valores en %in, usando '\0' para separar
#selecciones multiples

sub ReadParse{
#Definicion de las variables a utilizar
local (*in)=@_ if @_;
local($i,$loc.$key,$val);

#De acuerdo al metodo de env�o almacena en la variable $in el texto
if($ENV{'REQUEST_METHOD'}eq"GET"{
$in = $ENV{'QUERY_STRING'};
}elsif($ENV{'REQUEST_METHOD'}eq"POST"){
read(STDIN,$in,$ENV{'CONTENT_LENGTH'});
}

@in= split(/&/,$in); #separa en un array los contenidos de $in que se
encuentran separados por "&"

foreach $i(0..$#in){
#convierte los "+" en espacios
$in[$i]=~s&\+//g;

#separa el campo y su contenido
($key,$val)=split(/=/,$in[$i],2); #corta en el primer =

#Convierte %XX de n�meros hexadecimales a alfanumericos
$key=~s/%(..)/pack("c",hex($l))/ge;
$val=~s/%(..)/pack("c",hex($l))/ge;

#Asocia cada campo con su valor
#usando \0 como separador de elementos m�ltiples(checkbox por ejemplo)
$in{$key},="\0"if(defined($in{$key}));
$in{$key},=$val;

}
return1;
}

Esta no es la unica librer�a que existe para manejar CGI bajo Perl, pero si la m�s utilizada. Seg�n el autor nuevas versiones incorporan m�s facilidades, tales como file uploading y otras.

Locking de archivos

En la segunda parte de este documento plante, el hecho problematico de que dos usuarios pretendan acceder al mismo tiempo a un mismo archivo, como es el caso del mini.guestbook.
En Unix tenemos recursos que nos permiten realizar este tipo de bloqueos con una llamada al sistema, pero bajo otros sistemas (y para mantener la "transportabilidad" de nuestros scripts, veremos una t�cnica muy simple que puede ser implementada en cualquier plataforma y que puede ser utilizada sin problemas.

Cuan dos usuarios quieren leer/escribir un mismo archivo (en realidad los scripst llamados por ellos)se produce un conflicto, el de saber quien tien la prioridad al hacerlo. Una manera de resolver este conflicto es crear un archivo "lock" cuya sola presencia nos indique que el archivo esta siendo accedido en ese momento.
As� cuando nuestro script pretenda leer/escribir el archivo, primero consultar la existencia del "lock", si existe espera un segundo y volvera a intentar y en caso de que no exista lo creara y procedera a la consulta.
Un ejemplo comentado en Perl nos mostrara esta t�cnica:

$salir='no';
while($salir!='si'){
if(-e "mini-gb.lock"){
    #Si el archivo existe, esperamos un segundo.
    sleep(1);
   }
   else{
     #al no existir el archivo, lo creamos y empezamos el proceso
     open(LOCK,">/mini-gb.lock");
     close LOCK;

-----------Proceso de nuestro script -----------------

#Destrabamos el archivo (lo eliminamos)
unlink("guestlock");

#Salimos de nuestra rutina
$salir=si;
}
}

Scripts avanzados

A partir de este punto analizaremos en detalle los requisitos para el manejo de documentos dinamicos, profundizando en el conocimiento de la forma de trabajo del protocolo HTTP y los mensajes MIME.

Documentos Dinamicos

Para introducirnos en el tema de los documentos dinamicos nos basaremos en una aplicaci�n practica, la animaci�n, es decir im�genes en movimiento sin dejar de lado el hecho de que esta ultima es solo una de las multiples posibilidades que nos brinda el manejo dinamico de la informaci�n.

Actualmente existen tres metodos (si incluimos el gif multipart) para poder manejar informaci�n dinamicament, en orden de eficiencia estos son:

Client Pull
El server env�a un "stream" de informaci�n , incluyendo una directiva (en la respuesta HTTP) que dice " vuelve a cargar estos datos en 5 segundos" o "vaya y carge esta url en 10 segundos". Despues de que se cumple el tiempo especificado, el browser hace lo que se le indico , osea recargar la pagina actual o conseguir una nueva pagina.

Server Push
El server env�a un "strem" de informaci�n y el browser la muestra, pero sigue manteniendo la conexi�n abierta; cuando el server lo requiera, puede continuar enviando m�s informaci�n para que el browser la muestre y as� sucesivamente.

Gif multipart
Se trata del metodo mas avanzado (lo vierno en WebTV?) que utiliza un nuevo formato de imagen GIF en donde se incluyen m�ltiples cuadros separados por comandos de animaci�n, los cuales pueden ser vistos con el browser de Netscape a partir de la version 2.0

Analicemos en detalle cada uno de los metodos.

Client Pull
Para muestra basta un bot�n, as� que de entrada prueben el siguiente codigo:

<META HTTP-EQUIV="Refresh" Content="1">
<title> Primera pagina</title>
<H1>Hola!</h1>
Una demostraci�n de documentos dinamicos<p>

Y???Que, paso?, por el bien de este tutorial espero que el documento haya sido recargado por el browser al pasar un segundo.

Esto lo logramos al agregar el tag "META" ( el cual permite simular respuestas HTTP en paginas HTML) que le dice al browser que el server le esta enviando un header con la indicaci�n "Refresh:1".
Cambiando el valor, cambiamos el tiempo de retardo obviamente.
Observemos que cada directiva "Refresh" es �nica y por tanto la pagina No sera� refrescada cada un segundo eternamente, sino una unica vez y que al tratarse de una respuesta HTTP (simulada) la misma debe figurar al comienzo de nuestra pagina .
Otra cosa que podemos lograr con este tag es cargar otro URL luego de una determinada cantidad de tiempo. La sintaxis es la siguiente:

Que hara que el browser luego de diez segundos de haber cargado la primera pagina vaya y traiga la que se encuentre referenciada por la variable URL. Un detalle importante es que debemos utilizar URLs absolutos , es decir incluir en la definici�n el "http://...." y no emplear URls relativos

Y que parsar�a si hacemos lo siguiente:

<META HTTP-EQUIV="Refresh" CONTENT=3; <META HTTP-EQUIV="Refresh" Content=3 URL=http://mimaq.midominio/seg.html> URL= http:// mimaq.midominio//pri.html>

M�s de uno se habra dado cuenta de que estos documento se llaman el uno al otro cada tres segundos, generando una especie de loop infinito .
Aprtir de este ejemplo, podemos inducir varias otras conbinaciones tales como la de un documento que se llama a si mismo cada 0 segundos provocando ad� tambien ese tipo de "loops sin fin"-
O podriamos hacer una cadena mas larga como la que sigue:

Pagina 1
Pagina 2
    Pagina 3
      Pagina 4
        pagina 5

Un ejemplo de utilizaci�n practica de est� tecnica ocurre en aquellas paginas que nos indican que la pagina original ha cambiado de lugar y que n cinco segundos seremos automaticamente redireccionados a la nueva ubicaci�n.

Server Push

En contraste con el Client Pull, este mecanismo aprovecha que el serer puede mantenerse una conexion abierta por un tiempo indefinido, dejando espacio para que sean enviadas varias respuestas secuencialmente.
Para lograrlo se utiliza un tipo MIME experimental (nuevo, no registrado aun como estandar) llamado "multipart/x-mixed-replace.

Mensaje MIME multipart
Existen varios tipos diferentes de mensajes "multipart" MIME. Cada uno de ellos le indica al cliente como debe procesar las diferentes partes que le ser�n enviadas.
Con el tipo "multipart/mixed", la informaci�n de cada parte es independiente de las otras, y el cliente deber�a mostrar una tras otra a medida de que van llegando. Con el tipo "multipart/alternative", la informacion en cada parte es id�ntica, pero estan formateadas de una manera distinta de manera que el cliente determina cual es el "mejor" formato que puede mostrar (por ejemplo elige "rich text" en vez de plain Text) y lo muestra.
Con el tipo "multipart/mixed-replace" que sera el que utilizaremos, cada parte del mensaje se superpone a la parte anterior; el cliente sobrescrito la parte vieja con la m�s nueva.

Un mensaje MIME multipart est� compuesto de un header y una o m�s partes que componen la totalidad del mensaje. El header indica como deben ser procesadaslas distintas partes del mensajey cuales son los separadores de las mismas, por ejemplo:

Conten-Type: multipart/x-mixed-replace;boundary=SeparaPartes

Cuando el cliente encuentra este tipo en el header, hace un refresh del sector correspondiente cada vez que una nueva parte del mensaje llega, sobreescribiendo de esta manera la anterior.

Cada parte del mensaje tiene su propio header, el cual indica el tipo de datos que esa parte contiene. "plain text", un grafico GIF o HTML por ejemplo. El header de cada parte siempre se encuentra debajo del separador que hallamos especificado(en la linea que vimos le pusimos "SeparaPartes" de nombre al separador, pero podriamos haber utilizado cualquier otro).

El server indica el fin de un mensaje multipart enviando un separador con el agregado de dos guiones, por ejemplo nuestro separador quedar�a;

--Separa Partes

El script que sigue es una version reducida del NPH 1.2 creado por Matt Wright y en el veremos una implementadi�n comentada del mecanismo que acabamos de describir.

#!/usr/bin/perl
# Variables
$veces ="1";
$dirbase= "/WWW/imagenes/animation/";
@archivos = ("primero.gif","segundo.gif","tercero.gif","primero.gif");
$tipo="gif";
#Hacemos que el stream de datosfluya sin un buffer para hacerlo mas rapico
select(STDOUT);
$| =1

#Comienzo del contenido multipart.
Print "Content-type: multipart/x-mixed-replace;boundary=separador\n\n";
print "--separador\n";

#Este for toma cada imagen de la seguencia, la envia, manda un separador
#y luego envia la siguiente, repitiendolo las veces que indique $veces
for ($num=1;$num<=$veces;$num++){
foreach $archi (@archivos){
      print "Content-type: image/$tipo\n\n";
      open(GIF,"$dirbase$archi");
      print<GIF>;
      close(GIF);
      print "\n-separador\n";
    }
}

Lo unico que me quedar�a por aclarar es que ya el tipo "x-mixed/replace" fue definido por Netscape, solamente funcionara con su browser version 1.1 y posteriores

GIF multipart

En este caso no tendremos que programar nada y es por lejos la forma mas simple de armar una animaci�n, aunque mantiene la desventaja de ser visualizados unicamente por Netscape 2.0 o posteriores.
En definitiva se trata de ampliar las posibilidades del formato GIF89A (aquel que nos permite utilizar backgrounds transparentes).
Los archivos .GIF tienen al comienzo un header que indica su tama�o y otros datos, con programas como el GIF Construction Setampliaremos este header e incluiremos lineas con la secuencia de imagenes y comandos de control. El header de una animaci�n simple quedaria de la siguiente manera:

HEADERGIF89AScreen(320x200)
LOOP
CONTROL
IMAGE320x200,256colours
CONTROL
IMAGE320x200,256colours
CONTROL
IMAGE320x200,256colours

Ya que el Gif Construction Set trae un Help bastante completo y es sencillo de usar, no quisiera extenderme m�s en el tema.
Sugerencia: Leer con el GIFCON los .Gif que trae de ejemplo.

SI nos desidimos por usar este metodotengamos en cuenta lo siguiente:
La mayor�a de los browsers (descartando Netscape 2.0) mostraran unicamente el primer cuadro de la animaci�ny algunos pocos solo el ultimo.
De manera que si queremos que tratar que la animaci�n luzca bienen cualquier browser, la soluci�n m�s simple es hacer que el primer cuadro sea el m�s presentable (nada de logos al reves) y que el ultimo sea igual al primero.

Counters

Implementar un "counter" no es una tarea muy dificil. Basicamente se graba en un archivo el valor del contador, y cada vez que se hace un nuevo acceso a la pagina controlada, se lee este archivo, se incrementa en uno el valor leido y se vuelve a grabar. Veremos un fragmento de script que hace esta tarea.
Por otro lado, no queria dejar de comentar que existen scripts m�s complicados que pueden generar una salida en la forma de un archivo .Gif. Estos scripts lo que hacen es leer el valor a representar, "pegan " en una misma imagen los digitos que componen dicho numero y lo envian
Si seguimos avanzando tambien encontraremos scripts que pueden controlar mas de una pagina, ya que trabajan en base a un archivo indice que almacena el valor de los contadores para cada pagina en particular.
A los fines de este tutorial, el eljemplo presentado es lo suficientemente entendible como para poder implementarlo y practicar sin mucho trabajo

#!/usr/locaal/bin/perl

open (CONTADOR,"$counter.dat")||die "Error al abrir el archivo:$!\n";
$contador=<CONTADOR>;
close(CONTADOR);
if($contador=~/\n$/){
chop($contador);
}

$contador++;

print"<HTML><HEAD><TITLE>Bla,bla,bla...</TITLE></HEAD>"

open(CONTADRO,">$counter.dat")||die "Error al cerrar el archivo: $!\n";
print CONTADOR "$contador";
close(CONTADOR);

Paginas Web con protecci�n por password

Para no dejar de lado el tema de la seguridad abordaremos el uso de passwords en el acceso a un servidor web.
Necesitamos nuevamente tener algunos conocimientos previos, en este caso el manejo de archivos UNIX.
Si utilizamos otro tipo de plataformas para correr el Web Server, como Windows NT, tendremos este tema solucionado con una muy sencilla configuraci�n a traves del uso de menues (por lo menos con el website).
Lo principal para aclarar antes de comenzar es que cuando utilizamos este sistema (segun su mecanica interna) restringimos el acceso a un directorio, no a una pagina en particular.

El metodo se basa principalmente en poner a cada directorio a proteger un archivo de nombre ".htaccess" que contiene los parametros de configuraci�n de la protecci�n implementada y el nombre del archivo que contiene los passwordsque normalmente es el ".htpasswd".

El archivo ".htaccess"

Este archivo debe estar ubicado en el directorio que se desea proteger y dicha protecci�n afectara a todos los subdirectorios del mismo , a menos que posean sus propios archivos ".htaccess".
Dado que se trata de un archivo de texto com�n podremos actualizarlo con cualquier editor del que dispongamos.

AutUserFile .htpasswd
AutGroupFile /dev/null
AuthName Ingrese su user ID y su Password.
AuthTypeBasic

<Limit Get>
requiere user usuario1 usuario2 usuario3 ...........
</Limit>

Descripcion de los parametros

AutUserFile: Es el nombre del archivo que contiene los nombres de los usuarios (Users ID) y sus respectivos Passwords. Este archivo debe estar ubicado en el mismo directorio que ".htaccess" pero puede llevar cualquier nombre. por convencion le daremos el nombre de ".htpasswd".

AuthGroupFile: Este es el nombre del archivo de grupo. Podemos setear grupos de usuarios para que tengan acceso a un directorio, en el caso del ejemplo no tenemos un archivo de estos armado, por lo que direccionamos a null que significa que no existe un archivo de grupos.

AuthName: Es el strig que aparecera en la ventanita que levanta el browser , cuando se le pregunte al usuario su ID y Password.

AuthType: Es la clase de seguridad que implementamos . "Basic" significa Autentificaci�n Basica HTTP, es decir que la informaci�n enviada a travez de la red no sera encriptada sino que sera "uuencodeada" (uuencoded), lo cual nos da un nivel de proteccion similar al de una sesion de telnet.
Existen otros metodos ademas de este tales como PEM, PGP, Kerberos V5 y Digest.

En el ejemplo que vimos solamente el metodo GET esta restringido usando la directiva <limit>. Para limitar otras metodos (particularmente en los directorios CGI-BIN) se puede especificar los mismos separados por espacios dentro de la directiva limit. Por ejemplo:

<Limit Get Post Put>
order deny,allow
deny from all
allow from .mencor.ar
</limit>

Restringiendo el acceso a los documentos de ese directorio a aquellas maquinas que se encuentren en el dominio .mencor.ar y excluyendo a los restantes.
Cabe destacar que los ID utilizados son completamente arbitrarios (es decir no tienen relaci�n con los usuarios del server).

El archivo .httpasswd
Este archivo consite en una lista de los user ID y sus passwords encriptados, es un archivo de texto com�n por lo que puede ser movido, copiado o borrado como cualquier otro.

Por ejemplo:

pedro:WkSK1DE7N8.9
pablo:hQty39EV1.g56
diego:JeB31vf9PSTgw
susana:EDRfRrfrw43q

Como no podemos crear un password encriptado a mano usaremos una herramienta llamada htpasswd que permite construir este tipo de archivos.
Esta herramienta se usa de la siguiente manera:

Server<htpasswd-c.htpasswd USUARIO
Adding password for USUARIO
New password *********
Re.type new password *********

Si queremos modificar el password de USUARIO en otro momento usamos la misma sintaxis . Para eliminar usuarios simplemente se borra la linea correspondiente dentro del archivo.

Proteccion a nivel de grupo
Cuando tenemos un gran numero de usuarios que mantener podemos facilitar el manejo de los mismos separandolos en "grupos" creando un archivo de nombre ".htgroup" (por convencion) con el siguiente formato:

nombregrupo1:primeruser segundouser................nuser
nombregrupo2:primeruser segundouser................nuser
nombregrupo3:primeruser segundouser................nuser

y debemos cambiar el requiere por un "require group nombregrupo".

< Anterior

Hosted by www.Geocities.ws