Trabajando con sesiones en PHP

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

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

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

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

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

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

5

<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á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.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>
<link rel="shortcut icon" href="archivos/img_sesion.jpg" type="image/jpg"
/>
</head>
<body>
<header>
<h1>Página Pública</h1>
</header>
<section>

7

<?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>
</article>
<article>
</article>
</section>
<footer>
</footer>
</body>
</html>

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>
</head>
<body>
<header>
<h1>Página Privada</h1>
</header>
<section>
<?php
$pass = "";
if(isset($_POST["pass"])){
$pass = $_POST["pass"];
}
if(isset($_POST["usuario"]) & $pass=="adminadmin"){
$_SESSION["usuario"] = $_POST["usuario"];
echo "<img <img src='archivos/img_privado.jpg' title='Sorprendido' />";
include('archivos/inc_video.php');
}else{
echo "<img src='archivos/img_privado.jpg' title='Sorprendido' />";
include('archivos/inc_video.php');

9

}else{
include('inc_restringido.php');
}
}
?>
</section>
<footer>
</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ón cerrada - Trabajando con sesiones</title>
</head>
<body>
<header>

10

<h1>La sesión ha sido finalizada</h1>
<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>
</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

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

Trabajando con sesiones en PHP

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Trabajando con sesiones en PHP

Similar a Trabajando con sesiones en PHP (20)

Último

Último (20)

Trabajando con sesiones en PHP