SweetAlert in Yii2

Pertama, download dulu file cdn di https://sweetalert2.github.io/  atau bisa langsung klik link ini https://www.jsdelivr.com/package/npm/sweetalert2

Setelah didownload, ekstrak kemudia copykan seluruh file dist di directory web pada aplikasi yii2 anda

Karena saya sudah menginstall template admin maka tinggal mengubah AppAsset-nya

Setelah itu di controller actionDelete, update dan create sebelum redirect saya tambahkan script berikut

Yii::$app->session->setFlash('flash', 'Dihapus');

Biar dinamis di create saya ubah ‘Dihapus’ jadi ‘Ditambah’, begitupun di action update.

di view dan index saya tambahkan kode berikut

<div class="flash-data" data-flashdata="<?= Yii::$app->session->getFlash('flash') ?>"></div>

Kemudian saya buat file baru di web/js dengan nama alert.js, dan berisi kode berikut

const flashdata = $('.flash-data').data('flashdata');


if(flashdata) {
    Swal.fire({
        icon: 'success',
        title: 'Data Berhasil ' + flashdata,
        text: '',
        timer : 900,
         customClass: 'swal-wide', // agar bisa saya edit ukuran popupnya
      })
}

// Ketika Dihapus
$(".tombol-hapus").click(function(e) {
    console.log = e;
    e.preventDefault(); // untuk menghentikan href
    e.stopImmediatePropagation();
    const href = $(this).attr('href');
    Swal.fire({
        title: 'Apakah anda yakin?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Hapus data',
         customClass: 'swal-wide',
      }).then((result) => {
        if (result.isConfirmed) {
          document.location.href = href;
        }
      })
});

untuk tombol hapus anda bisa menambahkan class ‘tombol-hapus’

'delete' => function ($url, $model) {
                        return Html::a('<button class = "btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Hapus</button>', $url, [
                            'title' => Yii::t('app', 'lead-delete'),
                            'class' => 'tombol-hapus',
                            'data' => [
                                'method' => 'post'
                            ],
                        ]);
                    },

Jika sudah silahkan berikut hasilnya

untuk merubah ukuran popup anda bisa tambahkan css berikut

.swal2-popup {
font-size: 2rem !important;
}

Jika kamu menemukan error seperti diatas, kamu bisa ubah behaviors pada controllernya

public function behaviors()
    {
        return [
            'verbs' => [
                'class' => VerbFilter::className(),
                'actions' => [
                    'delete' => ['POST', 'GET'], // Tambahkan method GET
                ],
            ],
        ];
    }

untuk penjelasan lebih lengkap bisa klik link ini https://www.youtube.com/watch?v=20l9e9IKKYg