Spanish (Español) translation by Ronald Montenegro (you can also view the original English article)
Un sistema de inicio de sesión y registro de usuario es muy útil cuando queremos almacenar información sobre los usuarios de nuestro sitio web. Esto se aplica a todo, desde sitios web educativos que podrían almacenar el progreso del curso y marcas a sitios web de comercio electrónico que almacenarán información sobre las compras pasadas de los clientes.
En este tutorial, te enseñaré cómo crear tus propios formularios PHP de inicio de sesión y registro desde cero.
Los 20 mejores formularios de correo electrónico en PHP
Los 12 mejores scripts PHP de formularios de contacto
Comparando los 5 mejores creadores de formularios PHP
15 útiles formularios de inicio de sesión PHP en CodeCanyon
Creando los formularios de inicio de sesión y registro
Nuestro primer paso será la creación de un formulario de inicio de sesión y un formulario de registro. Los formularios en realidad serán bastante simples. El formulario de registro solo pedirá un nombre de usuario, correo electrónico y contraseña. El nombre de usuario y el correo electrónico serán únicos para todos los que se registran. Si alguien intenta crear dos cuentas con la misma dirección de correo electrónico, le mostraremos un mensaje de error que le permita saber que el correo electrónico ya está en uso.
Programando el formulario de registro
Aquí está el código HTML para crear el formulario de registro. Tienes que ponerlo en un archivo llamado register.php.
1 |
<form method="post" action="" name="signup-form"> |
2 |
<div class="form-element"> |
3 |
<label>Username</label> |
4 |
<input type="text" name="username" pattern="[a-zA-Z0-9]+" required /> |
5 |
</div>
|
6 |
<div class="form-element"> |
7 |
<label>Email</label> |
8 |
<input type="email" name="email" required /> |
9 |
</div>
|
10 |
<div class="form-element"> |
11 |
<label>Password</label> |
12 |
<input type="password" name="password" required /> |
13 |
</div>
|
14 |
<button type="submit" name="register" value="register">Register</button> |
15 |
</form>
|
El formulario es muy básico, pero usamos HTML5 para hacer una validación de entrada muy básica. Por ejemplo, el uso de type="email" alertará a los usuarios cuando la dirección de correo electrónico que ingresaron no está en el formato adecuado. Del mismo modo, el uso del atributo pattern en el nombre de usuario se asegurará de que el nombre de usuario solo consista en caracteres alfanuméricos.
Puedes leer el tutorial titulado Validación de entrada de formulario utilizando sólo HTML5 y Regex si deseas obtener más información sobre el tema. También puedes tomar la validación de formulario del lado cliente al siguiente nivel con jQuery obteniendo más poder sobre los mensajes de error que se muestran y su ubicación y apariencia. Si deseas obtener más información sobre la validación del lado del cliente, consulta esas publicaciones.
Validación de entrada de formulario utilizando solo HTML5 y Regex
Validación fácil de formularios con jQuery
Programando el formulario de inicio de sesión
Aquí está el código HTML para el formulario de inicio de sesión. Puede ponerlo en un archivo llamado login.php.
1 |
<form method="post" action="" name="signin-form"> |
2 |
<div class="form-element"> |
3 |
<label>Username</label> |
4 |
<input type="text" name="username" pattern="[a-zA-Z0-9]+" required /> |
5 |
</div>
|
6 |
<div class="form-element"> |
7 |
<label>Password</label> |
8 |
<input type="password" name="password" required /> |
9 |
</div>
|
10 |
<button type="submit" name="login" value="login">Log In</button> |
11 |
</form>
|
Dando estilo a los formularios con CSS
Aquí hay un poco de CSS que puedes aplicar a estos formularios:
1 |
* { |
2 |
padding: 0; |
3 |
margin: 0; |
4 |
box-sizing: border-box; |
5 |
}
|
6 |
|
7 |
body { |
8 |
margin: 50px auto; |
9 |
text-align: center; |
10 |
width: 800px; |
11 |
}
|
12 |
|
13 |
h1 { |
14 |
font-family: 'Passion One'; |
15 |
font-size: 2rem; |
16 |
text-transform: uppercase; |
17 |
}
|
18 |
|
19 |
label { |
20 |
width: 150px; |
21 |
display: inline-block; |
22 |
text-align: left; |
23 |
font-size: 1.5rem; |
24 |
font-family: 'Lato'; |
25 |
}
|
26 |
|
27 |
input { |
28 |
border: 2px solid #ccc; |
29 |
font-size: 1.5rem; |
30 |
font-weight: 100; |
31 |
font-family: 'Lato'; |
32 |
padding: 10px; |
33 |
}
|
34 |
|
35 |
form { |
36 |
margin: 25px auto; |
37 |
padding: 20px; |
38 |
border: 5px solid #ccc; |
39 |
width: 500px; |
40 |
background: #eee; |
41 |
}
|
42 |
|
43 |
div.form-element { |
44 |
margin: 20px 0; |
45 |
}
|
46 |
|
47 |
button { |
48 |
padding: 10px; |
49 |
font-size: 1.5rem; |
50 |
font-family: 'Lato'; |
51 |
font-weight: 100; |
52 |
background: yellowgreen; |
53 |
color: white; |
54 |
border: none; |
55 |
}
|
56 |
|
57 |
p.success, |
58 |
p.error { |
59 |
color: white; |
60 |
font-family: lato; |
61 |
background: yellowgreen; |
62 |
display: inline-block; |
63 |
padding: 2px 10px; |
64 |
}
|
65 |
|
66 |
p.error { |
67 |
background: orangered; |
68 |
}
|
Esto contiene algunas reglas de estilo adicionales para los mensajes de error y encabezados. El HTML y CSS de esta sección se pueden usar como base de tu proyecto cuando crees tus propios formularios que puedan requerir diferentes estilos y campos de entrada.
Creación de la tabla de usuario y conexión a la base de datos
El siguiente paso es la creación de una tabla de usuario que almacenará toda la información sobre los usuarios registrados. En nuestro caso, la tabla simplemente consta de cuatro columnas: un identificador de incremento automático, un nombre de usuario único, un correo electrónico y una contraseña.
Puedes usar el siguiente SQL para crear la tabla rápidamente.
1 |
CREATE TABLE `users` ( |
2 |
`id` int(10) unsigned NOT NULL AUTO_INCREMENT, |
3 |
`username` varchar(25) NOT NULL, |
4 |
`password` varchar(255) NOT NULL, |
5 |
`email` varchar(100) NOT NULL, |
6 |
PRIMARY KEY (`id`), |
7 |
UNIQUE KEY `username` (`username`) |
8 |
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1; |
Ahora, crea un archivo llamado config.php y escribe el siguiente código en este para conectarse a la base de datos.
1 |
<?php
|
2 |
define('USER', 'root'); |
3 |
define('PASSWORD', ''); |
4 |
define('HOST', 'localhost'); |
5 |
define('DATABASE', 'test'); |
6 |
|
7 |
try { |
8 |
$connection = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASSWORD); |
9 |
} catch (PDOException $e) { |
10 |
exit("Error: " . $e->getMessage()); |
11 |
}
|
12 |
?>
|
Cambia el nombre de la base de datos a cualquiera que sea el nombre de tu base de datos. Este archivo se utilizará para establecer una conexión con la base de datos.
Programando el registro de usuario
Finalmente es el momento de implementar la funcionalidad del registro. La función principal de este código es comprobar si el correo electrónico suministrado ya está registrado. Si no es así, introducimos el nombre de usuario, el correo electrónico y la contraseña en la base de datos.
Coloca el siguiente código en la parte superior de registration.php.
1 |
<?php
|
2 |
|
3 |
include('config.php'); |
4 |
session_start(); |
5 |
|
6 |
if (isset($_POST['register'])) { |
7 |
|
8 |
$username = $_POST['username']; |
9 |
$email = $_POST['email']; |
10 |
$password = $_POST['password']; |
11 |
$password_hash = password_hash($password, PASSWORD_BCRYPT); |
12 |
|
13 |
$query = $connection->prepare("SELECT * FROM users WHERE EMAIL=:email"); |
14 |
$query->bindParam("email", $email, PDO::PARAM_STR); |
15 |
$query->execute(); |
16 |
|
17 |
if ($query->rowCount() > 0) { |
18 |
echo '<p class="error">The email address is already registered!</p>'; |
19 |
}
|
20 |
|
21 |
if ($query->rowCount() == 0) { |
22 |
$query = $connection->prepare("INSERT INTO users(USERNAME,PASSWORD,EMAIL) VALUES (:username,:password_hash,:email)"); |
23 |
$query->bindParam("username", $username, PDO::PARAM_STR); |
24 |
$query->bindParam("password_hash", $password_hash, PDO::PARAM_STR); |
25 |
$query->bindParam("email", $email, PDO::PARAM_STR); |
26 |
$result = $query->execute(); |
27 |
|
28 |
if ($result) { |
29 |
echo '<p class="success">Your registration was successful!</p>'; |
30 |
} else { |
31 |
echo '<p class="error">Something went wrong!</p>'; |
32 |
}
|
33 |
}
|
34 |
}
|
35 |
|
36 |
?>
|
El primer paso es incluir config.php e iniciar la sesión. Esto nos ayuda a almacenar cualquier información que queramos conservar en las páginas.
A continuación, comprobamos si el usuario ha hecho clic en el botón Register para enviar el formulario comprobando si se ha establecido $_POST['register']. Recuerda siempre que no es una buena idea almacenar las contraseñas como texto sin formato. Por esta razón, usamos la función password_hash() y luego almacenamos ese hash en nuestra base de datos. Esta función en particular crea un hash de 60 caracteres utilizando una sal generada aleatoriamente.
Por último, ejecutamos la consulta y comprobamos si existe un número de fila distinto de cero para una dirección de correo electrónico determinada. Si existiera, el usuario recibirá un mensaje diciendo que la dirección de correo electrónico ya está registrada.
Si no existe ninguna fila con la dirección de correo electrónico dada, introducimos la información suministrada en nuestra base de datos y hacemos saber a los usuarios que el registro se ha realizado correctamente.
Implementando la funcionalidad de inicio de sesión
En nuestro último paso, escribimos el código para el registro de usuarios. Esta vez, simplemente comprobamos la información en la base de datos para ver si la combinación de nombre de usuario y contraseña introducida en el formulario es correcta.
Aquí está el código que va en la parte superior de login.php.
1 |
<?php
|
2 |
|
3 |
include('config.php'); |
4 |
session_start(); |
5 |
|
6 |
if (isset($_POST['login'])) { |
7 |
|
8 |
$username = $_POST['username']; |
9 |
$password = $_POST['password']; |
10 |
|
11 |
$query = $connection->prepare("SELECT * FROM users WHERE USERNAME=:username"); |
12 |
$query->bindParam("username", $username, PDO::PARAM_STR); |
13 |
$query->execute(); |
14 |
|
15 |
$result = $query->fetch(PDO::FETCH_ASSOC); |
16 |
|
17 |
if (!$result) { |
18 |
echo '<p class="error">Username password combination is wrong!</p>'; |
19 |
} else { |
20 |
if (password_verify($password, $result['PASSWORD'])) { |
21 |
$_SESSION['user_id'] = $result['ID']; |
22 |
echo '<p class="success">Congratulations, you are logged in!</p>'; |
23 |
} else { |
24 |
echo '<p class="error">Username password combination is wrong!</p>'; |
25 |
}
|
26 |
}
|
27 |
}
|
28 |
|
29 |
?>
|
Una cosa importante a tener en cuenta aquí es que no comparamos los nombres de usuario y la contraseña en un solo paso. Debido a que la contraseña se almacena realmente en un formulario con hash, primero necesitamos obtener el hash con la ayuda del nombre de usuario proporcionado. Una vez que tenemos el hash, podemos utilizar la función password_verify() para comparar la contraseña y el hash.
Una vez que hayamos confirmado correctamente la contraseña, establecemos la variable $_SESSION['user_id'] en el ID de ese usuario en la base de datos. También puedes establecer el valor de otras variables aquí.
Restringiendo el acceso a las páginas
La mayoría de los sitios web donde se solicita a los usuarios registrarse tienen algunas otras páginas donde los usuarios acceden y almacenan datos privados. Puedes utilizar variables de sesión para proteger estas páginas. Si no se establece la variable de sesión, simplemente se redirige a los usuarios a la página de inicio de sesión. De lo contrario, se les muestra el contenido de la página.
1 |
<?php
|
2 |
session_start(); |
3 |
|
4 |
if(!isset($_SESSION['user_id'])){ |
5 |
header('Location: login.php'); |
6 |
exit; |
7 |
} else { |
8 |
// Show users the page!
|
9 |
}
|
10 |
?>
|
Lo único que tienes que hacer es asegurarte de que el script contiene session_start() al principio.
Pensamientos finales
En este tutorial, aprendimos cómo crear un sistema de registro de usuario básico y de inicio de sesión usando PHP. Una vez que hayas comprendido los fundamentos de los sistemas de inicio de sesión y registro, puedes crear una lógica más complicada que permita a los usuarios restablecer su contraseña, verificar su dirección de correo electrónico, etc.
También puedes agregar más validación de front-end con atributos de HTML5 o jQuery para hacer que el formulario sea más fácil de usar.
- HTML5Validación de entrada de formulario utilizando solo HTML5 y Regex
- JavaScriptValidación fácil de formularios con jQuery
Si deseas acelerar tu desarrollo web, puedes ver algunos de los scripts de formularios PHP premium disponibles en CodeCanyon.
- PHPLos 20 mejores formularios PHP de correo electrónico
- PHPLos 12 mejores scripts PHP de formularios de contacto
- PHPComparando los 5 mejores creadores de formularios PHP
- PHP15 útiles formularios de inicio de sesión PHP en CodeCanyon
Si tienes alguna pregunta relacionada con esta publicación, por favor, hazmelo saber en los comentarios.
By
