[yii2] Cara refresh captcha dengan tombol atau reload halaman

21 April 2021

Home » Blog » Teknologi » [yii2] Cara refresh captcha dengan tombol atau reload halaman

Secara default, captcha tidak disertai dengan tautan / tombol “refresh” yang memungkinkan Anda untuk refresh gambar . Demikian juga ketika reload halaman gambar yang muncul tetap sama. Hal Ini bisa membuat frustasi karena seringkali gambar 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.

TOP TUTORIALS:  [yii2] Cara membuat ekstensi baru tanpa kontrol versi atau Git

1. Membuat CaptchaRefreshable

Langkah pertama yang perlu kita lakukan adalah membuat class CaptchaRefreshable pada direktori models atau commons\models jika Anda menggunakan 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 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