Secara default, captcha Yii2 tidak disertai dengan tautan / tombol “refresh” yang memungkinkan Anda untuk refresh gambar captcha. Demikian juga ketika reload halaman gambar captcha yang muncul tetap sama. Hal Ini bisa membuat frustasi karena seringkali gambar captcha tidak bisa terbaca (bahkan oleh manusia).
Pada tutorial kali ini, kita akan belajar membuat tautan/tombol “refresh” gambar captcha dan juga melakukan refresh gambar captcha setiap kali reload halaman.
1. Membuat CaptchaRefreshable
Langkah pertama yang perlu kita lakukan adalah membuat class CaptchaRefreshable pada direktori models atau commons\models jika Anda menggunakan yii2 advanced template.
'refresh-captcha',
'class' => 'text-small' // .text-small { font-size: 0.85em; } - include in your CSS
]);
$this->template = '
{image} ' . $refresh_a . '
{input}
';
parent::init();
}
/**
* Register the refresh JS
*/
public function registerClientScript()
{
$view = $this->getView();
$view->registerJs(" $('#refresh-captcha').on('click', function(e){ e.preventDefault(); $('#verify-code img').yiiCaptcha('refresh'); }) ");
parent::registerClientScript();
}
}
2. Membuat CaptchaRefreshableAction
Kemudian kita buat class CaptchaRefreshableAction pada direktori models atau commons\models jika Anda menggunakan yii2 advanced template.
request->isAjax) {
return true;
}
return parent::validate($input, $caseSensitive);
}
}
3. Menambahkan widget pada views/site/login.php
.............
.............
.............
.............
'login-form']); ?>
.............
.............
= $form->field($model, 'verifyCode')->widget(\common\models\CaptchaRefreshable::class) ?>
.............
.............
4. Menambahkan action pada controller/SiteController.php
.............
.............
class SiteController extends Controller
{
.............
.............
public function actions()
{
return [
.............
.............
'captcha' => [
'class' => 'common\models\CaptchaRefreshableAction',
],
.............
.............
];
}
.............
.............
}
5. Menambahkan action untuk refresh captcha pada reload halaman
Pada langkah 1-4 tersebut di atas, kita sudah berhasil membuat tombol/tautan untuk melakukan refresh gambar captcha. Permasalahannya adalah ketika reload halaman, gambar captcha yang ditampilkan tidak berubah. Agar gambar captcha berubah setiap reload halaman perlu kita tambahkan script pada fungsi login di controller/SiteController.php
.............
.............
class SiteController extends Controller
{
.............
.............
public function actionLogin()
{
$this->createAction('captcha')->getVerifyCode(true);
.............
.............
}
.............
.............
}
0 Komentar