Check if username is already taken with PHP and MySQL

On certain websites, some information is meant to be unique. At the level of the database, this information (the field in the database) can be set as UNIQUE.

But this is not enough.

The reason is because the database will reject the value but will not tell the user what the error is. This tutorial aims at doing just that.

Here is what we will do in this tutorial:

Save user information in a database table called users.
Make a check each time the user submits another user info. If username already exists in the database, a message will be displayed on the form telling the user that the submitted username has already been taken
We'll perform a check on the email as well

By now you can already guess the structure of our database.

ez_ad

Create a database called taken.

Make it have 4 fields. One id field of type INT and the rest: name, email, and password and let all three be of type VARCHAR(255).

Create two files in your favorite text editor:

register.php
process.php
styles.css

The first one holds the form.

process.php receives the values submitted from the form. styles.css holds the styling that makes our form beautiful.

Open them both up in a text editor and spit this code into each of them:

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>

Now the styles.css file:

#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();
        }
  }
?>

vli_ad

A word or two about the styling on the form:

Take a look at this line again on the form in the register.php.

<div <?php if (isset($name_error)): ?> class="form_error" <?php endif ?> >

If the $name_error message is set, then a class is attached to the div element wrapping that particular input field. This class contains the styling that will provide the red border on the input field.

There is also this piece of code that is responsible for displaying the message itself. It only displays it if the $name_error variable is set and the $name_error message is only set if the name submitted from the register form already exists in the database.

<?php if (isset($name_error)): ?>
  <span><?php echo $name_error; ?></span>
<?php endif ?>

This same method is used in the case of email.

And that's it!

Fire it up on your browser and play around with it.

I will be doing another version of this tutorial where the check is done even before the form is submitted. This is going to be done without page reload using JQuery and Ajax. You can subscribe to our newsletter to be notified when I publish it.

Thanks for your time. Hope you learned something!