Site icon บริษัท โค๊ดบี จำกัด

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

codebee
yii2-framework

yii2-framework

สอน 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


เริ่มสร้าง 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');
    }
}

ใน 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 เจอกันในบทความต่อไปครับ

Exit mobile version