HeyTodo #4 – Iniciar y Cerrar Sesion con PHP y MySQL


Vamos a crear una forma para inicar y cerrar sesion, partiendo de la leccion anterior sobre registro de usuarios.

Introduccion

En la lección anterior vimos el registro de usuarios.

Les invito a visitar la pagina oficial del curso HeyTodo para mas informacion.

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("./");
}
}

[/code]

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.

Leave a comment