สอน Yii 2 : เริ่มต้นสร้าง View และ Controller

Yii เป็น PHP Framework ที่ค่อนข้างซับซ้อนครับ การทำงานในส่วนของ View ยังเต็มไปด้วย Syntax ของ
ภาษาพีเอชพี ถึงแม้ว่าเราอาจจะเลือกที่จะไม่ใช้ก็ตาม แต่ถ้าจะใช้ Yii ให้ได้เต็มความสามารถ ก็จำเป็นต้องมี
พื้นฐานภาษาพีเอชพีที่ดีพอสมควร และถ้าได้ทดลองใช้จนเข้าใจหลักการทำงานของ Yii แล้ว จะเข้าใจว่าไม่ได้ยากเลย

หลังจากในบทความที่แล้วเราได้ทำการติดตั้ง Yii 2 Framework ไปเรียบร้อยแล้ว ทั้งแบบผ่าน composer และ
ติดตั้งโดยใช้วิธีโหลดไฟล์ zip มาใช้งาน รวมไปถึงการตั้งค่าต่าง ๆ จนได้หน้า Default Page ของเฟรมเวิร์ค
ในบทความนี้เราจะมาทดสอบสร้าง View และ Controller โดยเป็นการสร้างขึ้นมาใหม่ทั้งหมด

เข้าใจ View ใน Yii เบื้องต้น

การทำงานส่วน view ซึ่งเป็นส่วนที่จะ render พวกไฟล์ html, css, js จะถูกเว็บไว้ในโฟลเด้อ views
โดยในโฟลเด้อ views จะประกอบไปด้วยโฟลเด้อ layouts และโฟลเด้อที่ตั้งตามชื่อ Controller ซึ่งเป็นกฏของ Yii

ตัวอย่างโครงสร้างของ View ใน Yii

โฟลเด้อ Layout

คือส่วนที่ไว้เก็บไฟล์โครงสร้างรูปร่างหลัก ๆ ของเว็บไซต์ เราสามารถสร้าง Layout หลาย ๆ แบบไว้ทำงานในรูปแบบที่แตกต่างกันออกไปได้

โฟลเด้อ site0,site1,site2

ตั้งชื่อโฟลเด้อตามชื่อ Controller เป็นส่วนที่ไว้เก็บ content ที่จะนำไปแสดงใน Layouts หรือในกรณีที่เราไม่ต้องการใช้งาน Layout ก็สามารถเขียนไฟล์ .php ไว้ในโฟลเด้อนี้ได้เลย ซึ่งต่อไปจะกลายเป็น Action Method ใน Controller

เริ่มสร้าง View และ Controller แบบไม่ใช้ Layout

ให้สร้างไฟล์ UserController และวางไว้ใน controller/UserController.php และสร้างโฟลเด้อ user
ตามชื่อของ UserController ใน views/user จากนั้นให้สร้างไฟล์ index.php วางไว้ในโฟลเด้อ user

controllers/UserController.php
views/user/index.php

ในไฟล์ controllers/UserController.php ให้เขียนโค๊ดดังนี้

namespace app\controllers;

use Yii;
use yii\web\Controller;

class UserController extends Controller
{
    public function actionIndex()
    {
		$this->layout = false;
        return $this->render('index');
    }
}

actionIndex

ตั้งชื่อ Method ตามกฏของ Yii ขึ้นต้นด้วย action และตามด้วยชื่อไฟล์ใน view คือ index.php

$this->layout = false

ยกเลิกการใช้งานระบบ layout ของ Yii คือไฟล์ views/layouts/main.php รวมไปถึง layouts อื่น ๆ ด้วย สรุปคือไม่ใช้ระบบ layouts ของ Yii เลย

return $this->render(‘index’);

สั่ง render ไฟล์ index.php ที่อยู่ใน views/user/index.php คำสั่งเรนเดอร์ใน Yii เหมือนกับคำสั่ง view() ใน Laravel และ CI

ใน views/user/index.php ให้เขียนโค๊ดดังนี้

<div class="site-about">
    <p>
        Hi, I am beginner in Yii นาจาา
    </p>
</div>

จากนั้นให้เข้าไปเปลี่ยนค่า defaultRoute ที่ไฟล์ vendor/yiisoft/yii2/web/Application.php ค่าเริ่มต้นของ Yii จะเป็น site ให้เปลี่ยนเป็น user ตามชื่อของ UserController ที่เราสร้างขึ้นมาใหม่

public $defaultRoute = 'user';

เสร็จแล้วให้ลองเปิดโปรเจคของเราผ่านเบราซ์เซอร์

http://localhost/yii-application/web/

ผลลัพธ์ที่ได้ก็จะได้ดังภาพด้านล่างครับ

หน้าตาออกมาดูไม่มีชีวิตชีวาเลยไช่ไหมครับ งั้นลองกลับไปใช้ main layouts ของ Yii ดูครับ วิธีใช้งานก็ไม่ยากครับ
ใช้โค๊ดชุดเดิม ให้ลบ $this->layout = true; ออกจากจาก UserController.php เขียนได้ดังนี้

controllers/UserController.php

namespace app\controllers;

use Yii;
use yii\web\Controller;

class UserController extends Controller
{
    public function actionIndex()
    {
        return $this->render('index');
    }
}

และเขียนโค๊ดใน views/layouts/main.php ได้ดังนี้
views/layouts/main.php

use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
    <div class="container">
      	<?= $content ?>
    </div>
</div>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

ผลลัพธ์ที่ได้ก็จะทำให้เราสามารถใช้งาน Bootstrap Layout ที่ติดมากับ Yii2 ได้ เหตุผลเพราะในไฟล์ layout
คือ main.php มีการ include ไฟล์ assets ต่าง ๆ พวก css, js, มาใช้งานเรียบร้อยแล้วนั่นเองครับ
คำถามคือแล้วหน้า views/user/index.php มาแสดงได้อย่างไร คำตอบคือมาแสดงตรงบรรทัดนี้ครับ

<?= $content ?>

ปล. เพิ่มเติมครับถ้าเราใช้งาน Layout ของ Yii จะเห็นว่าหน้าเว็บเราติด debug toolbar ของ Yii2 มา
วิธีเอาออกก็ให้เราไปเปลี่ยน YII_ENV_DEV ใน vendor/yiisoft/yii2/BaseYii.php จาก dev เป็น prodแค่นี้ debug toolbar ก็จะหายไปแล้วครับ

defined('YII_ENV_DEV') or define('YII_ENV_DEV', YII_ENV === 'dev');

จบไว้เท่านี้สำหรับการสร้าง view และ controller รวมไปถึงการตั้งค่าพื้นฐานสำหรับ Yii2 เจอกันในบทความต่อไปครับ

สอน Yii 2 : เริ่มต้นสร้าง View และ Controller