Form Login Php Menggunakan Google ReCaptha

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
August 31, 2018




Selamat malam sobat blogger kali ini kami akan share bagaimanamembuat form login menggunakan Google Recaptcha. Pada artikel sebelumnya kami telah membahas bagaimana membuat form login menggunakan captcha.



Read More :
1. Membuat form login menggunakan Captcha

Langsung saja ada beberapa yang mesti kalian persiapkan di antaranya buat file dengan nama.
1. config.php
2. index.php
3. dashbord.php
4. logout.php

Tetapi kita harus mempersiapkan databasenya, buat database dengan nama loginn kemudian masukkan isi database berikut.


 -- phpMyAdmin SQL Dump
-- version 4.7.7
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generation Time: Jul 25, 2018 at 01:06 AM
-- Server version: 10.0.35-MariaDB
-- PHP Version: 5.6.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
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 utf8mb4 */;

--
-- Database: `armg3295_cms`
--

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

--
-- Table structure for table `admin`
--

CREATE TABLE `admin` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `updationDate` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `admin`
--

INSERT INTO `admin` (`id`, `username`, `password`, `updationDate`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', '15-05-2018 05:36:43 PM');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `admin`
--
ALTER TABLE `admin`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `admin`
--
ALTER TABLE `admin`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

/*!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 */; 

Kedua masukkan kodinga di bawah pada file config.php fungsi file ini adalah untuk koneksi kedatabase.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'loginn');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Ketiga masukkan kodingan dibawah pada file index.php, file ini berfungsi sebagai form sekaligus kalian harus melakukan beberapa konfigurasi di antaranya kalian harus mengganti YOUR SECRET KEY dengan secret key google recaptcha kalian dan YOUR SITE KEY dengan site google recaptcha kalian.

 <?php session_start();
error_reporting(0);
include("config.php");
if(isset($_POST['submit'])) {
  $_SESSION['submit']='';
}
if(isset($_POST['submit']))
{
  $captcha = $_POST['g-recaptcha-response'];
  if (!$captcha) {
    echo "<script>alert('Incorrect verification code');</script>" ;;
  } else {
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR SECRET KEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

    if ($response.success != true) {
      echo 'You are spammer ! Get the @$%K out!!';
    } else {
   $extra="dashbord.php";//
 }
 $username=$_POST['username'];
 $password=md5($_POST['password']);
 $ret=mysqli_query($con,"SELECT * FROM login WHERE username='$username' and password='$password'");
 $num=mysqli_fetch_array($ret);
 if($num>0)
 {
$extra="dashbord.php";//
$_SESSION['alogin']=$_POST['username'];
$_SESSION['id']=$num['id'];
$host=$_SERVER['HTTP_HOST'];
$uri=rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
header("location:http://$host$uri/$extra");
exit();
}

else
{
  $_SESSION['errmsg']="Invalid username or password";
  $extra="index.php";
  $host  = $_SERVER['HTTP_HOST'];
  $uri  = rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
  header("location:http://$host$uri/$extra");
  exit();
}
}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
 <script src='https://www.google.com/recaptcha/api.js'></script>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
 <title>Login Form With ReCaptcha</title>
 <meta name="generator" content="Bootply" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/styles.css" rel="stylesheet">
</head>
<body>
  <!--login modal-->
  <div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h1 class="text-center">Login</h1>
        </div>
        <div class="modal-body">
          <form method="post" class="form col-md-12 center-block">
            <div class="form-group">
              <input class="form-control" type="text" id="inputEmail" name="username" placeholder="Username" autofocus>
            </div>
            <div class="form-group">
              <input class="form-control" type="password" id="inputPassword" name="password" placeholder="Password">
            </div>
            <div class="form-group">
              <div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>
            </div>
            <div class="form-group">
              <button type="submit" name="submit" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
            </div>
          </form>
        </div>
      </div>

      <br/>
      <center>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- arman.my.id -->
        <ins class="adsbygoogle"
        style="display:inline-block;width:970px;height:250px"
        data-ad-client="ca-pub-2600957993665650"
        data-ad-slot="2851708447"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </center> 
    </div>
  </div>
  <!-- script references -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html> 

Keempat buat masukkan kodingan dibawah pada file dashbord.php file ini berfungsi ketika kalian berhasil melakukan login.

 <!DOCTYPE html>
<html>
<head>
  <title>Form With ReCaptcha</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
   <a class="navbar-brand" href="logout.php">Logout</a>
    </div>
 </div>
</nav>
<br />
<h2 align="center">Welcome To Example Form With ReCaptcha</h2>
</div>
</body>
</html> 

Kelima masukkan kodingan berikut kedalam file logout.php, pasti teman-teman sudah mengetahui fungsinya jadi tidak perlu saya jelaskan.

 <?php
session_start();
session_unset();
//session_destroy();
$_SESSION['msg']="You have logged out successfully..!";
?>
<script language="javascript">
document.location="index.php";
</script> 

Jika teman-teman ingin melihat langsung demonya silahkan klik button demo di bawah dan teman-teman juga bisa langsung mendownloadnya.

DEMO                                     DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi kalian semua, jangan lupa share keteman kalian.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed