Tutorial de CGI I

Introducción

El Web no es solo un medio para colocar información de variados tipos y formatos a disposicion de los usuarios de Internet. Utilizando el Web es posible tambien interactuar con el usuario de forma que el pueda, por ejemplo, encargar un producto, suscribirse a algun servicio, reservar un pasaje o hacer una consulta a una base de datos.

La intencion de este texto es acercar a todos los que se han iniciado en HTML hace poco tiempo, al diseño de paginas interactivas y asi avanzar un poco mas en sus conocimientos.

Estimo que no debe ser para nada perfecto ni mucho menos, quizá se podría decir si, es bastante "entendible" por eso espero que sirva de iniciacion en el tema, cualquier correccion, duda o sugerencia pueden mandarla a dquir@indec.mecom.ar donde tratare de contestar en la medida de lo posible = cerebro/tiempo.

Cómo funciona la cosa

En el momento que accedemos a una pagina del tipo que mencionamos, podemos apreciar distintos elementos que permitiran que nuestros deseos/necesdades puedan ser transmitidos a las personas que manejan esa pagina. La mecanica es simple, la información es enviada a un programa a un programa, el script CGI, procesada y en consecuencia  es generada una salida.

Los datos que ingresemos seran encapsulados en una variable de entorno denominada QUERY_STRING, y en el momento de apretar el botón de "submit" sera leida e interpretada por nuestro script. Dentro de ella iran todos los valores correspondientes a los datos que ingresemos, de manera que el script tendran que separarlos uno por uno para su proceso. Esto se logra facilmente mediante el uso de funciones que vienen incluidas en librerias especializadaspara cada lenguaje en particular.

Existen otras variables de entorno que pueden ser accedidas por un script CGI cuando este se ejecuta tales como:

El script eventualmente retornara una pagina HTML o una imagen que es mostrada como resultado de la ejecucion. Este ultimo caso es el de los counters, que a traves de un pequeño programa en C, "pegan" los distintos digitos que representan la cantidad de accesos que ha tenido esa pagina en un UNICO.GIF. Para diferenciar estos tipos de salida de envían un "header" al comienzo de la transmision de la respuesta que las identifica según la siguiente especificación (extensiones MIME).

{{ a proposito de los counters, quisiera hacer un comentario personal sobre la utilidad de los mismos, ya que en mi opinion la contabilidad de estos es como minimo dudosa, como ejemplo basta mencionar una pagina llamada "The Terrrorist Counter" que contiene links a muchos counters diferentes en distintas paginas, de todo el mundo y que al ser caragada los hace aumneta a todos al mismo tiempo, pero bueno, esa es otra historia..}}

Los scripts normalmente  estan ubicados en el directorio cgi-bin del web-server o bien en alguno similar (CGI-WIN, CGI-DOS). La ubicación del directorio cgi-bin es determinada por el administrador del Web, o "webmaster" como se le llama comunmente, y esta puede ser una ubicación fisica real o bien  una logica. Es importante mencionarlo, ya que la mayoria de los web-servers solo permiten que se ejecuten desde estos directorios en particular.

Para finalizar este breve vistazo del tema basta con mencionar que los scripts CGI pueden ser escritos en cualquier lenguaje. Comunmente se utiliza PERL o C , aunque contando con las librerias adecuadas se pueden escribir tambien en Turbo Pascal (micaso particular), Visual Basic y hasta Delphi.

Por donde empezar

Para comenzar analizaremos la creación dce "forms", nuestro front- end/interfaz  grafica  que permitira a los usuarios el ingreso de la informacion deseada. Estos "Forms" hacen uso de elementos comunes para aquellos familiarizados con las GUI modernas, Windows o X-Windows, como son los buttons, check boxes, radio buttons, pulldown menus, text boxes, etc...

Una vez que hayamos dominado bien   este tema podremos pasar a la diagramación programación de los scripts CGI, es decir los programas que procesaran los datos ingresados por los usuarios. Creo que la mejor manera de aprender este tema, es ir leyendo el documento y practicando en el browser de todos modos cada cual eligira el sistema que le resulte mas comodo.

FORMS
Forms simples

Comenzaremos con una pagina tipo que tiene incluido el tag correspondiente al inicio de un form;

<HTML>
<HEAD>
<TITLE>Pagina de Prueba </TITLE>
</HEAD>
<BODY>
<H1>Titulo prueba de Forms </H1>
<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/prog.exe">
< -- aqui comenzaria el codigo de los elementos del form --!>
........................................................................................................
........................................................................................................
</FORM><-- y aqui terminaria--!>
</BODY>
</HTML>

