programação avançada para internet parte 1

Programação Avançada para Internet

Profº. Felipe A. [email protected]


OBJETIVO: Desenvolver aplicações voltadas para a Internet criando páginas web dinâmicas que acessam base de dados utilizando a tecnologia Servlets/JSP da linguagem de programação Java.



BIBLIOGRAFIA:Java, Servlets e JSP – Muhki, Sonal e Kotecha, Neha Makron BooksTODO, Nick; SKOLKOWSKI, Mark. Java Server Pages – O Guia do Desenvolvedor. Ed. Campus.

The Java Tutorials – Oracle SiteTOFFOLI, Giulio. The Definitive Guide to iReport. Ed. Apress.

Nota do professor:Google


Programação Avançada para Internet(PAVI – Curso de Férias 2015)

PARTE 1:Fundamentos da Arquitetura Web para JSP e Servlets


Objetivos

• Esta primeira parte fornece uma visão geral da plataforma Web– Arquitetura cliente-servidor– Protocolo de comunicação HTTP

• Descrever o funcionamento do HTTP e as principais tecnologias para Web development

• Apresenta as tecnologias de Java para a Web: servlets e JSP

• Define o ambiente de desenvolvimento: Tomcat

A Web como plataforma

• A Web é baseada no HTTP (RFC 2068)– Protocolo simples para transferência de

mensagens, arquivos, etc.– Stateless (não mantém sessão aberta)

Cliente

ServidorHTTP

Faz uma requisião:GET /index.html HTTP/1.1...

Abre uma conexão para www.abc.com:80

Envia uma resposta:HTTP/1.1 200 OK....

Fecha a conexãoIndex.html

Cliente e servidor HTTP

• Servidor HTTP– Gerência do sistema virtual de arquivos e diretórios

– Mapeamento de pastas do sistema de arquivos local (e.g., c:/htdocs) para diretórios virtuais (e.g., 127.0.0.1/) acessíveis remotamente (notação de URI)

• Atribuições do servidor HTTP– Interpretar requisições HTTP do cliente (e.g., métodos GET, POST)

– Devolver resposta HTTP para a saída padrão (e.g., código de resposta 200, 404, 403)

• Papel do cliente HTTP– Enviar requisições HTTP (GET, POST, HEAD) a um servidor

• Requisições contém a URI do recurso remoto, cabeçalhos RFC 822 e, opcionalmente, dados (se método o HTTP for POST)

– Processar repostas HTTP recebidas (interpretação de cabeçalhos, tipos de dados, e repassá-los

Principais métodos para HTTP request

• GET – é uma solicitação ao servidor HTTP de um arquivo (informando sua URI absoluta, relativa à raiz do servidor)GET <uri> <protocolo>/<versão><Cabeçalhos HTTP>: <valores> (RFC 822)<linha em branco>–GET pode submeter dados através da URI (tamanho limitado)

<uri>?dados–Método HEAD é semelhante ao GET mas o servidor não devolve a página, apenas o cabeçalho

• POST – submete dados ao servidor (como fluxo de bytes)POST <uri> <protocolo>/<versão><Cabeçalhos HTTP>: <valores><linha em branco><dados>

Cabeçalhos HTTP

• Na requisição (request), as informações seguem do cliente ao servidor– E.g., fabricante e nome do browser, data da cópia em cache, cookies

válidos para o domínio e caminho da URL da requisição, etc.host: www.google.com.brmethod: GETscheme: http

• Na resposta (response), as informações seguem do servidor para o cliente– E.g., tipo de dados dos conteúdos (e.g., text/xml, image/jpeg) e

tamanho, cookies para criar, endereço de redirecionamento.Content-type: text/html; charset-iso-8859-1Refresh: 15; url=/pages/index.htmlContent-length: 246

http://www.google.com.br/

Comunicação HTTP: detalhes

1. Cliente recebe uma página HTML<img src=“google.jpg” />

2. Request: Browser solicita uma imagemGET google.jpg HTTP/1.1User-Agent: Mozilla 7.0 [en] (Windows 95; I)Cookies: query=img; SessionID=D23612312345

3. Response: servidor envia cabeçalho e streamHTTP 1.1 200 OK

Server: Apache 1.32

Date: Friday, August 13, 2003 03:12:56 GMT-03

Content-type: image/jpg

Content-length: 23779

!#JPG89~¾ 7 .55.a 6¤Ü4 ...

Interpreta HTML

Gera GETrequest

Linha embrancofinaliza

cabeçalhos

google.jpg

SSL – Secure Sockets Layer

• É uma camada adicional na comunicação HTTP para introduzir criptografia

• Browser e servidor precisam suportar o padrão SSL para que a transação seja segura

• Porta default: 443

I

InternetCliente HTTP

Servidor HTTP

https:/ /dx.com/pay.asp

Página Segura

Esta página é segura. Digite sua senha e cartão de crédito:

2806 1989

2806 1989

Navegador SSL

~¾ 7 55.a

2806 1989

SSL

<h1>Página

segura...

<h1>Página

segura...

Æz+Ä~W6

®¾ $.8.x

Servidor HTTP

/pay.asp

Serviços Web: funções

• Serviço de informações– Finalidade: publicação de informações, multimídia– Interatividade: limitada a hipertexto– Tecnologias (estáticas): HTML, CSS

• Serviço de aplicações locais (client-side)– Finalidade: oferecer interatividade ao cliente– Interatividade: limitada pela aplicação cliente– Tecnologias (dinâmicas): JavaScript, applets Java, ActiveX

• Serviço de aplicações cliente-servidor– Finalidade: interface para aplicações no servidor– Interatividade: limitada pela aplicação e servidor Web– Tecnologias (dinâmicas): CGI, ASP, PHP, Servlets, JSP

Serviço de Informações: Tecnologias de Apresentação

• HTML 4.0 (HyperText Markup Language)– Coleção de marcadores usados para formatar texto:

<h2>Cabeçalho estilo h2</h2><p>Primeiro parágrafo</p>

– Nada diz sobre aparência (browser do cliente decide)

– Define apenas estrutura e conteúdo

– HTML 5? (Consulte o material no site da disciplina)



• CSS (Cascading Style Sheets)– Lista de regras de apresentação para página ou conjunto de páginas

(linguagem declarativa)

– Depende da estrutura do HTML, define formas, aparência

– CSS 3? (Consulte o material no site da disciplina

• ƒ Padrões W3C (http://www.w3.org)

HTML – HyperText Markup Language

• Utilizada para definir a interface do usuário Web• Pode ser usada na

– Especificação da estrutura do texto de uma página (que o browser posteriormente formatará com uma folha de estilos)

– Inclusão de imagens em uma página

– Inclusão de vínculos (links) para outras páginas

– Construção de uma interface com formulários para envio de dados ao servidor

– Base de aplicações que rodam dentro do browser (applets Java, plug-ins, vídeos, etc.)

CSS – Cascading Style Sheets

• Linguagem utilizada para declarar folhas de estilo que podem ser aplicadas em páginas HTML– Define aparência (forma) da página– Permite posicionamento de textos, imagens; customização de

fontes, cores, etc.

• Regras de estilo são colocadas em arquivo de texto com extensão .css:h1, h2 { color: rgb(81%, 9%, 39%) font-size: 50pt; margin-top: 1.5cm}p.citacao {font-family: Times, serif; font-weight: 100}

Limitações: HTML e CSS

• HTML e CSS são linguagens declarativas, interpretadas pelo browser para definir apenas a forma como informação será organizada e apresentada

• Não são programáveis• Os formulários criados com HTML não fazem nada

(eles precisam ser vinculados a uma aplicação)• Não é possível construir aplicações Web interativas*

utilizando apenas CSS e HTML• Dynamic HTML (DHTML) e HTML5: solução para

alguns problemas de apresentação, estrutura e interatividade

Serviço de aplicações: Tecnologias dinâmicas

• Lado-cliente (client-side)– Linguagens de extensão: JavaScript, VBScript– Plug-ins e componentes (applets, activeX)– Soluções integradas: DHTML

• Persistência de sessão cliente-servidor– Cookies, SGBD

• Lado-servidor (server-side)– CGI, plug-ins do servidor e componentes– Linguagens de extensão: ASP, JSP, PHP

Tecnologias lado-cliente (client-side)

• Extensão da funcionalidade básica do browser• Permitem a criação de uma interface do usuário

dinâmica– Tratamento de eventos– Alteração dinâmica do conteúdo e/ou apresentação– Realização de comandos condicionais, cálculos e computação– Disponibilizam recursos não disponíveis no browser

• Principais tecnologias– Extensões do HTML (scripts): JavaScript, VBScript, linguagens

proprietárias– Extensões do browser (componentes): Applets, ActiveX, plug-

ins

Tecnologias lado-cliente (client-side): extensões do HTML

• Forma mais flexível de estender o HTML– Código geralmente fica visível na página:<head><script language="JavaScript"></script></head>

• Linguagens de script mais populares– VBScript: baseado na sintaxe do Visual Basic. MSIE-only.– JavaScript/JScript: sintaxe semelhante a de Java

• Código é interpretado diretamente pelo browser (e não por uma máquina virtual, como ocorre com os applets)

Tecnologias lado-cliente (client-side): JavaScript

• JavaScript não é uma versão limitada de Java• Possui sintaxe semelhante, mas é interpretada e bem menor que

Java• JavaScript pode ser usada no browser ou no servidor. A linguagem

possui duas partes:– Núcleo (padrão ECMA chamado de ECMAScript)

– Modelo de objetos do documento (quando usada no browser) ou do servidor (quando usada no servidor em tecnologias ASP, Livewire, etc.)

• Implementa padrão DOM

• O núcleo da linguagem define as estruturas de programação, sintaxe e objetos de propósito geral

• Quando usa-se JavaScript no browser, várias estruturas do HTML são objetos acessíveis, o que permite a manipulação dessas estruturas com JavaScript

JavaScript e DOM

• O Document Object Model (DOM) do JavaScript mapeia algumas estruturas do HTML com objetos da linguagem

– Propriedades dos objetos e elementos da página podem ser alterados em tempo de execução

– O mapeamento restringe-se a elementos de formulário, vínculos, imagens e atributos da janela do browser.

– O DOM permite validação de campos dos formulários, cálculos, imagens dinâmicas, abertura de novas janelas, controle de frames embutidos, etc.

• Não é completa. Não mapeia parágrafos, títulos ou folhas de estilo– Essa restrição é contornada pelo DOM dos navegadores e da W3C

DHTML – Dynamic HTML

• DHTML combina uma linguagem de programação (geralmente JavaScript) com HTML e CSS

– Permitindo tratar eventos em qualquer lugar da página– Permitindo grande interatividade– Permitindo alteração dinâmica de conteúdo, estrutura e aparência

• DOM - Document Object Model é a ponte entre o HTML/CSS e a linguagem baseada em objetos

P { color: red; }

<h1 id=”um”> ... </h1><p id=”x”> ... </p><img src=”fig1.jpg”/>

document.all.x.style.color = ‘blue’;document.images[0].src = ‘fig1.jpg’;

HTML = document

BODY = document.all

Conteúdo e forma DOM Javascript/ JScript

HTM

LCS

S

Tecnologias lado-servidor (server-side)

• Estendem as funções básicas de servidor HTTP, alguns exemplos:– CGI - Common Gateway Interface– APIs: ISAPI, NSAPI, Apache API, Servlet API– Scripts: ASP, JSP, Cold Fusion, PHP

• Rodam do lado do servidor, portanto, não dependem de suporte por parte dos navegadores– Os browsers fornecem apenas a interface do usuário

• Interceptam o curso normal da comunicação– Recebem dados via requisições HTTP (GET e POST)– Devolvem dados através de respostas HTTP

Tecnologias lado-servidor (server-side):CGI – Common Gateway Interface

• Especificação que determina como construir uma aplicação que será executada pelo servidor Web

• Programas CGI podem ser escritos em qualquer linguagem de programação. A especificação limita-se a determinar os formatos de entrada e saída dos dados (HTTP).

• O que interessa é o programa ser capaz de:– Obter dados de entrada a partir de uma requisição HTTP

– Gerar uma resposta HTTP incluindo os dados e parte do cabeçalho

• Escopo: camada do servidor– Não requer nenhuma função adicional do cliente ou do HTTP

CGIRequisição

HTTPResposta

HTTP


• Programas CGI podem ser escritos em qualquer linguagem de propósito geral.

– As linguagens mais populares são C e Perl.

• A linguagem usada deve ter facilidades para– Ler variáveis de ambiente (onde o servidor armazena informações passadas no

cabeçalho da requisição).– Imprimir dados de 8 bits (e não apenas texto ASCII)

• Linguagens não recomendadas– Java: dificuldade de ler propriedades do sistema– MS-DOS: impossibilidade de gerar HTML

• Segurança depende do servidor e do código


• Servidor HTTP pode intermediar, através da interface CGI, qualquer aplicação rodando na máquinaservidora

• Browser não precisa defuncionalidade especial (deve ao menos suportar HTML)

Servidor deBanco de Dados

CGI

Servidor HTTP Browser


• CGI é prático, mas ineficiente!• A interface CGI requer que o servidor sempre execute um programa

– Um novo processo do S.O. rodando o programa CGI é criado para cada cliente remoto que o requisita

– Novos processos consomem muitos recursos, portanto, o desempenho do servidor diminui conforme os clientes se conectam

• CGI roda como um processo externo, logo, não tem acesso a recursos do servidor– A comunicação com o servidor é resumida a entrada e saída

– É difícil o compartilhamento de dados entre processos

Tecnologias lado-servidor (server-side):APIs do servidor

• Podem substituir totalmente o CGI, com vantagens:– Toda a funcionalidade do servidor pode ser usada

– Múltiplos clientes em processos internos (threads)

– Muito mais rápidas e eficientes (menos overhead)

• Desvantagens:– Em geral dependem de plataforma, fabricante e linguagem

– Soluções proprietárias

• Exemplos:– ISAPI (Microsoft)

– NSAPI (Netscape)

– Apache Server API

Tecnologias lado-servidor (server-side):APIs do servidor

Tecnologias lado-servidor (server-side):Servlet API

“Servlet é um “servidorzinho”...”•A Servlet API é independente de plataforma e praticamente independente de fabricante•Componentes desta API são escritos em Java e se chamam servlets

– Assim como os componentes SAPI proprietários, os servlets rodam dentro do servidor, mas em uma Máquina Virtual Java (JVM)

•Disponível como ‘plug-in’ ou conector para servidores que não suportam a API diretamente

Tecnologias lado-servidor (server-side):Vantagens dos servlets

• Com relação ao CGI– Rodam como parte do servidor (cada nova requisição inicia um novo thread mas

não um novo processo)– Mais integrados ao servidor: mais facilidade para compartilhar informações,

recuperar e decodificar dados enviados pelo cliente, etc.

• Com relação às APIs proprietárias– Não dependem de único servidor ou sistema operacional– Têm toda a API Java à disposição (JDBC, RMI, etc.)– Não comprometem a estabilidade do servidor em caso de falha (na pior

hipótese, um erro poderia derrubar o JVM)

Tecnologias lado-servidor (server-side):Problemas dos servlets, CGI e Server APIs

• Para gerar páginas dinâmicas (99,9% das aplicações), é preciso embutir o HTML dentro de instruções de uma linguagem de programação:out.print("<h1>Servlet exemplo</h1>");for (int num = 1; num <= 5; i++) { out.print("<p>Parágrafo " + num + "</p>");}out.print("<table><tr><td> ... </tr></table>");

• Maior parte da informação da página é estática, porém, precisa ser embutida no código

• Afasta o Web designer do processo–Muito mais complicado programar do que usar HTML e JavaScript–O design de páginas geradas dinamicamente acaba ficando a cargo do programador

Tecnologias lado-servidor (server-side):Scripts de servidor como solução

• Coloca a linguagem de programação dentro do HTML (e não o contrário)<h1>Servlet</h1><% for (int num = 1; num <= 5; i++) { %>

<p>Parágrafo <%= num %></p><%}%><table><tr><td> ... </tr></table>

• Permite o controle da aparência e estrutura da página em softwares de design (e.g., DreamWeaver)

• Página fica mais legível• Quando houver muita programação, código pode ser escondido em

servlets, JavaBeans, componentes (por exemplo: componentes ActiveX, no caso do ASP)

Tecnologias lado-servidor (server-side):Scripts de servidor

• Alguns dos mais populares:– Microsoft Active Server Pages (ASP)– JavaServer Pages (JSP)– PHP

• A página geralmente possui uma extensão de arquivo diferente para que o servidor a identifique como um programa

• Páginas JSP, ASP, PHP etc. são processadas e os scripts são executados pelo servidor, que os consome

– No browser, chega apenas a saída do programa: página HTML– Comandos <% .. %> ou similares nunca chegam no browser

• Servidor envia cabeçalho Content-type: text/html (default) ou algum outro tipo texto (text/xml, text/plain)

Controle de sessão

• HTTP não preserva o estado de uma sessão. É preciso usar mecanismos artificiais com CGI (ou qualquer outra tecnologia Web)– Sequência de páginas/aplicações:

• Desvantagens: sequência não pode ser quebrada; mesmo que página só contenha HTML simples

– Inclusão de dados na URL:• Desvantagens: pouca flexibilidade e informações expostas na url

– Cookies (informação armazenada no cliente):• Desvantagens: espaço e quantidade de dados reduzidos; browser precisa

estar com os “cookies ativos”

Controle de sessão: cookies

• HTTP Cookie – Padronizado na RFCs 2965 e 6265 para persistência de informações entre requisições HTTP

• Um cookie é uma pequena quantidade de informação que o servidor armazena no cliente– Par composto de nome,valor. Exemplos: idade=25, sexo=m– Escopo no servidor: domínio e caminho da página

– Pode ser seguro

– Escopo no cliente: browser (sessão)

– Duração: uma sessão ou tempo definido (cookies persistentes)

– Cookies são criados através de cabeçalhos HTTPContent-type: text/htmlContent-length: 34432Set-Cookie: usuario=ax343Set-Cookie: lastlogin=12%2610%2699

Controle de sessão: cookies

Usuário selecionaLivro A

Set-Cookie: livro=A

Usuário selecionaLivro B

Usuário finalizacompra

Set-Cookie: livro=B

Total A+B = R$ 50

CGI

Servidor HTTP

Servlets

• Servlets possuem um ciclo de vida (lifetime), ou seja, um processo que vai desde sua criação até sua destruição– O servlet é inicializado pela chamada do método init()– O servlet chama o método service() para processar requests

do cliente (chamando os métodos doGet() ou doPost())– O servlet é finalizado pela chamada do método destroy()– Finalmente, o garbage collector da JVM coleta o servlet

Servlets

Exercícios

1. Verifique o cabeçalho de GET requests em um site qualquer (dica: use um navegador com ferramentas para desenvolvedor).

2. Configure um ambiente de desenvolvimento para criar seus servlets (tutorial no Moodle).

3. Crie seu primeiro servlet, realize a compilação e implante o servlet no servidor Web (código disponível no Moodle).

4. Modifique seu servlet para atender a requisições GET.

5. Modifique seu servlet para atender a requisições POST.

Exemplo de um servlet

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class ServletSimples extends HttpServlet { public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out; response.setContentType("text/html"); out = response.getWriter(); String user = request.getParameter("usuario"); if (user == null) user = “Fulano"; out.println("<HTML><HEAD><TITLE>"); out.println(“Saida do Servlet"); out.println("</TITLE></HEAD><BODY>"); out.println("<H1>Saida do Servlet</H1>"); out.println("<P>Oi, " + user); out.println("</BODY></HTML>"); out.close(); }}

Exemplo de uma JSP equivalente

<html><head><title>Saida do servlet</title></head><body><%String user = request.getParameter("usuario");if (user == null) user = "World";%><h1>Saida do servlet</h1><p>Oi, <%= user %></body></html>

programação avançada para internet parte 1

Technology