> 原文出處：https://jellybool.com/post/programming-with-yii2-exploring-mvc-forms-and-layouts
上一篇文章我們簡單地實現了`Yii2`框架安裝和`Hello World`，而在這一篇文章當中，我們會帶著好奇之心去探索一下在Yii2中的幾個重要的元素組成：`MVC`，`Forms`和`Layouts`。
本文的目標是創建一個小小的表單應用，就是實現一個簡單的類似發微博的功能，但是我還不想牽扯到數據庫那一塊，因為其實數據庫和表在Yii2框架之中其實還是有很多東西可以講的，打算在下一篇的文章中會詳細講到。
## MVC
模型`(Model)`對于我個人的簡單理解就是一個概念集合，在這個集合里面包含該概念集合的多種數據，比如一個`User`會有姓名，性別等多個屬性，這個概念集合通常就是對于數據庫的一張表（如果還沒有對應的數據表，則可以看作是一個集合的屬性）；而每一個具體的實例概念就對應一條數據記錄。比如在這一篇文章之中我們會創建一個`Status`模型，代表狀態（來源于生活：發一條狀態），這個Status會有兩個重要的屬性，`text`和`permissions`，`text`就是狀態本身，`permissions`是狀態的權限。
視圖`(Views)`通過控制器想模型請求數據，并將數據以某種特定的版式展示給用戶。
控制器`(Controller)`可以向`Model`和`Views`發送不同的指令，一般是向Model取數據，然后讀取視圖文件來渲染輸出數據。
在Yii2的應用中，一般是這樣的：某個URL指向某個控制器的特定`action`，然后控制器負責向特定的模型取數據，然后將數據分配給視圖渲染輸出。
在這里說一下我個人的觀點，我覺得其實在`MVC`當中，可能應該做事最多的應該是`Model`，與之相迎合的是，`Controller`和`Views`則相對要輕一些，`Controller`負責協調`Model`和`Views`，Views負責展示數據。
在Yii2的項目當中，我們將`models`文件放在`/models/`目錄之下，所以我們在這個文件夾之下創建`Status.php`：
~~~
<?php
namespace app\models;
use yii\base\Model;
class Status extends Model
{
const PERMISSIONS_PRIVATE = 10;
const PERMISSIONS_PUBLIC = 20;
public $text;
public $permissions;
public function rules()
{
return [
[['text','permissions'], 'required'],
];
}
public function getPermissions() {
return array (self::PERMISSIONS_PRIVATE=>'Private',self::PERMISSIONS_PUBLIC=>'Public');
}
public function getPermissionsLabel($permissions) {
if ($permissions==self::PERMISSIONS_PUBLIC) {
return 'Public';
} else {
return 'Private';
}
}
}
~~~
這里需要注意的是`rules()`這個方法，它會觸發Yii自帶的表單驗證規則，比如這里就是`text`和`permissions`這兩個表單輸入框都不能為空，至于`getPermissions()`這個方法是為了在使用`dropdown`輸入框的時候使用的。
`Status`模型創建好之后，我們就可以接著創建對應的控制器和方法。在平時的開發中我習慣是為每一個模型都創建一個對應的控制器，里面一般都是包含幾個最常見的方法：`index`,?`create`,?`store`,?`update`,?`delete`等。這里我創建一個`StatusController.php`，這個文件應該是位于`/controllers/`文件夾當中，而我們希望實現一個發表狀態的功能，我們必須需要一個`create`操作方法，比如我們的目的是：在用戶訪問`http://localhost:8999/status/create`的時候，我們可以展示創建一條狀態的頁面給用戶。
~~~
<?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use app\models\Status;
class StatusController extends Controller
{
public function actionCreate()
{
$model = new Status;
if ($model->load(Yii::$app->request->post()) && $model->validate()) {
// $model 有post數據時直接展示
return $this->render('view', ['model' => $model]);
} else {
// 沒有數據的時候，直接渲染create視圖
return $this->render('create', ['model' => $model]);
}
}
}
~~~
首先，根據URL的規則，我們創建了一個`actionCreate()`方法，在這個方法里，我們通過條件判斷來確定展示某個特定的視圖。
創建好控制器和方法之后，我們就可以走到下一步了：創建視圖。在Yii2中，視圖文件的存放位置跟控制器的名字是息息相關的，比如上面我們創建了一個`StatusController`，我們現在首先需要在`views/`創建一個`status/`文件夾，然后在這個文件夾里創建各個跟`StatusController`相關的視圖文件，比如上面`actionCreate()`中`return $this->render()`兩個視圖：`view.php`和`create.php`
## Forms
首先，我們需要一個`Create`視圖來展示我們創建`Status`的表單`(create.php)`:
~~~
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use app\models\Status;
?>
<?php $form = ActiveForm::begin();?>
<?= $form->field($model, 'text')->textArea(['rows' => '4'])->label('Status Update'); ?>
<?=
$form->field($model, 'permissions')->dropDownList($model->getPermissions(),
['prompt'=>'- Choose Your Permissions -']) ?>
<div class="form-group">
<?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
~~~
在我們平時開發web應用的時候，表單幾乎總是每時每刻都得存在，只要是需要收集信息的地方就需要表單。而Yii2在對表單支持這方面做得非常不錯，就如你看到的一樣，上面的[Yii2 ActiveForm](http://www.yiiframework.com/doc-2.0/yii-widgets-activeform.html)就是Yii2內置的用來幫助我們生成表單的小組件，這里需要注意的是`dropDownList`這個輸入框式怎么實現的，它直接使用了`getPermissions()`，這個方法正好返回了一個我們需要的數組。
這時候訪問：`http://localhost:8999/status/create`?就可以看到上面創建的表單了：
至于為什么就自動排版好了，不用我們寫css，那是因為Yii2默認會給我們加載Bootstrap的css文件，所以我們在使用的時候直接指定類名就OK了。而且很明顯地，我們可以看到，一旦輸入框在失去焦點的時候，如果里面沒有輸入任何內容，每個輸入框就會有相應的錯誤提示，用戶體驗很不錯。這個其實是得益于我們在Status模型中聲明的`rules()`方法，Yii2會根據指定的規則通過js在前端給出相應的驗證。
然后我們嘗試填入一些內容，你就會看到輸入框的變化了：
點擊`Submit`?按鈕，表單會提交到`StatusController`的`actionCreate()`方法，一旦有`post`數據傳過來，就會渲染`view.php`視圖：
到這里，其實我們就走通整個MVC的過程，并且在這個過程中，我們順帶說了一下Forms的知識點。
## Layouts
為什么要說Layouts呢？因為Layouts在Yii中其實可以看作是視圖中經常重復用到的部分，比如一個HTML文件的`header`，`navigation bar`?和`footer`等，這些都是幾乎是在每一個視圖文件中都會用到，所以Yii采取了一種一勞永逸的方法來管理這些共用的部分：Layouts就應運而生。這樣你就不用在每一個`view`文件中重復不必要的代碼了，而且又特別好管理。
Yii允許你創建多個Layouts，不過我貌似還沒遇到那樣的使用場景，所以還是無法給出有實證的說法，不管怎么說，一個Layouts就基本夠用了。
最后，我們借著Layouts的東風來看看我們怎么修改一下Yii2的默認導航欄：添加一個新的導航。
在上一節我就提到過`views\layouts\main.php`這個文件，里面的具體結構你可以直打開來看看，我們這里改動的是`Nav::widget`這部分：
~~~
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
[
'label' => 'Status',
'items' => [
['label' => 'Create', 'url' => ['/status/create']],
],
],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
Yii::$app->user->isGuest ?
['label' => 'Login', 'url' => ['/site/login']] :
['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']],
],
]);
~~~
我們在本來的基礎之上添加了下面這個內容：
~~~
[
'label' => 'Status',
'items' => [
['label' => 'Create', 'url' => ['/status/create']],
],
],
~~~
這樣之后，刷新一下頁面，你就可以看到我們的導航變化了。而且很神奇的是：這里還實現了`dropdown menu`的功能，這個其實就是使用`Bootstrap`的`dropdown menu`來實現的。
嗯，這篇文章貌似講得差不多了，至少我不知道還改講些什么了，接下來的文章我會嘗試講講Yii2的數據庫相關的內容，先睡覺。
