Check if username exists with AngularJS

Add Comment , Edit

It is always a better idea to check the entered username exists or not if you are allowing the users to choose username while registration and wants it to be unique.
With this, the user will instantly know that their chosen username is available or not

1. Table structure

I am using users table in the tutorial example.
CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file.
Completed Code
<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. HTML

Creating a basic registration form layout that has three input elements and a button.
  • Defined ng-keyup directive on username input field that calls checkUsername().
  • Add a <div > following with username input field to show the available status and to adjust classes on <div> define ng-class directive.
Completed Code
<body ng-app='myapp'>

 <div class="container" ng-controller='signup'>

  <div id="div_reg">
   <h1>Registration</h1>

   <div>
    <input type="text" class="textbox" id="txt_name" ng-model="name" placeholder="Name"/>
   </div>

   <!-- Username -->
   <div>
    <input type="text" class="textbox" id="txt_uname" ng-model="username" ng-keyup='checkUsername()' placeholder="Username" />
    <div ng-class="addClass(unamestatus)" >{{ unamestatus }}</div>
   </div>

   <div>
    <input type="password" class="textbox" id="txt_pwd" ng-model="password" placeholder="Password"/>
   </div>

   <div>
    <input type="submit" value="Submit" name="but_submit" id="but_submit" />
   </div>

  </div>

 </div>

</body>

4. CSS

/* Container */
.container{
 margin: 0 auto;
 width: 70%;
}

/* Registration */
#div_reg{
 border: 1px solid gray;
 border-radius: 3px;
 width: 470px;
 height: 370px;
 box-shadow: 0px 2px 2px 0px gray;
 margin: 0 auto;
}

#div_reg h1{
 margin-top:0px;
 font-weight: normal;
 padding:10px;
 background-color:cornflowerblue;
 color:white;
 font-family:sans-serif;
}

#div_reg div{
 clear: both;
 margin-top: 10px;
 padding: 5px;
}

#div_reg .textbox{
 width: 96%;
 padding: 7px;
}

#div_reg input[type=submit]{
 padding: 7px;
 width: 100px;
 background-color: lightseagreen;
 border: 0px;
 color: white;
}

/* Response */
.response{
 padding: 6px;
 display: block;
}
.hide{
 display: none;
}
.exists{
 color: green;
}

.not-exists{
 color: red;
}

 

5. PHP

Create new uname_check.php.
Here, check the POST username value in users table and return a response.
Completed Code
<?php

include 'config.php';

$data = json_decode(file_get_contents("php://input"));

// Username
$uname = $data->username;
 
$resText = '';

if($uname != ''){
 // Check username
 $sel = mysqli_query($con,"select count(*) as allcount from users where username = '".$uname."' ");
 $row = mysqli_fetch_array($sel);

 $resText = "Available";
 if($row['allcount'] > 0){
  $resText = 'Not available';
 }
}

echo $resText;

6. Script

Defined two methods –
  • checkUsername – Send $http request to check the username exists or not and initialize $scope.unamestatus with response.data.
  • addClass – Return class names according  to unamestatus value.
Completed Code
var fetch = angular.module('myapp', []);

fetch.controller('signup', ['$scope', '$http', function ($scope, $http) {
 
 // Check username 
 $scope.checkUsername = function(){
 
  $http({
   method: 'post',
   url: 'uname_check.php',
   data: {username:$scope.username}
  }).then(function successCallback(response) {
   $scope.unamestatus = response.data;
  });
 }

 // Set class
 $scope.addClass = function(unamestatus){
  if(unamestatus == 'Available'){
   return 'response exists';
  }else if(unamestatus == 'Not available'){
   return 'response not-exists';
  }else{
   return 'hide';
  }
 }

}]);
 

7. Conclusion

Using the above script you can alert the user whether the username exists or not.
Always make sure to recheck the value before saving in your Database table.

If you found this tutorial helpful then don't forget to share
 

 


 

 

CONVERSATION

0 Comments:

Post a Comment

Subscribe to: Post Comments ( Atom )
Back
to top