Post Top Ad

Your Ad Spot

domingo, 8 de diciembre de 2019

Compruebe si el usuario ya existe sin enviar el formulario



Al registrar usuarios en una tabla de base de datos, debe asegurarse de que la dirección de correo electrónico o el nombre de usuario de cada usuario sean únicos. En un tutorial anterior, hicimos esto usando PHP simple donde el usuario envía el formulario y se realiza esta verificación. 
En este tutorial, lo haremos de una manera más eficiente y divertida (usando JQuery y Ajax) sin enviar el formulario o volver a cargar la página.
El usuario visita la página de registro, ingresa su nombre de usuario, correo electrónico y contraseña. Cuando el cursor abandona el campo de nombre de usuario (un evento denominado en JavaScript como onblur , se realiza una verificación de nombre de usuario en segundo plano a través de una llamada ajax al servidor sin que el usuario haga clic en el botón Enviar. Si ya existe un usuario con el nombre de usuario proporcionado) en la base de datos, se muestra de inmediato un mensaje de validación con el estilo apropiado.
Hagámoslo:
tabla de usuarios
CamposTipo
carné de identidadINT (11)
nombre de usuarioVARCHAR (255)
correo electrónicoVARCHAR (255)
contraseñaVARCHAR (255)
Para la parte restante de este tutorial, hagámoslo en pasos;

Paso 1: 

Cree un archivo llamado register.php y pegue este código en él:
<?php include('process.php'); ?>
<html>
<head>
  <title>Register</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <form id="register_form">
      <h1>Register</h1>
      <div id="error_msg"></div>
   <div>
   <input type="text" name="username" placeholder="Username" id="username" >
     <span></span>
   </div>
   <div>
     <input type="email" name="email" placeholder="Email" id="email">
  <span></span>
   </div>
   <div>
    <input type="password" name="password" placeholder="Password" id="password">
   </div>
   <div>
   <button type="button" name="register" id="reg_btn">Register</button>
   </div>
 </form>
</body>
</html>
<!-- scripts -->
<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>

Paso 2:

Incluya el archivo styles.css :
styles.css:
body {
  background: #A9D9C3;
}
#register_form h1 {
  text-align: center;
}
#register_form {
  width: 37%;
  margin: 100px auto;
  padding-bottom: 30px;
  border: 1px solid #918274;
  border-radius: 5px;
  background: white;
}
#register_form input {
  width: 80%;
  height: 35px;
  margin: 5px 10%;
  font-size: 1.1em;
  padding: 4px;
  font-size: .9em;
}
#reg_btn {
  height: 35px;
  width: 80%;
  margin: 5px 10%;
  color: white;
  background: #3B5998;
  border: none;
  border-radius: 5px;
}
/*Styling for errors on form*/
.form_error span {
  width: 80%;
  height: 35px;
  margin: 3px 10%;
  font-size: 1.1em;
  color: #D83D5A;
}
.form_error input {
  border: 1px solid #D83D5A;
}

/*Styling in case no errors on form*/
.form_success span {
  width: 80%;
  height: 35px;
  margin: 3px 10%;
  font-size: 1.1em;
  color: green;
}
.form_success input {
  border: 1px solid green;
}
#error_msg {
  color: red;
  text-align: center;
  margin: 10px auto;
}
En register.php, las dos últimas líneas especifican los archivos javascript que se usan en esta aplicación. Primero está JQuery, que puedes descargar desde  aquí , y también está el  archivo script.js donde escribiremos nuestro propio código JavaScript. Coloque el archivo jquery en el directorio raíz de su aplicación y cámbiele el nombre a jquery-3.2.1.min.js.
Ahora hagamos que el sitio sea dinámico tanto en el front end como en el backend. 

Paso 3:

Cree un archivo script.js y pegue este código en él:
$('document').ready(function(){
 var username_state = false;
 var email_state = false;
 $('#username').on('blur', function(){
  var username = $('#username').val();
  if (username == '') {
   username_state = false;
   return;
  }
  $.ajax({
    url: 'register.php',
    type: 'post',
    data: {
     'username_check' : 1,
     'username' : username,
    },
    success: function(response){
      if (response == 'taken' ) {
       username_state = false;
       $('#username').parent().removeClass();
       $('#username').parent().addClass("form_error");
       $('#username').siblings("span").text('Sorry... Username already taken');
      }else if (response == 'not_taken') {
       username_state = true;
       $('#username').parent().removeClass();
       $('#username').parent().addClass("form_success");
       $('#username').siblings("span").text('Username available');
      }
    }
  });
 });  
  $('#email').on('blur', function(){
  var email = $('#email').val();
  if (email == '') {
   email_state = false;
   return;
  }
  $.ajax({
      url: 'register.php',
      type: 'post',
      data: {
       'email_check' : 1,
       'email' : email,
      },
      success: function(response){
       if (response == 'taken' ) {
          email_state = false;
          $('#email').parent().removeClass();
          $('#email').parent().addClass("form_error");
          $('#email').siblings("span").text('Sorry... Email already taken');
       }else if (response == 'not_taken') {
         email_state = true;
         $('#email').parent().removeClass();
         $('#email').parent().addClass("form_success");
         $('#email').siblings("span").text('Email available');
       }
      }
  });
 });

 $('#reg_btn').on('click', function(){
  var username = $('#username').val();
  var email = $('#email').val();
  var password = $('#password').val();
  if (username_state == false || email_state == false) {
   $('#error_msg').text('Fix the errors in the form first');
 }else{
      // proceed with form submission
      $.ajax({
       url: 'register.php',
       type: 'post',
       data: {
        'save' : 1,
        'email' : email,
        'username' : username,
        'password' : password,
       },
       success: function(response){
        alert('user saved');
        $('#username').val('');
        $('#email').val('');
        $('#password').val('');
       }
      });
  }
 });
});
El primer fragmento de código es esa parte que se ejecuta cuando el cursor sale del campo de nombre de usuario del formulario de entrada. El segundo fragmento se ejecuta cuando el cursor sale del campo de correo electrónico y la última parte del código se asegura de que no haya errores en el formulario y luego envía los datos al servidor cuando se hace clic en el botón de registro.

Etapa 4:

Esta es la última parte del código. Una vez que se han enviado los datos al servidor, el código php recibe la información y realiza las verificaciones necesarias. 
process.php:
<?php 
  $db = mysqli_connect('localhost', 'root', '', 'taken');
  if (isset($_POST['username_check'])) {
   $username = $_POST['username'];
   $sql = "SELECT * FROM users WHERE username='$username'";
   $results = mysqli_query($db, $sql);
   if (mysqli_num_rows($results) > 0) {
     echo "taken"; 
   }else{
     echo 'not_taken';
   }
   exit();
  }
  if (isset($_POST['email_check'])) {
   $email = $_POST['email'];
   $sql = "SELECT * FROM users WHERE email='$email'";
   $results = mysqli_query($db, $sql);
   if (mysqli_num_rows($results) > 0) {
     echo "taken"; 
   }else{
     echo 'not_taken';
   }
   exit();
  }
  if (isset($_POST['save'])) {
   $username = $_POST['username'];
   $email = $_POST['email'];
   $password = $_POST['password'];
   $sql = "SELECT * FROM users WHERE username='$username'";
   $results = mysqli_query($db, $sql);
   if (mysqli_num_rows($results) > 0) {
     echo "exists"; 
     exit();
   }else{
     $query = "INSERT INTO users (username, email, password) 
           VALUES ('$username', '$email', '".md5($password)."')";
     $results = mysqli_query($db, $query);
     echo 'Saved!';
     exit();
   }
  }

?>
Y eso nos lleva al final de este tutorial. 
Espero que lo hayas encontrado útil.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas