programación de pàginas web dinámicas con cgis · esquema • webs estáticas o dinámicas. •...

21
Programación de páginas web dinámicas con CGIs

Upload: dinhngoc

Post on 10-Jun-2018

221 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Programación de páginas web dinámicas con CGIs

Page 2: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Esquema

• Webs estáticas o dinámicas.• CGIs: Que son y como funcionan• Formularios para enviar información• CGIs en perl

Page 3: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Webs estáticas o dinámicas

Una (página) web estática está formada por elementos (html, imágenes, ...) que existen independientemente de la navegación que se realice por ella.

Una (página) web dinámica tiene componentes que se crean (y destruyen) dinámicamente en respuesta a acciones desencadenadas durante la navegación.

Page 4: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Ejemplos

•  4estacions.html

• primavera.html

• estiu.html

• hivern.html

• tardor.html

• IMATGES (folder)

• fig1.jpg

• ...

• fign.jpg

• Directorio.html

• listado.html

Web estática

Sitio web con una página principal desde dondes se accede a otras páginas o enlaces.Las páginas existen aunque nunca se acceda a ellas.

Web dinámica

Sistema para generar listados a partir de una base de datos. Cada nueva petición genera un nuevo listado (nuevo=no existía la página antes de pedirla)

Page 5: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Ejemplo

4est

pri otover inv

IMAGES

dir

Server,Database

list

Estática 4 estaciones

Dinámica directori

Page 6: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Que son los CGIs

• Common Gateway Interface.• Permiten la ejecución de programas a

través de la web.• Pueden escribirse en cualquier lenguaje

– Perl, R, Java, C, C++

• Perl tiene una muy buena interfaz para crear CGIs.

Page 7: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

¿Como funcionan los CGIs?

• Se crea un programa, se hace ejecutable y se almacena en el servidor.

• Se envía información al programa mediante un formulario

• Se ejecuta el programa y retorna los resultados al navegador.

Page 8: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Formularios y CGIs

• La mayoría de scripts de CGI se invocan desde un formulario (puede también hacerse directamente desde un enlace!)

• Mediante los formularios– Se recopila información necesaria

(parámetros)– Se envía la información al script al pulsar

el botón “enviar”.

Page 9: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Envío de la información

- “method”: como se pasa la información– “post” : con la cabecera HTTP. Invisible– “get” : con la cadena de la URL: visible en la barra de

navegación– “action”: el programa a invocar– “input type=“submit”:

– Boton de ejecución que invoca al programa descrito por ‘action’

<form method=“post”, action=“procesa.pl”>…….<input type=“submit” value=“Mandalo ya”></form>

Page 10: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

POST y GET

• POST– EL programa obtiene la información de stdin (el

teclado, la variable generada por el formulario)– Puede enviarse tantos datos como se desee.– La información no es visible desde fuera

• GET– El programa CGI lee los datos de una variable de

entorno (QUERY_STRING)– Límite en la cantidad de datos que se puede enviar

(1,000 caracteres)– Los datos son visibles en la barra de navegación

• En general se recomienda usar POST

Page 11: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

CGIs en perl (1)Un programa “no CGI”

#!/usr/bin/perl use strict; use warnings;

print "¿Cómo te llamas?"; my $username; $username = <STDIN>; chomp($username); print "Hello, $username.\n";

getusername.pl

Page 12: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

CGIs en perl (2)Conversion en un programa CGI

#!/usr/bin/perl use strict;

use warnings;use CGI qw(:standard); # use the CGI library# print "What is your username? "; my $username; # "declare" the variable # $username = <STDIN>; $username = param (“username”); # read the username # chomp($username); print header(); # output <HTML>print start_html(“First CGI program”); # add a titleprint "Hello, $username.\n"; print end_html(); # output </HTML>

getusernamePL.cgi

Page 13: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Invocación del programa vía web

<html><head><title>Get Username</title></head><body bgcolor=white>

<FORMACTION="http://miservidor/~usuario/cgi-bin/getusernamePL.cgi"METHOD="POST"><h2>Form Example 1</h2>

Entra tu nombre de usuario: <INPUT TYPE="text" SIZE="20" NAME="username"> <input type=“submit“ value=“Submit Query”> </FORM></body></html>

getusername.html

Page 14: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Aspecto del programa

Entramos “MARIAdelasMERCEDESY pulsamos el boton “Envia'l”

Page 15: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Resumen: Creación de un CGI

Primera fase: programa sin parámetros en el servidor Crear un programa que se ejecute desde linea de

comandos Ponerlo en el directorio .public_html/cgi-bin Asignar valores a las variables, p.ej: $username =

“alex”; Grabar el resultado en un archivo,

perl myprog.cgi > output.html Visualizar la salida por el navegador

Page 16: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Resumen: Creación de un CGI (2)

Segunda fase: asegurando la visibilidad del programa

Probar de llamar el cgi desde una cuenta distinta a la usada para copiarlo en el servidor (asegurarse de que los permisos de lectura-ejecución son los adecuados)

perl /users/myusername/.public_html/cgi-bin/miprograma.cgi > output

Page 17: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Resumen: Creación de un CGI (3)

Tercera fase: Crear y probar el formulario Diseñar un formulario que llame a un cgi sin

parámetros Por ejemplo un cgi que tan sólo diga “Hola

mundo” Copiar el formulario en el directorio designado en

el servidor para guardar los archivos .html, por ejemplo “.public_html”

Abrir el archivo html en el navegador y apretar “enviar

Debería aparecer una página “hola mundo”

Page 18: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Resumen: Creación de un CGI (4)

Cuarta fase: asegurarse de que el CGI en recibe bien los parámetros Crear una versión simplificada del CGI que se limite a

coger los parámetros y enviarlos al navegador. Piede hacerse comentando todo el código que no sea

ésto

Quinta fase: Ensamblado final Tras comprobar que el flujo de parámetros es adecuado

volvemos a la versión completa del programa y ya podemos ejecutarlo

Page 19: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Problemas habituales en los CGIs (1)

Las etapas sugeridas en el desarrollo del CGI muestran los posibles problemas: Problemas de permisos

Los archivos o directorios no tienen los permisos adecuados. Verificarlo mediante “ls -l” en los directorios

Debería ser drwxr-wr-x en ambos chmod 755 para los directorios Chmod 644 el programa perl

Verificarlo pidiendo a alguien (de otra cuenta) que ejecute el script Problemas de acceso (por ejemplo se hace la llamada a un directorio

distinto al que contiene el script) Probar con un cgi sencillo -que no pueda fallar- si el acceso está

garantizado Formularios mal elaborados Errores al producir el HTML desde el script

Probar de enviarlo directamente desde el script y visualizarlo en el navegador

perl miprograma.cgi > output.html firefox output.html

Page 20: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Otros problemas comunes

La primera línea del archivo tienen que ser: #!/usr/bin/perl

– Antes incluso que otros componentes.

No debemos olvidarnos de inviocar la funión “print header(92

– Antes que cualquier llamada a print().

En algunos sistemas el archivo tiene que llamarse .cgi no .pl

Page 21: Programación de pàginas web dinámicas con CGIs · Esquema • Webs estáticas o dinámicas. • CGIs: Que son y como funcionan • Formularios para enviar información • CGIs

Enlaces interesantes

• Introducción a la programación en perl CGI y javascript

http://es.tldp.org/Tutoriales/PERL­CGI/perl­cgi­javascript/

• CGI 101-Perl para la WWWhttp://www.cgi101.com/class/