Ajax Registration Script with PHP, MySQL and jQuery

In our previous tutorial, we have handled Ajax Login Script with PHP, MySQL and jQuery. In this tutorial, we will handle user registration form with PHP, MySQL and jQuery with Demo. We have used Bootstrap to create registration form and form validation using jQuery validation plugin. The registration form accepts data from user and store into MySQL database without page refresh.

Also, read:

• Ajax Login Script with PHP and jQuery
• Bootstrap Contact Form with Captcha using Ajax and PHP

You can see the live demo of this tutorial and also download complete running demo script.

We have handled tutorial in very easy steps. So let’s start the coding.

Steps1: Create MySQL Database Table
For this tutorial, we have used MySQL database table “users”. So used below code to create table.

CREATE TABLE IF NOT EXISTS `users` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`user` varchar(255) DEFAULT NULL,
`pass` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`profile_photo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`uid`),
UNIQUE KEY `username` (`user`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Create MySQL Database Connection
We have created db_connect.php PHP file to make connection with MySQL database.

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

Steps3: Include Bootstrap, jQuery and JavaScript Files
For this tutorial. we have created PHP file index.php and included all necessary library files (Bootstrap, jQuery, validation js) and CSS files in head tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/validation.min.js"></script>
<script type="text/javascript" src="script/login.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">

Steps4: Create Register Form HTML

Then in index.php, we have created registration form HTML using Bootstrap.

<div class="register_container">
<form class="form-signin" method="post" id="register-form">
<h2 class="form-signin-heading">User Registration Form</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
<span class="glyphicon glyphicon-log-in"></span>   Create Account
</button> 
</div>  
</form>
</div>

Steps5: Form Validation and Submit with jQuery Ajax

Then in registr.js JavaScript file, we handled registration form validation and submission with jQuery Ajax to make ajax request to server to PHP file register.php to insert user registration details into MySQL database. Also displaying messages with this script according to returned response.

$('document').ready(function() {   
  /* handle form validation */  
  $("#register-form").validate({
      rules:
   {
   user_name: {
      required: true,
   minlength: 3
   },
   password: {
   required: true,
   minlength: 8,
   maxlength: 15
   },
   cpassword: {
   required: true,
   equalTo: '#password'
   },
   user_email: {
            required: true,
            email: true
            },
    },
       messages:
    {
            user_name: "please enter user name",
            password:{
                      required: "please provide a password",
                      minlength: "password at least have 8 characters"
                     },
            user_email: "please enter a valid email address",
   cpassword:{
      required: "please retype your password",
      equalTo: "password doesn't match !"
       }
       },
    submitHandler: submitForm 
       });  
    /* handle form submit */
    function submitForm() {  
    var data = $("#register-form").serialize();    
    $.ajax({    
    type : 'POST',
    url  : 'register.php',
    data : data,
    beforeSend: function() { 
     $("#error").fadeOut();
     $("#btn-submit").html('<span 
class="glyphicon glyphicon-transfer"></span>   sending ...');
    },
    success :  function(response) {      
        if(response==1){         
			 $("#error").fadeIn(1000, function(){
			   $("#error").html('<div 
class="alert alert-danger"> <span 
class="glyphicon glyphicon-info-sign"></span>   
Sorry email already taken !</div>');           
			   $("#btn-submit").html('<span 
class="glyphicon glyphicon-log-in"></span>   Create Account');          
			 });                    
        } else if(response=="registered"){         
			 $("#btn-submit").html('<img 
src="ajax-loader.gif" />   Signing Up ...');
			 setTimeout('$(".form-signin").fadeOut(500, 
function(){ $(".register_container").load("welcome.php"); }); ',3000);         
        } else {          
         	$("#error").fadeIn(1000, function(){           
      			$("#error").html('<div 
class="alert alert-danger"><span 
class="glyphicon glyphicon-info-sign"></span>   '+data+' !</div>');           
         		$("#btn-submit").html('<span 
class="glyphicon glyphicon-log-in"></span>   Create Account');         
         	});           
       	}
        }
    });
    return false;
  }
});

Steps6: Process User Register at Server end

Now finally in register.php PHP file, we will store user register details into MySQL database table if user email not already stored.

<?php
include_once("../db_connect.php");
if(isset($_POST['btn-save'])) {
	$user_name = $_POST['user_name'];
	$user_email = $_POST['user_email'];
	$user_password = $_POST['password'];	
	$sql = "SELECT email FROM users WHERE email='$user_email'";
	$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
	$row = mysqli_fetch_assoc($resultset);		
	if(!$row['email']){	
		$sql = "INSERT INTO users(`uid`, `user`, `pass`, `email`, `profile_photo`) 
VALUES (NULL, '$user_name', '$user_password', '$user_email', NULL)";
		mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn)."qqq".$sql);			
		echo "registered";
	} else {				
		echo "1";	 
	}
}
?>

You may also like:

• Working with php.ini file Configuration
• Control Statements in PHP
• Convert Associative Array into XML in PHP
• Convert XML into Associative Array in PHP
• Using Prepared Statement with PHP & MySQL
• How to Upload File in PHP
• Converting an Array to JSON in PHP
• Converting JSON to Array or Object in PHP
• Manipulating PHP arrays: push, pop, shift, unshift
• Remove Repeated Words From String in PHP
• Converting a PHP Array to a Query String
• 15+ regular expressions for PHP developers
• 10 Most Important Directory Functions in PHP
• 10 little known but useful PHP functions
• PHP Script to Download Large Files Reliably

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download