Lewati ke konten
logo bardimin 300x60 1
  • Home
  • Blog
  • Kategori
    • Android
    • Database
    • Framework
    • Hardware
    • Network
    • Software
    • Teknik
    • Teknologi
    • Windows
  • Bahasa IndonesiaBahasa Indonesia
    • Bahasa IndonesiaBahasa Indonesia
    • EnglishEnglish
logo bardimin 300x60 1
  • Home
  • Blog
  • Kategori
    • Android
    • Database
    • Framework
    • Hardware
    • Network
    • Software
    • Teknik
    • Teknologi
    • Windows
  • Bahasa IndonesiaBahasa Indonesia
    • Bahasa IndonesiaBahasa Indonesia
    • EnglishEnglish

[yii2] Cara refresh captcha dengan tombol atau reload halaman

Framework, Teknologi / 21 April 2021 31 Januari 2022

Daftar Isi

  • 1. Membuat CaptchaRefreshable
  • 2. Membuat CaptchaRefreshableAction
  • 3. Menambahkan widget pada views/site/login.php
  • 4. Menambahkan action pada controller/SiteController.php
  • 5. Menambahkan action untuk refresh captcha pada reload halaman

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.

TOP TUTORIALS:  [yii2] Membuat Form Login dengan Captcha

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.

<?php

namespace common\models;

class CaptchaRefreshable extends \yii\captcha\Captcha
{
    /**
     * Overrides the $template HTML
     */
    public function init()
    {
        $refresh_a = \yii\helpers\Html::a('refresh', '#', [
            'id' => 'refresh-captcha',
            'class' => 'text-small' // .text-small { font-size: 0.85em; } - include in your CSS
        ]);

        $this->template = '
            <div id="verify-code" class="row">
            <div class="large-3 columns">{image} ' . $refresh_a . '</div>
            <div class="large-6 columns">{input}</div>
            </div>';
        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.

<?php


namespace common\models;

use Yii;


class CaptchaRefreshableAction extends \yii\captcha\CaptchaAction
{
    public function validate($input, $caseSensitive)
    {
        // Skip validation on AJAX requests, as it expires the captcha.
        if (Yii::$app->request->isAjax) {
            return true;
        }
        return parent::validate($input, $caseSensitive);
    }

}

3. Menambahkan widget pada views/site/login.php

.............
.............

<div class="site-login">
	.............
	.............

    <div class="row">
        <div class="col-lg-5">
            <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>

				.............
				.............

				<?= $form->field($model, 'verifyCode')->widget(\common\models\CaptchaRefreshable::class) ?>

				.............
				.............
	
            <?php ActiveForm::end(); ?>
        </div>
    </div>
</div>

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);

		.............
		............. 
	
    }
     
    .............
    .............   
}
Navigasi pos
← Pos Sebelumnya
Selanjutnya Pos →

ANDA MUNGKIN JUGA MENYUKAI

widget-window-01

Nonaktifkan widget Windows 11 – Tingkatkan Performa Windows

desktop shortcut 04

Cara Mudah Membuat Shortcut pada Desktop di Windows 11

check win ver 02

Cara mengecek versi Windows

disk management 01

Cara membuat Partisi Windows tanpa kehilangan data dan tanpa aplikasi

Pos-pos Terbaru

  • Cara Menambahkan debug symbol ke build.gradle
  • Cara Membuat onClickListener pada Drawable EditText
  • Hacking “Permintaan Kehadiran” di Microsoft Kaizala
  • Cara Menggunakan VoidCallback dan Function(x) Callbacks untuk Berkomunikasi Antar Widget di Flutter
  • Memilih Aplikasi Lokasi Palsu
  • KAIZALA GPS
  • Cara Mengubah Minsdkversion di Flutter
  • Cara Mudah Mengaktifkan Opsi Pengembang di Android
  • Cara Mudah Instal Flutter di Android Studio dan Windows
logo bardimin 300x43 1

© Bardimin 2022

  • Kebijakan Privasi
  • Syarat dan Ketentuan
  • Disclaimer
  • Kontak
  • Tentang Kami
  • Android
  • Database
  • Framework
  • Hardware
  • Network
  • Software
  • Teknik
  • Teknologi
  • Windows
pixel