Cargando



Crear sesiones en PHP

En este tutorial veremos de forma sencilla como crear, obtener valores y destruir variables de sesión.


oct 23 2015 22:42
Avanzado
oct 24 2015 13:36
Introducción
Como les mencionaba anteriormente veremos una forma muy sencilla de hacer un login para nuestra web creando variables de sesión, leyendo sus valores y posteriormente destruyendo la sesión al salir de la aplicación.
Las sesiones son algo fundamental en todo software pues estas otorgan un mayor nivel de seguridad en todos los procesos permitiendo que solo los usuarios autorizados puedan acceder a ellos, permitiéndole al desarrollador tener cierto nivel de tranquilidad y control pues gracias a ellas también puede determinar si el nivel de cierto usuario es indicado para acceder a determinado modulo o por el contrario debe ser rechazado, con esto tocamos un punto delicado de la seguridad web, pues si bien las sesiones nos ayudan a conocer los datos de los usuarios que ingresan al sistema se debe tener en cuenta que este método de seguridad no es infalible en realidad en cuanto a seguridad web se puede decir que nada de lo que hagamos podrá hacer que nuestro sistema sea impenetrable, sin embargo aporta un nivel estándar de seguridad necesario en cualquier aplicación.
Teniendo en cuenta esto debemos saber que hay diversos métodos para manejar sesiones, hay quienes establecen funciones de código para indicar el periodo de duración de las mismas, otros preferirán que la sesión de un usuario se cierre despues de realizar determinada acción dentro del sistema, y también habrá quien quiera que la sesión se cierre cuando el usuario seleccione la opción de salir del sistema.
En este tutorial trabajaremos con ese último caso…


Sesion PHP

Primero comenzaremos por crear una carpeta en la raíz de nuestro servidor local en este caso estoy usando Xampp, asi que me voy a la carpeta htdocs y dentro de ella creare una carpeta a la que llamare sesiones, dentro de ella creare 3 carpetas más a las que llamare css, js, y php para almacenar en ellas los archivos correspondientes a hojas de estilo, código javascrip y php respectivamente, es muy importante siempre organizar nuestros archivos de la mejor manera para encontrarlos de forma rápida cuando los necesitemos.


Imagen1.jpg



Imagen2.jpg


Paso 1


Comenzaremos a escribir el html correspondiente al formulario de login, para facilitarnos un poco el trabajo usaremos bootstrap para no perder mucho tiempo creando hojas de estilo personalizadas para esto lo que hare será descargarme el paquete de bootstrap a mi pc o bien podría usar su dirección CDN disponible en su web para cargar los estilos directamente desde los servidores de bootstrap, esta opción es factible si contamos con espacio limitado de almacenamiento en nuestro servidor de prueba, pero debemos tener en cuenta que nuestra página tardará más en cargar en este caso si contamos con una conexión a internet lenta. Por tanto voy a descargármelo y al extraerlo copiare el archivo “bootstrap.min.css” dentro de mi carpeta “css” la cual cree anteriormente.


Imagen3.jpg


Paso 2


Ahora si vamos a nuestro editor de código y escribiremos el HTML correspondiente a nuestro archivo index.html el cual almacenaré en la raíz de la carpeta “sesiones” ya anteriormente creada. A continuación el código del mismo…
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>Bootstrap Login Form</title>
		<meta name="generator" content="Bootply" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/styles.css" rel="stylesheet">
	</head>
	<body>
<!--login modal-->
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h1 class="text-center">Login</h1>
      </div>
      <div class="modal-body">
          <form class="form col-md-12 center-block" action="php/script_acceso_usuario.php" method="post" name="frm_ingreso" id="frm_ingreso">
            <div class="form-group">
              <input name="email" type="text" id="email" class="form-control input-lg" placeholder="Email">
            </div>
            <div class="form-group">
              <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary btn-lg btn-block">Sign In</button>
              <span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
            </div>
          </form>
      </div>
      <div class="modal-footer">
          <div class="col-md-12">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
		  </div>	
      </div>
  </div>
  </div>
</div>
	<!-- script references -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Paso 3


