hogar /
Multimedia/ Formulario de registro de Jquery. Registro paso a paso de JQuery
Formulario de registro de jquery. Registro paso a paso de JQuery
En línea Gorjeo Puede ver que la página funciona con un diseño limpio y simple. Mire en la parte superior derecha de la página, allí verá un botón autorización al sistema haciendo clic en el que verá forma para completar los datos. Hoy te diremos cómo lograr un efecto similar en tu propio sitio web. De hecho, es muy simple. Además, le ayudará a ahorrar espacio en la página y agregará una sensación de comodidad a sus visitantes. En este artículo, lo guiaremos a través de los pasos de cómo funciona todo este sistema, y esta guía también será útil para aquellos que deseen aprender jQuery... ¡Hacia adelante!
Código HTML
Primero, debe comenzar con el código HTML. El código HTML es muy simple: contiene la etiqueta "a", que va junto con la etiqueta "fieldset", a través de la cual se muestra el formulario.
Simplemente copie esto en su nuevo código de página:
¿Tener una cuenta? Registrarse
Código CSS
Deberá utilizar CSS para definir el botón de inicio de sesión y el formulario de inicio de sesión. El siguiente código hace exactamente esa función.
Simplemente copie este código en su archivo css o agréguelo al código HTML donde define el estilo. Estos códigos identifican el botón de autorización.
Parecería que los códigos HTML y CSS son bastante complejos y enrevesados, pero en javascript todo es muy simple. Simplemente copie este código javascript, por lo que será posible mostrar y ocultar el formulario en el momento de hacer clic en el botón de autorización, incluso si el clic se realiza fuera del formulario de inicio de sesión.
Según el código anterior, cuando un visitante hace clic en el botón de autorización, se activa una nueva función. Primero, se muestra el formulario de inicio de sesión (incluido en la etiqueta "fileset"), luego el enlace incluido en la clase ".signin" agrega otra clase de "menú abierto", que cambia la imagen de fondo.
Otro evento en este código es que cuando los visitantes hacen clic no en el formulario de inicio de sesión, sino en algún lugar de la página, el formulario se cierra. En otras palabras, la clase "menú abierto" elimina el enlace con la clase ".signin" y le devuelve la imagen de fondo original.
¿En cuanto a pistas?
Por lo general, recomendamos usar Complemento jQuery - tipsy... El contenido de la información sobre herramientas es lo que está escrito en el atributo "título" del enlace. Puede cambiar la posición de la información sobre herramientas con respecto al este, oeste, sur o norte. Esto se hace mediante el parámetro "gravedad" especificado en el código anterior. Le proporcionamos un enlace a un sitio dedicado a este complemento, donde puede estudiar sus capacidades con más detalle y descargar el complemento. ...
Finalmente
Si ha copiado todo el código de este artículo, no cambie la estructura de la carpeta. Si lo cambia, el código no funcionará. Este código es solo un ejemplo de creación formulario de inicio de sesión desplegable usando jQuery... ¡Buena suerte con tu práctica!
En este tutorial, crearemos un formulario de inicio de sesión elegante en el sitio, puede encontrarlo en Futurico UI Pro, creado por Vladimir Kudinov. Usaremos CSS3 y jQuery para crear el formulario.
Paso 1: marcado HTML
Comencemos por crear marcado HTML. Creemos un formulario con cuatro entradas (nombre de usuario, contraseña, casilla de verificación y botón "enviar"). Envolveremos la casilla de verificación en una etiqueta de intervalo que usaremos para darle estilo a esta casilla de verificación. A continuación, envolveremos el formulario y el título en una etiqueta DIV y le asignaremos la clase "formulario de inicio de sesión".
// Compruebe si JavaScript está habilitado
$("cuerpo")
.addClass("js")
;
// Hacer que la casilla de verificación esté marcada al cargar
$("intervalo de formulario de inicio de sesión")
.addClass("comprobado")
.niños("aporte")
.attr("comprobado",
cierto)
;
// Función de clic
$("intervalo de formulario de inicio de sesión")
.sobre("hacer clic",
función()
{
Primero, agregaremos la clase "js" a la etiqueta del cuerpo.
Si tiene alguna pregunta, le recomendamos que utilice nuestro foro para obtener una respuesta lo antes posible.
Responsive con las funciones de login y formularios de registro, con posibilidad de conmutación dinámica, sin recargar la página. Después de que aparezca la ventana, el usuario puede cambiar fácilmente de uno a otro y, si es necesario, seleccionar la opción para cambiar la contraseña. Hoy veremos cómo se puede implementar todo esto usando un montón de plugin jQuery pequeño pero muy funcional y los nuevos estándares CSS3.
Este método será útil si desea que los formularios de inicio de sesión y registro estén disponibles para los usuarios en todas las páginas de su sitio. Al ingresar al sitio o registrarse, los usuarios no serán redirigidos a otra página, y podrán realizar todas las acciones necesarias "sin salir del checkout", todo en una sola página.
El diseño de la apariencia de los formularios emergentes se implementa mediante CSS3, el peso total del complemento no es para nada grande, la respuesta y carga de la ventana modal se produce prácticamente sin demoras. El diseño 100% sensible, la altura y el ancho del modal con formularios se configuran automáticamente para adaptarse a los tamaños de pantalla de los dispositivos del usuario.
Vimos un ejemplo, ahora echemos un vistazo a todos los componentes principales de una ventana modal y formularios para aprender a usarlos en nuestro sitio web. La ventana emergente con formularios de inicio de sesión y registro se basa en la popular biblioteca de JavaScript, el ejecutable del complemento jQuey y los estilos CSS generados. Todas estas herramientas deben estar conectadas a su sitio. La última versión actualizada de la biblioteca jQuey se puede conectar directamente desde Google, el archivo del complemento main.js en sí y un conjunto listo de estilos generados, style.css, se puede encontrar en el archivo. Javascript antes de la etiqueta de cierre, los estilos CSS se pueden copiar y agregar al archivo stylesheet.css de su sitio.
Estructura HTML:
El contenedor básico de ventanas modales sobre un fondo oscuro y formularios integrados con controles se colocan en el cuerpo de la página. Para una mejor comprensión, delimité los sectores y agregué comentarios. Todos los elementos de diseño están estrechamente vinculados a CSS a través de clases específicas, por lo que rediseñar los formularios para que se adapten al diseño general de sus sitios es fácil.
<
div class
=
"cd-user-modal"
>
<
div class
=
"cd-user-modal-container"
>
<
ul class
=
"cd-switcher"
>
<
li><
a href=
"#0"
>Entrada
<
li><
a href=
"#0"
>registro
<
div id=
"cd-login"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signin-email"
>Correo electrónico
<
input class
=
id=
"signin-email"
type=
"email"
placeholder=
"Correo electrónico"
>
<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signin-password"
>Contraseña
<
input class
=
"has-padding de ancho completo tiene-borde" id = "signin-password" type = "text" placeholder = "(! LANG: Contraseña"
>
!}<
a href=
"#0"
class
=
"hide-password"
>Esconder
<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"remember-me"
checked>
<
label for
=
"remember-me"
>Recuérdame
<
p class
=
"fieldset"
>
<
input class
=
"full-width"
type=
"submit"
value=
"Entrar"
>
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>¿Olvidaste tu contraseña?
<
div id=
"cd-signup"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-username"
for
=
"signup-username"
>Nombre de usuario
<
input class
=
"has-padding de ancho completo tiene-borde" id = "signup-username" type = "text" placeholder = "Nombre de usuario">
<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signup-email"
>Correo electrónico
<
input class
=
"has-padding de ancho completo tiene-borde" id = "signup-email" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signup-password"
>Contraseña
<
input class
=
"has-padding de ancho completo tiene-borde" id = "signup-password" type = "text" placeholder = "(! LANG: Contraseña"
>
!}<
a href=
"#0"
class
=
"hide-password"
>Esconder
<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"accept-terms"
>
<
label for
=
"accept-terms"
>estoy de acuerdo con<
a href=
"#0"
>Condiciones
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"Crea una cuenta">
<
div id=
"cd-reset-password"
>
<
p class
=
"cd-form-message"
>¿Olvidaste tu contraseña? Por favor, introduzca su dirección de correo electrónico. Recibirá un enlace para crear una nueva contraseña.
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"reset-email"
>Correo electrónico
<
input class
=
"has-padding de ancho completo tiene-borde" id = "reset-email" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>¡Aquí está el mensaje de error!
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"Restaurar contraseña">
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>Volver a la entrada
<
a href=
"#0"
class
=
"cd-close-form"
>Cerrar
Entrada
registro
¿Olvidaste tu contraseña?
¿Olvidaste tu contraseña? Por favor, introduzca su dirección de correo electrónico. Recibirá un enlace para crear una nueva contraseña.
Volver a la entrada
Cerrar
Estilos CSS:
La plantilla básica y los controles de formulario están diseñados en el popular estilo Flat, con un claro énfasis en el minimalismo. Nada superfluo, fondo de sombreado moderadamente transparente, colores fáciles de leer, fuente e íconos bien elegidos para indicar campos de entrada. Con las propiedades de CSS, puede modificar fácilmente cualquier elemento de formulario.
En el efecto de transición de desvanecimiento, se agregó un retraso para hacer que el modo se desvanezca al cerrar.
Nota:. El tamaño de fuente predeterminado de todos los campos de entrada es 16px. Esto evita el escalado automático que se produce cuando se visualiza en dispositivos móviles.
Se encuentra la versión burguesa del autor del complemento. En el mismo lugar, puede descargar el original. La versión rusa, puede recogerla de mi Yandex.Disk, todos los archivos necesarios están cuidadosamente empaquetados en un solo archivo, antes de eso, no olvide mirar el ejemplo en vivo totalmente adaptado del trabajo de este maravilloso complemento jQuery:
Con todo respeto, Andrew
En este artículo, aprenderá cómo crear un formulario de registro y autorización utilizando HTML, JavaScript, PHP y MySql. Estos formularios se utilizan en casi todos los sitios, independientemente de su tipo. Se crean tanto para el foro como para la tienda online y las redes sociales (como, por ejemplo, Facebook, Twiter, Odnoklassniki) y para muchos otros tipos de sitios.
Si tiene un sitio en su computadora local, espero que ya lo tenga. Nada funcionará sin él.
Crear una tabla en la base de datos
Para implementar el registro de usuario, en primer lugar, necesitamos una base de datos. Si ya lo tiene, genial, de lo contrario, debe crearlo. En este artículo, explico en detalle cómo hacer esto.
Y entonces, tenemos una base de datos (abreviada como base de datos), ahora necesitamos crear una tabla usuarios en el que agregaremos nuestros usuarios registrados.
También expliqué cómo crear una tabla en una base de datos en el artículo. Antes de crear una tabla, necesitamos definir qué campos contendrá. Estos campos corresponderán a los campos del formulario de registro.
Entonces, pensamos, imaginamos qué campos tendrá nuestro formulario y creamos una tabla usuarios con campos como este:
identificación- Identificador. Campo identificación todas las tablas de la base de datos deberían tener.
primer nombre- Para guardar el nombre.
apellido- Para guardar apellidos.
Email- Guardar la dirección postal. Usaremos el correo electrónico como inicio de sesión, por lo que este campo debe ser único, es decir, debe tener un índice ÚNICO.
email_status- Campo para indicar si el correo está confirmado o no. Si el correo es confirmado, tendrá el valor 1, en caso contrario el valor 0. Por defecto, este campo tendrá el valor 0.
contraseña- Para guardar la contraseña.
Todos los campos de tipo "VARCHAR" deben tener un valor predeterminado de NULL.
Si desea que su formulario de registro tenga más campos, también puede agregarlos aquí.
Todo, nuestra mesa usuarios Listo. Pasemos al siguiente paso.
Conexión de base de datos
Hemos creado la base de datos, ahora necesitamos conectarnos a ella. Nos conectaremos usando la extensión PHP MySQLi.
En la carpeta de nuestro sitio, cree un archivo llamado dbconnect.php, y en él escribimos el siguiente script:
Error de conexión a la base de datos... Descripción del error: ".mysqli_connect_error ()".
"; exit ();) // Establecer la codificación de la conexión $ mysqli-> set_charset (" utf8 "); // Para mayor comodidad, agreguemos aquí una variable que contendrá el nombre de nuestro sitio $ address_site =" http: // testite.local ";?>
Este archivo dbconnect.php necesitará estar conectado para formar controladores.
Presta atención a la variable $ address_site, aquí indiqué el nombre de mi sitio de prueba en el que trabajaré. Usted, respectivamente, indica el nombre de su sitio.
Estructura del sitio
Ahora echemos un vistazo a la estructura HTML de nuestro sitio.
Moviremos el encabezado y pie de página del sitio a archivos separados, header.php y footer.php... Los incluiremos en todas las páginas. Es decir, en el principal (archivo index.php), a la página con el formulario de registro (archivo form_register.php) y a la página con el formulario de autorización (archivo form_auth.php).
Bloquear con nuestros enlaces, registro y autorización, agréguelo al encabezado del sitio para que se muestren en todas las páginas. Un enlace entrará en página del formulario de registro(expediente form_register.php) y el otro a la página con formulario de autorización(expediente form_auth.php).
Contenido del archivo header.php:
Nombre de nuestro sitio
Como resultado, la página principal se ve así:
Por supuesto, su sitio puede tener una estructura completamente diferente, pero esto no es importante para nosotros ahora. Lo principal es que existen enlaces (botones) para el registro y la autorización.
Ahora pasemos al formulario de registro. Como ya entendiste, lo tenemos en el archivo. form_register.php.
Vaya a la Base de datos (en phpMyAdmin), abra la estructura de la tabla usuarios y ver qué campos necesitamos. Esto significa que necesitamos campos para ingresar un nombre y apellido, un campo para ingresar una dirección postal (correo electrónico) y un campo para ingresar una contraseña. Y por motivos de seguridad, agregaremos un campo para ingresar captcha.
En el servidor, como resultado del procesamiento del formulario de registro, pueden ocurrir varios errores, por lo que el usuario no podrá registrarse. Por lo tanto, para que el usuario comprenda por qué falla el registro, es necesario mostrar mensajes sobre estos errores.
Antes de mostrar el formulario, agregue un bloque para mostrar los mensajes de error de la sesión.
Y una cosa más, si el usuario ya está autorizado, y por el bien de su interés ingresa directamente a la página de registro escribiendo en la barra de direcciones del navegador site_address / form_register.php, entonces en este caso, en lugar del formulario de registro, le mostraremos un título indicando que ya se ha registrado.
En general, el código de archivo form_register.php lo tenemos así:
Ya está registrado
En el navegador, la página con el formulario de registro se ve así:
Mediante el uso atributo requerido, hemos hecho que todos los campos sean obligatorios.
Preste atención al código del formulario de registro donde se muestra captcha:
Especificamos la ruta al archivo en el valor del atributo src para la imagen. captcha.php que genera este captcha.
Veamos el código del archivo. captcha.php:
El código está bien comentado, por lo que me centraré en un solo punto.
Dentro de la función imageTtfText (), se especifica la ruta a la fuente verdana.ttf... Entonces, para que el captcha funcione correctamente, debemos crear una carpeta fuentes y coloque el archivo de fuente allí verdana.ttf... Puede encontrarlo y descargarlo de Internet, o tomarlo del archivo con los materiales de este artículo.
Hemos terminado con la estructura HTML, es hora de seguir adelante.
Verificando la validez del correo electrónico con jQuery
Cualquier formulario debe verificar la validez de los datos ingresados, tanto en el lado del cliente (usando JavaScript, jQuery) como en el lado del servidor.
Debemos prestar especial atención al campo Correo electrónico. Es muy importante que la dirección postal ingresada sea válida.
Para este campo de entrada, configuramos el tipo de correo electrónico (type = "email"), esto nos advierte levemente contra formatos incorrectos. Pero esto no es suficiente, porque a través del inspector de código que nos proporciona el navegador, puedes cambiar fácilmente el valor del atributo escribe con Email sobre texto y listo, nuestro cheque ya no será válido.
Y en ese caso, necesitamos hacer una verificación más confiable. Para ello, usaremos la biblioteca jQuery de JavaScript.
Para conectar la biblioteca jQuery, en el archivo header.php entre etiquetas , antes de la etiqueta de cierre , agregue esta línea:
Inmediatamente después de esta línea, agregue el código de verificación de validación del correo electrónico. Aquí agregamos un código para verificar la longitud de la contraseña ingresada. Su longitud debe ser de al menos 6 caracteres.
Con la ayuda de este script, verificamos la validez de la dirección de correo electrónico ingresada. Si el usuario ingresó un correo electrónico incorrecto, entonces le mostramos un error al respecto y desactivamos el botón para enviar el formulario. Si todo está bien, eliminamos el error y activamos el botón para enviar el formulario.
Y así, hemos terminado con la validación del formulario en el lado del cliente. Ahora podemos enviarlo al servidor, donde también haremos un par de comprobaciones y añadiremos los datos a la base de datos.
Registro de usuario
Enviamos el formulario para su procesamiento al archivo. register.php, a través del método POST. El nombre de este archivo de controlador, especificado en el valor del atributo acción... Y el método de envío se especifica en el valor del atributo método.
Abre este archivo register.php y lo primero que debemos hacer es escribir una función para iniciar una sesión y conectar el archivo que creamos anteriormente dbconnect.php(En este archivo, hicimos una conexión a la base de datos). Y sin embargo, declaremos inmediatamente las celdas error de mensajes y Success_messages en la matriz global de la sesión. V mensajes_error registraremos todos los mensajes de error que se produzcan durante el procesamiento del formulario, y en succes_messages, grabaremos mensajes alegres.
Antes de continuar, debemos verificar fue el formulario enviado en absoluto... Un atacante podría ver el valor de un atributo acción del formulario y averigüe qué archivo está procesando este formulario. Y puede que se le ocurra la idea de ir directamente a este archivo escribiendo la siguiente dirección en la barra de direcciones del navegador: http: //arees_site/register.php
Por lo tanto, debemos verificar la presencia de una celda en la matriz POST global, cuyo nombre coincide con el nombre de nuestro botón "Registrarse" del formulario. Por lo tanto, verificamos si se hizo clic en el botón "Registrarse" o no.
Si un atacante intenta navegar directamente a este archivo, recibirá un mensaje de error. Permítame recordarle que la variable $ address_site contiene el nombre del sitio y se declaró en el archivo dbconnect.php.
¡Error! página de inicio.
");
}
?>
El valor del captcha en la sesión se agregó cuando se generó, en el archivo captcha.php... Como recordatorio, te mostraré este fragmento de código del archivo nuevamente. captcha.php, donde el valor de captcha se agrega a la sesión:
Ahora procedamos a la verificación en sí. En archivo register.php, dentro del bloque if, donde comprobamos si se hizo clic en el botón "Registrarse", o mejor dicho, donde se especifica el comentario " // (1) Lugar para el siguiente fragmento de código"nosotros escribimos:
// Verifica el captcha resultante // Recorta los espacios desde el principio y el final de la línea $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! empty ($ captcha)) (// Compara el valor recibido con el valor de la sesión. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Si el captcha no es correcto, devolvemos al usuario a la página de registro, y allí mostraremos un mensaje de error de que ingresó el captcha incorrecto . $ mensaje_error = "
¡Error! Ingresaste el captcha incorrecto
"; // Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Regrese al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_register.php"); // Detiene el script exit ();) // (2) Lugar para el siguiente fragmento de código) else (// Si el captcha no se pasa o está vacío, exit ( "
¡Error! No hay un código de verificación, es decir, el código captcha. Puede ir a la página de inicio.
");
}
A continuación, necesitamos procesar los datos recibidos de la matriz POST. En primer lugar, debemos verificar el contenido de la matriz POST global, es decir, ¿hay celdas cuyos nombres corresponden a los nombres de los campos de entrada de nuestro formulario?
Si la celda existe, recortamos los espacios desde el principio y desde el final de la línea de esta celda; de lo contrario, redirigimos al usuario a la página con el formulario de registro.
Además, después de recortar los espacios, agregue una línea a la variable y verifique que esta variable no esté vacía, si no está vacía, continúe, de lo contrario, redirigimos al usuario a la página con el formulario de registro.
Pega este código en la ubicación especificada " // (2) Lugar para el siguiente fragmento de código".
/ * Verifica si la matriz global $ _POST contiene datos enviados desde el formulario y encierra los datos enviados en variables ordinarias. * / If (isset ($ _ POST ["first_name"])) (// Recorta los espacios desde el principio y desde el final de la cadena $ first_name = trim ($ _ POST ["first_name"]); // Compruebe si la variable está vacía if (! empty ($ first_name)) (// Por seguridad, convierta los caracteres especiales en entidades HTML $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES);) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Introduzca su nombre
Falta el campo de nombre
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["last_name"])) (// Recorta los espacios desde el principio y el final de la cadena $ last_name = trim ($ _ POST ["last_name"]); if (! empty ($ last_name )) (// Por seguridad, convierta caracteres especiales en entidades HTML $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Ingrese su apellido
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Falta el campo de apellido
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["email"])) (// Recortar espacios desde el principio y el final de la línea $ email = trim ($ _ POST ["email"]); if (! empty ($ email )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Lugar del código para verificar el formato de la dirección de correo electrónico y su singularidad) else (// Guarde el mensaje de error en la sesión. $ _SESSION [ "mensaje_error"]. = "
Introduce tu correo electrónico
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = " "; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["contraseña"])) (// Recortar espacios desde el principio y el final de la cadena $ contraseña = trim ($ _ POST ["contraseña"]); if (! empty ($ contraseña )) ($ contraseña = htmlspecialchars ($ contraseña, ENT_QUOTES); // Cifre el paprol $ contraseña = md5 ($ contraseña. "top_secret");) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages "]. ="
Ingresa tu contraseña
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = " "; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) // (4) Lugar para el código para agregar un usuario a la base de datos
De particular importancia es el campo Email... Tenemos que comprobar el formato de la dirección postal recibida y su unicidad en la base de datos. Es decir, ¿hay algún usuario ya registrado con la misma dirección postal?
En la ubicación especificada " // (3) Lugar del código para comprobar el formato de la dirección postal y su unicidad"agregue el siguiente código:
// Verifique el formato de la dirección de correo electrónico recibida usando la expresión regular $ reg_email = "/^**@(+(*+)*\.)++/i"; // Si el formato de la dirección de correo electrónico recibida no coincide con la expresión regular if (! Preg_match ($ reg_email, $ email)) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Ingresaste un correo electrónico inválido
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) // Comprobamos si ya existe dicha dirección en la base de datos. $ Result_query = $ mysqli-> query ("SELECT` email` FROM` users` WHERE` email` = "". $ Email. "" "); // Si el número de filas recibidas es exactamente uno, entonces un usuario con esta dirección de correo electrónico ya está registrado if ($ result_query-> num_rows == 1) (// Si el resultado no es falso if (($ row = $ result_query -> fetch_assoc ())! = false) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Un usuario con esta dirección de correo electrónico ya está registrado.
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php ");) else (// Guardar el mensaje de error a la sesión. $ _SESSION ["error_messages"]. = "
Error en la consulta de la base de datos
"; // Devuelve al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php ");) / * cierra la selección * / $ result_query-> close (); // Detener el script exit ();) / * cerrando la selección * / $ result_query-> close ();
Y así, hemos terminado con todas las comprobaciones, es hora de agregar el usuario a la base de datos. En la ubicación especificada " // (4) Lugar para el código para agregar un usuario a la base de datos"agregue el siguiente código:
// Solicitud para agregar un usuario a la base de datos $ result_query_insert = $ mysqli-> query ("INSERT INTO` users` (first_name, last_name, email, password) VALUES (" ". $ First_name." "," ". $ Last_name . "", "". $ correo electrónico. "", "". $ contraseña. "") "); if (! $ result_query_insert) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
No se pudo agregar un usuario a la solicitud de la base de datos
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) else ($ _SESSION ["mensajes_exitosos"] = "
Registro completado con éxito !!! Ahora puede iniciar sesión con su nombre de usuario y contraseña.
"; // Envía al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php ");) / * Completando la solicitud * / $ result_query_insert-> close (); // Cerrar la conexión de la base de datos $ mysqli-> close ();
Si ocurre un error en la solicitud para agregar un usuario a la base de datos, agregamos un mensaje sobre este error a la sesión y devolvemos al usuario a la página de registro.
De lo contrario, si todo salió bien, también agregamos un mensaje a la sesión, pero ya más agradable, es decir, le decimos al usuario que el registro fue exitoso. Y lo redireccionamos a la página con el formulario de autorización.
El script para verificar el formato de la dirección de correo electrónico y la longitud de la contraseña está en el archivo header.php, por lo que también actuará en los campos de este formulario.
La sesión también se inicia en el archivo. header.php, entonces en el archivo form_auth.php no es necesario que inicies la sesión, porque obtendremos un error.
Como dije, el script para verificar el formato de la dirección de correo electrónico y la longitud de la contraseña también funciona aquí. Por lo tanto, si el usuario ingresa una dirección de correo electrónico incorrecta o una contraseña corta, inmediatamente recibirá un mensaje de error. Y el boton entrar se volverá inactivo.
Después de eliminar los errores, el botón entrar se activa y el usuario podrá enviar el formulario al servidor donde será procesado.
Autorización de usuario
Para atribuir valor acción la autorización para discapacitados tiene un archivo auth.php, esto significa que el formulario será procesado en este archivo.
Y entonces, abre el archivo auth.php y escriba el código para procesar el formulario de autorización. Lo primero que debe hacer es iniciar una sesión y conectar el archivo. dbconnect.php para conectarse a la base de datos.
// Declare una celda para agregar errores que puedan ocurrir al procesar el formulario. $ _SESSION ["error_messages"] = ""; // Declara la celda para agregar mensajes exitosos $ _SESSION ["success_messages"] = "";
/ * Compruebe si se envió el formulario, es decir, si se hizo clic en el botón Iniciar sesión. Si es así, continúe, si no, muestre un mensaje de error al usuario indicando que fue a esta página directamente. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! empty ($ _ POST ["btn_submit_auth"])) (// (1) Espacio para el siguiente fragmento de código) else (exit ("
¡Error! Ha ingresado a esta página directamente, por lo que no hay datos que procesar. Puede ir a la página de inicio.
");
}
// Verifica el captcha resultante if (isset ($ _ POST ["captcha"])) (// Recorta los espacios desde el principio y el final de la línea $ captcha = trim ($ _ POST ["captcha"]); if (! Empty ($ captcha)) (// Compara el valor recibido con el valor de la sesión. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Si el captcha no es correcto, devolvemos al usuario a la página de autorización, y allí mostraremos un mensaje de error de que ingresó el captcha incorrecto. $ Error_message ="
¡Error! Ingresaste el captcha incorrecto
"; // Guarda el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Devuelve al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_auth.php"); // Detener el script exit ();)) else ($ error_message = "
¡Error! El campo para ingresar captcha no debe estar vacío.
"; // Guarda el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Devuelve al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_auth.php"); // Detener el script exit ();) // (2) Lugar para procesar la dirección de correo // (3) Lugar para procesar la contraseña // (4) Lugar para haciendo una consulta a la base de datos) else (// Si no se pasa captcha exit ("
¡Error! Falta el código de verificación, es decir, el código captcha. Puede ir a la página de inicio.
");
}
Si el usuario ingresó el código de verificación correctamente, entonces continúe, de lo contrario lo regresaremos a la página de autorización.
Comprobación de la dirección postal
// Recorta los espacios desde el principio y el final de la línea $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Verifica el formato de la dirección de correo electrónico recibida usando la expresión regular $ reg_email = "/^**@(+(*+)*\.)++/i"; // Si el formato de la dirección de correo electrónico recibida no coincide con la expresión regular if (! preg_match ($ reg_email, $ email)) (// Guardar en el mensaje de error de la sesión. $ _SESSION ["error_messages"]. = "
Ingresaste un correo electrónico incorrecto
"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
El campo para ingresar la dirección postal (correo electrónico) no debe estar vacío.
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Falta el campo de correo electrónico
"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ) // (3) Espacio para procesar la contraseña
Si el usuario ingresó una dirección postal en un formato incorrecto o el valor del campo de dirección postal está vacío, lo devolvemos a la página de autorización donde mostramos un mensaje al respecto.
Confirmacion de contraseña
El siguiente campo que se procesará es el campo de contraseña. A la ubicación especificada " // (3) Un lugar para procesar la contraseña", nosotros escribimos:
If (isset ($ _ POST ["contraseña"])) (// Recorta los espacios desde el principio y el final de la cadena $ contraseña = trim ($ _ POST ["contraseña"]); if (! Empty ($ contraseña )) ($ contraseña = htmlspecialchars ($ contraseña, ENT_QUOTES); // Cifre la contraseña $ contraseña = md5 ($ contraseña. "top_secret");) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages "]. ="
Ingresa tu contraseña
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
No hay campo para ingresar una contraseña
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )
Aquí, usando la función md5 (), encriptamos la contraseña recibida, ya que en la base de datos tenemos las contraseñas en forma encriptada. Una palabra secreta adicional en cifrado, en nuestro caso " ultra secreto"debe ser el que se utilizó al registrar al usuario.
Ahora necesita realizar una consulta a la base de datos en una muestra de un usuario cuya dirección de correo es igual a la dirección de correo recibida y la contraseña es igual a la contraseña recibida.
// Consulta en la base de datos sobre la selección del usuario. $ result_query_select = $ mysqli-> query ("SELECT * FROM` users` WHERE email =" ". $ email." "AND contraseña =" ". $ contraseña." ""); if (! $ result_query_select) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "
Solicitar error al recuperar el usuario de la base de datos
"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ) else (// Verificamos si no hay ningún usuario con tales datos en la base de datos, luego mostramos un mensaje de error if ($ result_query_select-> num_rows == 1) (// Si los datos ingresados coinciden con los datos de la base de datos, luego guardamos el nombre de usuario y la contraseña en la matriz de sesión. $ _SESSION ["email"] = $ email; $ _SESSION ["contraseña"] = $ contraseña; // Devuelve al usuario al encabezado de la página principal ("HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Index.php ");) else (// Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "]. ="
Nombre de usuario y / o contraseña incorrectos
"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ))
Cerrar sesión en el sitio
Y lo ultimo que hacemos es procedimiento para salir del sitio... Por el momento, el encabezado muestra enlaces a la página de autorización y a la página de registro.
En el encabezado del sitio (archivo header.php), utilizando la sesión comprobamos si el usuario ya está conectado. De lo contrario, mostramos los enlaces de registro y autorización, de lo contrario (si está autorizado), en lugar de los enlaces de registro y autorización, mostramos el enlace. Producción.
Pieza de código modificada del archivo header.php:
registro
Producción
Cuando hace clic en el enlace de salida del sitio, llegamos al archivo logout.php, donde simplemente destruimos las celdas con la dirección de correo y la contraseña de la sesión. Después de eso, devolvemos al usuario a la página en la que se hizo clic en el enlace. producción.
Código de archivo logout.php:
Eso es todo. Ahora sabes como Implementar y procesar formularios de registro y autorización. usuario en su sitio. Estos formularios se encuentran en casi todos los sitios, por lo que todo programador debe saber cómo crearlos.
También aprendimos cómo validar los datos de entrada, tanto en el lado del cliente (en el navegador, usando JavaScript, jQuery) como en el lado del servidor (usando el lenguaje PHP). También aprendimos implementar el procedimiento para salir del sitio.
Todos los scripts están probados y funcionando. Puede descargar el archivo con los archivos de este pequeño sitio en este enlace.
En el futuro escribiré un artículo donde describiré. Y también planeo escribir un artículo donde lo explicaré (sin recargar la página). Entonces, para estar al tanto del lanzamiento de nuevos artículos, puede suscribirse a mi sitio.
Si tiene alguna pregunta, comuníquese con, también, si nota algún error en el artículo, hágamelo saber.
Plan de lección (Parte 5):
Cree una estructura HTML para el formulario de inicio de sesión
Procesamos los datos recibidos
Mostramos el saludo del usuario en el encabezado del sitio.
¿Te gustó el artículo?
1. Complemento para crear formularios en línea "jFormer"
Creación de formularios de contacto: retroalimentación, comentarios, formulario de inicio de sesión, formulario de registro con verificación de la exactitud de la información ingresada.
2. Formulario de registro paso a paso usando jQuery
Una forma ordenada con relleno paso a paso. A continuación se muestra un indicador de llenado de formulario.
3. Formulario paso a paso
Cumplimentar el formulario en varios pasos y comprobar la corrección del llenado.
4. Formulario de contacto para el sitio
La validación de la exactitud de la entrada de información se lleva a cabo "sobre la marcha" antes de enviar el mensaje utilizando javascript.
5. Cambio animado entre formularios usando jQuery
JQuery animado alterna entre los campos de inicio de sesión, registro y recuperación de contraseña. En la página de demostración, haga clic en el enlace amarillo para ver el efecto.
6. Formulario de pago de PHP
Se puede utilizar una solución similar para brindar al visitante la posibilidad de comunicarse rápidamente con el propietario del sitio desde cualquier página. En la página de demostración, haga clic en la flecha hacia abajo para sacar el formulario.
7. Formulario de registro PHP usando jQuery y CSS3
Formulario con verificación de la veracidad de la información ingresada.
8. Formulario de registro PHP al estilo de Facebook
Bonito formulario de registro implementado con CSS, PHP y jQuery.
9. Formulario de contacto de jQuery "SheepIt"
Se implementó la capacidad de agregar nuevos campos antes de enviar un mensaje.
10. Formulario de contacto "Formulario de contacto Fancy AJAX"
Bonito formulario de comentarios PHP ordenado con validación de la información ingresada. Tecnologías: CSS, PHP, jQuery.
11. Sistema de autorización / registro en el sitio.
12. Formulario de envío de datos
Comprobando la corrección del relleno.
13. Complemento "Contactable" de jQuery
Implementar un formulario de pago para enviar rápidamente un mensaje.
La descarga comenzará ahora ... No olvides compartir material en las redes sociales con tu colegas
Entrada
