Membresía de usuario con PHP

() translation by (you can also view the original English article)

Un tutorial para el principiante! No importa a dónde vaya en Internet, hay un elemento básico que encontrará en casi todas partes: el registro de usuarios. Ya sea que necesite que sus usuarios se registren por seguridad o solo por una característica adicional, no hay razón para no hacerlo con este simple tutorial. En este tutorial, repasaremos los aspectos básicos de la administración de usuarios y terminaremos con un Área de miembros simple que puede implementar en su propio sitio web.

Introducción

En este tutorial, realizaremos cada paso para crear un sistema de administración de usuarios, junto con un sistema de mensajería privada entre usuarios. Vamos a hacer esto usando PHP, con una base de datos MySQL para almacenar toda la información del usuario. Este tutorial está dirigido a principiantes absolutos de PHP, por lo que no se requiere ningún conocimiento previo. De hecho, puede aburrirse un poco si es un usuario experimentado de PHP.

Este tutorial está pensado como una introducción básica a las sesiones y al uso de bases de datos en PHP. Si bien el resultado final de este tutorial puede no serle inmediatamente útil, las habilidades que obtiene de este tutorial le permitirán continuar creando su propio sistema de membresía; satisfaciendo sus propias necesidades.

Antes de comenzar este tutorial, asegúrese de tener a mano la siguiente información:

Nombre de host de la base de datos: este es el servidor en el que está alojada su base de datos; en la mayoría de las situaciones, simplemente será 'localhost'.
Nombre de la base de datos, Nombre de usuario de la base de datos, Contraseña de la base de datos: antes de comenzar este tutorial, debe crear una base de datos MySQL si tiene la capacidad, o tener a mano la información para conectarse a una base de datos existente. Esta información es necesaria a lo largo del tutorial.

Si no tiene esta información, su proveedor de alojamiento debería poder brindársela.

Ahora que hemos eliminado las formalidades, ¡comencemos con el tutorial!

Paso 1 - Configuración inicial

Configurando la base de datos

Como se indica en la Introducción, necesita una base de datos para continuar más allá de este punto en el tutorial. Para empezar, vamos a hacer una tabla en esta base de datos para almacenar nuestra información de usuario.

La tabla que necesitamos almacenará nuestra información de usuario; para nuestros propósitos usaremos una tabla simple, pero sería fácil almacenar más información en columnas adicionales si eso es lo que necesita. En nuestro sistema necesitamos las siguientes cuatro columnas:

ID de usuario (clave principal)
Nombre de usuario
Contraseña
Dirección de correo electrónico

En términos de la base de datos, una clave principal es el campo que identifica de forma única la fila. En este caso, UserID será nuestra clave principal. Como queremos que esto aumente cada vez que un usuario se registre, usaremos la opción especial MySQL - auto_increment.

La consulta SQL para crear nuestra tabla se incluye a continuación, y generalmente se ejecutará en la pestaña 'SQL' de phpMyAdmin.

CREATE TABLE `users` (
`UserID` INT(25) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`Username` VARCHAR(65) NOT NULL ,
`Password` VARCHAR(32) NOT NULL ,
`EmailAddress` VARCHAR(255) NOT NULL
);

Creando un archivo base

Para simplificar la creación de nuestro proyecto, vamos a hacer un archivo base que podemos incluir en cada uno de los archivos que creamos. Este archivo contendrá la información de conexión de la base de datos, junto con ciertas variables de configuración que nos ayudarán en el camino.

Comience creando un nuevo archivo: base.php, e ingrese el siguiente código:


<?php
session_start();

$dbhost = "localhost"; // this will ususally be 'localhost', but can sometimes differ
$dbname = "database"; // the name of the database that you are going to use for this project
$dbuser = "username"; // the username that you created, or were given, to access your database
$dbpass = "password"; // the password that you created, or were given, to access your database

mysql_connect($dbhost, $dbuser, $dbpass) or die("MySQL Error: " . mysql_error());
mysql_select_db($dbname) or die("MySQL Error: " . mysql_error());
?>

Echemos un vistazo a algunas de esas líneas, ¿vale? Hay algunas funciones aquí que hemos usado y que aún no hemos explicado, así que echémosle un vistazo rápidamente y le daremos un sentido: si ya comprende los conceptos básicos de PHP, es posible que desee omitir esta explicación.

1	session_start();

Esta función inicia una sesión para el nuevo usuario, y más adelante en este tutorial almacenaremos información en esta sesión para permitirnos reconocer a los usuarios que ya han iniciado sesión Si ya se ha creado una sesión, esta función lo reconocerá y la llevará a la página siguiente.

1	mysql_connect($dbhost, $dbuser, $dbpass) or die("MySQL Error: " . mysql_error());
2	mysql_select_db($dbname) or die("MySQL Error: " . mysql_error());

Cada una de estas funciones realiza una tarea separada, pero vinculada. La función mysql_connect conecta nuestro script con el servidor de la base de datos utilizando la información que le proporcionamos anteriormente, y la función mysql_select_db elige la base de datos a usar con el script. Si alguna de las funciones no se completa, diefunción de troquel automáticamente intervendrá y detendrá el procesamiento de la secuencia de comandos, dejando a cualquier usuario con el mensaje de que había un error de MySQL.

Paso 2 - Volver a la interfaz

¿Qué necesitamos hacer primero?

El elemento más importante en nuestra página es la primera línea de PHP; esta línea incluirá el archivo que creamos anteriormente (base.php), y esencialmente nos permitirá acceder a cualquier cosa de ese archivo en nuestro archivo actual. Haremos esto con la siguiente línea de código PHP. Crea un archivo llamado index.php y coloca este código en la parte superior.

1
2	<?php include "base.php"; ?>

Comience la página HTML

Lo primero que vamos a hacer para nuestra interfaz es crear una página donde los usuarios puedan ingresar sus datos para iniciar sesión, o si ya han iniciado sesión en una página donde pueden elegir lo que desean hacer. En este tutorial, presumo que los usuarios tienen un conocimiento básico de cómo funciona HTML / CSS y, por lo tanto, no voy a explicar este código en detalle; En este momento, estos elementos no tendrán estilo, pero podremos cambiar esto más adelante cuando creemos nuestra hoja de estilos CSS.

Usando el archivo que acabamos de crear (index.php), ingrese el siguiente código HTML debajo de la línea de PHP que ya hemos creado.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>User Management System (Tom Cameron for NetTuts)</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>  
<body>  
<div id="main">

¿Qué debemos mostrarles?

Antes de que salgamos el resto de la página, tenemos algunas preguntas para hacernos:

¿El usuario ya ha iniciado sesión?

Sí, tenemos que mostrarles una página con opciones para que elijan.
No, continuamos con la siguiente pregunta.

¿El usuario ya ha enviado sus datos de inicio de sesión?

Sí, necesitamos verificar sus detalles y, si es correcto, los registraremos en el sitio.
No, continuamos con la siguiente pregunta.

Si las dos respuestas anteriores fueron contestadas No, ahora podemos asumir que debemos mostrar un formulario de inicio de sesión al usuario.

Estas preguntas son, de hecho, las mismas preguntas que vamos a implementar en nuestro código PHP. Vamos a hacer esto en forma de if statements. Sin ingresar nada en ninguno de sus nuevos archivos, echemos un vistazo a la lógica que usaremos primero.


<?php
if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Username']))
{
  // let the user access the main page
}
elseif(!empty($_POST['username']) && !empty($_POST['password']))
{
	// let the user login
}
else
{
	// display the login form
}
?>

Parece confuso, ¿no? Vamos a dividirlo en secciones más pequeñas y repasarlas una por una.


if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Username']))
{
	// let the user access the main page
}

Cuando un usuario inicie sesión en nuestro sitio web, almacenaremos su información en una sesión; en cualquier momento después de esto, podremos acceder a esa información en una matriz global de PHP especial: $_SESSION. Estamos utilizando la función empty para verificar si la variable está vacía, ¡con el operador! en frente de eso. Por eso estamos diciendo:

Si la variable $ _SESSION ['LoggedIn'] no está vacía y $ _SESSION ['Username'] no está vacía, ejecute este fragmento de código.

La siguiente línea funciona de la misma manera, solo que esta vez utilizando la matriz global $_POST. Esta matriz contiene cualquier información que se envió desde el formulario de inicio de sesión que crearemos más adelante en este tutorial. La línea final solo se ejecutará si no se cumple ninguna de las afirmaciones anteriores; En este caso le mostraremos al usuario un formulario de inicio de sesión.

Entonces, ahora que entendemos la lógica, obtengamos algo de contenido entre esas secciones. En su archivo index.php, ingrese lo siguiente debajo de lo que ya tiene.


<?php
if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Username']))
{
	 ?>

	 <h1>Member Area</h1>
     <pThanks for logging in! You are <code><?=$_SESSION['Username']?></code> and your email address is <code><?=$_SESSION['EmailAddress']?></code>.</p>
     
     <?php
}
elseif(!empty($_POST['username']) && !empty($_POST['password']))
{
	$username = mysql_real_escape_string($_POST['username']);
    $password = md5(mysql_real_escape_string($_POST['password']));
    
	$checklogin = mysql_query("SELECT * FROM users WHERE Username = '".$username."' AND Password = '".$password."'");
    
    if(mysql_num_rows($checklogin) == 1)
    {
    	$row = mysql_fetch_array($checklogin);
        $email = $row['EmailAddress'];
        
        $_SESSION['Username'] = $username;
        $_SESSION['EmailAddress'] = $email;
        $_SESSION['LoggedIn'] = 1;
        
    	echo "<h1>Success</h1>";
        echo "<p>We are now redirecting you to the member area.</p>";
        echo "<meta http-equiv='refresh' content='=2;index.php' />";
    }
    else
    {
    	echo "<h1>Error</h1>";
        echo "<p>Sorry, your account could not be found. Please <a href=\"index.php\">click here to try again</a>.</p>";
    }
}
else
{
	?>
    
   <h1>Member Login</h1>
    
   <p>Thanks for visiting! Please either login below, or <a href="register.php">click here to register</a>.</p>
    
	<form method="post" action="index.php" name="loginform" id="loginform">
	<fieldset>
		<label for="username">Username:</label><input type="text" name="username" id="username" /><br />
		<label for="password">Password:</label><input type="password" name="password" id="password" /><br />
		<input type="submit" name="login" id="login" value="Login" />
	</fieldset>
	</form>
    
   <?php
}
?>

</div>
</body>
</html>

Con suerte, el primer y último bloque de código no te confundirán demasiado. En lo que realmente necesitamos quedarnos atrapados ahora es por lo que todos han venido a este tutorial: el código PHP. Ahora pasamos por la segunda sección, una línea a la vez, y explicaré para qué está destinado cada bit de código.

1
2	$username = mysql_real_escape_string($_POST['username']);
3	$password = md5(mysql_real_escape_string($_POST['password']));

Hay dos funciones que necesitan explicación para esto. En primer lugar, mysql_real_escape_string: una función muy útil para limpiar la entrada de la base de datos. No es una medida a prueba de fallos, pero esto mantendrá alejada a la mayoría de los piratas informáticos maliciosos eliminando partes no deseadas de lo que se haya colocado en nuestro formulario de inicio de sesión. En segundo lugar, md5. Sería imposible entrar en detalles aquí, pero esta función simplemente encripta todo lo que se le pasa, en este caso la contraseña del usuario, para evitar que los curiosos lo lean.


	 $checklogin = mysql_query("SELECT * FROM users WHERE Username = '".$username."' AND Password = '".$password."'");
    
    if(mysql_num_rows($checklogin) == 1)
    {
    	 $row = mysql_fetch_array($checklogin);
        $email = $row['EmailAddress'];
        
        $_SESSION['Username'] = $username;
        $_SESSION['EmailAddress'] = $email;
        $_SESSION['LoggedIn'] = 1;

Aquí tenemos el núcleo de nuestro código de inicio de sesión; En primer lugar, ejecutamos una consulta en nuestra base de datos. En esta consulta, estamos buscando todo lo relacionado con un miembro, cuyo nombre de usuario y contraseña coincidan con los valores de $username y $password que el usuario ha proporcionado. En la siguiente línea tenemos una declaración if, en la que verificamos cuántos resultados hemos recibido. Si no hay resultados, esta sección no se procesará. Pero si hay un resultado, sabemos que el usuario existe, y por eso vamos a iniciar sesión.

Las siguientes dos líneas son para obtener la dirección de correo electrónico del usuario. Ya tenemos esta información de la consulta que ya hemos ejecutado, por lo que podemos acceder fácilmente a esta información. Primero, obtenemos una matriz de los datos que se han recuperado de la base de datos; en este caso, estamos usando la función de PHP mysql_fetch_array. Luego, asigné el valor del campo EmailAddress a una variable para que la usemos más adelante.

Ahora ponemos la sesión. Estamos almacenando el nombre de usuario y la dirección de correo electrónico del usuario en la sesión, junto con un valor especial para que sepamos que han iniciado sesión utilizando este formulario. Después de que todo esto se haya dicho y hecho, serán redirigidos al Área de Miembros usando el REFRÉS DE META en el código.

Entonces, ¿cómo se ve nuestro proyecto actualmente para un usuario?

¡Genial! Es hora de seguir adelante, para asegurarse de que las personas puedan ingresar a su sitio.

Deja que la gente se registre

Es bueno tener un formulario de inicio de sesión en su sitio, pero ahora debemos permitir que los usuarios puedan usarlo, necesitamos hacer un formulario de inicio de sesión. Haga un archivo llamado register.php y coloque el siguiente código en él.


<?php include "base.php"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>User Management System (Tom Cameron for NetTuts)</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>  
<body>  
<div id="main">
<?php
if(!empty($_POST['username']) && !empty($_POST['password']))
{
	$username = mysql_real_escape_string($_POST['username']);
    $password = md5(mysql_real_escape_string($_POST['password']));
    $email = mysql_real_escape_string($_POST['email']);
    
	 $checkusername = mysql_query("SELECT * FROM users WHERE Username = '".$username."'");
     
     if(mysql_num_rows($checkusername) == 1)
     {
     	echo "<h1>Error</h1>";
        echo "<p>Sorry, that username is taken. Please go back and try again.</p>";
     }
     else
     {
     	$registerquery = mysql_query("INSERT INTO users (Username, Password, EmailAddress) VALUES('".$username."', '".$password."', '".$email."')");
        if($registerquery)
        {
        	echo "<h1>Success</h1>";
        	echo "<p>Your account was successfully created. Please <a href=\"index.php\">click here to login</a>.</p>";
        }
        else
        {
     		echo "<h1>Error</h1>";
        	echo "<p>Sorry, your registration failed. Please go back and try again.</p>";    
        }    	
     }
}
else
{
	?>
    
   <h1>Register</h1>
    
   <p>Please enter your details below to register.</p>
    
	<form method="post" action="register.php" name="registerform" id="registerform">
	<fieldset>
		<label for="username">Username:</label><input type="text" name="username" id="username" /><br />
		<label for="password">Password:</label><input type="password" name="password" id="password" /><br />
        <label for="email">Email Address:</label><input type="text" name="email" id="email" /><br />
		<input type="submit" name="register" id="register" value="Register" />
	</fieldset>
	</form>
    
    <?php
}
?>

</div>
</body>
</html>

Entonces, no hay mucho PHP nuevo que aún no hayamos aprendido en esa sección. Echemos un vistazo rápido a esa consulta SQL y veamos si podemos averiguar qué está haciendo.

1
2	$registerquery = mysql_query("INSERT INTO users (Username, Password, EmailAddress) VALUES('".$username."', '".$password."', '".$email."')");

Entonces, aquí estamos agregando el usuario a nuestra base de datos. Esta vez, en lugar de recuperar los datos, los estamos insertando; por lo que primero especificamos en qué columnas ingresamos los datos (no lo olvide, nuestro ID de usuario subirá automáticamente) En el área de VALORES(), le decimos qué poner en cada columna; En este caso nuestras variables provienen de la entrada del usuario. Entonces, vamos a intentarlo; Una vez que haya creado una cuenta en su nuevo formulario de registro, esto es lo que verá para el Área de Miembros.

Asegúrese de que puedan cerrar la sesión

Estamos casi al final de esta sección, pero hay una cosa más que necesitamos antes de que terminemos aquí: una forma para que los usuarios cierren sesión en sus cuentas. Esto es muy fácil de hacer (afortunadamente para nosotros); cree un nuevo campo llamado logout.php e ingrese lo siguiente en él.

1
2	<?php include "base.php"; $_SESSION = array(); session_destroy(); ?>
3	<meta http-equiv="refresh" content="0;index.php">

En esto, primero restablecemos nuestra matriz global $_SESSION, y luego estamos destruyendo la sesión por completo.

Y ese es el final de esa sección, y el final del código PHP. Vayamos ahora a nuestra sección final.

Paso 3 - Obtener estilo

No voy a explicar mucho en esta sección; si no entiende HTML / CSS, lo recomendaría con insistencia en los muchos tutoriales excelentes de este sitio web para comenzar. Cree un nuevo archivo llamado style.css e ingrese lo siguiente en él; Esto estilizará todas las páginas que hemos creado hasta ahora.


* {
	margin: 0;
    padding: 0;
}
body {
	font-family: Trebuchet MS;
}
a {
	color: #000;
}
a:hover, a:active, a:visited {
	text-decoration: none;
}
#main {
	width: 780px;
    margin: 0 auto;
	margin-top: 50px;
	padding: 10px;
    border: 1px solid #CCC;
    background-color: #EEE;
}
form fieldset {	border: 0; }
form fieldset p br { clear: left; }
label {
	margin-top: 5px;
    display: block;
    width: 100px;
    padding: 0;
    float: left;
}
input {
	font-family: Trebuchet MS;
    border: 1px solid #CCC;
	margin-bottom: 5px;
    background-color: #FFF;
    padding: 2px;
}
input:hover {
	border: 1px solid #222;
    background-color: #EEE;
}

Ahora echemos un vistazo a algunas capturas de pantalla de cómo debería verse nuestro proyecto final:

El formulario de inicio de sesión.

El área miembro.

El formulario de inscripción.

Y finalmente...

¡Y eso es! Ahora tiene un área de miembros que puede usar en su sitio. Puedo ver a mucha gente sacudiendo la cabeza y gritando a sus monitores que no les sirve de nada, tienes razón. Pero lo que espero que cualquier principiante de PHP haya aprendido es lo básico de cómo usar una base de datos y cómo usar las sesiones para almacenar información. Las habilidades vitales para crear cualquier aplicación web.

Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios.