HeyTuts

Cuando se trata de crear sitios web para el mundo real, tener un formulario de registro simple para es vital. El Internet está prácticamente construido en sitios web de miembros. Así que como parte de mi serie de tutoriales del sistema de miembros de php, crearemos un sencillo formulario de registro en php.

Bastante rápido y fácil de escribir desde cero, este sencillo formulario de registro le permitirá a cualquier usuario registrarse con solo un nombre de usuario, correo electrónico y contraseña, pero puede agregar fácilmente un correo electrónico si lo desea.

Para una visión general muy simple del código fuente de nuestra página de registro php es esta: 

<?php // connect to the database // check for a user being logged in // process the registration form data ?> <html> display a header display the error message (if there is one) display the registration form </html>

Cómo Hacer un Formulario de Registro Simple en php

  1. Crear la base de datos para el formulario de registro
  2. Hacer el formulario de registro simple en HTML/CSS
  3. Conectarse a la base de datos MySQL utilizando php
  4. Procesar la entrada del formulario de registro
  5. Agregar nuevas cuentas de usuario a la base de datos

Paso 1: Crear la base de datos para el formulario de registro

Muchas veces, el primer paso para crear un sitio web es crear la base de datos. Y claro, es probable que tenga que hacer cambios en su base de datos más adelante. Pero configurar su base de datos primero, le dará un gran punto de partida

Crearemos una base de datos simple para almacenar toda la información de la cuenta del usuario, incluidos su nombre de usuario y contraseña. Siga adelante e inicie sesión en su panel de control phpMyAdmin en su servidor. (si es nuevo en phpMyAdmin, consulte mi artículo de introducción a phpMyAdmin)

Campos de base de datos para nuestro sistema de membresía php

Cada base de datos necesita un nombre, y como me gusta mantener la vida simple, llamemos a nuestra base de datos «usuarios».

NOTA: Asumo que ya tiene al menos una comprensión básica de cómo usar phpMyAdmin y cómo funcionan las bases de datos MySQL. Si no es así, puede leer los conceptos básicos de phpMyAdmin o el funcionamiento de la base de datos MySQL aquí mismo en HeyTuts.com. (estos enlaces se abrirán en nuevas pestañas)

Dado que estamos haciendo un formulario de registro simple, solo necesitaremos 7 campos en nuestra base de datos. De esta manera obtenemos suficiente funcionalidad básica de inmediato. Pero aún así puede agregar características adicionales como un formulario de restablecimiento de contraseña.

  1. id – este será un identificador único para cada usuario. Necesitamos asegurarnos de que el campo id sea un entero y se establezca en incremento automático con una clave primaria. ¡Esto es imprescindible!!! Cuando se avanza a sistemas de miembros más complejos, el uso del ID de cuenta del usuario hace que sea muy sencillo vincular los registros de la base de datos.
  2. nombre de usuario: debe explicarse por sí mismo. Puse el mío en un varchar de 50 caracteres. Muy rara vez los usuarios querrán un nombre de usuario de más de 10-15 caracteres, por lo que 50 deberían encargarse de él. Pero esto también le dará la capacidad de establecer la longitud de su nombre de usuario deseado en su código php.
  3. correo electrónico: la dirección de correo electrónico del usuario. Póngale un varchar de 100 caracteres.
  4. contraseña: usaremos un cifrado básico para las contraseñas de nuestros usuarios. Así que un varchar de 50 caracteres estará bien. Más adelante, nos verás usar la función md5 () para crear un hash de contraseña básico para una seguridad simple.
  5. date_created-esto almacenará un valor time () de cuando el usuario creó su cuenta.
  6. last_login – podemos rastrear la última vez que el usuario se conectó actualizando este registro aquí. De nuevo será de la función time ().estado
  7. : realiza un seguimiento del estado de activación de la cuenta. Podemos verificar este valor para ver si el usuario ha activado su cuenta o no, y en función de eso, dejar que inicie sesión o darles un aviso para activar su cuenta.

Paso 2: Haga el formulario de registro simple en HTML / CSS

Con la configuración de la base de datos, podemos crear el formulario de registro real que el usuario utilizará para crear su cuenta. Como casi todos los formularios de sitios web, lo haremos con HTML y CSS.

Crear un registro.archivo php en su servidor web

Voy a llamar a mi página de formulario de registro register.php, así que adelante y cree este archivo en su servidor web. Recomiendo hacer todo este sistema de miembros en su servidor web de host local con XAMPP (enlace externo).

Crear un encabezado de navegación básico

