Login com ajax

uiLhian · Abril 9, 2013

bom eu tenho um sistema de login que ele original é assim:

logar.php

<?php
require_once('mysql.php');
require_once('Session.class.php');

if ( isset( $_GET['logout'] ) && !empty( $_GET['logout'] ) )
{
    $sid = new Session;
    $sid->start();
    $sid->destroy();
}

if ( isset( $_POST['usuario'] ) && isset( $_POST['senha'] ) && !empty( $_POST['usuario'] ) && !empty( $_POST['senha'] ) )
{
    $usuario = $_POST['usuario'];
    $senha = md5( $_POST['senha'] );
    $db = new Mysql;
    $db->query( "SELECT * FROM users WHERE Ulogin = '$usuario' AND Usenha = '$senha'" )->fetchAll();
    if ( $db->rows >= 1 )
    {
        $sid = new Session;
        $sid->start();
        $sid->init( 36000 );
        $sid->addNode( 'start', date( 'd/m/Y - h:i' ) );
        $sid->addNode( 'Uid', $db->data[0]['Uid'] );
        $sid->addNode( 'Ulogin', $db->data[0]['Ulogin'] );
        header( 'Location: album.php' );
    }
    else
    {
        ?>

      <?php echo("ferro"); ?>
        <?php
    }
}
?>

index.php

<form class="form-horizontal" action="admin/logar.php" method="POST">
<div class="control-group input-prepend">
<div>
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-medium" id="usuario" placeholder="Usuário">
</div>
<div class="input-append">
<span class="add-on"><i class=" icon-asterisk"></i></span>
<input type="password" class="input-cwva" id="senha" placeholder="Senha">
<button type="submit" class="btn btn-success"><i class="icon-ok-sign"></i></button>
</div>
</div>
</form>

ae estava fuçando net procurando um sistema de login com ajax, ae achei um e estou tentando adaptar, mas sem sucesso :( pois ele só me retorna login e senha invalidos.

doLogin.php

<?php
require_once('mysql.php');
require_once('Session.class.php');

if ( isset( $_GET['logout'] ) && !empty( $_GET['logout'] ) )
{
    $sid = new Session;
    $sid->start();
    $sid->destroy();
}

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_REQUEST['username'];
$password = md5($_REQUEST['password']);


$db = new Mysql;
    $db->query( "SELECT * FROM usuarios WHERE Ulogin = '$username' AND Usenha = '$password'" )->fetchAll();
    if ( $db->rows >= 1 )
    {
       $sid = new Session;
       $sid->start();
       $sid->init( 36000 );
       $sid->addNode( 'start', date( 'd/m/Y - h:i' ) );
       $sid->addNode( 'Uid', $db->data[0]['Uid'] );
       $sid->addNode( 'Ulogin', $db->data[0]['Ulogin'] );
       header( 'Location: album.php' );
    }
{
echo "success";
}
}


?>

index.php

<script type="text/javascript">
$(document).ready(function() {

$("#login").click(function() {

var action = $("#form1").attr('action');
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};

$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
$("#form1").slideUp('slow', function() {
$("#message").html("<p class='success'>You have logged in successfully!</p>");
});
else
$("#message").html("<p class='error'>Invalid username and/or password.</p>");
}
});


return false;
});


});
</script>
</head>


<body>
<p> </p>
<div id="content">
  <h1>Login Form</h1>
  <form id="form1" name="form1" action="doLogin.php" method="post">
    <p>
      <label for="username">Username: </label>
      <input type="text" name="username" id="username" />
    </p>
    <p>
      <label for="password">Password: </label>
      <input type="password" name="password" id="password" />
    </p>
    <p>
      <input type="submit" id="login" name="login" />
    </p>
  </form>
    <div id="message"></div>
</div>
</body>
</html>

Alaerte Gabriel · Abril 9, 2013

Um array associativo que por padrão contém informações de $_GET, $_POST and $_COOKIE.

As variáveis em $_REQUEST são providas para o script via mecanismos de entradas GET, POST, e COOKIE e portando poderia ser modificadas por um usuário remoto e não podem ser confiadas. A presença e ordem das variáveis listadas neste array é definido de acordo com a diretiva de configuração do PHP variables_order.

:seta: http://www.php.net/manual/pt_BR/reserved.variables.request.php

Seja específico em seu método de envio das informações. Se em seu form você tem: method="post"> Então defina em seu script

$_POST['is_ajax']; $_POST['username'] $_POST['password']

uiLhian · Abril 9, 2013

mudei e continua dando usuario invalido.

$is_ajax = $_POST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_POST['username'];
$password = md5($_POST['password']);

Alaerte Gabriel · Abril 9, 2013

Debug seu script e veja se os dados estão chegando. Você utiliza a senha na base de dados em MD5 ?

<?php
require_once('mysql.php');
require_once('Session.class.php');


print_r($_POST);
exit();

Cole aqui o que te retorna.

uiLhian · Abril 10, 2013

- e o resultado foi esse: Array()

- sim ultilizo md5.

Alaerte Gabriel · Abril 10, 2013

Isso significa que você NÃO restá recebendo os dados via POST na página. Tem algo errado aí com seu jQuery

Deixe o seu formulário assim:

<form id="form1" name="form1">

E tente novamente sem retirar os códigos que te passei, e veja se retorna algo no array.

uiLhian · Abril 10, 2013

nada

Alaerte Gabriel · Abril 10, 2013

Pois então, o seu problema está no jQuery.

Retire-o, e envie o formulário sem jquery... para ter certeza de que o seu php está correto.




<form id="form1" name="form1" action="doLogin.php" method="post">
<p>
<label for="username">Username: </label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password: </label>
<input type="password" name="password" id="password" />
</p>
<p>
<input type="submit" id="login" name="login" />
</p>
</form>

uiLhian · Abril 10, 2013

'cru' ele funciona.

Edgard Hufelande · Abril 10, 2013

Simplefique seu jQuery.

para pegar os dados de um formulário use o serialize().

ele já irá pegar os valores e você só faz transferir pelo $.post ou $.ajax...
Eu costumo usar mais o $.post

você só irá precisar resgatar os $_POST no php.

$(function(){

    var valsForm = $("formulario").serialize();

    $.post('logar.php', valsForm, function(resposta){
          $("<p>").html(resposta);
    });

});

uiLhian · Abril 10, 2013

bom me corrige se eu estiver errado por favor. mas deixei o código assim:

index.php

<script type="text/javascript">
$(document).ready(function() {


$(function(){


    var valsForm = $("form1").serialize();


    $.post('doLogin.php', valsForm, function(resposta){
          $("<p>").html(resposta);
    });


});


});
</script>
</head>


<body>
<p> </p>
<div id="content">
  <h1>Login Form</h1>
  <form id="form1" name="form1" action="doLogin.php" method="post">
    <p>
      <label for="username">Username: </label>
      <input type="text" name="username" id="username" />
    </p>
    <p>
      <label for="password">Password: </label>
      <input type="password" name="password" id="password" />
    </p>
    <p>
      <input type="submit" id="login" name="login" />
    </p>
  </form>
    <div id="message"></div>
</div>
</body>
</html>

doLogin.php

<?php
require_once('mysql.php');
require_once('Session.class.php');




if ( isset( $_GET['logout'] ) && !empty( $_GET['logout'] ) )
{
    $sid = new Session;
    $sid->start();
    $sid->destroy();
}




{
$username = $_POST['username'];
$password = md5($_POST['password']);


$db = new Mysql;
    $db->query( "SELECT * FROM usuarios WHERE Ulogin = '$username' AND Usenha = '$password'" )->fetchAll();
    if ( $db->rows >= 1 )
    {
       $sid = new Session;
       $sid->start();
       $sid->init( 36000 );
       $sid->addNode( 'start', date( 'd/m/Y - h:i' ) );
       $sid->addNode( 'Uid', $db->data[0]['Uid'] );
       $sid->addNode( 'Ulogin', $db->data[0]['Ulogin'] );
       header( 'Location: album.php' );
    }
{
echo "success";
}
}


?>

Alaerte Gabriel · Abril 10, 2013

Funcionou ?! você está usando o plugin jqForm ?

uiLhian · Abril 10, 2013

- não estou usando nenhum plugin não...

- bom logar ele até logou. se eu digito uma senha ou usuario invalido ele aprece essa linha, echo "success";

acho que não deve ta funcionando !00% né.

- e como posso saber se o jQuery ae no caso está funcionando ? pq não sei se ele se funciona devido ao jquery ou por ter tirado o código antigo e ficado "cru".

Edgard Hufelande · Abril 10, 2013

você não colocou o # pra identificar a ID....

var valsForm = $("form1").serialize();

para

var valsForm = $("#form1").serialize();

E o php altere e deixe-o assim.

$db = new Mysql;
    $db->query( "SELECT * FROM usuarios WHERE Ulogin = '$username' AND Usenha = '$password'" )->fetchAll();
    if ( $db->rows >= 1 )
    {
       $sid = new Session;
       $sid->start();
       $sid->init( 36000 );
       $sid->addNode( 'start', date( 'd/m/Y - h:i' ) );
       $sid->addNode( 'Uid', $db->data[0]['Uid'] );
       $sid->addNode( 'Ulogin', $db->data[0]['Ulogin'] );
       echo "<script>alert('Logado com sucesso!')</script>";
       header( 'Location: album.php' );
    } else {
       echo "<script>alert('Login ou senha incorretos!')</script>";
       exit();
    }
}

Mas não consegui entender pra que o login via $.post se você está dando um header( 'Location:' ) pra ele redirecionar para outra página...

GCAS · Abril 10, 2013

Olá uiLhian!!!!!

vou dar as diretrizes básicas para você prosseguir:

primeiro, o ajax é composto por um script que envia e também recebe(pode ser php / asp / html....) , um que processa a requisição (javascript), este último o "coração" da coisa.

Como funciona esse tal de ajax (javascript assincrono e XML), que não necessariamente envolve XML ?

um script (php / asp / html..) manda informações para um script javscript e este por sua vez entrega a resposta: seja na mesma página ou te redireciona para outra. Através de um processo chamado readyState, que pode em forma de página, texto ou mesmo XML. Bem matando dois coelhos com uma cajadada só, vou exemplificar com o exemplo pedido e vou comentando a medida que for necessário.

primeiro vou trabalhar o form

form.php

<form>

Login: <input type="text" name="login" id="log"> <br>

Senha: <input type="password" name="pwd" id="pwd"> <br>

</form>

a resposta, neste caso negativa irá aparecer na div "res_log".

o nome da função que usará ajax será "logar()".

Ok feito o form, agora trabalharei o javascript em duas frentes; uma será para verificar e logo "inicializar" o ajax para começar o processo; outra será para processar informações específicas sobre o trabalho em questão, logar.

script.js

/*parte que vai ver se roda ajax*/

try {

ajax = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e) {

try {

ajax = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(ex) {

try {

ajax = new XMLHttpRequest();

}

catch(exc) {

alert("Esse browser não tem recursos para uso do Ajax");

ajax = null;

}

essa você pode colocar solta no código, logo nas primeiras linhas (o ideal seria colocar uma função para isso, mas para efeito de exemplo...)

Ok feita a parte de verificação, é a hora de processar o ready state e criar a função logar()

Geralmente, gosto de fazer uma função só para o ready state, fica mais organizado e rola de um reuso de código.

function rdy_state(met, pag, msg_loading, par, id){

var rtext = ajax

var box = document.getElementById(id);

rtext.open(met, pag, true);

rtext.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

rtext.onreadystatechange = function(){

if (rtext.readyState == 1){

box.innerHTML = msg_loading;

}

if (rtext.readyState == 4){

box.innerHTML = rtext.responseText;

}

rtext.send(par);

}

bem, vamos aos comentários.

primeiramente, explicar os parametros da função, vamos lá:

met = é o metodo que os parametros são enviados, GET ou POST, nesse caso serão por post;

pag = a página a ser aberta;

msg_loading = texto que aparecerá enquanto a requisição é processada;

par = parametros a serem enviados;

id = div que vai receber o texto e a resposta.

agora os comentários da função(relevantes para o entendimento)

a variavel rtext vai receber o ajax(verificação de qual metodo do ajax);

o metodo open() que vai abrir a pagina solicitada;

setRequestHeader(), configurará um cabeçalho, fundamental para requisição post e montagem do XML.

Agora vem o pulo do gato, que é processar o ready state, vou fazer dois if's sendo que:

o status 1, quer dizer que aina está carregando(loading) e o 4 quer dizer que sua requisição foi processada com exito.

nesse caso, uso o response text, porque vou processar apenas texto, e também tem o resposeXml, mas este é apenas para xml

e após o processamento da requisição, envia usando-se o metodo send(). e os parametros.

Configurado o ready state, agora vamos para a função logar()

function logar(){

var cmpo_log = document.getElementById("log").value;

var cmpo_pwd = document.getElementById("pwd").value;

//parameros para o ready state

par = "log="+cmpo_log+"&& pwd"+cmpo_pwd;

rdy_state("post", "controle.php", "carregando", par, "resp_log");

}

controle.php

<?php

include("script_banco.php"); //conexão com o banco de dados

// resgate dos campos

$login = $_POST['log'];

$senha = $_POST['pwd'];

//agora uma query para o login, vou fazer a forma mais simples, apenas para fina didaticos

$selecao = "select * from tabela_usuario where log_usr = '".$login."' and pwd_usr = '".$senha."';

$execucao = mysql_query($selecao);

if(mysql_num_rows($execucao)>0){

//criar sessão

header('location: pagina_usuario.php');

}else{

echo "login e ou senha incorreta(s)";

}

?>

lembra da div resp_log?! então em caso de erro, o texto vai aparecer lá, pois funciona como uma "iframe", mas bem melhor e assincrono, caso esteja tudo Ok, a função header, vai te direcionar a página de usuario.

Lógico que esse foi um exemplo bem simples, existem N formas de melhorar isso pois o intuito deste post foi apenas dar as diretrize básicas para você inicir o teu trabalho. Existem várias frameworks uteis para vc, mas fazer na mão é mais gostoso e vc aprende o fundamento da coisa.

Qualquer dúvida, pode reportar. Espero ter ajudado :D

uiLhian · Abril 11, 2013

Edgard Hufelande

então modifiquei o PHP deixando-o assim:

<?php
require_once('mysql.php');
require_once('Session.class.php');

if ( isset( $_GET['logout'] ) && !empty( $_GET['logout'] ) )
{
    $sid = new Session;
    $sid->start();
    $sid->destroy();
}

$username = $_POST['username'];
$password = md5($_POST['password']);

$db = new Mysql;
    $db->query( "SELECT * FROM usuarios WHERE Ulogin = '$username' AND Usenha = '$password'" )->fetchAll();
    if ( $db->rows >= 1 )
    {
      $sid = new Session;
      $sid->start();
      $sid->init( 36000 );
      $sid->addNode( 'start', date( 'd/m/Y - h:i' ) );
      $sid->addNode( 'Uid', $db->data[0]['Uid'] );
      $sid->addNode( 'Ulogin', $db->data[0]['Ulogin'] );
      echo "<script>alert('Logado com sucesso!')</script>";
    } 
else 
{
echo "<script>alert('Login ou senha incorretos!')</script>";
        exit();
    }

?>

- só que tipo quando entro na page ele ja aparece o alert('Login ou senha incorretos!') e sempre que dou um reload na pagina tbm.

- logar ele até loga certinho.

Arquivado

Login com ajax

Recommended Posts

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edgard Hufelande 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edgard Hufelande 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

GCAS 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

uiLhian 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante