Esse artigo faz parte da revista Clube Delphi edição 41. Clique aqui para ler todos os artigos desta edição

 

Atenção: por essa edição ser muito antiga não há arquivo PDF para download. Os artigos dessa edição estão disponíveis somente através do formato HTML. 

 

Validações na Web

Cadastros e verificação de dados com IntraWeb

O cadastro de usuários é certamente uma das aplicações mais encontradas na web. Quem nunca se cadastrou em uma loja virtual para fazer compras on-line, ou em um portal web para receber notícias por e-mail, ou se inscreveu para participar de listas de discussão ou de promoções?

Neste artigo construiremos um cadastro de usuários em IntraWeb, dando atenção especial a um tópico importante: validações. Existem, basicamente, dois tipos de validações no ambiente web: as client-side (do lado do cliente), feitas no browser usando JavaScript; e as validações server-side (do lado do servidor), que necessitam de uma nova requisição HTTP. No exemplo deste artigo demonstraremos o uso das duas técnicas e veremos como fazer algumas validações sofisticadas.

 

Importante: Neste artigo, utilizei o novo IntraWeb 5.1 (o Delphi vem com a versão 5.0). É altamente recomendado faça essa atualização, segundo a própria fabricante, pois muitos bugs foram resolvidos e novas funcionalidades, implementadas. A versão 5.1 do IW é gratuita para usuários do Delphi 7 e pode ser baixada em www.atozedsoftware.com – veja como fazer a instalação no quadro. Nos exemplos usaremos vários recursos que não estão presentes na versão 5.0.

Criando o banco de dados

O primeiro passo é criar o banco de dados de usuários no InterBase. Abra o IBConsole e crie um novo banco de dados chamado “USUARIOS.GDB”. Abra o Interactive SQL (ISQL) e crie uma tabela chamada “USUARIOS”, usando o seguinte comando:

create table USUARIOS

(LOGIN varchar(20) not null primary key,

 SENHA varchar(10),

 EMAIL varchar(40),

 NOME varchar(60),

 DATANASC date,

 DICASENHA varchar(30),

 RESPOSTA varchar(30),

 FOTO blob,

 SESSIONID char(24),

 ATIVADO char(1));

 

Feche o IBConsole depois de executar o comando.

Criando a aplicação e o acesso a dados

Crie uma aplicação IntraWeb do tipo Stand Alone with DataModule, usando File|New>Other>IntraWeb. Clique em File|Save All, salve a unit do formulário principal como “uFrmPrincipal.pas” e mantenha os nomes de units sugeridos para o DataModule e o ServerController. Salve o projeto como “ValidacoesWeb.dpr”.

Abra o DataModule e altere seu nome para “DM”. Adicione um SimpleDataSet, da paleta dbExpress, dando a ele o nome de “cds_usuarios”. Clique com o botão direito nesse componente, escolha Edit connection e configure uma conexão ao banco USUARIOS.GDB criado anteriormente.

Feito isso, altere a propriedade Connection.LoginPrompt do SimpleDataSet para False. Na sua propriedade DataSet.CommandText digite “select * from USUARIOS where LOGIN=:LOGIN”. Vá até a sua propriedade DataSet.Params e defina o tipo do parâmetro como ftString. Dê um duplo clique no SimpleDataSet e pressione CTRL+F para adicionar todos os TFields. Seu DataModule deve estar como na Figura 1.

 

Figura 1. DataModule da aplicação

Importante: se você alterar o nome do DataModule (como fizemos aqui), as definições na unit do ServerController não serão atualizadas. Abra, então, essa unit e substitua todas as declarações de DataModule1 por DM e TDataModule1 por TDM.

Criando os formulários IntraWeb

Vá até o formulário principal da aplicação e altere sua propriedade Name para “FrmPrincipal”. Adicione dois IWButtons (paleta IW Standard), com os Captions “Cadastrar” e “Login”. Coloque também um IWLabel com o Caption “Usuários IntraWeb”.Veja o formulário na Figura 2.

 

Figura 2. Formulário principal da aplicação

Crie um formulário IntraWeb do tipo Application Form (clicando em File|New>Other>IntraWeb). Salve a unit do formulário como “uFrmCadastro.pas”, e altere sua propriedade Name para “FrmCadastro”. Aperte Alt+F11 e escolha DataModuleUnit para usar o DataModule. Coloque no formulário um componente DataSource (chame-o de “ds_usuarios”) e aponte sua propriedade DataSet para DM.cds_usuarios.

Adicione ao formulário dois componentes IWRegion (paleta IW Standard). Defina a propriedade Align de um deles para alTop e Height como 30; defina a propriedade Align do outro IWRegion como alClient. Coloque no IWRegion da parte superior um IWDBEdit (paleta IW Data), apontando suas propriedades DataSource para ds_usuarios e DataField para LOGIN. Configure Name para “LOGIN” (o mesmo nome do campo referenciado). Ao lado desse IWDBEdit, adicione um IWLabel para indicar a finalidade do campo; configure seu Caption para “Login” e Name para “LblLOGIN”.

No outro IWRegion adicione cinco IWDBEdits e associe-os aos campos SENHA, NOME, EMAIL, DATANASC e RESPOSTA, da mesma forma que fizemos para o campo LOGIN. Configure a propriedade Name desses componentes para “SENHA”, “NOME”, “EMAIL”, “DATANASC” e “RESPOSTA”, respectivamente. Coloque mais um IWDBEdit chamado “CONFIRMA” apontando também para o campo SENHA. Defina a propriedade PasswordPrompt dos campos SENHA e CONFIRMA como True.

Coloque IWLabels ao lado de cada campo para indicar o que deve ser digitado. Altere o nome de cada IWLabel para nome do campo prefixado por “Lbl”, por exemplo “LblSENHA”. É importante manter essa nomenclatura, pois mais adiante faremos a associação de cada campo com seu respectivo IWLabel, pelo nome.

Para o envio e a exibição do campo FOTO, adicione um IWDBFile, da paleta IWData, (chame-o de “FOTO”) e um IWDBImage (com nome “FOTOIMG”), ambos apontando para o campo FOTO.

Adicione um IWDBComboBox chamando-o de “DICASENHA” ligado ao campo de mesmo nome. Altere sua propriedade NoSelectText para “(Escolha)”, e em Items digite:

 

Qual o nome do seu cachorro?

Qual sua cor preferida?

Qual seu prato preferido?

 

Acrescente um IWButton (paleta IW Standard) com Caption “Cancelar” e Name “CANCELAR”. Adicione mais um IWButton, com Caption “Enviar” e Name “ENVIAR”. Seu formulário deve estar semelhante ao da Figura 3.

 

Figura 3. Formulário IntraWeb para cadastro de usuários

No evento OnClick do botão Enviar digite:

 

DM.cds_usuarios.Post;

DM.cds_usuarios.ApplyUpdates(0);

TIWAppForm(WebApplication.Forms[1]).AddToInitProc

   ('alert("Dados gravados com sucesso!");');

release;

 

Esse código envia a cache do ClientDataSet ao banco de dados. Se tudo correr bem, adicionamos código JavaScript ao procedimento de inicialização do formulário principal (usando AddToInitProc) para indicar ao usuário que os dados foram gravados com sucesso. Liberamos então o formulário de cadastro. ...

Quer ler esse conteúdo completo? Tenha acesso completo