Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Crear un formulario PHP de inicio de sesión

by
Difficulty:IntermediateLength:MediumLanguages:

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.

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.

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.

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.

Dando estilo a los formularios con CSS

Aquí hay un poco de CSS que puedes aplicar a estos formularios:

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.

Ahora, crea un archivo llamado config.php y escribe el siguiente código en este para conectarse a la base de datos.

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.

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.

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.

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.

Si deseas acelerar tu desarrollo web, puedes ver algunos de los scripts de formularios PHP premium disponibles en CodeCanyon.

Si tienes alguna pregunta relacionada con esta publicación, por favor, hazmelo saber en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.