Workshop for CGI and Servlets

7/23/2019 Workshop for CGI and Servlets

1/17

Aplicaciones Web: CGIs y Servlets

Objetivo

Entender el funcionamiento bsico de las aplicaciones web que se ejecutan del lado del

servidor

Desarrollar una aplicacin web bsica usando la tecnologa de CGI y usando Servlets

Comprender los principales retos que se presentan al desarrollar aplicaciones web

usando CGI y Servlets

Enunciado

La empresa Los Alpes requiere una aplicacin web sencilla que permita registrar los datos

interesados en sus productos. Por un lado, la aplicacin web debe permitir a los usuarios ingresar

un nombre y un correo electrnico. Los datos de cada usuario se debern guardar en un archivo

de texto.

Por otro lado, los empleados de la empresa podrn consultar los usuarios que se han registrado.

Cualquier empleado podr ingresar el nmero de usuarios que desea consultar (un nmero n).En respuesta, la aplicacin deber mostrar solo los datos de esa cantidad usuarios (los datos de

los primeros n usuarios). En caso que el empleado ingrese un nmero mayor al nmero de

usuarios registrados (es decir, nes mayor al nmero de registros en el archivo) la aplicacin

deber mostrar los datos de todos los usuarios.

La empresa Los Alpes quiere evaluar la facilidad de desarrollo de (1) la aplicacin usando

tecnologa CGI (Common Gateway Interface) con el lenguaje de programacin C y corriendo

sobre el servidor Apache httpd, con respecto a (2) la aplicacin desarrollada con la tecnologa de

Servlets en el lenguaje de programacin Java (por ejemplo, corriendo en el servidor de

aplicaciones Glassfish).


2/17

Pasos para crear una aplicacin CGI en lenguaje C:

Introduccin a la tecnologa CGICGI (Common Gateway Interface) en un estndar que permite a un servidor web ejecutar un

programa externo. El programa externo (un script o un programa ejecutable) puede obtener los

datos de la peticin enviada por un navegador y generar una respuesta que es enviada de

regreso a ese navegador.

Creacin de una aplicacin CGI en C

Para crear la aplicacin CGI en C, vamos a apoyarnos en la librera cgic. Esta librera nos

permitir obtener los datos y procesar los encabezados de las peticiones HTTP del cliente y

generar fcilmente la respuesta.

1. Descargue la librera cgicdel sitio web:http://www.boutell.com/cgic/

2. Cree un archivo simple-cgi.c y bralo con el editor de texto de su preferencia.

3. En C para importar las libreras necesarias para la ejecucin del programa se usa la

sentencia #include, importe las libreras stdio.h, string.h, stdlib.h y cgic.h como se indica

a continuacin.

#include

#include

#include #include cgic.h

NOTA:Note que la librera cgic.hse importa de manera diferente, esto se hace para indicar al

compilador que la librera, en este caso cgic, se encuentra en el mismo directorio que el script

que lo va a usar.

3. Todas las aplicaciones en C deben tener un mtodo main(), para nuestro caso y por

hacer uso de la librera cgic, usaremos el mtodo cgiMain()como punto de entrada de

nuestro programa, dejando a cgic.cla responsabilidad de implementar el main()4. Para cada peticin que ejecute el programa, el llamado de los mtodos se debe hacer en

el siguiente orden:
http://www.boutell.com/cgic/http://www.boutell.com/cgic/http://www.boutell.com/cgic/http://www.boutell.com/cgic/


3/17

5. En C para usar un mtodo, este debe ser declarado antes de su utilizacin. Declare los

mtodos inmediatamente despus de la importacin de libreras.

void HandlePostSubmit();

void HandleGetSubmit();void printHeader();

void printFooter();

6. Defina la constante DATAFILE, que indica la ruta donde se va a encontrar el archivo

donde se guardan y se leen los registros del programa.

#define DATAFILE "../data/data.txt"

int cgiMain()

voidprintHeader()

voidrintFooter return 0

voidhandleGetSubmit()

voidhandlePostSubmit()


4/17

7. Implemente el mtodo cgiMain() como se muestra a continuacin. El cdigo, para

verificar si un botn de envo (submit) de formulario fue activado por el usuario, usa el

mtodo cgiFormSubmitClicked()que recibe como parmetro el nombre del botn que

se puso en el HTML.

int cgiMain() {

/* Enva el encabezado */

printHeader();

/* El usuario hizo submit con "postrequest"? */if ((cgiFormSubmitClicked("postrequest") == cgiFormSuccess))

{HandlePostSubmit();

}/* o hizo submit con "getrequest"? */

else if ((cgiFormSubmitClicked("getrequest") == cgiFormSuccess)){HandleGetSubmit();

}

/* Enva el pi de pgina */printFooter();

/* Termina el programa */

return 0;}

7. Implemente el mtodo printHeader(). Este mtodo define el tipo de contenido (en

encabezado Content-Type) que el programa retorna al navegador usando el mtodo

cgiHeaderContentType() de la librera CGIC. Este mtodo recibe como parmetro el

tipo de contenido, para nuestro caso text/html.


5/17

8. Para imprimir cada lnea de la respuesta, usaremos el mtodo fprintf(), usando como

parmetros cgiOut(el stream de comunicacin con el navegador/cliente) y los datos (por

ejemplo un string) que se van a enviar de regreso.

void printHeader()

{/* Enva el tipo de contenido de la respuesta */

cgiHeaderContentType("text/html");

fprintf(cgiOut, "\n");

fprintf(cgiOut, "Simple CGI\n");fprintf(cgiOut, "Simple CGI\n");

}

9. Implemente el mtodo printFooter()que usaremos nicamente para cerrar las

etiquetas (tags) y de la respuesta.

void printFooter()

{fprintf(cgiOut, "\n");

}

10. En el mtodo handlePostSubmit() vamos a extraer la informacin del nombre y e-mail

del usuario, que se ingresaron en el formulario. Para esto primero debemos declarar dos

arreglos (name y e-mail) de tipo char de tamao 81 y usaremos el mtodo

cgiFormStringNoNewlines()que recibe como parmetro el nombre del campo definidoen el HTML, el array de tipo char donde guardaremos el resultado y el tamao del mismo.

