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:
- XAMPP Control Panel.
- MySQL Workbench o phpMyAdmin.
- Visual Studio Code
- PHP (PDO) y MySQL (Relational Database)
Lo que veremos en este tutorial:
- Modificar HTML login.php
- Implementar login.php
- Crear página dashboard.php
- 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.
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.
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 ✌...!!!
0 Comentarios