FuelPHP - 高階表單程式設計

上一頁
下一頁

FuelPHP 透過 Fieldset 和 Fieldset_Field 類提供高階表單程式設計。Fieldset 提供了一種面向物件的方式來建立表單。它完全支援模型，並內建支援客戶端和伺服器端驗證。要建立一個完整的表單，只需建立一個具有適當表單和驗證設定的模型即可。本章讓我們學習 Fieldset 類以及如何使用它來建立表單。

Fieldset

Fieldset 是Fieldset_Field 物件的集合。Fieldset_Field 定義表單的單個條目，例如名字、姓氏等，以及驗證規則。Fieldset 類具有新增/編輯/刪除欄位的方法。它可以選擇識別模型中定義的欄位，並根據給定的模型建立欄位。Fieldset 在後臺使用 Form 和 Validation 類來完成實際工作。讓我們看看 Fieldset 類的一些重要方法。

forge

forge 建立一個新的 Fieldset 例項。它有兩個引數：

  • $name - fieldset 的識別符號

  • $config - 配置陣列。可能的選項包括validation_instance 和 form_instance。validation_instance 可以包含Validation 物件，form_instance 可以包含 Form 物件。

$employee_form = Fieldset::forge('employee');

instance

instance 透過識別符號返回之前建立的 Fieldset 例項。

$employee_form = Fieldset::instance('employee');

get_name

獲取 fieldset 例項的識別符號。

$employee_form = Fieldset::forge('employee'); 
$name = $employee_form->get_name();

add

add 建立一個新的 Fieldset_Field 例項並將其新增到當前 fieldset。它包含以下四個引數：

  • $name - 欄位的名稱

  • $label - 欄位的標籤

  • $attributes - HTML 標籤屬性

  • $rules - 驗證規則

$employee_field = $employee_form-> add (
   'employee_lastname', 
   'Lastname', 
   array ('class' => 'pretty_input')
);  

// with validation rules 
$employee_form->add ( 
   'email', 'E-mail', 
   array('type' => 'email', 'class' => 'pretty_input'), 
   array('required', 'valid_email') 
);

add_before

add_before 與 add 類似，但它還有一個額外的引數，用於指定在哪個欄位之前新增新建立的欄位。

$employee_form->add_before (
   'employee_firstname', 
   'Firstname', 
   array ('class' => 'pretty_input'), 
   array(), 
   'employee_lastname'
);

delete

delete 從 fieldset 中刪除指定的欄位。

$employee_form->delete('employee_firstname');

field

field 獲取 fieldset 中的所有欄位或指定的欄位。

$fields = $employee_form->field(); 
$lastname_field = $employee_form->field('employee_lastname');

build

build 是$this->form()->build() 的別名。生成表單的 HTML 標記。

$employee_form->build(Uri::create('employee/add'));

enable

enable 重新啟用之前停用的欄位。

$employee_form->enable('employee_firstname');

disable

disable 允許停用 fieldset 中的欄位，使其不被構建。

$employee_form->disable('employee_firstname');

form

form 返回當前 fieldset 的 Form 例項。

$form = employee_form->form();

add_model

add_model 將模型的欄位新增到 fieldset。它有以下三個引數：

  • $class - 類名

  • $instance - 類的例項，用於填充欄位的值

  • $method - 類中的方法名稱。此方法用於將欄位新增到 fieldset。Orm\Model 具有所需的方法。預設方法名稱設定為 set_form_fields。

$employee_form = Fieldset::forge('employee'); 
$employee_form->add_model('Model_Employee');

populate

populate 使用模型例項設定 fieldset 中欄位的初始值。

$emp = new Model_Employee(); 
$emp->name = "Jon"; 
$employee_form->populate($emp);

repopulate

repopulate 與 populate 相同，只是它重新填充 fieldset 中的欄位。

validation

validation 獲取當前 fieldset 的驗證例項。

$validation = $employee_form->validation();

validated

$this->validation()->validated() 的別名。

input

$this->validation()->input() 的別名。

error

$this->validation()->error() 的別名。

show_errors

$this->validation()->show_errors() 的別名。

工作示例

讓我們使用 Fieldset 類建立一個高階表單，以在我們的示例員工應用程式中新增新員工。

更新模型

使用必要的驗證規則更新員工模型，並新增一個驗證觀察者，如下所示。

<?php  
   class Model_Employee extends Orm\Model { 
      protected static $_connection = 'production'; 
      protected static $_table_name = 'employee'; 
      protected static $_primary_key = array('id'); 
      
      protected static $_properties = array ( 
         'id',  
         'name' => array ( 
            'data_type' => 'varchar',
            'label' => 'Employee Name', 
            'validation' => array ( 
               'required',  
               'min_length' => array(3),  
               'max_length' => array(80) 
            ), 
            'form' => array ( 
               'type' => 'text' 
            ), 
         ),  
         'age' => array ( 
            'data_type' => 'int', 
            'label' => 'Employee Age', 
            'validation' => array ( 
               'required',  
            ), 
            'form' => array ('type' => 'text' ), 
         ), 
      );  
      
      // Just add the Observer, and define the required event 
      protected static $_observers = array('Orm\\Observer_Validation' => array ( 
         'events' => array('before_save'))); 
   }

在這裡，我們定義了 name 和 age 欄位的驗證規則，並添加了一個新的觀察者，在將模型儲存到資料庫之前執行伺服器端驗證。相同的驗證規則也會在表單中建立必要的輸入驗證屬性。

建立表單

在員工控制器中建立一個新的操作，action_advancedform，如下所示。

public function action_advancedform() { 
   
   // create a new fieldset and add employee model
   $fieldset = Fieldset::forge('employee')->add_model('Model_Employee');  
   
   // get form from fieldset 
   $form = $fieldset->form();  
   
   // add submit button to the form 
   $form->add('Submit', '', array('type' => 'submit', 'value' => 'Submit'));  
   
   // build the form  and set the current page as action  
   $formHtml = $fieldset->build(Uri::create('employee/advancedform'));  
   
   // set form in data 
   $data = array(); 
   $data['form'] = $formHtml;  
   return Response::forge(View::forge('employee/advancedform', $data, false)); 
}

在這裡，我們使用 fieldset 建立了表單，並將表單傳送到檢視。接下來，為該操作新增檢視，fuel/app/views/employee/advancedform.php，如下所示。

<!DOCTYPE html> 
<html lang = "en"> 
   
   <head> 
      <title>Employee :: add page</title> 
      <meta charset = "utf-8"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <?php echo Asset::css('bootstrap.css'); ?> 
      
      <style>  
         table { 
            width: 90%; 
         }  
         table tr { 
            width: 90% 
         }
         table tr td { 
            width: 50% 
         }  
         input[type = text], select { 
            width: 100%; 
            padding: 12px 20px; 
            margin: 8px 0; 
            display: inline-block; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            box-sizing: border-box; 
         }  
         input[type = submit] { 
            width: 100%; 
            background-color: #3c3c3c; 
            color: white; 
            padding: 14px 20px; 
            margin: 8px 0; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
         }  
         div { 
            border-radius: 5px; 
            background-color: #f2f2f2; 
            padding: 20px; 
         } 
      </style> 
   </head> 
   
   <body> 
      <div class = "container"> 
         <?php
            if(isset($errors)) { 
               echo $errors; 
            } 
            echo $form; 
         ?> 
      </div> 
   </body> 
   
</html>

現在，請求頁面https://:8080/employee/add 將顯示以下表單。

Add Page

處理表單

更新操作方法action_advancedform 以處理表單，並將使用者輸入的員工資料新增到員工控制器中的資料庫中，如下所示。

public function action_advancedform() { 
   
   // create a new fieldset and add employee model 
   $fieldset = Fieldset::forge('employee')->add_model('Model_Employee');  
   
   // get form from fieldset 
   $form = $fieldset->form();  
   
   // add submit button to the form 
   $form->add('Submit', '', array('type' => 'submit', 'value' => 'Submit')); 
   
   // build the form  and set the current page as action  
   $formHtml = $fieldset->build(Uri::create('employee/advancedform'));  
   
   if (Input::param() != array()) { 
      try { 
         $article = Model_Employee::forge(); 
         $article->name = Input::param('name'); 
         $article->url = Input::param('age'); 
         $article->save(); 
         Response::redirect('employee/list'); 
      
      } 
      catch (Orm\ValidationFailed $e) { 
         $view = View::forge('employee/advancedform'); 
         $view->set('form', $formHtml, false); 
         $view->set('errors', $e->getMessage(), false); 
      } 
   } 
   
   return Response::forge($view); 
}

在這裡，一旦使用者輸入的資料經過驗證並儲存到資料庫中，我們就將其重定向到員工列表頁面。否則，我們將再次顯示錶單。

建立表單

現在，請求 URL，https://:8080/employee/add，輸入一些員工資料並提交表單。如果未提供資料，則表單將提示使用者輸入資料，如下面的螢幕截圖所示。

Data Missing

如果使用者繞過客戶端驗證，則伺服器將驗證表單並顯示錯誤，如下面的螢幕截圖所示。

Client Happiness

如果資料通過了客戶端和伺服器端驗證，則員工資料將儲存到資料庫中，並且頁面將重定向到列表頁面。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.