Arquitectura 3-4 tier basada en tecnología WWW

Transcripción

1 Arquitectura 3-4 tier basada en tecnología WWW

2 TIER I TIER II TIER III TIER IV Módulos de la aplicación BROWSER HTTP SERVER SERVER DE LOGICA DE LA APLICACION RDBMS SERVER LDAP Otra aplicación 3,5 Interfaces y protocolos http, cookies + (opt) SSL sobre TCP CGI ISAPI, NSAPI, APACHE API, servlet interface SQL ODBC, JDBC, APIs prop. 3,5 SQL sobre net protocol (prop.) LDAP, LDIF transfer XML transfer via , http, etc

3 Tier I Browser HTML Forms Signed forms CSS ECMAScript (Javascript) JAVA (JVM) Helper applications HTTP / HTTPS SSL/TLS 202 HTML - Elementos FORMS Action Definición de campos del form: SELECT INPUT (TEXT, RADIO, CHECKBOX, SUBMIT, BUTTON, HIDDEN) Event handlers (OnClick,... Anchor (link) Gráficos Applets CSS 203

4 HTML Ver Ejemplo (html y css) 205

5 Ejemplo: HTML, HTML Forms, Client-side Javascript, CSS A) <HTML> <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <HEAD> <! -- Copyright 1999 U&R Consultores SRL Buenos Aires, Argentina -> <META NAME="robots" content="noindex"> <TITLE>FFB HFA Analysis Software</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="/ptdata/StyleSheet.css" TITLE="HFA"> <! -- Client-side scripts -> <SCRIPT SRC="/ptdata/ClientLib.js"></SCRIPT> </HEAD> <BODY> <TABLE COLS=1 BGCOLOR="#66FFFF" WIDTH="100%"> <TR> <TD> <DIV ALIGN=RIGHT> <IMG SRC="/ptdata/images/ThisCenterLogo.gif" BORDER=0 ALT="FFB Cooperating Center"> </DIV> </TD> </TR> </TABLE> <SCRIPT LANGUAGE="JAVASCRIPT"> // NOTE: This is a **CLIENT** side script to be executed by the BROWSER function isaposnum(s) { return (parseint(s) > 0) function CheckIntRange(item, min, max) { var returnval = false if (!isaposnum(item.value)) alert("please enter a positive number between " + min + " and " + max) else if (parseint(item.value) < min) alert("please enter a " + item.name + " greater than " + min) else if (parseint(item.value) > max) alert("please enter a " + item.name + " less than " + max) else returnval = true return returnval function CheckFormFields() { R=true; if (document.ptdata.fname.value.length==0) { alert("patient's first name field cannot be empty"); R=false; else if (document.ptdata.lname.value.length==0) { alert("patient's last name field cannot be empty"); R=false; else if (document.ptdata.sex.value=="empty") { alert("sex field must be specified"); R=false; else R=CheckIntRange(document.PtData.DOB_Y, 1900, 2050); return(r); </SCRIPT> 205.1/4

6 <! -- HTML content begins here -> Enter new patient data:<p> <FORM NAME=PtData METHOD="GET" ACTION="/scripts/ptdata/restricted/Register2.asp" TARGET=_top > <TABLE> <TR><TD><B>First name (*): </B> </TD> <TD><INPUT NAME="Fname" width=40 ></TD> </TR> <TR><TD><B>Last name (*): </B></TD> <TD><INPUT NAME="Lname" width=40 ></TD> </TR> <TR><TD><B>DOB (*): </B></TD> <TD> <SELECT NAME="DOB_M"> <OPTION VALUE=1>January <OPTION VALUE=2>February... <OPTION VALUE=12>December </SELECT> (month) <SELECT NAME="DOB_D"> <OPTION VALUE=1>1<OPTION VALUE=2>2<OPTION VALUE=3>3... <OPTION VALUE=29>29<OPTION VALUE=30>30<OPTION VALUE=31>31 </SELECT> (day) <INPUT NAME="DOB_Y" size=5 VALUE="1957" OnChange="CheckIntRange(DOB_Y, 1900, 2050)"> (year: ) </TD> </TR> <TR><TD><B>Sex (*): </B></TD> <TD> <SELECT NAME="Sex"> <OPTION VALUE="empty" SELECTED>[specify] <OPTION VALUE="F">Female <OPTION VALUE="M">Male </SELECT> </TD> <TR> <TR><TD>Chart Id.: </TD><TD><INPUT NAME="ChartId" width=40 ></TD></TR> <TR><TD>Address: </TD><TD><INPUT NAME="Address" width=40 ></TD></TR> <TR><TD>Telephone: </TD><TD><INPUT NAME="Tel" width=40 ></TD></TR> <TR><TD> address: </TD><TD><INPUT NAME=" " width=40 ></TD></TR> <TR><TD>SSN: </TD><TD><INPUT NAME="SSN" width=40 VALUE=""></TD></TR> 205.2/4

