Ticker

6/recent/ticker-posts

PHP y MySQL - Login

Hadsonpar octubre 17, 2021

Continuando con la serie de tutoriales prácticos acerca del desarrollo haciendo uso de PHP en base a PDO y con base de datos MySQL, en este tutorial desarrollaremos el inicio de sesión o mas conocido con Login (en ingles). 

Requisitos:

  1. XAMPP Control Panel.
  2. MySQL Workbench o phpMyAdmin.
  3. Visual Studio Code
  4. PHP (PDO) y MySQL (Relational Database)

Lo que veremos en este tutorial:

  1. Modificar HTML login.php
  2. Implementar login.php
  3. Crear página dashboard.php
  4. Conclusiones

1. Modificar HTML login.php

Modificamos la sección del from agregado al action="<?php echo $_SERVER['PHP_SELF']; ?>" para enviar datos de tipo post en la misma página, y de agregan a los values a los input como el email value="<?php echo ($valEmail??'')?>" y el password  value="<?php echo ($valPassword??'')?>". Asimismo agregamos las sección de alertMessage (propiedad html - div) y pasamos las variables $alertMessage y $alertMessage2 para capturar la validaciones realizadas desde el servidor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" role="form" 
                  class="php-email-form" data-aos="fade-up">
              <div class="form-group">                
                <input placeholder="Email" type="email" class="form-control" name="email" 
                      id="email" value="<?php echo ($valEmail??'')?>" />                
                  <?php
                    echo '<div class="alertMessage">'.($alertMessage1??'').'</div>';
                  ?>                
              </div>
              <div class="form-group">              
                <input placeholder="Contraseña" type="password" class="form-control" name="password" 
                      id="password" value="<?php echo ($valPassword??'')?>" />                
                  <?php
                    echo '<div class="alertMessage">'.($alertMessage2??'').'</div>';
                  ?>
              </div>
              <div class="mb-3">
                <div class="legal">
                  <a href="#">¿Has olvidado tu contraseña?</a>
                </div>                  
              </div>
              <button class="login-btn" type="submit" name="submit">Iniciar sesión</button>
              <p>¿Eres nuevo en New Talents? <a href="signup/sign-up">Regístrese ahora</a></p>
            </form>

Ahora se agrega la sección de capturar de errores, para esto se agrega la condición para validar la variable $errors y recorrer para poder mostrarlo en pantalla en base a un <div class="alert alert-danger">.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
            <?php 
              /* Sección de alertas (captura de mensajes y errores) */
              if(isset($errors) && count($errors) > 0)
              {
                foreach($errors as $error_msg)
                {
                  echo '<div class="alert alert-danger">'.$error_msg.'</div>';
                }
              }
            ?>

2. Implementar login.php.

Seguidamente implementaremos el código php para la funcionalidad de nuestro página login.php, en primer instancia iniciamos la sesión session_start(); y requerimos la página dbconfig.php' [require_once('config/dbconfig.php');] para poder capturar los valores de conexión a la base de datos.

La función isset() nos permite evaluar si una variable está definida o no, y la función empty() permite evaluar si una variable está vacía.

Asimismo, te sugiero para poder comprender la secuencia del código revisar los comentarios realizados en mismo código php que están con el identificador de /* @X (X = numeración de comentario del 1 al 9): 

La constante FILTER_VALIDATE_EMAIL Compruebe si la variable $vEmail es una dirección de correo electrónico válida.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?php
  session_start();
  require_once('config/dbconfig.php');

  /* @1 Validar el button bubmit si se encuentra definido */
  if(isset($_POST['submit']))
  {
    /*@2 Validación de los INPUTs email y password
       isset: Valida si la variable esta definida.
       empty: Valida si la variable esta vacia*/
    if (isset($_POST['email'], $_POST['password']) && !empty($_POST['email']) && !empty($_POST['password'])) 
    {
      /*@3 Capturar los valores de los INPUTs email y password*/
      $vEmail       = trim($_POST['email']);
      $vPassword    = trim($_POST['password']);

      /*@4 FILTER_VALIDATE_EMAIL comprueba si la variable $vEmail es una dirección de email válida*/
      if(filter_var($vEmail, FILTER_VALIDATE_EMAIL))       
      {
        /*@5 Script SQL para realizar la validación acerca de la existencia de 
             registros de email que se pretende registrar*/
        $sql      = "select * from users where email = :pemail";
        $script   = $pdo->prepare($sql);
        $sqlEmail = ['pemail'=>$vEmail];
        $script->execute($sqlEmail);/* Ejecutar (DML) SELECT en base al filtro del e-mail ingresado */

        /*@5.1 Si el resultado del script ejecutado  es mayor 0 (es decir si el email existe en nuestra base de datos)
               continuamos con la validaciòn del password, sí todo es satisfactorio nos direccionamos a la página
               dashboard.php y finalmente salimos de dicha validación*/
        if($script->rowCount() > 0)
        {
          $getRow = $script->fetch(PDO::FETCH_ASSOC);
          if(password_verify($vPassword, $getRow['password'])){
             unset($getRow['password']);
             $_SESSION = $getRow;
             header('location:feed/dashboard.php');/* direccionamos a la página dashboard.php */
             exit();
          }else{
            $errors[] = "Correo electrónico o contraseña incorrecta"; /*@6 Capturamos ALERTA sobre la contraseña*/
          }
        }else{
          $errors[] = "Correo electrónico o contraseña incorrecta";/*@7 Capturamos ALERTA sobre la contraseña*/
        }
      }else{
        /*@8 Capturar ALERTA DE VERIFICACION, ei el valor ingresado en el INPUT email no cumple con la verificación
             de tipo email se monstrará dicha alerta*/
        $valEmail    = '';
        $valPassword = $vPassword;
        $errors[] = 'Por favor ingresa un correo electrónico válido';
      }

    }else{
      /* @9 Caso contrario los INPUTs no esta definidas o vacias me mostrar las siguientes alertas */
      if(!isset($_POST['email']) || empty($_POST['email'])) /* Si no esta denifida y vacia */
      {
          $alertMessage1 = 'Por favor ingresa un correo electrónico';/* ALERTA EN PANTALLA */
      }
      else
      {
          $valEmail = $_POST['email'];
      }
      if(!isset($_POST['password']) || empty($_POST['password'])) /* Si no esta denifida y vacia */
      {
          $alertMessage2 = 'Por favor ingresa una contraseña';/* ALERTA EN PANTALLA */
      }
      else
      {          
          $valPassword = $_POST['password'];          
      }
    }
  }
?>


3. Crear página dashboard.php

La implementación de la página dashboard.php por ahora solo capturaremos el nombre de usuario y correo electrónico del usuario logeado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?php
    /* Capturamos la sessión */
    session_start();
    /* Validamos la sessión */
    if(!$_SESSION['iduser']){
        header('location:../login.php');
    }
?>
<h1>Bienvenido...!</h1>
<?php 
    /* Capturamos el nombre del usario y correo */
    echo strtoupper($_SESSION['user'])."<br>";
    echo ucfirst($_SESSION['email']);
?>

4. Conclusiones.

En este tutorial práctico elaboramos nuestro inicio de sesión haciendo uso de PHP en base a PDO para la conexión a la base de datos MySQL y se hace uso las funciones PHP con el isset, empty, strtoupper, ucfirst y la constante FILTER_VALIDATE_EMAIL en base al método $_POST.

Disponible en GitHub

Directorio 02-Login

Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!

Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios