En el presente documento desarrollamos un ejercicio trabajando el concepto de sesiones con PHP, aunque lo correcto es trabajar con datos almacenados en bases de datos,nos concentramos más bien en las sesiones propiamente.
Está desarrollado con los servicios incluidos en Wampserver (Apache, PHP y MySQL), ejecutándose sobre Windows 7.
Mientras no uses la opción para salir de tu cuenta (salir, cerrar sesión, log out, o algo así) el “navegador” sabrá quién eres tú y que cuenta estás usando, una vez que salgas de tu cuenta te “olvidará”.
Si tratas de ingresar a una página que del sitio que visitaste ya no sabrá quién eres tú, así que tendrás que volver a ingresar tus datos de usuario y contraseña.
En esencia y sin demasiado detalle lo que pasa es:
Ahora una lista y breve descripción de los archivos que usamos en este ejercicio, vale la pena aclarar que los archivos que empiezan con “inc_” no serán visitados directamente por los usuarios, estos serán incrustados en otros archivos:
Pasemos ahora a examinar en detalle las páginas que hemos listado, empezaremos por la hoja de estilos, luego las páginas que irán incrustadas (inician con “inc_”) y finalmente las páginas principales. Algunas páginas llevan bloques en PHP, para ubicarlos y explicarlos con facilidad los mostraré resaltados.
Pueden comparar, a la izquierda “index.php” sin iniciar sesión, a la derecha con la sesión iniciada, sin el formulario y un saludo al usuario.
Parte de la página “pública.php”, a la izquierda sin sesión iniciada, a la derecha ya iniciada con saludo personalizado.
Parte de la página, igualmente, con la sesión cerrada, a la derecha con la sesión iniciada.
Pero pensemos un momento ¿Realmente es necesario mostrar una página así? Piense en su cuenta de correo o la de Facebook ¿Que sucede cuando cierra su sesión? Pues que se le envía a alguna otra página de salida, frecuentemente a la página de inicio, así que para eso tenemos otra opción, solamente colocamos esto y borre todo lo demás:
Este documento podrá ser distribuido libremente siempre que se señale este origen (o el blog), no permito el uso comercial del mismo y que las obras derivadas de este sean distribuidos con estas mismas libertades.
This obra by Esono is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.
[Versión descargable en http://goo.gl/yUOOF0]
Está desarrollado con los servicios incluidos en Wampserver (Apache, PHP y MySQL), ejecutándose sobre Windows 7.
 |
| Inicio de sesión (fig.01) |
Descripción del ejercicio
El trabajo con sesiones es uno de los elementos vitales en el desarrollo de sitios Web, por ejemplo piensa en cuando ingresas a tu cuenta de correo o a la de Facebook, ingresas tus datos (nombre de usuario o correo y contraseña), una vez dentro podrás desplazarte por las diferentes secciones (páginas) del sitio, usar herramientas, etc.Mientras no uses la opción para salir de tu cuenta (salir, cerrar sesión, log out, o algo así) el “navegador” sabrá quién eres tú y que cuenta estás usando, una vez que salgas de tu cuenta te “olvidará”.
Si tratas de ingresar a una página que del sitio que visitaste ya no sabrá quién eres tú, así que tendrás que volver a ingresar tus datos de usuario y contraseña.
En esencia y sin demasiado detalle lo que pasa es:
- Ingresas al sitio Web, demuestras quién eres ingresando datos que solo tu debes conocer (nombre de usuario y contraseña).
- Una vez el sistema verifica que los datos son correctos se crea una sesión, que es un contenedor temporal de tus datos, allí se guardarán los datos necesarios para que el sistema recuerde quién eres y realices las tareas que el sitio te ofrece (escribir, cargar fotos, chatear, etc.).
- Cada vez que cambias de página dentro de ese sitio se envían los datos guardados en la sesión, así la nueva página sabe quién eres tú.
- Finalizas tus labores y sales de la sesión, esta se destruye y se pierden los datos, el sistema te “olvida” y si tratas de ingresar no te lo permitirá, necesitarás recordarle quién eres ingresando tus datos de acceso y así se creará una nueva sesión.
Archivos
 |
| fig.02 |
- index.php: La página principal, al cargar esta página se muestra el formulario para ingresar tus datos e iniciar la sesión, pero, si el usuario ya inició la sesión ya no le mostramos el formulario (no necesita autenticarse pues ya está autenticado). Otra observación es que el formulario está en otro archivo, lo incrustaremos con “include()”.
- publico.php: Tiene contenido accesible para todo público (no es necesario autenticarse para leer su contenido), pero, si ingresa aquí un usuario que ya inició su sesión le mostramos un saludo personalizado.
- privado.php: Esta página contiene información que será visible solamente para usuarios autenticados (en consecuencia ya iniciaron sesión), en caso contrario le indicaremos al visitante que debe ingresar a su cuenta para ver este contenido.
- salir.php: Usaremos esta página solamente para cerrar la sesión.
- inc_video.php: Nada extraordinario acá, código para mostrar un video, será incrustado en “privado.php” si el usuario ha iniciado la sesión.
- inc_form.php: Este es el formulario que incrustaremos en “index.php” si el visitante no ha iniciado la sesión.
- inc_nav.php: La barra de navegación, estos enlaces los incrustaremos en todas las páginas.
- inc_restringido.php: El mensaje que mostraremos en la página “privado.php” si es visitada por un navegante que no ha iniciado sesión.
- inc_saludo.php: El saludo personalizado que mostraremos en “privado.php” al usuario que ha iniciado sesión.
- estilos.css: La hoja de estilos, el diseño de nuestro sitio.
- img_privado.jpg: Es la imagen que mostraré en “privado.php” a los usuarios que iniciaron sesión.
fig.03 - img_sesion.jpg: Esta imagen la usaremos como favicon, esa imagen personalizada en miniatura en la pestaña del navegador.
fig.04
Pasemos ahora a examinar en detalle las páginas que hemos listado, empezaremos por la hoja de estilos, luego las páginas que irán incrustadas (inician con “inc_”) y finalmente las páginas principales. Algunas páginas llevan bloques en PHP, para ubicarlos y explicarlos con facilidad los mostraré resaltados.
estilos.css
Las hojas de estilos se encargan de aplicar el diseño a las hojas de datos (html, php, aspx, jsp, etc.), en realidad ni siquiera es necesaria para este ejercicio, pero definitivamente le da un mejor aspecto:@charset "utf-8";
/*Hoja de estilos de @eliotramos */
/*Describo brevemente y en orden lo que hace cada bloque*/
/*Elimina el subrayado de los hipervínculos*/
a{
text-decoration:none;
}
/*Centrar el contenido, color de fondo, ancho máximo de la página, márgenes */
body{
text-align:center;
background-color:#FFCC00;
max-width:900px;
margin:5px auto;
}
/* Color de fondo en los formularios, borde con esquina redondeada, ancho máximo, márgenes externos y márgenes internos*/
form{
background-color:#FFFFFF;
border-radius:5px;
max-width:250px;
margin:5px auto;
padding:20px;
}
/*Color de fondo en el pie de página, tipo de fuente, tamaño de fuente, márgenes externos y márgenes internos*/
footer{
background-color:#CCC;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
margin:100px 0 0 0;
padding:5px;
}
/*Color de fuente a los encabezados de tamaño 2, alineado a la izquierda */
h2{
color:#F00;
text-align:left;
}
/*Color de fondo en la barra de navegación*/
nav{
background-color:#000000;
}
/*Color de fondo a los elementos de la lista en la barra de navegación (son enlaces cada uno), margen interno y externo, mostrar en línea (para no mostrar uno debajo de otro) */
nav ul li{
background-color:#FF9;
padding:3px;
margin:3px;
display:inline-block;
}
/*Alinear los elementos de lista a la izquierda (no aplica a las listas dentro de nav que ya tiene su propio estilo)*/
li{
text-align:left;
}
/*Color de fondo al elemento section y margen interno*/
section{
background-color:#EEE;
padding:5px;
}
inc_nav.php
Tenemos acá el contenido de la barra de navegación para todas las páginas, son tres enlaces para ir respectivamente a la página de inicio, a la de contenido privado y la de contenido público:<nav>
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="privado.php">Contenido privado</a></li>
<li><a href="publico.php">Contenido público</a></li>
</ul>
</nav>
inc_form.php
Este es el formulario que se incrustaremos en la página principal (index.php) en el caso de que el visitante no haya iniciado su sesión, le solicitamos su nombre de usuario y su clave:<h3>Ingresar al sistema</h3>Se enviarán dos datos: el nombre de usuario en la variable de formulario “usuario” y la clave en la variable “pass”.
<form name="f1" action="privado.php" method="post">
Usuario<input type="text" name="usuario" placeholder="Nombre de usuario" required autofocus /><br />
Clave<input type="password" name="pass" placeholder="Contraseña" required /><br />
<input type="submit" value="Ingresar a mi cuenta" />
</form>
inc_saludo.php
En este archivo tenemos el saludo personalizado que mostramos al usuario en “privado.php” si es que ya ha iniciado su sesión. Se incluye un enlace para cerrar la sesión ya que este saludo se cargará solamente si ya se inició una sesión:<?php
echo "<article>";
echo "<h3>La sesión está iniciada</h3>";
echo "<p align='left'>Hola ".$_SESSION['usuario']." - <a href='salir.php'>Cerrrar la sesión</a></p>";
echo "<hr /><p>Aquí podría ir info personalizada para el usuario en su sesión.</p>";
echo "</article>";
?>
inc_restringido.php
Y este contenido también será incrustado en “privado.php”, pero solamente será mostrado a los visitantes que traten de ver el contenido privado y que no hayan iniciado sesión:<?php
echo "<h2>Importante: No puede ver este contenido</h2>";
echo "<p align='left'>Usted está tratando de ingresar a ver contenido privado.<br />";
echo "<a href='index.php'>Volver a la página de inicio</a></p>";
?>
inc_video.php
Este video es sencillamente de una publicación de una página de Facebook, tiene la particularidad de estar en una subcarpeta, lo usaré para contestar a una pregunta que aparece con cierta frecuencia respecto a cómo incrustarla:<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/photo.php?v=647091798663964" data-width="550"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?v=647091798663964">una publicación</a> por <a href="https://www.facebook.com/pages/Por-favor-no-quiero-programas-piratas/639595306080280">Por favor no quiero programas piratas</a>.</div></div>
Sobre las sesiones
Algunas cosas que debemos saber sobre las sesiones en este ejercicio:- Para iniciar sesión use el nombre que prefiera, la clave de acceso es “adminadmin” sin las comillas.
- Todas lás páginas que trabajan con las sesiones deben llevar en la PRIMERA línea el script PHP con el inicio de sesión:
session_start(); - A la sesión iniciada le podemos asignar valores que serán guardadas temporalmente hasta que finalice la sesión, por ejemplo, podemos agregar nombre y e-mail:
$_SESSION["nombre"] = “Juan Lara"];
$_SESSION["email"] = “jlara@micuenta.com"]; - Una sesión de finaliza con la instrucción: session_destroy();
index.php
Nuestra página principal, inicia con “session_start()”, en la línea 8 tenemos una etiqueta “link” para agregar nuestro favicon que se mostrará en la pestaña del navegador.<?php session_start() ?>
<!DOCTYPE html>
<html>
<head>
<title>Inicio - Trabajando con sesiones</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="archivos/estilos.css" />
<link rel="shortcut icon" href="archivos/img_sesion.jpg" type="image/jpg" />
</head>
<body>
<header>
<h1>Página de Inicio</h1>
<nav><?php include('inc_nav.php'); ?></nav>
</header>
<section>
<?php
if(isset($_SESSION["usuario"])){
include('inc_saludo.php');
echo "<p>No se muestra el formulario.</p>";
}else{
include('inc_form.php');
}
?>
</section>
<footer>
Propiedad intelectual, todos los derechos reservados ©Ica 2013.<br />
<a href=”http://eliotnet.blogspot.com”>Ver blog</a>
</footer>
</body>
</html>
publico.php
El contenido de este archivo es visible a todo el público, sea que hayan iniciado sesión o no, pero, para los que han iniciado sesión les mostramos el saludo personalizado y el enlace para cerrar la sesión. Para recordar qué usuario está navegando igualmente implementamos session_start():<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Público - Trabajando con sesiones</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="archivos/estilos.css" />
<link rel="shortcut icon" href="archivos/img_sesion.jpg" type="image/jpg" />
</head>
<body>
<header>
<h1>Página Pública</h1>
<nav><?php include('inc_nav.php'); ?></nav>
</header>
<section>
<?php
if(isset($_SESSION["usuario"])){
include('inc_saludo.php');
}
?>
<article>
<p>Este es contenido disponible para todos, podrá ser visto por cualquier persona, sea que haya iniciado o no la sesión, pero, hay 2 diferencias:</p>
<ol>
<li>Un saludo personalizado al usuario.</li>
<li>El enlace para cerrar la sesión a quienes la hayan iniciado.</li>
</ol>
</article>
<article>
<p>Este es contenido disponible para todos, podrá ser visto por cualqier persona, sea que haya iniciado o no la sesión, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesión a quienes la hayan iniciado.</p>
</article>
<article>
<p>Este es contenido disponible para todos, podrá ser visto por cualqier persona, sea que haya iniciado o no la sesión, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesión a quienes la hayan iniciado.</p>
</article>
<article>
<p>Este es contenido disponible para todos, podrá ser visto por cualqier persona, sea que haya iniciado o no la sesión, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesión a quienes la hayan iniciado.</p>
</article>
</section>
<footer>
Propiedad intelectual, todos los derechos reservados ©Ica 2013.<br />
<a href=”http://eliotnet.blogspot.com”>Ver blog</a>
</footer>
</body>
</html>
privado.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Privado - Trabajando con sesiones</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="archivos/estilos.css" />
<link rel="shortcut icon" href="archivos/img_sesion.jpg" type="image/jpg" />
</head>
<body>
<header>
<h1>Página Privada</h1>
<nav><?php include('inc_nav.php'); ?></nav>
</header>
<section>
<?php
$pass = "";
if(isset($_POST["pass"])){
$pass = $_POST["pass"];
}
if(isset($_POST["usuario"]) & $pass=="adminadmin"){
$_SESSION["usuario"] = $_POST["usuario"];
include('inc_saludo.php');
echo "<img <img src='archivos/img_privado.jpg' title='Sorprendido' />";
include('archivos/inc_video.php');
}else{
if(isset($_SESSION["usuario"])){
include('inc_saludo.php');
echo "<img src='archivos/img_privado.jpg' title='Sorprendido' />";
include('archivos/inc_video.php');
}else{
include('inc_restringido.php');
}
}
?> </section>
<footer>
Propiedad intelectual, todos los derechos reservados ©Ica 2013.<br />
<a href=”http://eliotnet.blogspot.com”>Ver blog</a>
</footer>
</body>
</html>
salir.php
Aquí destruimos la sesión, desde ahora el sistema no sabe quiénes somos así que ya no habrán saludos personalizados ni podemos acceder al contenido privado, para hacerlo tendremos que iniciar una nueva sesión desde el formulario en la página principal (index.php):<?phpDebes ver algo así:
session_start();
session_destroy();
?>
<!DOCTYPE html>
<html>
<head>
<title>Sesión cerrada - Trabajando con sesiones</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="archivos/estilos.css" />
<link rel="shortcut icon" href="archivos/img_sesion.jpg" type="image/jpg" />
</head>
<body>
<header>
<h1>La sesión ha sido finalizada</h1>
<nav><?php include('inc_nav.php'); ?></nav>
<p>Gracias por su visita</p>
</header>
<section>
<h3>La sesión está cerrada.</h3>
<p align="left"><a href="index.php">Ir a la página principal</a></p>
</section>
<footer>
Propiedad intelectual, todos los derechos reservados ©Ica 2013.<br />
<a href=”http://eliotnet.blogspot.com”>Ver blog</a>
</footer>
</body>
</html>
 |
| Sesión finalizada (fig.11) |
Pero pensemos un momento ¿Realmente es necesario mostrar una página así? Piense en su cuenta de correo o la de Facebook ¿Que sucede cuando cierra su sesión? Pues que se le envía a alguna otra página de salida, frecuentemente a la página de inicio, así que para eso tenemos otra opción, solamente colocamos esto y borre todo lo demás:
<?phpLuego de destruir la sesión agregamos una instrucción de redirección, en este caso a la página “index.php”, lo que resulta más práctico ¿No les parece? Así el visitante nunca verá la página “salir.php” que practicamente está en blanco.
session_start();
session_destroy();
header('Location: index.php');
?>
Finalizando
En realidad existe más información en Internet al respecto, este ejercicio lo desarrollé para una práctica con los muchachos en uno de los institutos en que laboro, de seguro habrán algunas dudas, si las publica en mi blog (vea el encabezado de este documento) trataré de responderlas lo antes posible.Este documento podrá ser distribuido libremente siempre que se señale este origen (o el blog), no permito el uso comercial del mismo y que las obras derivadas de este sean distribuidos con estas mismas libertades.
This obra by Esono is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.
[Versión descargable en http://goo.gl/yUOOF0]
No hay comentarios.:
Publicar un comentario
Tu comentario