Palavra:   

Revista PHP / PHP

Flávia Jobstraibizer

Analista de sistemas, DBA Mysql, PostgreSQL, Oracle, SQLServer e Firebird. Desenvolvedora de sistemas, e administradora de servidores FreeBSD. Conheça o site www.flaviajobs.com.br

Teclado virtual com PHP

Se você não manja nada de ajax, não pode usar, seu chefe não quer (difícil), ou simplesmente tem preguiça, neste artigo vou mostrar como construir um teclado virtual de senhas.

Simples demais, a cada clique nos botões, será feita uma recarga da página, mantendo os dados já clicados no campo de senha.
A verificação da senha, é feita através de uma tabela em um banco de dados. Nada complicado.

Primeiramente, uma tabela chamada usuários, que você pode criar aí em qualquer banco de dados que você já tenha. No meu caso, usei como de costume, minha base flaviateste, criando nela, uma tabela usuários.

SQL
  1. CREATE TABLE `usuarios` (
  2. `id` INT( 10 ) NOT NULL AUTO_INCREMENT ,
  3. `usuario` VARCHAR( 255 ) NOT NULL ,
  4. `senha` VARCHAR( 255 ) NOT NULL ,
  5. INDEX ( `id` )
  6. ) ENGINE = MYISAM ;
www.revistaphp.com.br

Nesta tabela, inseri um usuário chamado teste, com a senha 909090.

SQL
  1. INSERT INTO `usuarios` ( `id` , `usuario` , `senha` )
  2. VALUES (
  3. NULL , 'teste', '909090'
  4. );
www.revistaphp.com.br

Partindo para o arquivo, que se chama teclado_virtual.php

Fazendo a consulta no banco:

PHP
  1. <?php
  2. // arquivo padrão de conexão
  3. require_once('../../Connections/testes.php');
  4. ?>
  5.  
  6. <?php
  7. // verificando pelo get se a senha é igual à do banco
  8. $colname_usuarios = "-1";
  9. if (isset($_GET['display'])) {
  10. $colname_usuarios = (get_magic_quotes_gpc()) ? $_GET['display'] : addslashes($_GET['display']);
  11. }
  12. // fazendo o select na senha recuperada do get
  13. mysql_select_db($database_testes, $testes);
  14. $query_usuarios = sprintf("SELECT * FROM usuarios WHERE senha = '%s'", $colname_usuarios);
  15. $usuarios = mysql_query($query_usuarios, $testes) or die(mysql_error());
  16. $row_usuarios = mysql_fetch_assoc($usuarios);
  17. $totalRows_usuarios = mysql_num_rows($usuarios);
  18. ?>
www.revistaphp.com.br

Fazendo as verificações que serão enviadas para a consulta acima, no banco:

PHP
  1. <?php
  2. // mantendo os dados digitados no teclado, no display
  3. $enviar = $_GET['Submit'];
  4. $display = $_GET['display'];
  5. $submitaction = $_GET['Submitaction'];
  6.  
  7. $display = $display . $enviar;
  8.  
  9. // verificando se a senha é igual à do banco.
  10. $senha=$row_usuarios['senha'];
  11.  
  12. // se for diferente de vazia:
  13. if ($submitaction != null) {
  14.  
  15. // e igual à ação de apagar, apaga tudo o que estiver no display
  16. if ($submitaction=='Apagar')
  17. { $display=""; }
  18. // se for igual à ação de entrar, ou logar:
  19. elseif ($submitaction=='Entrar')
  20. { if ($display==$senha) // verifica se o que está no display é igual à variável $senha, que é igual ao campo senha do banco de dados
  21. // se for igual, mostra o nome do usuário, e uma mensagem
  22. { echo "<center>Olá ".$row_usuarios['usuario']." - Sua senha esta correta!<br>Redirecionando... </center>";
  23. $display=""; }
  24. // se for diferente, manda o aviso
  25. else
  26. { echo '<center>Sua senha esta incorreta, tente novamente!</center>';
  27. $display="";}
  28. }
  29. }
  30. ?>
www.revistaphp.com.br

E finalmente montando o layout do teclado virtual:

HTML
  1. <!-- aqui tem o formulário do teclado -->
  2. <form name="form1" method="get" action="">
  3. <table width="230" height="180" align="center" cellpadding="0" cellspacing="0" style="border:#000066 dotted 1px">
  4. <td width="200"><table width="120" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#006666">
  5. <td colspan="3"><input name="display" type="password" onKeyPress="return false" value="<? print $display; ?>" size="27"></td>
  6. </tr>
  7. <tr>
  8. <td><input name="Submit" type="submit" class="style2" style='width: 55px;' value="1"></td>
  9. <td><input name="Submit" type="submit" style='width: 55px;' value="2"></td>
  10. <td><input name="Submit" type="submit" style='width: 55px;' value="3"></td>
  11. </tr>
  12. <tr>
  13. <td><input name="Submit" type="submit" style='width: 55px;' value="4"></td>
  14. <td><input name="Submit" type="submit" style='width: 55px;' value="5"></td>
  15. <td><input name="Submit" type="submit" style='width: 55px;' value="6"></td>
  16. </TR>
  17. <tr>
  18. <td><input name="Submit" type="submit" style='width: 55px;' value="7"></td>
  19. <td><input name="Submit" type="submit" style='width: 55px;' value="8"></td>
  20. <td><input name="Submit" type="submit" style='width: 55px;' value="9"></td>
  21. </tr>
  22. <tr>
  23. <td><input name="Submitaction" type="Submit" style='width: 55px;' value="Apagar"></td>
  24. <td><input name="Submit" type="submit" style='width: 55px;' value="0"></td>
  25. <td><input name="Submitaction" type="submit" style='width: 55px;' value="Entrar"></td>
  26. </tr>
  27. </table>
  28. </td>
  29. </tr>
  30. </table>
  31. </form>
  32. </blockquote>
  33.  

