Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Compruebe si el nombre de usuario ya está en uso con PHP y MySQL

En ciertos sitios web, cierta información debe ser única. A nivel de la base de datos, esta información (el campo en la base de datos) se puede establecer como ÚNICA.
Pero esto no es suficiente.
La razón es porque la base de datos rechazará el valor pero no le dirá al usuario cuál es el error. Este tutorial tiene como objetivo hacer exactamente eso. 
Esto es lo que haremos en este tutorial:
  • Guarde la información del usuario en una tabla de base de datos llamada usuarios.
  • Haga una verificación cada vez que el usuario envíe otra información de usuario. Si el nombre de usuario ya existe en la base de datos, se mostrará un mensaje en el formulario que le indicará al usuario que el nombre de usuario enviado ya se ha tomado
  • También realizaremos una verificación en el correo electrónico
Por ahora ya puede adivinar la estructura de nuestra base de datos.
Crear una base de datos llamada tomada.
Haz que tenga 4 campos. Un campo de identificación de tipo INT y el resto:  nombre, correo electrónico y contraseña y dejar que los tres sean de tipo VARCHAR (255). 
Cree dos archivos en su editor de texto favorito:
  1. registrarse.php
  2. process.php
  3. styles.css
El primero tiene la forma.
process.php recibe los valores enviados desde el formulario. styles.css tiene el estilo que hace que nuestra forma sea hermosa.
Ábrelos en un editor de texto y escupe este código en cada uno de ellos:
register.php:
<?php include('process.php') ?>
<html>
<head>
  <title>Register</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form method="post" action="register.php" id="register_form">
   <h1>Register</h1>
   <div <?php if (isset($name_error)): ?> class="form_error" <?php endif ?> >
   <input type="text" name="username" placeholder="Username" value="<?php echo $username; ?>">
   <?php if (isset($name_error)): ?>
    <span><?php echo $name_error; ?></span>
   <?php endif ?>
   </div>
   <div <?php if (isset($email_error)): ?> class="form_error" <?php endif ?> >
      <input type="email" name="email" placeholder="Email" value="<?php echo $email; ?>">
      <?php if (isset($email_error)): ?>
       <span><?php echo $email_error; ?></span>
      <?php endif ?>
   </div>
   <div>
    <input type="password"  placeholder="Password" name="password">
   </div>
   <div>
    <button type="submit" name="register" id="reg_btn">Register</button>
   </div>
  </form>
  /body>
</html>

Ahora el archivo styles.css:
#register_form h1 {
  text-align: center;
}
body {
  background: #A9D9C3;
}
#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;
}
.form_error span {
  width: 80%;
  height: 35px;
  margin: 3px 10%;
  font-size: 1.1em;
  color: #D83D5A;
}
.form_error input {
  border: 1px solid #D83D5A;
}
#reg_btn {
  height: 35px;
  width: 80%;
  margin: 5px 10%;
  color: white;
  background: #3B5998;
  border: none;
  border-radius: 5px;
}
process.php:
<?php 
  $db = mysqli_connect('localhost', 'root', '', 'email_taken');
  $username = "";
  $email = "";
  if (isset($_POST['register'])) {
   $username = $_POST['username'];
   $email = $_POST['email'];
   $password = $_POST['password'];

   $sql_u = "SELECT * FROM users WHERE username='$username'";
   $sql_e = "SELECT * FROM users WHERE email='$email'";
   $res_u = mysqli_query($db, $sql_u);
   $res_e = mysqli_query($db, $sql_e);

   if (mysqli_num_rows($res_u) > 0) {
     $name_error = "Sorry... username already taken";  
   }else if(mysqli_num_rows($res_e) > 0){
     $email_error = "Sorry... email already taken";  
   }else{
           $query = "INSERT INTO users (username, email, password) 
              VALUES ('$username', '$email', '".md5($password)."')";
           $results = mysqli_query($db, $query);
           echo 'Saved!';
           exit();
   }
  }
?>
Una o dos palabras sobre el estilo en el formulario:
Eche un vistazo a esta línea nuevamente en el formulario en el archivo register.php. 
<div <?php if (isset($name_error)): ?> class="form_error" <?php endif ?> >
Si se establece el mensaje $ name_error, se adjunta una clase al elemento div que envuelve ese campo de entrada en particular. Esta clase contiene el estilo que proporcionará el borde rojo en el campo de entrada.
También existe este código que es responsable de mostrar el mensaje en sí. Solo lo muestra si la variable $ name_error está configurada y el mensaje $ name_error solo está configurado si el nombre enviado desde el formulario de registro ya existe en la base de datos. 
<?php if (isset($name_error)): ?>
  <span><?php echo $name_error; ?></span>
<?php endif ?>
Este mismo método se utiliza en el caso del correo electrónico.
¡Y eso es!
Enciéndelo en tu navegador y juega con él. 
Haré otra versión de este tutorial donde la verificación se realiza incluso antes de enviar el formulario. Esto se hará sin recargar la página usando JQuery y Ajax. Puede suscribirse a nuestro boletín para recibir una notificación cuando lo publique.
Gracias por tu tiempo. Espero que hayas aprendido algo!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas