ProgramaçãoparaWeb

(1)

Programação para Web

(2)

Visão Geral

• Modelo Cliente-Servidor

• Protocolos de Comunicação entre Computadores

• HTTP • A Web

(3)

(4)

Exemplo

(5)

Modelo Cliente-Servidor

• Modelo Computacional

– Dois papeis bem definidos: cliente e servidor.

– Clientes enviam requisições de dado para algum dos servidores conectados e espera pela resposta. Para isso, é aberta uma sessão de um cliente para um servidor que espera as solicitações de entrada. – O servidores podem aceitar requisições de clientes, processá-las e retornar o resultado para o cliente.

(6)

Modelo Cliente-Servidor

• Cite um exemplo de modelo alternativo de comunicação?

(7)

Modelo Cliente-Servidor

• Computadores se comunicando em uma rede de computadores com hardware separados.

• Cliente e servidor podem residir no mesmo sistema.

(8)

Exemplos

• Serviços FTP (File Transfer Protocol)

– Servidor FTP: disponibiliza arquivos em diretórios

– Cliente FTP: programa cliente que solicita arquivos em diretórios a um servidor FTP

• Serviços de Mensagens

– Servidor: gmail.com

– Programa Cliente: Gmail (Web Application) ou Outlook (Aplicativo)

• Serviços HTTP (HyperText Transfer Protcol)

– Servidor: apache, tomcat...

(9)

Modelo Cliente-Servidor

• Serviços disponibilizados por servidores • Clientes acessam os serviços

• Características

– Recursos Centralizados – Uma melhor segurança

– Uma administração a nível do servidor – Uma rede evolutiva

(10)

Modelo Cliente-Servidor

• Desvantagens

– Custo elevado para manutenção do servidor – Elo fraco, se o servidor quebrar, para tudo!!

Apesar disso, servidores possuem uma grande resistência a falhas, graças ao sistema RAID.

(11)

(12)

Protocolos da Internet

Application Layer

FTP, HTTP, IMAP, IRC, LDAP, POP, SOCKS, SSH, Telnet

Transport Layer TCP UDP ... Internet Layer IP (IPv4, IPv6) ... Link Layer ARP/InARP, PPP ...

(13)

Protocolo HTTP

• HyperText Transfer Protocol

– Um Padrão W3C para transferência de informações entre um cliente web e um servidor web.

– Envelope protocol

• Header é composto de pares nome/valor que dividem a stream em mensagens e informam o status da conexão. • Várias linguagens possuem bibliotecas para se trabalhar

(14)

(15)

Protocolo HTTP

• Pedido

– Conjunto de linhas

• Linha de Pedido

– <METHOD> <URL> <HTTP_VERSION>

• Várias Linhas de Cabeçalho

– TIPO: VALOR

• Linha em branco • Linhas do Corpo

– Exemplo: envio de dados por meio do comando POST (dados de formulário)

(16)

Protocolo HTTP

• Pedido

– Exemplo

GET http://pt.kioskea.net HTTP/1.0 Accept : text/html

If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT

User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

(17)

Protocolo HTTP

• Métodos

– GET: pedido de recurso situado na URL especificada.

– HEAD: pedido do cabeçalho do recurso na URL especificada.

– POST: envio de dados ao programa na URL especificada.

– PUT: envio de dados à URL especificada,

(18)

Protocolo HTTP

• Propriedades

– Accept, Accept-Charset, Accept-Encoding, Accept-Language – Authorization

– Content-Encoding, Content-Language, Content-Length, Content – Type – Date – Forwarded – From – Link – Orig-URL – Referer – User-Agent

(19)

Resposta HTTP

• Um Conjunto de Linhas

– Uma linha de status

• <VERSÃO_PROTOCOLO> <CÓDIGO> <EXPLICAÇÃO>

– Campos de Propriedades da Resposta

• Conjunto de linhas com cada linha composta por <propriedade>:<valor>

– Corpo da Resposta

(20)

Resposta HTTP

• Exemplo

HTTP/1.0 200 OK

Date : Sat, 15 Jan 2000 14:37:12 GMT Server : Microsoft-IIS/2.0

Content-Type : text/HTML Content-Length : 1245

(21)

(22)

Resposta HTTP

• 20x: Sucesso • 30x: Redireção

• 40x: erro devido ao cliente • 50x: erro devido ao servidor • Códigos

(23)

Mais Informações Sobre o Protocolo

HTTP

• _{RFC 1945}_{- Hypertext Transfer Protocol --}

HTTP/1.0 (tradução francesa)

• RFC 1945 - Hypertext Transfer Protocol --

HTTP/1.0 (versão original)

• RFC 2616 - Hypertext Transfer Protocol --

(24)

Linguagens para Web

• Facilidade de gerar HyperTexto • Flexível

• Dinâmica

• Fácil de aprender • Cliente x Servidor

(25)

Linguagens de Marcação

• HTML (Hypertext Markup Language) • XML (eXtensible Markup Language)

– Separa: dados e forma de interpretação dos dados para validação dos documentos

(26)

Linguagens de Programação para Web

• Qualquer linguagem pode ser utilizada para o desenvolvimento de sistemas para web

– Existe um conjunto de linguagens que possuem

recursos e facilidades para se trabalhar com a web

(27)

JavaScript

• Linguagem de Script baseada na linguagem de programação ECMAScript

• Dominante na programação client-side em navegadores web

• Orientação a Objetos baseada em protótipos • Tipagem fraca

• Dinâmica

(28)

JavaScript

function start() {

alert(‘Hello World’); }

(29)

Linguagem de Marcação

• HyperText Markup Language • Linguagem de marcação

• Padrão da Web

• Focado essencialmente na apresentação de

conteúdo (inicialmente sem preocupação com a semântica)

(30)

Linguagem de Marcação

<html> <head> <title>Exemplo</title> </head> <body> <h1>Hello World</h1> </body> </html>

(31)

Linguagem de Marcação

<html> / \ <body> <head> / \ <h1> <title> / \

(32)

Document Object Model (DOM)

<html> <head> <title>Exemplo</title> <script type="text/javascript"> function show() { var x = document.getElementsByTagName('h1')[0].innerText; alert(x); } </script> </head>

<body onload='show();' name='teste'> <h1>Hello World</h1>

</body> </html>

(33)

Desenvolvimento Server-Side

• Servidor WEB recebe requisições e responde com páginas HTML ou outro tipo de conteúdo.

– Uma aplicação WEB rodando no servidor WEB deve ser capaz de gerar conteúdo, seja em HTML ou outro formato suportado pelos navegadores.

(34)

Desenvolvimento Server-Side

– Uma aplicação WEB rodando no servidor WEB deve ser capaz de gerar conteúdo, seja em HTML ou outro formato suportado pelos navegadores. – Linguagens frequentemente utilizadas: PHP, Java

(Tomcat), C# e outras linguagens .NET, Python, Prolog

(35)

Desenvolvimento Server-Side

– Uma aplicação WEB rodando no servidor WEB deve ser capaz de gerar conteúdo, seja em HTML ou outro formato suportado pelos navegadores. – Linguagens frequentemente utilizadas: PHP, Java

(Tomcat), C# e outras linguagens .NET, Python, Prolog

– Java prover um conjunto de funcionalidades para programação em redes no pacote java.net.

(36)

PHP – Personal Home Pages

• Criada no outono de 1994 por Rasmus Lerdorf.

• Inicialmente, um conjunto de scripts voltados á criação de página dinâmicas

• 1995: implementação em C, da agora denominada PHP/FI.

– Disponibilização do código na WEB

– 50 mil domínios, 1% da internet já utilizava PHP

• 1997: lançamento da segunda versão com contribuições de Andi Gutmans e Zeev

Suraski.

– Rescrita do PHP/FI 2, dando origem ao PHP3

– Extensibilidade, conexão com vários bancos de dados, novos protocolos, uma sintaxe mais consistente, suporte à orientação a objetos, nova API.

– Presente em 10% da web.

– O significado de PHP mudou de Personal Home Pages/Forms Interpreter para Hypertext Preprocessor.

• 1998: mecanismo zend, dando origem ao PHP4. Suporte a diversos servidores

web, utilização com linguagem de shell script.

– Presente em cerca de 20% da web

(37)

PHP – Hypertext Preprocessor

• Extensão de aquivos

– .php

– .class.php – .inc.php

(38)

Simplesmente PHP

• Delimitadores de código <?php //codigo; //codigo; //codigo; ?>

(39)

PHP

• Comentários //echo “a”; #echo “a”; /* echo “a”; echo “b”; */

(40)

PHP

• Output – echo – print – var_dump – print_

(41)

PHP

• <?php

$nome = “João”

$sobrenome = “da Silva”

echo “$nome, $sobrenome” ?>

(42)

PHP

• Hello World com Arranjos <?php

$saud = array(‘Hello’, ‘World’); echo $saud[0] $saud[1];

(43)

Próxima Aula

(44)