CREATE OWN CAPTCHA FOR YOUR WEBSITE

Hi Geeks,
I am sharing you a program for creating a captcha script using php and javascript. Following are the simple steps to create captcha in php

Step 1: Create a php script named ‘captcha.php’ with following code that generate and return a captcha image.

<?php session_start();
if(isset($_SESSION['custom_captcha']))
{
unset($_SESSION['custom_captcha']); // destroy the session if already there
}
$string1="abcdefghijklmnopqrstuvwxyz";
$string2="1234567890";
$string=$string1.$string2;
$string= str_shuffle($string);
$random_text= substr($string,0,8); // change the number to change number of chars
$_SESSION['custom_captcha']=$random_text;
$im = @ImageCreate (80, 20)
or die ("Cannot Initialize new GD image stream");
$background_color = ImageColorAllocate ($im, 204, 204, 204); // Assign background color
$text_color = ImageColorAllocate ($im, 51, 51, 255); // text color is given 
ImageString($im,5,5,2,$_SESSION['custom_captcha'],$text_color); // Random string from session added 
ImagePng ($im); // image displayed
imagedestroy($im); // Memory allocation for the image is removed. 
?>

Step 2: Now create a captcha.js file and put following code in the file.

function reload()
{
img = document.getElementById("capt");
img.src="captcha.php";
}

$(document).ready(function(){

var htm='<p><img src="captcha.php" id="capt">&nbsp;<input width="30" height="30" type="image" src="reload.png" onClick="reload();"  ></p><p><input type="text" name="g-recaptcha-response"  > ';

$('#custom_captcha').html(htm);//set the captcha data in element having id > custom_captcha . you can change as your div/Element id



});

Step 3: Now we need to create a Placeholder Element inside the form as following:

<!--inside the form tag-->
<!--this custom_captcha id is used in js file,you can change in js and html both-->
<div id="custom_captcha"></div>
<!--inside the form tag-->

Step 4: Now after submitting you from validate the captcha was right or not. So in your form submit action use following code.

<?php

if(!isset($_REQUEST['g-recaptcha-response']) || empty($_POST['g-recaptcha-response']) )
{
	
	$error = "Please fill the captcha.";
	//you can use this error var later to show error message on your page
}
else
{
 	
 
	$cresponse = urlencode($_REQUEST['g-recaptcha-response']);
 
	if($cresponse!=$_SESSION['custom_captcha'])
	{
	 $error = "INVALID CAPTCHA";
	 //you can use this var to show error invalid captcha
	}
	
}

//Now if no error then do your further process//
if($errors=="")
{
  //go ahed with form submission or data manipulation
}

?>

Note 1: In which page/form you are using the capcha , there should be session start in top of the file as following:

<?php @session_start(); ?>

and also include the js file in your php page head section. jquery should be available before the captcha.js inclusion as following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='captcha.js'></script>

Note 2: PHP GD LIBRARY SHOULD BE INSTALLED ON YOUR SERVER.

 

Set frame height dynamically using javascript

Hi Geeks,
As I faced the problem in so many times for Set Iframe height dynamically using javascript or setting the Iframe height as per its content, If we add the fix height to Iframe tag directly then it just show the scrollbar in that height but sometime we don’t want to show the scrollable area in that Iframe then there are so complex situation to set the Iframe height for dynamic content and the height may vary or Iframe on content coming from database or any other source.

Now we don’t know that what exactly the height of iframe due to its dynamic content, I have tried So many solution for it and finally i left the issue and provide static height to Iframe, i tried all DOM related access manipulations and it just failed due to cross origin and CORS violation issues.
But one day for my selfishness in one project i faced same requirement with an Iframe and if i use the Iframe then it was saving my lot of time So i researched for 4-5 hours and finally i got perfect solution for it.
SOLUTION :

We need to implement the channel communication between parent window and Iframe window by passing the messages . It will work for same or cross domain origins

Note : we should have access for the Iframe source page.

we’ll post a message from the Iframe source page having a height value to the client domain
by using following script

<script>

  // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>

Now where you are creating Iframe ,Go to that page
Like your Iframe is having like that

<iframe id="MY_IFRAME_ID" width="100%" style="overflow-x:hidden;overflow-y:hidden;" frameBorder="0" 
scrolling="no" src="https://www.my-bla-bla-url.com/my-bla-bla-page.html" ></iframe>

we have putted dummy url and set the style to overflow hidden and set frameborder as 0 .
and passed width as 100% but didn’t passed the height
so for getting calculated the height automatic please put the script as follow

<script>
 // browser compatibility: get method for event 
    // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
    var myEventMethod = 
        window.addEventListener ? "addEventListener" : "attachEvent";
    // create event listener
    var myEventListener = window[myEventMethod];
    // browser compatibility: attach event uses onmessage
    var myEventMessage = 
        myEventMethod == "attachEvent" ? "onmessage" : "message";
    // register callback function on incoming message
    myEventListener(myEventMessage, function (e) {
        // we will get a string (better browser support) and validate
        // if it is an int - set the height of the iframe #my-iframe-id
        if (e.data === parseInt(e.data)) 
            document.getElementById('MY_IFRAME_ID;).height = e.data + "px";
    }, false);
 
</script>

This script will recieve the message passed from Iframe source origin and add the height of iframe dynamically .
Note : MY_IFRAME_ID is the id of Iframe we assumed , you can replace it with your Iframe id in Iframe and script both

Please comment below if you have any query related to this post or feature