การติดตั้งและใช้งาน SweetAlert2 โดยไม่ใช้ Extension ใน Yii Framework 2

sweet alert 2 เป็น css และ js ที่ช่วยในการทำ alert ต่างๆ ในที่นี้เราเปลี่ยน alert ใน yii framework 2 ไปใช้ sweet alert แทน

https://limonte.github.io/sweetalert2/

การติดตั้งจะติดตั้งผ่าน bower หากยังไม่มีโปรแกรมให้ดาวน์โหลดและติดตั้งจาก bower.io จากนั้น เปิด command prompt เข้าไปยัง folder project แล้วพิมพ์

bower install sweetalert2

จะปรากฏ folder sweetalert2 ดังนี้

สร้าง folder เก็บ ที่ common\widgets\sweetalert จากนั้นเพิ่ม file ต่างๆ ดังนี้

SweetAlertAsset.php

<?php
/**
 * Created by Manop Kongoon.
 * kongoon@hotmail.com
 * Date: 28/10/2560
 * Time: 22:56
 */

namespace common\widgets\sweetalert;


use yii\web\AssetBundle;

class SweetAlertAsset extends AssetBundle
{
    /** @var string $sourcePath  */
    public $sourcePath = '@bower/sweetalert2';

    /** @var array $css */
    public $css = [
        'dist/sweetalert2.css',
    ];

    /** @var array $js */
    public $js = [
        'dist/sweetalert2.js',
    ];

    /** @var array $depends */
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

NotificationBase.php

<?php
namespace common\widgets\sweetalert;

use yii\base\Widget;
use yii\helpers\Html;
use yii\helpers\Json;


class NotificationBase extends Widget
{
    /** @var string $title */
    public $title;

    /** @var string $message */
    public $message;

    /** @var string $message */
    public $messageDefault = 'This is the message';

    /** @var string $type */
    public $type;

    /** @var array $types */
    public $types = ['info', 'error', 'success', 'warning'];

    /** @var string $typeDefault */
    public $typeDefault = self::TYPE_INFO;

    /** @var array $options */
    public $options = [];

    const TYPE_INFO = 'info';
    const TYPE_ERROR = 'error';
    const TYPE_SUCCESS = 'success';
    const TYPE_WARNING = 'warning';

    /**
     * @inheritdoc
     */
    public function init()
    {
        $this->view->registerAssetBundle(SweetAlertAsset::className());

        $this->title = is_string($this->title) ? Html::encode($this->title) : null;

        $this->message = ($this->message) ?
            Html::encode($this->message) : Html::encode($this->messageDefault);

        $this->options = is_array($this->options) ?
            Json::encode($this->options) : Json::encode([]);
    }

}

Notification.php

<?php
/**
 * Created by Manop Kongoon.
 * kongoon@hotmail.com
 * Date: 28/10/2560
 * Time: 22:51
 */

namespace common\widgets\sweetalert;

class Notification extends NotificationBase
{
    /**
     * @inheritdoc
     */
    public function run()
    {
        if (in_array($this->type, $this->types)){
            return $this->view->registerJs("swal ( \"{$this->title}\" ,  \"{$this->message}\" ,  \"{$this->type}\" );");
        }

        return $this->view->registerJs("swal ( \"{$this->title}\" ,  \"{$this->message}\" ,  \"{$this->typeDefault}\" );");
    }
}

NotificationFlash.php

<?php
/**
 * Created by Manop Kongoon.
 * kongoon@hotmail.com
 * Date: 28/10/2560
 * Time: 23:06
 */

namespace common\widgets\sweetalert;


use yii\helpers\Html;

class NotificationFlash extends NotificationBase
{
    /** @var object $session */
    private $session;

    /**
     * @inheritdoc
     */
    public function run()
    {
        $this->session = \Yii::$app->session;

        $flashes = $this->session->getAllFlashes();

        foreach ($flashes as $type => $data) {
            $data = (array) $data;

            foreach ($data as $i => $message) {
                Notification::widget([
                    'type' => Html::encode($type),
                    'title' => Html::encode($this->title),
                    'message' => Html::encode($message),
                    //'options' => Json::decode((string) $this->options),
                ]);
            }

            $this->session->removeFlash($type);
        }
    }
}

การใช้งานให้สร้าง alert.php ใน folder ที่เก็บ views/layouts/ จากนั้นเขียนโปรแกรมดังนี้

<?php
/**
 * Created by Manop Kongoon.
 * kongoon@hotmail.com
 * Date: 28/10/2560
 * Time: 23:11
 */

use common\widgets\sweetalert\NotificationFlash;

echo NotificationFlash::widget();

ใน views/layouts/main.php ให้เขียนเรียกใช้งาน alert.php ดังนี้

<?= $this->render('//layouts/alert') ?>

เป็นอันเสร็จเรียบร้อย