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

TRABAJANDO CON SESIONES
En el presente do...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
4. Finalizas tus labores y sales de la ses...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
12. img_sesion.jpg: Esta imagen la usaremo...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
background-color:#CCC;
font-family:Georgia...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
<li><a href="index.php">Inicio</a></li>
<l...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
<div id="fb-root"></div> <script>(function...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
}else{
include('inc_form.php');
}
?>
</sec...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
<?php
if(isset($_SESSION["usuario"])){
inc...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com

Parte de la página “pública.php”, a la iz...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
}else{
include('inc_restringido.php');
}
}...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
<h1>La sesi&oacute;n ha sido finalizada</h...
Enlace corto: http://goo.gl/yUOOF0
Blog del autor: http://eliotnet.blogspot.com
Este documento podrá ser distribuido libre...
Upcoming SlideShare
Loading in …5
×

Trabajando con sesiones en PHP

6,651 views

Published on

Gestión de sesiones con el lenguaje PHP

Published in: Education
  • Be the first to comment

  • Be the first to like this

Trabajando con sesiones en PHP

  1. 1. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com TRABAJANDO CON SESIONES 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. Índice de Contenido TRABAJANDO CON SESIONES Índice de Contenido Descripción del ejercicio Archivos estilos.css inc_nav.php inc_form.php inc_saludo.php inc_restringido.php inc_video.php Sobre las sesiones index.php publico.php privado.php salir.php Finalizando Tabla de Contenido 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: 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
  2. 2. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: 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 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: 1. 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 autenticase1, pues ya está autenticado). Otra observación es que el formulario 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. 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. 1 2
  3. 3. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com 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.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{ 3
  4. 4. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com 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> 4
  5. 5. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com <li><a href="index.php">Inicio</a></li> <li><a href="privado.php">Contenido privado</a></li> <li><a href="publico.php">Contenido p&uacute;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> <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&ntilde;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.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&oacute;n está iniciada</h3>"; echo "<p align='left'>Hola ".$_SESSION['usuario']." - <a href='salir.php'>Cerrrar la sesi&oacute;n</a></p>"; echo "<hr /><p>Aquí podr&iacute;a ir info personalizada para el usuario en su sesi&oacute;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&aacute;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: 5
  6. 6. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com <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-programaspiratas/639595306080280">Por favor no quiero programas piratas</a>.</div></div> Sobre las sesiones Algunas 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 temporalmente hasta que finalice la sesión, por ejemplo, podemos agregar nombre y e-mail: $_SESSION["nombre"] = “Juan Lara"]; $_SESSION["email"] = “jlara@micuenta.com"]; 4. 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&aacute;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
  7. 7. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com }else{ include('inc_form.php'); } ?> </section> <footer> Propiedad intelectual, todos los derechos reservados &copy;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.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&uacute;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&aacute;gina P&uacute;blica</h1> <nav><?php include('inc_nav.php'); ?></nav> </header> <section> 7
  8. 8. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com <?php if(isset($_SESSION["usuario"])){ include('inc_saludo.php'); } ?> <article> <p>Este es contenido disponible para todos, podr&aacute; ser visto por cualquier persona, sea que haya iniciado o no la sesi&oacute;n, pero, hay 2 diferencias:</p> <ol> <li>Un saludo personalizado al usuario.</li> <li>El enlace para cerrar la sesi&oacute;n a quienes la hayan iniciado.</li> </ol> </article> <article> <p>Este es contenido disponible para todos, podr&aacute; ser visto por cualqier persona, sea que haya iniciado o no la sesi&oacute;n, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesi&oacute;n a quienes la hayan iniciado.</p> </article> <article> <p>Este es contenido disponible para todos, podr&aacute; ser visto por cualqier persona, sea que haya iniciado o no la sesi&oacute;n, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesi&oacute;n a quienes la hayan iniciado.</p> </article> <article> <p>Este es contenido disponible para todos, podr&aacute; ser visto por cualqier persona, sea que haya iniciado o no la sesi&oacute;n, pero, hay 2 diferencias: 1 es la diferencia es que mostraremos un saludo personalizado y 2 es el enlace para cerrar la sesi&oacute;n a quienes la hayan iniciado.</p> </article> </section> <footer> Propiedad intelectual, todos los derechos reservados &copy;Ica 2013.<br /> <a href=”http://eliotnet.blogspot.com”>Ver blog</a> </footer> </body> </html> 8
  9. 9. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com 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&aacute;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
  10. 10. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com }else{ include('inc_restringido.php'); } } ?> </section> <footer> Propiedad intelectual, todos los derechos reservados &copy;Ica 2013.<br /> <a href=”http://eliotnet.blogspot.com”>Ver blog</a> </footer> </body> </html> Parte de la página, igualmente, con la sesión cerrada, a la derecha con la sesión iniciada. 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): <?php session_start(); session_destroy(); ?> <!DOCTYPE html> <html> <head> <title>Sesi&oacute;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
  11. 11. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com <h1>La sesi&oacute;n ha sido finalizada</h1> <nav><?php include('inc_nav.php'); ?></nav> <p>Gracias por su visita</p> </header> <section> <h3>La sesi&oacute;n est&aacute; cerrada.</h3> <p align="left"><a href="index.php">Ir a la p&aacute;gina principal</a></p> </section> <footer> Propiedad intelectual, todos los derechos reservados &copy;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: <?php session_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. 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. 11
  12. 12. Enlace corto: http://goo.gl/yUOOF0 Blog del autor: http://eliotnet.blogspot.com 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 Contenido TRABAJANDO CON SESIONES Índice de Contenido Descripción del ejercicio Archivos estilos.css inc_nav.php inc_form.php inc_saludo.php inc_restringido.php inc_video.php Sobre las sesiones index.php publico.php privado.php salir.php Finalizando Tabla 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

×