WWW Material cedido pelo Prof. Edgard Jamhour. Programa Tecnologias Web CGI para Banco de Dados JavaScript JAVA ASP

WWW

Material cedido pelo Prof. Edgard Jamhour

Programa

• Tecnologias Web

• CGI para Banco de Dados

• JavaScript

• JAVA

• ASP

WWW

• Histórico:– Desenvolvido por Tim Berners-Lee no início dos anos 90.

• Objetivo: – Estabelecer um novo meio de comunicação mais ergonômico,

sem os delays inerentes aos sistemas até então existentes: e-mail, FTP ou FAX.

• Características:– Deveria permitir trocar informações de maneira transparente

para usuários trabalhando com plataformas (sistema operacional e hardware) diferentes.

• INFORMAÇÃO INDEPENDENTE DA PLATAFORMA

Definições

• WWW: – Sistema de hipermídia interativo

construído originalmente sobre a Internet.

– Numa intranet, o sistema WWW é instalado numa rede privada.

• Hypermídia: – hipertexto, imagem, audio e vídeo.

Hipermídia

Documento 1

Link

Documento 2

Objeto

incorporadoObjeto

incorporado

Arquivo 3Arquivo 2

Arquivo 1

página HTML(texto)

página HTML(texto)

objeto binário

Tecnologias WWW

• WWW é o resultado da combinação de várias tecnologias:

• TCP/IP: infra-estrutura de rede• Arquitetura cliente/servidor: estratégia para

implementação dos serviços• HTTP: Protocolo de aplicação• MIME: padrão de codificação dos dados

– Multipurpose Internet Mail Extensions

• HTML: padrão de apresentação dos dados– Hypertext Markup Language

Tecnologias WWW

Cliente

Servidor Dados armazenados

Programa cliente WWW

(navegador)r

Cliente

Programa cliente WWW

(navegador)

Programa servidor

HTTP

Internet ou Intranet (REDE TCP/IP)

PROTOCOLO DE APLICAÇÂO

PADRONIZADO (HTTP)

PERMANENTEMENTE ATIVO.

HTML HTML HTML HTML

80

80

HTML HTML HTML OUTROS OBJETOS

MIME

Infra-estrutura de Comunicação

Servidor Web

Informação e Dados Disponibilizados

REDE PÚBLICA

INTERNET

PROVEDORPROVEDOR

PROVEDORPROVEDOR

PROVEDORPROVEDOR

Clientes

Internet, Intranet ou Extranet?

InternetInternetIntranetIntranet

WWWWWWee

TCP/IPTCP/IP

ExtranetExtranet

LANLAN

WANWANPúblicaPública

WAN WAN PrivadaPrivada

Extranets

REDE AREDE AREDE BREDE B

EMPRESA FILIAL

• Canal de comunicação criptografado

• Tecnologia baseada em chaves

Aplicações

• Publicação de Informações– Estáticas– Dinâmicas: Integração com Banco de Dados

• Groupware– Correio Eletrônico, Videoconferência, Chat– Automação de Processos (Workflow)

• Transações Financeiras– Bancárias– Comerciais

Por que WWW?

• Software do cliente gratuito.• Fácil implantação e atualização.• Tecnologia evolutiva, baseada em

objetos incorporados.• A tecnologia é “quase padronizada” e

“quase não-proprietária”.• A mesma informação pode ser

disponibilizada no meio interno e externo.

• Infra-estrutura de comunicação gratuita, de alcance global.

CUSTO

TECNOLOGIA

INTEGRAÇÃO

Internet e Negócios ?

InternetInternet

NegóciosNegóciosnão gerenciada

ineficiente

desprotegida

segurança

eficiência

gerenciamentorigoroso

Desafios da Intranet

Páginas EstáticasPáginas Estáticas Páginas DinâmicasPáginas Dinâmicas

ExecutamExecutamProcessamentoProcessamento

Interagem com Interagem com Banco de DadosBanco de Dados

Informação Informação gráfica ou textual gráfica ou textual sem necessidade sem necessidade de programaçãode programação

funcionáriofuncionárioqualquerqualquer

funcionáriofuncionárioespecializadoespecializado

Integração com a base existente

Servidor Web

mainframe

legacy system

Bases de sistemas de ERP

Base de documentos não estruturados

Acesso via WWW

Páginas HTML

Navegador(cliente universal)

Migração de Aplicativos e Sistemas

anos 70

anos 80

anos 90

MainFrameMainFrameaplicações + dadosaplicações + dados

Cliente - ServidorCliente - Servidoraplicações e dados aplicações e dados

separadosseparados

IntranetIntranetinterfaces homogêneas e interfaces homogêneas e

Integração de RedesIntegração de Redes

DownSizing

Browsers + Objetos

Interface Universal

• WWW: Interface Universal para Dados e Aplicações

InformaçõesInformações AplicaçõesAplicações

WWWWWW

Padrões

• Padrões associados ao sistema WWW:

• HTTP: – HyperText Transfer Protocol– Protocolo de Comunicação

• HTML: – Hypertext Markup Language– Linguagem definida de acordo com SGML

HTML

• HTML: Hypertext Markup Language– Linguagem criada em 1990 de acordo com a especificação SGML

– Basea-se em 2 princípios fundamentais:

• A) Descriptive Markup– As partes de um documento HTML são marcadas com nomes

descritivos como <CHAPTER> ou <TITLE>.

– Exemplo: • <TITLE> Especialização </TITLE>• <BODY> Conteúdo do documento </BODY>

• B) Hypertexto– Define links entre elementos de documentos

– Link = relacionamento entre 2 elementos:• SITUADOS NO MESMO DOCUMENTO• SITUADOS EM DOCUMENTOS DIFERENTES

Exemplo de página HTML

<HTML>

<HEAD>

<TITLE> TITULO QUE APARECE NO BARRA SUPERIOR DA JANELA </TITLE>

</HEAD>

<BODY>

<P> Texto Normal

<P> <B> Texto em Negrito </B>

<P> <A HREF=“http://www.pucpr.br”> link para outra página </A>

<P> <IMG SRC="mail.gif" HEIGHT=20 WIDTH=20> inserção de figura

</BODY>

</HTML>

• Em HTML toda a informação é transmitida na forma de texto. Objetos gráficos e multimídia podem ser chamados partir da página HTML.

Tranferência de Documentos Hipertexto

INTRODUÇÃO

bláblábláblábláblábláblábláblábláblá......capítulo1capítulo2......observação.......bláblábláblábláblá......OBSERVAÇÃObláblábláblábláblá

página 1

página 2

página 3

página 4

CAPÍTULO 1

bláblábláblábláblá...seção1

CAPÍTULO 2

bláblábláblábláblá...

SEÇÃO 1

bláblábláblábláblá...

solicita página

recebe página

servidor

hiperlinkparamesmapágina

hiperlink paraoutra página

sistema dearquivos

TAGS de Controle

• Corpo do documento<BODY TEXT="#000000" BGCOLOR="#C0C0C0"

LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000” BACKGROUND="Backpuc.jpg">

</BODY>

• Nenhum texto pode ser escrito fora dos tags <BODY> ... </BODY>.

• BGCOLOR = "cor"

• A cor de fundo do documento

• BACKGROUND = "URL"

• A URL de uma imagem para ser usada no lugar do BGCOLOR.

• TEXT, LINK, VLINK, ALINK = "cor"

• As cores do texto regular, links, links visitados e links ativos (correntemente selecionados).

Tags de Hipertexto

• Referências– 2 tipos: internas (âncoras) e externas

<BODY><P><A HREF="Indice.htm">Referencia a um outro documento</A>

<P><A HREF="#Parte1">Referencia ao mesmo documento</A>

<P><A NAME="Parte1"></A>Parte 1

</BODY>

<A>

Define uma âncora, um link ou uma declaração de ancora.

HREF = "URI"

TARGET = "frame1"

NAME = "nome de uma referência no texto (âncora)"

Tags de Texto<BODY>

<P>Texto Simples

<P><B>Texto em Negrito</B>

<P><B><I>Texto em Negrito e Italico</I></B>

<P><B><I><FONT COLOR="#0000FF"><FONT SIZE=+1>

Texto com Tamanho e cor diferentes

</FONT></FONT></I></B>

<P>Texto que <BR> continua em outra linha.

<P><CENTER>Texto Centralizado</CENTER>

<P><HR WIDTH="100%">Linha Horizontal

<P><H1> Titulo em Nivel 1

<P><H2> Titulo em Nivel 2, menor do que Nivel1

</BODY>

Tags de Listas<BODY>

<OL>

<LI>Item 1</LI>

<LI>Item 2</LI>

<LI>Item 3</LI>

</OL>

<UL>

<LI>Item 1</LI>

<LI>Item 2</LI>

<LI>Item 3</LI>

</UL>

</BODY>

