Cara Implementasi Captha Code Pada Laravel 5
Jurnalcode.com

Cara Implementasi Captha Code Pada Laravel 5

Cara Implementasi Captha Code Pada Laravel 5


Jurnalcode : Seperti yang kita ketahui ,  menambahkan kode captcha pada aplikasi atau website adalah salah satu penerapan  tingkat keamanan, Capta ini akan meningkatkan keamanan aplikasi Anda. Umumnya kita menerapkan kode captcha dalam daftar dan form login untuk mencegah bot dan crawler.

Saya menggunakan paket kompos mews / captcha untuk menghasilkan gambar kode captcha. mews juga memberikan validasi untuk captcha. Paket ini sangat membantu. Jadi jika Anda juga ingin membuat captcha di aplikasi php Anda ikuti langkah di bawah ini:

1. Langkah Pertama Installasi Laravel

untuk Project Laravel saya menggunakan Composer. silahkan ikuti perintah berikut :

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

 

2. Install Captha , Kali ini saya menggunakan Mews Captha

composer require mews/captcha

 

3. Setelah selesai install Package Mews Captha silahkan buka file config/app.php dan Tambahkan Service provider dan aliases seperti code dibawah :

'providers' => [
	....

	MewsCaptchaCaptchaServiceProvider::class,
],

'aliases' => [
	....

	'Captcha' => MewsCaptchaFacadesCaptcha::class,
],

 

4. Langkah selanjutnya buat Routes silahkan buka file routes/web dan tambahkan code berikut :

Route::get('my-captcha', '[email protected]')->name('myCaptcha');
Route::post('my-captcha', '[email protected]')->name('myCaptcha.post');
Route::get('refresh_captcha', '[email protected]')->name('refresh_captcha');

 

5. Kemudian silahkan buat sebuah Controller , perhatikan code dibawah :

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class HomeController extends Controller
{
    public function myCaptcha()

    {
        return view('myCaptcha');
    }


    public function myCaptchaPost(Request $request)
    {
        request()->validate([
            'email' => 'required|email',
            'password' => 'required',
            'captcha' => 'required|captcha'
        ],
        ['captcha.captcha'=>'Invalid captcha code.']);
        dd("You are here :) .");
    }

    public function refreshCaptcha()
    {
        return response()->json(['captcha'=> captcha_img()]);
    }
}

 

6. Langkah terakhir adalah membuat View . berikut adalah codenya :

<html lang="en">
<head>
    <title>jurnalcode Captha</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>


<body>

<div class="container" style="margin-top: 50px">

   <div class="col-md-8 col-md-offset-2">

      <div class="panel panel-default">

          <div class="panel-heading">Login</div>


          <div class="panel-body">

              <form class="form-horizontal" method="POST" action="{{ route('myCaptcha.post') }}">

                  {{ csrf_field() }}


                  <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

                      <label for="email" class="col-md-4 control-label">E-Mail Address</label>


                      <div class="col-md-6">

                          <input id="email" type="text" class="form-control" name="email" value="{{ old('email') }}">


                          @if ($errors->has('email'))

                              <span class="help-block">

                                  <strong>{{ $errors->first('email') }}</strong>

                              </span>

                          @endif

                      </div>

                  </div>


                  <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

                      <label for="password" class="col-md-4 control-label">Password</label>


                      <div class="col-md-6">

                          <input id="password" type="password" class="form-control" name="password">


                          @if ($errors->has('password'))

                              <span class="help-block">

                                  <strong>{{ $errors->first('password') }}</strong>

                              </span>

                          @endif

                      </div>

                  </div>


                  <div class="form-group{{ $errors->has('captcha') ? ' has-error' : '' }}">

                      <label for="password" class="col-md-4 control-label">Captcha</label>


                      <div class="col-md-6">

                          <div class="captcha">

                          <span>{!! captcha_img() !!}</span>

                          <button type="button" class="btn btn-success btn-refresh"><i class="fa fa-refresh"></i></button>

                          </div>

                          <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">


                          @if ($errors->has('captcha'))

                              <span class="help-block">

                                  <strong>{{ $errors->first('captcha') }}</strong>

                              </span>

                          @endif

                      </div>

                  </div>


                  <div class="form-group">

                      <div class="col-md-8 col-md-offset-4">

                          <button type="submit" class="btn btn-primary">

                              Submit

                          </button>

                      </div>

                  </div>

              </form>

          </div>

      </div>

  </div>

</div>

</body>


<script type="text/javascript">


$(".btn-refresh").click(function(){

  $.ajax({

     type:'GET',

     url:'/refresh_captcha',

     success:function(data){

        $(".captcha span").html(data.captcha);

     }

  });

});


</script>


</html>

 

Sekian Tutorial dari saya , semoga bermanfaat . salam coder

 

.

Ayo Komentar