bases de dados ii - departamento de informática ...agomes/bd2/teoricas/07-internet.pdf · 6638...

62
Bases de Dados II 6638: BSc in Information Systems and Technologies Cap. 7 — Aplicações Web INCOMPLETO

Upload: duongduong

Post on 21-Sep-2018

214 views

Category:

Documents


0 download

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:[email protected]

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)