PHP
  1. <?php
  2. // libera o mysql da consulta realizada anteriormente, nunca esqueça disso..rs
  3. mysql_free_result($usuarios);
  4. ?>
www.revistaphp.com.br

Desta forma, a cada clique nos números, será dado um tipo de refresh na página, que na verdade é o reenvio para a mesma página, de cada tecla do teclado virtual. Somente após clicar em Entrar, é que a consulta ao banco será feita, e as verificações efetuadas.

Você pode ver este exemplo online no meu site, clicando aqui: http://www.flaviajobs.com.br/sistemas/revistaphp/teclado_virtual.php
(use a mesma senha, que você viu aqui no artigo)

Dúvidas, entre em contato

Opções de Interação

Comentários

excelente
Por: renato, 05/09/2008   14:20:35
flavia naum para com os artigos agora sobre o cidadão acho que antes de falar em programação volte a escola ,ela naum falou sobre segurança amigo leia antes de fazer uma critica assim t+
Segurança
Por: Marcos, 06/05/2007   15:57:24
Flávia, seu exemplo é didático sim. E a partir dele é possível construir códigos melhores. Seu artigo não tratou mesmo de segurança mas considero de extrema importância, nos dias de hoje, jamais descuidar da educação que é o objetivo de um artigo.

Mesmo não tratando de segurança, é fundamental fazer a ressalva de que não é possível utilizar este exemplo em hipótese alguma. Mesmo que o chefe não entenda nada de WEB, percebe?

Nos diferenciamos da criminalidade na medida em que nosso trabalho dê segurança para nossos usuários terem a privacidade de suas senhas garantidas. Essa é forma como nos postamos diante dos imbecís que utilizam-se de seus conhecimentos para ludibriar a fé alheia. Por isso, nossa responsabilidade com as informações para a garotada nova que está começando é muito grande.

Mas não vou só criticar. Sugiro que utilize pelo menos alguma função de critografia do php para encobrir os dados na URL. Vai demandar mais duas ou três linhas de código mais comentários que não prejudicarão a didática do seu artigo e nem a questão da segurança.

Parabéns
Por: Keila, 26/01/2007   03:56:59
está ótimo ter tido uma iniciativa pelo menos de ter feito um código para iniciantes terem idéia do que serve muitas coisas q concerteza nao imaginavam. Muito legal mesmo de sua parte. Parabéns e continue assim.
Muito bom!!!
Por: Francis, 14/01/2007   07:21:09
Mes parabéns pela iniciativa!!!, nota 10!!
Resposta ao mal-informado abaixo
Por: Flávia, 12/01/2007   15:18:29
Caro Ricardo
O CÓDIGO É PARA INICIANTES que desejam uma opção para formulários simples e para ver como as funções funcionam.
NÃO ESTOU TRATANDO DE SEGURANÇA, esse não é o foco do artigo, vc sabe ler? Que bom. E para falar sobre meus conhecimentos, SE INFORME primeiro, colega!
Se não gostou, acesse outra área do site, pois pelas dezenas de e-mails que recebo, você FOI O ÚNICO que não gostou ok? Passe bem.
Baixíssima segurança.
Por: Ricardo, 11/01/2007   09:52:38
Me desculpe, mas até para fins didáticos o exemplo é fraco!

Faz tempo que os screenloggers ou mouseloggers são utilizados para capturar senhas em teclados virtuais, portanto esconder os valores numéricos quando o mouse estiver sobre os botões é um requisito básico.

O seu teclado não embaralhas as seqüência dos números, facilitando que um observador a distância possa capturar a senha.

A senha é enviada em texto claro (sem qualquer codificação), tornando muito fácil a captura desta por sniffers ou afins.

Sem falar que a senha que está sendo digitada é exibida na URL a cada POST. ABSURDO!!

Editando seu código-fonte HTML em tempo de execução (Com a extensão do firefoex WebDeveloper), basta colocar duas aspas duplas no value do input, de nome display, e submeter para burlar a autenticação. São códigos como este que desvalorizam o desenvolvedor PHP.

Não conheço sua capacidade, mas infelizmente postar um artigo deste nível no site com certeza diminui o valor de todo resto! Não se preocupe em elaborar artigos de alta qualidade! É disso que a comunidade PHP precisa! Afinal você é uma Analista de Sistemas!
Muito Legal, porém....
Por: André, 11/01/2007   06:14:13
Não é necessário a utlização de recursos do AJAX (Javascript, XML, DOM, XSLT ...), utiliza somente javascript. Desse modo vc consegue um bom teclado virtual usando algumas imagens com atributo onClick e uma funça muuuuiiito simples em Javascript para escrever o valor dessa img em um form.

[]S
Resposta
Por: Flávia, 03/01/2007   10:43:09
Obrigada Marcos!
Envie sugestões para melhorias, quando as tiver!
Muito interessante
Por: Marcos, 02/01/2007   03:40:54
Achei a idéia interessante e irei experimentá-la, adaptando-a às minhas necessidades. Parabéns!