void handlePostSubmit(){

/* Declara las cadenas para nombre y correo */

char name[81];char email[81];

/* Obtiene los datos de la peticin HTTP */

cgiFormStringNoNewlines("name", name, 81);cgiFormStringNoNewlines("email", email, 81);


6/17

11. Despus, el mtodo handlePostSubmit(), el cdigo debe crear la cadena que va a ser

guardada en el archivo. Para esto debe declarar un nuevo arreglo de tipo char, donde el

tamao debe ser la suma del tamao del arreglo name, el tamao del arreglo emaily

unos caracteres extra que incluyen la separacin de nombre y e-mail y el salto de lnea.

Las funciones strcpy()y strcat()sirven para crear copiar y concatenar los arreglos.

/* Declara una cadena para almacenar los dos datos */

char data[sizeof(name) + sizeof(email) + 6];

/* Copia en data los datos del nombre y el correo electrnico */

strcpy(data, name);strcat(data, " - ");

strcat(data, email);strcat(data, "\n");

13. Por ltimo, el mtodo handlePostSubmit(), abre el archivo de datos para concatenarlos datos del usuario. Usamos fopen para cargar el archivo DATAFILE y pasamos la

opcin a para indicar que lo que escribamos sobre el no sobreescribe lo que ya estaba

guardado. La funcin fputsla usamos para escribir el arregla data sobre el archivo.

/* Abre el archivo con la opcin a (append) */

FILE *f = fopen(DATAFILE, "a");

/* No fue posible abrir el archivo? */

if (f == NULL){

fprintf(cgiOut, "

Ocurri un error, no podemos guardar susdatos
");
}/* Fue posible abrir archivo? */

else{

/* Guarda los datos en el archivo */

fputs(data, f);/* Envia los datos en la respuesta al navegador */

fprintf(cgiOut, " %s \n", data);/* Cierra el archivo */

fclose(f);}

}


7/17

14. El mtodo handleGetSubmit()ser usado para recibir un entero n por parte del usuario

e imprimir los primeros n registros guardados en el archivo de datos. Declare un entero

para guardar el nmero ingresado por el usuario y use el mtodo cgiFormInteger , de la

librera CGIC, que recibe como parmetros el nombre del campo definido en el HTML, la

variable donde se va aguardar el valor y el valor por defecto que debe retornar en caso

de fallo. Adems defina un arreglo de tipo charcon tamao 168 (tamao mximo quepuede ser guardado en el mtodo handlePostSubmit())

void handleGetSubmit()

{/* Declara un valor entero */

int max_num;

/* Obtiene el valor ingresado por el usuario */cgiFormInteger("max_num", &max_num,0);

char line[168];

15. El mtodo handleGetSubmit() debe leer el archivo de datos, lea tantas lneas como el

usuario haya solicitado del archivo de datos y use la funcin fprintfpara escribir cada

lnea en la respuesta. Para leer cada lnea del archivo use la funcin fgetsque recibe

como parmetro un arreglo donde va guardar el resultado, el tamao mximo que puede

tener la lnea (en este caso 168) y el archivo ledo. En caso de no poder leer el archivo

debe indicarlo al usuario en la respuesta

FILE *f = fopen(DATAFILE, "r");

if (f == NULL){

fprintf(cgiOut, "Fall\n");fprintf(cgiOut, "

No fue posible abrir el archivo de

datos
\n");}
else{

fprintf(cgiOut, "Los datos almacenados");

int i = 0;while (fgets(line, 168, f) && i


8/17

Creacin de la pgina de entrada para la aplicacin

Cree un archivo index.html, use su editor de texto preferido para llenarlo con el siguiente

contenido:

TODO supply a title

Hola

Como es tu nombre?

como es tu correo?

Consulta

El archivo contiene dos secciones, en la primera contiene 2 campos de texto en un formulario de

nombre postrequest que se envan por POST para el nombre y el correo y llaman a la

aplicacin CGI que creamos anteriormente. El segundo formulario de nombre getrequest

recibe un entero mayor que 0 que se enva por el mtodo GET para mostrar el nmero de

registros deseados. Note que el formulario invoca al recurso /cgi-bin/simple-cgi.cgi.Para que la aplicacin funcione, el programa simple.cgicreado anteriormente debe estar

configurado apropiadamente en el servidor web.

Note tambin que los campos de nombre y e-mail estn restringidos a 80 caracteres, en

concordancia con los mtodos del programa CGI que ya creamos.


9/17

Pasos para Apache y Visual Studio en Windows

Configuracin de Apache para soportar aplicaciones CGIPara configurar el servidor Apache para que acepte las aplicaciones CGI se debe realizar lasiguiente configuracin:

1. Ubique la carpeta conf del servidorApache. Si realiz la instalacin estndar de Apache

en Windows, el directorio ser:

C:\Program Files\Apache Software Foundation\Apache2.2\conf

2. Edite el archivo httpd.conf (Aseguresede tener permisos para modificar este directorio).

3. Asegrese que tener activados los mdulos de CGI y de Alias. Al revisar el archivo de

configuracin, las siguientes lneas no deben estar comentadas (las lneas comentadas

estn precedidas por el simbolo #)

LoadModule cgi_module modules/mod_cgi.so

LoadModule alias_module modules/mod_alias.so

4. Configure el directorio en donde se ejecutarn los programas CGI. Asegrese que las

lneas que configuran el directorio cgi-bin no estn comentadas o agregue las lneas al

archivo de configuracin.

ScriptAlias /cgi-bin/

"C:/Program Files/Apache Software Foundation/Apache2.2/cgi-bin/"

Con esta configuracin, el directorio "C://Apache2.2/cgi-bin/" queda configurado para albergar

programas CGI. Todo script o programa que se copie a esta carpeta podr ser ejecutado a travs

del servidor web. Para crear nuestra aplicacin usando CGI, los archivos ejecutables serncopiados a esta carpeta. Para el taller, es importante verificar que todos los usuarios del sistema

puedan modificar y ejecutar archivos en esta carpeta.


10/17

Pasos para la compilacin de la aplicacin en Windows

1. Descargue la librera cgic del sitio web:http://www.boutell.com/cgic/

2. En Visual Studio cree un nuevo proyecto de Visual C++ de tipo Aplicacin de consolaWin32.

3. El proyecto se crea con 3 carpetas de estructura, a nosotros no interesa la carpeta

Archivos de cdigo fuente. De la carpeta descargada de cgic, copie los archivos

cgic.h y cgic.c en Archivos de cdigo fuente.

4. En Visual Studio, a la derecha de la interfaz de usuario, se puede observar la seccin

Explorador de Soluciones. Haga clic derecho sobre el proyecto y seleccione la opcin

compilar solucin.

5. Como salida de consola se muestra la ruta del archivo con extensin .exe de su

aplicacin.

6. Copie y pegue el archivo resultado en la carpeta C:\Program Files\Apache Software

Foundation\Apache2.2\cgi-bin\ y cambie la extensin del archivo para que quede .cgi.

7. Copie y pegue el archivo index.html que cre en la carpeta C:\Program Files \Apache

Software Foundation\Apache2.2\htdocs

8. Ingrese al navegador web e ingrese la ubicacin localhost.

9. Ver los formularios definidos en index.html y al hacer submit en los botones se

ejecutar la aplicacin compilada.

NOTA: Cada vez que modifique la aplicacin, deber compilar la aplicacin y copiar el archivo

.exe en la carpeta especificada y debe cambiar la extensin como se indica anteriormente.
http://www.boutell.com/cgic/http://www.boutell.com/cgic/


11/17

Pasos para Apache y Visual Studio en Linux

A continuacin se presentan los pasos para configurar y compilar la aplicacin usando Ubuntu

Linux. Estos pasos pueden ser usados en sistemas de desarrollo en web como Koding.com yCloud9. Igualmente, estos pasos pueden servir como base si se desea compilar la aplicacin en

otras versiones de Linux o Unix, como CentOS o Mac OSX.

Configuracin de Apache para soportar aplicaciones CGI

Normalmente las mquinas Linux ya vienen configuradas con soporte CGI. Usualmente la

carpeta web /cgi-binest asociada a la carpeta /usr/lib/cgi-bin

1. La configuracin de apache en Ubuntu se hace por medio de las carpetas:

/etc/apache2/

/etc/apache2/conf-enabled/

/etc/apache2/conf-avalaible/

2. Asegrese de que el archivo serve-cgi-bin.confse encuentre en la carpeta

/etc/apache2/conf-enabled/. Si no est all, debe copiarlo o crear un enlace

dinmico al archivo ubicado en /etc/apache2/conf-avalaible/

cd /etc/apache2/conf-enabled

ln s ../conf-avalaible/serve-cgi-bin.conf .

3. El archivo serve-cgi-bin.conf define una regla de redireccin para la ruta /cgi -bin/ a la

carpeta /usr/lib/cgi-bin/, es en esta carpeta donde debemos poner el archivo simple-cgi.cque generamos en Creacin de una aplicacin en c y los archivos cgic.c y cgic.h de

la librera CGIC que descargamos en el mismo momento.

Pasos para la compilacin de la aplicacin en Linux

4. Descargue la librera CGIC del siguiente link:http://www.boutell.com/cgic/

sudo wget http://www.boutell.com/cgic/cgic206.tar.gz

5. Descomprima el archivo

tar -xzvf cgic206.tar.gz

6. Copie los archivos cgi.c y cgi.h a la carpeta /usr/lib/cgi-bin/

cd cgic206

cp cgi.c /usr/lib/cgi-bin/.

cp cgi.h /usr/lib/cgi-bin/.
http://www.boutell.com/cgic/http://www.boutell.com/cgic/


12/17

7. Copie el archivo simple-cgi.c en la carpeta /usr/lib/cgi-bin/

cp simple-cgi.c /usr/lib/cgi-bin/

8. Para la compilacin instale el compilador GCC

sudo apt-get install gcc

9. Compile los archivos en una aplicacin ejecutable

sudo gcc cgic.c simple-cgi.c -o simple-cgi.cgi

10. El comando anterior genera un archivo simple-cgi.cgi. Sin embargo, para poderlo

ejecutar es necesario asignar los permisos de ejecucin a ese archivo

sudo chmod 777 simple-cgi.cgi

11. En la carpeta /usr/lib/ cree un directorio data donde se guardarn los datos

ingresados por los usuarios

sudo mkdir data

12. En la carpeta data cree un archivo data.txt con los permisos necesarios para

que el programa CGI pueda modificar el archivo

sudo touch data.txt

sudo chmod 777 data.txt

13. En la carpeta /home//Web remplace el archivo index.html con el que

se cre en la seccin Creacin de la pgina de entrada para la aplicacin.

14. Si est trabajando en su mquina local, ingrese con un navegador web al URL

http://localhost/~. Si usa un servicio como Koding, ingrese con

un navegador web a http://.koding.io y pruebe que todo

funcione correctamente.

NOTA: Cada vez que haga un cambio sobre la aplicacin (archivo simple-cgi.c) deber volver a

compilar como se indica en el numeral 5).


13/17

Pasos para crear una aplicacin con Servlets:

Introduccin Servlets

La tecnologa de Servlets es una extensin a la plataforma Java para creacin de aplicacionesweb. En contraste con la tecnologa CGI diseada para ejecutar un proceso externo, los servlets

corren en servidores de aplicaciones y se ejecutan como un hilo dentro del servidor. Un Servlet

es una clase que incluye mtodos capaces de procesar una peticin web y producir una

respuesta.

Cada servlet es una clase que extiende HttpServlety puede definir mtodos para procesar los

diferentes mtodos HTTP. Por ejemplo, existen mtodos diferentes para procesar las peticiones

GET (usando el mtodo doGet()) y las peticiones POST (el mtodo doPost()).

Creacin de una aplicacin en Netbeans1. En Netbeas, haga clic en el men Archivo>Nuevo Proyecto

2. Despus seleccione la carpeta Java Web> Web Application

3. En el nombre del proyecto escriba ServletApp y haga click en siguiente.

4. En la instalacin de Netbeans puede configurar un servidor Tomcat o GlassFish 4, para

este caso usaremos GlassFish 4, fjese que en el ContextPath est el nombre del proyecto

y haga click en Finalizar.

5. Se crear toda la estructura del proyecto.

Creacin de la aplicacin con Servlets1. Expanda la carpeta Web Pages y haga click derecho sobre la carpeta WEB-INF

2. Haga click en Nuevo>Otro, en la carpeta web seleccione el tipo de archivo Standard

Deployment Descriptor (web.xml) y haga click en siguiente y despues en finalizar.

3. Expanda la carpeta Source Packages y cree un paquete llamandolo servlets.

4. Haga click derecho sobre sobre el paquete servlets ypongase sobre nuevo> servlet,

creelo con el nombre de MainServlet. El servlet que se crea viene con unos mtodos por

defecto.

5. Elimine el mtodo processRequest.

6. En el mtodo doGet vamos a procesar la informacin que enva el usuario para mostrar

un nmero n de registros guardados en un archivo de texto.

a. Primero vamos a indicar en la respuesta el tipo documento que vamos a enviar,en este caso text/html.

b. Despus vamos a cargar la instancia de la clase DataProcessor que es un

singleton y es la encargada de leer y escribir en el archivo de datos.

c. El siguiente paso es escribir la respuesta, para esto vamos a extraer el PrintWriter

del objeto response.

d. Del objeto request vamos a extraer el campo max_num.


14/17

e. Al Data Processor le vamos a pedir los primeros registros, segn el campo

max_num. El mtodo readData retorna un ArrayList con todos los registros del

archivo.

f. retornamos todos los registro en la respuesta y terminamos el documento html.

Modifique el contenido del mtodo doGet con lo siguiente:

protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

DataProcessor processor = DataProcessor.getDataProcessorIsntance();

try (PrintWriter out = response.getWriter()) {

out.println("");out.println("");

out.println("");out.println("Servlet App");


out.println("Registros ingresados");int number = Integer.parseInt(request.getParameter("max_num"));

ArrayList registros = processor.readData(number);if(registros.isEmpty()){

out.println("

No hay registros
");
}else {

for (int count=0; count< registros.size(); count++){out.println("

"+registros.get(count)+"
");
}}


}

}

8. El mtodo doPost se encarga de procesar las peticiones POST y vamos a recibir del

formulario un campo name y un campo email. Cuando recibamos un par de datosvamos a guardarlos en un archivo de texto con el formato name - email. Al usuario

vamos a mostrarle los datos que fueron guardados.

a. Primero al objeto response vamos a asignarle e l tipo de documento que vamos

a retornar, para este caso ser text/html.

b. Despus vamos a cargar la instancia de la clase DataProcessor que es un

singleton y es la encargada de leer y escribir en el archivo de datos.


15/17

c. El siguiente paso es escribir la respuesta, para esto vamos a crear un objeto

PrintWriter a partir del objeto response.

d. Extraemos del objeto request los campos name y email y los pasamos al

objeto DataProcessor por medio del mtodo writeData.

e. Por ltimo escribimos el documento html, donde mostramos los datos ingresados

por el usuario.

Modifique el mtodo doPost con el siguiente contenido

protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");DataProcessor processor = DataProcessor.getDataProcessorIsntance();

try (PrintWriter out = response.getWriter()) {

String name = request.getParameter("name");

String email = request.getParameter("email");processor.writeData(name, email);


out.println("");out.println("Servlet Hello");


out.println("Hola "+name+"");out.println("Tu email es: "+email+"");


}

}

9. Cree un paquete nuevo dentro de Source Packages con el nombre classes, En el cree

la clase DataProcessor como un singleton.

a. En el contructor inicialice el archivo data.txt en la ubicacin que desee que los

datos queden guardados.

b. Cree el mtodo writeData que recibe como parametros los Strings name y

email y guardan en cada lnea la cadena name - email.

c. Cree el mtodo readData que recibe como parmetro un entero number y que

retorna un ArrayList con las primeras number entradas.

10. Abra el archivo web.xml que creamos anteriormente, en la parte superior seleccione la

pestaa Servlets y haga click en Agregar Servlet. Escriba el nombre del servlet y en laclase busque el servlet creado, como patron URL escriba /MainServlet.


16/17

11. Vuelva a la pestaa Source y ver que se agregaron unas lneas como las siguientes:

MainServlet

servlets.MainServlet

MainServlet/MainServlet

Lo que hace el mtodo reservado doPost es procesar las peticiones POST cuando se acceda al

servlet, aqu vamos a guardar los datos ingresados por el usuario en el ArrayList definido

anteriormente. En el mtodo doGet vamos a procesar las peticiones GET, lo que vamos a hacer

en este mtodo es leer los primeros n Strings con n un entero ingresado por el usuario.

Creacin de la pgina de entrada

1. Abra el archivo index.html en la carpeta Web Pages.

2. Vamos a crear un formulario para que el usuario ingrese el nombre y el correo, este

formulario debe enviarse por el mtodo POST y ser procesado por MainServlet.

3. Vamos a crear un formulario para que el usuario ingrese un entero mayor que 0, este

formulario lo enviamos por GET y ser procesado por MainServlet.

4. A continuacin el contenido del archivo:


17/17

Registro

Hola

Como es tu nombre?

como es tu correo?

Consulta

Para iniciar la aplicacin haga clic derecho sobre el proyecto web, despus haga clic en Run

para compilar y ejecutar sobre el servidor configurado. Por defecto la aplicacin corre sobre el

puerto 8080, ingrese a http://localhost:8080/ServletApp/ para ejecutar la aplicacin.
http://localhost:8080/ServletApp/http://localhost:8080/ServletApp/http://localhost:8080/ServletApp/http://localhost:8080/ServletApp/

Workshop for CGI and Servlets

Documents

Transcript of Workshop for CGI and Servlets