10-2
用物件來做表單
一、為何要用物件來做表單?
- 優點
- 不用自己手動刻表單,方便省事
- 做修改功能時可省下大量功夫!
- 未來可無縫轉換BootStrap4
- 內含驗證及檢查功能
- 內建編輯器等一些常用外掛
- 缺點
- 版面缺乏彈性
- 想要套用其他jquery套件會有點麻煩
二、關於PHP-Bootstrap-Form
- 官網:http://smarttechdo.com
- 安裝:下載 php-bootstrap-form-4.0.zip,並解壓縮至 class 下改名為 php-bootstrap-form
三、使用之產生表單
- 建立函數 action_form() 用來產生
- 由於內建的月曆實在難用,所以,可以自行套用其他的月曆程式
- 在裡面引入"class/php-bootstrap-form/PFBC/Form.php
function action_form()
{
require_once "class/php-bootstrap-form/PFBC/Form.php";
$values = [];
ob_start();
echo '<script type="text/javascript" src="class/My97DatePicker/WdatePicker.js"></script>';
Form::open("action", $values);
Form::Hidden("op", 'insert_action');
Form::Textbox("活動名稱", "title", ['required' => 1]);
Form::Textbox("活動日期", "action_date", ['required' => 1, 'onClick' => "WdatePicker()"]);
Form::Textbox("截止日期", "end_date", ['required' => 1, 'onClick' => "WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00'})"]);
Form::YesNo("使否啟用", "enable");
Form::CKEditor("活動內容", "content");
Form::Button('儲存', 'submit');
Form::close(false);
$form = ob_get_contents();
ob_end_clean();
return $form;
}
-
$values = [];是個個欄位預設值,未來在修改時會用到
-
若新增時,想要替某些欄位設定預設值,直接填入 $values 陣列即可(要按照順序),例如:
$values = [
'title' => '活動',
'action_date' => date("Y-m-d", strtotime("+14 day")),
'end_date' => date("Y-m-d H:i:00", strtotime("+10 day")),
'enable' => 1,
'content' => '活動內容~~~',
];
- 其中 date() 用來格式化日期,strtotime() 用來產生時間戳記。
-
由於該表單物件會直接輸出,故利用 ob_start(); 將其輸出移至緩衝區,再利用 ob_get_contents(); 把輸出的東西取出來並存入 $form,最後用 ob_end_clean(); 釋放掉。
-
表單一律從 Form::open() 開始,Form::close() 結束,中間便是表單欄位。
-
表單預設的 action 位置就是該檔案本身,method 預設為post
-
引入 WdatePicker.js 目的是為了使用 My97DatePicker 小月曆
-
詳細表單欄位用法可參考:http://smarttechdo.com/~avb/pfbc/api/
-
亦可至 http://smarttechdo.com/~avb/pfbc/example.php 觀看範例。
四、小月曆的常用參數
- 其常用的參數如下,更多參數請看:http://www.my97.net/dp/demo/index.htm
- (1) 民國年:dateFmt:'民國yyy年MM月dd日'
- (2) 含時間:dateFmt:'yyyy-MM-dd HH:mm:ss'
- (3) 起始日期:startDate:'1980-05-01' 或 %y-%M-%d %H:%m:%s
- (4) 星期一為第一天:firstDayOfWeek:1
- (5) 最小日期:minDate:'2017-10-24' 或 %y-%M-{%d+2} %H:%m:%s
- (6) 最大日期:maxDate:'2017-10-25'
- (7) 週休禁止:disabledDays:[0,6]
- (8) 顯示週數:isShowWeek:true
- (9) 日期框唯讀:readOnly: true
- (10) 取消週末高亮度:highLineWeekDay: false
- (11) 顯示清空按鈕:isShowClear: false
- (12) 雙月曆:doubleCalendar:true