Check username availability with vue.js and PHP

Check username availability with vue.js and PHP

• 1.
  Check Username Availability withVue.js and PHP By Makitweb
• 2.
  Live username availabilitychecking on the registration page is the common feature in most of the website. This will notify the user whether the username is already been taken or not before submitting. To do this require AJAX. Send a request to check the username on the bases of response perform the action.
• 3.
  Contents - 1. Tablestructure 2. Configuration 3. HTML 4. PHP 5. Script 6. Conclusion
• 4.
  1. Table structure Iam using users table in the 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;
• 5.
  2. Configuration Create anew config.php file.
• 6.
  <?php $host = "localhost";/* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ // Create connection $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }
• 7.
  3. HTML Create atextbox and <span> to show message. In the textbox added v-model='username' and @keyup='checkUsername()'. To display the message in <span> added {{responseMessage}} and v-bind:class to change class according to isAvailable value.
• 8.
  <style > .available{ color: green; } .notavailable{ color:red; } </style> <div id='myapp'> Enter username : <input type='text' v-model='username' @keyup='checkUsername()'> <span v-bind:class="[isAvailable ? 'notavailable' : 'available']" >{{responseMessage}}</span> </div>
• 9.
  4. PHP Create aajaxfile.php file. Check username in the users table. If record found then assign 1 to $found. Return $found.
• 10.
  <?php include "config.php"; $username =""; $found = 0; if(isset($_GET['username'])){ $username = mysqli_escape_string($con,$_GET['username']); // Check username $result = mysqli_query($con,"select * from users WHERE username='".$username."'"); if(mysqli_num_rows($result) > 0){ $found = 1; } } echo $found;
• 11.
  5. Script Create 3data variable – username, isAvaialble, and responseMessage. Here, isAvailable is used to toggle <span> class and the responseMessage to display a message. Define a checkUsername method.
• 12.
  Send GET requestwhere pass username: username. On successful callback assign app.isAvailable = response.data. If response.data == 0 then assign app.responseMessage = "Username is Available." otherwise app.responseMessage = "Username is not Available.".
• 13.
  var app =new Vue({ el: '#myapp', data: { username: '', isAvailable: 0, responseMessage: '' }, methods: { checkUsername: function(){ var username = this.username.trim(); if(username != ''){ axios.get('ajaxfile.php', { params: { username: username } }) .then(function (response) {
• 14.
  app.isAvailable = response.data; if(response.data== 0){ app.responseMessage = "Username is Available."; }else{ app.responseMessage = "Username is not Available."; } }) .catch(function (error) { console.log(error); }); }else{ this.responseMessage = ""; } } } })
• 15.
  4. Conclusion It isbetter to prevent the user from selecting existing username before submitting the form. Also, check the username availability while inserting the record. You can view working demo here.
• 16.
  Share For More Vue.jsrelated tutorial as well as other programming tutorials visit : Makitweb.com