Ahora tendremos que crear una base de datos, para eso si estamos trabajando con un servidor local nos vamos a nuestro navegador y escribimos “localhost/phpmyadmin” y acedemos a nuestro manejador de base de datos con nuestro usuario y contraseña, en mi caso ya tengo creada una base de datos llamada login, y dentro de ella una tabla llamada usuarios en la cual se encuentra previamente cargada la información relacionada a cada usuario. A continuación les muestro una vista de la estructura de la misma.


Imagen4.jpg


Paso 4


Ahora que ya tenemos nuestro formulario de acceso y una base de datos con los usuarios existentes, tendremos que realizar una conexión con esa base de datos para posteriormente poder hacer las consultas que necesitaremos. Vamos a ello…

Comenzaremos por crear un archivo de configuración para nuestra conexión, aquí definiremos el servidor al cual conectaremos, el usuario, el password, la base de datos y la tabla. Este archivo lo guardare como “config.php” en la carpeta php creada anteriormente. A continuación el código del mismo…
<?php
/*
| -------------------------------------------------------------------
| CONFIGURACION DE CONEXION DE BASE DE DATOS
| -------------------------------------------------------------------
*/
	$Servidor="localhost";    
    $Usuario="root";
    $Password="admin"; 
    $BaseDeDatos="login";
    $sql_tabla="usuarios";
/*
| -------------------------------------------------------------------
| FIN DE CONFIGURACION DE CONEXION DE BASE DE DATOS
| -------------------------------------------------------------------
*/
?>

Como pueden ver en el archivo anterior hemos definido los parámetros de conexión, ahora crearemos un nuevo archivo llamado “conexión.php” en el cual incluiremos el anterior con la finalidad de recuperar dichos parámetros y establecer la conexión o devolver un mensaje de error en caso de que esto no sea posible. Les muestro el código a continuación…
<?php 
    include_once("config.php");
    $conexion= @mysql_connect($Servidor,$Usuario,$Password) or die("Error: El servidor no puede conectar con la base de datos");
    $selector=@mysql_select_db($BaseDeDatos,$conexion);
    @mysql_set_charset("utf8", $conexion);
?>

Paso 5


Ya que tenemos una conexión con nuestra base de datos vamos a crear un script php el cual llamaré “script_acceso_usuarios.php” y guardaré en la carpeta PHP. En este incluiré por medio de la función require() de php el archivo “conexión” creado en el paso anterior. Este archivo nos servirá para validar la información que el usuario proporcione en el formulario de acceso y determinar si los datos se encuentran en la base de datos o no.

En caso de que el usuario y el password sean válidos los redireccionaremos por medio de JavaScript a la página de su perfil, pero en caso contrario mostraremos una alerta y lo devolveremos al formulario de acceso. Como podrán notar la validación de los datos la haremos por medio de una consulta sql a la tabla usuarios. Al final verán que asigno 2 variables de sesión con el id del usuario, su nombre y apellido, podríamos crear más variables conforme a la información extraída de la base de datos, pero por el momento con estas dos variables nos será suficiente. A continuación el código…
<?php 

require("conexion.php");

//Inicio de variables de sesión
if (!isset($_SESSION)) {
  session_start();
}
//Recibir los datos ingresados en el formulario
$email= $_POST['email'];
$password= $_POST['password'];
//Consultar si los datos son están guardados en la base de datos
$consulta= "SELECT * FROM usuarios WHERE email='".$email."' AND password='".$password."'"; 
$resultado= mysql_query($consulta,$conexion) or die (mysql_error());
$fila=mysql_fetch_array($resultado);

if ($fila=="") //opcion1: Si el usuario NO existe o los datos son INCORRRECTOS
{
	echo '<script language = javascript>
	alert("Usuario o Password errados, por favor verifique.")
	self.location = "../index.html"
	</script>';
}
else //opcion2: Usuario logueado correctamente
{
	//Definimos las variables de sesión y redirigimos a la página de usuario
	$_SESSION['id_usuario'] = $fila['id_usuario'];
	$_SESSION['nombre'] = $fila['nombre']." ".$fila['apellido'] ;
	header("Location: pagina_usuario.php");
}
?>

Paso 6


Bien ya tenemos un formulario de login una conexión a base de datos y una validación de acceso con redirección, ahora crearemos una página simple donde podremos mostrar los datos de sesión que deseemos como por ejemplo el nombre del usuario conectado o si lo desean podríamos hacer una nueva consulta a partir de la información que ya tenemos y traernos su foto de perfil si la tuviéramos disponible en la base de datos, incluso su edad y demás datos que nos interesen.

En este caso por ser una simple demostración voy hacer algo muy sencillo valiéndome de bootstrap para mostrar solo el nombre y apellido del usuario y al lado un enlace para salir de la sesión.

Nótese que en este archivo también será necesario incluir el archivo de conexión mediante un require().
Además iniciaremos la sesión con la función “sesion_start()”, y verificaremos si hay una variable de sesión existente o si por el contrario se esta tratando de acceder directamente a la página, en este caso lo redireccionaremos a la página de login.
Posteriormente como les indique antes podremos realizar una nueva consulta en caso que necesitemos extraer datos solo para este módulo.

Y para finalizar mostraremos los datos del usuario logueado dándole la bienvenida, al lado de su nombre tendrá una enlace para salir de la sesión. Les muestro el código…
<?php
// conexión con la base de datos
require("conexion.php");
//Iniciar Sesión
session_start();

//Validar si se está ingresando con sesión correctamente
if (!$_SESSION){
echo '<script language = javascript>
alert("usuario no autenticado")
self.location = "../index.html"
</script>';
}


$consulta= "SELECT nombre, apellido FROM usuarios WHERE id_usuario='".$_SESSION['id_usuario']."'"; 
$resultado= mysql_query($consulta,$conexion) or die (mysql_error());
$fila=mysql_fetch_array($resultado);
$edad = $fila['edad'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 
  <div class="container">
    <h2>Bienvenido</h2>
    <div class="well well-lg">
      <div class="col-md-4 pull-right">
      <h4>Usuario: <?php echo $_SESSION['nombre']; ?> <a href="desconectar_usuario.php">Salir</a></h4>
      </div>
      <br>
    </div>
  </div> 

</body>
</html>

Paso 7



Al presionar el enlace “salir” llamaremos al script “desconectar_usuario.php” el cual estará almacenado en la carpeta php, este verificaremos si existen las variables de sesión que creamos el paso 5 y de ser asi destruiremos la sesión y redireccionaremos a la página index.html.
<?php 
session_start();

if ($_SESSION['nombre'] && $_SESSION['id_usuario'])
{	
	session_destroy();
	echo '<script language = javascript>
	alert("su sesion ha terminado correctamente")
	self.location = "../index.html"
	</script>';
}

?>

El resultado final es el siguiente...


Imagen5.gif


Les dejo los archivos en .zip, saludos, dudas o comentarios no duden en hacérmelos llegar...

Fichero Adjunto  sesiones20151023161413.zip   32,06K   425 Descargas

¿Te ayudó este Tutorial?


10 Comentarios


Pablo Meria
oct 24 2015 17:41

Gracias por dejar el adjunto también. Bien explicado.

Probado, gracias Ronny


Ronny Bonillo
oct 26 2015 17:08

De nada amigos amigos

;)

Gracias, again Ronny


dangobassline
oct 30 2015 08:52

Muchísimas gracias ehh! esto me servirá un montón para lo que tengo en mente.


Ronny Bonillo
oct 30 2015 16:57

De nada dangobassline acerca del error que me comentaste revisa nuevamente bien con detenimiento porque como vez aca el amigo Francesc lo probo y no tuvo problemas... tal vez sin darte cuenta borraste algo.


dangobassline
oct 31 2015 04:37

Ronny, ok mirando el tutorial, en el paso 5 dice “script_acceso_usuarios.php” y sale con una S de más, al momento de crear el fichero php le coloque el mismo nombre, pero es sin esa S, una pequeña y estupida corrección, solamente debe decir, “script_acceso_usuario.php”.

Hoy probé como me dijiste y funciono perfectamente! Mis agradecimientos, un muy buen tutorial.


Ronny Bonillo
nov 03 2015 18:21

disculpa por esa seguramente me equivoque al escribirlo acá, gracias por decirme lo corregiré, este tipo de errores pequeños son los que mas problemas nos dan...


Sergio Agosto Enriquez
abr 24 2016 06:07

genial

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X