The n-tier architecture The development of aplications based

on web protocols has been gaining more importance

The schema client-server was replaced by the n-tire architecture where the client is kept as “thin” as possible

On the other side, the server has much more code and takes more duties

2 and 3+ tier architectures

DB Server

DB server

client

Web server Application Serverclient

Drawbacks of the 2-tier architecture Applications are difficult to maintain

The intelligence of the application is in the client Servers are only database servers

(sometimes we can add intelligence to the server side with SPs)

More network traffic We do not know which resources the client has Clients are less secure Distrinution of code when changes are made Low reusability

Was not oriented to the component development

N-tier advantages Clear separation between programs

implementing the presentation of the data and those implementing the “business”

Reusability of components Independency of interface to the client,

business logic and data architecture Better possibilities to make load balance Use of open protocols

J2EE

Is a set of specifications for implementing an open n-tier architecture

Includes many elements which were developed independently before (servlets, JSP, applets, RMI)

Interoperability thanks to XML and SOAP

J2EE includes

Access to database (JDBC) Use of distributed directories (JNDI) Access to remote methods (RMI,

CORBA, SOAP) Electronic mail funcions (if... send

mail to ...)

Diagram of the J2EE Architecture

The main elements of the J2EE architecture Client

May be a “stand alone” programm, an applet inside a browser or the browser itself contacting a sevlet, a jsp or a web service

Web Container Contains (and knows how to run them) html

pages, servlets, JSP, and web services Application Conatainer

Contains and manages the EJB Database Server

What goes where

DB Server Web Server Application

ServerClient:Browser web

Web & Application Server

Communication via JDBC

pages HTML -Java Script

-JSP

EJB

Portlets & Web Services

Characteristics of .NET

Runs over windows 2000 Uses SQL server as database

engine ASP (active server pages) COM (components architecture) Data Acces Objects (activeX) ADO for database connection

J2EE vs .NET

Both have the same elements .NET is a single product which is

not open .NET is easier to learn and faster

for development J2EE is open

El protocolo Http

• Hypertext transfer protocol

• Especifica la forma como el cliente pide las cosas al servidor y cómo el servidor las manda al cliente

• Define un lenguaje de comunicación con reglas sintácticas y gramaticales

Interaccion browser-servidor• Cuando se ingresa una URL al navegador web pidiendo un archivo

http://servidor/index.jsp el navegador manda la siguiente información:

GET /index.jsp HTTP 1.1 Accept: image/gif, image/jpeg, application/vnd.msexcel,

application/vnd.ms-powerpoint, application/msword, Accept-Language: de Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT

5.1; SV1) Host: localhost:8000 Connection: Keep-Alive

<- linea en blanco• La primera línea indica el archivo que el cliente solicita y la versión de HTTP.

Luego viene una lista de los tipos MIME que puede aceptar como retorno, lenguaje del sistema, codificación, browser que utiliza, etc (lo que manda como encabezado depende de la version de http y del browser). Al final se manda una línea en blanco que determina el final de la cabecera HTTP.

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

inputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Respuesta del servidorEl servidor responde mandando la siguiente transacción HTTP:

HTTP/1.0 200 OK Date: Friday, 23-Feb-07 16:30:00 GMT Server: Apache/1.1.1 Content-type: text/html Content-length: 230 <- linea en blanco <HTML><HEAD><TITLE> ........ </HTML>

En este mensaje el servidor utiliza la versión 1.0 de HTTP, y manda el código de estado 200 para indicar que la petición del cliente ha sido procesada satisfactoriamente. También se identifica como un servidor Apache. Indica al cliente que el contenido del documento es texto en formato HTML y que tiene una longitud de 230 bytes.Luego de una línea en blanco viene el contenido del archivo pedido.

Un cliente web básicoimport java.net.*;import java.io.*;

public class ClientWeb {

public static void main(String[] args) throws Exception { Socket s = new Socket(args[0], Integer.parseInt(args[1])); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream())); String l; out.println("GET /"+args[2]+" HTTP/1.0"); out.println(""); while (true) { l = in.readLine(); if (l==null) break; System.out.println(l); } System.out.println("ready"); s.close(); }}

Esto es sólo para ver qué viene del serverargs[0] = host, args[1]=port, args[2]=archivo a pedir

Completarlo para archivos htmlimport java.net.*;import java.io.*;

public class ClientWeb {

public static void main(String[] args) throws Exception { Socket s = new Socket(args[0], Integer.parseInt(args[1])); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream())); String l; out.println("GET /"+args[2]+" HTTP/1.0"); out.println(""); while (true) { l = in.readLine(); if (l==null) break; System.out.println(l); } System.out.println("ready"); s.close(); }}

Esto es sólo para ver qué viene del serverargs[0] = host, args[1]=port, args[2]=archivo a pedir

GET, HEAD y POST

• La primera línea de una petición contiene los comandos HTTP, conocidos como métodos. Existen varios, pero los más conocidos y utilizados son tres: GET, HEAD y POST

GET• El método GET se utiliza para recuperar

información identificada por un URI por parte de los navegadores. Si el URI se refiere a un proceso generador de datos como un programa CGI, en lugar de él, se devuelven los datos generados por el programa. El método GET también se puede utilizar para pasar una pequeña cantidad de información al servidor en forma de pares atributo-valor añadidos al final del URI detrás de un símbolo de interrogación, ?.

Ejemplo GET con parámetros

GET /servlet/saludar?nombre=pepe&email=pepe@dss.cl HTTP/1.0

• La longitud de la petición GET está limitada por el espacio libre en los buffers de entrada. Por lo que para mandar una gran cantidad de información al servidor se utiliza el método POST.

• Buffer: porcion de memoria en el computador usado para traspasar datos entre dos medios distintos (memoria principal-memoria secundaria, memoria principal – internet)

HEAD

• El método HEAD es idéntico al GET excepto que el servidor no devolverá el cuerpo del mensaje en la respuesta a un método HEAD. Esto es útil para obtener información sobre las entidades implicadas en la petición sin que tengan que transferirse. Sirve para comprobar si los enlaces son válidos o para saber cuando fue la última modificación de la entidad solicitada.

POST• El método POST se refiere

normalmente a la invocación de procesos que generan datos que serán devueltos como respuesta a la petición. Además se utiliza para aportar datos de entrada a esos programas. En este caso los pares atributo-valor son incluidos en el cuerpo de la petición separados por &.

