1

Estoy realizando un proyecto de login y gestión de usuarios en el cual estoy aprendiendo jQuery y Ajax.

Tengo la funcionalidad básica, es decir, un usuario hace login y sale un mensaje de usuario y/o contraseña incorrecta si no es válido.

Lo que quiero conseguir (estoy buscando modos de hacerlo), es poder redireccionar a la página de usuario una vez el logueo es correcto. (No sé si tengo que hacerlo desde php, o bien podría usar jQuery).

Este es mi index.php:

<?php
  require_once 'php/logOut.php';
  session_start();
  if(isset($_SESSION['userSession'])){
    if(!empty($_SESSION['userSession'])){
      header("Location: models/userPanel.php");
    }
  }
  if (isset($_GET['logOut'])) {
    logOut();
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- CSS imports -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css" />
    <!-- JQuery include -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- <script type="text/javascript" src="js/loginForm.js"></script> -->
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
    <!-- Navigation Bar content -->
    <nav class="navBar">
      <ul>
        <li><a class="hover" href="index.php">Index</a></li>
      </ul>
    </nav>
    <!-- Body content -->
    <div class="bodyContainer">
      <!-- Form -->
      <div class="formContainer">
        <p class="formTitle">Login form</p>
        <form id="loginForm" method="post">
          <div class="formDataContainer">
            <div id="error"><!-- Error will be shown here ! --></div>
            <label for="userMail"><span class="labelText">Email</span></label>
            <input type="email" placeholder="Enter Username" name="userMail" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <label for="psw"><span class="labelText">Password</span></label>
            <input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <button type="submit" id="btnLogin" name="btnLogin">Sing in</button>
          </div>
        </form>
      </div>
    </div>
    <script>
        $('#error').fadeOut();
        $('form[id=\'loginForm\']').on('submit', function(e){
            e.preventDefault();
            $("#error").fadeOut();
            var data = $(this).serialize();
            $.ajax({
                type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
                    $('#error').fadeOut();
                    $('#btnLogin').html('Sending ...');
                }, success: function(response){
                    if (response == 'ok'){
                        $('#btnLogin').html('Signing In ...');
                        setTimeout(' window.location.href = "models/userPanel.php"; ', 4000);
                    }else{
                        $('#error').fadeIn(1000, function(){
                        $('#error').html(response);
                        $('#btnLogin').html('Sign In');
                      });
                    }
                },
            });
            return false;
        });
        /* login submit */
    </script>
  </body>
</html>

Y este, mi controlador de PHP:

<?php
  session_start();
  require_once 'dbConfig.php';
  $query = "SELECT idUser, name, surname, mail, level, password
            FROM users
            WHERE mail = ? AND password = ?";
  // TODO recoger datos
  if(isset($_POST["userMail"]) && isset($_POST["psw"])){
    if(!empty($_POST["userMail"]) && !empty($_POST["psw"])){
      // TODO comprobamos la base de datos
      // Clean obtained data
      $userMail = $mysqli->real_escape_string(trim($_POST["userMail"]));
      $passwd = $mysqli->real_escape_string(trim($_POST["psw"]));
      // Crypt the Password
      $password = md5($passwd);
      // Attempt to prepare the query
      if($stmt = $mysqli->prepare($query)){
        if($stmt->bind_param("ss", $userMail, $password)){
          $stmt->execute();
          // Obtain the result
          $result = $stmt->get_result();
          // If there is no result, we will show an error message
          if($result->num_rows === 0){
            echo "Invalid username or password";
          }else{
            // If we have data, we will check again the obtained data
            $row = $result->fetch_array();
            if($row["mail"] === $userMail && $row["password"] === $password){
              // If correct, we will log in the user
              $_SESSION['userSession']['mail'] = $row['mail'];
              $_SESSION['userSession']['name'] = $row['name'];
              $_SESSION['userSession']['surname'] = $row['surname'];
              // TODO redirect
            }
          }
          $mysqli->close();
        }else{
          // TODO handle error

        }
      }
    }
  }
?>

Tal y como se puede ver, tengo un TODO para la redirección en el archivo de control de PHP pero no sé cómo podría hacerlo. He intentado soluciones vía jQuery y no funcionan.

Muchas gracias de antemano.

Edit

Tras ver la respuesta, he intentado hacer el código como me comentan pero ahora la redirección no se efectúa correctamente.

$('#error').fadeOut();
        $('form[id=\'loginForm\']').on('submit', function(e){
            e.preventDefault();
            $("#error").fadeOut();
            var data = $(this).serialize();
            $.ajax({
                type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
                    $('#error').fadeOut();
                    $('#btnLogin').html('Sending ...');
                }, success: function(response){
                    if (response == 'ok'){
                        $('#btnLogin').html('Signing In ...');
                        window.location("models/userPanel.php");
                        setTimeout(' window.location.href = "models/userPanel.php"; ', 4000);
                    }else{
                        $('#error').fadeIn(1000, function(){
                        $('#error').html(response);
                        $('#btnLogin').html('Sign In');
                      });
                    }
                },
            });
            return false;
        });
3
  • La página de usuario sería, por ejemplo, paginaweb.com/usuario ? O paginaweb.com/portal.php?user=usuario. Algo así, no? Con PHP puedes usar el header('Location: example.com/');
    – msabate
    Commented el 10 abr. 2018 a las 7:45
  • Sería paginaweb.com/models/userPanel.php Commented el 10 abr. 2018 a las 8:16
  • En donde esta tu dataType en el ajax? Y en el if(response == 'ok') de donde viene ese 'ok', no lo veo en el php Commented el 10 abr. 2018 a las 11:26

1 respuesta 1

2

En la línea dónde está el TODO, tienes que agregar una como la que sigue:

// TODO redirect
header("Location: paginaweb.com/models/userPanel.php");
exit();

Editada: Esto no va a funcionar porque el header location se realiza bajo la petición ajax y no sobre la página del usuario. Para poder redirigir tras la llamada ajax, se debe hacer un window.location en la parte success o done del ajax:

$('#btnLogin').html('Signing In ...');
window.location("paginaweb.com/models/userPanel.php");
9
  • Buenas. He intentado hacer esa solución con anterioridad pero desde el login el botón se queda en modo Sending... Commented el 10 abr. 2018 a las 10:05
  • Cierto, edito la respuesta para indicar que se debe hacer en la parte javascript justo al completar el ajax.
    – track3r
    Commented el 10 abr. 2018 a las 10:09
  • En este caso, he usado el código que me has indicado, pero no hace nada. Mira en mi edit para ver lo que he hecho. Gracias por tu tiempo. Commented el 10 abr. 2018 a las 10:33
  • ¿Te sale algún error? mira en la consola del inspector de elementos de la web, deberías ver un error.
    – track3r
    Commented el 10 abr. 2018 a las 10:37
  • No sale ningún error. Lo que es muy raro. Hace lo mismo que sin poner la línea de código que me has indicado. Commented el 10 abr. 2018 a las 10:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.