El encabezado para este tutorial del sistema miembro php también será simple. Con algunos enlaces solo para una navegación súper básica. A continuación se muestra la configuración básica de la página para nuestro registro.archivo php.

<html> <head> <title>php member system | registration form</title> </head> <body> <h1>member system tutorial - register</h1> <a href="./index.php">Home</a> | <a href="./register.php">Register</a> | <a href="./login.php">Login</a> <hr /> <!-- error message code here --> <!-- registration form html code here --> </body></html>

Crear el formulario de registro real

Ahora podemos crear el formulario que el usuario va a ver e interactuar con él. Si recuerda la configuración de nuestra base de datos, solo tenemos 3 campos que el usuario puede ingresar: el nombre de usuario, la contraseña y la dirección de correo electrónico. No olvide agregar texto para mostrar etiquetas para las que se requieren campos.

Como buena práctica, me gusta agregar un campo de contraseña adicional para que el usuario confirme su contraseña. Y asegúrese de decirle a los usuarios la fuerza de la contraseña requerida.

Odio cuando el sitio web requiere ciertos requisitos de contraseña, ¡pero no te diga esos requisitos! Idiota.

Para obtener una contraseña segura para la cuenta del usuario, necesitaremos al menos 5 caracteres de longitud. Con al menos un carácter especial de uno de estos: !#$.,:;(). Esto no le dará al uso la contraseña más segura, pero le dará una idea de cómo forzar contraseñas más fuertes para su posterior. 

<form action="./register.php" class="form" method="POST"><h1>create a new account</h1><div class=""><?php// check to see if the user successfully created an accountif (isset($success) && $success == true){echo '<p color="green">Yay!! Your account has been created. <a href="./login.php">Click here</a> to login!<p>';}// check to see if the error message is set, if so display itelse if (isset($error_msg))echo '<p color="red">'.$error_msg.'</p>';?></div><div class=""><input type="text" name="username" value="" placeholder="enter a username" autocomplete="off" required /></div><div class=""><input type="text" name="email" value="" placeholder="provide an email" autocomplete="off" required /></div><div class=""><input type="password" name="passwd" value="" placeholder="enter a password" autocomplete="off" required /></div><div class=""><p>password must be at least 5 characters and<br /> have a special character, e.g. !#$.,:;()</font></p></div><div class=""><input type="password" name="confirm_password" value="" placeholder="confirm your password" autocomplete="off" required /></div><div class=""><input class="" type="submit" name="registerBtn" value="create account" /></div><p class="center"><br />Already have an account? <a href="<?php echo SITE_ADDR ?>/login">Login here</a></p></form>

Si te das cuenta, estoy poniendo nuestro formulario de registro en una tabla simple solo para alinear todo bien para el usuario. Lo importante a tener en cuenta aquí es la acción del formulario (también conocida como POST), los nombres de los cuadros de texto y el nombre del botón enviar.

sistema de miembros php - 2 formulario de registro php formulario de registro de usuario

Todos estos nombres de campo son cruciales en el script de fondo para recuperar los datos después de que el usuario envíe el formulario. También tenga en cuenta el método de formulario, POST, que ocultará los datos del formulario del usuario en lugar de enviarlos a la url como GET will.

Mostrar un mensaje de error, cuando sea necesario

En la página de registro, usted y su usuario encontrarán útil mostrar un mensaje de error. Cuando sea necesario. Lo pondré debajo de la navegación y encima del formulario de registro. Este mensaje le dará al usuario una idea de lo que hizo mal y necesita corregir antes de que pueda crear su cuenta.

Básicamente lo que voy a hacer es crear dos variables, una llamada success success y er error_msg. Haremos una simple comprobación de estas dos variables que se están configurando. En función de si están configurados (es decir, creados y asignados a un valor), mostramos el mensaje de error correspondiente. 

<?php // check to see if the user successfully created an account if (isset($success) && $success == true){ echo '<font color="green">Yay!! Your account has been created. <a href="./login.php">Click here</a> to login!<font>'; } // check to see if the error message is set, if so display it else if (isset($error_msg)) echo '<font color="red">'.$error_msg.'</font>'; else echo ''; // do nothing?>

La idea es que si hay un error al procesar los datos, podemos establecer el mensaje de error en la variable er error_msg, y luego se mostrará al usuario y procesaremos la información. Si el usuario crea correctamente su cuenta, estableceremos true success en true y mostraremos un mensaje de éxito en verde (porque el verde siempre es bueno, ¿tengo razón??).

Paso 3: Conéctese a la base de datos MySQL utilizando php

