Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Generate Random Username Using PHP, jQuery And MySQL

Thursday, Sep 28, 2017

Tags:- PHP jQuery Ajax MySQL


In this tutorial we will show you how to generate random username using PHP, jQuery, Ajax and MySQL on signup.When user enter his name on signup form we show a box having random generated username which is related to user's name.You may also like suggest username and email on registration using PHP and MySQL.


See Demo
Generate Random Username Using PHP, jQuery And MySQL


To Generate Random Username It Takes Only three Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to generate random username and do signup
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name signup.html

<html>
<head>
<link type="text/css" rel="stylesheet" href="signup_style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_username()
{
 var name=$("#name").val();
 if(name!="")
 {
  $.ajax
  ({
   type:'post',
   url:'do_signup.php',
   data:{
    get_username:name
   },
   success:function(response) 
   {
    $("#username").css({"display":"block"});
    $("#username").html("UserName : "+response);
    $("#username_value").val(response);
   }
  });
 }
}
</script>
</head>
<body>
<div id="wrapper">

<div id="signup_form">
 <p id="signup_label">SignUp Form</p>
 <form method="post"action="do_signup.php">
  <input type="text" name="name" id="name" placeholder="Enter Name" onblur="get_username();">
  <p id="username"></p>
  <input type="text" name="email" placeholder="Enter Email">
  <br>
  <input type="password" name="pass" placeholder="**********">
  <input type="hidden" name="username_value" id="username_value">
  <br>
  <input type="submit" name="signup" value="Do SignUp">
 </form>
</div>

</div>
</body>
</html>

In this step we create a form and add some text field for user to enter details we attach 'onblur' event with name field which calls get_username() function.In get_username() function we get the value of name and then make an ajax call to 'do_signup.php' to get related random username and then display and store the value in hidden form field.You may also like check username and email availability from database.



Step 2.Make a PHP file to generate random username and do signup

We make a PHP file and save it with a name do_signup.php

// Database Structure 
CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` text NOT NULL,
 `username` text NOT NULL,
 `email` text NOT NULL,
 `password` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

<?php
if(isset($_POST['get_username']))
{
 $user_name=str_replace(' ', '', $_POST['get_username']);
 random_username($user_name);
 exit();
}

function random_username($user_name)
{
 $new_name = $user_name.mt_rand(0,10000);
 check_user_name($new_name,$user_name);
}

function check_user_name($new_name,$user_name)
{
 $select = mysql_query("select * from users where username='$new_name'");

 if(mysql_num_rows($select))
 {
  random_username($user_name);
 }
 else
 {
  echo $new_name;
 }
}

if(isset($_POST['signup']))
{
 $name=$_POST['name'];
 $username=$_POST['username_value'];
 $email=$_POST['email'];
 $pass=$_POST['pass'];
 mysql_query("insert into users values('','$name','$username','$email','$pass')");
}
?>

In this step we create a database called 'users' and then create two isset() conditions to generate random username and do signup.In first condition we get the name and remove all white spaces if any then we call random_username() function to generate random username related to user's name and then we call check_user_name() function to check if user having this random generated username is present or not if already present we again call random_username() function to generate another username related to user's name and then check. If username is not present in our database table we display the name.In second isset() condition we get all the values entered by user in signup form and then store them in our database.Always validate data before and after submitting the form.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name signup_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#01A9DB;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#086A87;
}
#wrapper h1 p
{
 font-size:16px;
}
#signup_form
{
 background-color:white;
 width:270px;
 margin-left:345px;
 box-shadow:0px 0px 15px 0px #01A9DB;
 padding:15px;
}
#signup_form #signup_label
{
 color:#086A87;
 margin:0px;
 padding-bottom:10px;
 margin-bottom:30px;
 font-size:25px;
 border-bottom:1px solid #E6E6E6;
}
#signup_form input[type="text"],input[type="password"]
{
 width:230px;
 height:35px;
 padding-left:10px;
 font-size:16px;
 margin-bottom:15px;
 border:1px solid #D8D8D8;
 color:#585858;
}
#signup_form input[type="submit"]
{
 width:230px;
 margin-left:-4px;
 height:40px;
 font-size:16px;
 font-weight:bold;
 background-color:#01A9DB;
 color:#086A87;
 border:none;
 border-bottom:5px solid #0489B1;
 border-radius:3px;
}
#signup_form #username
{
 display:none;
 text-align:left;
 padding:10px;
 box-sizing:border-box;
 color:#585858;
 width:228px;
 margin:0px;
 margin-bottom:15px;
 margin-left:20px;
 min-height:35px;
 font-size:16px;
 background-color:#F2F2F2;
}

You can also view our make your own captcha system on signup tutorial to add captcha system in this tutorial.



That's all, this is how to generate random username using PHP, jQuery and MySQL.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.