INCOMPLETO Bases de Dados II 6638: BSc in Information Systems and Technologies Cap. 7 — Aplicações Web 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies) 6638 Bases de Dados II Aplicações Web Uniform Resource Identifiers (URIs) • Esquema uniforme de nomes (uniform naming schema) para identificar recursos na Internet • Um recurso pode qualquer coisa, nomeadamente: • – index.html – mysong.mp3 – picture.jpg Exemplos de URIs: – http://www.cs.wisc.edu/~dbbook/index.html – mailto:[email protected] 6638 Bases de Dados II A estrutura de URIs • Example: – • • http://www.cs.wisc.edu/~dbbook/index.html URI tem 3 partes: – Esquema de nomes (http) - Nome do protocolo para aceder ao recurso – Nome do computador hospedeiro (www.cs.wisc.edu) – Nome do recurso (~dbbook/index.html) URLs são um sub-conjunto de URIs Aplicações Web 6638 Bases de Dados II Hypertext Transfer Protocol (HTTP) • • O que é um protocolo de comunicação? – Conjunto de normas (standards) que define uma estrutura de mensagens – Exemplos: TCP, IP, HTTP O que acontece se se clicar em www.cs.wisc.edu/~dbbook/index.html? – Cliente (web browser) envia um pedido HTTP ao servidor – Servidor recebe o pedido e responde – Cliente recebe resposta; faz novos pedidos Aplicações Web 6638 Bases de Dados II Aplicações Web Hypertext Transfer Protocol (HTTP) (cont.) • Client to Server: GET index.html HTTP/1.1 User-agent: Mozilla/4.0 Accept: text/html, image/ gif, image/jpeg • Server replies: HTTP/1.1 200 OK Date: Mon, 04 Mar 2002 12:00:00 GMT Server: Apache/1.3.0 (Linux) Last-Modified: Mon, 01 Mar 2002 09:23:24 GMT Content-Length: 1024 Content-Type: text/html <HTML> <HEAD></HEAD> <BODY> <h1>Barns and Nobble Internet Bookstore</h1> Our inventory: <h3>Science</h3> <b>The Character of Physical Law</b> ... 6638 Bases de Dados II Aplicações Web Estrutura do protocolo HTTP: pedidos HTTP • Linha do pedido: GET index.html HTTP/1.1 – GET: campo de método http (possíveis valores são GET e POST; mais detalhes adiante) – index.html: campo URI – HTTP/1.1: campo da versão HTTP • Tipo de cliente: User-agent: Mozilla/4.0 • Que tipos de ficheiros são aceites pelo cliente: – Accept: text/html, image/gif, image/jpeg • Client to Server: GET index.html HTTP/1.1 User-agent: Mozilla/4.0 Accept: text/html, image/ gif, image/jpeg 6638 Bases de Dados II Estrutura do protocolo HTTP: respostas HTTP • Linha de estado: HTTP/1.1 200 OK • Versão HTTP: HTTP/1.1 • Código de estado: 200 • Mensagem do servidor: OK • Código de estado comum/combinações de mensagens do servidor: • – 200 OK: Request succeeded – 400 Bad Request: Request could not be fulfilled by the server – 404 Not Found: Requested object does not exist on the server – 505 HTTP Version not Supported Data de criação do objecto: – Last-Modified: Mon, 01 Mar 2002 09:23:24 GMT • Nº de bytes a enviar: Content-Length: 1024 • Que tipo de objecto a enviar: Content-Type: text/html • Outra informação (i.e., tipo de servidor, etc.) Aplicações Web • Server replies: HTTP/1.1 200 OK Date: Mon, 04 Mar 2002 12:00:00 GMT Server: Apache/1.3.0 (Linux) Last-Modified: Mon, 01 Mar 2002 09:23:24 GMT Content-Length: 1024 Content-Type: text/html <HTML> <HEAD></HEAD> <BODY> <h1>Barns and Nobble Internet Bookstore</h1> Our inventory: <h3>Science</h3> <b>The Character of Physical Law</b> ... 6638 Bases de Dados II Aplicações Web Algumas notas sobre HTTP • HTTP não tem estado – Não tem sessões – Toda a mensagem é completamente auto-contida – Nenhuma interacção é “lembrada” pelo protocolo – Compromisso entre facilidade de implementação e facilidade de desenvolvimento da aplicação: • • Outra funcionalidade tem de ser construída sobre o protocolo HTTP Implicações para as aplicações: – Qualquer informação de estado (cartões de compras, informação de login de utilizador) precisa de ser codificada em qualquer pedido e resposta HTTP! – Métodos populares para manter o estado: • Cookies (veja-se mais adiante) • URLs únicos gerados dinamicamente ao nível do servidor (veja-se mais adiante) 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies) 6638 Bases de Dados II Formatos de dados web • HTML – • XML – • Um modelo hierárquico auto-descritivo DTD – • A linguagem de apresentação para a Internet Estandartização de esquemas para XML XSLT (não tratado no livro de referência) Aplicações Web 6638 Bases de Dados II Exemplo em HTML <HTML> <HEAD></HEAD> <BODY> <h1>Barns and Nobble Internet Bookstore</h1> Our inventory: <h3>Science</h3> <b>The Character of Physical Law</b> <UL> <LI>Author: Richard Feynman</LI> <LI>Published 1980</LI> <LI>Hardcover</LI> </UL> <h3>Fiction</h3> <b>Waiting for the Mahatma</b> <UL> <LI>Author: R.Narayan</LI> <LI>Published 1981</LI> </UL> <b>The English Teacher</b> <UL> <LI>Author: R.K. Narayan</LI> <LI>Published 1980</LI> <LI>Paperback</LI> </UL> </BODY> </HTML> Aplicações Web 6638 Bases de Dados II Aplicações Web HTML: uma breve introdução • HTML é uma linguagem de marcação (markup language) • Comandos são tags: <tag inicial> ... <tag final> – • • Exemplos: • <HTML> ...</HTML> • <UL> ...</UL> Alguns comandos: – <HTML>: – <UL>: unordered list – <LI>: list entry – <h1>: largest heading – <h2>: second-level heading, <h3>, <h4> analogous – <B>Title</B>: Bold Muitos editores geram automática e directamente HTML a partir dum documento aberto (e.g., Microsoft Word tem uma opção “Save as html”) 6638 Bases de Dados II Exemplo em XML <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <BOOKLIST> <BOOK genre="Science" format="Hardcover"> <AUTHOR> <FIRSTNAME>Richard</FIRSTNAME> <LASTNAME>Feynman</LASTNAME> </AUTHOR> <TITLE>The Character of Physical Law</TITLE> <PUBLISHED>1980</PUBLISHED> </BOOK> <BOOK genre="Fiction"> <AUTHOR> <FIRSTNAME>R.K.</FIRSTNAME> <LASTNAME>Narayan</LASTNAME> </AUTHOR> <TITLE>Waiting for the Mahatma</TITLE> <PUBLISHED>1981</PUBLISHED> </BOOK> <BOOK genre="Fiction"> <AUTHOR> <FIRSTNAME>R.K.</FIRSTNAME> <LASTNAME>Narayan</LASTNAME> </AUTHOR> <TITLE>The English Teacher</TITLE> <PUBLISHED>1980</PUBLISHED> </BOOK> </BOOKLIST> Aplicações Web 6638 Bases de Dados II XML: The Extensible Markup Language • Language – • Markup – • Uma forma de comunicar informação Notas ou meta-dados que descrevem os nossos dados ou linguagem Extensible – Capacidade sem restrições de definir novas linguagens ou conjuntos de dados Aplicações Web 6638 Bases de Dados II Aplicações Web XML: elementos • XML é sensível às letras minúsculas e maísculas, assim como aos espaços • As tags de abertura e de fecho são obrigatoriamente idênticas • – Tags de abertura: “<“+ element name + “>” – Tags de fecho: “</”+ element name + “>” Elementos vazios não têm dados nem tag de fecho: – Começam com “<“ e terminam com “/>” • Exemplo: <BOOK/> <BOOK genre="Science" format="Hardcover">...</BOOK> open tag element name attribute attribute value closing tag 6638 Bases de Dados II Aplicações Web XML: atributos • Atributos fornecem informação adicional aos elementos tag. • Podem existir zero ou mais atributos em qualquer elemento; cada atributo tem a seguinte forma: attribute_name=‘attribute_value’ • – Não existe qualquer espaço entre o nome e o símbolo “=“ – Valores dos atributos têm de ser delimitados pelos caracteres “ ou ‘ Os atributos separam-se com espaço em branco (um ou mais espaços ou tabs). <BOOK genre="Science" format="Hardcover">...</BOOK> open tag element name attribute attribute value closing tag 6638 Bases de Dados II Aplicações Web XML: dados e comentários • Um dado XML é qualquer informação entre uma tag de abertura e outra de fecho • Um dado XML não pode incluir os caracteres ‘<‘ e ‘>’ • Comentários: <!-comment -> <BOOK genre="Science" format="Hardcover">...</BOOK> open tag element name attribute attribute value closing tag 6638 Bases de Dados II XML: aninhamento e hierarquia • As tags XML podem ser aninhadas numa hierarquia em árvore • Os documentos XML podem ter uma só tag raiz • Entre a tag de abertura e a de fecho podemos inserir: 1. Dados 2. Mais elementos 3. Uma combinação de dados e elementos <root> <tag1> Some Text <tag2> More</tag2> </tag1> </root> Aplicações Web 6638 Bases de Dados II Aplicações Web XML: armazenamento • Type: Element_Node Name: Element Value: Root Armazenamento é feito à semelhança duma árvore n-ária (DOM) Node <root> <tag1> Some Text Type: Element_Node Name: Element Value: tag1 <tag2> More</tag2> </tag1> </root> Node Node Type: Element_Node Name: Element Value: tag2 Node Type: Text_Node Name: Text Value: Some Text Node Type: Text_Node Name: Text Value: More 6638 Bases de Dados II DTD - Document Type Definition • A DTD is a schema for XML data • XML protocols and languages can be standardized with DTD files • A DTD says what elements and attributes are required or optional – Defines the formal structure of the language Aplicações Web 6638 Bases de Dados II Aplicações Web Exemplo em DTD <?xml version='1.0'?> <!ELEMENT Basket(Cherry+, (Apple | Orange)*) > ELEMENT Cherry EMPTY> <! <!ATTLIST Cherry flavor CDATA #REQUIRED> <!ELEMENT Apple EMPTY> <!ATTLIST Apple color CDATA #REQUIRED> <!ELEMENT Orange EMPTY> <!ATTLIST Orange location “Florida”> <Basket> <Apple/> <Cherry flavor=‘good’/> <Orange/> </Basket> <Basket> <Cherry flavor=‘good’/> <Apple color=‘red’/> <Apple color=‘green’/> </Basket> 6638 Bases de Dados II Aplicações Web DTD - !ELEMENT • !ELEMENT declara um nome dum elemento e que elementos subsidiários deve ter • Tipos de conteúdo: – Outros elementos – #PCDATA (parsed character data) – EMPTY (nenhum conteúdo) – ANY (no checking inside this structure) – Uma expressão regular name <!ELEMENT Basket(Cherry+, (Apple | Orange)*) > children 6638 Bases de Dados II Aplicações Web DTD - !ATTLIST • !ATTLIST define uma lista de atributos de um elemento • Atributos podem ser de diferentes tipos, podem ser exigidos ou não, e podem ter valores por omissão element attribute type flag <!ATTLIST Cherry flavor CDATA #REQUIRED> <!ATTLIST Orange location CDATA #REQUIRED color ‘orange’> 6638 Bases de Dados II Aplicações Web DTD bem-formado e válido <?xml version='1.0'?> <!ELEMENT Basket(Cherry+)> <!ELEMENT Cherry EMPTY> <!ATTLIST Cherry flavor CDATA #REQUIRED> Not Well-Formed Well-Formed but Invalid <Basket> <Cherry flavor=good> </Basket> <Job> <Location>Home</Location> </Job> Well-Formed and Valid <Basket> <Cherry flavor=‘good’/> </Basket> 6638 Bases de Dados II Aplicações Web XML e DTDs • Mais e mais DTDs estandatizados serão desenvolvidos – MathML – Chemical Markup Language • Permite a troca não-intensiva (light-weight) de dados com a mesma semântica • Linguagens sofisticadas de inquirições (query languages) para XML estão disponíveis: – Xquery – XPath 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies) 6638 Bases de Dados II Aplicações Web Componentes de aplicações Internet com grande intensidade de dados • • Três tipos separados de funcionalidades: – Gestão de dados – Lógica da aplicação – Apresentação A arquitectura do sistema determina se estas 3 componentes residem num só sistema (“tier”) ou se são distribuídos por várias tiers 6638 Bases de Dados II Aplicações Web Arquitectura 1-tier • Toda a funcionalidade é combinada numa só tier, normalmente num mainframe • O utilizador tem acesso através dum terminal • Vantagens: – • Fácil manutenção e administração Cliente Lógica da Aplicação Desvantagens: – Hoje, os utilizadores esperam ter GUI (graphical user interfaces). – Computação centralizada de tudo e todos é claramente excessivo para um sistema central DBMS Arquitectura 1-tier 6638 Bases de Dados II Aplicações Web Arquitectura cliente-servidor Cliente • • Cliente ... Divisão do trabalho: Thin client – Cliente só implementa a GUI – Servidor implementa a lógica do negócio e a gestão de dados Rede Divisão do trabalho: Thick client – Cliente implementa a GUI e a lógica do negócio – Servidor implementa a gestão de dados – Desvantagens de thick clients: • Inexistência duma central para actualizar a lógica de negócio • Problemas de segurança: servidor precisa de acreditar nos clientes • – – Autenticação e controlo de acesso têm de ser tratados no servidor Clientes têm de deixar a DB num estado consistente – Uma possibilidade: encapsular todos os acessos à DB em stored procedures A escalabilidade só está garantida até 100s clientes aprox. – Grande transferência de dados entre servidor e cliente – Mais do que 1 servidor cria problema: x clientes, y servidores: x*y conexões Lógica da Aplicação DBMS Arquitectura 2-tier (thin-client) Cliente 6638 Bases de Dados II Arquitectura 3-tier • • Programa Cliente (Web Browser) ... Programa Cliente Tier de apresentação – Interface primária com o utilizador – Necessita adaptação a diferentes dispositivos de display (PC, PDA, cell phone, voice access?) Tier intermédia – – • Aplicações Web Implementa lógica de negócio (implementa acções complexas, mantém estado entre diferentes passos dum workflow) Servidor de Aplicações Rede Acede a diferentes sistemas de gestão de dados (DBMS) Tier de gestão de dados – Rede Um ou mais DBMS Sistema de Gestão de Dados 6638 Bases de Dados II Aplicações Web Exemplo 1: Airline Reservations • Construir um sistema para fazer reservas de viagens de avião • O que é feito nas diferentes tiers? • Sistema de Gestão de Dados – • Servidor de Aplicações – • Info da companhia aérea, lugares disponíveis, info do cliente, etc. Lógica de fazer reservas, cancelar reservas, adicionar novas companhias aéreas, etc. Programa Cliente – Dá entrada a diferentes utilizadores, apresenta formulários e faz a saída de informação perceptível aos utilizadores 6638 Bases de Dados II Aplicações Web Exemplo 2: Matrícula em Cursos • Construir um sistema para permita fazer a matrícula de estudantes em cursos • O que é feito nas diferentes tiers? • Sistema de Gestão de Dados – • Servidor de Aplicações – • Info do estudante, info do curso, info do instructor, disponibilidade de cursos, pré-requisitos, etc. Lógica de adicionar um curso, eliminar um curso, criar um novo curso, etc. Programa Cliente – Dá entrada a diferentes utilizadores (estudantes, funcionários, docentes, etc), apresenta formulários e faz a saída de informação perceptível aos utilizadores 6638 Bases de Dados II Aplicações Web Tecnologias usadas na arquitectura 3-tier HTML Javascript XSLT Programa Cliente (Web Browser) HTTP JSP Servlets Cookies CGI XML Stored Procedures Servidor de Aplicações (Tomcat, Apache) JDBD, SQLJ Sistema de Base de Dados (DB2) 6638 Bases de Dados II Aplicações Web Vantagens da arquitectura 3-tier • Sistemas heterogéneos – • Thin clients – • • Camada de apresentação exclusiva dos clientes (web browsers) Integração no acesso aos dados – Vários sistemas de bases de dados podem ser manipulados na tier intermédia duma forma transparente – Gestão central das conexões Escalabilidade – • Tiers podem ser independentemente mantidas, modificadas e substituídas Replicação na tier intermédia permite escalabilidade da lógica de negócio Desenvolvimento de software – Código para a lógica de negócio é centralizado – Interacção entre tiers é feita através de APIs: podemos re-usar componentes estandartizados em cada tier 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies) 6638 Bases de Dados II Aplicações Web Sobrevisão da camada (tier) de apresentação • • Lembrete: Funcionalidade da camada de apresentação – Interface primária do utilizador – Precisa de se adaptar a diferentes dispositivos de visualização (PC, PDA, telemóvel, cell phone, acesso de voz?) – Funcionalidade simples, tais como a verificação da validade de campos Veremos: – Formulários HTML: como passar dados para a camada intermédia – JavaScript: funcionalidade simples na camada de apresentação – Folhas de estilo (style sheets): separação entre os dados e formatação 6638 Bases de Dados II Aplicações Web Formulários HTML • Meio comum de comunicar dados da camada do cliente para a camada intermédia • Formato geral dum formulário: <FORM ACTION=“page.jsp” METHOD=“GET” NAME=“LoginForm”> ... </FORM> • Componentes de uma HTML FORM tag: – ACTION: especifica URI que trata do conteúdo – METHOD: especifica o método GET ou POST do HTML – NAME: nome do formulário; pode ser usado em scripts do lado-do-cliente para fazer referência ao formulario 6638 Bases de Dados II Aplicações Web Por dentro dum formulário HTML • Etiqueta (tag) INPUT – – • Atributos: • TYPE: text (campo de entrada de texto), password (campo de entrada de texto), submit (onde está a entrada), reset (reinicia todos os campos de entrada) • NAME: nome simbólico; usado para identificar o valor do campo na camada intermédia • VALUE: valor por omissão Exemplo: <INPUT TYPE=“text” Name=“title”> Exemplo de formulário: <form method="POST" action="TableOfContents.jsp"> <input type="text" name="userid"> <input type="password" name="password"> <input type="submit" value="Login" name="submit"> <input type="reset" value="Clear"> </form> 6638 Bases de Dados II Aplicações Web Passagem de argumentos • Dois métodos: GET e POST – GET • Conteúdo do formulário enviado para o URI submetido • Estrutura: action?name1=value1&name2=value2&name3=value3 action: nome do URI especificado no formulário pares (nome,valor) vêm dos campos INPUT do formulário; campos vazios têm valores vazios (“name=“) Exemplo do formulário anterior (com password) : – – • TableOfContents.jsp?userid=john&password=johnpw • Note-se que a página designada pela action precisa de ser um programa, um “script”, ou uma página que processará a entrada do utilizador 6638 Bases de Dados II Aplicações Web HTTP GET: codificação dos campos dum formulário • Campos dum formulário podem conter caracteres ASCII que não podem aparecer num URI • Uma convenção especial converte tais valores (nos campos do formulário) em caracteres “URI-compatible”: – Converte todos os caracteres “especiais” em %xyz, onde xyz é o código ASCII do carácter. Caracteres especiais incluem &, =, +, %, etc. – Converte todos os espaços em branco no carácter “+” – Associa os pares (nome,valor) das etiquetas INPUT do formulário ao carácter “&” de molde a formar o URI 6638 Bases de Dados II Aplicações Web Formulários HTML: um exemplo completo <form method="POST" action="TableOfContents.jsp"> <table align = "center" border="0" width="300"> <tr> <td>Userid</td> <td><input type="text" name="userid" size="20"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" size="20"></td> </tr> <tr> <td align = "center"><input type="submit" value="Login” name="submit"></td> </tr> </table> </form> 6638 Bases de Dados II Aplicações Web Javascript • Objectivo: adicionar funcionalidades à camada de apresentação. • Exemplos no cliente: – Detectar tipo de browser e página específica do browser – Validação de formulários: validação dos campos de entrada de formulários – Controlo do browser: abrir novas janelas, fechar janelas existentes (exemplo: anúncios pop-up) • Usualmente embebido em HTML directament com a etiqueta <SCRIPT>...</SCRIPT>. • A etiqueta <SCRIPT> tem vários atributos: – LANGUAGE: especifica a linguagem de script (e.g. javascript) – SRC: ficheiro externo com código script – Exemplo: <SCRIPT LANGUAGE=“JavaScript” SRC=“validate.js”> </SCRIPT • Se a etiqueta <SCRIPT> não tem um atributo SRC, então o JavaScript está directamente dentro dum ficheiro HTML. 6638 Bases de Dados II Aplicações Web Javascript (cont.) • Exemplo: <SCRIPT LANGUAGE=“JavaScript”> <!--alert(“Welcome to our bookstore”) //--> </SCRIPT> • • Dois estilos de comentários diferentes – <!-- comentário HTML, desde que o código JavaScript seja ignorado pelo HTML processor – // comentário JavaScript por forma a terminar o comentário HTML JavaScript é uma linguagem de scripting completa – Variáveis – Atribuições (=, +=, ...) – Comparações (<,>,...), operadores booleanos (&&, ||, !) – Instruções: if, for, do-while, while – Funções com valores devolvidos • Cria funções usando a função keyword • f(arg1, ...,argk) {statements;} 6638 Bases de Dados II Aplicações Web JavaScript: um exemplo completo HTML Form: <form method="POST" action="TableOfContents.jsp"> <input type="text"name="userid"> <input type="password"name="password"> <input type="submit"value="Login" name="submit"> <input type= "reset" value="Clear"> </form> Associated JavaScript: <script language="javascript"> function testLoginEmpty() { loginForm= document.LoginForm if ((loginForm.userid.value == "") || (loginForm.password.value == "")) { alert('Please enter values for userid and password.'); return false; } else return true; } </script> 6638 Bases de Dados II Aplicações Web Folhas de estilos (style sheets) • Idea: Separate display from contents, and adapt display to different presentation formats • Two aspects: • • – Document transformations to decide what parts of the document to display in what order – Document rendering to decide how each part of the document is displayed Why use style sheets? – Reuse of the same document for different displays – Tailor display to user’s preferences – Reuse of the same document in different contexts Two style sheet languages – Cascading style sheets (CSS): For HTML documents – Extensible style sheet language (XSL): For XML documents 6638 Bases de Dados II Aplicações Web CSS: Cascading Style Sheets • Defines how to display HTML documents • Many HTML documents can refer to the same CSS – Can change format of a website by changing a single style sheet – Example: <LINK REL=“style sheet” TYPE=“text/ css” HREF=“books.css”/> • Each line consists of three parts: selector {property: value} – Selector: Tag whose format is defined – Property: Tag’s attribute whose value is set – Value: value of the attribute • Example style sheet: body {background-color: yellow} h1 {font-size: 36pt} h3 {color: blue} p {margin-left: 50px; color: red} • The first line has the same effect as: <body background-color=“yellow”> 6638 Bases de Dados II XSL • Language for expressing style sheets – • More at: http://www.w3.org/Style/XSL/ Three components – – – XSLT: XSL Transformation language • Can transform one document to another • More at http://www.w3.org/TR/xslt XPath: XML Path Language • Selects parts of an XML document • More at http://www.w3.org/TR/xpath XSL Formatting Objects • Formats the output of an XSL transformation • More at http://www.w3.org/TR/xsl/ Aplicações Web 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies) 6638 Bases de Dados II Sobrevisão da camada de apresentação • • Recall: Functionality of the middle tier – Encodes business logic – Connects to database system(s) – Accepts form input from the presentation tier – Generates output for the presentation tier We will cover – CGI: Protocol for passing arguments to programs running at the middle tier – Application servers: Runtime environment at the middle tier – Servlets: Java programs at the middle tier – Java Server Pages: Java scripts at the middle tier – Maintaining state: How to maintain state at the middle tier. Main focus: Cookies. Aplicações Web 6638 Bases de Dados II Aplicações Web CGI: Commom Gateway Interface • Goal: Transmit arguments from HTML forms to application programs running at the middle tier • Details of the actual CGI protocol unimportant as libraries implement high-level interfaces • Disadvantages: – The application program is invoked in a new process at every invocation (remedy:FastCGI) – No resource sharing between application programs (e.g., database connections) – Remedy: Application servers 6638 Bases de Dados II CGI: exemplo • HTML form: <form action=“findbooks.cgi” method=POST> Type an author name: <input type=“text” name=“authorName”> <input type=“submit” value=“Send it”> <input type=“reset” value=“Clear form”> </form> • Perl code: use CGI; $dataIn=new CGI; $dataIn->header(); $authorName=$dataIn->param(“authorName”); print(“<HTML><TITLE>Argument passing test</TITLE>”); print(“The author name is “+ $authorName); print(“</HTML>”); exit; Aplicações Web 6638 Bases de Dados II Aplicações Web Servidores de aplicações • Idea: Avoid the overhead of CGI Web Browser – Main pool of threads of processes – Manage connections – Enable access to heterogeneous data sources – Other functionality such as APIs for session management HTTP Web Server C++ Application Java Beans Application Server DBMS 1 Pool of Servelts DBMS 2 6638 Bases de Dados II Aplicações Web Servlets • • Java Servlets: código Java que corre na camada intermédia – Independente da plataforma – Java APIs completas, incluindo JDBC • Life of a servlet? – Web server forwards request to servlet container – Container creates servlet instance (calls init() method; deallocation time: calls destroy() method) – Container calls service() method Exemplo: import java.io.*; import java.servlet.*; import java.servlet.http.*; public classServetTemplate extends HttpServlet{ public void doGet( HTTPServletRequest request, HTTPServletResponse response ) throws SerletExpection, IOException{ PrintWriter out=response.getWriter(); out.println(“Hello World”); } } • service() calls doGet() for HTTP GET or doPost() for HTTP POST • Usually, don’t override service(), but override doGet() and doPost() 6638 Bases de Dados II Aplicações Web Servlets: exemplo completo public class ReadUserName extends HttpServlet{ public void doGet( HttpServletRequest request, HttpSevletResponse response) throws ServletException, IOException{ reponse.setContentType(“text/html”); PrintWriter out=response.getWriter(); out.println(“<HTML><BODY>\n <UL> \n”+ “<LI>”+ request.getParameter(“userid”) + “\n”+ “<LI>”+ request.getParameter(“password”) + “\n”+ “<UL>\n<BODY></HTML>”); } public void doPost( HttpServletRequest request, HttpSevletResponse response) throws ServletException, IOException{ doGet(request,response); } } 6638 Bases de Dados II JSP: Java Server Pages • • Servlets – Generate HTML by writing it to the “PrintWriter” object – Code first, webpage second Java Server Pages – Written in HTML, Servlet-like code embedded in the HTML – Webpage first, code second – They are usually compiled into aServlet Aplicações Web 6638 Bases de Dados II JSP: exemplo <html> <head><title>Welcome to B&N</title></head> <body> <h1>Welcome back!</h1> <% String name=“NewUser”; if (request.getParameter(“username”) != null) { name=request.getParameter(“username”); } %> You are logged on as user <%=name%> <p> </body> </html> Aplicações Web 6638 Bases de Dados II Aplicações Web Estado da aplicação • HTTP is stateless. – – • Advantages • Easy to use: don’t need anything • Great for static-information applications • Requires no extra memory space Disadvantages • No record of previous requests means – No shopping baskets – – No user logins No custom or dynamic content – Security is more difficult to implement Server-side state – • Client-side state – • Information is stored in a database, or in the application layer’s local memory Information is stored on the client’s computer in the form of a cookie Hidden state – Information is hidden within dynamically created web pages 6638 Bases de Dados II Aplicações Web Estado do lado do servidor (server-side state) • Many types of Server side state: 1. 2. Store information in a database • Data will be safe in the database • BUT: requires a database access to query or update the information Use application layer’s local memory • Can map the user’s IP address to some state • BUT: this information is volatile and takes up lots of server main memory 5 million IPs= 20 MB • Should use Server-side state maintenance for information that needs to persist – Old customer orders – “Click trails” of a user’s movement through a site – Permanent choices a user makes 6638 Bases de Dados II Aplicações Web Estado do lado do cliente: cookies • Storing text on the client which will be passed to the application with every HTTP request. – Can be disabled by the client. – Are wrongfully perceived as "dangerous", and therefore will scare away potential site visitors if asked to enable cookies1 • Are a collection of (Name, Value) pairs • Advantages • • – Easy to use in JavaServlets/ JSP – Provide a simple way to persist non-essential data on the client even when the browser has closed Disadvantages – Limit of 4 kilobytes of information – Users can (and often will) disable them Should use cookies to store interactive state – The current user’s login information – The current shopping basket – Any non-permanent choices the user has made 6638 Bases de Dados II Criação e acesso a cookies • Creating a cookie: Cookie myCookie= new Cookie("username", "jeffd"); response.addCookie(userCookie); • Acessing a cookie: Cookie[] cookies = request.getCookies(); String theUser; for(inti=0; i<cookies.length; i++) { Cookie cookie = cookies[i]; if(cookie.getName().equals("username")) theUser= cookie.getValue(); } // at this pointtheUser== "username" • Cookies need to be accessed BEFORE you set your response header: response.setContentType("text/html"); PrintWriter out = response.getWriter(); Aplicações Web 6638 Bases de Dados II Aplicações Web Sumário • Conceitos no âmbito da Internet • Formatos de dados web – HTML, XML, DTDs • Introdução a arquitecturas 3-tier • A tier (camada) da apresentação – • Formulários HTML; HTTP Get e HTTP Post, codificação URL; Javascript; Stylesheets; XSLT A tier intermédia – CGI, servidores de aplicações, Servlets, JavaServerPages, passagem de argumentos, manutenção de estado (cookies)
Download