Ahora podemos acceder a parte del código php de back-end. Antes de que podamos realizar cualquier operación de base de datos MySQL, necesita conectarse a la base de datos. La mayoría de los sitios web se conectan a la base de datos en una configuración o script de conexión separados. Así que haremos lo mismo.

Crear un nuevo script php llamado connect.php y guardarlo en el mismo directorio que el registro.archivo php.

<?php $conn = mysqli_connect("localhost", "root", "password", "code_projects");?>

Paso 4: Procese la entrada del formulario de registro

Ahora hasta la carne y las papas de este sencillo formulario de registro. El código php para procesar el formulario después del envío.

Dado que ya hemos creado nuestro script de conexión de base de datos, podemos usar la función require_once() para cargar el script de conexión. 

<?php // include our connect script require_once("connect.php"); // check to see if there is a user already logged in, if so redirect them session_start(); if (isset($_SESSION) && isset($_SESSION)) header("Location: ./index.php"); // redirect the user to the home page?>

Luego, usando sesiones php, rastrearemos si los usuarios han iniciado sesión o no. Por ahora solo comprobaremos si las variables de sesión están configuradas. Veremos cómo configurar las variables de sesión en el tutorial del formulario de inicio de sesión. Si el usuario ha iniciado sesión, lo redirigiremos a la página de inicio.

Obtener todos los datos del formulario de registro

Una vez que estemos listos para obtener todos los datos del formulario, primero verificamos si el botón enviar fue clic (también conocido como el formulario fue enviado). Si lo fue, almacenamos todos los datos del formulario en variables. Si el formulario no se envió, no hacemos nada, excepto mostrar el formulario al usuario.

Dado que estamos utilizando un tipo de formulario de PUBLICACIÓN, necesitamos obtener los datos de PUBLICACIÓN utilizando nuestro código php. Todos los datos «publicados» del formulario estarán en la variable de matriz $_POST. A continuación, puede utilizar el nombre del elemento de formulario como claves de matriz. Lo que nos permite obtener los datos específicos que está buscando, como este:

if (isset($_POST)){ // get all of the form data $username = $_POST; $email = $_POST; $passwd = $_POST; $passwd_again = $_POST; // next code block }

Realizar comprobaciones básicas en los datos del formulario

A continuación comprobamos si el usuario completó el formulario de registro. Comprobación de la dirección de correo electrónico, el nombre de usuario y las contraseñas. Si nos aseguramos de que cada variable no sea una cadena vacía, entonces eso significa que hay algo de texto ahí, ¿verdad?

Luego verificamos que la contraseña y la contraseña de confirmación sean exactamente el mismo texto. Gorras y todo. Al usar tres signos iguales en una fila (es decir,===) en nuestra instrucción if, las cadenas coinciden con mayúsculas y minúsculas.

Básicamente, si comparamos «hola » con» Hola » usando dos signos iguales, entonces obtendrás un resultado verdadero. Esto se debe a que nuestro código dice «sí, hola y hola son la misma palabra». Pero si los comparamos usando tres signos iguales, nuestro código es como » ¡NO! Alto ahí. Esas palabras no coinciden. Gran ol’ falso!»¿Tiene sentido? 

// verify all the required form data was enteredif ($username != "" && $passwd != "" && $passwd_again != ""){ // make sure the two passwords match if ($passwd === $passwd_again){ // make sure the password meets the min strength requirements if ( strlen($passwd) >= 5 && strpbrk($passwd, "!#$.,:;()") != false ){ // next code block } else $error_msg = 'Your password is not strong enough. Please use another.'; } else $error_msg = 'Your passwords did not match.';}else $error_msg = 'Please fill out all required fields.';

A continuación, podemos asegurarnos de que las contraseñas cumplan con nuestros requisitos de resistencia. Nuestros criterios tan impresionantes para una contraseña segura. Al menos 5 caracteres de longitud y utilizando al menos un carácter especial.

Usando strlen () nos aseguramos de que sea lo suficientemente larga como para cumplir con nuestro mínimo de 5 caracteres. Sencillo. Luego, usando la función strpbrk (), podemos comprobar si alguno de los caracteres especiales de la lista está presente. Esta función devolverá false si ninguno de los caracteres especiales está presente. Devolverá una cadena si hay alguna presente.

Puede leer más sobre la función en el php.net referencia. Básicamente, es una forma súper rápida y fácil de verificar una lista de caracteres especiales existentes en una cadena. Porque aparte de existir, en realidad no nos importan.

Paso 5: Agregue nuevas cuentas de usuario a la base de datos

Ahora que sabemos que todos los datos de nuestro formulario están buenos y listos para usar, podemos comenzar a hacer algunas comprobaciones de la base de datos. Primero comprobamos si el nombre de usuario ya está en la base de datos. Si se devuelve cero registros, el nombre de usuario no está en la base de datos. Si se devuelve algo más, el nombre de usuario se toma.

A continuación, necesitamos crear algunas variables adicionales para almacenar algunos de los otros datos aleatorios que necesitamos almacenar en el registro de la base de datos para la cuenta de usuario que estamos a punto de crear. Debajo de este bloque de código hay una explicación de cada una de las variables.

DESCARGO DE RESPONSABILIDAD: Quiero señalar que para el propósito de este tutorial no estamos utilizando un cifrado de contraseña muy complejo. Simplemente lo estoy haciendo por el efecto de no almacenar la contraseña en texto plano (nunca lo hagas, simplemente es malo). Si quieres aprender a hacer algo más sustancial y seguro, consulta nuestro tutorial de seguridad de contraseñas. Entro en detalles sobre diferentes métodos para crear y almacenar contraseñas más seguras utilizando php. 

// query the database to see if the username is taken$query = mysqli_query($conn, "SELECT * FROM users WHERE username='{$username}'");if (mysqli_num_rows($query) == 0){ // create and format some variables for the database $id = ''; $passwd = md5($passwd); $date_created = time(); $last_login = 0; $status = 1; // next code block}else $error_msg = 'The username <i>'.$username.'</i> is already taken. Please use another.';

  • $id-necesitamos un lugar para el id de incremento automático que la base de datos asignará.
  • pass passwd – estamos agregando un cifrado básico a la contraseña del usuario usando el hash md5 ()
  • dat date_created – usando la función time() podemos obtener una marca de tiempo en el momento exacto en que el usuario crea su cuenta. Podemos usar esto más tarde para mostrar usando date()
  • l last_login-más tarde usaremos esto para rastrear cuando el usuario inicia sesión. Lo pondremos a cero porque aún no han iniciado sesión.
  • status estado: al usar este campo, podemos rastrear el estado de las cuentas, como activarlo por correo electrónico o deshabilitarlo para fines administrativos, o realmente lo que flota su barco. Voy a establecer 1 (uno) de forma predeterminada, lo que significa una cuenta activa y puedo iniciar sesión de inmediato.

Una vez que agreguemos la función de activación de correo electrónico a nuestro sistema de miembros, el estado de la cuenta realmente entrará en juego.

Ahora finalmente podemos crear el registro de base de datos para la cuenta del usuario. Usando una consulta de INSERCIÓN, podemos enumerar cuidadosamente toda la información de los registros de nuestra base de datos.

Si necesita ayuda para comprender los conceptos básicos de cómo funcionan las consultas. O incluso operaciones generales de base de datos, consulte mi otro tutorial sobre operaciones de base de datos MySQLi.

Después de INSERTAR el registro, como una buena práctica, me aseguraré de que el registro se haya agregado realmente (porque nunca se sabe, podría haber habido algún tipo de error.) Desde antes nos asegurábamos de que el nombre de usuario NO existía, ahora si comprobamos si existe y encontramos un registro con él asignado sabemos que nuestra nueva cuenta fue creada en la base de datos. Por último, simplemente establecemos nuestra variable $success en true porque el usuario completó su registro y se creó su cuenta. 

// insert the user into the databasemysqli_query($conn, "INSERT INTO users VALUES ( '{$id}', '{$username}', '{$email}', '{$passwd}', '{$date_created}', '{$last_login}', '{$status}')");// verify the user's account was created$query = mysqli_query($conn, "SELECT * FROM users WHERE username='{$username}'");if (mysqli_num_rows($query) == 1){ /* IF WE ARE HERE THEN THE ACCOUNT WAS CREATED! YAY! */ /* WE WILL SEND EMAIL ACTIVATION CODE HERE LATER */ $success = true;}else $error_msg = 'An error occurred and your account was not created.';

Retoques finales para nuestro formulario de inscripción

Ahora con todo nuestro registro.código php escrito, podemos verlo desde el navegador web. ¡Incluso puedes probarlo y crear tu propia cuenta en tu nueva página de registro!

Con nuestro sencillo formulario de registro creado, la siguiente parte de un sistema miembro php es crear el formulario de inicio de sesión. porque ¿de qué sirve tener un formulario de registro para crear una cuenta si los usuarios no pueden iniciar sesión en su cuenta?

Carga similar…

Leave a Reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada.