[ตอนที่ 7] เวิร์คช้อป CMS อย่างง่าย เก็บข้อมูลเป็นไฟล์
ที่หน้า login เราได้เห็นการสร้างฟอร์มโดยการเขียน HTML ไปแล้ว ซึ่งข้อเสียของการเขียนฟอร์มแบบ HTML คือ เราต้องจัดรูปแบบของฟอร์มด้วยตัวเอง เพื่อให้ใช้งานร่วมกับ GCSS แสดงผลฟอร์มที่ส่วยงามได้ ในบทนี้เราจะมาใช้คลาส Form ในการสร้างฟอร์มของคชสารกัน
เมื่อต้องการสร้างหรือแก้ไขหน้าเพจ แอพพลิเคชั่นจะทำการเรียกไปยัง Index\Pagewrite\View เพื่อสร้างฟอร์มสำหรับเขียนหรือแก้ไขโค้ด ผมจะอธิบายคร่าวๆถึงการใช้งานฟอร์มนะครับ ข้อมูลเต็มๆ ให้ไปหาอ่านในบทที่เกี่ยวกับฟอร์มอีกที
ถ้าสังเกตุให้ดีจะเห็นว่าโค้ดแต่ละบล๊อกจะทำการสร้างโค้ดที่เกี่ยวข้องให้โดยอัตโนมัติ เช่น
เมื่อสร้างเสร็จแล้วจะได้โค้ด Form ตามนี้
และ โค้ดส่วนนี้
จะได้โค้ดประมาณนี้
ซึ่งจะเห็นได้ว่าจะประหยัดเวลาในการเขียนลงได้มากและยังลดข้อผิดพลาดอันเกิดจากการลืมนั่นลืมนี่ได้ด้วย และ ถ้าสังเกตุดีๆ property แต่ละตัวก็ยังเป็นชื่อ property พื้นฐานที่ง่ายต่อการจดจำอีกด้วย
ในส่วนของ Index\Menuwrite\View ผมได้ออกแบบโดยใช้วิธีการเดียวกันกับฟอร์ม login เพียงแต่ฟอร์มนี้มีการใช้ความสามารถของ GAjax ในการ Submit ฟอร์มร่วมด้วย ทำให้ไม่ต้องมีการโหลดหน้าเว็บใหม่ทุกครั้งเมื่อมีการ Submit ฟอร์ม
เมื่อต้องการสร้างหรือแก้ไขหน้าเพจ แอพพลิเคชั่นจะทำการเรียกไปยัง Index\Pagewrite\View เพื่อสร้างฟอร์มสำหรับเขียนหรือแก้ไขโค้ด ผมจะอธิบายคร่าวๆถึงการใช้งานฟอร์มนะครับ ข้อมูลเต็มๆ ให้ไปหาอ่านในบทที่เกี่ยวกับฟอร์มอีกที
namespace Index\Pagewrite;
use \Kotchasan\Http\Request;
use \Kotchasan\Html;
class View extends \Kotchasan\View
{
public function render(Request $request, $index)
{
// register form
$form = Html::create('form', array(
'id' => 'setup_frm',
'class' => 'setup_frm',
'autocomplete' => 'off',
'action' => 'index.php/index/model/pages/save',
'onsubmit' => 'doFormSubmit',
'token' => true,
'ajax' => true
));
$fieldset = $form->add('fieldset', array(
'title' => 'รายละเอียดหน้าเพจ'
));
// module
$fieldset->add('text', array(
'id' => 'write_module',
'itemClass' => 'item',
'labelClass' => 'g-input icon-documents',
'label' => 'โมดูล',
'comment' => 'ชื่อโมดูล ภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น',
'maxlength' => 20,
'value' => isset($index['module']) ? $index['module'] : ''
));
// topic
$fieldset->add('text', array(
'id' => 'write_topic',
'itemClass' => 'item',
'labelClass' => 'g-input icon-edit',
'label' => 'หัวข้อ',
'comment' => 'หัวข้อของหน้าเพจ แสดงบนไตเติลบาร์',
'maxlength' => 255,
'value' => isset($index['topic']) ? $index['topic'] : ''
));
// detail
$fieldset->add('ckeditor', array(
'id' => 'write_detail',
'itemClass' => 'item',
'height' => 300,
'language' => 'th',
'toolbar' => 'Document',
'upload' => true,
'label' => 'รายละเอียด',
'value' => isset($index['detail']) ? $index['detail'] : ''
));
$fieldset = $form->add('fieldset', array(
'class' => 'submit'
));
// submit
$fieldset->add('submit', array(
'class' => 'button save large',
'value' => 'บันทึก'
));
$fieldset->add('hidden', array(
'id' => 'write_id',
'value' => $index['id']
));
$form->script('var WEB_URL = "'.WEB_URL.'vendor/goragod/kotchasan/";');
return $form->render();
}
}
ถ้าสังเกตุให้ดีจะเห็นว่าโค้ดแต่ละบล๊อกจะทำการสร้างโค้ดที่เกี่ยวข้องให้โดยอัตโนมัติ เช่น
$form = Html::create('form', array(
'id' => 'setup_frm',
'class' => 'setup_frm',
'autocomplete' => 'off',
'action' => 'index.php/index/model/pages/save',
'onsubmit' => 'doFormSubmit',
'token' => true,
'ajax' => true
));
เมื่อสร้างเสร็จแล้วจะได้โค้ด Form ตามนี้
และ โค้ดส่วนนี้
// module
$fieldset->add('text', array(
'id' => 'write_module',
'itemClass' => 'item',
'labelClass' => 'g-input icon-documents',
'label' => 'โมดูล',
'comment' => 'ชื่อโมดูล ภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น',
'maxlength' => 20,
'value' => isset($index['module']) ? $index['module'] : ''
));
จะได้โค้ดประมาณนี้
<div class=item>
<label for="write_module">โมดูล</label>
<span class="g-input icon-documents"><input id="write_module" maxlength="20" name="write_module" value="about" title="ชื่อโมดูล ภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น" type="text"></span>
<div class="comment" id="result_write_module">ชื่อโมดูล ภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น</div>
</div>
ซึ่งจะเห็นได้ว่าจะประหยัดเวลาในการเขียนลงได้มากและยังลดข้อผิดพลาดอันเกิดจากการลืมนั่นลืมนี่ได้ด้วย และ ถ้าสังเกตุดีๆ property แต่ละตัวก็ยังเป็นชื่อ property พื้นฐานที่ง่ายต่อการจดจำอีกด้วย
ในส่วนของ Index\Menuwrite\View ผมได้ออกแบบโดยใช้วิธีการเดียวกันกับฟอร์ม login เพียงแต่ฟอร์มนี้มีการใช้ความสามารถของ GAjax ในการ Submit ฟอร์มร่วมด้วย ทำให้ไม่ต้องมีการโหลดหน้าเว็บใหม่ทุกครั้งเมื่อมีการ Submit ฟอร์ม