Integrasi Laravel 5.8 Dengan Google Recapcha V2
Software Engineer | Blogger | Creator of RubyPedia.com
1 September 2019

Integrasi Google Recaptcha v2 Dengan Framework Laravel 5.8 - Halo teman-teman semuanya, pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana mengintegrasikan aplikasi laravel kita dengan google recpatcha v2.

Pada dasarnya recaptcha umumnya digunakan disebuah aplikasi atau website unyuk memvalidasi atau memverifikasi pengguna itu apakah manusia atau robot.

Jadi pada pembahasan nanti, kita akan menyimpan data kedalam database, akan tetapi sebelum kita menyimpan data tersebut kita verifikasi terlebih dahulu dengan google recaptcha.

Jadi kurang lebih dalam artikel kali ini ada beberapa pembahasan diantaranya:

  • Installasi Laravel 5.8
  • Mengatur koneksi database
  • Install dependency google recaptcha v2 dengan composer
  • Membuat sebuah Model
  • Membuat sebuah controller
  • Membuat sebuah view balde
  • Membuat sebuah route
  • Menjalankan server
  • Screenshoot dan Source Code

Oke, langsung saja kita masuk ke tahap awal, kita bisa menginstall dan mengunduh laravel dengan composer, berikut perintahnya

composer create-project --prefer-dist laravel/laravel RecaptchaLaravel

Setelah proses instalasi berjalan sampai selesai, sekarang waktunya kita mengatur kridensial database, silahkan buka file .env

Dan rubah bagian database menjadi seperti berikut ini:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=nama_database
DB_USERNAME=username_database
DB_PASSWORD=password_database

Oke, setelah kita berhasil mengatur kridensial databasenya, sekarang waktunya kita mengunduh atau menginstall dependency atau paket dari google recaptcha dengan composer. silahkan jalankan perintah berikut ini:

composer require anhskohbo/no-captcha

Setelah proses installasi berjalan dengan selesai, sekarang kalian buka file config/app.php, silahkan tambahkan Provider dan alias, kurang lebih seperti ini:

'providers' => [
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
],

 'aliases' => [
 'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,
 ]  

Sekarang kita akan membuat Google Recaptcha site_key dan screet_key, kita bisa langsung ke situs resmi dari google di : https://www.google.com/recaptcha/admin

Silahkan kalian daftar, kemudian daftarnkan domain kalian disitu, jika kalain masih menggunakan localhost, kalian bis masukkan domain dengan 127.0.0.1

Sekarang, silahkan kalian buka file .env dan tambahkan kode berikut ini:

NOCAPTCHA_SITEKEY = secret_site_key 
NOCAPTCHA_SECRET = secret_key

karena kita akan menggunakan database untuk menyimpan data, maka terlebih daulu kita membuat sebuah model baru berserta file migrationnya. Jalankan perintah dibawah ini:

php artisan make:model Contact --migration

Perintah diatas, akan membuat sebuh model baru bernama Contact.php dan file migrasi baru di folder database/migrations

Silahkan buka file migration yang baru saja tergenerate, dan ubah kodenya menjadi seperti ini:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->text('message');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

Kemudian kalian bisa jalankan perintah migrasi, dengan cara sebagai berikut:

php artisan migrate

Perintah diatas, akan melakukan sebuah migrasi ke database dan membuat sebuah table baru dengan nama contacs dengan field atau column seperti yang sudah kita definisikan di file migrasi diatas.

Sekarang kita buka file Contact.php di folder app/Contact.php, silahkan ubah kodenya menjadi seperti berikut ini:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    protected $table = "contacts";
    protected $fillable = ["name", "email", "message"];
}

Kemudian, kita akan membuat sebuah controller baru dengan nama ContactController, untuk membuatnya, kalian bisa jalankan perintah dibawah ini:

php artisan make:controller ContactController

Perintah diatas, akan mengenerate sebuah controller baru didalam folder app/Http/Controller/ContactController.php, kemudian kalian ubah kode di dalam ContactController.php menjadi seperti berikut ini:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Contact;

class ContactController extends Controller
{
    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index()
    {
        return view('contact');
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'name'    => 'required',
            'email'   => ‘required|email',
            'message' => 'required',
            'g-recaptcha-response' => 'required|captcha',
        ]);

        Contact::create([
            'name'      => $request->input('name'),
            'email'     => $request->input('email'),
            'message'   => $request->input('message'),
        ]);
        return redirect()->route(‘contact.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }
}

Setelah itu, kita tinggal membuat sebuah view di folder resources/views/, beri nama contact.blade.php, dan masukan kode berikut ini:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 5.8 Google Recatpcha</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
    <style>
        .error{ color:red; }
    </style>
</head>
<body>
<div class="container">
    <h2 style="margin-top: 10px;" class="text-center">Laravel 5.8 Google Recatpcha  - RubyPedia.com</h2>
    <div class="row justify-content-center">
        <div class="col-md-8">
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
            @endif
            <form id="captcha-form" method="POST" action="{{ route('contact.store') }}">
                @csrf
                <div class="form-group">
                    <label>Nama Lengkap</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Masukkan Nama lengkap">
                    <span class="text-danger">{{ $errors->first('name') }}</span>
                </div>
                <div class="form-group">
                    <label>Alamat Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="Masukkan Alamat Email">
                    <span class="text-danger">{{ $errors->first('email') }}</span>
                </div>
                <div class="form-group">
                    <label>Pesan</label>
                    <textarea class="form-control" name="message" rows="3" placeholder="Masukkan Pesan Anda">{{ old('message') }}</textarea>
                    <span class="text-danger">{{ $errors->first('message') }}</span>
                </div>
                <div class="form-group">
                    <label for="captcha">Captcha</label>
                    {!! NoCaptcha::renderJs() !!}
                    {!! NoCaptcha::display() !!}
                    <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Kirim</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Setelah semua konfigurasi diatas sudah selesai, sekarang kita lanjutkan membuat sebuah route baru, silahkan buka routes/web.php, tambahkan kode berikut ini:

Route::get('contact', 'ContactController@index')->name('contact.index');
Route::post('contact', 'ContactController@store')->name('contact.store');

Perintah atau route diatas akan membuat sebuah route dengan 2 metode, yaitu GET dan POST.

Oke, sekarang kita coba jalankan aplikasi laravel kita, dengan cara mengetikan perintah dibawah ini:

php artisan serve

Jika berhasil, kalian bisa melihat aplikasinya di

http://localhost:8000/contact

Maka kurang lebih tampilannya seperti berikut ini:

Jika error, tampilannya seperti ini:

Jika berhasil, tampilannya seperti ini:

Kalian bisa mengunduh projectnya di repository GiHub berikut ini :

https://github.com/maulayyacyber/Laravel-Recaptcha-Google

Blog ini telah dibaca sebanyak 267 kali
Laravel Laravel Recaptcha Captcha Google Captcha Laravel

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus