Vamos a crear una forma para inicar y cerrar sesion, partiendo de la leccion anterior sobre registro de usuarios.
Curso: Sistema de To-Do List SaaS con PHP y MySQL (HeyTodo)
Fase 1: Introducción y Fundamentos
Lección 0: Introducción al sistema SaaS con PHP y MySQL
Lección 1: Explicación del Proyecto y Alcance
Lección 2: Modelo de la Base de Datos
Fase 2: Usuarios y Autenticación
Lección 3: Registro de Usuarios
Lección 4: Iniciar y Cerrar Sesión con PHP y MySQL
Fase 3: Desarrollo de Funciones Core
Lección 5: Módulo de Proyectos
Lección 6: Crear, Listar y Eliminar Tareas
Lección 7: Modificar Datos de las Tareas
Fase 4: Lógica Avanzada y Vistas
Lección 8: Marcar Tareas como Finalizadas
Lección 9: Página de Tareas Pendientes, Finalizadas y por Proyecto
Lección 10: Manipular Tareas en el Módulo de Proyectos
Volver a la página principal del curso
Introduccion
En la lección anterior vimos el registro de usuarios.
Comencemos.
Formulario de login
Lo primero que debemos de tener en cuenta es el formulario de login, este es un formulario con unicamente 2 campos y un boton.
Un campo para el email, un campo para el Password y un boton para accionar el inicio de sesion.
Este codigo se debe colocar en el archivo: heytodo/core/app/view/index-view.php
[code language=”html”]<form method=”post” action=”./?action=users&opt=login”>
<div class=”form-group”>
<label for=”theemail”>Email</label>
<input type=”text” class=”form-control” id=”theemail” placeholder=”Email” name=”email” required>
</div>
<div class=”form-group”>
<label for=”thepassword”>Password</label>
<input type=”password” class=”form-control” id=”thepassword” placeholder=”Password” name=”password” required>
</div>
<button type=”submit” class=”btn btn-default”>Iniciar Sesion</button>
</form>
[/code]
Algoritmo de login
Vamos a crear un algoritmo de login sencillo.
Vamos a tomar los parametros de email y password y haremos una consulta para ver si existe una fila donde el email y el password coincidan, de ser asi, tomaremos el id del usuario y lo colocaremos en una variable de sesion.
Ubicación: heytodo/core/app/action/users-action.php
Este codigo seria un else if, continuando el if anterior que corresponde al registro de usuarios.
[code language=”php”]else if(isset($_GET[“opt”]) && $_GET[“opt”]==”login”){
$db =new Database();
$con = $db->connect();
$email = htmlspecialchars($_POST[“email”]);
$password = sha1(md5(htmlspecialchars($_POST[“password”])));
$sql = “select * from user where email=\”$email\” and password=\”$password\””;
$query = $con->query($sql);
if($query!=null){
$user = $query->fetch_object();
if($user!=null){
$_SESSION[“user_id”]=$user->id;
}
}
if(isset($_SESSION[“user_id”])){
Core::redir(“./?view=home”);
}else{
Core::alert(“Datos incorrectos!”);
Core::redir(“./”);
}
}
Si el usuario y el password existen entonces guardamos la variable de sesion y continuacion a la view=home, en el archivo heytodo/core/app/view/home-view.php que crearemos a continuacion.
Vista Home
Por ahora, en esta vista vamos a tomar el id del usuario que esta en la variable de sesion y vamos a consultar el usuario el la base de datos para mostrar su nombre en la vista.
Ubicacion: heytodo/core/app/view/home-view.php
[code language=”php”]<?php if(isset($_SESSION[“user_id”])): $user = UserData::getById($_SESSION[“user_id”]); ?>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<h1>Hola, <?php echo $user->name.” “.$user->lastname; ?></h1>
<a href=”./?action=users&opt=logout” class=”btn btn-danger”>Cerrar sesion</a>
</div>
</div>
</div>
<?php endif; ?>
[/code]En la vista home lo que hacemos es obtener el id del usuario de la variable de sesion $_SESSION[“user_id”] y consultar el id del usuario en la tabla de usuarios para obtener el nombre y el apellido del usuario.
Cerrar sesion
La opcion de cerrar sesion lo que hara sera destruir los datos de las variables de sesion y despues la sesion misma.
Ubicación: heytodo/core/app/action/users-action.php
[code language=”php”] else if(isset($_GET[“opt”]) && $_GET[“opt”]==”logout”){unset($_SESSION[“user_id”]);
session_destroy();
Core::redir(“./”);
}
[/code]
Después de cerrar sesión redirigimos al inicio.
Capturas de Pantalla
Vista de la pagina inicial con la opción de iniciar sesión y registrar usuarios.
Vista Home mostrando el nombre del usuario.
Descargar
A continuacion el link de descarga:
Link: http://twineer.com/11227357/heytodo-lec2
Despues de dar click, esperas 5 segundos y despues en la opcion “saltar publicidad” en la esquina superior derecha.
Conclusion
Espero esta leccion les ayude a crear el login, tambien les puede servir para crear sus propios sistemas.
Nos leemos en la proxima leccion.
No olviden compartir.