welcome back to shortlearner.com, in this post we will see how to create a signup or registration page with the help of AJAX, PHP and MySQL.
Before start this tutorial we should know a little bit about AJAX.
so basically it stands for Asynchronous JavaScript and XML .
A user can continue to use the application while the client program requests information from the server in the background.
so first we create a database with the name of task, and also create a database table with the name of emp_details. in this table we take employees personal details like employee name, email, password and mobile number as well.
CREATE TABLE `emp_details` (
`id` int(11) NOT NULL auto_increment,
`emp_name` varchar(222) default NULL,
`email` varchar(222) default NULL,
`mobile` varchar(22) default NULL,
`password` varchar(22) default NULL,
`status` int(10) default '1',
`user_type` varchar(222) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
After creating database we need to establish a connection between our PHP code and MySQL database. so we create a config.php page and make a database connection inside it.
config.php
Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?
<?php
$conn = mysqli_connect("localhost","root","root","task");
?>Now we design a responsive signup form with the help of bootstrap, html and css.
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container login-container">
<div class="row">
<div class="col-md-6 login-form-2">
<h3>User Registration</h3>
<hr>
<form method="post" onsubmit="return do_signup();">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="emp_name" id="emp_name" placeholder="Employee Name*" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="number" onKeyDown="if(this.value.length==15 && event.keyCode!=8) return false;" class="form-control" name="emp_mobile" id="emp_mobile" placeholder="Your Mobile No *" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="emp_email" id="emp_email" placeholder="Your Email *" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="emp_pass" id="emp_pass" class="form-control" placeholder="Your Password *" value="" />
</div>
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Login" />
</div>
<div class="form-group">
<a href="#" class="ForgetPwd" value="Login">Forget Password?</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>and put the css file in style.css
.login-container{
margin-top: 5%;
margin-bottom: 5%;
}
.login-form-1{
padding: 5%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-1 h3{
text-align: center;
color: #333;
}
.login-form-2{
padding: 5%;
background: #0062cc;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-2 h3{
text-align: center;
color: #fff;
}
.login-container form{
padding: 10%;
}
.btnSubmit
{
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.login-form-1 .btnSubmit{
font-weight: 600;
color: #fff;
background-color: #0062cc;
}
.login-form-2 .btnSubmit{
font-weight: 600;
color: #0062cc;
background-color: #fff;
}
.login-form-2 .ForgetPwd{
color: #fff;
font-weight: 600;
text-decoration: none;
}
.login-form-1 .ForgetPwd{
color: #0062cc;
font-weight: 600;
text-decoration: none;
}on form submit we call a JQuery function do_signup, which takes all the values of input fields on the behalf of their ids itself, than we send all the data to our do_login.php page using action tag.
<script>
function do_signup()
{
var name=$("#emp_name").val();
var password=$("#emp_pass").val();
var email=$("#emp_email").val();
var mobile=$("#emp_mobile").val();
if(email!="" && name!="" && mobile!="" && password!="")
{
$.ajax
({
type:'post',
url:'do_login.php',
data:{
action:'signup',
name:name,
email:email,
mobile:mobile,
password:password
},
success:function(response) {
if(response=="success")
{
alert('Employee Successfully Signed Up.!');
window.location.href="index.php";
}
else
{
alert("Wrong Details");
}
}
});
}
else
{
alert("Please Fill All The Details");
}
return false;
}
</script>now create our last do_login.php page which will help us to insert all the user details into our database without refreshing the current page.
do_login.php
if ($_POST['action']=='signup')
{
require('config.php');
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$password = filter_var($_POST['password']);
$name = filter_var($_POST['name']);
$mobile = filter_var($_POST['mobile'], FILTER_SANITIZE_NUMBER_INT);
$ins = $conn->query("INSERT INTO emp_details(`emp_name`,`email`,`mobile`,`password`,`user_type`) VALUES('$name','$email','$mobile','$password','emp')");
if($ins){
echo "success";
}
}if we received success in the response than we show an alert pop up of employee successfully registered.