Sesión con jQuery, PHP y base de datos

nusee · #1 (**permalink**) 11/12/2010, 13:22

Hola! Disculpen la molestia, estoy creando un formulario para el inicio de sesión usando jQuery, PHP y base de datos, no tengo demasiada experiencia en la utilización de estos lenguajes, recién estoy aprendiendo y la verdad es que no puedo hacerlo funcionar, les dejo el código a continuación:

XHTML:

Código HTML:

<?php
	session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ar" lang="es-ar" dir="ltr">
<head>
<!-- CSS Documents -->
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/mainContent.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.4.custom.css" charset="utf-8" />
<!-- Scripts -->
<script type="text/javascript" src="scripts/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/js/login.js"></script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es-ar" />
</head>
<body>
	<?php
		if(!isset($_SESSION['username']) || $_SESSION['username'] == ' '){
	?>
	<!-- Login form -->
	<div id="loginForm">
		<div id="errorMessage"></div>
		<form id="form" name="form" method="post" action="">
			<fieldset>
				<dl>
					<dt><label for="username">Usuario:</label></dt>
					<dd><input id="username" class="inputFields" name="username" type="text" size="20" maxlength="20" tabindex="1" value="" /></dd>
				</dl>
				<dl>
					<dt><label for="password">Contraseña:</label></dt>
					<dd><input id="password" class="inputFields" name="password" type="password" size="20" maxlength="20" tabindex="2" value="" /></dd>
				</dl>
				<dl>
					<dd><input id="submit" name="submit" type="button" value="Ingresar" /></dd>
				</dl>
			</fieldset>
		</form>
	</div>
	<?php
		}
	?>
</body>
</html>

login.js

Código:

$(document).ready(function(){
	$("#username").focus();
	
	$("#submit").click(function(){
		$.ajax({
			url: "php/session.php",
			cache: false,
			type: "POST",
			data: "username=" + $("#username").val() + "&password=" + $("#password").val(),
			success: function(){
				alert('success');
			},
			error: function(){
                                $("#form").effect("shake", {times:2}, 100);
				$("#errorMessage")
					.css('margin', '30px 0 10px 9px')
					.attr('class', 'ui-state-error')
					.html('<strong>ERROR - </strong>Los datos ingresados son incorrectos');
			}
		});
	});
});

session.php

Código PHP:

  <?php

session_start();

if(!isset($_SESSION['username'])){
    if(isset($_POST['username'])){
        $db = new mysqli("localhost", "username", "password", "bd");
        $stmt = $db->prepare("SELECT username FROM users WHERE username = ? AND password = ?");
        $stmt->bind_param('ss', $_POST['username'], $_POST['password']);
        $stmt->execute();
        $stmt->store_result();
        
        if($stmt->num_rows() == 1){
            $stmt->bind_result($username);
            $stmt->fetch();
            $_SESSION['username'] = $username;
            header("Location: http://www.google.com.ar/");
        }
    }
}
?>

Se supone que al hacer click en el botón de enviar el login.js toma los datos y se los pasa al session.php donde se conecta con la base de datos y comprueba que esté todo bien, pero siempre me está tirando que no se conecta, probe de todo, pero como dije antes no tengo demasiada experiencia en estos lenguajes por el momento.

Desde ya disculpen las molestias nuevamente y muchísimas gracias!

Suertee! =)

maycolalvarez · #2 (**permalink**) 12/12/2010, 09:39

estas utilizando AJAX, por lo tanto es inútil redireccionar con las cabeceras:

header("Location: http://www.google.com.ar/");

lo que debes hacer es dumpear a la salida del script, algún valor que sea recibido por el XMLHttpRequest y así puedas compararlo con javascript, ejemplo:

Código PHP:

Ver original<?php
 
session_start();
 
if(!isset($_SESSION['username'])){
    if(isset($_POST['username'])){
        $db = new mysqli("localhost", "username", "password", "bd");
        $stmt = $db->prepare("SELECT username FROM users WHERE username = ? AND password = ?");
        $stmt->bind_param('ss', $_POST['username'], $_POST['password']);
        $stmt->execute();
        $stmt->store_result();
        
        if($stmt->num_rows() == 1){
            $stmt->bind_result($username);
            $stmt->fetch();
            $_SESSION['username'] = $username;
            echo "1"; //1 que si valida
            exit; //salir
            //header("Location: http://www.google.com.ar/"); //con AJAX es inútil
        }
    }
    echo "0"; //no valido
}

y en js:

Código Javascript:

Ver original$(document).ready(function(){
    $("#username").focus();
    
    $("#submit").click(function(){
        $.ajax({
            url: "php/session.php",
            cache: false,
            type: "POST",
            data: "username=" + $("#username").val() + "&password=" + $("#password").val(),
            success: function(data){
                if (data == '1') {
                     alert('success');
                }else{
                     alert('NO valido');
                }
            },
            error: function(){
                                $("#form").effect("shake", {times:2}, 100);
                $("#errorMessage")
                    .css('margin', '30px 0 10px 9px')
                    .attr('class', 'ui-state-error')
                    .html('<strong>ERROR - </strong>Los datos ingresados son incorrectos');
            }
        });
    });
});

nusee · #3 (**permalink**) 12/12/2010, 11:51

Cita:

Iniciado por maycolalvarez

