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 Server client

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 Server Client: 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 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ásico import 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(" ready "); s.close(); } Esto es sólo para ver qué viene del browser

Respuesta del servidor El servidor responde mandando la siguiente transacción HTTP: HTTP/ 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 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ásico import 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 server args[0] = host, args[1]=port, args[2]=archivo a pedir

Completarlo para archivos html import 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 server args[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 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 POST POST /servlet/saludar HTTP/1.0 Accept: */* <- linea en blanco 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: ● Terminando (generalmente) de la forma:

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

Tags ● ● con n = 1,2,3 ●

● Marca el comienzo ( ) y el fin ( ) de una pagina web HTML. ● Es absolutamente necesario para que el browser identifique que tipo de documento es y donde este comienza.

● Marca el comienzo ( ) y el fin ( ) 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

Ejemplo: MAS TAGS ACA

● Introduce un titulo al documento Ejemplo: Titulo de la pagina

● Cambia las propiedades de la fuente Ejemplo: Este texto estara en verdana y con color rojo

● Crea un hipervinculo (link) Ejemplo: Click Aca para entrar a la UDP href = hyperlink reference

● Inserta un break (enter o nueva linea) Ejemplo: Esto es un texto, en donde ahora aca inserto una nueva linea. Despues del cierre de un parrafo tambien viene una nueva linea.

Ejemplo de una pagina web Mi primera pagina web Aqui estoy centrando el texto en la pagina Este es un texto normal. Y Ahora agregro una letra en negrita Para finalizar con una palabra en rojo con un link a la pagina web de la DCC

Imagenes 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 (

Imagenes Ejemplo: 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

Define el comienzo de una tabla y el fin de esta. Tiene parametros extra como: ● border ● bgcolor ● background ● width ● height

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

● 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 N RUT Nombre Apellido Nota Roberto Konow 39,5

Ejemplo de una tabla sencilla (Continuacion) Macarena Cazenave 69, Cristian Tala 1,0

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 ● Text ● Submit ● Reset ● Image

Formularios POST ● 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.

Formularios GET ● 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:

Formularios Ejemplo

Formularios Nombre: Detalle: