bases de dados ii - departamento de informática ...agomes/bd2/teoricas/07-internet.pdf · 6638...
Post on 21-Sep-2018
215 Views
Preview:
TRANSCRIPT
Bases de Dados II 6638: BSc in Information Systems and Technologies
Cap. 7 — Aplicações Web
INCOMPLETO
Aplicações Web6638 Bases de Dados II
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)
Aplicações Web6638 Bases de Dados II
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:webmaster@bookstore.com
Aplicações Web6638 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 Web6638 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 Web6638 Bases de Dados II
Hypertext Transfer Protocol (HTTP) (cont.)
• Client to Server:
GET index.html HTTP/1.1User-agent: Mozilla/4.0
Accept: text/html, image/gif, image/jpeg
• Server replies:
HTTP/1.1 200 OKDate: Mon, 04 Mar 2002 12:00:00 GMTServer: Apache/1.3.0 (Linux)Last-Modified: Mon, 01 Mar 2002 09:23:24
GMTContent-Length: 1024Content-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>...
Aplicações Web6638 Bases de Dados II
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.1User-agent: Mozilla/4.0
Accept: text/html, image/gif, image/jpeg
Aplicações Web6638 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.)
• Server replies:
HTTP/1.1 200 OKDate: Mon, 04 Mar 2002
12:00:00 GMTServer: Apache/1.3.0 (Linux)Last-Modified: Mon, 01 Mar
2002 09:23:24 GMTContent-Length: 1024Content-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>...
Aplicações Web6638 Bases de Dados II
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)
Aplicações Web6638 Bases de Dados II
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)
Aplicações Web6638 Bases de Dados II
Formatos de dados web
• HTML
– A linguagem de apresentação para a Internet
• XML
– Um modelo hierárquico auto-descritivo
• DTD
– Estandartização de esquemas para XML
• XSLT (não tratado no livro de referência)
Aplicações Web6638 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 Web6638 Bases de Dados II
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”)
Aplicações Web6638 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 Web6638 Bases de Dados II
XML: The Extensible Markup Language
• Language
– Uma forma de comunicar informação
• Markup
– 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 Web6638 Bases de Dados II
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
closing tag attribute
attribute value
Aplicações Web6638 Bases de Dados II
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
closing tag attribute
attribute value
Aplicações Web6638 Bases de Dados II
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
closing tag attribute
attribute value
Aplicações Web6638 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 Web6638 Bases de Dados II
XML: armazenamento
• Armazenamento é feito à semelhança duma árvore n-ária (DOM)
<root>
<tag1>
Some Text
<tag2> More</tag2>
</tag1>
</root>
Node
Node
Node
Node
Node Type: Text_Node Name: Text Value: More
Type: Text_Node Name: Text Value: Some Text
Type: Element_Node Name: Element Value: Root
Type: Element_Node Name: Element Value: tag1
Type: Element_Node Name: Element Value: tag2
Aplicações Web6638 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 Web6638 Bases de Dados II
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>
Aplicações Web6638 Bases de Dados II
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
<!ELEMENT Basket(Cherry+, (Apple | Orange)*) >
name
children
Aplicações Web6638 Bases de Dados II
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
<!ATTLIST Cherry flavor CDATA #REQUIRED>
<!ATTLIST Orange location CDATA #REQUIRED color ‘orange’>
element attribute type flag
Aplicações Web6638 Bases de Dados II
DTD bem-formado e válido
<?xml version='1.0'?>
<!ELEMENT Basket(Cherry+)>
<!ELEMENT Cherry EMPTY>
<!ATTLIST Cherry flavor CDATA #REQUIRED>
<Basket> <Cherry flavor=good> </Basket>
<Job> <Location>Home</Location></Job>
<Basket> <Cherry flavor=‘good’/> </Basket>
Not Well-Formed Well-Formed but Invalid
Well-Formed and Valid
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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)
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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
• Desvantagens:
– Hoje, os utilizadores esperam ter GUI (graphical user interfaces).
– Computação centralizada de tudo e todos é claramente excessivo para um sistema central
Cliente
Lógica da Aplicação
Arquitectura 1-tier
DBMS
Aplicações Web6638 Bases de Dados II
Arquitectura cliente-servidor
• 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
• 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
Arquitectura 2-tier(thin-client)
DBMS
Cliente ClienteCliente ...
Rede
Aplicações Web6638 Bases de Dados II
Arquitectura 3-tier
• 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
– Implementa lógica de negócio (implementa acções complexas, mantém estado entre diferentes passos dum workflow)
– Acede a diferentes sistemas de gestão de dados (DBMS)
• Tier de gestão de dados
– Um ou mais DBMS
Programa Cliente (Web Browser)
Servidor de Aplicações
Sistema de Gestão de Dados
Rede
Rede
Programa Cliente...
Aplicações Web6638 Bases de Dados II
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
– Info da companhia aérea, lugares disponíveis, info do cliente, etc.
• Servidor de Aplicações
– 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
Aplicações Web6638 Bases de Dados II
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
– Info do estudante, info do curso, info do instructor, disponibilidade de cursos, pré-requisitos, etc.
• Servidor de Aplicações
– 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
Aplicações Web6638 Bases de Dados II
Tecnologias usadas na arquitectura 3-tier
Programa Cliente(Web Browser)
Servidor de Aplicações(Tomcat, Apache)
Sistema de Base de Dados(DB2)
HTMLJavascriptXSLT
JSPServletsCookiesCGI
XMLStored Procedures
HTTP
JDBD, SQLJ
Aplicações Web6638 Bases de Dados II
Vantagens da arquitectura 3-tier
• Sistemas heterogéneos
– Tiers podem ser independentemente mantidas, modificadas e substituídas
• 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
– 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
Aplicações Web6638 Bases de Dados II
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)
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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>
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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>
Aplicações Web6638 Bases de Dados II
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.
Aplicações Web6638 Bases de Dados II
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;}
Aplicações Web6638 Bases de Dados II
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>
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 Bases de Dados II
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”>
Aplicações Web6638 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 Web6638 Bases de Dados II
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)
Aplicações Web6638 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 Web6638 Bases de Dados II
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
Aplicações Web6638 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 Web6638 Bases de Dados II
Servidores de aplicações
• Idea: Avoid the overhead of CGI
– Main pool of threads of processes
– Manage connections
– Enable access to heterogeneous data sources
– Other functionality such as APIs for session management
Application Server
Pool of Servelts
Web Browser Web Server
C++ Application
Java Beans
DBMS 2
DBMS 1
HTTP
Aplicações Web6638 Bases de Dados II
Servlets
• Java Servlets: código Java que corre na camada intermédia
– Independente da plataforma
– Java APIs completas, incluindo JDBC
• 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”);
} }
• 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
• service() calls doGet() for HTTP GET or doPost() for HTTP POST
• Usually, don’t override service(), but override doGet() and doPost()
Aplicações Web6638 Bases de Dados II
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);
}
}
Aplicações Web6638 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 Web6638 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 Web6638 Bases de Dados II
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
– Information is stored in a database, or in the application layer’s local memory
• Client-side state
– Information is stored on the client’s computer in the form of a cookie
• Hidden state
– Information is hidden within dynamically created web pages
Aplicações Web6638 Bases de Dados II
Estado do lado do servidor (server-side state)
• Many types of Server side state:
1. Store information in a database
• Data will be safe in the database
• BUT: requires a database access to query or update the information
2. 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
Aplicações Web6638 Bases de Dados II
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
Aplicações Web6638 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 Web6638 Bases de Dados II
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)
top related