Formulários HTML e Introdução à Programação Web

(1)

Formulários HTML e Introdução à Programação Web

Formulários

Até agora tivemos uma boa visão da parte gráfica e de hipertexto do HTML. Agora vamos ver como o HTML pode ser usado para fazer parte efetiva em um programa. Dissemos que HTML não é uma linguagem de programação - e não é mesmo - mas, pelo menos, ele permite, através dos forms, que se tenha em uma página coisas como botões e caixas de edição, elementos que já vimos na programação em ambientes gráficos. Através destes elementos, podemos “interagir” com a página HTML, enviando dados para o seu servidor ou para algum tipo de processamento por código em linguagem de script inserido na própria página.

A tag <form> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação da página. Para começar, vamos ver a sintaxe básica:

<form action="X" method="Y"> ... conteúdo do formulário ... </form>

action especifica o endereço de uma página/programa/script “X” para o qual serão enviados os dados do formulário.

method diz qual o método para enviar os dados . Existem dois métodos possíveis (get ou post) que transferem dados do navegador para o servidor da página. Usando post, os dados seguem junto ao “pacote” da mensagem enviada. Usando get, os dados seguem visíveis, anexados à URL especificada, que pode ter um limite máximo de tamanho. Se o tamanho da informação exceder este limite, o post torna-se obrigatório. Outra característica do post é que ele não deixa transparecer ao usuário comum o conteúdo dos dados transferidos. Por outro lado, um get pode ser “simulado” com digitação, o que é impossível com o post.

Os formulários podem conter qualquer texto ou tags comuns em HTML, mas os elementos específicos são as

tags de campos de entrada de dados <input>, <select> e <textarea> . Es tas tags terão um nome único (name ), que

identificará cada campo para uso posterior por uma linguagem de programação.

A tag <input> é usada para criar um elemento de entrada, com um destes tipos principais: caixa de edição (text), caixa de edição de senha (password), caixa de checagem (checkbox), botão de rádio (radio), botão comum (button), botão de submeter (submit), botão de reiniciar (reset) ou parâmetro “escodido” (hidden). O parâmetro value vai aparecer algumas vezes junto a estes tipos e significa um valor padrão para o campo (no caso de text ou password) ou o valor para ser reconhecido em processamento posterior (os demais casos).

Vamos ver alguns exemplos:

Para exibir uma caixa de edição pedindo o nome do usuário: Entre seu nome: <input type=text name="nome">

Para exibir uma caixa de edição pedindo a senha do usuário (ao digitar aparecem asteriscos): Entre sua senha: <input type=password name="senha">

Para exibir uma caixa de edição pedindo o país de nascimento do usuário: Entre seu país de origem: <input type=text name="pais" value=”Brasil”> Para exibir uma caixa de checagem (neste caso, para saber se o usuário é brasileiro): <input type=checkbox name="brasil" value="brasileiro">brasileiro?

Obs.: se adicionarmos o parâmetro checked no fim d a tag o campo já virá ma rcado. Para exibir botões de rádio (neste caso para saber o sexo do usuário):

<input type=radio name="sexo" value="M">masculino <br> <input type=radio name="sexo" value="F">feminino

Obs.: repare acima que o name é o mesmo porque são botões mutuamente exclusivos e funcionam em conjunto - quando um é marcado o outro é desmarcado. O parâmetro checked pode ser usado.

Além dos parâmetros que vimos, temos também o size (usado nos tipos text e password), que define o tamanho do espaço na página para o campo. Se não for especificado o padrão é de 20 espaços. Exemplo: <input

(2)

type=text name=”endereco” size=50> . Não confundir com maxlenght, outro parâmetro, que define o número máximo de caracteres aceitos em um campo. Exemplo: <input type=text name=”UF” maxlength=2> .

Exemplos de botões (submit e reset):

Para enviar os dados do formulário (“Enviar” será o rótulo do botão): <input type=submit value=”Enviar”>

Para reiniciar os dados (zerar ou voltar aos valores padrão): <input type=reset value="Limpar">

Botão comum (normalmente para uma chamada a um script): <input type=button name="button1" value="Clique Aqui!">

Parâmetro escondido (para mandar um valor sem que o usuário tenha que digitar nada): <input type=hidden name="exemplo" value="1001">

Além dos inputs, existem outras duas tags comuns em forms: select e textarea. A tag <select> exibe uma lista de opções para o usuário selecionar uma (é o ComboBox, que já conhecemos). Veja o exemplo:

Escolha uma forma de pagamento: <select name="pag">

<option selected value="1">dinheiro <option value="2">cheque

<option value="3">cartão </select>

Repare acima que há uma opção pré -selecionada (dinheiro), mas isso é opcional. Outra possibilidade é usar o parâmetro multiple no select para possibilitar escolha múltipla.

A tag <textarea> permite entrada de texto com várias linhas. Veja exemplo: <textarea cols=30 rows=6 name="sugestao"> dê sua sugestão </textarea>

Exercício: Faça uma página HTML com um form de cadastro de livros, contendo título, autor, editora, a língua do livro (botão de rádio: português, inglês, espanhol, outras) e um resumo (textarea de 4 linhas de 80 colunas ).

Sugestão: tabele os campos do form para ver como ficaria a organização tabular na página (uma técnica criticada, mas bastante usada na web).

Como processar os dados?

Obviamente, supõe-se que os dados vindos de um formulário HTML sejam processados em algum momento. Mas como e por quem? A resposta não é de surpreender: já que HTML não é uma linguagem de programação, os dados só podem ser processados por programas feitos em outras linguagens.

Para introduzir este assunto, vamos tentar entender algumas questões. Vimos que os dados passados por post ou get seguem para uma “página” apontada por action, dentro do tag <form> . Mas, que páginas são essas? O que fazem com os dados que recebem? Podemos simplesmente chamar um programa de dentro do navegador, sem passar dado algum? Que tipo de “página” ou “programa” podemos chamar de dentro do nosso texto em HTML?

Vamos dar uma visão geral das principais possibilidades que temos, que podem ser divididas em três tipos: o processamento no cliente (computador do usuário) dentro da própria página HTML, o processamento em programas (chamados pelas páginas HTML, mas rodando em separado) no cliente e o processamento no servidor (em programas separados ou embutidos nas páginas). Ou uma mistura de tudo isso...

Processamento no Cliente Dentro da Própria Página HTML

Normalmente para tarefas mais simples. O exemplo mais conhecido de linguagem que permite criar pequenos programas (ou scripts) inseridos nas páginas HTML é Javascript, criada pela Netscape (o nome "java" foi licenciado pela Sun). Existem outras linguagens de script (VBScript, da Microsoft, por exemplo).

(3)

Os trechos de programa nestas linguagens estão dentro da página HTML entre os tags <script> e </script> . Abaixo, um "Alô Mundo!" em Javascript:

<html> <body> <script language="javascript"> document.write("Alô Mundo!"); </script> </body> </html>

Um outro “Alô, mundo!”, dessa vez em VBScript (abra no Internet Explorer):

</body> </html>

Uma soma simples em VBScript...

uma soma simples em VBScript:<br> <script language="VBScript"> a=1 b=2 Document.Write a+b Document.Write "<br>" </script> </body> </html>

A linguagem de script desse tipo que vamos ver no curso é Javascript.

Processamento de Programas no Cliente (computador do usuário)

Eventualmente, para uma tarefa simples e que não tenha que, necessariamente, estar conectada ao servidor, o processamento pode ser feito na própria máquina do usuário , em programas que funcionem como se estivessem "instalados" nela. Existem várias alternativas que funcionam mais ou menos dessa forma: Flex, Java Web Start, controles ActiveX, Windows Forms, etc. A que veremos no curso são os applets Java. O problema com este tipo de programa é que, estando no cliente, pode precisar de instalação e atualização local - o que pode acabar com a maior vantagem dos programas para a web, caso o programador exagere quanto ao tamanho do aplicativo. Aliás, o nome "applet" sugere exatamente uma aplicação pequena, leve, já que deverá ser baixada para a máquina cliente.

Os applets Java são pequenos programas que podem ser rodados por qualquer navegador que suporte esta linguagem (possivelmente todos) ou por aplicativos específicos para rodar applets. Vamos ver um pequeno exemplo de "Alô, mundo" em um applet Java.

import java.applet.Applet; import java.awt.*;

public class Alo extends Applet { public void paint(Graphics g) { g.drawString("Alô, mundo!",10,10); }

}

O arquivo acima é salvo como Alo.Java e codificado para bytecodes como Alo.class. Para executá-lo, precisamos de uma página HTML com uma chamada ao mesmo. Veja o exemplo a seguir:

(4)

<b>O navegador não está permitindo uso de Applets Java</b> </applet>

</body> </html>

Quem quiser conhecer outra possibilidade de forma rápida, pode testar um controle ActiveX, que é um programa executável, feito em ambientes de desenvolvimento como Visual Basic ou Delphi, por exemplo, convertido para o padrão ActiveX. Desta forma, controles ActiveX podem ser rodados diretamente de dentro de um aplicativo que seja capaz de entender o padrão (o mais comum é o navegador Internet Explorer). Parte do conjunto de tecnologias ActiveX tem sido “desencorajada” pela Microsoft, sugerindo a migração para a plataforma .NET (mais abrangente e compatível, embora tenha idéias em comum). Mas muitos controles ActiveX ainda estão em uso (dentro da p rópria Microsoft, inclusive...).

Vamos criar um pequeno Form ActiveX no Delphi, para testar este tipo de programa. Entre no Delphi, feche a aplicação inicial (File - Close All) e peça “File - New - Other”, escolha a guia “ActiveX”, opção “ActiveForm” e clique “OK”. Neste momento vai aparecer o “Active Form Wizard”, que é um assistente para criação de Forms ActiveX (também chamados ActiveForms). Mantenha todas as opções conforme sugeridas e clique “OK”. Vai aparecer um Form, aparentemente normal, porém, este Form já está preparado para se tornar um componente ActiveX, para ser rodado em um programa que entenda este padrão. Coloque um Label e um Button no Form, troque o Caption d o Label para “Alô” e o do botão para “Clique aqui”. Programe o evento OnClick do botão com a linha abaixo:

Label1.Caption:='Alô, mundo!';

Selecione a opção “Project - Web Deploy”, que serve para instalar o projeto. Como estamos trabalhando localmente, basta especificar um diretório local qualquer para o projeto nos três Edits (Target Dir, Target URL e HTML dir). Clique “OK”. Entre outros arquivos, o Delphi criou (no diretório especificado), um controle ActiveX (OCX) e uma página HTML, com a ligação para o controle. Basta registrar o componente no Windows (Run - Register ActiveX Server) e abrir a página criada em HTML no Internet Explorer. O Form aparecerá funcionando dentro do navegador. Os controles ActiveX são muito interessantes, o seu problema maior são as brechas na segurança que proporcionam.

Processamento no Servidor

Até alguns anos atrás, praticamente só existia uma possibilidade para o servidor receber os dados vindos de um formulário HTML do cliente: o CGI (Common Gateway Interface), uma interface no servidor que recebe os dados, os processa e retorna um documento com o resultado. O CGI permite a execução de um programa no servidor, que é carregado toda vez que há necessidade. Este é, talvez, o maior problema do CGI: cada vez que alguém envia dados através de uma página, uma cópia do programa de resposta deve ser carregada na memória do servidor. Para páginas muito acessadas, isto representa um gasto de tempo e memória muito grande para o servidor.

O documento gerado pelo programa é uma página montada dinamicamente com os dados necessários à resposta para o usuário. Por exemplo: suponha um site de banco que emite um ext rato de conta pela Internet; é claro que o extrato não existe a priori, mas deve ser montado na hora, de acordo com o pedido (agência, conta, data inicial, data final, etc.). Uma coisa interessante no CGI é que podem ser usados vários ambientes/linguagens de programação, desde que possa haver comunicação com a interface CGI.

Com o tempo, surgiram algumas alternativas ao CGI, mas com uma atuação semelhante. Exemplos são os padrões ISAPI (Microsoft) e NSAPI (Netscape), cuja função é semelhante a do CGI, porém a implementação é feita em bibliotecas de software dinâmicas (DLLs) que, com uma única cópia carregada na memória do servidor, podem servir a várias requisições. Ambientes desktop como o Delphi ou Visual Basic têm alguns assistentes ou utilitários para gerar programas deste tipo. Linguagens específicas para web também podem ser usadas junto ao ISAPI ou NSAPI (e com o CGI também).

Outra opção para processamento no servidor (em grande utilização no momento) é criar programas em linguagens que já “nasceram” para a web ou que foram bem adaptadas para esse ambiente. Estas linguagens permitem criar páginas com programas que, como já falamos, processam os dados recebidos da web e enviam páginas de resposta. Alguns exemplos de linguagens desse tipo: Perl, Python, Ruby, PHP, ASP ou ASP.NET (usando VB.NET ou C#, por exemplo) e JSP (JavaServer Pages). Elas podem ser usadas como linguagens de script, junto com trechos em HTML. Apesar de poderem ser combinadas com páginas em HTML, deve ficar claro que serão processadas no servidor e apenas o resultado segue para o usuário. Não veremos nada desse tipo em LP6, mas, na disciplina de Modelagem de Hipermídia, conheceremos o JSP (JavaServer Pages).

(5)

Sistemas Híbridos

As possibilidades que vimos não são as únicas; algumas técnicas desenvolvidas para rodar no computador cliente (do usuário) podem ser usadas no servidor (e vice-versa), dependendo do caso. A tecnologia AJAX, por

exemplo, permite que, do cliente, usando Javascript, se possa acessar o servidor sem precisar recarregar a página inteira, trazendo apenas os dados pedidos (algo semelhante a um sistema tradicional cliente-servidor).

Além disso, é comum que um sistema de porte médio a grande seja desenvolvido usando várias linguagens e plataformas misturadas. É claro que muita coisa ainda pode ainda ser feita em um ambiente com uma linguagem única; mas, para uma atuação mais profissional na criação de sistemas, o desenvolvedor deve dominar vários ambientes e linguagens para proporcionar uma solução ótima. Normalmente, o que se faz é combinar vários esquemas de programação para criar um produto que satisfaça as exigências de qualidade, rapidez e segurança. Os sistemas atuais podem misturar janelas gráficas tradicionais, para uma parte mais interna ao sistema (que não precisa ficar “aberta” ao mundo, pela Internet), com páginas web (para acesso interno e/ou externo à empresa - e dentro destas, pode haver partes em Javascript, parte e m JSP, PHP ou outra linguagem server-side, partes em applets ou Fle x,, etc., etc., etc.).

Conclusão

Como podemos observar, temos inúmeras possibilidades em termos de programação para Internet. Obviamente, não é objetivo deste texto esgotar o assunto, mas apenas colocar um pouco de "ordem" n os tópicos relacionados ao desenvolvimento web, por vezes ainda carentes de soluções tecnologicamente poderosas e mais amigáveis. Particularmente - e isto é minha opinião - ainda aguardo para o desenvolvimento web algo como o VB e o Delphi fizeram pela programação cliente-servidor "tradicional" para ambiente win32. Temos presenciado algumas tentativas de facilitar a vida do desenvolvedor web: a evolução dos ambientes integrados para Java, a plataforma .NET (em especial o Visual Studio, da Microsoft), o Intraweb da Atozed, o Dreamweaver da Macromedia, a já citada tecnologia AJAX, diversos frameworks web (às vezes até com facilidades visuais), etc. Certamente é difícil unir tantas coisas em uma ferramenta única e o processo de desenvolvimento destas tem ficado muito complexo (haja vista o caso da Borland, tradicional produtora de software, que parece ter “jogado a toalha”, se desfazendo de sua linha de produtos específicos de desenvolvimento). Talvez até fosse bem-vinda (embora pouco provável) uma modificação mais radical, na base da Internet, visando facilitar seu uso como ambiente para programas, visto que ela não foi criada com este propósito. O XHTML (que veremos período que vem) até tenta por um pouco de racionalidade no processo, mas, mes mo que venha a ser adotado de fato, ainda não soluciona tudo. De qualquer forma, acredito que, com o tempo, tudo se resolv a.