Login with Math CAPTCHA in PHP using jQuery

In this article, I will explain how to create Login with Math CAPTCHA in PHP using jQuery. A CAPTCHA is a kind of challenge-response system designed to differentiate humans from robotic software programs. CAPTCHAs are used as security checks to deter spammers and hackers. we use captcha to secure our website. if you are a senior web developer you must have created plenty of Login and Register system with CAPTCHA challenge already. They maybe exist in a content management system and E-commerce projects. if you just started web development, you are certainly going to experience lots of Login and Register creation work in your later career.

1-Creating Database

Open PHPMyAdmin in your Browser
Click on Database Tab Display on Topside
Give the Database name “captcha”.
After Creating Database Open it.
Click on SQL Tab on Top area
Copy the Below Source Code and paste it.
Then Click on Go.

-- phpMyAdmin SQL Dump
-- version 4.2.7.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jul 28, 2018 at 11:05 PM
-- Server version: 5.6.20
-- PHP Version: 5.5.15

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `captcha`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE IF NOT EXISTS `user` (
`user_id` int(11) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(12) NOT NULL,
  `name` varchar(50) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`user_id`, `username`, `password`, `name`) VALUES
(1, 'admin', 'admin', 'Administrator'),
(2, 'deepak', '00124578', 'Deepak Kumar');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
 ADD PRIMARY KEY (`user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

OR Import DB File

After Downloading the source code extract it in your root folder.

Open PHPMyAdmin in your Browser
Click on Database Tab Display on Topside
Give the Database name “captcha”.
After Creating Database Open it.
Click on Import Tab on Top area
You can Find Db file in Downloaded source code Select it.
Then Click on Go.

2- Creating Database Connection

After import Database File then next step is creating a database connection using PHP copy the below code and save it is as “conn.php”.

<?php
	$conn = new mysqli('localhost', 'root', '', 'captcha');
	
	if(!$conn){
		die("Error: Failed to connect to database!");
	}
?>

3 – Creating Login and Register Form using HTML & BOOTSTRAP

in this step, we are going to creating the login and register form using HTML and Bootstrap where register form open in modal and login work with captcha without captcha users can’t log in. here the source code of index interface.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Login With Math Captcha</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<body>
		<br />
		<br />
		<div class="col-md-3"></div>
		<div class="col-md-6 well" style="border:2px solid black;">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<br />
				<form>
					<div class="form-group">
						<label>Username:</label>
						<input type="text" id="username" class="form-control"/>
					</div>
					<div class="form-group">
						<label>Password:</label>
						<input type="password" id="password" class="form-control"/>
					</div>
					<div class="form-group">
						<label>Captcha:</label>
						<div id="show_captcha"style="font-size:30px; border:2px solid #000;"></div>
						<br />
						<input type="text" id="captcha" class="form-control"/>
					</div>
					<div id="result"></div>
					<br />
					<div class="form-group">
						<button type="button" class="btn btn-success form-control" id="login"> Login</button>
					</div>
				</form>
				<button  class="btn btn-success form-control" data-target="#form_modal" data-toggle="modal">Add User</button>
			</div>
		</div>
		<div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-hidden="true" style="border:2px solid #000;">
			<div class="modal-dialog" role="document">
				<form action="save_query.php" method="POST" enctype="multipart/form-data">
					<div class="modal-content">
						<div class="modal-body">
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<div class="form-group">
									<label>Username</label>
									<input class="form-control" type="text" name="username">
									</div>
									<div class="form-group">
										<label>Password</label>
										<input class="form-control" type="password" name="password">
										</div>
										<div class="form-group">
											<label>Name</label>
											<input class="form-control" type="text" name="full_name">
											</div>
										</div>
									</div>
									<div style="clear:both;"></div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
										<button name="save" class="btn btn-success">Save</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</body>
				<script src="js/jquery-3.2.1.min.js"></script>
				<script src="js/bootstrap.js"></script>
				<script src="js/script.js"></script>
			</html>

4 – Creating Welcome Page For Login users

in this step, we are going to create a welcome page after user login this page is shown. here the source code of welcome page named home.php

<!DOCTYPE html>
<?php 
	session_start();
	if(!ISSET($_SESSION['user_id'])){
		header('location: index.php');
	}
?>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Login With Math Captcha</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<body>
		<br />
		<br />
		<div class="col-md-3"></div>
		<div class="col-md-6 well" style="border:2px solid black;">
			<?php
			require 'conn.php';
			$query = $conn->query("SELECT * FROM `user` WHERE `user_id` = '$_SESSION[user_id]'");
			$fetch = $query->fetch_array();
		?>
			<h2 class="text-success">Welcome: </h2>
			<h3>
				<?php echo $fetch['name']?>
			</h3>
			<a href="logout.php">Logout</a>
		</div>
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
</html>

5 – Register user using form and send data into MySQL Database using PHP

in this step, we are going to send user registered data into a MySQL database using PHP script. here the source code of register user in PHP.

<?php
	require_once 'conn.php';
	
	if(ISSET($_POST['save'])){
		$username = $_POST['username'];
		$password = $_POST['password'];
		$full_name = $_POST['full_name'];
		
		if($username == "" || $password == "" || $full_name == ""){
			echo "<script>alert('Please complete the required field!')</scipt>";
			echo "<script>window.location='index.php'</script>";
		}else{
			$conn->query("INSERT INTO `user` VALUES('', '$username', '$password', '$full_name')");
			echo "<script>alert('Successfully created an account')</script>";
			echo "<script>window.location='index.php'</script>";
		}
	}
?>

6 – Validate Login Form using PHP

here we are validating HTML login form using php to user can login using their name and password.

<?php
	session_start();
	require_once 'conn.php';
	$username = $_POST['username'];
	$password = $_POST['password'];
	$captcha = $_POST['captcha'];
	
	if($_SESSION['answer'] == $captcha){
		$query = $conn->query("SELECT * FROM `user` WHERE `username` = '$username' && `password` = '$password'");
		$fetch = $query->fetch_array();
		$rows = $query->num_rows;
		if($rows > 0){
			$_SESSION['user_id'] = $fetch['user_id'];
			echo "success";
		}else{
			echo "error";
		}
	}else{
		echo "captcha";
	}
?>

7 – Creating Logout Function in PHP

in this step, we are destroying the session.

<?php
	session_start();
	session_destroy();
	header('location: index.php');
?>

8 – Final Step Creating Math CAPTCHA

in this step, we are creating CAPTCHA using PHP & jQUERY. This script includes the creation of captcha and rendering it to the page using jQuery script. The jquery script will send ajax request to the database server and then verified if the user account is already registered.

<?php
	session_start();
	
	$captcha = "";
	$digit1 = rand(1, 100);
	$digit2 = rand(1, 100);
	$array = ["+", "-", "*"];
	$random = array_rand($array);

	switch($array[$random]){
		case "+":
			$_SESSION['captcha'] = $digit1." + ".$digit2;
			$_SESSION['answer'] = $digit1+$digit2;
			break;
		case "-":
			$_SESSION['captcha'] = $digit1." - ".$digit2;
			$_SESSION['answer'] = $digit1-$digit2;
			break;
		case "*":
			$_SESSION['captcha'] = $digit1." * ".$digit2;
			$_SESSION['answer'] = $digit1*$digit2;
			break;
	}
	
	echo "<center>".$_SESSION['captcha']."</center>";
		
?>

script.js – jQuery Script

$(document).ready(function(){	
	$('#show_captcha').load('captcha.php');
	
	$('#login').on('click', function(){
		var username = $('#username').val();
		var password = $('#password').val();
		var captcha = $('#captcha').val();
		
		if(username == "" || password == "" || captcha == ""){
			$('#result').html('<center><label class="text-warning">Please complete the required field!</label></center>');
		}else{
			$.ajax({
				url: 'login.php',
				type: 'POST',
				data: {username: username, password: password, captcha: captcha},
				success: function(data){
					if(data == "captcha"){
						$('#result').html('<center><label class="text-danger">The answer you entered for the CAPTCHA was not correct</label></center>');
						$('#username').val('');
						$('#password').val('');
						$('#captcha').val('')
						$('#show_captcha').load('captcha.php');
					}else if(data == "error"){
						$('#result').html('<center><label class="text-danger">Invalid username or password</label></center>');
						$('#show_captcha').load('captcha.php');
						$('#username').val('');
						$('#password').val('');
						$('#captcha').val('')
					}else if(data == "success"){
						$('#username').val('');
						$('#password').val('');
						$('#captcha').val('');
						window.location = "home.php";
					}
					
				}
			})
		}
	});
});

If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.

Download Source Code

Categorized in:

JQuery, PHP,

Comments

Leave a Reply Cancel reply

Press ESC to close

1-Creating Database

OR Import DB File

2- Creating Database Connection

3 – Creating Login and Register Form using HTML & BOOTSTRAP

4 – Creating Welcome Page For Login users

5 – Register user using form and send data into MySQL Database using PHP

6 – Validate Login Form using PHP

7 – Creating Logout Function in PHP

8 – Final Step Creating Math CAPTCHA

script.js – jQuery Script

How to Create Employee Manager in PHP MySQL

How to Create Copy to Clipboard using JavaScript

More in this CategoryJQuery

How To Create Drag & Drop Insert Text To Input Field in JQuery

How to Create JQuery UI Tabs

How to Search Data Without Page Refresh in PHP MySQL using Ajax

How to Search with Auto Suggest in PHP MySQL using JQuery

Comments

Leave a Reply Cancel reply

Join to our community 👋