Tags para Formulários<FORM ACTION = meucgi>

<P><TEXTAREA ROWS="10" COLS="20">

Texto inicial da caixa de edicao

</TEXTAREA></P>

<P> <INPUT TYPE="checkbox" NAME = "check1" CHECKED> Texto ao lado da Checkbox

<P> <INPUT TYPE="button" VALUE = "Meu Botao"> Texto do Botao

<P> <INPUT VALUE = "Edit Box">

</FORM>

Tags para Formulário

<FORM ACTION = meucgi2>

<SELECT SIZE="6">

<P> <OPTION> Primeiro

<P> <OPTION> Segundo

<P> <OPTION> Terceiro

<P> <OPTION> Quarto

<P> <OPTION> Quinto

<P> <OPTION SELECTED> Sexto

</SELECT>

</FORM>

Tags para Tabelas<TABLE BORDER=1 >

<TR>

<TD>linha1/coluna1</TD> <TD>linha1/coluna2</TD>

</TR>

<TR>

<TD> linha2/coluna1</TD> <TD> linha1/coluna2 </TD>

</TR>

<TR>

<TD> linha3/coluna1</TD> <TD> linha3/coluna2 </TD>

</TR>

<CAPTION ALIGN=BOTTOM>Minha Tabela </CAPTION>

</TABLE>

Tags para Mapas

<IMG SRC="barra.gif" usemap="#barra">

<MAP name="barra">

<AREA shape="rect" coords="18,4,62,44” href=”pagina1.htm">

<AREA shape="rect" coords="36,20,36,20" href=" pagina2.htm">





<AREA shape="default" nohref>

</MAP>

Tags para Frames

<HTML>

<FRAMESET COLS = "30%,20%,*" ROWS = "3*,*">

<FRAME SRC =”Pagina1.htm" NAME = "Frame1">

<FRAME SRC ="Pagina2.htm" NAME = "Frame2">





</FRAMESET>

</HTML>

Tags para Frames

• IMPORTANTE: Os links devem especificar os frames onde as páginas serão mostradas:

<A HREF=”pagina.htm" TARGET="Frame1"> coloca a pagina no Frame1

<A HREF=”pagina.htm" TARGET="Frame2"> coloca a pagina no Frame2

• Targets Especiais para especificar onde os documentos ligados serão apresentados:– TARGET = “_self” (mesmo documento da âncora)– TARGET = “_top” (janela inteira)

HTTP - HyperText Transfer Protocol

• Protocolo de aplicação da arquitetura TCP/IP usado para estabelecer a comunicação entre clientes e servidores no ambiente WWW.

requisita arquivo

recebe arquivocodificado em MIME

servidorsistema dearquivos

HTTP/1.0MIME-Version: 1.0Server: www.pucpr.brContent-Type: text/html<HTML><BODY>....</BODY></HTML>

GET teste.html

A formatação MIME inclui umcabeçalho que descreve o tipode conteúdo do documento. Nocaso de havem imagens ououtros arquivos não textoanexados, o cabeçalho MIMEdescreve também o padrão decondificação utilizado.

HyperText Transfer Protocol

• HTTP é um protocolo de rede construído para o WWW.

• protocolo orientado a objeto, sem estado (stateless).– Objetos: Formatados em MIME

• página html: Tipo MIME = text/html• arquivo texto = text/plain• arquivo de imagem = image/gif, image/jpg, etc.• arquivo de som = audio/wav, audio/x-mpeg, etc.

HTTP: Funcionamento

• HTTP é um protocolo sem estado (stateless)– O servidor não guarda o estado do último cliente-servidor.– O cliente não guarda o estado do andamento da transação com o

servidor.

1

2

3

4

conexão

desconexão

requisição

resposta

STATELESS X STATEFULL

STATELESS STATEFULL

Dados relativos a cada usuário, armazenados no servidor enquanto durar a conexão.

•GRANDE NÚMERO DE USUÁRIO•TEMPO DE RESPOSTA LONGO

•PEQUENO NÚMERO DE USUÁRIO•PEQUENO TEMPO DE RESPOSTA

HTTP: Identificação de recursos

servidor

sistema dearquivos

PORTA 80

teste.html

http://www.pucpr.br/teste.html

Isso implica que uma conexãoTCP deve ser feita na porta 80,usando o protocolo HTTP.

domínio

Idenfica o recursodesejado .

recurso solicitado

www.pucpr.br

Formato Geral da URL

host

protocolo://host.domínio/arquivo.html

Exemplo de URL

URL e Sites

www.pucpr.br

site do ppgia site do ccet

home page

página HTML

página HTML

página HTML

página HTML

home page

página HTML

página HTML

página HTML

página HTML

Servidor

www.ppgia.pucpr.br

www.pucpr.br/ccet/arquivo.html.

Sistema de Arquivos

index.htm ou default.html

Arquitetura Cliente-Servidor• Inicialmente, a arquitetura WWW previa uma arquitetura cliente-

servidor pura.– todo processamento feito no servidor

• Extensões recentes incluíram também capacidade de processamento nos clientes.

requisição

resposta

(HTML-estático)Java

JavaScriptVBScriptActiveXPlugins

CGISoluções Proprietárias

Common Gateway Interface

• Forma não proprietária para construir páginas WWW dinâmicas.• CGI não é uma linguagem de programação.

– CGI: Gateway entre WWW e outras aplicações.

• CGI é uma interface que permite executar programas e aplicações externas sob o controle de um servidor HTTP.

Mensagem MIME e cabeçalho HTTP

Requisição HTTP Dados do Cliente

Resposta não WWW

Servidor

WWWWWW

APLICAÇÃOAPLICAÇÃO

Seqüência de Eventos da Chamada CGI

Abraão 30 anosJosé 40 anosPaulo 23 anosCarlos 50 anos...........

servidor

sistema dearquivos

banco com os dados detodos os funcionários deuma empresa.

aplicaçãoexterna

programaservidorWWW

consulta

Idade minima:

Selecione o Departamento:

anos30

InformaticaProducaoMarketingContabilidade

IIncluir funcionários em regime temporário:

SUBMIT Pressione para consultar

Formulario de Consulta

Idade=30&Depto=Producao&Temporario=SIM

5

1

2

3

4

7 6

Tipos de Banco de Dados

• Cliente-Servidor:– As requisições são

processadas sempre no servidor.

– Apenas a resposta é enviada ao cliente.

• Banco de Dados em Arquivo:– As requisições são sempre

processadas no cliente.

– Todos os dados das tabelas são enviados ao cliente para processamento local.

cliente servidorservidor

clientetabelas

tabelas

Banco de Dados em Ambiente WWW

• As consultas são sempre processadas no servidor.

clientecliente ServidorServidorWWWWWW

clienteclientetabelastabelas

tabelastabelas

Servidor de Servidor de Banco de Banco de

DadosDados

ServidorServidorWWWWWW

CGICGI

CGICGI

Limitações do Esquema CGI + Scripts + Forms

• A entrada de dados nos formulários é necessariamente orientada a caracteres.– Não é possível inserir informações gráficas ou som nos

campos de um formulário HTML.

• O Modelo computacional associado ao CGI é do tipo “batch”, toda a entrada de dados é processada no servidor em bloco.– As respostas do servidor sempre geram a resposta na

forma de uma nova página HTML.

• É centralizado, pois o todo o processamento dos forms de todos os clientes é realizado no servidor.

Extensões da Tecnologia WWW

HTML

HTTPCGI

JAVASCRIPT

APPLETSem JAVA

PLUG-INS

Estrutura básicado ambienteWWW.

ASP

Extensões.

SERVLETSem JAVA

ACTIVEX

JavaScript• Conceito: Linguagem interpretada pelo navegador, incorporada na

forma de texto ao código fonte das páginas HTML, destinada a adicionar capacidade de processamento no lado do cliente.

<HTML>

<HEAD> <SCRIPT LANGUAGE="JavaScript"> function calculo(form) { form.meses.value = eval(form.anos.value*12); } </SCRIPT></HEAD>

<BODY> <FORM>

<P>Idade em Anos: <INPUT TYPE="text" NAME="anos" SIZE=15></P>

<P><INPUT TYPE="button" VALUE="CALCULAR"onClick="calculo(this.form)">

<P>Idade em Meses:<INPUT TYPE = "text" NAME="meses" SIZE=15></P>

</FORM></BODY></HTML>

Como o documento aparecepara o usuário

Idade em anos:

CALCULAR

iidade em meses:

Formulario de Consulta

Quando o usuário pressiona obotão calcular, o programaJavaScript efetua um cálculo eatualiza o campo "idade emmeses".

1

2

Paradigma e Tecnologia de Java• A linguagem Java está sendo desenvolvida em torno de 2 conceitos principais:

– A) O Modelo de Objetos– B) Portabilidade: Linguagem PSEUDO - INTERPRETADA = BYTECODE

