www material cedido pelo prof. edgard jamhour. programa tecnologias web cgi para banco de dados...
Post on 17-Apr-2015
108 Views
Preview:
TRANSCRIPT
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="rect" coords="66,4,111,46" href=" pagina3.htm">
<AREA shape="rect" coords="45,23,45,23" href=" pagina4.htm">
<AREA shape="rect" coords="39,38,39,38" href=" pagina5.htm">
<AREA shape="rect" coords="20,26,20,26" href=" pagina6.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">
<FRAME SRC ="Pagina3.htm" NAME = "Frame3">
<FRAME SRC ="Pagina4.htm" NAME = "Frame4">
<FRAME SRC ="Pagina5.htm" NAME = "Frame5">
<FRAME SRC ="Pagina6.htm" NAME = "Frame6">
</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
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
requisiçãorequisição
respostaresposta
Servidor com Servidor com ExtensãoExtensão
Carga da Carga da aplicaçãoaplicação
ExecuçãoExecução
requisiçãorequisiçã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.
top related