การจัดการกับ Flash Message ใน Yii Framework 2

Flash Message คืออะไร

Flash Message คือ ข้อความที่แสดงขึ้นมาแล้วหายไปเมื่อ refresh หน้า Web Application เหมือนกับ Flash ในกล้องถ่ายรูป เช่น เมื่อ Login เข้าสู่ระบบเสร็จแล้วให้แสดงข้อความ ยินดีต้อนรับ จากนั้นเมื่อ refresh หรือเปิดหน้า Web Application หน้าต่อไป Flash Message ก็จะหายไป

ใน Yii Framework 2 มีระบบ Flash มาให้ โดยถูกรวมไว้ใน session component

http://www.yiiframework.com/doc-2.0/yii-web-session.html#setFlash()-detail

โดยทั่วไปจะมีการใช้งานอยู่ 2 Method คือ setFlash() กับ getFlash()

การสร้าง Flash Message

สำหรับการสร้าง Flash Message นั้นสามารถสร้างได้โดยมีรูปแบบดังนี้

public void setFlash ( $key, $value = true, $removeAfterAccess = true )

ตัวอย่าง

public function actionIndex()
    {
        $searchModel = new ProductSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        Yii::$app->session->setFlash('success', 'Success Flash');
        Yii::$app->session->setFlash('info', 'Info Flash');
        Yii::$app->session->setFlash('warning', 'Warning Flash');
        Yii::$app->session->setFlash('danger', 'Primary Flash');
        
        
        Yii::$app->session->setFlash('success', 'New Success Flash');
        
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

การแสดงผล

จะเห็นว่า Flash Message ที่เกิดขึ้นหากมีการกำหนด flash key เป็นครั้งที่ 2 ครั้งแรกจะถูกแทนที่ด้วยครั้งที่ 2 จากตัวอย่างจะเห็น New Success Flash แทนที่ตัว Success Flash

หมายเหตุ Flash Message จะถูกกำหนดขึ้นให้กับ tag alert ของ bootstrap อย่างอัตโนมัติ เดี๋ยวไปดูใน step ต่อไป ว่ามีการกำหนดไว้ที่ไหนอย่างไร??

ทางแก้ไขในการเพิ่ม Flash Message key เดียวกันคือ addFlash()

public void addFlash ( $key, $value = true, $removeAfterAccess = true )

ตัวอย่าง

public function actionIndex()
    {
        $searchModel = new ProductSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        Yii::$app->session->setFlash('success', 'Success Flash');
        Yii::$app->session->setFlash('info', 'Info Flash');
        Yii::$app->session->setFlash('warning', 'Warning Flash');
        Yii::$app->session->setFlash('danger', 'Primary Flash');
        
        
        Yii::$app->session->addFlash('success', 'New Success Flash');
        
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

การแสดงผล

จะเห็นว่าเกิด success เกิดขึ้น 2 อันแล้ว

การเรียกใช้งาน

สำหรับการเรียกใช้งาน Flash Message นั้นจะเรียกใช้งานผ่าน method getFlash() โดยปกติจะเขียนโปรแกรมไว้ในส่วน main layout หรือ layout หลักของ Web Application นั่นหมายความว่าเขียนไว้ที่เดียวสามารถใช้ได้ทั้ง Web Application 

ใน Yii Framework 2 ได้ทำ Widget ไว้ให้เรียบร้อยแล้วชื่อว่า Alert ซึ่งเก็บไว้ที่ 

common/widgets/Alert.php

หากต้องการใช้งานก็ทำการ use common\widgets\Alert; จากนั้นกำหนดใน Layout หลักได้ เช่น ใน frontend/views/layouts/main.php ซึ่งเป็น layout หลักพื้นฐานของ Yii Framework 2 ได้เรียกการใช้งาน Alert Widget ดังนี้

<?= Alert::widget() ?>

การใช้ Extension เสริม

สำหรับตัวอย่างนี้จะใช้ Extension เสริมในการแสดงผล Flash Message เป็นแบบ Popup โดยใช้ JavaScript ซึ่งสามารถดูรายละเอียดได้ที่

https://packagist.org/packages/lavrentiev/yii2-toastr

การติดตั้งโดยการพิมพ์คำสั่ง

composer require lavrentiev/yii2-toastr

จากนั้นสร้างไฟล์ alert.php ใน frontend/views/layouts แล้วเขียนโปรแกรมดังนี้

<?php
use lavrentiev\widgets\toastr\NotificationFlash;
echo NotificationFlash::widget([
    'options' => [
        "closeButton" => true,
        "debug" => false,
        "newestOnTop" => true,
        "progressBar" => false,
        "positionClass" => "toast-top-right",
        "preventDuplicates" => false,
        "onclick" => null,
        "showDuration" => "5000",
        "hideDuration" => "1000",
        "timeOut" => "5000",
        "extendedTimeOut" => "1000",
        "showEasing" => "swing",
        "hideEasing" => "linear",
        "showMethod" => "fadeIn",
        "hideMethod" => "fadeOut"
    ]
]);

สำหรับการตั้งค่าต่างๆ สามารถดูรายละเอียดเพิ่มเติมได้ที่

https://github.com/lavrentiev/yii2-toastr

จากนั้นให้ทำการ render File alert.php ใน layout หลัก ในที่นี้คือ frontend/views/layouts/main.php โดยการแทนที่ Alert::widget() ที่มีการเรียกไว้

<?php // Alert::widget() ?>
<?php $this->render('/layouts/alert')?>

ทดสอบการทำงาน

จะเห็นว่าการแสดง Flash Mesaage เกิดขึ้นแบบ Popup อย่างสวยงาม

หมายเหตุ Flash Message key ที่เป็น danger ให้เปลี่ยนเป็น error จึงจะสามารถใช้งานเป็นสีแดงได้

Sweet Alert Extension

Sweet Alert Extension สำหรับ Yii2 เป็นอีก Extension หนึ่งที่น่าสนใจ สามารถดูรายละเอียดได้ที่ 

https://packagist.org/packages/yii2mod/yii2-sweet-alert

การติดตั้งพิมพ์คำสั่ง

composer require yii2mod/yii2-sweet-alert

การเรียกใช้งานใน layout หลัก frontend/views/layouts/main.php

<?php // Alert::widget() ?>
        <?php //$this->render('/layouts/alert')?>
        <?=\yii2mod\alert\Alert::widget()?>

ตัวอย่างการแสดงผล

บทสรุป

Flash Message เป็น ข้อความที่แสดงขึ้นเพื่อให้ผู้ใช้งานทราบถึงการทำงานของระบบ เช่น เมื่อ บันทึกข้อมูลเสร็จ เมื่อเข้าสู่ระบบได้ และอื่นๆ ที่ให้ Web Application ตอบโต้กับผู้ใช้และมีความน่าสนใจมากยิ่งขึ้น ในตัวอย่างนี้ยังสามารถเพิ่ม Extension เพิ่มเติมเพื่อให้ Flash Message มีความน่าสนใจมากยิ่งขึ้นอีกด้วย