In this tutorial we'll create a registration page using PHP, jQuery, and AJAX.
Signup page with jQuery and Ajax
Contents
Database table
We are using users table for this example.
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(80) NOT NULL,
`name` varchar(80) NOT NULL,
`password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Configuration
Creating a config.php file for define database and other configuration.
<?php
session_start(); /* Session Start name */
$host = "localhost"; /* Database Host name */
$user = "root"; /* Database User */
$password = ""; /* Database Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection is established or not. if not then stop execution with Connection failed error
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
HTML
Creating a index.php file. in it create two input field for entering username and password for registration and a button to submit the form.
Give “registration-form” id to form and trigger AJAX call by jQuery submitevent.
<div id="custom-form-box" class="col-md-12">
<form id="registration-form" class="form" action="" method="post">
<h3 class="text-center text-info">Registration</h3>
<span class="error"></span>
<span class="success"></span>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" name="userName" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group submit_div">
<input type="submit" name="btn_submit" class="btn btn-info btn-md" value="Register">
</div>
</form>
</div>
jQuery
On Registration form submit call a AJAX request for Registration.
<script>
$(document).ready(function(){
$("#registration-form").submit(function(e){
e.preventDefault();
// Get user input and trim it.
var username = $('#username').val().trim();
var password = $('#password').val().trim();
if(username != '' && password !=''){
$.ajax({
url: 'ajaxfile.php',// file path
type: 'post',// method
data: {username: username, password: password},// Data send in json form
success: function(response){
if(response=='created'){
$('.success').text('User created');
}else{
$('.success').text('User already registered with this username.');
}
}
});
}
});
});
</script>
PHP
Create a ajaxfile.php file.
First we check the username and password is set or not. then will check is user already registered with us or not.
if user not registered with us then we will register new user and return response message.
include 'config.php';
if(isset($_POST['username']) && isset($_POST['password'])){
// Escapes special characters in a string for use in an SQL query,
$username = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,$_POST['password']);
$UserData=array();
// check username and password is empty or not.
if ($username != "" && $password != ""){
$sql_query = "select * from users where username='".$username."'";
$result = mysqli_query($con,$sql_query);
$UserData = mysqli_fetch_array($result);
// Check userdata is empty or not, if empty then create new user.
if(empty($UserData)){
// insert Query
$insert_query = "INSERT INTO `users`( `username`, `password`) VALUES ('".$username."','".$password."')";
$result = mysqli_query($con,$insert_query);
$response = "created";
}else{
// Set error messages
$response = "alreadyregistered";
}
}
echo $response;
die;
}
Demo
Here, are some already registered usernames – admin, brad, larry, mark, john. please don’t try with this usernames.
Conclusion
In this tutorial, I showed how you can create a registration page with PHP, MySQL, jQuery, and ajax with unique username functionality.
Be First to Comment