Presentacion sesion01 - Programacion WEB

SESIÓN Nº 1
Docente: Ing. CIP Loncán Salazar, Pierre Paul
CURSO:
DESARROLLO DE APLICACIONES WEB

2
AGENDA:
 Introducción al curso
 HTML.
 JavaServer Pages (JSP).
 Post y Get
Ing.CIPLoncánSalazar,PierrePaul

3
INTRODUCCIÓN
 El desarrollo de aplicaciones Web requiere una
comprensión básica de las redes y de World Wide Web.

4
TRANSACCIONES HTTP SIMPLES
 HTTP especifica un conjunto de métodos y encabezados
que permiten a los clientes y servidores interactuar e
intercambiar información de una manera uniforme y
confiable.
 En su forma más simple, una página Web no es más que
un documento XHTML: un archivo de texto simple que
contiene marcado (es decir, etiquetas) para describir a
un navegador Web cómo mostrar y dar formato a la
información del documento.

5
TRANSACCIONES HTTP SIMPLES (II)
 Por ejemplo, el siguiente marcado de XHTML:
<title>Mi pagina Web</title>
 indica que el navegador debe mostrar el texto entre la
etiqueta inicial <title> y la etiqueta final </title> en la
barra de título del navegador.
 Los documentos XHTML también pueden contener
datos de hipertexto (hipervínculos) que vinculan a
distintas páginas, o a otras partes de la misma página.
 Cuando el usuario activa un hipervínculo (por lo general,
haciendo clic sobre él con el ratón), la página Web
solicitada se carga en el navegador Web del usuario.

6
TRANSACCIONES HTTP SIMPLES (III)
 HTTP utiliza URIs (Identificadores uniformes de
recursos) para identificar datos en Internet.
 Los URIs que especifican las ubicaciones de los
documentos se llaman URLs (Localizadores uniformes de
recursos).
 Los URLs comunes se refieren a archivos, directorios u
objetos que realizan tareas complejas, como búsquedas
en bases de datos y en Internet. Si usted conoce el URL
de HTTP de un documento XHTML disponible
públicamente en cualquier parte en la Web, puede
acceder a este documento a través de HTTP.

7
TRANSACCIONES HTTP SIMPLES (IV)
 Un URL contiene la información que dirige a un navegador al
recurso que el usuario desea utilizar. Las computadoras que
ejecutan software de servidor Web hacen disponibles esos
recursos.
 Componentes de un URL:
http://www.deitel.com/libros/descargas.html
 http://  Indica que el recurso se debe obtener con el protocolo
HTTP.
 www.deitel.com  Es el nombre del host (servidor) en el que
reside y se da mantenimiento al recurso.
 El nombre de host (www.deitel.com) se traduce en una dirección IP
(68.236.123.125), que identifica al servidor de forma única.
 La traducción la realiza un servidor de nombres de dominio (DNS), el cual
mantiene una base de datos de nombres de host y sus correspondientes
direcciones IP; a este proceso se conoce como búsqueda DNS (DNS
lookup).

8
TRANSACCIONES HTTP SIMPLES (V)
 Componentes de un URL:
 /libros/descargas.html  Indica el nombre del recurso solicitado
(descargas.html) y la ruta o ubicación (/libros), en el servidor Web.
 Por cuestiones de seguridad, la ruta generalmente especifica la ubicación
de un directorio virtual.
 Cuando el navegador Web recibe un URL, realiza una
transacción HTTP simple para obtener y mostrar la página
Web que se encuentra en esa dirección.
 En la siguiente figura se ilustra la transacción en forma
detallada, mostrando la interacción entre el navegador Web
(el lado cliente) y la aplicación servidor Web (el lado
servidor).
 La petición (en su forma más simple) es
GET /libros/descargas.html HTTP/1.1

9
Interacción entre el cliente y el servidor Web. Paso 1: la petición GET
Interacción entre el cliente y el servidor Web. Paso 2: la respuesta HTTP.

10
ARQUITECTURA DE APLICACIONES
MULTINIVEL
 Las aplicaciones basadas en Web son aplicaciones multinivel
(comúnmente conocidas como aplicaciones de n niveles),
que dividen la funcionalidad en niveles separados (es decir,
agrupaciones lógicas de funcionalidad).
 Aunque los niveles pueden localizarse en la misma
computadora, por lo general, los niveles de las aplicaciones
basadas en Web residen en computadoras separadas.
 En la figura se presenta la estructura básica de una
aplicación basada en Web de tres niveles.

11
MULTINIVEL (II)
 El Nivel Inferior
(Nivel de datos o Nivel de información):
 Mantiene los datos de la aplicación.
 Por lo general, los datos se encuentran en un sistema de
administración de bases de datos relacionales (RDBMS).
 Podrían haber varias bases de datos residiendo en una o más
computadoras, que en conjunto forman los datos de la
aplicación.

12
MULTINIVEL (III)
 El Nivel Intermedio
(Lógica de Negocios):
 Implementa la lógica de negocios, de controlador y de
presentación para controlar las interacciones entre los
clientes de la aplicación y sus datos.
 La lógica de control procesa las peticiones de los clientes
(como las peticiones para ver un catálogo de productos) y
obtiene datos de la base de datos.
 La lógica de presentación procesa los datos del nivel de
información y presenta el contenido al cliente.
 Por lo general, las aplicaciones Web presentan datos a los clientes
en forma de documentos XHTML.

13
MULTINIVEL (IV)
 El Nivel Intermedio
(Lógica de Negocios):
 La lógica comercial hace valer las reglas comerciales y
asegura que los datos sean confiables antes de que la
aplicación servidor actualice la base de datos, o presente los
datos a los usuarios.
 Las reglas comerciales dictan la forma en que los clientes
pueden o no acceder a los datos de la aplicación, y la forma
en que ésta procesa los datos.
 Por ejemplo, una regla comercial en el nivel intermedio de una
aplicación basada en Web para una tienda podría asegurar que
todas las cantidades de los productos sean siempre positivas.
 La petición de un cliente de establecer una cantidad negativa en la
base de datos de información de productos del nivel inferior sería
rechazada por la lógica comercial del nivel intermedio

14
MULTINIVEL (V)
 El Nivel Superior
(Nivel de Interfaz de usuario o Nivel Cliente):
 Es la interfaz de usuario de la aplicación, la cual recopila los
datos de entrada y de salida.
 Los usuarios interactúan en forma directa con la aplicación a
través de la interfaz de usuario, que por lo general es el
navegador Web, el teclado y el ratón.
 En respuesta a las acciones del usuario (por ejemplo, hacer clic en
un hipervínculo), el nivel cliente interactúa con el nivel intermedio
para hacer peticiones y obtener datos del nivel de información.
Después, el nivel cliente muestra los datos obtenidos para el
usuario.
 El nivel cliente nunca interactúa directamente con el nivel de
información

15
TECNOLOGÍAS WEB DE JAVA
 Servlets:
 Utilizan el modelo petición-respuesta HTTP de comunicación
entre cliente y servidor.
 Los servlets extienden la funcionalidad de un servidor, al permitir
que éste genere contenido dinámico. Por ejemplo:
 Generar en forma dinámica documentos XHTML personalizados
 Ayudar a proporcionar un acceso seguro a un sitio Web
 Interactuar con bases de datos a beneficio de un cliente.
 Mantener la información de sesión única para cada cliente.
 Los paquetes javax.servlet y javax.servlet.http proporcionan las
clases e interfaces para definir servlets.
 El servlet procesa la petición y devuelve una respuesta apropiada
al cliente; por lo general en forma de un documento XHTML o
XML (Lenguaje de marcado extensible).

16
TECNOLOGÍAS WEB DE JAVA (II)
 JavaServer Pages:
 Es una extensión de la tecnología de los servlets.
 El contenedor de JSPs traduce cada JSP y la convierte en un
servlet.
 A diferencia de los servlets, las JSPs nos ayudan a separar la
