2. Noções básicas de programação web

O objetivo principal deste capítulo é apresentar os princípios fundamentais da programação web, que são independentes da tecnologia específica utilizada para a sua implementação. Apresenta inúmeros exemplos que o encorajamos a testar, a fim de «absorver» gradualmente a filosofia do desenvolvimento web. Os leitores que já possuam estes conhecimentos podem avançar diretamente para o capítulo seguinte.

Os componentes de uma aplicação web são os seguintes:

Número	Função	Exemplos comuns
1	SO do servidor	Unix, Linux, Windows
2	Servidor Web	Apache (Unix, Linux, Windows) IIS (Windows + plataforma .NET) Node.js (Unix, Linux, Windows)
3	Código do lado do servidor. Pode ser executado por módulos do servidor ou por programas externos ao servidor (CGI).	JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, WebSphere, JBoss, WebLogic, ...) C#, VB.NET (IIS)
4	Base de dados - Pode estar na mesma máquina que o programa que a utiliza ou noutra máquina através da Internet.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows)
5	SO do cliente	Unix, Linux, Windows
6	Navegador Web	Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7	Scripts do lado do cliente executados no navegador. Estes scripts não têm acesso ao disco do computador do cliente.	JavaScript (todos os navegadores)

2.1. Troca de dados numa aplicação web com um formulário

Número	Função
1	O navegador solicita um URL pela primeira vez (http://machine/url). Não são passados parâmetros.
2	O servidor web envia a página web para essa URL. Pode ser estática ou gerada dinamicamente por um script do lado do servidor (SA) que pode ter utilizado conteúdo de bases de dados (SB, SC). Aqui, o script irá detetar que a URL foi solicitada sem quaisquer parâmetros e irá gerar a página web inicial. O navegador recebe a página e exibe-a (CA). Os scripts do lado do navegador (CB) podem ter modificado a página inicial enviada pelo servidor. Em seguida, através de interações entre o utilizador (CD) e os scripts (CB), a página web será modificada. Em particular, os formulários serão preenchidos.
3	O utilizador submete os dados do formulário, que devem então ser enviados para o servidor web. O navegador solicita a URL inicial ou outra, conforme apropriado, e transmite simultaneamente os valores do formulário para o servidor. Pode utilizar dois métodos para isso: GET e POST. Ao receber o pedido do cliente, o servidor aciona o script (SA) associado à URL solicitada, que irá detetar os parâmetros e processá-los.
4	O servidor entrega a página web gerada pelo programa (SA, SB, SC). Este passo é idêntico ao passo 2 anterior. A comunicação prossegue agora de acordo com os passos 2 e 3.

2.2. Páginas Web estáticas, páginas Web dinâmicas

Uma página estática é representada por um ficheiro HTML. Uma página dinâmica é uma página HTML gerada «em tempo real» pelo servidor web.

2.2.1. Página HTML (HyperText Markup Language) estática

Vamos criar o nosso primeiro projeto Web utilizando o Visual Studio Express 2012. Utilizamos a opção [Ficheiro / Novo Projeto]:

em [1], especifique que pretende criar uma aplicação ASP.NET vazia;
em [2], introduza o nome da solução do Visual Studio. Todos os exemplos neste documento estarão na mesma solução;
em [3], a pasta pai do projeto a ser criado;
em [4], o nome do projeto.

Clique em OK.

O projeto resultante é apresentado em [5]. Iremos utilizá-lo para ilustrar os princípios básicos da programação web.

Vamos começar por criar uma página HTML estática:

em [1], clique com o botão direito do rato no projeto e siga as opções;

em [2], atribua um nome à página;
em [3], a página foi adicionada.

O conteúdo da página criada é o seguinte:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
 
</body>
</html>

linhas 2-10: o código está entre a tag raiz <html>;
linhas 3-6: a tag <head> delimita o que se denomina cabeçalho da página;
linhas 7-9: a tag <body> delimita o que é chamado de corpo da página.

Vamos modificar este código da seguinte forma:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

linha 5: define o título da página – será exibido como o título da janela do navegador que exibe a página;
linha 8: texto em fonte grande (<h1>).

Vamos visualizar esta página num navegador:

em [1], solicitamos a visualização da página;
em [2], o URL da página exibida;
em [3], o título da janela – fornecido pela tag <title> da página;
em [4], o corpo da página – fornecido pela tag <h1>.

Vejamos [1] o código HTML recebido pelo navegador:

em [2], o navegador recebeu a página HTML que criámos. Interpretou-a e apresentou-a como uma representação gráfica.

2.2.2. Uma página ASP.NET

Agora vamos criar uma página ASP.NET. Trata-se de uma página HTML que pode conter código do lado do servidor e gerar determinadas partes da página. Seguimos um processo semelhante ao da criação da página HTML:

Em [1], uma página ASP.NET é chamada de [Formulário Web];

Em [2], é atribuído um nome à nova página;
em [3], a página foi criada.

O código da página criada é o seguinte:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
    </form>
</body>
</html>

Vemos tags HTML que já encontrámos anteriormente. As tags com o atributo [runat="server"] são tags que serão processadas pelo servidor e convertidas em tags HTML simples. Portanto, o que vemos acima não é, como no caso da página estática anterior, o código HTML que o navegador irá receber. Isto é designado por página dinâmica: o fluxo HTML enviado ao servidor é gerado por código executado no lado do servidor. Vamos modificar a página da seguinte forma:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>

Linha 8: Atribuímos um título à página;
linha 13: exibimos texto gerado pelo código C#. Este código está entre as tags <% %>. Este código C# exibe a hora atual no formato horas:minutos:segundos.

Vamos [1] visualizar esta página num navegador:

em [1], solicitamos que a página seja exibida;
em [2], o URL da página exibida;
em [3], o título da janela – fornecido pela tag <title> da página;
em [4], o corpo da página – fornecido pela tag <h1>.

Se atualizarmos a página (F5), obtemos uma visualização diferente (nova hora), mesmo que o URL não mude. Este é o aspeto dinâmico da página: o seu conteúdo pode mudar ao longo do tempo. Agora, vejamos o código HTML recebido pelo navegador:

em [1], visualizamos o código-fonte da página;
em [2]: desta vez, o código HTML recebido não é aquele que criámos, mas sim o gerado pelo servidor web a partir das informações da nossa página ASP.NET.

2.2.3. Conclusão

Pelo exposto, podemos ver que as páginas dinâmicas e estáticas são fundamentalmente diferentes.

2.3. Scripts do lado do navegador

Uma página HTML pode conter scripts que serão executados pelo navegador. A principal linguagem de script do lado do navegador é atualmente (setembro de 2013) o JavaScript. Centenas de bibliotecas foram criadas utilizando esta linguagem para facilitar a vida dos programadores.

Vamos criar uma nova página HTML [1] no projeto que já criámos:

Edite o ficheiro [HtmlPage2.html] com o seguinte conteúdo:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>

linha 13: define um botão (atributo type) com o texto «Clique aqui» (atributo value). Quando clicado, a função JavaScript [react] é executada (atributo onclick);
linhas 6–10: um script JavaScript;
linhas 7-9: a função [react];
linha 8: exibe uma caixa de diálogo com a mensagem [Clicou no botão].

Vamos visualizar a página num navegador:

em [1], a página exibida;
em [2], a caixa de diálogo que aparece quando se clica no botão.

Quando se clica no botão, não há comunicação com o servidor. O código JavaScript é executado pelo navegador.

Com o vasto número de bibliotecas JavaScript disponíveis, podemos agora incorporar aplicações completas diretamente no navegador. Isto leva às seguintes arquiteturas:

1-4: o servidor HTML é um servidor para páginas estáticas em HTML5/CSS/JavaScript;
5-6: as páginas HTML5/CSS/JavaScript fornecidas interagem diretamente com um servidor de dados. Este servidor fornece apenas dados, sem marcação HTML. O JavaScript insere esses dados em páginas HTML já presentes no navegador.

Nesta arquitetura, o código JavaScript pode tornar-se excessivamente pesado. Por isso, pretendemos estruturá-lo em camadas, tal como fazemos com o código do lado do servidor:

a camada [UI] é a que interage com o utilizador;
a camada [DAO] interage com o servidor de dados;
a camada [lógica de negócio] contém os procedimentos de negócio que não interagem nem com o utilizador nem com o servidor de dados. Esta camada pode não existir.

2.4. Comunicação cliente-servidor

Voltemos ao nosso diagrama inicial que ilustra os componentes de uma aplicação web:

Aqui, estamos interessados nas trocas entre a máquina cliente e a máquina servidor. Estas ocorrem através de uma rede, e vale a pena rever a estrutura geral das trocas entre duas máquinas remotas.

2.4.1. O Modelo OSI

O modelo de rede aberta conhecido como OSI (Open Systems Interconnection Reference Model), definido pela ISO (Organização Internacional de Normalização), descreve uma rede ideal onde a comunicação entre máquinas pode ser representada por um modelo de sete camadas:

Cada camada recebe serviços da camada abaixo dela e fornece os seus próprios serviços à camada acima dela. Suponha que duas aplicações localizadas em máquinas diferentes, A e B, pretendam comunicar: fazem-no na camada de Aplicação. Não precisam de conhecer todos os detalhes do funcionamento da rede: cada aplicação passa a informação que pretende transmitir para a camada abaixo dela: a camada de Apresentação. A aplicação, portanto, só precisa de conhecer as regras para interagir com a camada de Apresentação. Assim que a informação chega à camada de Apresentação, é passada de acordo com outras regras para a camada de Sessão, e assim sucessivamente, até que a informação chegue ao meio físico e seja fisicamente transmitida para a máquina de destino. Aí, passará pelo processo inverso ao que passou na máquina de envio.

Em cada camada, o processo emissor responsável pelo envio da informação envia-a a um processo recetor na outra máquina pertencente à mesma camada que ele próprio. Faz-o de acordo com certas regras conhecidas como protocolo da camada. Temos, portanto, o seguinte diagrama de comunicação final:

As funções das diferentes camadas são as seguintes:

Física	Assegura a transmissão de bits através de um meio físico. Esta camada inclui equipamentos terminais de processamento de dados (DPTE), tais como terminais ou computadores, bem como equipamentos de terminação de circuitos de dados (DCTE), tais como moduladores/demoduladores, multiplexadores de e es e concentradores. As principais considerações a este nível são: a escolha da codificação da informação (analógica ou digital) a escolha do modo de transmissão (síncrono ou assíncrono).
Camada de Ligação de Dados	Oculta as características físicas da Camada Física. Deteta e corrige erros de transmissão.
Rede	Gere o caminho que a informação enviada pela rede deve seguir. Isto denomina-se encaminhamento: determinar a rota que a informação deve seguir para chegar ao seu destino.
Transporte	Permite a comunicação entre duas aplicações, enquanto as camadas anteriores apenas permitiam a comunicação entre máquinas. Um serviço prestado por esta camada pode ser a multiplexação: a camada de transporte pode utilizar uma única ligação de rede (de máquina para máquina) para transmitir dados pertencentes a várias aplicações.
Sessão	Esta camada fornece serviços que permitem a uma aplicação abrir e manter uma sessão de trabalho numa máquina remota.
Apresentação	Tem como objetivo padronizar a representação de dados entre diferentes máquinas. Assim, os dados provenientes da máquina A serão «formatados» pela camada de apresentação da máquina A de acordo com um formato padrão antes de serem enviados pela rede. Ao chegarem à camada de apresentação da máquina de destino B, que os reconhecerá graças ao seu formato padrão, serão formatados de forma diferente para que a aplicação na máquina B os possa reconhecer.
Aplicação	Neste nível, encontramos aplicações que estão geralmente próximas do utilizador, tais como o e-mail ou a transferência de ficheiros.

2.4.2. O Modelo TCP/IP

O modelo OSI é um modelo ideal. O conjunto de protocolos TCP/IP aproxima-se dele da seguinte forma:

a interface de rede (a placa de rede do computador) desempenha as funções das camadas 1 e 2 do modelo OSI
a camada IP (Protocolo de Internet) desempenha as funções da camada 3 (rede)
a camada TCP (Protocolo de Controlo de Transmissão) ou UDP (Protocolo de Datagrama do Utilizador) desempenha as funções da camada 4 (transporte). O protocolo TCP garante que os pacotes de dados trocados entre máquinas cheguem ao seu destino. Caso contrário, reenvia os pacotes perdidos. O protocolo UDP não desempenha esta tarefa, pelo que cabe ao programador da aplicação fazê-lo. É por isso que, na Internet — que não é uma rede 100% fiável —, o protocolo TCP é o mais utilizado. A isto se refere-se como uma rede TCP-IP.
A camada de Aplicação abrange as funções das camadas 5 a 7 do modelo OSI.

As aplicações Web residem na camada de Aplicação e, por isso, dependem dos protocolos TCP/IP. As camadas de Aplicação das máquinas cliente e servidor trocam mensagens, que são confiadas às camadas 1 a 4 do modelo para serem encaminhadas para o seu destino. Para comunicarem entre si, as camadas de Aplicação de ambas as máquinas devem «falar» a mesma língua ou protocolo. O protocolo utilizado pelas aplicações Web denomina-se HTTP (HyperText Transfer Protocol). Trata-se de um protocolo baseado em texto, o que significa que as máquinas trocam linhas de texto através da rede para comunicarem. Estas trocas são padronizadas, o que significa que o cliente dispõe de um conjunto de mensagens para indicar ao servidor exatamente o que pretende, e o servidor também dispõe de um conjunto de mensagens para fornecer a sua resposta ao cliente. Esta troca de mensagens assume a seguinte forma:

Cliente --> Servidor

Quando o cliente faz um pedido ao servidor web, este envia

linhas de texto no formato HTTP para indicar o que pretende;
uma linha vazia;
opcionalmente, um documento.

Servidor --> Cliente

Quando o servidor responde ao cliente, envia

linhas de texto no formato HTTP para indicar o que está a enviar;
uma linha vazia;
opcionalmente, um documento.

As trocas seguem, portanto, o mesmo formato em ambas as direções. Em ambos os casos, pode ser enviado um documento, embora seja raro um cliente enviar um documento ao servidor. Mas o protocolo HTTP permite isso. É isso que permite, por exemplo, que os assinantes de um ISP carreguem vários documentos para o seu site pessoal hospedado por esse ISP. Os documentos trocados podem ser de qualquer tipo. Considere um navegador a solicitar uma página web que contenha imagens:

o navegador liga-se ao servidor web e solicita a página que deseja. Os recursos solicitados são identificados de forma única por URLs (Uniform Resource Locators). O navegador envia apenas cabeçalhos HTTP e nenhum documento.
O servidor responde. Primeiro, envia cabeçalhos HTTP indicando que tipo de resposta está a enviar. Esta pode ser um erro, caso a página solicitada não exista. Se a página existir, o servidor indicará nos cabeçalhos HTTP da sua resposta que irá enviar um documento HTML (HyperText Markup Language) a seguir a eles. Este documento é uma sequência de linhas de texto em formato HTML. O texto HTML contém tags (marcadores) que fornecem ao navegador instruções sobre como apresentar o texto.
O cliente sabe, a partir dos cabeçalhos HTTP do servidor, que irá receber um documento HTML. Ele irá analisar este documento e poderá perceber que este contém referências a imagens. Estas imagens não estão incluídas no documento HTML. Por isso, faz um novo pedido ao mesmo servidor web para solicitar a primeira imagem de que necessita. Este pedido é idêntico ao feito no passo 1, exceto que o recurso solicitado é diferente. O servidor processará esta solicitação enviando a imagem solicitada ao cliente. Desta vez, na sua resposta, os cabeçalhos HTTP especificarão que o documento enviado é uma imagem e não um documento HTML.
O cliente recupera a imagem enviada. Os passos 3 e 4 serão repetidos até que o cliente (normalmente um navegador) tenha todos os documentos necessários para apresentar a página na íntegra.

2.4.3. O Protocolo HTTP

Vamos explorar o protocolo HTTP através de exemplos. O que é que um navegador e um servidor web trocam entre si?

Um serviço web ou serviço HTTP é um serviço TCP/IP que normalmente funciona na porta 80. Pode funcionar numa porta diferente. Nesse caso, o navegador do cliente teria de especificar essa porta no URL que solicita. Um URL assume geralmente a seguinte forma:

protocolo://host[:porta]/caminho/informação

onde

protocolo	http para o serviço Web. Um navegador também pode atuar como cliente para FTP, news, Telnet e outros serviços.
máquina	nome da máquina que hospeda o serviço Web
porta	Porta do serviço Web. Se for 80, o número da porta pode ser omitido. Este é o caso mais comum
caminho	caminho para o recurso solicitado
info	informações adicionais fornecidas ao servidor para especificar o pedido do cliente

O que faz um navegador quando um utilizador solicita o carregamento de um URL?

Estabelece uma ligação TCP/IP com a máquina e a porta especificadas na parte máquina[:porta] da URL. Estabelecer uma ligação TCP/IP significa criar um «canal» de comunicação entre duas máquinas. Assim que este canal for estabelecido, toda a informação trocada entre as duas máquinas passará por ele. A criação deste canal TCP/IP ainda não envolve o protocolo HTTP da Web.
Assim que a ligação TCP/IP é estabelecida, o cliente envia o seu pedido ao servidor Web, enviando linhas de texto (comandos) no formato HTTP. Envia a parte path/info da URL para o servidor
O servidor responderá da mesma forma e através da mesma ligação
Uma das duas partes decidirá encerrar a ligação. Isto depende do protocolo HTTP utilizado. Com o HTTP 1.0, o servidor encerra a ligação após cada uma das suas respostas. Isto obriga um cliente que precise de efetuar múltiplas solicitações para recuperar os vários documentos que compõem uma página web a abrir uma nova ligação para cada solicitação, o que acarreta um custo. Com o protocolo HTTP/1.1, o cliente pode indicar ao servidor para manter a ligação aberta até que lhe dê instruções para a encerrar. Pode, assim, recuperar todos os documentos de uma página web utilizando uma única ligação e encerrar a ligação por si próprio assim que o último documento tiver sido obtido. O servidor detetará este encerramento e encerrará também a ligação.

Para examinar as trocas entre um cliente e um servidor web, utilizaremos a extensão [Advanced Rest Client] para o navegador Chrome que instalámos na Secção 1.3. Estaremos na seguinte situação:

O servidor web pode ser qualquer servidor. Aqui, o nosso objetivo é examinar as trocas que ocorrerão entre o navegador e o servidor web. Anteriormente, criámos a seguinte página HTML estática:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

que visualizamos num navegador:

Podemos ver que o URL solicitado é: http://localhost:56376/HtmlPage1.html. O servidor web é, portanto, o localhost (=máquina local) e a porta 56376. Vamos usar a aplicação [Advanced Rest Client] para solicitar o mesmo URL:

em [1], inicie a aplicação (no separador [Aplicações] de um novo separador do Chrome);
em [2], selecione a opção [Request];
em [3], especifique o servidor a consultar: http://localhost:56376;
em [4], especifique o URL solicitado: /HtmlPage1.html;
em [5], adicione quaisquer parâmetros à URL. Nenhum neste caso;
em [6], especifique o método HTTP utilizado para o pedido, neste caso GET.

Isto resulta na seguinte solicitação:

A solicitação preparada desta forma [7] é enviada ao servidor por [8]. A resposta recebida é então a seguinte:

Mencionámos anteriormente que as trocas cliente-servidor assumem a seguinte forma:

Em [1], pode ver os cabeçalhos HTTP enviados pelo navegador na sua solicitação. Não havia nenhum documento para enviar;
Em [2], vemos os cabeçalhos HTTP enviados pelo servidor na resposta. Em [3], vemos o documento que este enviou.

Em [3], podemos ver a página HTML estática que colocámos no servidor web.

Vamos examinar a solicitação HTTP do navegador:

GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

A linha 1 não foi apresentada pela aplicação;
Linha 2: O navegador identifica-se com o cabeçalho [User-Agent];
Linha 3: O navegador indica que está a enviar um documento de texto (text/plain) no formato UTF-8 para o servidor. Na verdade, neste caso, o navegador não enviou nenhum documento;
linha 4: o navegador indica que aceita qualquer tipo de documento em resposta;
linha 5: o navegador especifica os formatos de documento aceites;
linha 6: o navegador especifica os idiomas que prefere, por ordem de preferência.

O servidor respondeu enviando os seguintes cabeçalhos HTTP:

HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313

linha 1: não foi exibida pela aplicação;
linha 3: o servidor identifica-se, neste caso um servidor Microsoft IIS;
linha 5: indica a tecnologia que gerou a resposta, neste caso ASP.NET;
linha 6: data e hora da resposta;
linha 7: o tipo de documento enviado pelo servidor. Aqui, um documento HTML;
linha 12: o tamanho, em bytes, do documento HTML enviado.

2.4.4. Conclusão

Explorámos a estrutura do pedido de um cliente web e a resposta do servidor a esse pedido através de alguns exemplos. A comunicação ocorre através do protocolo HTTP, um conjunto de comandos baseados em texto trocados entre as duas partes. O pedido do cliente e a resposta do servidor partilham a seguinte estrutura:

Os dois comandos comuns para solicitar um recurso são GET e POST. O comando GET não é acompanhado por um documento. O comando POST, por outro lado, é acompanhado por um documento que, na maioria das vezes, é uma sequência de caracteres contendo todos os valores introduzidos no formulário. O comando HEAD permite solicitar apenas os cabeçalhos HTTP e não é acompanhado por um documento.

Em resposta a um pedido do cliente, o servidor envia uma resposta com a mesma estrutura. O recurso solicitado é transmitido na secção [Document], a menos que o comando do cliente tenha sido HEAD, caso em que apenas os cabeçalhos HTTP são enviados.

2.5. Noções básicas de HTML

Um navegador da Web pode exibir vários documentos, sendo o mais comum o documento HTML (HyperText Markup Language). Trata-se de texto formatado utilizando tags na forma <tag>texto</tag>. Assim, o texto <B>importante</B> exibirá o texto «importante» em negrito. Existem tags independentes, como a tag <hr/>, que exibe uma linha horizontal. Não iremos rever todas as tags que podem ser encontradas no texto HTML. Existem muitos programas de software WYSIWYG que permitem criar uma página web sem escrever uma única linha de código HTML. Estas ferramentas geram automaticamente o código HTML para um layout criado utilizando o rato e controlos predefinidos. Pode, assim, inserir (utilizando o rato) uma tabela na página e, em seguida, visualizar o código HTML gerado pelo software para descobrir as tags a utilizar para definir uma tabela numa página web. É tão simples quanto isso. Além disso, o conhecimento de HTML é essencial, uma vez que as aplicações web dinâmicas têm de gerar elas próprias o código HTML para enviar aos clientes web. Este código é gerado programaticamente e, naturalmente, é necessário saber o que gerar para que o cliente receba a página web que deseja.

Resumindo, não é necessário conhecer toda a linguagem HTML para começar a programar para a Web. No entanto, este conhecimento é necessário e pode ser adquirido através da utilização de construtores de páginas Web WYSIWYG, como o DreamWeaver e dezenas de outros. Outra forma de descobrir as complexidades do HTML é navegar na Web e visualizar o código-fonte de páginas que apresentem elementos interessantes que ainda não tenha encontrado.

2.5.1. Um exemplo

Considere o exemplo seguinte, que inclui alguns elementos comumente encontrados num documento web, tais como:

uma tabela;
uma imagem;
um link.

Um documento HTML tem geralmente a seguinte forma:

<html> <head> <title>Um título</title> ... </head> <atributos do corpo> ... </body></html>

Todo o documento está delimitado pelas tags <html>...</html>. É composto por duas partes:

<head>...</head>: esta é a parte não exibível do documento. Fornece informações ao navegador que irá exibir o documento. Contém frequentemente as tags <title>...</title>, que definem o texto que aparecerá na barra de título do navegador. Pode também conter outras tags, nomeadamente as que definem as palavras-chave do documento, que são depois utilizadas pelos motores de busca. Esta secção pode ainda conter scripts, geralmente escritos em JavaScript ou VBScript, que serão executados pelo navegador.

<body attributes>...</body>: Esta é a secção que será exibida pelo navegador. As tags HTML contidas nesta secção indicam ao navegador o layout visual «desejado» para o documento. Cada navegador interpreta estas tags à sua maneira. Como resultado, dois navegadores podem exibir o mesmo documento web de forma diferente. Este é geralmente um dos desafios enfrentados pelos web designers.

O código HTML para o nosso documento de exemplo é o seguinte:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>
 
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />
 
  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>
 
  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>

HTML	Etiquetas HTML e exemplos
título do documento	<title>tags</title> (linha 5) O texto «tags» aparecerá na barra de título do navegador quando o documento for exibido
barra horizontal	<hr/>: exibe uma linha horizontal (linha 10)
tabela	<atributos da tabela>....</table>: para definir a tabela (linhas 12, 32) <thead>...</thead>: para definir os cabeçalhos das colunas (linhas 13, 19) <tbody>...</tbody>: para definir o conteúdo da tabela (linhas 20, 31) <atributos tr>...</tr>: para definir uma linha (linhas 21, 25) <td attributes>...</td>: para definir uma célula (linha 22) exemplos: <table border="1">...</table>: o atributo border define a espessura da borda da tabela <td style="width: 150px; text-align: center;">cell(1,2)</td>: define uma célula cujo conteúdo será cell(1,2). Este conteúdo será centralizado horizontalmente (text-align: center). A célula terá uma largura de 150 píxeis (width: 150px)
imagem	<img border="0" src="/images/cherrytree.jpg"/> (linha 38): define uma imagem sem borda (border="0") cujo ficheiro de origem é /images/cherrytree.jpg no servidor web (src="/images/cherrytree.jpg"). Este link está localizado num documento web acessível através do URL http://localhost:port/html/balises.htm. Portanto, o navegador irá solicitar o URL http://localhost:port/images/cerisier.jpg para recuperar a imagem aqui referenciada.
link	<a href="http://istia.univ-angers.fr">here</a> (linha 42): faz com que o texto «here» funcione como um link para a URL http://istia.univ-angers.fr.
fundo da página	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (linha 8): especifica que a imagem a ser utilizada como fundo da página está localizada no URL /images/standard.jpg no servidor web. No contexto do nosso exemplo, o navegador irá solicitar o URL http://localhost:port/images/standard.jpg para recuperar esta imagem de fundo. Além disso, o corpo do documento será apresentado dentro de um retângulo com 400 píxeis de altura e 400 píxeis de largura.

Este exemplo simples mostra que, para renderizar o documento na íntegra, o navegador deve efetuar três pedidos ao servidor:

http://localhost:port/html/balises.htm para recuperar o código-fonte HTML do documento
http://localhost:port/images/cerisier.jpg para recuperar a imagem cerisier.jpg
http://localhost:port/images/standard.jpg para recuperar a imagem de fundo standard.jpg

2.5.2. Um formulário HTML

O exemplo seguinte mostra um formulário:

O código HTML que produz esta visualização é o seguinte:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>
 
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

A associação visual entre <--> e a tag HTML é a seguinte:

Visual	Etiqueta HTML
form	<form method="post" action="...">
campo de entrada	<input type="text" name="txtInput" size="20" value="algumas palavras" />
campo de entrada oculto	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
campo de entrada multilinha	<textarea rows="2" name="inputArea" cols="20"> linha1 linha2 linha3 </textarea>
botões de opção	<input type="radio" value="Sim" name="R1" />Sim <input type="radio" name="R1" value="Não" checked="checked" />Não
caixas de seleção	<input type="checkbox" name="C1" value="one" />1 <input type="checkbox" name="C2" value="dois" checked="checked" />2 <input type="checkbox" name="C3" value="três" />3
Lista suspensa	<select size="1" name="cmbValues"> <option value="1">opção1</option> <option selected="selected" value="2">opção2</option> <option value="3">opção3</option> </select>
lista de seleção única	<select size="3" name="lst1"> <option selected="selected" value="1">lista1</option> <option value="2">lista2</option> <option value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
lista de seleção múltipla	<select size="3" name="lst2" multiple="multiple"> <option value="1">lista1</option> <option value="2">lista2</option> <option selected="selected" value="3">lista3</option> <option value="4">lista4</option> <option value="5">lista5</option> </select>
botão de envio	<input type="submit" value="Enviar" name="cmdSubmit" />
botão de reiniciar	<input type="reset" value="Redefinir" name="cmdReset" />
botão	<input type="button" value="Limpar" name="cmdClear" onclick="clear()" />

Vamos rever estas diferentes tags:

2.5.2.1. O formulário

form


<form method="post" action="FormulairePost.aspx">

Etiqueta HTML

<form name="..." method="..." action="...">...</form>

atributos

name="frmexample": nome do formulário

method="..." : método utilizado pelo navegador para enviar os valores recolhidos no formulário para o servidor web

action="..." : URL para a qual os valores recolhidos no formulário serão enviados.

Um formulário web é delimitado pelas tags <form>...</form>. O formulário pode ter um nome (name="xx"). Isto aplica-se a todos os controlos presentes num formulário. O objetivo de um formulário é recolher informações introduzidas pelo utilizador através do teclado ou do rato e enviá-las para um URL de servidor web. Qual? Aquele referenciado no atributo action="URL". Se este atributo estiver em falta, as informações serão enviadas para o URL do documento no qual o formulário se encontra. Um cliente web pode utilizar dois métodos diferentes, denominados POST e GET, para enviar dados para um servidor web. O atributo method="método", em que método é definido como GET ou POST, na tag <form> indica ao navegador qual o método a utilizar para enviar as informações recolhidas no formulário para o URL especificado pelo atributo action="URL". Quando o atributo method não é especificado, o método GET é utilizado por predefinição.

2.5.2.2. Campos de entrada de texto

campo de entrada

<input type="text" name="txtInput" size="20" value="algumas palavras" />

<input type="password" name="txtPassword" size="20" value="aPassword" />

Etiqueta HTML

<input type="..." name="..." size=".." value=".."/>

A tag input existe para vários controlos. É o atributo type que distingue estes diferentes controlos uns dos outros.

atributos

type="text": especifica que este é um campo de entrada de texto

type="password": os caracteres no campo de entrada são substituídos por asteriscos (*). Esta é a única diferença em relação a um campo de entrada normal. Este tipo de controlo é adequado para introduzir palavras-passe.

size="20": número de caracteres visíveis no campo — não impede a introdução de mais caracteres

name="txtInput": nome do controlo

value="algumas palavras": texto que será exibido no campo de entrada.

2.5.2.3. Campos de entrada multilinha

campo de entrada multilinha

<textarea rows="2" name="areaSaisie" cols="20">

linha1

linha2

linha3

</textarea>

Tag HTML	<textarea ...>texto</textarea> exibe um campo de entrada de texto com várias linhas, com texto já inserido
atributos	rows="2": número de linhas cols="'20" : número de colunas name="areaSaisie": nome do controlo

2.5.2.4. Os botões de opção

botões de opção

<input type="radio" value="Yes" name="R1" />Sim

<input type="radio" name="R1" value="No" checked="checked" />Não

Etiqueta HTML

<input type="radio" attribute2="value2" ..../>texto

exibe um botão de opção com texto ao lado.

atributos

name="radio": nome do controlo. Os botões de opção com o mesmo nome formam um grupo de botões mutuamente exclusivos: apenas um deles pode ser selecionado.

value="value": valor atribuído ao botão de opção. Não confunda este valor com o texto exibido ao lado do botão de opção. O texto serve apenas para fins de exibição.

checked="checked": se este atributo estiver presente, o botão de opção está marcado; caso contrário, não está.

2.5.2.5. Caixas de seleção

Caixas de seleção

<input type="checkbox" name="C1" value="um" />1

<input type="checkbox" name="C2" value="dois" checked="checked" />2

<input type="checkbox" name="C3" value="três" />3

Etiqueta HTML

<input type="checkbox" attribute2="value2" ....>texto

exibe uma caixa de seleção com texto ao lado.

atributos

name="C1": nome do controlo. As caixas de seleção podem ou não ter o mesmo nome. As caixas de seleção com o mesmo nome formam um grupo de caixas de seleção associadas.

value="valor": valor atribuído à caixa de seleção. Não confunda este valor com o texto exibido ao lado do botão de opção. O texto serve apenas para fins de exibição.

checked="checked": se este atributo estiver presente, a caixa de seleção está marcada; caso contrário, não está.

2.5.2.6.

Combo

<option value="1">opção1</option>

<option selected="selected" value="2">opção2</option>

<option value="3">opção3</option>

</select>

Etiqueta HTML

<select size=".." name="..">

<option [selected="selected"] value=”v”>...</option>

...

</select>

exibe o texto entre as tags <option>...</option> numa lista

atributos

name="cmbValeurs": nome do controlo.

size="1": número de itens visíveis da lista. size="1" torna a lista equivalente a uma caixa de combinação.

selected="selected": se esta palavra-chave estiver presente para um item da lista, esse item aparece selecionado na lista. No nosso exemplo acima, o item da lista choice2 aparece como o item selecionado na caixa combinada quando é exibido pela primeira vez.

value=”v”: se o item for selecionado pelo utilizador, este valor [v] é enviado para o servidor. Se este atributo estiver ausente, o texto exibido e selecionado é enviado para o servidor.

2.5.2.7. Lista de seleção única

lista de seleção única

<select size="3" name="lst1">

<option value="2">lista2</option>

<option value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

Etiqueta HTML	<select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> exibe o texto entre as tags <option>...</option> numa lista
atributos	os mesmos que para a lista suspensa que exibe apenas um item. Este controlo difere da lista suspensa anterior apenas no seu atributo size>1.

2.5.2.8. Lista de seleção múltipla

lista de seleção única

<option value="1" selected="selected">lista1</option>

<option selected="selected" value="3">lista3</option>

<option value="4">lista4</option>

<option value="5">lista5</option>

</select>

Etiqueta HTML	<select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> exibe o texto entre as tags <option>...</option> numa lista
atributos	multiple: permite que vários itens sejam selecionados da lista. No exemplo acima, os itens list1 e list3 estão ambos selecionados.

2.5.2.9. Botão

botão

<input type="button" value="Limpar" name="cmdClear" onclick="clear()" />

Etiqueta HTML

<input type="button" value="..." name="..." onclick="clear()" ..../>

atributos

type="button": define um controlo de botão. Existem dois outros tipos de botões: submit e reset.

value="Limpar": o texto exibido no botão

onclick="function()": permite definir uma função a ser executada quando o utilizador clica no botão. Esta função faz parte dos scripts definidos no documento web apresentado. A sintaxe acima é a sintaxe do JavaScript. Se os scripts forem escritos em VBScript, deve escrever onclick="function" sem os parênteses. A sintaxe permanece a mesma se for necessário passar parâmetros para a função: onclick="function(val1, val2,...)"

No nosso exemplo, clicar no botão Limpar chama a seguinte função de limpeza em JavaScript:

function clear() {

alert("Clicou no botão Limpar");

}

</script>

A função clear exibe uma mensagem:

2.5.2.10. Botão Enviar

Botão Enviar

<input type="submit" value="Enviar" name="cmdSend" />

Tag HTML	<input type="submit" value="Enviar" name="cmdRenvoyer" />
atributos	type="submit": define o botão como um botão para enviar dados do formulário para o servidor web. Quando o utilizador clica neste botão, o navegador envia os dados do formulário para o URL definido no atributo action da tag <form>, utilizando o método definido pelo atributo method dessa mesma tag. value="Submit": o texto exibido no botão

2.5.2.11. Botão de reinicialização

botão de reinicialização

<input type="reset" value="Reset" name="cmdReset" />

Etiqueta HTML	<input type="reset" value="Redefinir" name="cmdReset"/>
atributos	type="reset": define o botão como um botão de reinicialização do formulário. Quando o utilizador clica neste botão, o navegador restaura o formulário para o estado em que foi recebido. value="Reset": o texto exibido no botão

2.5.2.12. Campo oculto

campo oculto

<input type="hidden" name="secret" value="aValue" />

Etiqueta HTML

<input type="hidden" name="..." value="..."/>

atributos

type="hidden": especifica que este é um campo oculto. Um campo oculto faz parte do formulário, mas não é apresentado ao utilizador. No entanto, se o utilizador solicitar ao seu navegador que apresente o código-fonte, verá a presença da tag <input type="hidden" value="..."> e, consequentemente, o valor do campo oculto.

value="aValue": valor do campo oculto.

Qual é a finalidade do campo oculto? Permite que o servidor web retenha informações entre os pedidos de um cliente. Considere uma aplicação de compras online. O cliente adquire um artigo inicial, art1, na quantidade q1, na primeira página de um catálogo e, em seguida, passa para uma nova página do catálogo. Para recordar que o cliente adquiriu q1 artigos de art1, o servidor pode colocar esta informação num campo oculto no formulário web da nova página. Nesta nova página, o cliente compra q2 unidades do artigo art2. Quando os dados deste segundo formulário forem enviados para o servidor, este não só receberá a informação (q2,art2), mas também (q1,art1), que também faz parte do formulário como um campo oculto. O servidor web irá então colocar as informações (q1,art1) e (q2,art2) num novo campo oculto e enviar uma nova página do catálogo. E assim por diante.

2.5.3. Envio de valores de formulário para um servidor web por um cliente web

Mencionámos na lição anterior que o cliente web dispõe de dois métodos para enviar os valores de um formulário que apresentou para um servidor web: os métodos GET e POST. Vejamos um exemplo para perceber a diferença entre os dois métodos.

2.5.3.1. Método GET

Vamos realizar um teste inicial, em que, no código HTML do documento, a tag <form> é definida da seguinte forma:


<form method="get" action="FormulaireGet.aspx">

Quando o utilizador clicar no botão [1], os valores introduzidos no formulário serão enviados para a página ASP.NET [2]. Esta página não faz nada com estes parâmetros e devolve uma página vazia. Queremos apenas ver como o navegador transmite os valores introduzidos ao servidor web. Para tal, utilizaremos uma ferramenta de depuração disponível no Chrome. Ativamo-la premindo CTRL-I (maiúsculas) [3]:

Uma vez que estamos interessados no tráfego de rede entre o navegador e o servidor web, selecionamos o separador [Rede] acima e, em seguida, clicamos no botão [Enviar] no formulário. Trata-se de um botão [submit] dentro de uma tag [form]. O navegador responde ao clique solicitando o URL [FormulaireGet.aspx] especificado no atributo [action] da tag [form], utilizando o método GET especificado no atributo [method]. Obtemos então as seguintes informações:

A captura de ecrã acima mostra a URL solicitada pelo navegador após clicar no botão [Submit]. De facto, solicita a URL esperada [FormulaireGet.aspx], mas acrescenta informações adicionais — os valores introduzidos no formulário. Para obter mais informações, clique na ligação acima:

Acima [1, 2], vemos os cabeçalhos HTTP enviados pelo navegador. Estes foram formatados aqui. Para visualizar o texto bruto destes cabeçalhos, seguimos o link [ver código-fonte] [3, 4]. O texto completo é o seguinte:

GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Vemos elementos que já encontrámos anteriormente. Outros aparecem pela primeira vez:

Connection: keep-alive	o cliente pede ao servidor para não fechar a ligação após a sua resposta. Isto permitirá ao cliente utilizar a mesma ligação para um pedido subsequente. A ligação não permanece aberta indefinidamente. O servidor irá fechá-la após um período prolongado de inatividade.
Referer	O URL que estava a ser exibido no navegador quando a nova solicitação foi feita.

O novo elemento é a linha 1 nas informações que se seguem ao URL. Podemos ver que as escolhas feitas no formulário se refletem no URL. Os valores introduzidos pelo utilizador no formulário foram passados na solicitação GET URL?param1=valor1&param2=valor2&... HTTP/1.1, onde os parâmetros são os nomes (atributo name) dos controlos do formulário web e os valores são os valores a eles associados. Segue-se uma tabela de três colunas:

Coluna 1: apresenta a definição de um controlo HTML do exemplo;
Coluna 2: mostra como este controlo aparece num navegador;
Coluna 3: mostra o valor enviado ao servidor pelo navegador para o controlo da Coluna 1, na forma que assume na solicitação GET do exemplo.

Controlo HTML	Valor(es)	Valor(es) devolvido(s)
<input type="radio" value="Sim" name="R1"/>Sim <input type="radio" name="R1" value="Não" checked="checked"/>Não		R1=Sim - o valor do atributo value do botão de opção selecionado pelo utilizador.
<input type="checkbox" name="C1" value="one"/>1 <input type="checkbox" name="C2" value="dois" checked="checked"/>2 <input type="checkbox" name="C3" value="three"/>3		C1=um C2=dois - valores dos atributos value das caixas de seleção marcadas pelo utilizador
<input type="text" name="txtInput" size="20" value="algumas palavras "/>		txtInput=Programação+Web - texto digitado pelo utilizador no campo de entrada. Os espaços foram substituídos pelo sinal +
<input type="password" name="txtMdp" size="20" value="aPassword"/>		txtPassword=thisIsSecret - texto digitado pelo utilizador no campo de entrada
<textarea rows="2" name="inputArea" cols="20"> linha1 linha2 linha3 </textarea>		campo de entrada=noções+básicas+de+programação+Web%0D%0A programação+Web - texto digitado pelo utilizador no campo de entrada. %OD%OA é o marcador de fim de linha. Os espaços foram substituídos pelo sinal +
<select size="1" name="cmbValues"> <option value='1'>opção1</option> <option selected="selected" value='2'>opção2</option> <option value='3'>opção3</option> </select>		cmbValues=3 - Atributo [value] do elemento selecionado pelo utilizador
<select size="3" name="lst1"> <option selected="selected" value='1'>lista1</option> <option value='2'>lista2</option> <option value='3'>lista3</option> <option value='4'>lista4</option> <option value='5'>lista5</option> </select>		lst1=3 - Atributo [value] do elemento selecionado pelo utilizador
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>list1</option> <option value='2'>list2</option> <option selected="selected" value='3'>list3</option> <option value='4'>list4</option> <option value='5'>lista5</option> </select>		lst2=1 lst2=3 - Atributos [value] dos elementos selecionados pelo utilizador
<input type="submit" value="Enviar" name="cmdSubmit"/>		cmdRenvoyer=Submit - atributo de nome e valor do botão utilizado para enviar os dados do formulário para o servidor
<input type="hidden" name="secret" value="aValue"/>		secret=aValue - atributo value do campo oculto

2.5.3.2. Método POST

Modificamos o documento HTML para que o navegador utilize agora o método POST para enviar os valores do formulário para o servidor web:


  <form method="post" action="FormulairePost.aspx">

Preenchemos o formulário tal como fizemos para o método GET e enviamos os parâmetros para o servidor utilizando o botão [Submit]. Tal como demonstrado na secção anterior na página 32, podemos visualizar os cabeçalhos HTTP do pedido enviado pelo navegador no Chrome:

POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

Aparecem novos elementos no pedido HTTP do cliente:

POST HTTP/1.1	A solicitação GET foi substituída por uma solicitação POST. Os parâmetros já não estão presentes na primeira linha da solicitação. Podemos ver que agora estão colocados (linha 14) após a solicitação HTTP, , seguindo uma linha em branco. A sua codificação é idêntica à da solicitação GET.
Content-Length	número de caracteres «enviados», ou seja, o número de caracteres que o servidor web deve ler após receber os cabeçalhos HTTP para recuperar o documento enviado pelo cliente. O documento em questão aqui é a lista de valores do formulário.
Content-type	especifica o tipo de documento que o cliente enviará após os cabeçalhos HTTP. O tipo [application/x-www-form-urlencoded] indica que se trata de um documento que contém valores de formulário.

Existem dois métodos para transmitir dados a um servidor web: GET e POST. Será que um método é melhor do que o outro? Vimos que, se os valores de um formulário fossem enviados pelo navegador utilizando o método GET, o navegador exibiria o URL solicitado na sua barra de endereços na forma URL?param1=val1&param2=val2&.... Isto pode ser visto como uma vantagem ou uma desvantagem:

uma vantagem se pretender permitir que o utilizador guarde esta URL parametrizada nos seus favoritos;
uma desvantagem se não quiser que o utilizador tenha acesso a determinadas informações do formulário, tais como campos ocultos.

A partir de agora, utilizaremos o método POST quase exclusivamente nos nossos formulários.

2.6. Conclusão

Este capítulo apresentou vários conceitos básicos de desenvolvimento web:

comunicação cliente-servidor através do protocolo HTTP;
criação de um documento utilizando HTML;
o design de formulários de entrada.

Vimos um exemplo de como um cliente pode enviar informações para o servidor web. Não abordámos como o servidor pode

recuperar essas informações;
processá-las;
enviar ao cliente uma resposta dinâmica com base no resultado do processamento.

Este é o domínio da programação web, um tópico que abordaremos no próximo capítulo com uma introdução à tecnologia ASP.NET MVC.