|
|
|
Formulários
Utilizando o HTML e os elementos correspondentes para gerar um formulário, é necessário ter, por trás do servidor WWW, um script ou programa CGI que receba e interprete os dados que o utilizador da página WWW submeta. No entanto, é uma necessidade frequente das aplicações Web efectuar algumas validações sobre os dados introduzidos num formulário, antes de estes serem remetidos para o servidor. . Os programas JavaScript têm, naturalmente, como um dos seus maiores campos de aplicação o processamento local de dados introduzidos pelo utilizador e, portanto, o assunto dos formulários assume a maior importância.
Introdução Apesar de os programas JavaScript de cliente poderem substituir muitas das aplicações tradicionais HTML / CGI - scripts de servidor (nomeadamente aquelas que envolverem simples cálculos com os dados que são introduzidos, em que não existe vantagem em haver interacção com um servidor), também é verdade que podem ser utilizados com vantagem em conjunto com programas CGI do lado do servidor, efectuando algumas operações simples (por exemplo, de verificação ou validação dos dados) antes de os dados serem passados para o servidor. Vejamos dois exemplos:
Se quiser fazer um programa JavaScript que calcule os dados do IRS a pagar ou a receber, pode tratar-se de operar unicamente sobre dados que o utilizador da página WWW introduz. Se não tiver necessidade de interacção com dados de uma base de dados no servidor, não será necessário a existência de nenhuma componente CGI no servidor, uma vez que todos os cálculos podem ser realizados ao nível do cliente. A página HTML Contendo o script JavaScnpt e importada pelo cliente, não sendo depois disso necessária nenhuma comunicação com o servidor remoto para a correcta execução do programa. O script é interpretado localmente, enviando uma página com um formulário ao utilizador. Este preenche a página e envia-a, sendo realizados os cálculos no cliente (pelo programa JavaScript) e devolvido o resultado. Este tipo de utilização de scripts JavaScript é bastante. Alguns outros exemplos de situações em que pode surgir são: calculadoras, programas de conversão de unidades, câmbios de moeda, etc. A grande vantagem deste tipo de utilização é, sem dúvida, a inexistência de comunicação com o servidor, garantindo bastante rapidez de execução, a partir do momento em que termina a importação do script. A desvantagem é sobrecarregar o cliente com processamento, o que se pode traduzir em lentidão, conforme os recursos que estejam disponíveis na máquina.
Caso esteja a desenvolver uma página para o utilizador preencher os dados e envia-los para o servidor, por exemplo a uma encomenda de pizzas que será feita via Internet. Neste caso, é forçoso existir uma componente de scripting do lado do servidor, que aceita os dados preenchidos no ecrã e que faz qualquer coisa com eles (colocará a encomenda numa base de dados). Nesta situação, o procedimento é semelhante, mas após a conclusão e validação do formulário, é que o resultado é enviado para a aplicação CGI que reside no servidor e que, eventualmente, processará a encomenda.
Tanto num caso como noutro são utilizados ecrãs pré-formatados (formulários) para gerir a entrada dos dados do utilizador. Num e noutro caso, o JavaScript é um precioso auxiliar no trabalho com os formulários HTML, contribuindo para eliminar parte do peso excessivo que os múltiplos clientes poderiam colocar sobre o servidor.
Elementos dos formulários e Objectos relacionados No JavaScript utiliza-se um objecto, denominado form, para referenciar os elementos dos formulários, que são os tradicionalmente usados em HTML. Contudo, um documento pode conter várias forms, razão pela qual os objectos de tipo form se agrupam em arrays de forms. Vejamos uma descrição do que é o objecto form e qual o conjunto de propriedades e métodos que utiliza.
Objecto form Propriedades:
action Uma string contendo o valor a atribuir ao atributo "action", do elemento HTML <form>, que contém o script CGI a ser executado quando o conteúdo do formulário é submetido.
elements Um array contendo uma entrada correspondente a cada elemento existente no formulário (campos de texto, caixas de escolha, etc...).
encoding Tipo de codificação MIME utilizado no conteúdo enviado para o servidor (correspondente ao atributo "enctype", do elemento HTML <form>.
length Número de elementos contidos no formulário, ou seja, o comprimento do array elements.
method Identifica o atributo "method".
name string contendo o nome da form (correspondente ao atributo name).
target Por fim, este parâmetro que traduz o "target" do elemento <form> e que é utilizado para conter o nome da Frame e que a form é utilizada.
Métodos:
submit() Submete o formulário para o programa CGI ou server side script correspondente.
Os formulários em HTML são construídos com base num conjunto de elementos distintos, usados para a entrada dos dados. Os scripts JavaScript operaram sobre os elementos componentes dos formulários, bem como sobre os seus conteúdos, utilizando, para tal, as propriedades e métodos dos objectos associados.
Área de Texto: TextArea A área de texto é um campo no qual o utilizador pode colocar múltiplas linhas de texto. O aspecto inicial do objecto no ecrã é fácil de configurar, modificando os valores dos campos "rows" (linhas) e "cols" (colunas). A sintaxe é a seguinte: <textarea name = "nome" rows = "n_linhas" cols = "n_cols"> Texto inicial... </textarea>
Atributos:
name Nome que designa o elemento de texto.
rows Número de linhas da janela e texto.
cols Largura (em colunas) da janela de texto.
"texto inicial" Texto integrado na área de texto.
<form method = "post"> <textarea rows = "4" cols = "40"> Texto inicial... </textarea> </form>
O objecto JavaScript "textarea" tem o seguinte conjunto de propriedades e métodos:
Propriedades:
defaultValue Indica o valor inicial que vai aparecer na zona de texto (especificado como atributo do elemento HTML <input ...>.
form Referencia o objecto "form" que identifica o formulário que contém o campo.
name Nome atribuído ao elemento (também um atributo de <input ...>.
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco (elemento da form seleccionado para entrada de dados) no elemento de texto,
blur() Retira o foco.
select() Selecciona o texto contido no elemento de texto.
Lista de Escolha: Select Este elemento corresponde a uma caixa de escolhas, na qual o utilizador pode seleccionar entre um conjunto predeterminado de itens, quer seja num menu, quer numa lista de opções, A sintaxe a empregar em HTML para construir um elemento deste tipo é, a seguinte:
<select name = "lista"> <option selected value = "item1" > Item1 <option value = "item2" > Item2 <option value = "item3" > Item3 </select>
Neste caso, o item que está seleccionado (predefinido) é o "item1", razão pela qual, ao surgir o elemento na página HTML correspondente, surge como visível à partida o elemento "item1". O elemento <select ...> aceita como atributos os seguintes parâmetros:
Atributos:
name Nome que designa o elemento.
size Parâmetro que designa o número de escolhas a mostrar. Se não for preenchido, os Itens surgem como um menu, caso contrário, surgem dentro de uma caixa de escolhas com o número de elementos visíveis colocado em size.
multiple Caso este parâmetro seja definido, são autorizadas escolhas de múltiplos itens da lista. Normalmente, só um elemento pode ser seleccionado.
<select name = "lista" size = "2">
<select multiple name = "lista">
O objecto JavaScript "select" tem o seguinte conjunto de propriedades e métodos:
Propriedades:
form Referencia o formulário que contém o elemento select.
length Número de elementos (opções) da lista de selecção.
name Nome do elemento.
selectedIndex Índice do item correntemente seleccionado.
type Toma o valor "select_one" se o atributo HTML "multiple" estiver não activo e "select_multiple" no caso contrário.
options Array contendo os diversos itens disponíveis para selecção.
A propriedade options contém em si um conjunto de propriedades que se enumeram em seguida:
defaultSelected Indica se a opção estava ou não seleccionada à partida.
index Número de índice da opção.
length Número de opções da lista.
name Nome da lista de selecção.
options Código HTML completo da lista.
selected Indica se a opção está seleccionada,
selectedIndex Número de índice da opção seleccionada.
text Texto mostrado na lista de escolha para a opção em causa.
value Valor da opção em causa.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
Elemento de Entrada de Dados: Input O elemento de tipo Input é aquele que no HTML apresenta maior diversidade tipos e variantes, podendo ser construídos formulários com objectos bastamte distintos. Neste tipo de elemento estão incluídas formas de introdução de dados que s campos com linhas únicas de texto (Text), campos para entrada de passwords, botões (de pressão e tipo radio) e caixas seleccionáveis. . A sintaxe é a seguinte: <input type = "tipo" parâmetros>
Os parâmetros que o input suporta são os seguintes:
Parâmetros:
name Nome que designa o elemento.
size Tamanho visível do campo (número de caracteres),
maxlength Número de caracteres máximo admissível no campo.
value Texto inicial a ser mostrado ou posição inicial do botão de selecção.
checked No caso dos botões de selecção, ou das caixas de selecção, coloca o valor do campo como seleccionado.
type Tipo de elemento.
De entre estes parâmetros, o mais importante é, sem dúvida, o tipo (type). É este que define qual o elemento de tipo input que vai aparecer na folha HTML. Os diversos tipos disponíveis são os seguintes.
type = “Text” Campo de texto simples. <form method = "post"> Apelido: <input type = "text" name = "apelido" size = "20" maxlength = "30" /> </form>
O objecto JavaScript “text” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
defaultValue Indica o valor inicial que vai aparecer na zona de texto (especificado como parâmetro do elemento HTML <input ...>.
form Referencia o formulário que contém o elemento input.
name Nome atribuído ao elemento (também um atributo de <input ...>.
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
select() Selecciona o texto contido no elemento de texto.
type = “Hidden” O elemento de tipo hidden é um elemento que não é apresentado de forma visível pelo browser Web. Como o nome indica, destina-se a conter valores que são para permanecer escondidos do utilizador, mas que, contudo, são enviados juntamente com os restantes para processamento pelo script CGI ou server side script.
<input type = "hidden" ...>
O objecto JavaScript "hidden" tem o seguinte conjunto de propriedades e métodos:
Propriedades:
form Referencia o formulário que contém o elemento.
name Nome do elemento.
type Valor do atributo "type".
value Valor contido no elemento.
type = “Password” O elemento "password" é um elemento que se comporta de forma idêntica a um elemento de texto, com a particularidade de não mostrar aquilo que o utilizador escreve no ecrã (guardando, contudo, esse valor). E ideal para entrada de dados confidenciais tais como, uma palavra de passe (password) ou um código secreto.
<form method = "post"> Palavra Passe: <input type = "password" name = "pword" size = "20" maxlength = "30" /> </form>
O objecto JavaScript “password” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
defaultValue Valor inicial contido no elemento.
form Referencia o formulário que contém o elemento.
name Nome do elemento.
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
select() Selecciona o texto contido no elemento de texto.
type = “Checkbox” Este tipo "checkbox" transforma o elemento "input" numa caixa de selecção, que pode ser, ou não, seleccionada pelo utilizador.
<form method = "post"> Caixas de escolha:<p/> <input type = "checkbox" name ="campo1" /> Caixa1 <input type = "checkbox" name ="campo2" checked />Caixa2 <input type = "checkbox" name ="campo3" />Caixa3 </form>
O parâmetro checked, do elemento input está activo, assim, a caixa 2 está inicialmente seleccionada. O utilizador da página pode mudar o estado das caixas de escolha como pretender.
O objecto JavaScript “checkbox” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
checked Indica se o elemento está ou não seleccionado.
defaultChecked Indica se o elemento em causa está à partida seleccionado ou não.
form Referencia o formulário que contém o elemento.
name Nome do elemento (atributo "name").
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
click() Acção idêntica a um clique de rato sobre o elemento.
type = “Radio” Os botões "Radio" simulam de alguma forma os botões de pressão dos rádios e televisões antigas, em que, ao pressionar um botão do conjunto, qualquer outro que estivesse pressionado saltava e deixava de o estar. Desta forma, só um botão de um conjunto de botões Radio pode estar activo em cada instante.
<form method = "post"> Canal escolhido: /> <input type = "radio" name = "tv" value = "RTP1" checked /> RTP1 <input type = "radio" name = "tv" value = "2:" /> 2: <input type = "radio" name = "tv" value = "SIC" /> SIC <Input type = "radio" name = "tv" value = "TVI" /> TVI </form>
Ao escolher qualquer uma das outras opções alternativas, a opção que estava seleccionada anteriormente deixa de o estar.
O objecto JavaScript “radio” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
checked Indica se o elemento está ou não seleccionado.
defaultChecked Indica se o elemento em causa está à partida seleccionado ou não.
form Referencia o formulário que contém o elemento.
length Número de botões do conjunto de botões Radio a que o elemento pertence.
name Nome do conjunto de botões Rádio.
type Valor do atributo "type".
value Valor de um botão específico num conjunto de botões Radio.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
click() Acção idêntica a um clique de rato sobre o elemento.
type = “Reset”
O botão de reset tem como única função limpar a form para voltar a preencher. <input type = "reset" value = "Limpar" />
O objecto JavaScript “reset” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
form Referencia o formulário que contém o elemento.
name Nome do elemento (atributo "name").
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
click() Clique de rato sobre o elemento.
type = “Submit” O botão de submit envia os dados da form para o script CGI ou server side script declarado no formulário. <input type = "submit" value = "Enviar" />
O objecto JavaScript “submit” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
form Referencia o formulário que contém o elemento.
name Nome do elemento (atributo "name").
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
click() Clique de rato sobre o elemento.
type = “Button” O botão “button” tem uma utilização genérica, pois serve para o que for necessário e só tem utilização se for usado com uma aplicação JavaScript. <input type = "button" value = "Calcular... " />
O objecto JavaScript “button” tem o seguinte conjunto de propriedades e métodos:
Propriedades:
form Referencia o formulário que contém o elemento.
name Nome do elemento (atributo "name").
type Valor do atributo "type".
value Valor contido no elemento.
Métodos:
focus() Coloca o foco no elemento de texto,
blur() Retira o foco.
click() Clique de rato sobre o elemento.
No JavaScript temos a possibilidade de associar funções a certos acontecimentos, entre os quais a pressão de botões. Assim, podem ser inseridos botões no formulário, cada um deles com uma função específica associada (para além dos tradicionais SUBMIT e RESET).
Integração de Scripts JavaScrivt e formulários A forma de ligar os scripts aos formulários é por recurso a eventos, um evento é um acontecimento que ocorre quando existe alguma forma de intervenção sobre algum dos elementos do formulário (por exemplo um dique de rato sobre um botão ou a passagem do rato por sobre um elemento do formulário). O modo como ligamos uma porção de código JavaScript a um formulário, consiste em associar uma função. JavaScript a um determinado evento ocorrido sobre um dos seus elementos, isto implica que, num formulário com vários elementos, podemos ter várias chamadas a funções JavaScript distintas, cada uma correspondente a um evento e elemento diferente. A associação de uma função a um evento ligado a um elemento do formulário faz-se tomando a função JavaScript em causa como gestora de evento do objecto em causa. O elemento mais importante para a implementação deste tipo de mecanismo é o botão de pressão. Este admite uma função gestora de evento denominada "onClick()", que é activada sempre que o botão for pressionado. Vejamos um exemplo muito simples:
<html> <head> <title> Formulário </title> </head>
<script language="JavaScript"> function pressiona(form) { document.write("Você carregou no botão!!!<p/>"); } </script>
<body> <form method=post> <input type = "button" value = "Carregar!" onClick= "pressiona(this.form)" /> </form> </body> </html>
A componente JavaScript da página HTML construída é apenas constituída pela função pressiona(), que efectua como acção o simples envio para o ecrã de uma slring HTML. Na elaboração do formulário é associado ao elemento input (o botão) a função gestora de evento "pressiona()", como resposta ao evento “onClick". A função gestora de evento leva como parâmetro o próprio formulário do objecto corrente (this.form). Quando o evento acontece, a função gestora de evento é chamada. O resultado é a execução do segmento de código contido na função, neste caso, um simples “document. write(string_de _texto)".
Vejamos o seguinte exemplo. A ideia é implementar uma pequena aplicação onde se realiza a adição de dois valores numéricos introduzidos pelo utilizador. Para isso, vai-se utilizar um formulário com cinco elementos: os dois primeiros serão campos de texto, em que o utilizador vai preencher os valores a adicionar. Em seguida, estarão dois botões: o primeiro desencadeia a operação de soma e o segundo recupera os valores iniciais em todos os elementos do formulário. Finalmente, existirá um terceiro campo de texto, utilizado para conter o resultado da adição.
<html> <head> <title> Formulário soma</title> </head>
<script language="JavaScript"> function calcula(form) { var soma = eval(form.campo1.value) + eval(form.campo2.value); form.resultado.value = soma; } </script>
<body> <form> Parcela 1: <input type = "text" name = "campo1" /><p/>
Parcela 2: <input type = "text" name = "campo2" /><p/> <input type = "button" value = "Calcular" onClick="calcula(this.form)" /> <input type = "reset" value = "Limpar" /><p/>
Resultado: <input type = "text" name = "resultado" /> </form> </body> </html>
É utilizada uma função gestora do evento "onClick", associada ao objecto "button", A função JavaScript associada é a calcula()", que recebe como parâmetro o objecto form associado à form HTML e com possibilidades de referência directa aos diversos elementos que o compõem, através do seu conjunto de propriedades. Esta função realiza duas tarefas: primeiro calcula a soma dos conteúdos dos campos de texto e coloca o resultado no terceiro campo de texto, bastando para isso utilizar a referência ao elemento em causa "form.resultado.value", que o identifica, colocando assim o seu conteúdo (valor) igual ao resultado da operação avaliada antes. Note-se a forma como se tem acesso aos conteúdos dos dois campos de texto, por referência directa aos nomes dos objectos que fazem parte integrante do formulário:
conteúdo do campo 1 à form.campo1.value conteúdo do campo 2 à form.campo2.value
Os nomes "campo1" e "campo2" foram os designados no parâmetro NAME, na altura da declaração dos elementos. Apesar de esta forma de referenciar os objectos constituintes da forrn ser porventura a mais prática, existe outro modo, considerar o conjunto dos elementos da form com partes de um array "elements". Isto significa que a função "calcula()" poderia ser escrita de forma perfeitamente análoga, da seguinte forma:
function calcula(form) { var soma = eval(form.elements[0].value) + eval(form.elements[1].value); form.elements[4].value = soma; }
O array forms[] Muitas vezes é útil trabalhar com páginas com múltiplos formulários. Nesse caso, utiliza-se um array forms[] para conter as referências aos diversos formulários.
Por exemplo: document.forms[0].elements[2].value
Refere-se ao valor do elemento 2 da form 0 do documento. As regras usuais da sintaxe dos arrays em JavaScript aplicam-se aqui sem excepções.
Exemplos Práticos No primeiro caso veremos uma aplicação de tipo local, uma calculadora com as quatro operações básicas, em que não existe nenhuma comunicação com o servidor Web, a não ser aquela estritamente necessária para o carregamento da página e do script. Neste caso, vamos utilizar dois campos para introdução dos dois valores a operar e um outro campo para o resultado. Vamos também ter um conjunto de botões, cada um correspondente a uma operação distinta. Com a passagem de um parâmetro adicional na função gestora de evento (código da operação), foi possível utilizar a mesma função para os quatro botões.
<html> <head> <title> Calculadora Digital </title> </head>
<script language="JavaScript"> function calcula(form,op) { var op1 = eval(form.campo1.value); // avaliação do operador 1 var op2 = eval(form.campo2.value); // avaliação do operador 2 if (op == 0) { res = op1 + op2; } else { if (op == 1) { res = op1 – op2; } else { if (op == 2) { res = op1 * op2; } else { res = op1 / op2; } } } form.resultado.value = res; //Afixacao do Resultado } </script>
<body> <form> <table> <tr> <td> <input type = "text" name = "campo1" /> </td> <td> <input type = "text" name = "campo2" /> </td> </tr> </table> <input type = "button" value =" + " onClick="calcula(this.form,0)" /> <input type = "button" value =" – " onClick="calcula(this.form,1)" /> <input type = "button" value =" * " onClick="calcula(this.form,2)" /> <input type = "button" value = " / " onClick="calcula(this.form,3)" /> <input type = "reset" value = "Limpar" /> <table> <tr> <td> Resultado: </td> <td> <input type = "text" name = "resultado"> </td> </tr> </table> </form> </body> </html>
O resultado é uma aplicação de cálculo bastante simples e consideravelmente masi prática de usar que as calculadoras tradicionais. Chama-se, contudo, a atenção para o facto de esta aplicação ser meramente utilizável para demonstração. A criação de uma aplicação para utilização real teria que ser um pouco mais complicada, para incluir, entre outras coisas, a validação das entradas (poderá facilmente obter um erro de execução JavaScript, se introduzir um carácter em vez de um número numa das entradas, ou que obtém resultados errados se usar "," em vez de ".", para separar a parte decimal da parte inteira).
No segundo exemplo, o caso é diferente, uma vez que utilizaremos o JavaScript como complemento para a validação de uma form que se destina a ser tratada por um script CGI, localizado do lado do servidor Web. Neste caso, vamos construir um formulário referente a uma encomenda de pizzas, é necessário que os dados sejam validados. É necessário garantir as seguintes condições para ser permitido o envio da encomenda: · Existe pelo menos uma Pizza seleccionada; · O requerente está devidamente identificado, com nome, morada e número de telefone; · A forma de pagamento está seleccionada.
<html> <head> <title> Encomenda de Pizzas </title>
<script language = "JavaScript"> function validar(form) {
// Testa se o utilizador escolheu pelo menos 1 Pizza if (form.pizza.selectedIndex == 0 || form.quantp.selectedIndex == 0 ) { window.alert("Tem que seleccionar pelo menos 1 Pizza!"); return(false); } else { // Testa se os dados para entrega estão preenchidos var s = form.nome.value; var s1 = form.morada.value; var s2 = form.telefone.value; if ( (s.length < 5) || (s1.length < 6) || (s2.length < 9) ) { window.alert("preencha correctamente o seu Nome, Morada e Telefone"); return(false); } else { // Testa se os dados de pagamento estão correctos if (form.pag[0].checked != true && form.pag[1].checked != true && form.pag[2].checked != true ) { window.alert("Escolha a forma de pagamento!"); return(false); } else { if (form.pag[0].checked == true && form.nvisa.value.length != 12) { window.alert("Introduza correctamente o seu numero VISA"); return(false); } else { return(true); // Só neste caso e que é autorizada a encomenda! } } } } } </script> </head>
<body> <h2> Ficha de Encomenda de Pizzas </h2><p/> <form name = "PizzaExp" method="post" action = "mailto:encom@pizzas.pt" onSubmit = "return validar(document.PizzaExp)"> <table> <tr> <td> Qual a Pizza a encomendar? </td> <td> <select name="pizza"> <option/> <option> Marguerita </option> <option> Capriciosa </option> <option> Quatro Estações </option> <option> Calzone </option> <option> Tropical </option> <option> Maritima </option> </select> </td> <td> Quantidade: </td> <td> <select name = "quantp"> <option> 0 </option> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> <option> 6 </option> </select> </td> </tr> <tr> <td> Qual a bebida? </td> <td> <select name=" bebida "> <option/> <option> Coca Cola </option> <option> Seven Up </option> <option> Água </option> <option> Cerveja </option> </select> </td> <td> Quantidade: </td> <td> <select name = "quantb"> <option> 0 </option> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> <option> 6 </option> </select> </td> </tr> </table> <table> <tr> <td> <input type="checkbox" name= "opcao1" /> Extra Queijo </td> <td> <input type="checkbox" name= "opcao2" /> Massa Grossa </td> <td> <input type="checkbox" name= "opcao3" /> Pimentos </td> <td> <input type="checkbox" name= "opcao4" /> Cogumelos </td> </tr> </table> <hr/> <table> <tr> <td> <strong> Dados para entrega: </strong> </td> </tr> <tr> <td> Nome: </td> <td> <input type = "text" name="nome" size = "40" > </td> <td> Morada: </td> <td> <input type = "text" name= "morada" size = "40" > </td> </tr> <tr> <td> Telefone: </td> <td> <input type = "text" name = "telefone" > </td> </tr> </table> <hr/> <table> <tr> <td> <strong> Forma de pagamento: </strong> </td> </tr> <tr> <td> <input type = "radio" name = "pag" /> VISA </td> <td> <input type = "radio" name = "pag" /> Contra entrega </td> <td> <input type = "radio" name = "pag" /> Factura (30 dias,+15% ) </td> </tr> </table> <table> <tr> <td> Número do cartão VISA </td> <td> <input type = "text" name = "nvisa" /> </td> </tr> </table> <hr/> <input type = "submit" value = "Enviar!" /> <input type = "reset" value = "Limpar" /> </form> </body> </html>
O ecrã final consiste numa form que contém muitos dos tipos de elementos de que falámos, pelo que constitui um bom exercício final. Nele, o utilizador é convidado a preencher os dados relativos à sua encomenda de Pizzas, tendo o cuidado de respeitar os requisitos impostos à partida. Neste exemplo estamos a optar por um tipo de submissão da encomenda por Correio Electrónico (repare na action especificada como parâmetro da <form>. Este procedimento não é nada seguro, e muito menos para a transmissão de dados sensíveis como números VISA, e somente justificável como um mero exemplo. Como parâmetro da action poderíamos ter especificado um script de servidor que é a situação mais normal. A colocação dos dados submetidos em base de dados consegue-se através da construção de um script de servidor, que receba os dados e os escreva na base de dados. De entre as várias opções que existem (por exemplo, programa CGI em Perl ou C, Java, PHP, ASP, etc…), vamos adaptar o exemplo para que utilize Active Server Pages (ASP) e uma base de dados Acces. A Base de Dados deverá ser criada com uma estrutura de dados que reflicta os campos do formulário. Neste exemplo utilizamos uma só tabela (encomendas) e um conjunto de campos correspondentes aos elementos do formulário. A única alteração que fazemos ao formulário é ao nível da sua submissão, que agora é feita chamando um script, em vez de enviar um e-mail:
<form name = "PizzaExp" method="post" action = "encomenda.asp" onSubmit = "return validar(document.PizzaExp)">
O script chamado é na verdade uma ASP, que consiste num ficheiro localizado num directório com permissões de execução no IIS, chamado "encomenda.asp" e constituído da seguinte forma:
<% response.write("Sr.(a)" + request("nome") + "<br/>") response.write("Obrigado pela sua Encomenda! <br/>")
aConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" _ & "Data Source=" _ & "C :/Inetpub/wwwroot/pizzas/db_pizza.mdb" Set conn = Server.CreateObject("ADODB.Connection") conn.Mode = adModeReadWrite conn.ConnectionString = aConnectionString conn.Open
sql = "insert into Encomendas
(nome,morada,telefone,pizza,quantp,bebida,
quantb,opcao1, "values ("' & request("nome") & "', '" & request("telefone") & "', '" & request("pizza") & "', '" & request("quantp") & "', '" & request("bebida") & "', '" & request("quantb") & "', '" & request("opcao1") & "', '" & request("opcao2") & "', '" & request("opcao3") & "', '" & request("opcao4") & "', '" & request("pag") & "', '" & request("nvisa") & "')" conn.Execute sql conn.Close %>
A submissão do formulário implica a chamada desta ASP. A função desta é escrever na base de dados os resultados recolhidos com o formulário, através de uma ligação ADO com a base de dados Access. É definida uma "connection string" (string que é usada para a ligação à Base de Dados) e criado um objecto "conn", que é necessário ser colocado em modo leitura/escrita e aberto. Depois, define-se uma frase SQL para actualização de alguns campos e escreve-se na base de dados com recurso a uma instrução "conn.Execute". Se pretende criar uma implementação prática a partir deste exemplo, tenha em conta os riscos associados à transmissão de números VISA via Internet (idealmente esse tipo de pagamentos só deverão fazer-se em servidores seguros que implementem SSL) e também ao respectivo armazenamento em base de dados.
|
|
|
