Google reCAPTCHA: Stop Bots using Google reCAPTCHA in PHP

Google reCaptcha is a free service from google that protect our website from spam and abuse.In this post I would like to show how we can integrate google recaptcha into our website. Let start with one by one.

1.) Get recaptcha setup keys from Google:

First of all you need site key and secret key from google console to use recaptcha into your website.To get keys Go to google console and fill all required details and you will get site and secret key.

Create Google Reccaptcha

After done with the fill up of required things, you will get site key and secret key.

Site and Secret key of google recaptcha

2.) Setup of reCAPTCHA with site and secret keys:

Next, You need to configure recaptcha into your website. Create a view file where you will show the captcha to the user.And in this file need to put data site key so that google recaptcha can authenticate with the site key.Here is how code looks.

Recaptcha.php

<!DOCTYPE html>
<html>
<head>
<title>Google reCAPTCHA Example</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="process.php">
<center>
<legend>Google reCAPTCHA Example</legend><br>
First Name :<input type="text" name="fname"><br><br>
Last Name :<input type="text" name="lname"><br><br>
<div class="g-recaptcha" data-sitekey="Your site key"></div>
<input type="submit" name="submit">
</center>
</form>
</body>
</html>

3.) Validate reCAPTCHA in server side:

When your users submit the form where you integrated reCAPTCHA, you need to validate that user.

URL:-“https://www.google.com/recaptcha/api/siteverify?secret=”YOUR_SECRET_KEY”&response=”g-recaptcha-response”&remoteip=”UNIQUE_IP_OF_USER’s_SYSTEM”

Through above url you need to send the response to the google and google will verify that user.

Please find below the full code of recaptcha  server side validation.

process.php

<?php
if(isset($_POST['submit'])){

$secret = 'your secret key';
$response = $_POST['g-recaptcha-response'];
if(empty($response)){
echo "<script>alert('Please solve captcha !'); window.location = './recaptcha.php';</script>";
}
$ip = $_SERVER['REMOTE_ADDR'];
$dav = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$response."&remoteip=".$ip);
$res = json_decode($dav,true);
if($res['success']) {
echo "First Name :".$_POST['fname'].'<br>';
echo "Last Name :".$_POST['lname'];
} else {
echo "<script>alert('Please solve captcha !'); window.location = './recaptcha.php';</script>";
}
}
?>

That’s all. Now you can test it.

You may also like this Create captcha using Captcha helper in Codeigniter

Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!

How to Integrate Jquery toastr plugin

In this post, I would like to show how to integrate jquery toastr plugin within your web page. Toastr is a jquery plugin. By using toastr notification you are able to show messages with several notification like Success,Error,Info and Warning.

The main features of jquery toastr are:-

  1. It can be placed anywhere into your web page.
  2. Four built in toastr messages types which is Success,Warning,Info and error.

In this tutorial  i am using CDN link of jquery toastr. You can also download library and include it.  Please find below the sample of code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Toastr Notification Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet" type="text/css" />

</head>
<body>
<h3>JQuery Toastr Notification Example(click any button)</h3>
<input type="button" value="Success" id="success" style="background-color: #70f160; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Error" id="error" style="background-color: #af5959; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Info" id="info" style="background-color: #5eb5ad; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Warning" id="warning" style="background-color: #f7e652; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>

<script>
$(function () {
$('#error').click(function () {
toastr.error("Error Message", "Title", { /* title is optional*/
timeOut: 1000,
extendedTImeout: 0,
showMethod: 'fadeIn', /*fadeIn, slideDown and show*/
showDuration: 300, /* in milisecond */
showEasing: 'swing', /*swing, linear*/
hideMethod: 'fadeOut', /* hide, fadout, slideUp */
hideDuration: 1000,
hideEasing: 'swing',/*swing, lineary*/
closeEasing: false,
progressBar: false,
positionClass: 'toast-top-right',
titleClass: 'toast-title',
})
});
$('#info').click(function () {

toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning Message", "Title");
});
$('#success').click(function () {
toastr.success("Successs Message", "Title");
});
});
</script>

</body>
</html>

After running above code you will see the interface as showing below.

Jquery Toastr
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – let us know. We’d love to help!

How to Validate Form Inputs using Jquery Validation Plugin

Here we will see how jquery validation plugin validate your form. Jquery validation is a client side validation, which performs through browser. It makes easy to validate your form inputs, without reload the page.

Let see how to implement this. In this example I am using CDN link of jquery validation. Please find below the code.