7 <TR><TD><B>Diagnosis(*):</B> </TD> <TD VALIGN=top> <SELECT NAME="DiagCode"> <OPTION VALUE=11 >Age-related Macular degeneration <OPTION VALUE= 3 >Autosomal dominant RP <OPTION VALUE= 5 >Autosomal recessive RP <OPTION VALUE= 7 >Bardet-Biedl syndrome <OPTION VALUE= 8 >Choroideremia <OPTION VALUE=16 >Cone dystrophy <OPTION VALUE=17 >Cone-rod dystrophy <OPTION VALUE=10 >Congenital Stat. Night Blindness- Compl. <OPTION VALUE= 9 >Congenital Stat. Night Blindness- Incomp. <OPTION VALUE=12 >Leber Congenital Amaurosis <OPTION VALUE=19 >Normal <OPTION VALUE=14 >Oguchi Disease <OPTION VALUE= 2 >Other <OPTION VALUE= 6 >Retinitis Pigmentosa <OPTION VALUE=13 >Stargardt Disease/Fundus Flavimaculatus <OPTION VALUE= 1 SELECTED >Unknown <OPTION VALUE=18 >Usher syndrome <OPTION VALUE=15 >Vitelliform Macular Dystrophy <OPTION VALUE= 4 >X-linked RP </SELECT> </TD></TR> <TR><TD></TD><TD> <INPUT TYPE=BUTTON VALUE="Register this new patient" OnClick="if(CheckFormFields()) this.form.submit();"> <INPUT TYPE=HIDDEN NAME=Status1 VALUE="347"> </TD></TR> </TABLE> </FORM> Items marked "<B>(*)</B>" are required. Others are optional. <DIV Id=stFoot>v1.0b1</DIV> </BODY> </HTML> 205.3/4

8 B) StyleSheet.css TD, TH { COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 9pt; TEXT-ALIGN: left; text-height: 2 BODY { BACKGROUND-COLOR: white; COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 10pt #x96z { BACKGROUND-COLOR: white; COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 10pt #x97z { COLOR: black; FONT-FAMILY: arial, helvetica; FONT-SIZE: 12pt; text-height: 2 #x98z { COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 9pt; TEXT-ALIGN: left; text-height: 2 #x99z { COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 9pt; VERTICAL-ALIGN: bottom; text-height: 2 #stfoot { COLOR: black; FONT-FAMILY: Arial, helvetica; FONT-SIZE: 8pt; TEXT-ALIGN: right 205.4/4

9 Client-side scripting En la página html se incluye un programa escrito en Javascript, un lenguaje sencillo, interpretado. Este programa se ejecuta en el cliente exclusivamente, y permite agregar funcionalidades. Ej. Validación de input en campos de un form Cálculos locales previos al envío al server Opciones ajustables según input previo etc. Javascript/VBscript pueden también usarse para programar en el server (requiere software en el server - server-side Javascript ) 206 Protocolo entre el tier 1 y el 2: HTTP Sobre una conexión TCP previamente establecida (con o sin SSL), se intercambian: Request request_line: <GET HEAD POST> <request_url> <HTTP_version> ej.: GET /data/new/index.html HTTP/1.0 headers (0 o más) sintaxis: <keyword>: <valor(es)> ej.: Content-Type: image/gif <una línea en blanco> body (sólo en el caso de un request tipo POST) Response status_line: <HTTP-version> <response-code> <response phrase> ej.: HTTP/ OK headers (0 o más) <una línea en blanco> body 207

10 Transacción HTTP Ver impresión sniffer c/transaccion http que transporta el html anterior 208 Headers en HTTP Header name Aplicable al Describen Request Response al Body Allow * Authorization * Content-Encoding * Content-Length * Content-Type * Date * * Expires * From * If-Modified-Since * Last-Modified * Location * MIME-Version * * Pragma * * Referer * Server * User-Agent * WWW-Authenticate * 209

11 Códigos de respuesta - HTTP Response Description. 1yz Informational. Not currently used. Success. 200 OK, request succeeded. 201 OK, new resource created (POST command). 202 Request accepted but processing not completed. 204 OK, but no content to return. Redirection; further action need be taken by user agent. 301 Requested resource has been assigned a new permanent URL. 302 Requested resource resides temporarily under a difierent URL. 304 Document has not been modified (condicional GET). Client error. 400 Bad request. 401 Unauthorized; request requires user authentication. 403 Forbidden for unspecified reason. 404 Not found. Server error. 500 Internal server error. 501 Not implemented. 502 Bad gateway; invalid response from gateway or upstream server. 503 Service temporarily unavailable 210 Conexiones TCP para transferir una página HTML port Cant. Tiempo de conex. total simult. [seg.] tiempo 211

12 Tier II Web server El tier 2 (el web server) implementa el protocolo http para recibir y enviar el contenido desde y hacia el browser El tier 2 (el web server) obtiene el contenido a enviar leyendo el filesystem activando el proceso del tier 3 y pasándole información sobre la transacción. Esta información puede estructurarse según la especificación CGI 212 Tier III Servidor de lógica aplicativa El tier 3 implementa la lógica aplicativa (ej. el sistema de facturación). Para hacerlo utiliza la información proveniente del cliente más la que posee almacenada en los repositorios de datos (las bases de datos) Los resultados de este proceso pueden ser enviados al cliente, y/o alterar el contenido de las bases de datos, con lo cual el efecto de correr este proceso se puede hacer persistente. Las bases de datos son administradas exclusivamente por el tier 4, por lo cual para modificar cualquier dato persistente el tier 3 debe interactuar con el 4 a través de un protocolo 213

13 Resumen: Mecanismo básico de interacción tiers I - III (1) un usuario solicita al browser la obtención de una página indicando su URL el browser establece una sesión HTTP (pueden ser varias conexiones) y obtiene la página (archivo que contiene HTML). Supongamos que éste archivo contiene la especificación de un formulario La especificación del formulario contiene un URL que apunta a un programa que se activará en el server y se encargará de procesar los datos que llene el usuario. Este URL se llama action del form 214 Mecanismo básico de interacción tiers I - III (2) El usuario llena el formulario, y luego presiona el botón de submit, también incluído dentro del formulario. Puede validarse el input localmente mediante client-side javascript El browser origina una conexión http dirigida al action URL del form y transfiere la información ingresada por el usuario a través de la conexión http. El programa, en el server, recibe esa información en su standard input. Luego de efectuar su proceso, el programa en el server genera un texto html, que transmite al cliente a través de la conexión http aún abierta. El cliente hace el rendering del texto html recibido, y lo presenta en la pantalla. 215

14 http cgi: Querystring CGI/1.0 test script report: argc is 0. argv is. SERVER_SOFTWARE = Apache/ (Unix) PHP/ SERVER_NAME = satie GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT = 80 REQUEST_METHOD = GET HTTP_ACCEPT = image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */* PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/test-cgi QUERY_STRING = Fname=Mary&Lname=Poppins&DOB_M=9&DOB_D=2& DOB_Y=1957&Sex=F&ChartId=234561& Address=123+Cherry+Lane&Tel= & =mpoppins%40uyr.com.ar& SSN= &DiagCode=2 REMOTE_HOST = coconut.uyr.com.ar REMOTE_ADDR = REMOTE_USER = AUTH_TYPE = CONTENT_TYPE = CONTENT_LENGTH = 216 CGI Variables de entorno (parcial) DOCUMENT_ROOT="/home/httpd/html" GATEWAY_INTERFACE="CGI/1.1" HTTP_ACCEPT="image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*" HTTP_ACCEPT_CHARSET="iso ,*,utf-8" HTTP_ACCEPT_ENCODING="gzip" HTTP_ACCEPT_LANGUAGE="en" HTTP_CONNECTION="Keep-Alive" HTTP_HOST=" " HTTP_PRAGMA="no-cache" HTTP_USER_AGENT="Mozilla/4.75 [en] (WinNT; U)" PATH="/sbin:/usr/sbin:/bin:/usr/bin:/usr/X11R6/bin" QUERY_STRING="Fname=Mary&Lname=Poppins&DOB_M=9&DOB_D=2&DOB_Y=1957&Sex=F&ChartId=234561&Address=123+Cherry... REMOTE_ADDR=" " REMOTE_PORT="1058" REQUEST_METHOD="GET" REQUEST_URI="/cgi-bin/printenv" SCRIPT_FILENAME="/home/httpd/cgi-bin/printenv" SCRIPT_NAME="/cgi-bin/printenv" SERVER_ADDR=" " SERVER_ADMIN="root@satie" SERVER_NAME="satie" SERVER_PORT="80" SERVER_PROTOCOL="HTTP/1.0" SERVER_SIGNATURE="<ADDRESS>Apache/ Server at satie Port 80</ADDRESS>\n" SERVER_SOFTWARE="Apache/ (Unix) PHP/3.0.15" UNIQUE_ID="Oqwm138AAAEAAAJRIwg" 217

15 Tier III ( alternativa A): Implementación con programas compilados En el server, existe un programa ejecutable precompilado(*) El web server (tier II) activa este programa, dejándole disponible información sobre la transacción http corriente. Esta información se puede leer en variables de entorno y en el standard input. La API estandard se llama CGI (common gateway interface) El programa produce su output en el standard output, que está redirigido al tier II. Éste lo copia al browser. Como el output del programa será interpretado por el browser, usualmente es HTML (o GIF, etc.). 218 Tier III ( alternativa A): Variantes Los programas pueden ser interpretados en vez de compilados (perl, server side javascript o vbscript) Los programas pueden ser semi-compilados ej. java bytecodes, que en consecuencia requieren una JVM (java virtual machine) en el server. Se los puede implementar como objetos linkeados directamente al server, cargados estática o dinámicamente (in-process execution: ej. IIE server extensions, Apache modules) 219

16 main(int argc, char *argv[]) { entry entries[max_entries]; register int x, m=0; int cl; Tier III en C printf("content-type: text/html%c%c",10,10); cl = atoi(getenv("content_length")); for(x=0;cl && (!feof(stdin));x++) { m = x; entries[x].val = fmakeword(stdin,'&',&cl); plustospace(entries[x].val); unescape_url(entries[x].val); entries[x].name = makeword(entries[x].val,'='); printf("<h1>query Results</H1>"); printf("you submitted the following name/value pairs:<p>%c",10); printf("<ul>%c",10); for(x=0; x <= m; x++) printf("<li> <code>%s = %s</code>%c",entries[x].name, entries[x].val,10); printf("</ul>%c",10); Tier III ev Java - Servlets Ver ejemplo de servlet 221

17 Tier III (Alternativa B): Implementación con Server-side embedded scripting En el server, existe un archivo que contiene texto HTML, más comandos embebidos (y convenientemente delimitados) para un intérprete local, que pre-procesa dicho archivo. El intérprete no se involucra con las secciones que no son de código (secciones con contenido estático), transmitiéndolas directamente al browser. Las secciones con comandos embebidos son ejecutadas por el intérprete, que genera material que completa el contenido estático. Ambos contenidos, el estático y el generado por el interprete constituyen el material que se transmite al browser. El intérprete puede también elegirse, por ejemplo en base a la terminación del nombre del archivo original 222 Tier III en PHP4 y ASP Ver ejemplos 223

18 EJEMPLO Página ASP   <% /* # Copyright 1999 U&R Consultores SRL, Buenos Aires, Argentina # Filename: Register.asp # Purpose: Get data for creating a new patient record, including user input validation # Date written: */ // Get diagnosis list ors = Server.CreateObject("ADODB.Recordset"); ors.activeconnection = oconn; ors.source = "SELECT * FROM diagnames WHERE Denom<>'Normal-Std' ORDER BY Description"; ors.cursortype = adopenstatic; // Open Recordset ors.open(); %> <SCRIPT LANGUAGE="JAVASCRIPT"> // NOTE: This is a **CLIENT** side script to be executed by the BROWSER function isaposnum(s) { return (parseint(s) > 0) function CheckIntRange(item, min, max) { var returnval = false if (!isaposnum(item.value)) alert("please enter a positive number between " + min + " and " + max) else if (parseint(item.value) < min) alert("please enter a " + item.name + " greater than " + min) else if (parseint(item.value) > max) alert("please enter a " + item.name + " less than " + max) else returnval = true return returnval function CheckFormFields() { R=true; if (document.ptdata.fname.value.length==0) { alert("patient's first name field cannot be empty"); R=false; else if (document.ptdata.lname.value.length==0) { alert("patient's last name field cannot be empty"); R=false; else if (document.ptdata.sex.value=="empty") { alert("sex field must be specified"); R=false; else R=CheckIntRange(document.PtData.DOB_Y, 1900, 2050); return(r); </SCRIPT> Enter new patient data:<p> <FORM NAME=PtData METHOD="GET" ACTION="/scripts/ptdata/restricted/Register2.asp" TARGET=_top > <TABLE> <TR><TD><B>First name (*): </B> </TD><TD><INPUT NAME="Fname" width=40 ></TD></TR> <TR><TD><B>Last name (*): </B></TD><TD><INPUT NAME="Lname" width=40 ></TD></TR> <TR><TD><B>DOB (*): </B></TD> <TD> <SELECT NAME="DOB_M"> <OPTION VALUE=1>January <OPTION VALUE=2>February <OPTION VALUE=3>March <OPTION VALUE=4>April 223b.1/2

19 <OPTION VALUE=5>May <OPTION VALUE=6>June <OPTION VALUE=7>July <OPTION VALUE=8>August <OPTION VALUE=9>September <OPTION VALUE=10>October <OPTION VALUE=11>November <OPTION VALUE=12>December </SELECT> (month) <SELECT NAME="DOB_D"> <% for (i=1; i<=31; i++) { Response.write("<OPTION VALUE="); Response.write(i); Response.write(">"); Response.write(i); %> </SELECT> (day) <INPUT NAME="DOB_Y" size=5 VALUE="1957" onchange="checkintrange(dob_y, 1900, 2050)"> (year: ) </TD> </TR> <TR><TD><B>Sex (*): </B></TD> <TD> <SELECT NAME="Sex"> <OPTION VALUE="empty" SELECTED>[specify] <OPTION VALUE="F">Female <OPTION VALUE="M">Male </SELECT> </TD> <TR> <TR><TD>Chart Id.: </TD><TD><INPUT NAME="ChartId" width=40 ></TD></TR> <TR><TD>Address: </TD><TD><INPUT NAME="Address" width=40 ></TD></TR> <TR><TD>Telephone: </TD><TD><INPUT NAME="Tel" width=40 ></TD></TR> <TR><TD> address: </TD><TD><INPUT NAME=" " width=40 ></TD></TR> <TR><TD>SSN: </TD><TD><INPUT NAME="SSN" width=40 VALUE=""></TD></TR> <TR><TD><B>Diagnosis(*):</B> </TD> <TD VALIGN=top> <SELECT NAME="DiagCode"> <% while ((!ors.eof)) { %> <OPTION VALUE= <% Response.Write(oRs("DiagCode")); Response.Write(" "); if (ors("denom")=="unknown") { Response.Write(" SELECTED ") %>><% = ors("description")%> <% ors.movenext(); %> </SELECT> </TD></TR> <TR><TD></TD><TD> <INPUT TYPE=BUTTON VALUE="Register this new patient" OnClick="if(CheckFormFields()) this.form.submit();"> </TD></TR> </TABLE> </FORM> Items marked "<B>(*)</B>" are required. Others are optional. <% ors.close(); %>  223b.2/2

20 Resumen: El www activo Funcionalidad provista en el browser HTML forms, animated gif, client pull: <HEAD><META HTTP-EQUIV="REFRESH" CONTENT="30"></HEAD> client-side scripting (javascript, vbscript) downloaded objects (java, activex) plugins Funcionalidad provista en el server cgi executables in-process execution (NS-API, IS-API, Apache-API) java servlets Embedded scripting (PHP, JSP, ASP PERLSCRIPT) server-side scripting (server-side javascript, VB, PERL) 224 Ampliación: Objetos transferidos al browser Java Applets, ActiveX controls En una página HTML se indica el URL donde está ubicada la imagen binaria del objeto, similarmente a como se indica una referencia a una imagen El browser obtiene esa imagen binaria mediante una transacción http normal El browser ejecuta el código (previamente puede postcompilarlo: JIT) Java es independiente de la plataforma, activex es sólo para x86 Modelos de seguridad diferentes: sandbox binarios firmados digitalmente 225