PDF de programación - Tecnologías Web: Interactividad y envío de información Cliente -> Servidor CGI

Sistemas de
Información

Tecnologías Web: Interactividad y envío de
información Cliente → Servidor
CGI

Agradecimientos: Jesus Villamor Lugo, Simon Pickin de IT/UCIIIM.

[email protected]

Concepto
CGI: Common Gateway Interface
Protocolo para ejecutar programas en el servidor

vía HTTP.

Permite hacer disponible en el servidor HTTP:

programas escritas en cualquier lenguaje interpretado o

compilado. (C, Perl y Bourne Shell)

Normalmente, las aplicaciones exportadas residen

en directorio particular (usualmente cgi-bin)
Se puede configurar el servidor para utilizar otros

directorios.

[email protected]

2

¿Qué hace la parte servidora?

Recibe unos datos, los procesa y devuelve otros
Toma los datos por la entrada estándar

(teclado) y envía los datos de salida por la
salida estándar (pantalla).

Cualquier programa capaz de leer por entrada

estándar y escribir en salida estándar puede
actuar como CGI

El usuario no puede interacturar directamente
con el programa CGI. (salvo llamadas a varios
cgis)

[email protected]

3

Arquitectura CGI (Ejemplo)

HTML

&

FORMS

Navegador

Cliente Web

Cliente

HTTP

HTTP

Internet
TCP/IP

Docs HTML
CGI.

Aps

BD1

BD2

BD3

Lógica

BBDD

Ej.: CGI hace que clientes Web puedan actualizar BBDD.
Uso típico en aplicaciones con tres niveles:

Cliente: navegador que envía peticiones HTTP GET ó POST que

contienen los datos que han sido introducidos mediante un formulario.

Logica: programa que procesa la solicitud, recibe parámetros por

medio del CGI, toma acciones y responde (por abuso de lenguaje, a
veces se le llama “un programa CGI” o “un CGI”).

Base de datos: puede ser actualizada por la acción del programa

[email protected]

4

¿Qué necesito?

Página HTML
Programa o script que lea datos de entrada estándar

y escriba en salida estándar

Permisos adecuados en el servidor para permitir su

ejecución
chmod 750 *.cgi" (o "chmod 755 *.cgi", si tu servidor no

tiene accesos de grupo a tus archivos)

En los laboratorios de telemática utilizad “chmod 755 *.cgi”

[email protected]

5

¿Cómo referenciar un CGI desde
una página web?
Usando etiquetas HTML

Usando la etiqueta A:

<a href="direccion_del_CGI">Texto</a>

Usando la etiqueta IMG:

<img src="direccion_del_CGI">

Otras (javascript, css, etc.)

Usando un formulario (forma + habitual):

<form action="direccion_del_CGI" > <!--
Elementos del formulario --> </form>

[email protected]

6

Ejemplo (usando etiquetas)

fecha.html

<a href="http://www.sitioweb.es/cgi-
bin/fecha.cgi"> Dime la fecha </a>

fecha.cgi

#!/bin/bash
echo Content-type: text/plain
echo
/bin/date

Prueba

[email protected]

7

Anatomía de un CGI

#!/bin/bash
echo Content-type: text/plain
echo
/bin/date

1. Tipo de respuesta:

• Content-type
• Location
• Status

2. Línea en blanco

3. Datos de salida:

• Salida estándar
• Respetar tipo Mime

[email protected]

8

Tipo de respuesta
Content-type

text/html
image/gif
video/mpeg

Location

Status

Para enviar archivo existente como respuesta
Location: response.html

Si el script sirve para tratar condición de error
Envio información del estado
Códigos

1xx msg de información
2xx éxito de algún tipo (200 Ok la petición ha tenido éxito)
3xx redirección a otra url (301 Moved Permanently )
4xx error en cliente (404 not found. The requested resource doesn't exist)
5xx error en el servidor (500 Server Error )

[email protected]

9

Probando en el laboratorio
Páginas HTML

¿Dónde las pongo?

~tuCuenta/lib/www/

¿Cómo accedo a ellas?

http://www.lab.it.uc3m.es/~tuCuenta

Programas y scripts cgi

¿Dónde los pongo?

¿Cómo accedo a ellos?

~tuCuenta/lib/www/cgi-bin/

http://www.lab.it.uc3m.es/alum-cgi/tuCuenta/cgi-bin/app.cgi

[email protected]

10

CGIs con argumentos

?
+

Separa el cgi de los argumentos

Separa los argumentos entre sí

<a href="/cgi-bin/cgi?arg1+arg2+arg3">pulsa aqui</a>

<a href="/cgi-bin/cgi/infoAdicional?arg1+arg2">pulsa aqui</a>

Información adicional recuperable utilizando
Variable de entorno PATH_INFO

[email protected]

11

CGIs y Formularios
Usando GET

Se usa para obtener fichero o recurso
Los datos se leen de var de entorno QUERY_STRING
Tamaño limitado 256 caracteres
No registra cada petición

Usando POST

Se usa para enviar datos al servidor
Los datos se leen de la entrada estándar
Tamaño ilimitado (preguntar CONTENT_LENGTH )
Registra cada petición

[email protected]

12

CGIs y Formularios
<form action="cgi-bin/fichero.cgi"> Contenido </form>

Información del formulario codificada en pares campo/valor
& separa entre sí las diferentes parejas campo/valor
= Separa el nombre del campo de su valor
%NN Identifica los caracteres especiales,(≠ ASCII 7 bits)
%NN También para codificar &, = y % cuando son datos
+ para codificar los espacios

NN es el valor en hexadecimal (ASCII extendido)

para no confundirlos con caracteres de control

[email protected]

13

Ejemplo

getYpost.cgi
#!/bin/bash
echo "Content-Type: text/html"
echo ""
if [ $QUERY_STRING != "" ]
then

echo "Datos enviados por GET<br/>"
echo "----------------------<br/>"
echo $QUERY_STRING

else

1. Tipo de respuesta

2. Línea en blanco

3. Datos de salida

echo "Datos enviados por POST<br/>"
echo "----------------------<br/>"
cat

PruebaGet
PruebaPost

fi

[email protected]

14

Ejemplo
Probando get:

PruebaGet (sin página web)
http: //monitor03.lab.it.uc3m.es/alum-cgi/00xxxxx/cgi-bin/getYpost.cgi?mensaje=hola

PruebaGet.html (desde página web)
<html>
<body> <a href="DireccionCgi?arg1+arg2+arg3">pulsa aqui</a> </body>
</html>

Probando post:

PruebaPost.html
<html>
<body>
<form method="post" action=“direccionDelCgi">

Texto: <textarea name="mensaje"></textarea> <br/>
<input type="submit" value="Enviar"/>

</form>
</body>
</html>

[email protected]

15

HTTP/CGI
Proceso de Desarrollo

1.



Fichero .html
(con <FORM>)

<URL>

2.
navegador



GET ó POST
Petición

Programa CGI

Respuesta



visualizar

3.

4.

Servidor

Cliente

[email protected]

Se parte de un Fichero.html que
tenga un formulario (etiqueta
<FORM>) accesible a través de
Internet

•

El <FORM> deberá especificar las
diversas formas de paso de
parámetros

El cliente accederá al fichero html
a través de un Navegador,
rellenará el formulario y dará a la
tecla de aceptar (Submit).
Empaquetando la petición.
La petición de cliente es atendida
por un Programa CGI
(usualmente un script) quien da la
debida respuesta tras procesarse la
petición.
El cliente Visualizará la
respuesta

16

Acceso al CGI
Entrada vía formularios
Mediante el uso de formularios HTML:

Etiqueta <FORM>

⌧Comunica al cliente que estamos comenzando un formulario.
⌧Dos atributos:

•Método:

–cómo recoger la información del usuario.
–GET (por defecto) o POST.

•Acción:

–tipo de URL que recibirá el formulario (puede no ser CGI, ej. mailto).

⌧Ejemplo:

<form method="POST” action="http://www.ncsu.edu/cgi-bin/post-query">
Campos de Información: <input ...>, <select …>, <textarea …>

⌧Name, size, type (ya explicados bajo HTTP/HTML)
⌧Recoge datos en forma de parejas de cadenas (nombre, valor)

[email protected]

17

Acceso al CGI
Cómo pasar parámetros al programa

No se puede pasar datos al programa vía línea de comando.

La forma de hacerlo depende del método de envío.

Primero, se construye la cadena llamada query string

es una serie de parejas nombre=valor separados por &

ej: nombre1=valor1&nombre2=valor2&...

se codifica de manera similar al “quoted printable” de MIME:

espacios reemplazados por “+” y caracteres especiales en hexadecimal

Segundo, se envía al CGI según el método de envío

Se pone en el cuerpo del mensaje que se envía en el POST.
El CGI lo lee por entrada estándar (stdin)

[email protected]

18

método GET:

método POST:

se agrega a la URL, separado por un signo de interrogación:

http://<host>:<port>/<path>?<query_string>

El CGI lo lee mediante la variable de entorno QUERY_STRING

Escenario básico
Con el método POST

Navegador Web Servidor Web

Variables de entorno

Submit

Submit

Post

Escribe el entorno

Ejecuta

Programa CGI

Lee el entorno

Entrada estándar

Salida estándar

Acceso a la BD

BD

Fichero HTML

Cliente

[email protected]

Servidor

19

Escenario básico
Con el método POST

1.
2.
3.
4.

5.
6.

7.

8.

9.
10.

El usuario pincha en el botón submit.
El navegador envía la petición con el método POST de HTTP.
El servidor recibe la petición y descubre el método y la acción.
El servidor establece las variables de entorno tales como server_name,
request_method, content_type, content_extension, etc.
El servidor inicia la ejecución del programa CGI especificado en el URL
El programa CGI lee las variables de entorno y, en particular, descubre
que está respondiendo a un POST.
El programa CGI recibe el cuerpo del mensaje − que contiene el query
string − por la entrada estándar y utiliza la variable content_extension
para saber el tamaño de los datos (no disponible con GET).
El programa CGI hace sus labores (interactúa con la BD etc.), construye
la respuesta en forma de un tipo MIME reconocido y posiblemente
escribe tambié