<html>
<head>
<title>Jquery Validation Example</title>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;
border-collapse: collapse;
}
.error{
    color:red;
  font-size: 11px;
}
</style>
<h3>Jquery Validation Example</h3>
<formid="myform">
<tablealign="center"cellpadding = "5">
<tr>
<td>Name</td>
<td><inputtype="text"size="40px"name="name"/></td>
</tr>
<tr>
<td>Email</td>
<td><inputtype="text"size="40px"name="email"/></td>
</tr>
<tr>
<td>Mobile</td>
<td><inputtype="text"size="40px"name="mobile" /></td>
</tr>
<tr>
<td>Adress</td>
<td><inputtype="text"size="40px"name="address"maxlength="100"/></td>
</tr>
<tr>
<td>File</td>
<td><inputtype="file"name="employeefile" /></td>
</tr>
<tr>
<tdcolspan="5"align="center">
<inputtype="submit"value="Register"/></td>
</tr>
</table>
</form>
<script>
$(document).ready(function () {
/* Email address validation */
jQuery.validator.addMethod("emp_email_valid", function(value, element) {
         return this.optional( element ) || /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
        }, 'Please enter a valid email address.');
    /* Mobile number validation */
    jQuery.validator.addMethod("mobile_number", function(value, element) {
         return this.optional( element ) || /^[0-9]{10}$/.test( value );
        }, 'Please enter a valid mobile number.');
/* File validation */
jQuery.validator.addMethod("extension", function (value, element, param) {
param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
returnthis.optional(element) || value.match(new RegExp(".("+ param +")$", "i"));
}, "Please upload pdf or doc files.");
$('#myform').validate({ // initialize the plugin
rules: {
name: {
required: true,
},
email: {
required: true,
emp_email_valid: true
},
mobile: {
required: true,
mobile_number : true
},
address: {
required: true,
},
employeefile: {
required: true,
extension: "pdf|doc"
}
}
});
});
</script>
</body>
</html>
Jquery validation
Note: Client side validation should only be used to improve user experience, never for security because the javascript performs only in the browser and the browser is runs on the user’s machine.It can be fully controlled by the user.

How to Print Specific Section of a Web page using javascript

In this post, I would like to show how to print a specific section of a web page. Many times we needed to print the section as per our requirements for example- if we have employee details and his/her salary details in the same page and we want only the print of salary details section then we can get this through javascript.

Here is I am defining two div section with unique ID. One is for employee details and other is for salary details. And the div ID passes from the click function of anchor tag through to the javascript function. And in the javascript function we can get html content through innerhtml property and can print it. Please find below the code.

printsection.html

<html>
<head>
<title>Print specific section example</title>
<style>
@media print {
.noprint{
display: none !important;
}
}
</style>
</head>
<body>
<div id="employee_details" >
<table align="center" cellspacing = "0" style="background-color:lightgrey;" width="80%" border="1">
<tr><td>Employee Details</td><td colspan="3" align="right"><a href="javascript:void(null);" onclick="print_section('employee_details')" class="noprint">Print</a></td></tr>
<tr>
<td>Name</td>
<td><label>Mr. Ajay Trivedis</label></td>
</tr>
<tr>
<td>Mobile: </td>
<td><label>789321</label></td>
</tr>
<tr>
<td>Adress: </td>
<td><label>Mumbai</td>
</tr>
</table>
</div>
</br>
<div id="payment_details" >
<table align="center" cellspacing = "0" style="background-color:#d09d9d;" width="80%" border="1">
<tr><td>Salary Details</td><td colspan="4" align="right"><a href="javascript:void(null);" onclick="print_section('payment_details')" class="noprint">Print</a></td></tr>
<tr>
<td>Date: </td>
<td><label>27/08/2018</label></td>
</tr>
<tr>
<td>Gross: </td>
<td><label>20,000/-</label></td>
</tr>
<tr>
<td>Net Payout: </td>
<td><label>18,000/-</td>
</tr>
</table>
</div>
<script type="text/javascript">
function print_section(section) {
var printContents = document.getElementById(section).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>
Print Specific Section

Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – let us know. We’d love to help!

How to use jquery Data Table with Codeigniter

Jquery Datatable
Jquery Datatable

In this post, I will show how to integrate jquery datatable plugin. DataTables is a table enhancing plug-in to add sorting, pagination and filteration to plain HTML tables with a very less effort. Jquery datatables also support print, pdf export, csv export and other button tools.Jquery also support responsive features to grow and shrink dynamically as page resized or for different screen. Let see with an example.

1.Download jquery datatable plugin. After downloading put all folders and files in a separate directory called assets which contains all your js and css files of jquery datatable plugin.We will link all required js/css files using base_url. Here is directory structure.

2. Next create a view called user_list.php inside application/views directory where we gonna use jquery datatable.To show data Here we will get all users list and will show in table.

<html>
<head>
<title>User Report</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.min.css'); ?>" rel="stylesheet">
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;

}
</style>
<h3>Users Report</h3>
<table id="table" align="center" cellpadding = "5" border="2" class="table table-striped display nowrap table-bordered" cellspacing="0" width="100%" style="position:relative; top:7px;">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?phpforeach($users as $row) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->mobile; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#table').DataTable({
"ordering": false,
dom: 'lBfrtip',
buttons:[
'copy','pdf','print','csv'
],
});
});
</script>
<scriptsrc="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/pdfmake.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/vfs_fonts.js')?>"></script>
</body>
</html>

Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!