Baixe Criando uma Página Web para Vendas: Formulário e Processamento de Dados e outras Notas de estudo em PDF para Informática, somente na Docsity!
Formulário & Script CGI
Índex Página
Um Formulário de Pedidos On-line 01
A Página Web 01 A Seção Introdutório do Documento HTML 02 Definindo as Informações Que Devem Ser Ocultadas do Cliente 02 Apresentando as Opções do Produto 03 Enviando o Pedido 05 O Script 05 Determinando o Método 05 Dividindo as Informações em Pares Nome/Valor 06 Manipulando os Elementos Que o Formulário Não Passa 06 Definindo as Opções de Pagamento do Cliente 08 Enviando uma Mensagem de Resposta ao Cliente 09 Resumo 10 Créditos & Autoria 10
LOGO – Biblioteca Virtual do STI 11
Um Formulário de Pedidos On-line
Uma das melhores utilizações da CGI é permitir que um cliente em potencial visite seu site e encomende um produto on-line. Apesar de essas iniciativas comerciais não serem a característica mais importante da Internet, o mercado está conduzindo o desenvolvimento da Internet e de seus padrões. Fazer com que as empresas possam comercializar seus produtos on-line é o próximo passo na evolução da Inernet.
De um momento para outro, todos os comerciais de TV começaran a mostrar o endereço Web do anunciante, isso porque as empresas acreditam que a Internet tenha potencial de marketing. Originalmente as pessoas pensavem que a Web seria apenas um meio para exibir informações, mas CGI mudou isso.
Este Tutorial trata dos formulários de pedido que permitem que o visitante encomende um produto on-line. Depois de submeter o pedido, este é enviado por correio eletrônico para ser processado. Apesar de o exemplo de aplicativo deste tutorial envolver uma empresa fictícia de venda de automóveis, o mesmo formulário pode ser aplicado a todos os ramos de negócios: flores, computadores, doces ou qualquer outra coisa que possa ser vendida na Web.
A Página Web
Primeiro é preciso criar a página Web. Esta página permite que o visitante digite informações, selecione itens de listas ou checkbooks e submeta as informações digitadas, que então são enviadas para o script. Para que o documento HTML seja efetivo, ele precisa ser intuitivo. Simplesmente olhando a página, o cliente deve ser capaz de compreender qual informação precisa ser digitada em qual lugar. Quanto mais intuitiva for sua página, mais chances deu script terá de funcionar corretamente, evitanto o perigo de desencorajar o visitante.
A primeira seção do documento deve indicar ao visitante qual é a finalidade da página. No exemplo de página usado neste Tutorial, uma empresa de venda de carros deseja comercializá-los na Web.
Em seguida, deve-se permitir que o visitante digite informações pessoais como nome, endereço de correio eletrônico, endereço residencial e tudo mais que for preciso para processar o pedido e enviar o produto ao cliente.
Finalmente, ofereça ao visitante uma lista de itens para escolher. No exemplo de página usado neste tutorial, permita que o visitante escolha um carro e seus acessórios.
A Seção Introdutório do Documento HTML
Começamos criando a primeira seção do documento HTML. Nela, como mostra a lista abaixo, abrimos o documento HTML, damos a ele um título e fornecemos algumas informações introdutórias a seus visitantes
Carros Novos Supkay
Bem-vindo a Carros Novos Supkay! GRANDES negócios apenas esperando você chegar e sair dirigindo com eles! Com nossa grande variedade de escolhas, estou certo de que você encontrará algo que irá amar!>
Nomeamos a página BUYCAR.HTML e o script BUYCAR.PL. Usamos o marcador para facilitar a formatação da página, mas poderíamos ter usado tabelas.
Definindo as Informações Que Devem Ser Ocultadas do Cliente
Nosso próximo passo é decidir quais informações devem ser ocultadas do cliente. É absolutamente necessário permitir que o visitante escolha itens específicos. Também é preciso que o visitante forneça seu nome e endereço. Provavelmente teremos de determinar uma forma pela qual o visitante pagará o item que comprar, a menos que ele seja gratuito. Também será preciso decidr NAME curto, mas ao mesmo tempo significativo. A seguir temos uma lista de itens que o visitante deve preencher, com um nome atribuído a cada um:
Nome = fname Sobrenome = lname Email = email
Agora coloque essa lista no documento da seguinte maneira:
Digite seu primeiro nome: Seu sobrenome: Seu email:
Separar o nome do sobrenome em vez de colocar ambos no mesmo campo é uma boa idéia. Assim fica mais fácil manipulá-los separadamente ao criar o script. Observe o uso do atributo VALUE. Isso ajuda a dar ao visitante uma idéia do tipo de informação de que você precisa. Além disso, use o atributo SIZE para limitar o tamanho de cada campo em 46. Isso serve apenas para manipular a aparência do documento HTML.
Agora precisamos de um endereço de correspondência para enviar o produto ao cliente:
Endereço = street Cidade = city Estado = state CEP = zip
Também podemos pedir o número de telefone, se o cliente não puder ser acessado via correio eletrônico:
Telefone Residencial = hphone Telefone Comercial = wphone
Essas informações devem ser suficientes para a sua página Web. Claro, é possível acrescentar qualquer outra informação que atenda às suas necessidades específicas. Agora colocamos essas informações no
Nota: Observe que o marcador foi temporariamente removido para que os botões sejam exibidos lado a lado. Se fôssemos incluir o marcador < PRE >, seria preciso colocar todas as quatro cores em uma linha, e como a largura do monitor é limitada, não conseguimos ver nem metade das informações. Sem o marcador < PRE >, as opções são colocadas lado a lado (o HTML não reconhece espaços).
Agora apresentamos as opções adicionais: airbag do lado do passageiro, desembaçador no vidro traseiro, calotas de plásticos e um estepe. Atribua a cada uma destas opções seu próprio valor. Use também o tipo de input checkbox para que, caso o cliente não selecione uma opção, você não tenha de se preocupar com isso dentro do script. O script simplesmente verifica se o usuário selecionou o checkbox e em caso positivo, reage do modo apropriado.
Airbag do lado do passageiro Calotas de plástico Desembaçador no vidro traseiro Estepe
= iarbag = pcaps = rdefrost = stire
A página HTML teria o seguinte aspecto:
Airbag do lado do passageiro Calotas de Plástico Desembaçador do Vidro traseiro Estepe
Observe que cada nome descreve o que o valor realmente é. Ao examinar seu código, é possível determinar com segurança o que representa cada valor. Os nomes são curtos, mais auto-explicativos. agora permitiremos que o visitante escolha um modelo de duas, três ou quatro portas:
Portas =
Podemos usar o marcador ou tipo de input radio. Aqui usaremos novamente o tipo de input radio para deixar o visitante escolher uma das três opções:
2 portas 2 portas com bagageiro 4 portas
Depois de receber as informações pessoais do cliente e sua escolha de carro, é preciso saber como ela vai pagar. Usando o nome Pagamento , damos ao cliente duas opções: Fatura e Cartão de Crédito.
Pagamento = Fatura Cartão de Crédito
(Claro, os vendedores de automóveis não costumam simplesmente "mandar a conta" para os clientes. O exemplo usa essas opções pouco realistas apenas para demostrar como é possível oferecer opções diferentes aos consumidores.) Se o cliente escolher a opção cartão de crédito, será preciso obter também as informações sobre o cartão. A seguir, apresentamos três campos associados normalmente a cartões de crédito: o nome do cartão, o número e a data de validade.
Nome do Cartão Número do Cartão Data de validade
= Cname = Cnum = cexpire
Ao escrever o script, verifique se o cliente escolheu a opção de cartão de crédito; neste caso, é preciso incluir as informações sobre o cartão ao enviar o pedido. Agora, basta formatar as opção de pagamento usando o código HTML, conforme mostra o exemplo abaixo:
Pagamento Fatura Cartão de Crédito Nome no Cartão: Número do Cartão: Validade do Cartão:
Enviando o Pedido
Finalmente, devemos permitir que o cliente nos envie as informações. Para isso basta usar o tipo de input submit ; convém incluir também o tipo de input reset para o caso de o cliente precisar refazer o pedido.
Agora, se é isto que você quer pressione Ou se acha que cometeu um erro,
Como não adicionaremos mais nada ao formulário, fechemos o marcador , assim como e . Agora que terminamos, nosso formulário de pedidos deve estar bastante parecido com o exemplo dado inicialmente.
Claro, é possível acrescentar imagens gráficas, fundos diferentes ou links para outras páginas a fim de dar o formulário de pedidos um aspecto profissional. Pode-se até mesmo mudar a formatação HTML da página para que fique mais a seu gosto. Entretanto, para o propósito deste exemplo específico, o formulário está concluído. Agora é hora de trabalhar sobre o script.
O Script
Agora basta acessar as informações que o visitante digitou. Crie um script que envie essas informações pelo correio eletrônico para quem vai processá-las. Então informe ao visitante que seu pedido foi recebido com sucesso.
Determinando o Método
Primeiro é preciso descobrir se o script usou o método POST para receber as informações.
As informações foram enviadas pelo método POST? Se não, informe o visitante. Se sim, continue.
Primeiro, indique ao script qual programa está sendo usado para interpretá-lo. Neste caso, estamos usando Perl. É preciso informar ao script o path e nome do arquivo do intérprete.
Nota: no UNIX, o modo mais fácil de encontrar o path de um arquivo é com os comandos which e whereis. Há muitos tipos de UNIX, portanto, se um destes comandos não funcionar, tente o outro.
Em seguida, defina o tiro MIME da saída do script.
#! /usr/local/bin/perl
Lidando com o Correio Eletrônico
Definiremos então as strings que determinam o destino da mensagem de correio eletrônico, o programa de correio e a linha de assunto:
$mailprog ="/usr/lib/sendmail"; $sendto = "[email protected]"; $subject = "Compra de automovel";
Agora, vamos enviar a mensagem. Primeiro use a função open() para enviar sua saída para sendmail:
open(MAIL, "|$mailprog -t") |
Esse comando simplesmente designa o descritor MAIL como um pipe para a string $mailprog definida anteriormente. O pipe altera STDOUT. Sem ele, todas as informações vão retornar para o visitante dentro de um documento HTML. Se mudarmos a direção do pipe, é possível enviar as informações para o programa UNIX sendmail.
As três linhas a seguir criam o cabeçalho da mensagem. A string $sendto definida acima determina a linha To:. A linha From: é uma combinação de três dos campos digitados pelo visitante. Usaremos o endereço de correio eletrônico do visitante, seu nome e sobrenome. Finalmente, acrescentamos o assunto.
Juntas, as três linhas ficam assim:
print MAIL "To: $sendto\n"; print MAIL "From: $form{'email'} ($form{'fname'} $form{'lname'})\n"; print MAIL "Subject: $subject\n\n";
Observe o uso de \n , que é alimentação de linha. Sem \n , tudo ficaria em uma só linha. Depois de imprimir Subject: ; incluímos duas novas linhas que separam o cabeçalho do restante da mensagem.
A seguir pedimos à senteça print para imprimir todo o conteúdo do descritor MAIL até encontrar EOM. Essa condição permite o uso da sentença print apenas uma vez para imprimir várias linhas.
print MAIL <<"EOM"; Em $date, $form{'fname'} $form{'lname'} decidiu comprar um carro conosco. $form{'fname'} escolheu um $form{'model'} $form{'color'} $form{'year'} $form{'doors'}-porta(s). $form{'fname'} escolheu os seguintes opcionais: EOM
Observe como usamos as string do formulário para criar a sentença. Basta inserir as strings no texto, de modo que leas ajudem a criar a mensagem. Dependendo do que o cliente digitou no formulário, a mensagem pode parecer com:
Em Thu Jul 1 11:59:42 EST 1998, Eduardo Mota decidiu comprar um carro conosco. Eduardo escolheu um Tortoise verde 1995 2 portas(s). Eduardo queria os seguintes opcionais:
A seguir vamos analisar algumas sentenças if( ). O script diz essencialmente que:
Se existe airbag , então imprima Airbag do lado do passageiro. Se existe pcaps , então imprima Calotas de plástico. Se existe rdefrost , então imprima Desembaçador no vrido traseiro Se existe stire , então imprima Estepe.
Com Perl codificamos essas instruções if( ) da seguinte maneira:
if ($form{'airbag'}) { print MAIL "- Airbag para o passageiro\n"; } if ($form{'pcaps'}) { print MAIL "- Calotas de plastico\n"; } if ($form{'rdefrost'}) { print MAIL "- Desembacador do vidro traseiro\n"; } if ($form{'stire'}) { print MAIL "- Estepe\n"; }
Então, para economizar trabalho, digitamos novamente o seguinte comando:
print MAIL <<"EOM";
Esse comando permite que usemos o comando print apenas uma vez. Veja se consegue descobrir o que acontece no exemplo abaixo:
Seguem algumas informacoes pessoais de $form{'fname'}: $form{'fname'} $form{'lname'} $form{'email'} $form{'street'} $form{'city'}, $form{'state'} $form{'zip'}
Fone res.: $form{'hphone'} Fone com.: $form{'wphone'}
$form{'fname'} pediu para que nos:
EOM
Definindo as Opções de Pagamento do Cliente
Agora, precisamos determinar qual forma de pagamento o cliente escolheu. Novamente usaremos a instrução if( ) , assim:
Verifique se o cliente escolheu Fatura. Se sim, imprima Fatura. Verifique se o cliente escolheu Cartão de Crédito. Se sim, imprima Cartão de Crédito.
Como o formulário usa o tipo de input radio , o cliente precisa selecionar Fatura ou Cartão de Crédito. Basta marcar qual dessas opções o cliente escolheu.
if ($form{'billing'} eq "bill") { print MAIL "Mandaremos a fatura.\n"; } if ($form{'billing'} eq "ccard") { print MAIL "Cobraremos pelo cartao de credito"; print MAIL "em nome de $form{'cname'}.\n";
Resumo
Apesar de este tutorial ter apresentado um exemplo de formulário de pedido, de maneira alguma esse exemplo esgota as possibilidades do script. É possível fazer com que o script salve essas informações em um arquivo de log ou até mesmo usar um banco de dados para armazenar as informações. As possibilidades são infinitas.
Neste Tutorial aprendemos a criar documentos HTML usando formulário e também a criar um script que permite que essas informações sejam enviadas para outros usuários. Essencialmente, criamos uma interface Web para enviar informações a outra pessoa via correio eletrônico. Com apenas algumas modificações, poderíamos criar um scrit que permitisse ao visitante usar o formulário para deixar mensagens para você. Também vimos o conceito mais importante da programação CGI: como enviar ao visitante um documento imediatamente criado*.
- N.R.T. Esses documentos criados pelo próprio script são chamados e documentos virtuais.
Créditos & Autoria
Este texto criado por: Robert Niles e Jeffry Dwight Adaptado e Editado por: Eduardo Mota
Texto gentilmente cedido por Eduardo Mota ([email protected]) URL: http://www.interserv.com.br
www.sti.com.br
