HTML TUTORIAL - Coding Help - Codinghelp.in

Integrate Google Popup Sign in into Website || Google sign in pop up for website integration php

Coding Help — Tue, 23 Jan 2024 15:09:42 +0000

Gmail / Google Sign in Popup Website || Google sign in pop up for website integration php.

Integrating Popup Login into Your Website with Google One Tap API

Popup login is a user-friendly way to provide login functionality on your website without the need for multiple pages or complex forms. In this tutorial, we will explore how to integrate Google’s One Tap API to implement popup login on your website. We will break down the process into simple steps, allowing readers to easily understand and implement the solution. Additionally, we will add a code snippet to automatically trigger the popup on your website.

Sign In With Google HTML API using JavaScript

The following functionality will be implemented to integrate the Google Login feature into the website using Google Identity API.

Create an HTML element to render the Sign In With Google button.
Attach Google OAuth dialog to button using Google HTML API.
Post ID token to the server-side credential response handler script using JavaScript.
Decode JWT token and retrieve user’s account information using PHP.
Insert account data in the database using PHP and MySQL.
Display Google account details on the web page without page refresh.

Create Google Pop up sign in API Could Console Project – console.cloud.google.com

Go to the Google API Console.
Select an existing project from the projects list, or click NEW PROJECT to create a new project:
- Enter the Project Name. (You can enter the name of your website)
- Under the Project Name, you will see the Google API console automatically creates a project ID. Optionally you can change this project ID by the Edit link. But project ID must be unique worldwide.
- Click on the CREATE button and the project will be created in some seconds.
In the left side navigation panel, select Credentials under the APIs & Services section.
Select the OAuth consent screen tab, specify the consent screen settings.
- In Application name field, enter the name of your Application.
- In Support email filed, choose an email address for user support.
- In the Authorized domains, specify the domains which will be allowed to authenticate using OAuth.
- Click the Save button.
  - Click On Publish App button (If you do not publish this, your visitor cannot log in, please remember this and publish it.)
Select the Credentials tab, click the Create credentials drop-down and select OAuth client ID.
- In the Application type section, select Web application.
- in the Name Enter Your Project Name
- In the Allowed JavaScript origins field, enter the redirect URL.
- Click the Create button.

A dialog box will appear with OAuth client details, note the Client ID and Client secret. This Client ID and Client secret allow you to access the Google APIs.

Integrate Google Popup Sign in into Website ?

We are going to tell you two types of pop-up google sign in script, method 1, method 2, so you must check both, whichever you like, you can put it in your website.

Method 1- Sign in with pop up

First you will see the icon text “Sign in with Google” when a visitor comes to your website for the first time. When a visitor comes to your website for the second time, he will not get the option of Sign in with Google.
When your visitor comes to your website again you will get Gmail auto select like in Image 3.
You have to visit the Sign in with Google section and select your email, and you get logged in to the website.

Step 1:- Create popup.php file name

Create that file where you want to display Pop up Sign-in Option on visit.

Change This Code in “data–client_id”

Copy Code for popup.php file



    Integrating Popup Login with Google One Tap API
    
















 In the code that you will copy, you will have to change "data-client_id". This client_id would have been obtained from Could Console if you have followed the above steps.

Step 2:- Create popupdata.php file name

Now that file has to be created, when the visitor logs in his Gmail, Google passes it, then to take action in the backend, a file has to be created which decides what to do with the data received from Google after Google sign-in. To do

Include Your SQL Connection file path, change sql query,

Copy Code for popupdata.php file

request_type) && $jsonObj->request_type == 'user_auth'){ 
    $credential = !empty($jsonObj->credential)?$jsonObj->credential:''; 
 
    // Decode response payload from JWT token 
    list($header, $payload, $signature) = explode (".", $credential); 
    $responsePayload = json_decode(base64_decode($payload)); 
 
    if(!empty($responsePayload)){ 
        // The user's profile info 
        $oauth_provider = 'google'; 
        $_SESSION['access_token'] =  $oauth_uid  = !empty($responsePayload->sub)?$responsePayload->sub:''; 
        $_SESSION['user_first_name'] = !empty($responsePayload->given_name)?$responsePayload->given_name:''; 
        $full_name = !empty($responsePayload->name)?$responsePayload->name:''; 
        $_SESSION['user_last_name']  = !empty($responsePayload->family_name)?$responsePayload->family_name:''; 
        $_SESSION['user_email_address']      = !empty($responsePayload->email)?$responsePayload->email:''; 
        $_SESSION['user_image']    = !empty($responsePayload->picture)?$responsePayload->picture:''; 
        $_SESSION['verifiedEmail']  = !empty($responsePayload->email_verified)?$responsePayload->email_verified:''; 
        $_SESSION['login_button'] =false;
        
          // checking if user is already exists in database
  $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'";
  $results = mysqli_query($conn, $sql);
  if (mysqli_num_rows($results) > 0) {
      
      $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';";
    // user is exists
    $result = mysqli_query($conn, $qruiry);

  }
         
    }
} 


if(isset($_SESSION['login_button'])){
   
    $login_button=$_SESSION['login_button'];
  // checking if user is already exists in database
  $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'";
  $results = mysqli_query($conn, $sql);
  if (mysqli_num_rows($results) > 0) {

      $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';";
    // user is exists
    $result = mysqli_query($conn, $qruiry);


$usrdata = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM `loginusers` WHERE `email_id` = '{$_SESSION['user_email_address']}' LIMIT 1"));
$usrrsql = $conn->prepare("select count(*) from loginusers WHERE email_id = ?");
$usrrsql->execute([$_SESSION['user_email_address']]);
 $login_key =  md5(microtime().$_SERVER['REMOTE_ADDR']);
$_SESSION['login_key'] = $login_key;
$_SESSION['username'] = $usrdata['username'];

if($usrdata['status']=='approved'||$usrdata['status']=='paywait'){
  $qruirys = "UPDATE `loginusers` SET `login_key` = '$login_key' WHERE `loginusers`.`email_id` = '".$_SESSION['user_email_address']."';";
    $results = mysqli_query($econn, $qruirys);
echo '{"status":"success"}';

}
  } else {
    session_destroy(); 
     echo '{"status":"notregister"}';
  }
}else{
     $login_button = true;
     
     
}
?>

In this code you include the path of your sql connection file, change the available tables on your database with select sql and also with update sql, make other necessary changes.

Create Database Table

To store the user account information from Google, a table needs to be created in the database. The following SQL creates a users table with some basic fields in the MySQL database to hold the Google profile information.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `oauth_provider` enum('google','facebook','twitter','linkedin') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'google',
 `oauthtoken` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `verifiedEmail` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
 `locale` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
 `picture` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Google sign in pop up for website integration php

In this, you can show the Google Sign-in option on home and login, so that the user can easily log in, he does not need to visit the login section.

Method 2- Google Sign-in pop up

Step 1:- Create index.php file name

Create that file where you want to display Pop up Sign-in Option on visit.

Change This Code in “data–client_id”

Copy Code for index.php file



    Integrating Popup Login with Google One Tap API

Step 2:- Create popupdata.php file name

Include Your SQL Connection file path, change sql query,

Copy Code for popupdata.php file

request_type) && $jsonObj->request_type == 'user_auth'){ 
    $credential = !empty($jsonObj->credential)?$jsonObj->credential:''; 
 
    // Decode response payload from JWT token 
    list($header, $payload, $signature) = explode (".", $credential); 
    $responsePayload = json_decode(base64_decode($payload)); 
 
    if(!empty($responsePayload)){ 
        // The user's profile info 
        $oauth_provider = 'google'; 
        $_SESSION['access_token'] =  $oauth_uid  = !empty($responsePayload->sub)?$responsePayload->sub:''; 
        $_SESSION['user_first_name'] = !empty($responsePayload->given_name)?$responsePayload->given_name:''; 
        $full_name = !empty($responsePayload->name)?$responsePayload->name:''; 
        $_SESSION['user_last_name']  = !empty($responsePayload->family_name)?$responsePayload->family_name:''; 
        $_SESSION['user_email_address']      = !empty($responsePayload->email)?$responsePayload->email:''; 
        $_SESSION['user_image']    = !empty($responsePayload->picture)?$responsePayload->picture:''; 
        $_SESSION['verifiedEmail']  = !empty($responsePayload->email_verified)?$responsePayload->email_verified:''; 
        $_SESSION['login_button'] =false;
        
          // checking if user is already exists in database
  $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'";
  $results = mysqli_query($conn, $sql);
  if (mysqli_num_rows($results) > 0) {
      
      $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';";
    // user is exists
    $result = mysqli_query($conn, $qruiry);

  }
         
    }
} 


if(isset($_SESSION['login_button'])){
   
    $login_button=$_SESSION['login_button'];
  // checking if user is already exists in database
  $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'";
  $results = mysqli_query($conn, $sql);
  if (mysqli_num_rows($results) > 0) {

      $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';";
    // user is exists
    $result = mysqli_query($conn, $qruiry);


$usrdata = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM `loginusers` WHERE `email_id` = '{$_SESSION['user_email_address']}' LIMIT 1"));
$usrrsql = $conn->prepare("select count(*) from loginusers WHERE email_id = ?");
$usrrsql->execute([$_SESSION['user_email_address']]);
 $login_key =  md5(microtime().$_SERVER['REMOTE_ADDR']);
$_SESSION['login_key'] = $login_key;
$_SESSION['username'] = $usrdata['username'];

if($usrdata['status']=='approved'||$usrdata['status']=='paywait'){
  $qruirys = "UPDATE `loginusers` SET `login_key` = '$login_key' WHERE `loginusers`.`email_id` = '".$_SESSION['user_email_address']."';";
    $results = mysqli_query($econn, $qruirys);
echo '{"status":"success"}';

}
  } else {
    session_destroy(); 
     echo '{"status":"notregister"}';
  }
}else{
     $login_button = true;
     
     
}
?>

In this code you include the path of your sql connection file, change the available tables on your database with select sql and also with update sql, make other necessary changes.

The post Integrate Google Popup Sign in into Website || Google sign in pop up for website integration php first appeared on Coding Help - Codinghelp.in.

How to integrate the Facebook comments plugin in website

Coding Help — Fri, 29 Sep 2023 13:21:29 +0000

How to use Facebook Comments Plugin on your website step by step explained.

Facebook’s social plugin, Comments, allows you to quickly add comments to your website. Users not only have access to basic commenting abilities, they also have the option to cross-post their comments directly into their Facebook Timeline. Comment Administrators also gain access to a deeper stat-tracking system through Facebook Insights. While in the past the Comments box served merely as a static addition, it now has the capacity to provide direct communication between a website, a Facebook user, and all of his or her friends.

How to integrate the Facebook comments plugin in website

Today i am going to teach you How to integrate the Facebook comments plugin in websites. Now days all websites are having the facebook comments in theire blogs / websites.

Step 1 : Goto this URL https://developers.facebook.com/docs/plugins/comments

Step 2 : Enter your Website address of the page (Where you have to integrate the facebook comments plugin)

Step 3 : choose width and no.of comments (optional)

Step 4 : Click on the GET CODE button and simply copy those two codes and paste in your website (Where to Display) Here my website url is http://localhost/blog/ is running on my local machine. if your website is live just give the URL like this

http://www.example.com/urlfullpath.html

use this width 100% data-width=”100%”

It will set to the position.

How to get Facebook comment box code ?

Step 1: To add Facebook comment script to your website, you will need a code, for that you have to visit https://developers.facebook.com/docs/plugins/comments.

Step 2:- Comments Plugin Code Generator > URL to comment on (Enter the URL of your website link on which you want to place the comment box).

Step 3:- You have to copy both these codes and paste them in your website. Where you want to display the comment box.

Step 4:- this cod paste on body tag. – Like we have added it to our website where we want to display the comment option. And this contains the link of the post, it always changes, so we have entered the link here like this.

Step 5:- If you check the place where you have entered your Comments Plugin Code, you will see something like this. It takes some time to show this comment box option. So wait for a while and check

Tag:-

facebook comments plugin not working
1000 comments on facebook
facebook comments app
comment catcher for facebook
facebook comments tricks
facebook like plugin
add facebook comments to website
facebook comments example

The post How to integrate the Facebook comments plugin in website first appeared on Coding Help - Codinghelp.in.

table css html template

Coding Help — Sat, 26 Aug 2023 14:56:16 +0000

1) Rotated Table Headers

Demo Image: Rotated Table Headers

Column Header Rotation in CSS

Tutorial/codes – Demo

Author:
Chris Coyier

Created:
MARCH 24, 2014

Made with:
HTML, CSS(SCSS)

2) Angular material table

Demo Image: Angular material table

Angular matarial table is simply directive that allows you with no effort make good looking table in Google Material style.

Tutorial/codes – Demo

Author:
sntr

Created:
NOVEMBER 02, 2015

Made with:
HTML, CSS and JavaScript

3) Sticky Table Headers & Columns

Demo Image: Sticky Table Headers & Columns

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.

Tutorial/codes – Demo

Author:
Mike

Created:
NOVEMBER 04, 2015

Made with:
HTML, CSS(SCSS) and JavaScript

4) HTML / Javascript – Expand and collapse table rows

Demo Image: HTML / Javascript – Expand and collapse table rows

HTML / Javascript – Expand and collapse table rows with checkbox

Tutorial/codes – Demo

Author:
Wes Head

Created:
JULY 02, 2013

Made with:
HTML(Slim), CSS(Sass) and JavaScript

5) Data table using jquery datatable in Angularjs

Demo Image: Data table using jquery datatable in Angularjs

html table using angularjs and jquery datatable

Tutorial/codes – Demo

Author:
Kurtis

Created:
AUGUST 01, 2016

Made with:
HTML, CSS and JavaScript

6) Responsive Table with DataTables

Demo Image: Responsive Table with DataTables

Responsive Table with DataTables

Tutorial/codes – Demo

Author:
SitePoint

Created:
APRIL 15, 2015

Made with:
HTML, CSS and JavaScript

7) Responsive Table

Demo Image: Responsive Table

This demo shows how to change the style and layout of a table according to the available space.

Tutorial/codes – Demo

Author:
Iván Villamil

Created:
FEBRUARY 22, 2016

Made with:
HTML, CSS(SCSS)

8) A Better Fluid Responsive Table

Demo Image: A Better Fluid Responsive Table

Developed with JavaScript and semantic markup.

Tutorial/codes – Demo

Author:
Dudley Storey

Created:
APRIL 01, 2014

Made with:
HTML, CSS and JavaScript

9) Header Tabel Fix dengan CSS3

Demo Image: Header Tabel Fix dengan CSS3

Header Tabel Fix dengan CSS3

Tutorial/codes – Demo

Author:
Dumet_School

Created:
APRIL 08, 2017

Made with:
HTML, CSS

10) Table (Project panel web app)

Demo Image: Tabel (Project panel web app)

Table (Project panel web app)

Tutorial/codes – Demo

Author:
Varo

Created:
FEBRUARY 15, 2016

Made with:
HTML, CSS

11) Responstable 2.0: a responsive table solution

Demo Image: Responstable 2.0: a responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js

Tutorial/codes – Demo

Author:
Jordy van Raaij

Created:
FEBRUARY 18, 2014

Made with:
HTML, CSS and JavaScript

12) Crisp table

Demo Image: Crisp table

Style a Simple Data Table

Tutorial/codes – Demo

Author:
charlie hield

Created:
AUGUST 29, 2012

Made with:
HTML, CSS(SCSS) and JavaScript

PRICING TABLE

13) Animated Pricing Layout (hover over the graphic)

Demo Image: Animated Pricing Layout (hover over the graphic)

Designed and developed this pricing module. Thought it would be fun to add some background animation to differentiate between pricing levels.

Tutorial/codes – Demo

Author:
Kara

Created:
DECEMBER 01, 2016

Made with:
HTML, CSS(SCSS)

14) Particle Animation Pricing Table

Demo Image: Particle Animation Pricing Table

Particle Animation Pricing Table

Tutorial/codes – Demo

Author:
Kingsten Banh

Created:
NOVEMBER 29, 2015

Made with:
HTML, CSS(SCSS) and JavaScript

15) Adaptive Pricing Table

Demo Image: Adaptive Pricing Table

Adaptive Pricing Table

Tutorial/codes – Demo

Author:
Alex

Created:
JULY 29, 2016

Made with:
HTML, CSS(SCSS)

16) Pricing table ui with animation

Demo Image: Pricing table ui with animation

Pricing table ui with animation

Tutorial/codes – Demo

Author:
jamal hassonui

Created:
FEBRUARY 14, 2018

Made with:
HTML, CSS

17) Responsive pricing table CSS3

Demo Image: Responsive pricing table CSS3

Responsive pricing table CSS3

Tutorial/codes – Demo

Author:
Soufiane Abid

Created:
MARCH 15, 2016

Made with:
HTML, CSS

18) Horizontal Pricing table UI

Demo Image: Horizontal Pricing table UI

Simple pricing tables example using CSS3 transitions.

Tutorial/codes – Demo

Author:
Joseph Victory

Created:
AUGUST 26, 2014

Made with:
HTML, CSS

19) Clip Mask Pricing Table

Demo Image: Clip Mask Pricing Table

Neat interaction for a pricing table with medal grade descriptors using a clipping-mask effect.

Tutorial/codes – Demo

Author:
Jessica Biggs

Created:
MAY 18, 2016

Made with:
HTML, CSS(SCSS) and JavaScript

20) Monthly plan price tables

Demo Image: Monthly plan price tables

price tables

Tutorial/codes – Demo

Author:
Melissa Collins

Created:
MARCH 15, 2016

Made with:
HTML, CSS and JavaScript

21) Product Pricing Page Design

Demo Image: Product Pricing Page Design

Product page design with bold slanted header and pricing table

Tutorial/codes – Demo

Author:
Lewis Robinson

Created:
APRIL 12, 2016

Made with:
HTML(Pug), CSS(SCSS)

22) Individualistic Pricing Tables

Demo Image: Individualistic Pricing Tables

Individual uniqueness of each table developed using only HTML5/CSS3.

Tutorial/codes – Demo

Author:
Hassane Fall

Created:
APRIL 02, 2016

Made with:
HTML, CSS(SCSS)

23) Material Design Responsive Pricing Tables

Demo Image: Material Design Responsive Pricing Tables

UI – Material Design Responsive Pricing Table

Tutorial/codes – Demo

Author:
Renan Pupin

Created:
OCTOBER 02, 201

Made with:
HTML, CSS(SCSS)

24) Jumping on the glowing buttons Pricing table

Demo Image: CSS Price Cards

Jumping on the glowing buttons and box shadow band wagon with this one

Tutorial/codes – Demo

Author:
Jamie Coulter

Created:
JANUARY 28, 2016

Made with:
HTML(Haml), CSS(SCSS)

25) Responsive comparison table

Demo Image: Responsive comparison table

Responsive comparison table

Tutorial/codes – Demo

Author:
Adrian Jacob

Created:
SEPTEMBER 16, 2015

Made with:
HTML, CSS and JavaScript

26) Pricing table with css switch toggle

Demo Image: Pricing table with css switch toggle

Pricing table with css switch toggle

Tutorial/codes – Demo

Author:
Kijan Maharjan

Created:
APRIL 14, 2016

Made with:
HTML, CSS(Less) and JavaScript

27) Responsive price table based on Bootstrap 3 break points

Demo Image: Responsive price table based on Bootstrap 3 break points

Simple responsive price table using css3, bootstrap container width. It adapts on four container widths: fluid on mobile, 768px, 992px, 1200px.

Tutorial/codes – Demo

Author:
thingo

Created:
APRIL 27, 2014

Made with:
HTML, CSS

28) Price table – bootstrap

Demo Image: price table – bootstrap

Responsive price table made in bootstrap framework | Ready code for price table you can use easily.

Tutorial/codes – Demo

Author:
Digital Avinash

Created:
JULY 18, 2016

Made with:
HTML, CSS

29) Hover effect Pricing Table

Demo Image: Hover effect Pricing Table

Pricing Table

Tutorial/codes – Demo

Author:
Paulo Ribeiro

Created:
OCTOBER 27, 2018

Made with:
HTML, CSS(SCSS)

30) Material responsive pricing tables

Demo Image: Material responsive pricing tables

Material pricing tables

Tutorial/codes – Demo

Author:
Kreso Galic

Created:
JANUARY 13, 2016

Made with:
HTML, CSS(SCSS)

31) CSS only Pricing Table

Demo Image: Pricing Table

Pricing Table

Tutorial/codes – Demo

Author:
Joanez Andrades

Created:
JUNE 14, 2016

Made with:
HTML, CSS(SCSS)

32) Pricing table UI design

Demo Image: Pricing table UI design

Pricing table UI design

Tutorial/codes – Demo

Author:
Chouaib Blgn

Created:
SEPTEMBER 16, 2017

Made with:
HTML, CSS(SCSS)

33) Flat Pricing Card

Demo Image: Flat Pricing Card

Flat pricing card / pricing table item with box shadow and gradient effect.

Tutorial/codes – Demo

Author:
LLT

Created:
MAY 18, 2016

Made with:
HTML, CSS(SCSS)

34) Simple Pricing Table

Demo Image: Simple Pricing Table

Simple Pricing Table

Tutorial/codes – Demo

Author:
John Bowie

Created:
JANUARY 23, 2014

Made with:
HTML, CSS

35) Professional pricing table

Demo Image: Professional pricing table

html css pricing table

Tutorial/codes – Demo

Author:
Pali Madra

Created:
AUGUST 13, 2013

Made with:
HTML, CSS

36) Responsive Pricing plan layout using flexbox

Demo Image: Responsive Pricing plan layout using flexbox

Custom pricing tables using flexbox to make it squish oh so good.

Tutorial/codes – Demo

Author:
Eric Thayer

Created:
NOVEMBER 05, 2015

Made with:
HTML, CSS(SCSS)

37) Pricing Tables

Demo Image: Pricing Tables

Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities.

Tutorial/codes – Demo

Author:
Gerta Xhepi

Created:
MARCH 09, 2016

Made with:
HTML(Haml), CSS(SCSS)

38) HTML/CSS Pricing table

Demo Image: Pricing Table

HTML/CSS Pricing table

Tutorial/codes – Demo

Author:
aladin ben sassi

Created:
APRIL 26, 2014

Made with:
HTML, CSS

39) Flat Pricing Table

Demo Image: Flat Pricing Table

A simple flat pricing table with jQuery that enables the content to slide down onClick.

