Captcha merupakan suatu fitur yang penting digunakan di saat kita membuat suatu form seperti contact us, register dan lain sebagainya. Fitur tersebut diperlukan agar website yang kita buat tidak diserang script bot otomatis untuk memasukkan inputan secara terus menerus sehingga menjadi spam bagi website kita. Dalam artikel kali ini saya akan menjelaskan bagaimana cara membuat captcha sederhana dengan menggunakan plugin dari https://github.com/mewebstudio/captcha. Google juga sudah menyediakan captcha namun bagaimana cara menggunakan captcha dari google akan saya jelaskan pada artikel-artikel berikutnya.
#INSTALASI
Cara instalasi plugin masih seperti biasa dengan menggunakan perintah composer seperti berikut ini.
composer require mews/captcha
Seperti biasanya jalankan perintah composer tersebut dengan menggunakan command prompt pada direktori program yang anda buat. Setelah selesai proses instalasi tersebut langkah selanjutnya adalah melakukan registrasi plugin tersebut dengan cara menambahkan kode berikut di dalam direktori config/app.php.
Tambahkan kode berikut pada bagian providers
'providers' => [
// ...
Mews\Captcha\CaptchaServiceProvider::class,
]
dan kode berikut pada bagian aliases
'aliases' => [
// ...
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]
#CARA PENGGUNAAN
Di sini saya akan memberikan contoh sederhana penggunaan plugin ini dalam form dan bagaimana cara melakukan pengecekan captcha pada form tersebut. Yang pertama buatlah route terlebih dahulu seperti contoh di bawah ini
Route::get('/form-captcha','CaptchaController@index');
Route::post('/form-captcha','CaptchaController@submit');
Route dengan method GET untuk menampilkan form dengan captcha sedangkan route dengan method POST untuk melakukan validasi form.
Kemudian buatlah Controller dengan CapctchaController.php dan tambahkan action berikut ini
public function index()
{
return view('captcha');
}
Langkah selanjutnya adalah membuat file view dengan nama captcha.blade.php seperti kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Captcha</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
{{ Form::open(['method' => 'POST','class' => 'form-horizontal form-label-left']) }}
<br/>
<div class="form-group">
<label class="button-font">Captcha :</label>
<?=captcha_img();?>
</div>
<div class="form-group">
<input type="text" class="form-control" name="captcha">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Submit</button>
</div>
{{ Form::close() }}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@include('sweet::alert')
</body>
</html>
Di dalam view tersebut saya hanya menyertakan 1 input captcha dan 1 submit button hanya sebagai contoh saja. Nantinya dapat anda sesuaikan sendiri input apa saja yang anda perlukan dalam form tersebut.
Cara pengecekan dari captcha tersebut adalah sebagai berikut
public function submit(Request $request){
$rules = ['captcha' => 'required|captcha'];
$validator = Validator::make(Input::all(), $rules);
if ($validator->fails())
{
echo '<p style="color: #ff0000;">Incorrect!</p>';
}
else
{
echo '<p style="color: #00ff30;">Matched :)</p>';
}
}
Contoh kode di atas akan mencetak kata Incorrect saat captcha tidak sesuai dan mencetak katak Matched saat captcha yang diinputkan sesuai. Tambahkan include berikut pada Controller yang anda buat agar validasi dapat berjalan.
use Validator;
use Illuminate\Support\Facades\Input;
Contoh di atas adalah contoh sederhana cara penggunaan dari plugin captcha ini.
Bagaimana cara untuk membuat konfigurasi pada plugin ini? Caranya adalah dengan menjalankan perintah dibawah ini pada command prompt
php artisan vendor:publish
Nantinya akan terbentuk file captcha.php yang terdapat di dalam direktori config. Di dalam file tersebut anda dapat melakukan konfigurasi yang anda perlukan seperti mengubah panjang captcha, lebar, warna, dan lain sebagainya. Di dalam file tersebut anda juga dapat mengetahui jenis-jenis captcha apa saja yang terdapat di dalam plugin ini.
Secara default captcha akan menggunakan tipe matematika. Untuk menggunakan captcha tipe lain caranya adalah sebagai berikut
captcha_img('flat');
Di mana flat adalah jenis captcha yang akan anda gunakan.
Demikianlah penjelasan pada artikel Tutorial Laravel 5.5 - Membuat Captcha Sederhana ini. Untuk tipe-tipe captcha lainnya dapat anda coba-coba sendiri dan anda dapat menentukan sendiri jenis mana yang akan anda gunakan. Semoga penjelasan saya pada artikel ini dapat dimengerti dan selamat mencoba.
Tutorial Laravel 5.5 - Membuat Captcha Sederhana
Reviewed by Donny Winarto
on
February 23, 2019
Rating:
Reviewed by Donny Winarto
on
February 23, 2019
Rating:
ingin mendapatkan uang banyak dengan cara cepat ayo segera bergabung dengan kami di f4n5p0k3r
ReplyDeletePromo Fans**poker saat ini :
- Bonus Freechips 5.000 - 10.000 setiap hari (1 hari dibagikan 1 kali) hanya dengan minimal deposit 50.000 dan minimal deposit 100.000 ke atas
- Bonus Cashback 0.5% dibagikan Setiap Senin
- Bonus Referal 20% Seumur Hidup dibagikan Setiap Kamis
Ayo di tunggu apa lagi Segera bergabung ya, di tunggu lo ^.^
you are stupid, ini konten pendidikan masih aja iklan judi
Deleteterimakasih gan tutorialnya
ReplyDelete