estas utilizando AJAX, por lo tanto es inútil redirecconar con las cabeceras:

header("Location: http://www.google.com.ar/");

lo que debes hacer es dumpear a la salida del script, algún valor que sea recibido por el XMLHttpRequest y así puedas compararlo con javascript, ejemplo:

Código PHP:

Ver original<?php
 
session_start();
 
if(!isset($_SESSION['username'])){
    if(isset($_POST['username'])){
        $db = new mysqli("localhost", "username", "password", "bd");
        $stmt = $db->prepare("SELECT username FROM users WHERE username = ? AND password = ?");
        $stmt->bind_param('ss', $_POST['username'], $_POST['password']);
        $stmt->execute();
        $stmt->store_result();
        
        if($stmt->num_rows() == 1){
            $stmt->bind_result($username);
            $stmt->fetch();
            $_SESSION['username'] = $username;
            echo "1"; //1 que si valida
            exit; //salir
            //header("Location: http://www.google.com.ar/"); //con AJAX es inútil
        }
    }
    echo "0"; //no valido
}

y en js:

Código Javascript:

Ver original$(document).ready(function(){
    $("#username").focus();
    
    $("#submit").click(function(){
        $.ajax({
            url: "php/session.php",
            cache: false,
            type: "POST",
            data: "username=" + $("#username").val() + "&password=" + $("#password").val(),
            success: function(data){
                if (data == '1') {
                     alert('success');
                }else{
                     alert('NO valido');
                }
            },
            error: function(){
                                $("#form").effect("shake", {times:2}, 100);
                $("#errorMessage")
                    .css('margin', '30px 0 10px 9px')
                    .attr('class', 'ui-state-error')
                    .html('<strong>ERROR - </strong>Los datos ingresados son incorrectos');
            }
        });
    });
});

Muchísimas gracias maycolalvarez! Ya funciona!

Y gracias por avisarme lo del header, ahora aprendí algo nuevo

maycolalvarez · #4 (**permalink**) 12/12/2010, 12:05

Cita:

Iniciado por nusee

Muchísimas gracias maycolalvarez! Ya funciona!

Y gracias por avisarme lo del header, ahora aprendí algo nuevo

claro, el header location funciona, pero en una petición normal, con AJAX no te sirve de nada, además algo que si te sirve seria borrar la caché, agregarle esto, y no tendrás problemas luego con la caché del navegador

:

Código PHP:

Ver original<?php
//Evitar la caché del navegador:
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );  // disable IE caching 
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );  
header( "Cache-Control: no-cache, must-revalidate" );  
header( "Pragma: no-cache" );
 
session_start();
 
if(!isset($_SESSION['username'])){
    if(isset($_POST['username'])){
        $db = new mysqli("localhost", "username", "password", "bd");
        $stmt = $db->prepare("SELECT username FROM users WHERE username = ? AND password = ?");
        $stmt->bind_param('ss', $_POST['username'], $_POST['password']);
        $stmt->execute();
        $stmt->store_result();
        
        if($stmt->num_rows() == 1){
            $stmt->bind_result($username);
            $stmt->fetch();
            $_SESSION['username'] = $username;
            echo "1"; //1 que si valida
            exit; //salir
            //header("Location: http://www.google.com.ar/"); //con AJAX es inútil
        }
    }
    echo "0"; //no valido
}

nusee · #5 (**permalink**) 13/12/2010, 03:41

Cita:

Iniciado por maycolalvarez

claro, el header location funciona, pero en una petición normal, con AJAX no te sirve de nada, además algo que si te sirve seria borrar la caché, agregarle esto, y no tendrás problemas luego con la caché del navegador

:

Código PHP:

Ver original<?php
//Evitar la caché del navegador:
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );  // disable IE caching 
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );  
header( "Cache-Control: no-cache, must-revalidate" );  
header( "Pragma: no-cache" );
 
session_start();
 
if(!isset($_SESSION['username'])){
    if(isset($_POST['username'])){
        $db = new mysqli("localhost", "username", "password", "bd");
        $stmt = $db->prepare("SELECT username FROM users WHERE username = ? AND password = ?");
        $stmt->bind_param('ss', $_POST['username'], $_POST['password']);
        $stmt->execute();
        $stmt->store_result();
        
        if($stmt->num_rows() == 1){
            $stmt->bind_result($username);
            $stmt->fetch();
            $_SESSION['username'] = $username;
            echo "1"; //1 que si valida
            exit; //salir
            //header("Location: http://www.google.com.ar/"); //con AJAX es inútil
        }
    }
    echo "0"; //no valido
}

Muchas gracias de nuevo por los consejos maycolalvarez!

Te molesto con dos consultas más, la primera es para saber como puedo hacer para aumentar el tiempo definido de la sesión a por ejemplo diez horas, y la segunda es para saber si tenes idea de porque el código $("#username").focus(); solo funciona en Safari y Chrome, y no así en Firefox, Opera e IE.

Muchísimas gracias por toda la ayuda!

Suertee! =)

guners86 · #6 (**permalink**) 21/01/2011, 14:29

Hola yo tengo un problema parecido al que comentan, pero yo necesito es que cuando sea valido el usuario me mande a otra pagina como hago eso, pues por lo que vi lo que muestra es un aviso si esta logeado o no y eso es lo que yo también tengo. Pero lo que quiero es que me mande a la pagina de bienvenida.