1
Download Sede Trelew Primer cuatrimestre de 2014 1 Aplicaciones Web
Document related concepts
no text concepts found
Transcript
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Cliente - servidor
Aplicaciones Web
HTTP
Clase 2
Diego C. Martínez
Departamento de Ciencias e Ingeniería de la Computación
Universidad Nacional del Sur
Universidad Nacional de la Patagonia San Juan Bosco
Tecnologías del lado del cliente
HTML
XHTML
CSS
JavaScript
DOM
Más relacionado con la
presentación de información
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Cliente - servidor
Servidores Web
El Servidor Web es el encargado de recibir los pedidos HTTP y realizar el
procesamiento necesario para devolver una respuesta HTTP.
En general todos se organizan de forma similar...
esperar conexion
recibir mensaje HTTP
procesar pedido HTTP
ports
aplicaciones
Tecnologías del lado del servidor
CGI Scripts
Perl
PHP
Java
Más relacionado con el
procesamiento de información
© Diego C. Martínez - DCIC-UNS
docroot
generar respuesta HTTP
enviar mensaje HTTP
La funcionalidad general es compleja: pueden agregarse extensiones, filtros, hosts
virtuales, directivas de seguridad a diversos niveles, etc.
© Diego C. Martínez - DCIC-UNS
1
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Servidores Web
Servidores Web
En su expresión más simple, el servidor es básicamente un servidor de documentos:
busca, identifica y retorna documentos, usualmente HTML.
request
80
request
80
código
Documentos
Los documentos que recibe el cliente no existen textualmente en el servidor.
Son generados de acuerdo a código residente en el servidor.
Pero siguiendo este esquema, el origen de la respuesta siempre es estático.
La web en sus origenes : "page replacement"
Sin embargo, en muchos casos es deseable consultar información que es fruto
de un procesamiento previo: consultas a bases de datos, respuestas a
formularios, consultas a otros sistemas etc.
El cliente solicita entonces el programa que debe ejecutarse, no el documento que
debe entregarse.
¿Como permitir que clientes remotos puedan ejecutar aplicaciones, enviarles
información para su procesamiento y recibir el resultado correspondiente?
Se podría utilizar el mismo protocolo para “ejecutar programas a distancia”...
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Server Side Includes
Server Side Includes
Los Server Side Includes (SSI) son directivas que se incluyen en las páginas HTML,
dirigidas al servidor para algún procesamiento específico antes de retornar ese
documento al cliente.
La idea es incluir alguna información dinámica en una página creada estáticamente.
La estructura de una directiva es:
<!--#directiva parametro=valor parametro=valor -->
Algunas directivas comunes:
<!--#set var="cost" value="\$100" -->
<!--#if expr="test_condition" -->
<!--#elif expr="test_condition" -->
<!--#else -->
<!--#endif -->
Debe indicarse específicamente qué archivos seran preprocesados en búsqueda de
tags SSI. La extensión habitual es shtml.
En Apache puede utilizarse XBitHack para independizarse de la extensión.
<!--#echo var="DATE_LOCAL" -->
No todos los servidores aceptan SSI.
<!--#config timefmt="%A %B %d, %Y" -->
Hoy es <!--#echo var="DATE_LOCAL" -->
Aunque es tecnología vieja, todavia se usa con frecuencia cuando el balance
estático-dinámico en la página lo justifica.
Ultima modificacion: <!--#flastmod file="index.html" -->
<!--#include virtual="/footer.html" -->
<!--#printenv -->
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
2
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
CGI Scripts
Common Gateway Interface
CGI (Common Gateway Interface) es un estándar que establece
una interfaz entre aplicaciones externas y servidores de
información, como HTTP o FTP.
Básicamente es un mecanismo que permite a todo el mundo
ejecutar un programa determinado, residente en un servidor de
información. Por este hecho se les suele denominar aplicación
CGI, o scripts CGI.
Datos
Rob McCool
Esto requiere algunas consideraciones de seguridad. Por ejemplo, usualmente las
aplicaciones a ejecutarse se mantienen en directorios fuera del alcance normal.
Cliente
Servidor
Applicación
Como es un estándar de interfaz, cualquier programa puede ejecutarse como
aplicación CGI: puede ser implementado en C, C++, Fortran, PERL, Unix Shell, etc.
La particularidad es que no utiliza la línea de comandos para recibir información,
sino variables de entorno...
QUERY_STRING es todo lo que sigue luego del primer ? del URL.
PATH_INFO es la ruta para información adicional que puede requerir la aplicación.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
CGI
CGI Scripts - Perl
La aplicación CGI recibe los datos en forma de variables de entorno y simplemente
escribe sus resultados en la salida estándar.
Uno de los lenguajes más populares para la implementación de
aplicaciones CGI es Perl, creado en 1987 por Larry Wall.
Sin embargo, debe hacerlo sabiendo que el receptor directo es el servidor.
Esto implica que debe escribir unos headers antes:
El nombre Perl es una derivación de pearl (perla en inglés).
Por ejemplo, para enviar HTML debe escribirse:
Content-type: text/html
<HTML><HEAD>
<TITLE>Titulo</TITLE>
</HEAD><BODY>
...
</BODY></HTML>
Para redireccionar a otro documento
Content-type: text/html
Location:
<HTML><HEAD><TITLE>Oops..</TITLE>
</HEAD><BODY>
...
</BODY></HTML>
© Diego C. Martínez - DCIC-UNS
Mateo 13:45-46
El Reino de los Cielos se parece también a un negociante que se dedicaba a
buscar perlas finas; y al encontrar una de gran valor, fue a vender todo lo que
tenía y la compró.
Larry Wall
a.k.a PERL -- Practical Extraction and Report Language
Es un lenguaje de programación dinámico, y el que mayoritariamente contribuyó al
titulo de scripts que suelen tener las aplicaciones CGI.
http://www.perl.org/
La sintaxis es similar a la del lenguaje C, pero con claras diferencias por la
necesidad de ser dinámico.
© Diego C. Martínez - DCIC-UNS
3
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
CGI – Perl - ejemplos
CGI - Perl
HTML
<form method="post" action="http://localhost/cgi-bin/mostrar.pl" >
Texto: <input type="text" name="mitexto"><br>
<input type="submit" value="Enviar">
<input type="reset" value="Limpiar">
</form>
#!c:\Program Files\Perl\bin\perl.exe
$inputlength=$ENV{'CONTENT_LENGTH'};
read(STDIN,$formdata,$inputlength);
($name,$value)=split /=/,$formdata;
print "Content-type:
Content type: text/html\n";
text/html\n ;
print "\n";
print "
<HTML>
<HEAD>
<TITLE>Resultados:</TITLE>
</HEAD>
<BODY>
<H1>Esto es lo que se ha ingresado:</H1>
<BR>
$name = $value
</BODY>
</HTML>";
Algunas características generales de Perl:
Perl es Open Source (GPL).
Al ser dinámico no requiere declaración de variables.
Puede realizar entrada y salida estándar o comunicarse con un servidor via la
interfaz CGI (usando filehandles, como STDIN).
Las variables comienzan con el símbolo $ (eventualmente tambien % o @) .
Es fácil definir arreglos y tablas hash simples.
Provee librerias para el acceso a bases de datos
Admite muchas características de la orientación a objetos.
Posee buen soporte para la utilización de expresiones regulares.
Mucha ayuda, libros, tutoriales.
Script CGI
(PERL)
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
CGI y Java
Programación del lado servidor – otro modelo
El estándar CGI sugiere que cualquier aplicación escrita en cualquier lenguaje
puede actuar como script CGI.
El estándar CGI establece el vínculo entre el servidor web y una aplicación externa
que recibe y procesa datos.
Algunos lenguajes pueden presentar obstáculos, como en Java:
Las aplicaciones Java no pueden ejecutarse como cualquier otra aplicación.
Java no tiene acceso general al entorno.
El uso popular de Perl y la técnica de SSI derivaron con el tiempo en nuevas
tecnologías para la programación del lado servidor.
Una forma de solucionar esto es construir un shell script que administre la
interacción Java – WebServer: recolecta los datos de entorno y se los envía a la
aplicación Java.
Sin embargo, es algo contraproducente.
Java propone una arquitectura aparte para sus aplicaciones del lado servidor y ésa
debería usarse.
© Diego C. Martínez - DCIC-UNS
Otra aproximación para lograr dinamismo en las páginas web es “incluir” el
intérprete en el servidor (al estilo CGI) y procesar documentos con tags incrustados
en su contenido (a la manera de SSI).
<HTML>
<HEAD>
<TITLE>Pagina</TITLE>
</HEAD>
<BODY>
<H1>Encabezado</H1>
<BR>
Bla bla bla
<tagespecial
..codigo en algun lenguaje...
tagespecial>
</BODY>
</HTML>
© Diego C. Martínez - DCIC-UNS
4
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Procesando una respuesta – Server Side Includes
Programación del lado servidor – otro modelo
HTML con
directivas
incrustadas
(SSI)
Parsing
+
ejecución de
directivas
request
Preprocesado
80
Documentos
con código
incrustado
Las directivas son indicaciones puntuales al
servidor sobre procesamientos simples
HTML
<!--#directiva parametro=valor -->
No ofrecen las estructuras de datos ni de
control de un lenguaje de alto nivel.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Procesando una respuesta – Aplicaciones CGI
Procesando una respuesta – Scripting
Aplicación
HTML con
directivas
incrustadas
(lenguaje de
alto nivel)
El servidor es asociado con un intérprete de
un lenguaje de alto nivel.
Output de la
aplicación
La aplicación puede estar implementada en cualquier
lenguaje de programación moderno.
La integración con el servidor es simple pero rústica,
por medio de la entrada-salida estándar :(
Ejecución de
la aplicación
en el S.O.
El lenguaje
l
j de
d script
i t puede
d utilizarse
tili
directamente en los documentos HTML
Parsing
+
ejecución de
directivas de
I té
Intérprete
t
procesamiento
Las directivas de procesamiento son ahora
segmentos de código.
Se dispone de estructuras de control y datos
de un lenguaje de alto nivel.
Mayor poder de procesamiento.
HTML
La aplicación no necesariamente está basada en
tecnologías para la web o Internet.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
5
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
PHP
PHP
El lenguaje PHP surge en 1995 bajo el nombre PHP/FI, creado por
Rasmus Lerdorf.
Los archivos que contienen tags con código PHP residen en el servidor, con
extensión .php y se ejecutarán en cuanto son solicitados.
Originalmente Rasmus creó el lenguaje como reemplazo de unos
scripts Perl que había hecho para su página personal.
PHP significaba “Personal Home Page” y FI “Form Interpreter”.
El preprocesador PHP se limita a ejecutar el script.
Rasmus Lerdorf
El output del programa (el código HTML que nuestro cliente espera) debe ser
generado por el script. Podemos pensar que imprimimos en una pantalla que
finalmente verá nuestro cliente, al estilo PERL
Luego de liberar PHP, junto con Zeev Suraski y Andi Gutmans reecriben el
intérprete y nace PHP3 en 1997, siendo testeado publicamente en 1998.
La sintaxis es básicamente la misma que la de los lenguajes “parientes” del C...
En 1999 reescriben el núcleo de PHP para obtener Zend Engine. Actualmente este
es el núcleo de PHP4, la versión que popularizó finalmente a PHP.
if (cond)
{ ... }
else
{ ...}
while (cond) {
...
}
for ($i=1; $i<=5; $i++)
do{
{
...
...
} while (cond)
}
En 2004 sale PHP5, con varias modificaciones, entre ellas un mejor modelo de
objetos, deficiente en la versión anterior.
Hoy es usado por muchos sitios gracias al desarrollo de varios productos, la
mayoría GNU: phpBB, WordPress, MediaWiki, Joomla, Mambo, etc.
Visitar:
Probar, bajar, instalar!!
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP
PHP
Si bien TODO el archivo es considerado “ejecutable”, las sentencias
específicas de PHP se encierran con tags especiales.
Todo código restante HTML se envía tal cual al cliente.
Tag inicial
Tag final
<?php
?>
<?
?>
<script language=”php”>
?>
<%
%>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo “Hola Mundo!";
?>
</body>
</html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
Hola Mundo!
</body>
</html>
hola.php
Resultado
recibido por
el cliente
© Diego C. Martínez - DCIC-UNS
http://ar.php.net/manual/es/
El script .php no necesariamente debe incluir código HTML...
<?php
echo "<HTML>";
echo "<TITLE>Ejemplo</TITLE>";
echo "<BODY>";
echo "Hola Mundo!";
if date('w')==6
{ echo "Hoy es sabado"; }
else
{ echo "Hoy
Hoy no es sabado";}
sabado ;}
echo "</BODY></HTML>";
<HTML>
<TITLE>Ejemplo</TITLE>
<BODY>
Hola Mundo! Hoy no es sabado
</BODY>
</HTML>
Resultado
recibido por
el cliente
?>
todophp.php
El exceso de mezcla HTML-PHP en general no es adecuado para aplicaciones grandes,
pues es dificil de mantener.
Veremos luego qué técnicas se utilizan para poner orden en este sentido.
© Diego C. Martínez - DCIC-UNS
6
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
PHP
PHP
PHP es muy flexible en la utilización de las variables, cuyo contenido puede
ser interpretado como dato o parte de código.
Debido a su tratamiento es que todas deben empezar con $.
Pueden implementarse funciones...
<?php
function cuadrado($num)
<?php
function foo()
{ echo "Hola Foo!"; }
function bar($arg = '')
{ echo "Hola Bar! El argumento es '$arg'"; }
function echoit($string)
{ echo $string; }
{
return $num*$num;
}
$cartel1 = "El cuadrado de ";
$cartel2 = " es ";
$numero=4;
echo
echo
echo
echo
$cartel1;
$numero;
$cartel2;
cuadrado($numero);
echo "<BR>";
$numero=10;
echo $cartel1.$numero.$cartel2.cuadrado($numero);
$func = 'foo';
$func();
// Esto invoca a foo()
$func = 'bar';
$func('test');
// Esto invoca a
$func = 'echoit';
$func('test');
// Esto invoca a
?>
bar()
echoit()
?>
PHP posee varias operaciones para manipular strings y arreglos. Muchas
paginas interesantes pueden hacerse con estos dos elementos solamente...
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP
PHP
$arch = "accidentes.dat";
$archivo = file($arch);
$cant = count($archivo);
echo "<table border=0>";
$indice=0;
while ($indice < $cant)
{
$reg = explode("|-|",$archivo[$indice]);
/* [0]nombre - [1]sector - [2]accidentes */
Karl|-|7G|-|2
Lenny|-|7F|-|4
Smithers|-|1A|-|0
Homero|-|7G|-|723
accidentes.dat
echo "<tr>";
echo "<td> $reg[0] </td><td> $reg[1] </td><td> $reg[2] </td>;
echo "</tr>";
$indice++;
}
echo "</table>";
PHP provee soporte para accesos a bases de datos...
$db = @mysql_connect($dbhost, $dbuser, $dbpass);
$query="SELECT * FROM empleados ORDER BY legajo";
$result=mysql_query($query);
if($result) {
$cant = mysql_num_rows($result);
for($j=0;$j<$cant;$j++){
$nombre=mysql_result($result,$j,'nombre');
$legajo=mysql_result($result,$j,
$legajo=mysql
result($result $j 'legajo');
legajo );
}
}
Existen muchas librerias gratuitas que pueden facilitar el acceso a una base de
datos, encapsulándola en un objeto con una interfaz específica.
También es fácil escribir en un archivo...
$fh=fopen("unarchivo.dat","a");
fwrite($fh,"esto se escribe");
fclose($fh);
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
7
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
PHP - clases
PHP
Las clases se definen de manera similar a Java.
<?php
class A {
public $var = ‘un valor';
function funcion1()
//codigo
}
function funcion2()
//codigo
}
{
{
}
Los objetos se crean con la
palabra reservada new y el
acceso a los miembros de los
objetos es por medio del
operador ->
Para referenciar el objeto
actual se utiliza la pseudovariable $this.
// Declaración de método
public function displayVar(){
echo $this->var;
}
<?php
include("simpleclass.php");
$a = new SimpleClass();
$a->displayVar();
$a->var = "Chau Mundo";
$a->displayVar();
?>
}
?>
holachau.php
No se aplican las reglas de
ámbito tradicionales (como en
Pascal).
Debe indicarse explicitamente
que datos pueden accederse
globalmente:
?>
<?php
class SimpleClass
{
// Declaración de atributo
public $var = ‘Hola Mundo!';
simpleclass.php
En PHP4, solo las constantes se inicializaban en la declaración
global $dato1;
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP - $this
PHP – objetos y asignaciones
<?php
class A {
function foo() {
if (isset($this)) {
echo '$this is defined (';
echo get_class($this);
echo ")<br>";
} else {
echo "\$this is not defined.";
}
}
}
Al asignar un objeto ya creado a una nueva variable, está ultima estará asociada al
objeto original. Así funciona también en el pasaje de parámetros. Esto es
semántica por referencia.
Esto ha causado algo de confusión. En PHP4 una asignación del tipo
$objeto1 = $objeto2
Causa una clonación de objetos, puesto que la semántica de manipulación que
prevalece es la de por valor. Para obtener el efecto “referencia” debe hacerse
$ bj t 1 =&
$objeto1
& $objeto2
$ bj t 2
class B {
function bar()
A::foo();
}
}
...
{
Salida en el browser
En PHP5 la asignación “=“ tiene un efecto igual a la asignación de Java. La
asignación “=&” se interpreta como la definición de un alias para el mismo objeto
(NO es una referencia!)
$this is defined (a)
$this is not defined.
$this is defined (b)
$this is not defined.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
8
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
PHP – objetos y asignaciones
PHP - herencia
Parte de la confusión inicial…
La herencia se denota con la palabra reservada extends.
PHP no admite herencia múltiple.
<?php
$instance = new SimpleClass()
$assigned
= $instance;
$reference =& $instance;
$instance->var = '$assigned will have this value';
$instance = null; // $instance and $reference become null
var_dump($instance);
var_dump($reference);
var_dump($assigned);
?>
Output en
el browser
NULL
NULL
object(SimpleClass)#1 (1) {
["var"]=>string(30) "$assigned will have this value"
}
Los métodos y miembros heredados pueden redefinirse, a menos que el ancestro incluya la
palabra reservada final. Una clase también puede ser final.
Es posible acceder a métodos de la clase padre por medio del prefijo parent::
<?php
class SimpleClass {
// Declaración de atributo
public $var = 'Hola Mundo!';
// Declaración de método
public function displayVar() {
echo $this->var;
}
}
?>
<?php
class ExtClass extends SimpleClass
{
function displayVar(){
//redefinición
echo “Heredando…\n";
parent::displayVar();
}
}
$extended = new ExtendClass();
$extended->displayVar();
?>
PHP también permite clases abstractas e
interfaces.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP - constructores
PHP - atributos
Los constructores deben tener el siguiente encabezado:
Los atributos pueden ser
públicos, privados o protegidos.
void __construct ( [mixed args [, ...]] )
<?php
class BaseClass {
function __construct() {
print "In BaseClass constructor\n";
}
}
class SubClass extends BaseClass {
function __construct() {
parent::__construct();
print "In SubClass constructor\n";
}
}
Los atributos privados no se
heredan, por lo que un intento
de acceso a ellos queda
indefinido.
Los métodos pueden tener los
mismos modificadores de
visibilidad, con el mismo
significado
significado.
function
echo
echo
echo
}
printHello()
{
$this->public;
$this->protected;
$this->private;
}
$obj = new MyClass();
echo $obj->public;
// Funciona OK!
echo $obj->protected;
// Error fatal
echo $obj->private; // Error fatal
$obj->printHello(); // Muestra todos
$obj = new BaseClass();
$obj = new SubClass();
?>
© Diego C. Martínez - DCIC-UNS
<?php
class MyClass
{
public $public = 'Public';
protected $protected = 'Protected';
private $private = 'Private';
?>
© Diego C. Martínez - DCIC-UNS
9
Aplicaciones Web
UNPSJB - Sede Trelew
PHP – accesos estáticos
El operador :: ( פעמיים נקודתיים- Paamayim Nekudotayim) se utiliza para
acceder entidades estáticas, constantes y métodos redefinidos estáticos
(static).
Primer cuatrimestre de 2014
PHP – comparaciones
Existen dos operadores:
<?php
class MyClass {
const CONST_VALUE = 'A constant value';
}
==
Los objetos son iguales si poseen los mismos atributos y son instancias de la misma
clase.
echo MyClass::CONST_VALUE;
?>
===
Las variables de objeto son idénticas si y sólo si refieren a la misma instancia de la
misma clase.
Las palabras self y parent,
parent se usan para poder acceder a miembros o métodos
desde dentro de una definición de clase
<?php
class OtherClass extends MyClass {
public static $my_static = 'static var';
public static function doubleColon() {
echo parent::CONST_VALUE . "\n";
echo self::$my_static . "\n";
}
}
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP – Acceso a variables de entorno
Session tracking
En PHP el acceso a algunos datos del entorno se realiza por medio de algunos
arreglos especiales, denominados superglobales, entre ellos:
Hemos mencionado que HTTP es un protocolo sin estado (stateless protocol).
1) El browser abre una conexión HTTP al servidor web.
$_SERVER
Variables del servidor. Algunos datos que contiene: PHP_SELF, SERVER_ADDR,
SERVER_NAME, QUERY_STRING, REMOTE_ADDR, etc
2) El browser envía el pedido HTTP.
$_ENV
Similar al paso de datos en CGI.
4) La conexión entre el servidor y el browser se cierra.
$_GET
Información sobre los datos pasados al script desde HTTP GET
GET.
Esto significa que el servidor no puede reconocernos entre requerimientos
múltiples. Sin embargo, es posible lograr una identificación gracias a algunas
té i
técnicas
adicionales.
di i
l
$_POST
Información sobre los datos pasados al script desde HTTP POST.
Esto se conoce como session tracking.
$_FILES
Información sobre los archivos pasados al script desde HTTP POST.
3) El servidor responde al pedido y envía la respuesta.
La implementación depende de cada servidor en particular, y del lenguaje de
programación asociado.
$_SESSION
Contiene las variables de sesión disponibles para el script actual.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
10
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Session tracking
Session tracking
Básicamente, consiste en asignar un identificador de sesión a cada requerimiento...
Básicamente, consiste en asignar un identificador de sesión a cada requerimiento...
El servidor asigna un identificador de
sesión y lo comunica al cliente.
Los clientes comunican su
identificador de sesión al volver a
requerir algo al servidor
session_id: ABC
request
request 2
session_id: ABC
session_id: DEF
session_id: ABC
session_id: ABC
session_id: DEF
response
response
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Session tracking
Session tracking
Al identificar las sesiones, puede mantener datos relacionados con cada una, con
los cuales el cliente puede interactuar.
El servidor almacena localmente los identificadores de sesión y las variables
asociadas.
Se denominan variables de sesión.
El cliente debe “recordar” de alguna forma su número de sesión si es que desea ser
recordado por el servidor.
Todo este proceso puede lograrse usando cookies o URL-rewriting.
crea cant
session_id: ABC cant: 1
cant = 1
session_id: DEF cant:2
COOKIES
Una cookie es un fragmento de texto enviado desde el servidor al navegador del
cliente. Este fragmento es almacenado del lado cliente y devuelto al servidor en cada
consulta posterior.
En general se usa para la autenticación, el rastreo de sesión, la personalización, etc.
request
response + cookie
request + cookie
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
11
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Cookies
Cookies
Una cookie tiene un nombre que la identifica y el identificador de sesión
correspondiente. Tienen también un tiempo de vida asociado.
Desventajas generales de las cookies:
HTTP/1.1 200 OK
Server: Netscape-Enterprise/4.0
Date: Fri, 23 Mar 2003 02:06:48 GMT
Set-Cookie: GXHC_gx_session_id_AppName=511f4caec5a335ee
Content-type: Text/HTML; charset=Shift_JIS
Connection: close
...
GET /MyApplication/myPage.jsp HTTP/1.1
...
User-Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)
Host: 127.0.0.1:8080
Cookie: GXHC_gx_session_id_AppName=511f4caec5a335ee
...
Bajo nivel de identificación: las cookies se asocian a un browser y un servidor y
son privadas a esa conexión.
Intercambio de información sensible: los datos contenidos en la cookie son
susceptibles al robo (i.e. sniffing)
Cookie poisoning: modificación de los datos en la cookie por parte del cliente,
que es interpretada naturalmente por el servidor.
Estado inconsistente: la cookie no siempre refleja el estado de los datos
comunicados por el cliente y el servidor (i.e. Back button).
En PHP las cookies se acceden por medio de $_COOKIE
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
URL-rewrite
File-uploads
Es posible que el browser no admita cookies, lo que impide el modelo de rastreo
de sesiones anterior.
Para lograr el mismo objetivo, es necesario utilizar el URL.
Lo que hace el servidor es agregar el identificador de sessión como parte del query
string...
<a href="pagina.php?PHPSESSID=F513fad624vDx3">Visita la siguiente página</a>
Si la variable de PHP session.use_trans_sid tiene el valor “0”, entonces habrá que generar
el query string explícitamente...
<a href="pagina.php?<?echo session_name()."=".session_id()?>">Visita la siguiente
página</a>
© Diego C. Martínez - DCIC-UNS
Otra variable superglobal comunmente utilizada es $_FILES, en donde se obtienen
los datos de un archivo recientemente subido al servidor.
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
De acuerdo al protocolo HTTP, el servidor almacenará temporalmente el archivo a
medida que sea subido.
El script es el responsable de retirar ese archivo del lugar temporal para ubicarlo
en el directorio deseado.
Archivo subido: $_FILES["file"]["name"]
Tipo del archivo subido: $_FILES["file"]["type"]
Tamaño del archivo subido: $_FILES["file"]["size"] (bytes)
Almacenado temporalmente en: $_FILES["file"]["tmp_name"];
© Diego C. Martínez - DCIC-UNS
12
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Procesando XML
PHP avanzado
PHP es un lenguaje de script creado y orientado para la programación web.
La especificación XML asume que el documento será procesado de manera especial
Posee muchas librerías base y muchas extensiones que facilitan procesamientos comunes.
Podemos examinar nuestra configuración usando:
<?php phpinfo(); ?>
PHP Core
apache2handler
Apache Environment
HTTP Headers Information
bcmath
calendar
com_dotnet
ctype
date
dom
exif
filter
ftp
gd
gettext
hash
iconv
imap
json
lib l
libxml
mbstring
mcrypt
mime_magi
c
ming
mssql
mysql
mysqli
odbc
paradox
pcre
pdf
PDO
pdo_mssql
pdo_mysql
pgsqll
ps
Reflection
session
SimpleXML
soap
sockets
SPL
SQLite
standard
tokenizer
wddx
xml
xmlreader
xmlrpc
xmlwriter
xsl
Zend Optimizer
zip
zlib
Additional
Modules
Environment
PHP Variables
PHP License
documento
XML
procesador
XML
aplicación
tree-based processing
event-based processing
también conocido como
DOM Parser
también conocido como
SAX Parser
representación arbórea
fácil read-write
consumo de memoria
operación secuencial
menor consumo de
memoria
más fáciles de
implementar
más complejos y de mayor
esfuerzo para el programador
Veremos algunas funcionalidades interesantes para el desarrollo web...
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Procesando XML - SAX
Procesando XML - SAX
SAX significa Simple Acess for XML.
Es un parser para XML basado en eventos.
No existe una especificación formal, pero la implementación Java es referencial.
SAX
Parser
aplicación
SAX opera sobre el documento en forma secuencial.
Notifica a la aplicación de eventos durante el procesado del XML.
start document
• Es más natural para aplicaciones no muy centradas en XML
• Es más eficiente en recursos que la aproximación DOM
start element
• La aplicación puede comenzar a procesar el XML mientras el parser lo lee
caracteres
end element
• No puede navegarse por el documento con la misma libertad que DOM
end document
• La aplicación debe registrar los eventos en los que está interesada.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
13
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Procesando XML - SAX
<?xml version="1.0"?>
<saludo>
<texto>
Hola Mundo!
</texto>
</saludo>
PHP y DOM
1. start document
2. start element: saludo
En PHP5 se incluye una extensión para usar una interfaz DOM.
Es una mejora de la extensiòn domxml de PHP4.
Es un API orientada a objetos.
Implementa completamente DOM Core Level 2 y parcialmente DOM Core Level 3
3. start element: texto
4. characters: Hola Mundo!
5. end element: texto
6. end element: saludo
7. end document
La aplicación debe registrar funciones call-back para atender estos eventos.
public void startElement(String uri, String localName, String qName,
Attributes attributes)
public void endElement(String uri, String localName, String qName)
public void characters(char[] ch, int start, int length)
Ofrece las siguientes clases, entre otras:
DOMDocument
Representa el documento XML o HTML completo.
DOMNodeList
DOMN
d Li t
Contenedor de nodos, accesibles por nombre o indice
DOMElement
Representa un nodo XML.
DOMText
Representa dato en formato texto
DOMAttr
Representa un nodo atributo.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP y DOM
PHP y DOM
El primer paso es crear el documento DOM:
$midoc = new DOMDocument(”1.0”);
Luego puede construirse un árbol via DOM API, o cargar un XML:
$midoc->load(”datos.xml”,$opcionParser);
$midoc->loadXML($stringXML,$opcionParser);
Las opciones
p
p
para el p
parser p
pueden ser,, entre otros:
LIBXML_NOBLANKS, LIBXML_NOERROR, LIBXML_NOWARNING,
LIBXML_DTDLOAD, LIBXML_NOENT, LIBXML_XINCLUDE
La carga del documento XML implica un control de que el documento esté bien
formado, por lo que cargar un HTML no necesariamente será exitoso.
Para eso existe otra función:
$midoc = new DOMDocument();
$midoc->loadHTMLFile('http://www.sitio.com/index.html');
$midoc = DOMDocument::loadHTMLFile('http://www.sitio.com/index.htm');
El documento está representado por un objeto DOMDocument.
Para obtener el xml oculto puede utilizarse la operación saveXML().
XML()
$xml_string = $midoc->saveXML()
Para guardar el xml oculto puede utilizarse la operación save().
Otra forma es invocar estáticamente las funciones, generando un objeto
DOMDocument:
$midoc = DOMDocument::load($archivo,$opcs);
$midoc = DOMDocument::loadXML($string,$opcs);
© Diego C. Martínez - DCIC-UNS
$bytes = $midoc->save(“archivo_nuevo.xml”)
$html = $htmldoc->saveHTML();
$bytes = $htmldoc->saveHTMLFile('index.html');
© Diego C. Martínez - DCIC-UNS
14
Aplicaciones Web
UNPSJB - Sede Trelew
PHP y DOM
Primer cuatrimestre de 2014
PHP y XML - Validación
Dado que es una implementación del DOM, la forma de navegar el árbol cumple con
los nombres de la interfaz.
Es posible realizar una validación del documento XML cuando el DTD o XML Schema
están disponibles.
Si el DTD está en un documento aparte, debe indicarse explícitamente su carga.
$raiz = $dom->documentElement;
$nodo = $raiz->firstChild;
$mixml->load("peliculas.xml", LIBXML_DTDLOAD);
$esvalido = $mixml->validate();
$nombre = $nodo->nodeName;
$contenido = $nodo->nodeValue;
$nodo = $doc->getElementById($id);
$nodos = $doc->getElementsByTagName($tag);
$hijos = $nodo->childNodes;
Para validar utilizando XML Schemas, es necesario proveer el esquema
correspondiente,
di t ya sea como archivo
hi o como string
ti
$esvalido = $dom->schemaValidate($archivo_schema);
$esvalido = $dom->schemaValidateSource($string_schema);
$nodo->appendChild($otronodo);
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
PHP y XPath
SimpleXML
La extensión DOM de PHP permite también la utilización de XPath.
La funcionalidad está provista por un objetode tipo DOMXPath
$domxpath = new DOMXPath($docDOM);
Otra forma de manipular un documento XML es por medio de SimpleXML.
Es una extensión aparte de la DOM, más simple y directa de utilizar.
La clase central se denomina SimpleXMLElement
$sxmle = new SimpleXMLElement($string_xml);
La operación query() permite obtener del documento una sequencia de nodos.
Devuelve siempre un objeto DOMNodeList.
$sxmle = simplexml_load_string($string_xml);
$sxmle = simplexml_load_file($archivo);
$list = $domxpath->query($un
$domxpath->query($un_xpath);
xpath);
En contraste, la operación evaluate() permite obtener datos de tipo Boolean,
Integer, String o DOMNodeList.
Como nuevamene el XML se “esconde” dentro de un objeto, para obtenerlo se
utiliza el método asXML().
$string_xml = $sxmle->asXML()
$sxmle->asXML(“nuevo_archivo.xml”)
$resultado = $domxpath->evaluate($un_xpath);
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
15
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
SimpleXML
Transformaciones XSL
El acceso a los elementos del XML es simple:
$pelicula = $sxmle->film;
Con PHP también es posible realizar transformaciones XSL.
La transformación la realiza un objeto de tipo XSLTProcessor
La transformación se aplica sobre objetos de tipo DOMDocument
$titulo = $sxmle->film->titulo;
Haciendo uso de sobrecarga de operaciones, los métodos accedidos del objeto
SimpleXMLElement pueden ser un elemento o una colección de elementos.
La simpleza de uso radica en esta característica.
característica
$xsltp = new XSLTProcessor();
$xsltp->importStylesheet( $xsl );
$transf = $xslt->transformToXML( $xml );
La transformación
f
anterior devuelve un string, pero también es posible transformar
f
a
un objeto DOMDocument o a un URI
$transf = $xslt->transformToDoc( $xml );
$transf = $xslt->transformToURI( $xml,”file:///tmp/out.html”);
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Procesando imágenes
GD Library
Muchas de las imágenes de un sitio web son estáticas.
Para incluir en una página HTML una imagen generada dinámicamente, basta con
mencionar el recurso que la genera:
Sin embargo, es frecuente que sea necesario mostrar alguna imagen personalizada,
o dinámica, producto de un cómputo previo de datos (gráficos, captcha, etc).
<img src='mi_imagen.php'>
PHP provee algunas facilidades para generar imágenes que serán enviadas luego
al cliente como una imagen regular.
El script creará la imagen por medio de la librería GD en un buffer temporal, que
luego será volcado al cliente.
La funcionalidad la provee la librería GD Library.
Está incluida en PHP desde la versión 4.3
El navegador no distingue la imagen recibida como computada.
Para generar una imagen es necesario crearla primero:
GD es una librería open source para la creación
dinámica de imágenes
está escrita en el lenguaje C
varios lenguajes poseen wrappers para GD
crea imágenes PNG, JPG, GIF, TIFF
se utiliza para crear gráficos, diagramas,
cuadros y cualquier imagen on the fly.
$image=imagecreate( $alto, $ancho );
Esta función devuelve una imagen en blanco como un recurso PHP.
Luego se puede comenzar a “dibujar” en esta imagen.
Antes de enviarla al cliente y liberar la memoria utilizada, es necesario indicarle al
cliente que enviaremos una imagen:
header("Content-type: image/png");
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
16
Aplicaciones Web
UNPSJB - Sede Trelew
GD Library
Algunas funciones comunes:
$color = imagecolorallocate($imagen, $r, $g, $b)
Crea el color que será utilizado en la imagen $imagen, según el esquema RGB
imageline($imagen, $cx1, $cy1, $cx2, $cy2, $color)
Dibuja una linea entre las coordenadas indicadas.
imagestring($imagen, $font, $cx, $cy, $string, $color)
Escribe $string en la coordenada indicada.
imagepng($imagen)
Devuelve una imagen png al cliente
imagejpg($imagen)
Devuelve una imagen jpg al cliente
imagedestroy($imagen)
Libera la memoria ocupada por la imagen durante su construcción
Primer cuatrimestre de 2014
Java
Java es un lenguaje de programación orientado a
objetos, creado en 1990 por Sun Microsystems.
Su escenario de trabajo es mayoritariamente el de las
aplicaciones distribuídas y la programación en red.
Sus premisas iniciales son:
Uso de la metodología OO
Ejecutar un mismo programa en diferentes SO
Soporte para redes de computadoras
Diseñado para ejecutar código remotamente con seguridad
Fácil de usar
Típicos Programas Java:
Applets : se ejecutan en browsers, incrustados en páginas web.
Applications : se ejecutan directamente sobre la Java Virtual Machine.
Servlets: se ejecutan en un servidor que posee un Contenedor Web.
Midlets: se ejecutan en la JVM para dispositivos móviles.
Cada cual posee una estructura particular, con ciertos métodos específicos.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Plataformas Java2
Java2 Enterprise Edition
Java agrupó sus tecnologías en tres ediciones: J2EE, J2SE y J2ME.
J2EE se basa en una arquitectura multi-capa para el desarrollo de
aplicaciones distribuídas.
La división de capas propuesta es la siguiente:
Nombre
Capa Cliente
Quiénes la componen
Aplicaciones cliente, applets,
aplicaciones y otras GUIs
Capa de Presentación JSP,
JSP Servlet y otras UIs
© Diego C. Martínez - DCIC-UNS
Dónde se ubica
PC Cliente
Servidor J2EE
Capa de Negocios
EJBs y otros objetos de negocios
Servidor J2EE
Capa de Integración
JMS, JDBC
Servidor J2EE
Capa de Recursos
Bases de Datos, Sistemas Externos
Servidor BD
© Diego C. Martínez - DCIC-UNS
17
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Vista por capas de una aplicación J2EE
Componentes Web
J2EE presenta los componentes Web (web components): servlets y Java
Server Pages.
Máquina cliente
Servidor J2EE
Servidor BD
• Los servlets son clases en Java que procesan pedidos (requests) y
construyen respuestas a esos pedidos.
• Las páginas JSP son documentos de texto que se ejecutan como
servlets pero permiten una aproximación más natural para presentar
contenido estático.
Enterprise
Beans
Application
Client
Dynamic HTML
Pages
Client Tier
JSP Pages
Enterprise
Beans
Web Tier
Business Tier
Los componentes de negocio (business components) contienen la lógica
necesaria para resolver problemas específicos de un dominio de negocios
determinado (banking, finanzas) y son implementados por enterprise beans
ejecutados en lo que se llama capa de negocios (business tier).
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Java 2 Platform
Servlets
Los servlets son extensiones a la funcionalidad de un servidor, como un
servidor Web.
Son módulos de código Java corriendo en un servidor de aplicaciones.
Si bien no necesariamente están asociados a un protocolo particular,
suelen usarse bajo HTTP (Servlets HTTP)
Un servlet está mapeado a uno o más URLs, y cuando el servidor recibe
un pedido (request) un método especial en el servlet es invocado y
responde a ese pedido.
Al estar escrito en Java, puede recibir todos los beneficios del JAVA API y
los elementos mencionados anteriormente para J2EE, como JDBC y EJB.
Además es portable y altamente reusable.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
18
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Servlet Containers
Servlets HTTP
Los servlets se alojan e interactúan con un contenedor web (Web
Container).
Algunos usos típicos de un Servlet HTTP:
• Procesar y/o almacenar datos recibidos desde un formulario HTML.
Servlet Containers no comerciales:
• Proveer contenido dinámico, por ejemplo, mostrar resultados de una consulta a
una base de datos al cliente.
Apache Tomcat, Enhydra, Java Mini Daemon, Jetty, Winstone
• Administrar información de estado sobre las sesiones de los clientes en
nuestro sitio, por ejemplo, shopping carts.
Servlet Containers comerciales
Actualmente existe mucho desarrollo en torno a esta tecnología, más el agregado de
JSP. Algunos se encuadran dentro del Proyecto Jakarta, del Apache Group, como
Struts.
S
us
BEA WebLogic Server or Weblogic Express
B l dE
Borland
Enterprise
t
i S
Server
Caucho Resin Server
IBM's WebSphere
iPlanet Sun/Netscape
Sun Java System Web Server
Oracle Application Server
Commercial Open Source Servlet Containers
Los servlets en realidad ofrecen varias ventajas sobre CGI:
• Un servlet no corre en un proceso separado, eliminando el overhead de
crear procesos ante pedidos.
• Un servlet permanece en memoria entre pedidos.
Apache Tomcat
JBoss
• Existe una única instancia que responde pedidos en forma concurrente. Esto
ahorra memoria y permite administrar datos persistentes
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Servlets
GenericServlets
Un servlet es una instancia de una clase que implementa la interfaz
javax.servlet.Servlet.
GenericServlet
La mayoría de los servlet en realidad extienden la funcionalidad de
implementaciones estándar de servlets: javax.servlet.GenericServlet y
javax.servlet.http.HttpServlet
request
service()
response
Ciclo de vida:
Cliente
1. El servlet se inicializa ante el primer pedido (init)
Servidor
2. El servlet atiende pedidos y genera respuestas (service). Esto puede
provocar la creación de diferentes hilos de ejecución.
3. El servlet es destruido del servidor (destroy).
Es fácil ver que un servlet es básicamente la implementación de un servidor en
Java!
© Diego C. Martínez - DCIC-UNS
Para implementar un servlet genérico, basta con heredar de la
clase GenericServlet y redefinir el método service()
El método service() acepta dos parámetros: un objeto request
que informa al servlet del pedido, y un objeto response usado
para retornar respuestas.
© Diego C. Martínez - DCIC-UNS
19
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
HttpServlets
GenericServlet
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
Los servlets HTTP extienden la clase HttpServlet.
Esta clase redefine el método service() para diferenciar entre las peticiones
típicas recibidas desde un navegador Web cliente.
public class Fecha extends GenericServlet {
public void service(
ServletRequest request,
ServletResponse response
)
throws ServletException,
IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
java.util.Date fechita= new java.util.Date();
out.println(fechita);
}
}
El protocolo HTTP define varios tipos de pedidos, pero los más comunes
son get() (que obtiene información del servidor, como imágenes) y post()
(que envía información al servidor, por ejemplo como resultado del submit
de un formulario).
La clase HttpServlet define los métodos doGet() y doPost() para responder
a estos pedidos.
Estos métodos son invocados por service(), el cual determina el tipo de
pedido y deriva el flujo de control al método correspondiente.
El método service() no debería redefinirse, a menos que debamos
implementar pedidos adicionales.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
HTTPServlet
Request & Response
HttpServlet
Servidor
Servlet
req
request
request
service()
service()
response
doGet()
Cliente
Servidor
doPost()
res
Cliente
Los objetos implementan la interfaz ServletRequest, ServletResponse,
HttpServletRequest o HttpServletResponse
Algunas operaciones de HttpServletRequest
Para implementar un servlet HTTP, basta con heredar de la clase
HttpServlet y redefinir los métodos doGet() y/o doPost()
Nuevamente se aceptan dos parámetros en cada método: un
objeto request que informa al servlet del pedido, y un objeto
response usado para retornar respuestas.
Cookie[]
java.lang.String
java.lang.String
java.lang.String
getCookies()
getHeader(java.lang.String name)
getQueryString()
getMethod()
Algunas operaciones de HttpServletResponse
void
void
void
java.io.PrintWriter
© Diego C. Martínez - DCIC-UNS
addCookie(Cookie cookie)
addHeader(java.lang.String name, java.lang.String value)
setStatus(int sc)
getWriter()
© Diego C. Martínez - DCIC-UNS
20
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Servlet HelloWorld
Java Server Pages
public class HelloWorldServlet extends HttpServlet {
public void doGet(
HttpServletRequest request,
HttpServletResponse response )
throws IOException,
ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String nombre = request
request.getParameter("USER_NAME");
getParameter("USER NAME");
out.println("<html>");
out.println("<head>");
out.println("<title>Hola</title>");
out.println("</head>");
out.println("<body bgcolor=\"white\">");
out.println("<h1> Hola "+nombre+"</h1>");
out.println("</body>");
out.println("</html>");
La tecnología JSP (Java Server Pages) usa tags al estilo XML y scriptlets escritos
en Java para encapsular la lógica que genera el contenido de la página.
Al separar la lógica de el diseño y la presentación, JSP facilita la tarea de construir
aplicaciones basadas en la web.
Permiten incluir directamente código Java en un documento HTML, de la misma
forma que lo permiten otros lenguajes como PHP.
Forman una extensión natural a los servlets. De hecho, luego de un preprocesado,
las páginas JSP terminan siendo nada más y nada menos que un servlet!.
Desde el punto de vista del programador, Servlets y JSP son intercambiables,
dependiendo del balance de carga estática y dinámica del documento a generar.
}
}
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Java Server Pages – pasos en la invocación
Java Server Pages - ejemplo
HolaVos.jsp
Servidor Web
request
Página JSP
<HTML>
Hola <I> <%= request.getParameter("nombre") %> </I>!
</HTML>
Servlet
Generado
http://localhost/HolaVos.jsp?nombre=Homero
Cliente
Hola Homero!
response
© Diego C. Martínez - DCIC-UNS
Servlet
Compilado
© Diego C. Martínez - DCIC-UNS
21
Aplicaciones Web
UNPSJB - Sede Trelew
Java Server Pages - ejemplo
Primer cuatrimestre de 2014
Java Server Pages
Además de HTML normal, podemos agregar otro tipo de elementos al
documento:
Hora.jsp
<%@page import=“java.util.Date”%>
<HTML>
<BODY>
Hora actual: <%= new Date().toString() %> </I>!
</BODY>
</HTML>
• Elementos de Script (scriptlets): código Java que se convertirá en parte
del servlet resultante luego del preprocesado.
• Directivas: elementos que nos permiten controlar la estructura general
del servlet resultante. Básicamente, son mensajes al contenedor de
servlets.
• Acciones: por medio de las cuales especificamos ciertos componentes
que deben ser usados en el documento.
http://localhost/Hora.jsp
• Tags library: un mecanismo de extensión de marcas para crear tags
personalizados.
Hora actual: Mon Jul 31 10:55:54 GMT+01:00 2006
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
Java Server Pages
Java Server Pages – objetos implícitos
Para simplificar los elementos se puede acceder a algunas variables
predefinidas, como request en el ejemplo anterior.
Existen otros objetos predefinidos o implícitos, con diferentes alcances o
ámbitos:
Alcance de aplicación
application
Representa el contenedor que ejecuta la JSP
Alcance de página
• Alcance de aplicación: Java Server Page y la aplicación contenedora
tienen objetos de este ámbito.
config
Opciones de configuración de la JSP
exception
La excepción que se pasa a la JSP
• Alcance de página: objetos que existen únicamente en la página en la
que están declarados.
q
out
Objeto JSPWriter para salida de texto
page
this p
para la instancia actual de la JSP
• Alcance de petición: existentes durante el tiempo de vida de una
petición (request).
pageContext
Permite acceso a objetos implícitos
response
Representa la respuesta al cliente
• Alcance de sesión: existentes durante toda la sesión de navegación del
cliente.
Alcance de petición
request
Representa la petición del cliente
Alcance de sesión
session
© Diego C. Martínez - DCIC-UNS
Representa la información de sesión del cliente
© Diego C. Martínez - DCIC-UNS
22
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
JSP – Secuencias de comandos – scripting
Las secuencias de comandos (scripting) permite incluir código Java
en un documento JSP.
Expresión JSP
<%= expression %>: La Expresión es evaluada y situada en la salida. El
equivalente XML es <jsp:expression> expression </jsp:expression>. Las variables
predefinidas son request, response, out, session, application, config, y
pageContext.
Scriptlet JSP
<% code %>:
El código se inserta en el método service. El equivalente XML
es: <jsp:scriptlet> code </jsp:scriptlet>.
Declaración JSP
<%! code %>:
El código se inserta en el cuerpo de la clase del servlet, fuera
del método service. El equivalente XML es: <jsp:declaration> code
</jsp:declaration>.
JSP – Secuencias de comandos – scripting
…
<body>
<% // iniciar scriptlet
String nombre = request.getParameter( "nombrePila" );
if ( nombre != null ) {
%>
<h1>
Hola <%= nombre %>, <br />
¡Bienvenido a las JavaServer Pages!
</h1>
<% // continuar scriptlet
} // fin de instrucción if
else {
%>
<form action = "bienvenida
bienvenida.jsp
jsp" method = "get">
get >
<p>Escriba su nombre de pila y oprima Enviar</p>
<p><input type = "text" name = "nombrePila" />
<input type = "submit" value = "Enviar" />
</p>
</form>
<% // continuar scriptlet
} // fin de instrucción else
%>
</body>
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
JSP - Acciones
JSP - Acciones
Las acciones permiten el acceso a tareas comunes que se realizan en una JSP,
como interactuar con JavaBeans, incluir contenido de otros recursos o derivar
peticiones.
Las acciones están delimitadas por los tags
<jsp:acción> </jsp:acción>
En donde acción es el nombre de la acción estándar.
Si nada existe entre los dos tags puede usarse la sintaxis abreviada de XML de
elemento
e
e e o vacío
ac o
<jsp:acción />
Existen acciones predefinidas (estándar)…
© Diego C. Martínez - DCIC-UNS
jsp:include
<jsp:include page="relative URL" flush="true"/>
Incluye un fichero en el momento en que la página es solicitada. En algunos
servidores, el fichero incluido debe ser un fichero HTML o JSP, según determine el
servidor.
jsp:useBean
<jsp:useBean att=val*/>
<jsp:useBean att=val*> ... </jsp:useBean>
Encuentra o construye un Java Bean.
Los posibles atributos son:
id="name"
scope="page | request | session | application"
class="package.class"
type="package.class"
beanName="package.class“
© Diego C. Martínez - DCIC-UNS
23
Aplicaciones Web
UNPSJB - Sede Trelew
JSP - Acciones
jsp:setProperty
<jsp:setProperty att=val*/>
Selecciona las propiedades del bean, bien directamenteo o designando el valor que
viene desde un parámetro de la petición. Los atributos legales son:
name="beanName"
property="propertyName|*"
param="parameterName"
value="val“
Primer cuatrimestre de 2014
AJAX
AJAX es un término familiar en otros contextos...
jsp:getProperty
<jsp:getProperty name="propertyName" value="val"/>
Recupera y obtiene las propiedades del Bean.
jsp:forward
<jsp:forward page="relative URL"/>
Reenvía la petición a otra página.
Equipo de
Futbol
Producto de
Limpieza
Videojuego
de Konami
Durante los ultimos años en computación también ha adquirido un significado
especial.
AJAX es un modelo de interacción para aplicaciones web, basado
primordialmente en dos tecnologías: JavaScript y XML.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
AJAX
El corazón de AJAX
El término AJAX significa Asynchronous JavaScript and XML.
Es básicamente una técnica para implementar ciertos comportamientos en
aplicaciones web.
La idea general es solicitar en background información a un servidor mientras el
cliente opera sobre el navegador (por eso asincrónica).
Si bien es muy popular actualmente, esta técnica existe hace varios años, pero su
practicidad era relativa dado el estado de las tecnologías en esos días.
En algun tiempo esta técnica se denominó Inner-Browsing.
Ajax no es una tecnología, sino una agrupación de varias técnicas y tecnologías
unidas para lograr un mismo efecto.
Ajax incluye:
Presentación basada en estándares: XHTML, CSS.
Páginas dinámicas, utilizando DOM.
Intercambio de datos, utilizando XML y XSLT (y JSON!)
Recuperación asincrónica de datos, usando XMLHttpRequest
Javascript para todo lo anterior!
© Diego C. Martínez - DCIC-UNS
Internet Explorer (Windows), Safari (Mac OS-X), Mozilla (todas), Konqueror (KDE) y
otros proveen todos un método para que los scripts Javascript puedan realizar
requerimientos HTTP.
Se realiza por medio de un objeto denominado XMLHttpRequest (“XHR”)
Aunque XML aparece en el nombre, no se limita sólo a ese formato.
Dada la diferencia entre los browsers, existen varias formas de obtener este
objeto…
var req = new ActiveXObject("Microsoft.XMLHTTP")
var req = new XMLHttpRequest()
window.createRequest()
Una vez obtenido el objeto, realizar un pedido HTTP es fácil.
Hay que tener en cuenta que el pedido se realiza en background, en forma
asincrónica, por lo que no “esperamos” por una respuesta...
© Diego C. Martínez - DCIC-UNS
24
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Modelo Ajax
Modelo tradicional
Cliente
Cliente
Web Server
Web Server
Ajax Engine
request
request
response
response
request
request
response
response
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
XMLHttpRequest
XMLHttpRequest en acción
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open(metodo,URL,asyncronico);
xmlhttp.send();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
onreadystatechange es una propiedad del objeto XMLHttpRequest que
almacena la función que procesa la respuesta del servidor.
Es el oyente de cambio de estado: la función se invoca cada vez que cambia la
propiedad readyState.
después de invocar a open,
open readyState = 1.
1
después de invocar a send, readyState = 2.
mientras se recibe la respuesta, readyState = 3
al finalizar la respuesta, readyState = 4.
Sólo cuando readyState vale 4 debemos manipular la respuesta del servidor.
Si el request es asincrónico, hay que indicar previamente qué sucederá cuando
se complete la recepción de la respuesta del servidor...
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
25
Aplicaciones Web
UNPSJB - Sede Trelew
XMLHttpRequest en acción
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
La respuesta del servidor se almacena finalmente en un atributo del objeto
XMLHttpRequest.
Si la respuesta esperada es texto plano, se almacena en responseText
req.onreadystatechange = function(){
if(req.readyState == 4){
document.getElementbyId(id).innerHTML = req.responseText;
}
}
Primer cuatrimestre de 2014
XMLHttpRequest en acción
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
El atributo responseXML es similar, pero nos permite encapsular la
información para ser interpretada como XML.
Al ser un XML, tiene una representación DOM y podemos usar
operaciones para obtener los datos contenidos en ese documento!
req.onreadystatechange = function(){
if(req.readyState == 4){
var xmldoc = req.responseXML;
var nodo = xmldoc.getElementsByTagName('root').item(0);
}
}
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
XMLHttpRequest en acción
Ejemplo Ajax
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
Las operaciones open y send inician el proceso de pedido al servidor.
open recibe como parámetros:
el método (GET, POST, HEAD, etc),
el URL (que puede ser absoluto o relativo) y
un indicativo de si el pedido es asincrónico o no.
El valor “true” como último argumento indica que el script no esperará la
respuesta luego de la invocación a la operación send, la cual comienza el
pedido antes configurado.
Con lo visto hasta el momento es fácil crear una simple aplicación que utilice esta
técnica.
Del lado cliente, haremos pedidos HTTP a un servidor por medio del objeto
XMLHttpRequest. Recibiremos la información y la procesamos.
Del lado servidor, una aplicación (por ejemplo Java) o script (por ejemplo PHP)
generará la respuesta solicitada por el cliente.
Los dos extremos colaboran creando el efecto deseado.
Es importante destacar que las tecnologías usadas tanto del lado cliente como
del lado servidor son independientes y por lo tanto pueden cambiar.
AJAX se refiere a JavaScript, pero pueden surgir nuevos lenguajes de scripting
que interactúen con el XMLHttpRequest del lado cliente.
Del lado servidor podemos usar Java2, .NET, PHP, Perl, etc.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
26
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Recordemos …. JSON
Ejemplo Ajax – validación de datos
En general, el formato de transmisión de datos es XML
Dado el costo de traducir XML a objetos JavaScript, la tendencia ha sido utilizar
formatos más cercanos al lenguaje.
onkeyup
JSON = JavaScript Object Notation
validateUserID(){
controlar id
}
JSON es un subconjunto de la notación object literal.
La Notación Literal de Objetos permite describir en forma simple y directa una
estructura de datos compleja, principalmente objetos.
validar php?userid=
validar.php?userid=...
XMLHTTPRequest
XML
Server de
Validación
var empleado={
nombre:'Homero',
apellido:'Simpson',
nombrecompleto:function(){
return this.nombre+' '+this.apellido;
}
function callback(){
actualizar DOM
}
}
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
JSON
Algunos usos de Ajax
La tendencia es utilizar JSON como estructura de datos, en lugar de XML:
<albums>
<album>
<titulo>
Master of Puppets
</titulo>
<artista>
Metallica
</artista>
</album>
<album>
<titulo>
The Division Bell
</titulo>
<artista>
Pink Floyd
</artista>
</album>
<albums>
{
'album':
[
{
'titulo' : 'Master of Puppets',
'artist' : 'Metallica',
},
{
'titulo' : 'The Division Bell',
'artist' : 'Pink Floyd',
]
}
117 bytes
Validaciones de datos de formularios en tiempo real.
Identificaciones de usuario, números de serie, códigos postales, y otros datos
pueden ser validados en el formulario antes del envío de los datos.
Autocompletamiento
Algunos datos pueden ser autocompletados mientras el usuario escribe.
Operaciones de detalles de datos
Información detallada puede ser obtenida por medio de eventos simples del
cliente.
Controles de interfaz de usuario
Arboles, menúes, barras de progreso se implementan sin necesidad de refresh
de página completa.
Refresh de datos en la página.
Algunos datos son obtenidos del servidor y mostrados en la página.
171 bytes
La principal ventaja es que al ser un formato de
datos propio de JavaScript, es fácil interpretarlo.
No hace falta parsing como en XML.
© Diego C. Martínez - DCIC-UNS
© Diego C. Martínez - DCIC-UNS
27
Aplicaciones Web
UNPSJB - Sede Trelew
Primer cuatrimestre de 2014
Algunas desventajas de Ajax
Complejidad
Se necesita lógica de presentación en el cliente y generación y envío de
documentos XML en el servidor. Requiere conocimientos de JavaScript.
Dependencia de versiones Javascript.
El lenguaje no es el mismo en todos los navegadores.
Depuración
El proceso es complicado porque la lógica se distribuye en el cliente y en el servidor.
Código expuesto
Parte del código de la aplicación queda expuesto al ejecutarse en el cliente.
Indexado
Muchos web crawlers no encontrarán el contenido obtenido via AJAX.
Bookmarks
Probablemente los bookmarks no registren el último estado de la página
© Diego C. Martínez - DCIC-UNS
28
