Flash – Criando um sistema de login usando PHP+MySQL.
Olá a todos. Para os que não me conhecem meu nome é Natan D. Alves, sou um dos moderadores do Fórum de Flash&ActtionScript do MxStudio e esse será meu primeiro artigo. Hoje iremos criar um sistema de login utilizando PHP+MySQL e cadastro de pessoas para efetuar o login.
Pré-requisitos para esse tutorial
- Servidor rodando PHP 4.2;
- MySQL 4.x ou superior;
Criando tabela no MySQL
Vamos criar a tabela que será responsável por receber os dados do usuario e senha. Sua tabela tem que ter esse esquema:
CREATE TABLE login (
id INT(5) NOT NULL AUTO_INCREMENT,
usuario TEXT NOT NULL,
senha TEXT NOT NULL,
PRIMARY KEY (id)
);
Criando o PHP
Com a tabela criada vamos ao PHP. Ele será responsável por receber os valores vindos do Flash, fazer a consulta no MySQL e cadastrar. Salve como login.php.
<?php
/*Conectando ao MySQL*/
$con = mysql_connect("seu host","seu usuario","sua senha") or die(mysql_error());
/* Selecionando Banco de Dados*/
$db = mysql_select_db("seu banco de dados",$con) or die(mysql_error());
/*Variáveis vindas do Flash pelo método POST*/
/*Codificamos para ISO-8859-1*/
$usuario = utf8_decode(@$_POST['usuario']);
$senha = utf8_decode(@$_POST['senha']);
$novo_usuario = utf8_decode(@$_POST['novo_usuario']);
$nova_senha = utf8_decode(@$_POST['nova_senha']);
/*Selecionando a Ação*/
$action = $_GET['action'];
/*Seleciona a ação*/
switch ("$action") {
/*Caso seja ação entrar*/
case 'entrar':
/*Procuramos pelos usuarios e senha vindo do Flash*/
$query = "SELECT * FROM login WHERE usuario = '$usuario' AND senha = '$senha'";
$result = mysql_query( $query ) or die ("Ops, deu Erro!!!");
/*Verificando se o resultado está correto*/
$num = mysql_num_rows( $result );
/*Se estiver correto*/
if ($num == 1){
/*Manda a mensagem para o Flash*/
print "&mensagem=Bem-Vindo+$usuario&correto=1";
/*Se não for correto*/
} else {
/*Manda a mensagem de erro para o Flash*/
print "&mensagem=Opa, você digitou errado ou não é cadastrado.";
}
break;
/*Caso a ação seja Cadastrar*/
case 'cadastrar':
/*Procuramos por usuários com o mesmo nome vindo do Flash*/
$verifica = "SELECT usuario FROM login WHERE usuario = '$novo_usuario'";
$teste = mysql_query($verifica) or die ("Ops, deu Erro!!!");
$vai = mysql_num_rows($teste);
/*Se já existir o usuário*/
if ($vai == 1){
/*Manda a mensagem de Erro para o Flash*/
print "&mensagem=Usuário já Existe";
/*Se não existe...*/
} else {
/*Inseri os dados no MySQL*/
$sqlEnvia = mysql_query("INSERT INTO login (usuario,senha) VALUES ('$novo_usuario','$nova_senha')") or die(mysql_error());
/*Manda a mensagem de Sucesso para o Flash*/
print "&mensagem=Cadastro Efetuado com Sucesso";
}
break;
}
?>
Criando a Interface em Flash
Agora vamos ao Flash. Usaremos duas camadas, uma responsável pelos objetos e outra pela as ações, todos com três frames em cada. Como na Figura:
login: aqui será onde o usuário colocara seu login e senha
área reservada: aqui é a área reservada para o usuário que se cadastrou com sucesso
cadastro: aqui será para o cadatro de novos usuários
No primeiro frame será responsável pelo login. Iremos criar dois campos imput com intancia de usuario e senha.
Criaremos também um campo de texto dinamico com instancia de mensagem. Esse campo será responsável por receber as mensagens vindas do PHP. Esse campo estará em todos os Frames.
Ainda no primeiro Frame iremos criar dois botões:.
Vamos ao ActionScript do primeiro Frame. Clicando no primeiro Frame da camada actions abra o painel Actions (F9) e coloque:
/*Removendo os itens do botão direito do mouse*/
Stage.showMenu = false;
stop();
/*Apaga os valores do campo dinâmico mensagem*/
mensagem.text = "";
/*Apaga os valores do campo imput usuario e senha*/
usuario.text = "";
senha.text = "";
/*Habilita a máscara de senha para o campo imput senha*/
senha.password = true;
/*Restringe o campo usuário a no máximo 30 caracteres*/
usuario.maxChars = 30;
/*Restringe o campo senha a no máximo 10 caracteres*/
senha.maxChars = 10;
/*Ao precionar do botão novo*/
novo.onPress = function() {
/*Vai para o quadro 3*/
gotoAndStop(3);
};
/*Declarando objeto LoadVars que envia os valores*/
var objManda:LoadVars = new LoadVars();
/*Ao precionar do botão entrar*/
entrar.onPress = function() {
/*Se os campos imput usuario e senha não forem vazios*/
if (usuario.text != "" && senha.text != "") {
/*Desabilita o botão entrar*/
entrar.enabled = false;
/*Desabilita o botão novo*/
novo.enabled = false;
mensagem.text = "Carregando...";
/*Valores a serem enviados*/
objManda.usuario = usuario.text;
objManda.senha = senha.text;
/*Enviando variáveis ao PHP e carregando as variáveis retornadas*/
objManda.sendAndLoad("http://localhost/login.php?action=entrar", objManda, "POST");
/*Quando os resultados forem recebidos do servidor*/
objManda.onLoad = function(ok) {
/*Se for ok*/
if (ok) {
/*Habilita o botão entrar*/
entrar.enabled = true;
/*Habilita o botão novo*/
novo.enabled = true;
/*Se o servidor retornou o valor correto com valor igual a 1*/
if (this.correto == 1) {
/*Vai para o quadro 2*/
gotoAndStop(2);
/*Mensagem vinda do PHP*/
mensagem.text = this.mensagem;
/*Se não for correto*/
} else {
/*Mensagem de erro vinda do PHP*/
mensagem.text = this.mensagem;
}
}
};
/*Se os campos imput usuario e senha estiverem vazios*/
} else {
/*Mensagem de erro*/
mensagem.text = "Faltou Algo...";
}
};
No segundo Frame será aonde o usuário será levado se fizer o login corretamente. Portanto fica a critério de vocês fazer o que preferirem.
No terceiro e último frame será para o cadastramento de usuário. Iremos colocar os mesmos campos imput que colocamos no primeiro frame com as mesmas instancias, não se esqueça do campo de texto dinâmico mensagem. Iremos criar mais dois botões:
Agora vamos ao ActionSript. No terceiro frame da camada actions abra o painel Actions (F9) e coloque:
stop();
/*Apaga os valores do campo dinâmico mensagem*/
mensagem.text = "";
/*Apaga os valores do campo imput usuario e senha*/
usuario.text = "";
senha.text == "";
/*Habilita a máscara de senha para o campo imput senha*/
senha.password = true;
/*Restringe o campo usuário a no máximo 30 caracteres*/
usuario.maxChars = 30;
/*Restringe o campo senha a no máximo 10 caracteres*/
senha.maxChars = 10;
/*Ao precionar do botão voltar*/
voltar.onPress = function() {
/*Vai para o quadro 1*/
gotoAndStop(1);
};
// Declarando objeto LoadVars que envia os valores
var objEnvia:LoadVars = new LoadVars();
/*Ao precionar do botão cadastrar*/
cadastrar.onPress = function() {
/*Se os campos usuario e senha não estiverem vazios*/
if (usuario.text != "" && senha.text != "") {
/*Desabilita o botão cadastrar*/
cadastrar.enabled = false;
/*Desabilita o botão voltar*/
voltar.enabled = false;
/*valores a serem enviados*/
objEnvia.novo_usuario = usuario.text;
objEnvia.nova_senha = senha.text;
/*Enviando variáveis ao PHP e carregando as variáveis retornadas*/
objEnvia.sendAndLoad("http://localhost/login.php?action=cadastrar", objEnvia, "POST");
mensagem.text = "Cadastrando...";
/*Quando os resultados forem recebidos do servidor*/
objEnvia.onLoad = function(ok) {
/*Se for Ok*/
if (ok) {
/*Habilita o botão cadastrar*/
cadastrar.enabled = true;
/*Habilita o botão voltar*/
voltar.enabled = true;
/*Mensagem vinda do PHP*/
mensagem.text = this.mensagem;
/*Apaga os valores do campo imput usuario*/
usuario.text = "";
/*Apaga os valores do campo imput senha*/
senha.text = "";
}
};
/*Se os campos imput usuario e senha estiverem vazios*/
} else {
/*Mensagem de erro*/
mensagem.text = "Entre com um usuário e senha válidos";
}
};
Considerações Finais
Aprendemos como cadastrar e efetuar login usando PHP/MySQL. É claro que pode colocar mais campos, fazer mais implementações, tudo depende de Você. Com esse sistema podemos criar uma área particular especial, liberação de Informações ente outras maneiras com segurança.
O resultado será algo parecido com esse:
Pronto, está pronto seu sistema de login e cadastro. Espero que tenham gostado.
Um abraço a todos e até a próxima.
Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum |
ShareThis
O unico problema q eu encontrei foi que quando vc altera o nome do campo usuario no banco de dados e lógico fazendo as devidas alterações no login.php, mesmo assim naum funciona.
Muito bom o tutorial!!
aqui comigo funcionou perfeitamente, mas eu estou com um problema:
Fiz o seguinte:
linha 1 var nome_v;
codigo igual até:
linha36 nome_v = objManda.usuario = usuario.text;
e depois no fim do codigo coloquei:
linha69 meu_nome.onPress = function(){
msg.text=nome_v;
}
o que acontece é que esse texto não aparece, acredito que a variavel nome_v não está saindo da função, pode ser isso? como resolver?
Desde ja Muito Obrigado!!
ola meu nome e andreia desculpe errei uma coisa obrigada
@@@@@@@@ ERRO @@@@@@@@@@
Olá Pessoal,
Muitos estão tendo problema com o código do flash : if (this.correto == 1) { ……
Bom pessoal ta acontecendo o seguinte:
No login.php ele definiu que :
print “&mensagem=Bem-Vindo+$usuario&correto==1″;
Se o Usuario e Senha for correto com o que está no Banco de Dados faça:
Mensagem = Bem-Vindo+ O Nome do Usuário
e que a variável CORRETO é ==1
só que no envio de volta para o flash ele identifica que : correto ==1 e só considera apenas um = não os dois == que ele pôs para afirmar que é 1..
bom chega de bla bla bla bla..
1º Método de concerto :
Na primeira sena do FLASH, no Action Scrip mude a linha:
if (this.correto == 1) {
Para:
if (this.correto == “=1″) {
OU
2° Método:
no Login.PHP mude a linha:
print “&mensagem=Bem-Vindo+$usuario&correto==1″;
Para:
print “&mensagem=Bem-Vindo+$usuario&correto=1″;
Vlws galera.. espero ter ajudado.. Abs!
@@@@@@@@@@@ ERRO CONCERTADO @@@@@@@@@@@@@
poxa muito boa a dica muito obrigado! tenho certeza que irei melhorar meu site 61% com essa dica valeu!
excelente esquema de login facil de fazer e configura até a mim que nao sei php e pricipalmente mysql, otimas esplicações…
obrigado
Muito bom o tutorial, usei como base para alguns sistemas simples de loguin e senha para acesso a cadastro de imagens por exemplo. É imprecionante o quanto o Flash anda crescendo no mercado, antigamente diziam por ai que o flash era para quem queria ficar na moleza, mas agora com efeito gerados a partir de AS avançado garantem uma qualidade incomparável e de brinde, tamanho final de arquivo leve que garante um peso leve ao site.
Para usar este tutorial tem que ter algum conhecimento de flash, mysql ou php? Ou pode ser também os completamente leigos?
Gostaria que vocês fossem mais específicos. Mais detalhados.
Onde acho a resposta para todas as perguntas feitas neste comentário?
Se cada pergunta tivesse a resposta em seguida, seria a resposta para muitos de nós.
Quais os programas que irei usar na criação desta ficha de cadastro?
Eu já tinha feito o tutorial em AS 2.0 e agora estou tentando em AS 3.0. Já estou quase no fim. O Flash está enviando os dados corretamente para a base MySQL, mas ainda não consegui uma coisa: receber as mensagens de erro do PHP para o Flash.
No PHP do Tutorial está assim:
…
*Se já existir o usuário*/
if ($vai == 1){
/*Manda a mensagem de Erro para o Flash*/
print “&mensagem=Usuário já Existe”;
…
No Flash está assim:
….
if (ok) {
/*Habilita o botão cadastrar*/
cadastrar.enabled = true;
/*Habilita o botão voltar*/
voltar.enabled = true;
/*Mensagem vinda do PHP*/
mensagem.text = this.mensagem;
…
Meu problema está no valor da propriedade text do campo de texto do Flash “mensagem” (mensagem.text), pois no AS 3.0 o valor “this.mensagem” não está funcionando.
Uma ajuda seria bem-vinda. Grato.
eu quero um
Cara, primeiramente parabéns pelo tutorial, funcionou quase 100%, só estou com um problema de cadastrar outro user, toda vez q eu vou cadastrar mais usuarios ele logo de cara me diz q o user já existe, sendo q n existe nenhum outro user a n ser o primeiro q cadastrei..
Outra dúvida é a seguinte, qdo fui visualizar a tabela no banco de dados o usuario saiu como “1″ e n como “daniel” q foi o q eu cadastrei e a senha a mesma coisa, n foi inserido a senha q eu digitei, foi colocado “0″ no lugar..
O q tem de errado nisso por favor q eu n estou conseguindo encontrar a solução aki..
Obrigado..
Bom dia,
Primeiramente parabéns pelo tutorial..
Mas estou com um problema..
Só faz a conexão e cadastro de usuario no primeiro acesso, depois todo e qualquer user q eu vou criar, diz q usuário já existe..
tentei tanto local qto hospedado.. e me traz o mesmo erro sempre..
Alguém já passou por isso e pode me auxiliar???
Obrigado a todos..
Pessoal, o código está correto, a única coisa que necessita ser arrumada é a criação da tabela que apresenta os itens usuario e senha como int, e na verdade deveriam ser varchar, já que não são compostos apenas por números na maioria dos casos. Modifiquei ainda o número de caracteres de ambos para 15, um número mediano e razoável para cadastro de usuários e senhas com um bom nível de proteção.
Sendo assim, temos:
CREATE TABLE login (
id INT(5) NOT NULL AUTO_INCREMENT,
usuario VARCHAR(15) NOT NULL,
senha VARCHAR(15) NOT NULL,
PRIMARY KEY (id)
);
Para os que estão tendo problemas e não saem de “cadastrando…” não esqueçam de alterar o AS tanto do frame 1 quanto do frame 3 para seus respectivos websites onde no objEnvia.sendAndLoad está o localhost e procurem não alterar o nome dos arquivos. Se assim o fizerem, alterem também sua referência onde estes estão instanciados.
Abraço!
gostei muito do tuto, mas qando eu vou criar a tabela no MYSQL nao consigo da erro.
alguem pode ensinar a criar passo a passo a tabela no MYSQL com essas informaçoes?
Obrigado
Natan,
Está muito bom o tutorial, mas eu pesso a você que se possível crie uma vidêo aula ensinando isso seria mais facíl !!!
Obrigado,
Por Favor me responda por e-mail se vai disponibilizar a vidêo aula !
tenho um dúvida: como cria o php??
contato@acolitossaotarcisio.com
só fica em cadastrando … pq ??
Tenho que mudar alguma coisa do flash ?
Prezado Natan
Não consigo instalar o MySQL, poderia substituir a tabela do MySQL pela tabela do Access 2003? E o que deveria trocar na hipótese detsa possibilidade?
Achei super interessante login e senha no Flash, e minha dúvida também, se oferece segurança no flash. Obrigado pelo artigo.
Muito Bom, só que eu queria saber como faço para ligar o flash com meu banco de dados?? pode ser o acces 2007???
flwww
Olá a todos, algumas questões já são antigas mas só hoje descobri este site.
Obrigado pela ajuda, consegui fazer tudo mas tive problemas, tal como alguns users comentaram, quando colocava o flash no site. Com o preview conseguia fazer login, mas no site não dava.
Para resolver basta trocar o endereço do ficheiro login.php no flash desta forma:
objEnvia.sendAndLoad(“http://127.0.0.1/login.php?action=cadastrar”, objEnvia, “POST”);
Em vez de localhost, inserimos o IP loopback.
Este problema acontecia muitas vezes com o Firefox e não só.
Abraço
Correcção:
objEnvia.sendAndLoad(“login.php?action=cadastrar”, objEnvia, “POST”);
Desta forma funciona no servidor, uma vez que o caminho é relativo. Espero ter ajudado.
Igor poderia enviar os arquivos pro meu e-mail ou disponiblizar outro link o do rapidShare ta qbrado, c4ntao@gmail.com obrigado
Como faço pra Levar pra outra página após o login?
Ex: Bem-Vindo Andre-Luiz
e depois levar pra outra página?
Depois da Mensagem:
Ex.: Bem-Vindo Andre Luiz
Tem como redirecionar para uma página ou site?
Obrigado.
bom isso , só queria que mi mandasse um apostila com esse execicios para o meu site:keilaemili@hotmail.com
Gostaria de saber o que tem que usar para fazer o flash, pq o banco de dados e o php jah tenho!
Oo Gosteu muito vlw kara !!!
o duro é que so novo naums ei mexer com o flash –’
Legal mas tem um problema….quando eu cadastro uma pessoa com nome x e senha y, o cadastro ocorre normalmente, porém, quando entro com o nome de outro usuário e a mesma senha y, a pessoa acessa a área restrita! Isso para um sistema de login e senha é algo inaceitável, um furo gravissímo.