presentación del contenido.
 Permiten crear contenido dinámico al reutilizar componentes, y
usar componentes que utilizan secuencias de comandos del lado
servidor.
 Se pueden usar componentes llamados JavaBeans, y bibliotecas
de etiquetas personalizadas.
 Un JavaBean es un componente reutilizable que sigue ciertas
convenciones para el diseño de clases.
 El conjunto completo de convenciones de diseño de clases se describe en
la especificación de los JavaBeans (java.sun.com/products/
javabeans/glasgow/index.html).

17
TECNOLOGÍAS WEB DE JAVA (III)
 Bibliotecas de etiquetas personalizadas:
 Son una poderosa característica de la tecnología JSP
 Permite a los desarrolladores de Java ocultar el código para acceder a
una base de datos y otras operaciones complejas mediante etiquetas
personalizadas.
 Esta simpleza permite a los diseñadores de páginas Web, que no estén
familiarizados con Java, mejorar las páginas Web con poderoso contenido
dinámico y capacidades de procesamiento.
 Las clases e interfaces de JSP se encuentran en los paquetes
javax.servlet.jsp y javax.servlet.jsp.tagext..

18
TECNOLOGÍAS WEB DE JAVA (IV)
 Componentes de JSP: Hay cuatro componentes clave :
 Las directivas: son mensajes para el contenedor de JSPs que permiten
especificar configuraciones de páginas, incluir contenido de otros
recursos y especificar bibliotecas de etiquetas personalizadas para
usarlas en las JSPs.
 Las acciones: encapsulan la funcionalidad en etiquetas predefinidas que
se pueden incrustar en los JSPs. Las acciones permiten enviar
información al servidor o crear objetos de Java para usarlos en las JSPs.
 Los elementos de secuencia de comandos: permiten insertar código que
interactúe con los componentes en una JSP para realizar el
procesamiento de peticiones.
 Las bibliotecas de etiquetas: permiten a los diseñadores de páginas Web
manipular el contenido de las JSPs sin necesidad de tener un
conocimiento previo sobre Java. La Biblioteca de etiquetas estándar de
JavaServer Pages (JSTL) permite entre otras tareas, iterar a través de una
colección de objetos y ejecutar instrucciones de SQL.

19
¿CÓMO SE ESCRIBEN LOS
FORMULARIOS?
 La base del formulario es el elemento <FORM>, y es el
que define una zona de la página como formulario.
 En una página puede haber varias zonas definidas como
formulario, en cuyo caso es conveniente darles distintos
nombres a cada uno.
 Dentro de este elemento, que es un objeto, se insertan
otros elementos, que a su vez son sub-objetos del
objeto FORM, que son los que realmente dibujan en
pantalla los componentes del formulario.

20
HAY TRES CLASES DE SUB-OBJETOS:
 <INPUT>
 Campos de entrada por teclado.
 Botones de selección.
 Casillas de marca.
 Botones de proceso.
 Botones de inicialización (reset).
 Imágenes sensibles al ratón.
 <SELECT>
 Listas desplegables de valores.
 Listas fijas de valores.
 <TEXTAREA>
 Ventanas de escritura libre.

21
ESTE SERÍA EL MÁS ELEMENTAL DE LOS
FORMULARIOS, CON SÓLO UN CAMPO Y UN BOTÓN DE
ENVÍO
 Analicemos cómo se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST“
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar">
</FORM>
 En la primera línea vemos el elemento de definición de formulario: <FORM>.
Va acompañado de tres atributos: NAME, METHOD y ACTION.
 NAME, nombre que se le asigna al formulario. No es obligatorio, pero si el formulario va a
ser utilizado en páginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitará
un nombre, ya que el formulario será considerado como un objeto.
 METHOD se refiere al método que emplearemos para enviar los datos al servidor, y
pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de
programación basadas en la máxima longitud de registro que puede enviarse; cada uno
usa un canal de salida distinto. El que soporta más longitud es POST, y será el que
utilicemos en casi todos los ejemplos. Si el formulario solamente se utiliza para llamar a
otras páginas, se utiliza el método GET, y si se trata de envio de datos POST.

