Creando un área de cliente para portfolios con PHP y MySQL – Tercera parte

En esta parte nos meteremos en la zona interna del área de cliente. Vamos a crear un formulario de inicio de sesión, hablaremos de las sesiones en PHP, crearemos una página de perfil y el área de cliente y, por último, crearemos un script de cierre de sesión.

Formulario de inicio de sesión

El formulario de acceso va a ser muy similar al formulario de registro, ya que es una forma básica en HTML, lo que lleva a un script que ejecutaremos en la misma página, tal como hicimos con el anterior. La diferencia en este script de entrada es que en lugar de insertar datos en la BD, vamos a llamar a los datos del usuario y guardarlos hasta que no los necesitemos más (cuando el cliente cierra sesión).

Para simplificar las cosas al principio, vamos a crear el formulario de acceso HTML, nombrándolo “login.php”.

Login

<html>
<head>
<meta charset="ISO-8859-1" />
<title>Registrarse</title>
</head>
<body>
<?php
// Aquí el código PHP
?>
<form action="login.php" method="post">
 Usuario:
 <input type="text" name="username" /><br />
 Contraseña:
 <input type="password" name="password" /><br />
 <input type="submit" value="Acceder" />
</form>
</body>
</html>

Ten en cuenta que el campo de la contraseña se oculta, al darle el tipo “password” y que estamos usando el método POST para enviar el formulario a login.php.

Ahora, vamos a crear el script de inicio de sesión en PHP. Esto es sencillamente lo que debe hacer:

  1. El cliente utilizará el formulario de inicio de sesión y este deberá dirigir la información a login.php.
  2. El script encontrará los datos donde el usuario y la contraseña dados coincidan.
  3. Si coincide, habrá datos sobre los que podremos trabajar y crearemos una sesión. De lo contrario, vamos a avisar al usuario de que el usuario y la contraseña no coinciden.
  4. El cliente será redirigido a la página de perfil, que se rellena con la información encontrada en la sesión que hemos creado.

Así que empezamos por abrir un nuevo documento y la creación de nuestra página login.php. A continuación escribimos las etiquetas PHP y lo conectamos a nuestra base de datos.

require('db.php');

Bastante simple, ¿verdad? Añado también “if(!empty($_POST))” para que el código PHP no se ejecute si no se ha escrito nada en los campos. Ahora para organizarnos, vamos a crear unas variables para el nombre de usuario y contraseña dentro de nuestro login.php. Como utilizamos el método POST en el formulario de inicio de sesión, ya tenemos sus valores en la variable $_POST predefinida. Podremos guardarlas en las variables personalizadas a continuación:

if (!empty($_POST)) {
 // Establecer variables username y password para este script 
 $user = mysql_real_escape_string($_POST["username"]);
 $pass = mysql_real_escape_string(md5($_POST["password"]));

Recuerda que el parámetro de la matriz $_POST ($_POST[“parámetro”]) depende del atributo “name” de nuestro formulario de acceso HTML. Utilizamos md5 de nuevo en esta variable password, porque tendremos que comparar la contraseña encriptada en la base de datos con la versión cifrada introducida anteriormente. De lo contrario, no se correspondería aunque el usuario introduzca la contraseña correcta. Además, escribimos mysql_real_escape_string() para la prevención de ataques de inyección SQL.

A continuación vamos a usar nuevas variables para seleccionar los datos donde encajan estas variables – el nombre de usuario y la contraseña. Si encajan el nombre de usuario y la contraseña, se introducirán los datos en $clientdata, si no, no insertará nada. Solo se producirá error si tenemos una sintaxis errónea en nuestra consulta, la cual podemos arreglar antes de que nuestra zona de clientes esté en la red.

//Asegúrate que el nombre de usuario y la contraseña coinciden,
// Seleccionando los datos de los clientes de la base de datos si es posible.
// Almacenamos los datos en $clientdata
$clientdata = mysql_query("SELECT * FROM clients WHERE username='$user' and password='$pass'") or die (mysql_error());

Después pondremos nuestra consulta dentro de $clientdata en una matriz en la que podamos trabajar. Podemos usar la siguiente función:

$data = mysql_fetch_array($clientdata, MYSQL_ASSOC);

Los fragmentos son bastante comunes – Pero no dudes en preguntar o investigar esta función más profundamente para más detalles.

Vamos a escribir todo el código, ya que todo lo demás está en un gran bloque IF/ELSE. Lo escribiré junto para evitar confusiones.

Mira en los comentarios dentro del código para una explicación más detallada.

<?php
require('db.php');
if (!empty($_POST)) {
 // Establecer variables username y password para este script 
 $user = mysql_real_escape_string($_POST["username"]);
 $pass = mysql_real_escape_string(md5($_POST["password"]));
 $clientdata = mysql_query("SELECT * FROM clients WHERE username='$user' and password='$pass'") or die (mysql_error());
 // Ponemos la consulta $clientdata dentro de una matriz en la que podamos trabajar
 $data = mysql_fetch_array($clientdata, MYSQL_ASSOC);
 
 // Si el usuario y la contraseña coinciden, tendremos 1 entrada en nuestro
 // Array $ ClientData. La función mysql_num_rows() puede contar esto.
 // Si no, tendríamos. 0 Por lo tanto, podemos utilizar un if / else sencillo
 // Para determinar si coinciden.
 // Si hay 1 fila de la consulta, es uno de nuestros usuarios
 if (mysql_num_rows($clientdata) == 1){
  // Inicia la sesión en blanco. Esto asignará en el servidor el usuario
  // Con una sesión con un ID individual
  session_start();
  // Con la sesión iniciada, podemos asignar variables para
  // El usuario y usarlas hasta que se realice la desconexión.
  $_SESSION['client_ID'] = $data['client_ID'];
  $_SESSION['username'] = $user;
  $_SESSION['email'] = $data['email'];
  $_SESSION['paypal'] = $data['paypal'];
  // Entonces, redirigimos a la página de perfil
  header ('Location: profile.php');
  // De lo contrario, si no conseguimos nada en nuestra consulta, decimos que
  // El usuario y contraseña no coinciden.
 } else {
  echo "El nombre de usuario y la contraseña no coinciden. Por favor, vuelve atrás e <a href='login.php'>inténtalo de nuevo.</a>";
 }
}
?>

Si probamos todo el código, vemos que nos redirige a una página 404 (not found). Esto significa que el código se ha ejecutado sin errores, ya que nos ha traído a nuestra página profile.php, que aún no hemos creado.

Página de perfil

Una vez entendemos lo que es una sesión, veremos lo fácil que es crear una página de perfil. Si estamos en la página de perfil, lo primero que debemos verificar es que el usuario haya iniciado sesión. Si lo ha hecho, mostraremos su perfil determinando quién es según sus variables de inicio de sesión, para hacer las llamadas a la base de datos. Si no se ha autentificado, lo redirigiremos fuera de la página protegida.

Esta página también será una mezcla de HTML y PHP, ya que tenemos que mostrar los encabezados en HTML, párrafos y otros elementos del diseño, pero también debemos tener acceso a la sesión y sus variables para interactuar con el cliente. Creamos la página llamada profile.php.

Vamos a tener que iniciar sesión. Haremos esto para todas las páginas en las que se tenga que acceder a los datos de los usuarios.

<html>
<head>
<meta charset="ISO-8859-1" />
<title>Perfil</title>
</head>
<body>
<?php
session_start();

A continuación, vamos a asegurarnos de que el usuario se registra comprobando si la matriz $_SESSION está establecida. Esto funciona así porque definimos las variables de sesión en nuestra página login.php. En concreto, tenemos que llamar a una de las variables de sesión. Usaremos la variable de nombre de usuario.

// Si la variable PHP$_SESSION['username'] no está (!) definida
if(!isset($_SESSION['username'])){
// Entonces redireccionará a la página de inicio de sesión
 header ('Location: login.php');
}

Vamos a añadir algunas cabeceras básicas y tal, para pedir el nombre de usuario y aplicarlo de una manera práctica.

echo "<h1> Perfil del Usuario: </h1>";
echo "<p>Bienvenido ".$_SESSION['username'].". Esta es su página de perfil. Puede ver y editar su información, o navegar a cualquiera de las otras opciones.</p>";
echo "Su dirección de correo electrónico: ".$_SESSION['email']."<br/>"."Su dirección de PayPal: ".$_SESSION['paypal'];
echo "<p><a href='logout.php'>Logout</a></p>";

Esta página es bastante fácil, y podemos ver cómo la adición de otros tipos de datos a la base de datos se puede utilizar en esta página también. Este tipo de página de perfil es fácilmente adaptable a sus propias necesidades. A continuación se muestra la página completa:

<html>
<head>
<meta charset="ISO-8859-1" />
<title>Perfil</title>
</head>
<body>
<?php
session_start();
// Si la variable PHP$_SESSION['username'] no está (!) definida
if(!isset($_SESSION['username'])){
 // Entonces redireccionará a la página de inicio de sesión
 header ('Location: login.php');
}
require('db.php');
echo "<h1> Perfil del Usuario: </h1>";
echo "<p>Bienvenido ".$_SESSION['username'].". Esta es su página de perfil. Puede ver y editar su información, o navegar a cualquiera de las otras opciones.</p>";
echo "Su dirección de correo electrónico: ".$_SESSION['email']."<br/>"."Su dirección de PayPal: ".$_SESSION['paypal'];
echo "<p><a href='logout.php'>Logout</a></p>";
?>
</body>
</html>

Logout

La desconexión es tan simple como matar la sesión actual. Es sólo un pequeño script, y lo podemos enlazar en el código directamente con el botón de cierre de sesión.

session_destroy();

Vamos a crear un nuevo archivo llamado logout.php. Este archivo se encargará de destruir la sesión, y luego mostrar cualquier información adicional o redirigir al usuario.

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

En primer lugar tenemos que iniciar la sesión para que el servidor pueda identificarlo, al igual que en el resto de páginas. Sin esto, el servidor no tendrá ninguna sesión que destruir. Luego llamamos a “sesión_destroy();” para deshacerse de la sesión, que registra la desconexión del usuario. Después, redirigiremos al usuario a nuestra página index.html (no creada en este tutorial).

Para hacer que el cliente se desconecte, creamos un enlace a la página logout.php.

Terminando

Como te darás cuenta, nuestro script está un poco sucio. Por ejemplo, con el cierre de sesión de tres líneas parece casi innecesario que esté en un archivo distinto. Hago esto para separar todo lo que sea posible, y dejar la parte de codificación y del diseño a vosotros. Espero que de esta manera sea más fácil de entender.

Sin embargo, una vez conseguimos que las cosas estén configuradas y funcionen, es una buena idea refactorizar el código. Esto quiere decir, limpiarlo, agrupar las cosas y hacer lo que sea para conseguir un código más manejable.

En la próxima parte vamos a repasar esto y subir y crear el área de documentos compartidos para el cliente, donde tú y el cliente puedan compartir cualquier imagen, texto u otra información de forma fácil y rápida.

Anuncios

Ayúdame a mejorar. Deja un comentario:

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s