Trabajando con sesiones en PHP

Enlace corto: http:// goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com

TRABAJANDO CON SESIONESEn 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.

Índice de ContenidoTRABAJANDO CON SESIONES

Índice de ContenidoDescripción del ejercicioArchivos

estilos . cssinc _ nav . phpinc _ form . phpinc _ saludo . phpinc _ restringido . phpinc _ video . php

Sobre las sesionesindex . phppublico . phpprivado . phpsalir . php

FinalizandoTabla de Contenido

Descripción del ejercicioEl 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:

1. Ingresas al sitio Web, demuestras quién eres ingresando datos que solo tu debes conocer (nombre de usuario y contraseña).

2. Una vez el sistema verifica que los datos son correctos se crea una sesión, que es un contenedor temporarl 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.).

3. 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ú.

1

http://goo.gl/yUOOF0

http://www.wampserver.com/

http://eliotnet.blogspot.com/



4. 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.

Esa es en esencia la forma en que trabajan las sesiones, a nivel técnico es algo más elaborado, pero no es mi intención explicar eso en este documento.El ejercicio está pensado para personas con conocimientos básicos en HTML, CSS y PHP, en todo caso, trato de añadir explicaciones para los menos experimentados sin tratar de complicar las cosas.

Archivos

Ahora una lista y breve descripción de los archivos que usamosen este ejercicio, vale la pena aclarar que los archivos queempiezan con “inc_” no serán visitados directamente por losusuarios, estos serán incrustados en otros archivos:

1. index.php: La página principal, al cargar esta página semuestra el formulario para ingresar tus datos e iniciar lasesión, pero, si el usuario ya inició la sesión ya no lemostramos el formulario (no necesita autenticase1, puesya está autenticado). Otra observación es que elformulario está en otro archivo, lo incrustaremos con“include()”.

2. 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.

3. 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.

4. salir.php: Usaremos esta página solamente para cerrar la sesión.5. 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.6. inc_form.php: Este es el formulario que incrustaremos en “index.php” si el visitante

no ha iniciado la sesión.7. inc_nav.php: La barra de navegación, estos enlaces los incrustaremos en todas las

páginas.8. 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.9. inc_saludo.php: El saludo personalizado que mostraremos en “privado.php” al

usuario que ha iniciado sesión.10. estilos.css: La hoja de estilos, el diseño de nuestro sitio.11. img_privado.jpg: Es la imagen que mostraré en “privado.php” a los usuarios que

iniciaron sesión.

1 Autenticar es la acción de demostrar quién eres, eso se logra ingresando datos que solamente tú conoces, tales como nombre de usuario y contraseña.

2





12. img_sesion.jpg: Esta imagen la usaremos como favicon, esa imagen personalizada en miniatura en la pestaña del navegador.

Como habrán notado, algunos elementos u otros se muestran según se cumpla una condición u otra (si ha iniciado sesión o no) así que ya se imaginan que requriremos del uso de las sentencias “if” y “else”.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.cssLas 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 ymárgenes internos*/footer{

3





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.phpTenemos 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>

4





<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.phpEste 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><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>

Notemos que se enviarán dos datos: el nombre de usuario en la variable de formulario “usuario” y la clave en la variable “pass”.

inc_saludo.phpEn 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:

<?phpecho "<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.phpY 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:

<?phpecho "<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.phpEste 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:

5


http://eliotnet.blogspot.com/2013/08/compartir-un-estado-de-facebook-en-tu.html








<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 sesionesAlgunas cosas que debemos saber sobre las sesiones en este ejercicio:

1. Para iniciar sesión use el nombre que prefiera, la clave de acceso es “adminadmin” sin las comillas.

2. 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();

3. A la sesión iniciada le podemos asignar valores que serán guardadas temporalmentehasta que finalice la sesión, por ejemplo, podemos agregar nombre y e-mail:$_SESSION["nombre"] = “Juan Lara"];$_SESSION["email"] = “[email protected]"];

4. Una sesión de finaliza con la instrucción: session_destroy();

index.phpNuestra 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>";

6





}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>

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.

publico.phpEl 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>

7





<?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>



8





Parte de la página “pública.php”, a la izquierda sin sesión iniciada, a la derecha ya iniciada con saludo personalizado.

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');

9





}else{include('inc_restringido.php');

}} ?>

</section> <footer>



Parte de la página, igualmente, con la sesión cerrada, a la derecha con la sesión iniciada.

salir.phpAquí 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):

<?phpsession_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>

10





<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>

Debes ver algo así:

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:

<?phpsession_start();session_destroy();header('Location: index.php');?>

Luego 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.

FinalizandoEn 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.

11





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.

Tabla de ContenidoTRABAJANDO CON SESIONES

Índice de ContenidoDescripción del ejercicioArchivos

estilos . cssinc _ nav . phpinc _ form . phpinc _ saludo . phpinc _ restringido . phpinc _ video . php

Sobre las sesionesindex . phppublico . phpprivado . phpsalir . php

FinalizandoTabla de Contenido

--------------------------------------------------------------------------------------NOTA: Los archivos del ejercicio estarán disponibles para descargar por un tiempo en:

https :// dl . dropboxusercontent . com / u /31658854/ sesiones . zip

12


https://dl.dropboxusercontent.com/u/31658854/sesiones.zip















Education

Trabajando con sesiones en PHP