22
 ACTION: acción que ejecutará el formulario en un servidor http o
en local. Con el valor del ejemplo:
ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi"
se le está indicando que ejecute un programa llamado test2-cgi que está en
el directorio /cgi-bin del servidor http miserver.midominio.mipais
Otra cosa que puede hacer ACTION, y que además tiene la ventaja
de que no sería preciso diseñar un CGI, es enviar un e-mail (correo
electrónico) a un usuario o a una lista de usuarios.
Los datos enviados por el formulario, tendrán la forma que ya
conocemos, pero una vez recibidos por esta vía, pueden ser
tratados con programas de edición de texto, y convertidos al
formato que se quiera.
Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-
usuario@miservidor-e-mail"> ...... </FORM>

23
EL ELEMENTO INPUT
 INPUT sin ningún atributo define por defecto una ventana
de escritura de 20 caracteres de longitud por una línea de
ancho:
Se escribe:
<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos:
 SIZE define la longitud de la ventana de texto.
 MAXLENGTH define la máxima longitud de la cadena que se
puede escribir dentro de la ventana.
 NAME define el nombre de la ventana (que en realidad es un
campo dentro del registro, que en conjunto, es el formulario).
Ejm:
<FORM> <INPUT SIZE=10 MAXLENGTH=10
NAME="campo1"></FORM>

24
EL ELEMENTO INPUT
 VALUE sirve para que la ventana aparezca con un valor
predeterminado, y no vacía como hace por defecto:
Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>
 READONLY Sirve para que el valor de la ventana, que
contiene un valor predeterminado, no pueda ser modificado
por el usuario.
Se escribe:
<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>

25
EL ELEMENTO INPUT
 TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.
 TYPE=PASSWORD para que el valor predeterminado de la
ventana esté en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
 TYPE=HIDDEN define que el valor predeterminado de la ventana
y la ventana misma estén en formato oculto.
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
 Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor,
pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto
no es un formato encriptado, viendo el documento fuente se puede
saber el valor de la ventana.

26
EL ELEMENTO INPUT
 TYPE=SUBMIT para generar un botón que al ser pulsado cierra la
captura de datos del formulario y procede a ejecutar lo definido
en el atributo ACTION que ya conocemos.
Se escribe:
<FORM METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT
TYPE="SUBMIT" VALUE="Procesar"></FORM>
VALUE puede acompañar a SUBMIT , y en este caso sirve para definir el
texto que queremos que tenga el botón en su interior. Si se omite, por
defecto el visualizador le da el valor "Submit Query".

27
EL ELEMENTO INPUT
 Existe otro tipo llamado TYPE=BUTTON que genera un botón
igual al generado por el tipo submit, pero que no realiza ninguna
acción; es simplemente un botón "muerto" en cuanto a acciones
directas. Suele utilizarse para asociarle instrucciones en
JavaScript o VBScript mediante el evento onClick.
Se escribe:
 <FORM METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-
cgi"> <INPUT NAME="campo1"> <INPUT TYPE="BUTTON"
VALUE="No hace nada"></FORM>

28
EL ELEMENTO INPUT
 TYPE=RESET para generar un botón que al ser pulsado inicializa
todos los componentes del formulario.
Se escribe:
<FORM METHOD="POST"
cgi"> <INPUT NAME="campo1"> <INPUT TYPE="RESET"
VALUE="Inicializar"></FORM>
VALUE puede acompañar a RESET , y en este caso sirve para definir el
texto que queremos que tenga el botón en su interior. Si se omite, por
defecto el visualizador le da el valor "Reset".

29
EL ELEMENTO INPUT
 TYPE=RADIO genera botones circulares que permiten seleccionar
un valor predeterminado o activar una opción Clase A Clase B
Se escribe:
<FORM METHOD="POST"
cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B o
ninguna de las dos. Si se desea que por defecto un valor esté seleccionado,
por ejemplo clase B, hay que añadir el parámetro CHECKED después del
valor: ... VALUE="B" CHECKED></form>

30
EL ELEMENTO INPUT
 TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un
valor predeterminado o activar una opción Clase A Clase B
Se escribe:
<FORM METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase
B, ninguna, o las dos. Si se desea que por defecto un valor esté seleccionado,
por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor:
... VALUE="B" CHECKED></form>

31
EL ELEMENTO SELECT
 SELECT sin ningún atributo define por defecto una lista
desplegable de toda la pantalla de alto y una columna de
ancho.
Se escribe:
<FORM> <SELECT> </SELECT> </FORM>
Como evidentemente esto no es muy práctico, hay que
parametrizar el elemento. En primer lugar se le da nombre,
ya que éste es un campo más del formulario, la diferencia es
que no hay que escribir en él sino escoger un valor de los
que nos muestre al desplegarlo, se usará el atributo NAME,
y para entrar valores en la lista se usa el atributo OPTION.

32
EL ELEMENTO SELECT
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT> </FORM>
 Se deben tener en cuenta varias cosas respecto a SELECT:
 La longitud de la ventana de selección se autoajusta al valor más largo de la
lista.
 La ventana de selección, por defecto, muestra una línea, si se quieren
mostrar más se utilizará el atributo SIZE.
 Se debe procurar que los contenidos de los campos sean lo más cortos
posibles; una excesiva longitud implica mayor tráfico por la red, pero se
deben construir las listas de forma clara, y que resulten de fácil lectura al
usuario, lo que puede aumentar la longitud de los valores.

33
EL ELEMENTO SELECT
Para enviar un valor diferente del que aparece en la lista, se utiliza el
parámetro VALUE asociado al atributo OPTION
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-
cgi">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Esto significa que cuando selecciones "Este es el valor 5" en realidad lo que se
envía al servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no
hay ninguno seleccionado, por defecto el visualizador enviará el primer valor
de la lista.

34
EL ELEMENTO SELECT
Se puede hacer que haya un valor preseleccionado añadiendo el
parámetro SELECTED al atributo OPTION, y si se quiere permitir más de
una selección, se pondrá el atributo MULTIPLE al elemento SELECT. Para
seleccionar y deseleccionar hay que atenerse a las normas de Windows
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
.

35
EL ELEMENTO SELECT
Puede ocurrir que interese agrupar los valores de la lista desplegable, a fin
de que resulte más fácil encontrar la opción adecuada, sobre todo si la
lista es larga. Para ello se puede utilizar el parámetro optgroup. Por
ejemplo:
Se escribe:
<select name="coches">
<option selected value="0">Ninguno
<optgroup label="Coches de lujo">
<option value="1">Rolls Royce
<option value="2">Ferrari
<option value="3">Mercedes
</optgroup>
<optgroup label="Coches normales">
<option value="4">Renault
<option value="5">Peugeot
<option value="6">Seat
</optgroup>
</select>
.

36
MÉTODO GET
 Es un método usado para enviar una cadena de datos en
una URL, de la forma de parejas variable/valor, por
ejemplo, titulo=pulpo. En la cadena de datos las parejas
de variavle/valor se separan por caracteres &, los
espacios se convierten en +.
 Ejemplo:
<a href=“visor.jsp?titulo=Estrella+de+Mar”
&file=estrella”target=“_blank”>Estrella
de Mar</a><br/>

37
MÉTODO POST
 Es un método permite pasar los datos de una longitud
ilimitada como un cuerpo de solicitud de cabecera HTTP
hacia el servidor. El usuario que trabaja en el navegador
cliente no puede ver los datos que estan siendo
enviados, por eso la solicitud Post es ideal para enviar
datos confidenciales (como el número de una tarjeta de
crédito) o grandes cantidades de datos al servidor

38

Presentacion sesion01 - Programacion WEB

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Presentacion sesion01 - Programacion WEB

Similar a Presentacion sesion01 - Programacion WEB (20)

Presentacion sesion01 - Programacion WEB