[ตอนที่ 7] เวิร์คช้อป CMS อย่างง่าย เก็บข้อมูลเป็นไฟล์

ที่หน้า login เราได้เห็นการสร้างฟอร์มโดยการเขียน HTML ไปแล้ว ซึ่งข้อเสียของการเขียนฟอร์มแบบ HTML คือ เราต้องจัดรูปแบบของฟอร์มด้วยตัวเอง เพื่อให้ใช้งานร่วมกับ GCSS แสดงผลฟอร์มที่ส่วยงามได้ ในบทนี้เราจะมาใช้คลาส Form ในการสร้างฟอร์มของคชสารกัน

เมื่อต้องการสร้างหรือแก้ไขหน้าเพจ แอพพลิเคชั่นจะทำการเรียกไปยัง 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 ตามนี้
<form method="post" id="setup_frm" class="setup_frm" autocomplete="off">
    <input type="hidden" name="token" value="72e1bf9d34a3ec9a2bde9890cfe86eb0">
</form>
<script>
    new GForm("setup_frm", "index.php/index/model/pages/save").onsubmit(doFormSubmit);
</script>

และ โค้ดส่วนนี้
// 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 ฟอร์ม
0SHAREFacebookLINE it!

เรื่องที่เกี่ยวข้อง

^