Ejemplo POSTPOST /servlet/saludar HTTP/1.0 Accept: */* <- linea en blanconombre=pepe&email=pepe@dsstgo.cl

• Primero el browser manda las líneas de arriba y el servidor queda esperando información adicional hasta que el browser corta la comunicación (notar la diferencia con el get que solo manda una línea y corta la comunicación)

• De este modo el método POST no sufre de las limitaciones de espacio y puede enviar mucha más información al servidor. En particular se usa cuando se quieren mandar archivos completos (tareas!!!!)

• Más aún, es muy conveneinte cuando se quiere mandar información confidencial (passwords) ya que esta no queda en el historial del browser (solo queda la primera linea)

El lenguaje html

• Hypertext markup language

• Da directivas de cómo debe mostrar un texto

• Estas directivas pueden ser interpretadas distintamente por cada “mostrador” de documentos html

• (no es el objetivo de este curso aprender bien html, pero lo vamos a necesitar)

HTML

Que es HTML?

● Nace del XML en los principios de la “web”● Es un lenguaje de estructuracion de documentos● NO es considerado un lenguaje de programacion● Es la base de cualquier pagina web (Excepto paginas Flash)

Y... Para que sirve?

`

● Es usado para estructurar y disenar paginas web.● Los Browsers (1) Lo usan para poder traducir y mostrar la informacion disponible en una pagina web de una manera estructurada, con tablas, imagenes, animaciones , formularios e hipervinculos (links)●Es ademas un estandar existente para la creacion de documentos.

(1) Browser es el software utilizado para visualizar paginas web. Ej: Mozilla Firefox, Internet Explorer `

Herramientas Utiles

● Macromedia Dreamweaver (+++) ● NVU (++)● Microsoft Office Frontpage ( - - )● OpenOffice (+) ● Microsoft Word ( - - - )● Block de Notas (+)

Tags?

● Html utiliza tags para representar sectores y estructuras dentro de la pagina web.●Los tags comienzan (generalmente) de la forma:

< tag >●Terminando (generalmente) de la forma:

< / tag >

Distintos Tags

● Existe una gran variedad (mas de 60) de tags distintos, donde cada uno representa algo diferente dentro de la pagina.

Tags

● <html> </html>● <hn> </hn> con n = 1,2,3● <body> </body>● <table> </table>● <font> </font>● <b> </b>● <br>● <img src=””>

<html> </html>

● Marca el comienzo (<html>) y el fin (</html>) de una pagina web HTML.

●Es absolutamente necesario para que el browser identifique que tipo de documento es y donde este comienza.

<body> </body>

● Marca el comienzo (<body>) y el fin (</body>) del contenido de una pagina web●Tiene parametros extra para definir cosas como:

●Color de Fuente●Color de Fondo●Imagen de Fondo●Color de Links

<body> </body>

Ejemplo:

<body bgcolor=”fondo.jpg” link=”#FFFFFF” color=”black”>

MAS TAGS ACA

</body>

<title> </title>

● Introduce un titulo al documento

Ejemplo:<title> Titulo de la pagina </title>

<font> </font>

● Cambia las propiedades de la fuente

Ejemplo:<font face=”Verdana” color=”red”> Este texto estara

en verdana y con color rojo </font>

<a> </a>

● Crea un hipervinculo (link)

Ejemplo:<a href=”http://www.uchile.cl”> Click Aca para entrar a

la UDP </a>

href = hyperlink referencehref = hyperlink reference

<br>

● Inserta un break (enter o nueva linea)

Ejemplo:Esto es un texto, en donde ahora aca <br> inserto una

nueva linea. <br> Despues del cierre de un parrafo tambien viene una nueva linea.

Ejemplo de una pagina web

<html><body bgcolor="green" link="red">

<title> Mi primera pagina web </title><center> Aqui estoy centrando el texto en la pagina </center>Este es un texto normal. <br><b> Y Ahora agregro una letra en negrita </b> <br>Para finalizar con una palabra en <font color="red"> rojo </font> con un link a la pagina web de la <a href="http://www.dcc.uchile.cl"> DCC </a>

</body></html>

Imagenes<img src=”Direccion”>

Para insertar una imagen hay que definir el lugar fisico o virtual en donde esta se encuentra.Lugar Fisico: Una direccion en el disco duro (C:\imagenes\imagen.jpg)Lugar Virtual: Una direccion en internet (http://www.uchile.cl/logo.gif)

Imagenes<img src=”Direccion”>

Ejemplo: <img src=”C:\imagenes\imagen.jpg”>

NO TIENE CIERRE

Tiene parametros extra como: width,height,alt,border

Tablas

● Las tablas son quizas una de las estructuras mas usadas en una pagina web● Se usan generalmente para definir el diseno de esta● Son muy utilizadas para los formularios y Listas de datos

<table> </table>

Define el comienzo de una tabla y el fin de esta. Tiene parametros extra como:

● border● bgcolor● background● width● height

<tr> </tr>

● Define el comienzo de un Row (fila) dentro de una tabla y el fin de esta.● Tiene parametros extra como:

● bgcolor● background● width● height

<td> </td>

● Define el comienzo de una columna dentro de una fila (tr) y el fin de esta.● Tiene parametros extra como:

● bgcolor● background● width● height

Ejemplo de una tabla sencilla

<table border="1"><tr>

<td> N </td><td> RUT </td><td> Nombre </td><td> Apellido </td><td> Nota </td>

</tr><tr>

<td> 1 </td><td> 16021543-2 </td><td> Roberto </td><td> Konow </td><td> 39,5 </td>

</tr>

Ejemplo de una tabla sencilla(Continuacion)

<tr><td> 2 </td><td> 1121543-2 </td><td> Macarena </td><td> Cazenave </td><td> 69,6 </td>

</tr><tr>

<td> 3 </td><td> 1121543-2 </td><td> Cristian </td><td> Tala </td><td> 1,0 </td>

</tr></table>

Formularios

● Los formularios sirven para poder enviar informacion desde el browser hacia algun otro lugar (generalmente hacia el servidor mismo)●Los formularios pueden enviar la informacion de dos formas distintas: POST y GET●Cada item (textarea,text) de un formulario TIENE que tener un nombre definido.

Items

<input type=”item” name=”nombre” value=”valor”>

●Text●Submit●Reset●Image

<textarea name=”Area de texto”> </textarea>

FormulariosPOST

●Cuando se envia informacion usando el metodo POST, esta se envia de forma “escondida” utilizando el browser.● Se usa generalmente para los formularios de tipo Login y Password.

FormulariosGET

●Cuando se envia informacion usando el metodo GET, esta se envia de forma “explicita” en la URL (direccion).● Se usa generalmente para crear links dinamicos.

●Ejemplo: http://www.dcc.uchile.cl/index.jsp?pagina=inicio&tipo=usuario

FormulariosEjemplo

<form action="test.jsp" name="formulario" method="POST"> <input type="text" name="nombre"> <br> <textarea name="detalle"> </textarea> <br><input type="submit" name="add" value="Agregar"></form>

Formularios<table border="1">

<form action="test.jsp" name="formulario" method="POST"><tr>

<td> Nombre: </td><td> <input type="text" name="nombre"> </td>

</tr><tr>

<td> Detalle: </td><td> <textarea name="detalle"> </textarea> </td>

</tr><tr>

<td><input type="submit" name="add" value="Agregar"> </td></tr></form>

</table>