Evidentemente "prog.exe" es el nombre del ejecutable (script CGI) que correr  en el web-server una vez que el usuario envie la informacion requerida, y POST es el metodo que se utiliza para realizardicha accion. Existe otro metodo llamado GET que hace exactamente lo mismo, la diferencia radica en que esre ultimo envia la data  dentro dela variable de entorno que habiamos mencionado (QUERY_STRING) "pegada" al URL del script t POST lo hace como un "stream" continuo de caracteres. Es preferible utiliza rOST ya que el mismo no tiene limitaciones de tamaño y en cambio GET si puede tenerlas en el server.

Text Line

El elemento mas simple que podemos utilizar en un FORM es el "Text Line" que le permite al usuario ingresar texto en una linea. La sintaxisutilizada para este tag es la siguiente;

<FORM METHOD ="post" ACTION="http://alguna direccion/cgi-bin/text.exe">
Escriba su nombre<br>
<INPUT TYPE= "text" NAME="nom_var" SIZE=20>
</FORM>

En el browser se vera:

Cuando el usuario oprima la tecla "Enter" lo que haya escrito sera enviado al web-server. Veamos los parametros de este tag. En NAME va el nombre de la variable que almacenara el texto que tipee el usuario y en SIZE tenemos 20 que es la longitud en caracteres que va a tener la caja. Por medio de un script-CGI "capturaremos" la variable "nom_VAR" y leeremos su contenido, el cual podremos procesar posteriormente.

Password Text.

En adición a Text Line existe el tipo "password" que sirve para ingresasr claves o textos secretos, cuya sintaxis es muy parecida. No se trata para nada de un medio seguro para enviar informacion a través de la Net, pero bueno, puede servirnos para este fin ddactico.

<FORM METHOD= "post" ACTION="http://alguna direccion/cgi-bin/pass.exe">
Ingrese su nombre y su password.<BR>
<INPUT TYPE="text" NAME="nom_var" SIZE=20><BR>
<INPUT TYPE="password" NAME="pass_var" SIZE=20><BR>
</FORM>

Obtendremos la siguiente salida:

Obviamente lo que escribamos en la caja de password no aparecera como texto normal sino como una "*" representando cada caracter.

Text Boxes

Si necesitamos recibir mas de una linea podemos utilizar los tags <TEXTAREA..> </TEXTAREA> de la siguiente manera:

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/text.exe">
Ingrese su comentario<BR>
<TEXTAREA NAME="caja" ROWS=5 COLS=40> Este texto aparecera en la caja por default. El mismo puede estar separado por "ENTERs".</TEXTAREA><BR>
<Input Type="submit" NAME"boton_env" VALUE="Enviar">
</FORM>

El significado de cada parametro es el siguiente:
NAME - Nombre de la variable que almacena el texto de la caja
ROWS - Cantidad de filas de la caja de texto.
COLS - Cantidad de columnas de la columna

Submit Button

En el caso que acabamos de ver, el "Enter" sirve para pasar a la linea siguiente mientras se esta escribiendo, de manera que implementamos otro metodo para enviar la información, que es el "submit Button", cuando el mismo sea oprimido el texto que hayamos cargado sera enviado.

Estos son los parametros del Submit Button:
NAME - nombre del boton (para la referencia en el script)
VALUE - Texto que aparecera en el boton (por default es "Submit")

El parametro NAME no es necesario en el caso anterior, pero es interesante citarrloya que podemos llegar a utilizarlo en el siguiente situación:

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/text.exe">
Le gusto la pagina<BR>
<INPUT TYPE="submit" NAME="boton_env" VALUE="Si">
<INPUT TYPE="submit" NAME="boton_env" VALUE="No">
</FORM>

Aqui la variable boton_env contendra los valores "Si" o "No" según cual de los dos botoness oprima el usuario.

Radio Buttons

Los Radio Buttons permiten que el usuario elija una unica opcion entre varias. Son pequeños circulos que aparecen cuando tenemos que indicar el sexo, o bien un rango de edades o una opinion (muy bueno, bueno, malo). VEamos un ejemplo del codigo.

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/radio.exe">
Cual es tu edad?<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="a"> menos de 18 <BR>
<INPUT TYPE="radio" NAME="edad" VALUE="b" CHECKED>entre 18 y 24 <BR>
<INPUT TYPE="radio" NAME="edad" VALUE="c"> entre 25 y 45 <BR>
<INPUT TYPE="radio" NAME="edad" VALUE="d"> 46 o mas <BR>
<INPUT TYPE="submit" NAME="boton_env" VALUE="Enviar">
</FORM>