• JAVA pode ser utilizada em 2 contextos:– Linguagem de programação de propósito geral.– Linguagem de programação para WEB.

Fonte

ByteCode

Fonte Fonte

Interpretador

Executável

Interpretador

ExecutávelExecutável

DESENVOLVEDOR

USUÁRIO

compilado interpretado bytecode

Internet com Java• OBJETIVO:

– Disponibilizar qualquer tipo de aplicação sem precisar instalar nenhum tipo de software no cliente.

• CUSTO DE DEPLOYEMENT = ZERO

• CUSTO DE ATUALIZAÇÃO = ZERO

RISC com UNIX

WINDOWS com INTEL

aplicaçõesPrograma a ser instalado

Applets e Servlets

• Applets e Servlets são denominações dadas a programas escritos em java para Internet.

• Applets: aplicações para clientes– pequenas aplicações embutidas no navegador web.– implementam uma interface gráfica com o usuário.

• Servlets: aplicações para servidores– aplicações sem interface gráfica, executadas no

servidor.– funcionam de maneira similar ao CGI, mas

possuem um conjunto amplo de APIs que facilitam o desenvolvimento de novas aplicações.

<HTML>

<BODY>

<P>Exemplo de página HTML com applet<P>

<APPLET CODE=saldo.class WIDTH=420HEIGHT=240 ></APPLET>

</BODY>

</HTML>

Saldo Atual:

Valor da Transação:

Débito

Exemplo de página HTMLcom applet

Crédito

www.pucpr.br

texto bytecode

formulário.html saldo.class

texto

bytecode

GET formulário.html

GET saldo.class

1

2

3

4

Instalação de applets

Restrições dos Applets

• O BROWSER IMPÕE AS SEGUINTES RESTRIÇÕES:

• O APPLET NÂO PODE:– ler ou gravar arquivos na máquina local.

– Disparar a execução de um programa ou carregar uma biblioteca a partir da máquina local.

– fazer conexões de rede, exceto com o host de onde vieram

– ler variáveis de ambiente

– alterar propriedades do sistema

• O APPLET PODE:– apresentar informações multimídia

– invocar métodos públicos de outros applets na mesma página HTML

– invocar páginas HTML para serem visualizadas.

Considerações sobre Restrições dos Applets

• Os applets só podem utilizar o próprio código Java e a API de Java que o visualizador provê.

• As restrições dos applets são relaxadas quando um applet é carregado do sistema local.

• Todo o código Java recebido a partir da rede passa por um processo de verificação do seu byte code. Efetua-se as seguintes verificações:– se o código é realmente da Máquina Virtual de Java– se não há conversão ilegal de tipos– se não há estouro da pilha de execução– se os registradores não são usados incorretamente

Utilizando Applets para Acessar Banco de dados

• 1) Integração de applets e CGI• 2) Integração de applets com aplicações

externas via sockets ou RMI.• 3) JDBC

Problemas com o CGI

• O programa CGI precisa ser carregado do disco para memória antes de ser executado.

• Cada programa CGI é executado na memória como um processo independente. A execução de várias requisições simultâneas pode levar a uma saturação dos recursos do servidor.

Servidor WWWServidor WWW

AplicaçãoAplicação

requisiçãorequisição


requisiçãorequisição AplicaçãoAplicação

AplicaçãoAplicação

Extensões do Servidor• Grandes fabricantes (Microsoft, Netscape, Sun)

propuseram extensões do servidor Web capazes de manter o estado das aplicações.

CGICGI

Carga da Carga da aplicaçãoaplicação

ExecuçãoExecução

Descarga da Descarga da aplicaçãoaplicação


respostaresposta

Servidor com Servidor com ExtensãoExtensão

Carga da Carga da aplicaçãoaplicação

ExecuçãoExecução


respostaresposta

Apenas na primeira vez que o programa for chamado

Tecnologia ASP

• ASP: Active Server Pages• Tecnologia de desenvolvimento baseada em 2

fundamentos:– Componentes (Server Components, implementados

segundo a arquitetura COM/Microsoft)– Scripts de servidor, utilizados para manipular os

componentes.

• ASP é uma solução desenvolvida incialmente para o servidor IIS da Microsoft.

• Atualmente, a tecnologia ASP está sendo portada para diversos sistemas UNIX.

Documents

WWW Material cedido pelo Prof. Edgard Jamhour. Programa Tecnologias Web CGI para Banco de Dados JavaScript JAVA ASP