Tutorial/codes – Demo

Author:
Andy Tran

Created:
SEPTEMBER 01, 2014

Made with:
HTML(Haml), CSS(LESS) and JavaScript

40) Flat CSS price table

Demo Image: CSS Price Table

A flat CSS price table

Tutorial/codes – Demo

Author:
Robin Brons

Created:
MAY 10, 2013

Made with:
HTML, CSS

41) Bootstrap Pricing Table

Demo Image: Bootstrap Pricing Table

Bootstrap Pricing Table

Tutorial/codes – Demo

Author:
Sahar Ali Raza

Created:
MARCH 15, 2016

Made with:
HTML, CSS

42) Just simple pricing table

Demo Image: A just simple pricing table

A just simple pricing table

Tutorial/codes – Demo

Author:
Agustin Ortiz

Created:
OCTOBER 03, 2014

Made with:
HTML, CSS

43) Mystical computing company Pricing Table

Demo Image: Mystical computing company Pricing Table

Pricing table comparing 3 different plans for a mystical computing company

Tutorial/codes – Demo

Author:
Travis Williamson

Created:
AUGUST 15, 2017

Made with:
HTML, CSS

44) Flat Pricing Tables Design

Demo Image: Flat Pricing Tables Design

Flat Pricing Tables Design

Tutorial/codes – Demo

Author:
Mehmet mert

Created:
FEBRUARY 28, 2015

Made with:
HTML, CSS

45) Colorful pricing table

Demo Image: Colorful pricing table

Pricing tables

Tutorial/codes – Demo

Author:
catcod

Created:
AUGUST 14, 2014

Made with:
HTML, CSS

46) Responsive Flip Pricing Table

Demo Image: Responsive Flip Pricing Table

Responsive Flip Pricing Table to view month or year price.

Tutorial/codes – Demo

Author:
Shane Heyns

Created:
JANUARY 12, 2015

Made with:
HTML, CSS and JavaScript

47) CSS3 pricing table

Demo Image: CSS3 pricing table

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. From this demo you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup

Tutorial/codes – Demo

Author:
Arkev

Created:
APRIL 24, 2013

Made with:
HTML, CSS

PERIODIC TABLE

48) The Periodic Table Of Elements

Demo Image: The Periodic Table Of Elements

The periodic table of elements in lovely html and CSS, with some fun CSS3 transitions

Tutorial/codes – Demo

Author:
Brady Sammons

Created:
APRIL 05, 2013

Made with:
HTML, CSS(SCSS) and JavaScript

49) three.js css3d – periodic table info

Demo Image: three.js css3d – periodic table. info.

three.js css3d – periodic table. info.

Tutorial/codes – Demo

Author:
i2801

Created:
JULY 29, 2015

Made with:
HTML, CSS and JavaScript

The post table css html template first appeared on Coding Help - Codinghelp.in.

Create Responsive Timeline – Timeline using html/css

Coding Help — Sat, 26 Aug 2023 10:00:43 +0000

Before we start, let me share a screenshot of the timeline that we’re going to create in this guide. For this guide, we want to create a timeline in our about us page to showcase milestones of our company. You can use it to showcase just about anything – the process remains the same.

Create Responsive Timeline – Timeline using html/css

Vertical CSS Timeline is essentially a design pattern to showcase events, milestones and processes in a chronological fashion to infuse simplicity into storytelling. While it’s not new to the web design world, web designers have started using it more and more over the past few years to create better user experience.

Steps to Create CSS Timeline

Step #1 — Create a Custom Body Class

Step #2 — Use HTML Markup in Your Content

Step #3 — Add CSS Snippets for Timeline

Step #4 — Customize CSS for Media Queries

Create a Custom Body Class

We’re going to create a custom body class so we can use a different background color, page-width and other necessary HTML markups for the timeline page.

To do this, simply open the page where you want to create the timeline. Under the layout settings, you should see Custom Body Class. Simply enter a unique class name. For example, for this guide, our body class name is “timeline-body”. You can give any name as per your liking. Note: Make sure it doesn’t clash with any other classes you’re already using in your theme.

Timeline using html/css











  
    
      2017
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2016
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2015
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2012
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2011
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2007
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

The post Create Responsive Timeline – Timeline using html/css first appeared on Coding Help - Codinghelp.in.

How to display data in modal popup

Coding Help — Sat, 26 Aug 2023 09:54:35 +0000

Bootstrap is a CSS framework used for designing web pages. Bootstrap v4.5 is the latest release. Bootstrap along with HTML and JavaScript can be used to build responsive web pages.

A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used.

jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement.jQuery reduces the lines of code. The article demonstrates two examples where data is passed into the modal body from the HTML document body.

Example 1: In this approach, the web page consists of two input fields Name and Marks which accepts input from the user. The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method. Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.

How to display data in modal popup

Example 1:- Custom Alert Popup






	
	

	
	
	
	



	

		
		Name: 



		Marks: 



		
		

		
		
			
			
				
					
						
							Confirmation

Example 2:- Custom Alert Popup

Example 2: In this approach, a textarea is used to take input from the user. When the submit button is clicked, it invokes the jQuery function. The data entered the text area is extracted using the val() method into the text variable. This text string is passed to the modal body using the html() method of jQuery.






	
	

	
	
	
	



	

		
				

		
		
		

		
		
			
				
					
						
							Entered Data

The post How to display data in modal popup first appeared on Coding Help - Codinghelp.in.

Data Table List With Search, Previous and Next, Show number Entries || User List or Data Table List Css js html

Coding Help — Thu, 12 Jan 2023 17:59:56 +0000

User List or Data Table List Css js html || Data Table List With Search, Previous and Next, Show number entries.

Have you also created any website, User List or any type of list in which there is any type of data in Table Tag and you want to advance it, then you are reading the right article, today we are going to tell you that How to make a normal HTML table Advance, which has the option of Search, so that any data can be easily found, as well as how many data to show at a time, there should also be an option of Show of entries, so that the option is 10,20 ,50,100,5000 etcetera as well as have Previews button and Next Button to move the table back and forth.

Searching on individual columns can be performed using the columns().search() and column().search() methods. DataTables has a built in search algorithm referred to as “smart” searching and is designed to make searching the table data, easy to use for the end user.

numbers – Page number buttons only.
simple – ‘Previous’ and ‘Next’ buttons only.
simple_numbers – ‘Previous’ and ‘Next’ buttons, plus page numbers.
full – ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons.

The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables’ extensible pagination mechanism, the pagingType option.

There are six built-in options for which pagination controls DataTables should show:

Data Table List With Search, Previous and Next, Show number Entries

To make Advance any of your Data table list, follow the steps given below.

Step 1:- First of all, you have to download some Css, Js File for Table Tag, its link is given here under the name of Bootstrap Click Here For Download Bootstrap File

Step 2:- Inside the Bootstrap Zip File, you will get to see a total of five files, you will have to add all of them to the place where your Table Tag data is.

Step 3:- The sample of how you have to import or add all these files is given below.

Step 4:- Now the Table Tag on which you want to run this Bootstrap Code has to be replaced with the following code


                    
                        
                            
                                Sr. No.
                            
                            
                                VLE DETAILS
                            
                            
                                Type/Date
                            
                            
                                Created
                            
                            
                                Balance
                            
                            
                                
                            
                            
                                
                            

                        
                       
                    
                    
                        
                        
                            1.
                            ST9999999999
Agent Name
999999999
                            RETAILER
19/12/2022
02:23:32pm
APPROVED
                            ST9999999999
DISTRIBUTOR
                            Rs.0
                            
                             Delete
                            
                            
                             Update
                            
                       
                    
                





                    
                        
                            
                                Sr. No.
                            
                            
                                VLE DETAILS
                            
                            
                                Type/Date
                            
                            
                                Created
                            
                            
                                Balance
                            
                            
                                
                            
                            
                                
                            

                        
                       
                    
                    
                        
                        
                            1.
                            ST9999999999
Agent Name
999999999
                            RETAILER
19/12/2022
02:23:32pm
APPROVED
                            ST9999999999
DISTRIBUTOR
                            Rs.0
                            
                             Delete
                            
                            
                             Update

Sr. No.	VLE DETAILS	Type/Date	Created	Balance
1.	ST9999999999 Agent Name 999999999	RETAILER 19/12/2022 02:23:32pm APPROVED	ST9999999999 DISTRIBUTOR	Rs.0	Delete	Update

Sr. No.	VLE DETAILS	Type/Date	Created	Balance
1.	ST9999999999 Agent Name 999999999	RETAILER 19/12/2022 02:23:32pm APPROVED	ST9999999999 DISTRIBUTOR	Rs.0	Delete	Update

Step 5:-
to
you have to change then save and check
Step 6:- Then a table like this will come in front of you

hope that helped you thanks
The post Data Table List With Search, Previous and Next, Show number Entries || User List or Data Table List Css js html first appeared on Coding Help - Codinghelp.in.

+20 Free login page design using html and css

Coding Help — Sun, 11 Dec 2022 15:30:14 +0000

There are a lot of great HTML login form page templates out there. But which one is the right one for you? Here are some things to consider when making your decision:
– How easy is the template to use? You don’t want to spend hours trying to figure out how to make it work.
– How customizable is the template? Can you change the colors, font, and layout to match your brand?
– Is the template responsive?

Neumorphism Login Form

Dark White 3d Design Login page HTML CSS Page

More info / Download Get Hosting

login modal

Popup Login Page html css

More info / Download Get Hosting

Portal Login CSS

Simple Login Page white and background seen sign in page

More info / Download Get Hosting

Facebook Login Page

Facebook copy login page new design sing in page with html css

More info / Download Get Hosting

CSS Login Page

Best Desgin Login Page html css

More info / Download Get Hosting

Css / html Login form

UI Login Page best login source code html css

More info / Download Get Hosting

Pure CSS3 Login Form

Example of simple csc3 login form with SVG icon. In future it will add tabs functionality to switch from sign in to sign up and back.

More info / Download Get Hosting

Login and Signup Form HTML5 CSS3

This free css3 login page design template with Facebook and Twitter integration includes css, html5, and js templates. Social networking signup is also accessible with password show/hide options to facilitate password entry on-screen.

More info / Download Get Hosting

Clean login form

Black Color Login or Sign In Page html css

More info / Download Get Hosting

CSS3 HTML5 login panel

Username and password login page html csss

More info / Download Get Hosting

Day 001 Login Form

Login Page city background seen best login page.

More info / Download Get Hosting

Bootstrap Login Page

admin login section login page html css

More info / Download Get Hosting

Animated login form CSS3

very simple login page html css

More info / Download Get Hosting

Wavy login form

Cute CSS login form with vertical wave animation.

More info / Download Get Hosting

Web Chat Layout Login Page

More info / Download Get Hosting

Double slider Sign in/up Form

Normal Login Page Best Login Page HTML Css

More info / Download Get Hosting

Calm breeze login screen

Green Background with login page light color.

More info / Download Get Hosting

Login/Logout animation concept

Mobile Friendly Login page with background seen

More info / Download Get Hosting

Login Box Concept

Login page with black color light colors.

More info / Download Get Hosting

Responsive Login Form

Sunrise Color Background Login Page and Sing up Page

More info / Download Get Hosting

Bootstrap Snippet: Login Form

Simple White Color Login Page.

More info / Download Get Hosting

Popup Login & Signup with jQuery

Facebook and Google with login and sign in and sign up page, This Modal Window Popup login and Signup box is created with HTML5, CSS3 and leanModal.js plugin.

More info / Download Get Hosting

Random Login Form

Login Page with Background seen

More info / Download Get Hosting

Responsive Login Modal Window

Sign in Page and New Account Page

More info / Download Get Hosting

Material Compact Login Animation Login Google

More info / Download Get Hosting

Login & Sign Up Form Page html css

Sign In & Sign Up Form concept, click login and Sign Up to change language and observe the effect.

More info / Download Get Hosting

Absolute Center Login Page with Bootstrap

username password, term and condition forgot password Support

More info / Download Get Hosting
The post +20 Free login page design using html and css first appeared on Coding Help - Codinghelp.in.

Portal Login with Google Account using PHP

Coding Help — Tue, 25 Oct 2022 09:14:10 +0000

Portal Login with Google Account using PHP : Google OAuth Programming interface gives a simple and strong method for coordinating the login framework on the site. Google Login Programming interface permits the client to sign-in to the site utilizing their Google account without join on that site. Google login framework most certainly assists with expanding the supporters on your site.

Since these days practically all clients have a Google record and they can sign in with their Google account without enlistment on your site. The web designers can undoubtedly carry out the login and enrollment framework in the web application utilizing Google OAuth 2.0 and PHP. In this instructional exercise, we’ll demonstrate the way that you can coordinate client login framework with Google verification utilizing Google Programming interface PHP library.

Here we’ll give the bit by bit manual for carrying out login with Google account involving PHP and store the client data in the MySQL data set. Our model Google login script utilizes the Programming interface PHP Client Library to carry out Login with Google involving PHP in the web application. Prior to beginning to coordinate Login with Google utilizing PHP and MySQL, investigate the records structure.

Create Google API For Google Sign

Go to the Google API Console.

Select an existing project from the projects list, or click NEW PROJECT to create a new project:

Enter the Project Name.

Under the Project Name, you will see the Google API console automatically creates a project ID. Optionally you can change this project ID by the Edit link. But project ID must be unique worldwide.

Click on the CREATE button and the project will be created in some seconds.

In the left side navigation panel, select Credentials under the APIs & Services section.

Select the OAuth consent screen tab, specify the consent screen settings.

In Application name field, enter the name of your Application.

In Support email filed, choose an email address for user support.

In the Authorized domains, specify the domains which will be allowed to authenticate using OAuth.

Click the Save button.

Select the Credentials tab, click the Create credentials drop-down and select OAuth client ID.

In the Application type section, select Web application.

In the Authorized redirect URIs field, enter the redirect URL.

Click the Create button.

A dialog box will appear with OAuth client details, note the Client ID and Client secret. This Client ID and Client secret allow you to access the Google APIs.

Portal Login with Google Account using PHP

To log in to any of your portals from Google, you can apply this method by following the steps given below-

Create Database Table

To store the user account information from Google, a table needs to be created in the database. The following SQL creates a users table with some basic fields in the MySQL database to hold the Google profile information.

CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `oauth_provider` enum('google','facebook','twitter','linkedin') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'google', `oauthtoken` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `verifiedEmail` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL, `locale` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL, `picture` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Create config.php Files

config.php In this file, you have to set setClientId and setClientSecret key generated by Google Console, as well as mention the database details of the website on which you are going to use the login system.

setClientId('31369693453453453450838-ptsto5435344faeu6644353454353ejfp9lgg143534542v8d750it9.apps.googleusercontent.com'); $google_client->setClientSecret('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mZs43534543543xEbfrJ07N'); $google_client->setRedirectUri('https://example.com/google/'); $google_client->addScope('email'); $google_client->addScope('profile'); session_start(); // Connect to database $hostname = "localhost"; $username = "u336260043"; $password = "123"; $database = "u336260043"; $conn = mysqli_connect($hostname, $username, $password, $database); ?>

Create index.php files

In the index.php file, you will need to include Library, check the mail through the user details of the portal on which you are setting up the login system, then give the permission to log in, in this you have to check the database name , and which is your login table, you have to edit it.

fetchAccessTokenWithAuthCode($_GET["code"]); if(!isset($token['error'])){ $google_client->setAccessToken($token['access_token']); $_SESSION['access_token']=$token['access_token']; $google_service = new Google_Service_Oauth2($google_client); $data = $google_service->userinfo->get(); $_SESSION['user_email_address'] =$data['email']; $_SESSION['user_first_name'] =$data['given_name']; $_SESSION['user_last_name'] =$data['family_name']; $_SESSION['user_image'] =$data['picture']; $_SESSION['verifiedEmail'] =$data['verifiedEmail']; $_SESSION['login_button'] =false; // checking if user is already exists in database $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'"; $results = mysqli_query($connection, $sql); if (mysqli_num_rows($results) > 0) { $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';"; // user is exists $result = mysqli_query($connection, $qruiry); } else { echo ''; } } } if(isset($_SESSION['login_button'])){ $login_button=$_SESSION['login_button']; // checking if user is already exists in database $sql = "SELECT * FROM loginusers WHERE email_id ='{$_SESSION['user_email_address']}'"; $results = mysqli_query($connection, $sql); if (mysqli_num_rows($results) > 0) { $qruiry = "UPDATE `loginusers` SET `oauthtoken` = '{$_SESSION['access_token']}', `verifiedEmail` = '{$_SESSION['verifiedEmail']}' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';"; // user is exists $result = mysqli_query($connection, $qruiry); $usrdata = mysqli_fetch_assoc(mysqli_query($connection, "SELECT * FROM `loginusers` WHERE `email_id` = '{$_SESSION['user_email_address']}' LIMIT 1")); $usrrsql = $connection->prepare("select count(*) from loginusers WHERE email_id = ?"); $usrrsql->execute([$_SESSION['user_email_address']]); $login_key = md5(microtime().$_SERVER['REMOTE_ADDR']); $_SESSION['login_key'] = $login_key; $_SESSION['username'] = $usrdata['username']; if($usrdata['status']=='approved'||$usrdata['status']=='paywait'){ $qruirys = "UPDATE `loginusers` SET `login_key` = '$login_key' WHERE `loginusers`.`email_id` = '{$_SESSION['user_email_address']}';"; $results = mysqli_query($connection, $qruirys); if($_REQUEST['remember']==1){ setcookie('username',$_SESSION['username'], time() + (86400 * 7), "/"); // 86400 = 1 day } echo ' '; } } else { $google_client->revokeToken(); session_destroy(); echo ''; } }else{ $login_button = true; } ?>

Download Vendor/autoload.php

The complete source code for logging in from google or gmail is given below, you can download, and implement it in your portal.

Google sign in source code download

The post Portal Login with Google Account using PHP first appeared on Coding Help - Codinghelp.in.

Search value from Input box in mysql php

Coding Help — Sat, 17 Sep 2022 11:39:15 +0000

You can create a simple live database search functionality utilizing the Ajax and PHP, where the search results will be displayed as you start typing some character in search input box.

In this tutorial we’re going to create a live search box that will search the countries table and show the results asynchronously. But, first of all we need to create this table.

Search value from Input box in mysql php

To find any kind of value from any database, you will need, first database from which you will search the value, second you want to implement this script in which index file, you want that page, as well as a hidden-search.php file has to be created from where the output of the value entered by the visitor will be forwarded to you on the index.php page

Stage 1: Making the DataBase Table In PHP My Admin

Execute the accompanying SQL question to make the nations table in your MySQL data set.

CREATE TABLE state_name ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );

In the wake of making the table, you want to populate it for certain information utilizing the SQL Supplement articulation. On the other hand, you can download the prepopulated nations table by tapping the download button and import it in your MySQL data set.

Stage 2: Making the Pursuit Structure

Presently, we should make a basic web interface that permits client to live hunt the names of nations accessible in our nations table, very much like an autocomplete or typeahead.

Make a PHP record named “index.php” and put the accompanying code within it.

PHP Live MySQL Database Search

Each time the substance of search input is changed or keyup occasion happen on search input the jQuery code (line no-47 to 67) sent an Ajax solicitation to the “backend-search.php” document which recovers the records from nations table connected with the looked through term. Those records later will be embedded inside a
by the jQuery and showed on the program.

Stage 3: Handling Search Question in Backend

Also, here’s the source code of our “hidden-search.php” document which look through the data set in light of question string sent by the Ajax demand and send the outcomes back to program.

0){ // Fetch result rows as an associative array while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ echo "" . $row["name"] . ""; } } else{ echo "No matches found"; } } else{ echo "ERROR: Could not able to execute $sql. " . mysqli_error($coorection); } } // Close statement mysqli_stmt_close($stmt); } // close connection mysqli_close($coorection); ?>

The SQL SELECT proclamation is utilized in blend with the LIKE administrator (line no-16) to find the matching records in nations data set table. We’ve carried out the pre-arranged articulation for better hunt execution as well as to forestall the SQL infusion assault.
The post Search value from Input box in mysql php first appeared on Coding Help - Codinghelp.in.

Google Recaptcha Site Key and Secret Key Generate and Integrate

Coding Help — Sat, 02 Apr 2022 10:26:37 +0000

Google Recaptcha Site Key and Secret Key Generate

If you also want to put I am not robot captcha on your site, then you have to first generate the site and script for your website, for that follow the steps given below.

Step 1: Open Google and search it by entering google recaptcha

Step 2: On searching google recaptcha you will get Recaptcha Admin will appear, click on it

Step 3: Here you have to enter the domain name of your site in the label and the domain on which you want to put this captcha.

Step 4: reCAPTCHA v2 Tick the “I’m not a robot” checkbox let it be

Step 5: Tick on “Accept the reCAPTCHA Terms of Service” then click on submit button

Google Recaptcha Site Key and Secret Key Integrate

Copy and paste this script code in the head tag of the page of your website on which you want to put this captcha.

src="https://www.google.com/recaptcha/api.js" async defer>

On the page of your website where you want to display “I’m not a robot captcha, copy the code of the following div tag on that location and paste it in the place where you want to display “I’m not a robot captcha” want to

class="g-recaptcha" data-sitekey="your_site_key">

In data-sitekey, enter the site you generated for your website.

For Example

</span><span class="pln">reCAPTCHA demo: Simple page</span><span class="tag"> src="https://www.google.com/recaptcha/api.js" async defer> action="?" method="POST"> class="g-recaptcha" data-sitekey="your_site_key"> type="submit" value="Submit">

Google recaptcha secret key page performance

When you submit by verifying I’m not a robot captcha from one page to another page or in the same page, it takes the page load and goes to another page, then on going to that page how will you know that the captcha is verified? The code given below has to be used for verification of the note has come or has been done,

Paste this code in the page on which you enter the link given in the action tag in the HTML form in that page

$secretKey = "enter your secretkey";
$responseKey = $_POST['g-recaptcha-response'];
$UserIP = $_POST['REOMTE_ADDR'];
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$UserIP";

$response = file_get_contents($url);
$response = json_decode($response);

if (isset($_POST['submit']) && $response->success)
{

?>

When the captcha is verified, then what code do you want to show, enter that code between this above and the code given below

}else{ echo '';
} ?> Enter this code at the bottom of the same page The post Google Recaptcha Site Key and Secret Key Generate and Integrate first appeared on Coding Help - Codinghelp.in.