La pantalla mostraria algo como esto:

El  form retornara dentro de la variable "edad" el valor de a, b, c o d según corresponda la opción que haya sido elegida por el usuario. La clausula CHECKED permite tener un item seleccionado por default.

Check Boxes

Los Check Boxes sirven cuando necesitamos recibir un imput  con mas de una opcion seleccionada, se utilizan por ejemplo para marcar las caracteristicas que mas nos agradan de un determinado producto. La sintaxis es bastante parecida a la anterior:

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/check.exe">
Marque aquellos temas que sean de su interes: <BR>
<INPUT TYPE="checkbox" NAME="temas" VALUE="ntecs">Nuevas Tecnologias<BR>
<INPUT TYPE="checkbox" NAME="temas" VALUE="inves" CHECKED>Investigación<BR>
<INPUT TYPE="checkbox" NAME="temas" VALUE="grafs" CHECKED>Graficos/CAD<BR>
<INPUT TYPE="checkbox" NAME="temas" VALUE="redes">Redes/Comunicaciones<BR>
<INPUT TYPE="submit" NAME="boton_env" VALUE="Enviar">
</FORM>

En el browser tendriamos:

Igual que con los radio buttons, la cláusula CHECKED permite tener marcados algunos cuadritos por default. En la variable "temas" van a ir a parar aquellas opciones que sean marcadas por el usuario.

Pop up list

Podemos tambien utilizar menues descolgantes como manera de elegir una opcion entre varias mediante el tag <SELECT> como podemos ver mas abajo:

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/popup.exe">
Que sistema operativo usas?<BR>
<SELECT NAME="sistema">
<OPTION SELECTED>DOS
<OPTION>Windows 3.1
<OPTION>Windows 95
<OPTION>OS/2 Warp
<OPTION>Linux
<OPTION>Otro
</SELECT><BR>
<INPUT TYPE="submit" NAME="boton_env" VALUE="Enviar">
</FORM>

Al igual que en los otros ejemplos, la variable "sistema" almacenara el item elegido.

Forms multiples y el Reset Button

Todos los elementos que hemos mencionado pueden ser utilizados individualmente con un submit button (o sea con un form para cada uno) o bien pueden ser empleados varios de ellos en una misma pagina.
Nota: Se estila en la creacion de un buen form, el poner lineas horizontales arriba y abajo del form (<HR> o alguna linea grafica) y proveer instrucciones de como se deben llenar los blancos.

Para finalizar construiremos un ejemplo que contenga todos los tags vistos hasta ahora. Este form multiple introduce el uso de un nuevo tipo de boton, el Reset Button, que en resumidas cuentas borra los datos que hayamos ingresado y deja los elementos en su opcion de default.

<FORM METHOD="post" ACTION="http://alguna.direccion/cgi-bin/popup.exe">
Ingrese su información:<BR>
Nombre:<INPUT TYPE="text" NAME="nombre" SIZE=30><BR>
Email:<INPUT TYPE="text" NAME="email" SIZE=30><BR>
Comentarios:<BR>
<TEXTAREA NAME="caja" rows=5 cols=40></TEXTAREA><BR>
<BR>
Que lenguaje prefiere?<BR>
<SELECT NAME="lenguaje">
<OPTION SELECTED>Turbo Pascal
<OPTION>Turbo Pascal
<OPTION>Delphi
<OPTION>Visual Basic
<OPTION>Smalltalk/V
<OPTION>Cobol
</SELECTED><BR>
<BR>
Que le parecio la guia?<BR>
<INPUT TYPE="radio" NAME="opin" VALUE="a">Mala<BR>
<INPUT TYPE="radio" NAME="opin" VALUE="b">Regular<BR>
<INPUT TYPE="radio" NAME="opin" VALUE="c" CHECKED>Buena<BR>
<INPUT TYPE="radio" NAME="opin" VALUE="d">Muy Buena<BR>
<INPUT TYPE="radio" NAME="opin" VALUE="e">Excelente!<BR>
<BR>
<INPUT TYPE="checkbox" NAME="email" VALUE="si">
Marque esta casilla si quiere recibir informacion via email <BR>
<BR>
<INPUT TYPE="submit" NAME="boton_env" VALUE="Enviar">
<INPUT TYPE="reset" NAME="boton_res" VALUE="Borrar">
</FORM>

Salida en pantalla:

Para finalizar con la primera parte de este documento, solo resta decir que todo lo visto hasta ahora es posible practicarlo sin necesidad de un server basta un cut & paste de los ejemplos funcionara, por lo tanto .... Manos a la obra!!

Siguiente >