version 4.1.0

บทที่ 13 รวบรวมคำสั่งเรียกใช้งาน Zii Widget

  พฤหัสบดีที่ 05 มีนาคม พ.ศ. 2558 เวลา 05:15:11 น.      3,594 ครั้ง


บทที่ 13 รวบรวมคำสั่งเรียกใช้งาน Zii Widget

แนะนำ

Widget (วิดเจ็ด) เป็นส่วนขยายเพิ่มเติมแบบหนึ่ง ข้อดีของ Widget คือ สามารถเรียกใช้งานซ้ำ ๆ ได้ เหมาะสำหรับเว็บแอพพลิเคชั่นขนาดใหญ่ ๆ ที่มีองค์ประกอบมากมาย "วิดเจ็ด" เป็นอีกส่วนหนึ่งที่ผมชอบมากใน Yii เพราะมีการออกแบบจัดการได้ดีมาก โดยสามารถรวมทรัพยกรพวก Script และ รูปภาพ เอาไว้ใน Widget ได้เลย ใน Yii เขาจะเรียกว่า asset แล้วในเวอร์ชั่นใหม่ "Widget" สามารถเปลี่ยนหน้าตาไปตามธีมได้ด้วย


CBreadcrumbs : Default

 $this->widget('zii.widgets.CBreadcrumbs', array(
    'links' => array(
        'Post' => array('post/view', 'id' => 12),
        'Edit',
    ),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

CDetailView : Model

 $model = Profile::model()->findByPk(1);
$dataProvider = new CActiveDataProvider('Profile', array(
    'pagination' => array(
        'pageSize' => 10, // กำหนดให้หน้านึงแสดง 10 รายการ
    ),
    // ข้อมูลที่ต้องการแสดง (field)
    'sort' => array(
        'attributes' => array(
            'user_id',
            'firstname',
            'lastname'
        ),
    ),
));
 
// แสดง CDetailView
$this->widget('zii.widgets.CDetailView', array(
    'data' => $model,
    'attributes' => array(
        'firstname',          
        'lastname',
        // related city displayed as a link
        array( 
            'label' => 'View',
            'type' => 'raw',
            'value' => CHtml::link(CHtml::encode($model->firstname), array('profile/view','id' => $model->user_id)),
        ),
    ),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

CDetailView : Array

 // data array
$employee = array (
    'user_id' => '1',
    'firstname' => 'Eakkabin',
    'lastname' => 'Jaikeawma',
    'birthday' => '2015-01-01',
    'position' => 'Web Developers',
    'department' => 'CEO',
    'phone' => '089121345',
    'email' => 'eakkabin_it@hotmail.com'
);
 
$this->widget('zii.widgets.CDetailView', array(
    'data' => $employee,  //ข้อมูล array ที่จะแสดง อยู่ใน session
    'attributes' => array(
        'firstname',
        'lastname',
        'position',
        'department',
        'phone',
        'email',
    ),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง

"เพิ่มเติม" หากเราต้องการโยนข้อมูลใน array เข้าไปแสดงใน CDetailView

CDetailView : Array | Header Thai

 // data array
$employee = array (
    'user_id' => '1',
    'firstname' => 'Eakkabin',
    'lastname' => 'Jaikeawma',
    'birthday' => '2015-01-01',
    'position' => 'Web Developers',
    'department' => 'CEO',
    'phone' => '089121345',
    'email' => 'eakkabin_it@hotmail.com'
);
 
$this->widget('zii.widgets.CDetailView', array(
    'data' => $employee,  // ข้อมูล array ที่จะแสดง อยู่ใน session
    'attributes' => array(
        array(
            'label' => 'ชื่อ',
            'value' => $employee['firstname'],
        ),
        array(
            'label' => 'นามสกุล',
            'value' => $employee['lastname'],
        ),
        array(
            'label' => 'ตำแหน่ง',
            'value' => $employee['position'],
        ),
        array(
            'label' => 'โทรศัพท์',
            'value' => $employee['phone'],
        ),
        array(
            'label' => 'อีเมลล์',
            'value' => $employee['email'],
        ),
    ),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 4 | รูปภาพตัวอย่าง

หรือ ถ้าต้องการเปลี่ยน label เป็นภาษาไทย ให้แก้ไข Widget ดังตัวอย่างด้านบน

CListView : Default

 $dataProvider = new CActiveDataProvider('Profile', array(
    'pagination' => array(
        'pageSize' => 10, // กำหนดให้หน้านึงแสดง 10 รายการ
    ),
    // ข้อมูลที่ต้องการแสดง (field)
    'sort' => array( 
        'attributes' => array(
            'user_id',
            'firstname',
            'lastname'
        ),
    ),
));
 
$this->widget('zii.widgets.CListView', array(
    'dataProvider' => $dataProvider,
    'itemView' => '_view'           // ชื่อไฟล์ _view.php ที่เราจะนำมาแสดง
));

สร้างไฟล์ _view.php ไว้ในโฟล์เดอร์เดียวกับไฟล์ View ที่เขียนคำสั่งนี้ เช่นหากเรียกใช้งาน ExampleController อยู่ แสดงว่าไฟล์ _view.php ต้องอยู่ที่โฟล์เดอร์ [skeleton]/protected/views/example/_view.php

ตัวอย่างคำสั่ง

 <div class="view">
    <p style="margin:0;padding:3px;">
        <?php echo CHtml::encode($data->getAttributeLabel('user_id')); ?> : 
        <?php echo CHtml::link(CHtml::encode($data->user_id), array('view', 'id' => $data->user_id)); ?>
    </p>
    <p style="margin:0;padding:3px;">
        <?php echo CHtml::encode($data->getAttributeLabel('firstname')); ?> : 
        <?php echo CHtml::encode($data->firstname); ?>
    </p>
    <p style="margin:0;padding:3px;">
        <?php echo CHtml::encode($data->getAttributeLabel('lastname')); ?> : 
        <?php echo CHtml::encode($data->lastname); ?>
    </p>
</div>

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 5 | รูปภาพตัวอย่าง




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment