PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน CKEditor CDN ร่วมกับ codeigniter อย่างง่าย

19 September 2015 By


 
สำหรับเนื้อหาในตอนต่อไปนี้ เราจะมาทำในส่วนของการอัพเดทข้อมูลของหน้า
"เกี่ยวกับเรา" aboutus ของโปรเจ็คของเรา โดยรูปแบบจะเป็นการเก็บข้อมูลหัวข้อ 
และรายละเอียดในรูปแบบ HTML โดยจะใช้ CKEditor CDN มาประยุกต์ใช้งาน
 
ก่อนอื่นสร้างตาราง tbl_aboutus ตามโครงสร้างต่อไปนี้
โดยให้ทำการเพิ่มข้อมูลเริ่มต้นเข้าไปด้วย เนื้อหานี้ เราจะทำเฉพาะการอัพเดทข้อมูล
 
 
CREATE TABLE IF NOT EXISTS `tbl_aboutus` (
  `aboutus_id` tinyint(1) unsigned NOT NULL,
  `aboutus_title` varchar(150) NOT NULL,
  `aboutus_detail` text NOT NULL,
  `aboutus_update` datetime NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;


INSERT INTO `tbl_aboutus` (`aboutus_id`, `aboutus_title`, `aboutus_detail`, `aboutus_update`) VALUES
(1, 'AboutUs Title', 'Aboutus Detail', '2015-09-19 00:00:00');

ALTER TABLE `tbl_aboutus`
  ADD PRIMARY KEY (`aboutus_id`);

ALTER TABLE `tbl_aboutus`
  MODIFY `aboutus_id` tinyint(1) unsigned NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;
 
 
หลังจากนั้นให้เราสร้างไฟล์ admin_aboutus.php ในโฟลเดอร์ apps > views > admin
โดยวางรูปแบบฟอร์มอัดเดทข้อมูล อย่างง่ายตามนี้ 
* เนื่องจากรูปแบบการใช้งานไม่มีความยุ่งยาก เราจึงไม่จำเป็นต้องสร้างเป็น model แต่จะเขียน
โค้ดอัพเดทข้อมูลทั้งหมดในส่วนของ views แทนเลย และจะไม่มีการใช้งานการตรวจสอบฟอร์มด้วย
form validation เพื่อให้การนำเสนอกระทัดรัด 
 
<div class="container">

About Us  
<br><br>
<?php
if($this->input->post('save_data')){ // เมื่อทำการกดปุ่ม sumit
    $newdata = array(
        'aboutus_title' => $this->input->post('aboutus_title'),
        'aboutus_detail' => $this->input->post('aboutus_detail'),
        'aboutus_update' => date("Y-m-d H:i:s")
    );
    $this->db->update('tbl_aboutus', $newdata,array('aboutus_id'=>1));
    redirect('admin/aboutus'); // ไปหน้าเดิม หรือก็ือให้รีโหลด
}
?>
<?php
$query = $this->db->get_where("tbl_aboutus",array("aboutus_id"=>1));
$row = $query->row_array();  //คิวรี่ข้อมูลมาแสดงแค่รายการเดียว  
if(isset($row))  // ถ้ามีข้อมูล   
{  
?>
<form action="<?=base_url('admin/aboutus')?>" method="post">
       
<table class="table">
    <tr>
    <th>หัวข้อ: </th>
    <tr>
    </tr>    
        <td>
         <input type="text" name="aboutus_title" class="form-control" value="<?=$row['aboutus_title']?>">   
        </td>
    </tr>    
    <tr>
        <th>รายละเอียด: </th>
    </tr>    
    <tr>
        <td>
        <textarea name="aboutus_detail" rows="10"  class="form-control"><?=$row['aboutus_detail']?></textarea>        
        </td>
    </tr>  
    <tr>
        <td><input type="submit" value="Update Data" name="save_data" class="btn btn-primary"></td>
    </tr>
</table>
              
</form>       

<?php } ?>          
    
</div>
 
โค้ดข้างต้นเป็นการดึงข้อมูลเดิม จากตาราง tbl_aboutus มาแสดงในฟอร์ม และเมื่อทำการกดปุ่ม submit
ข้อมูลก็จะทำการอัพเดท
 
ต่อไปให้เราสร้างลิ้งค์ในไฟล์ admin_header.php ที่อยู่ในโฟลเดอร์ apps > views >admin 
โดยเพิ่มเมนูของหน้าจัดการ "เกี่ยวกับเรา" ดังนี้
 
        <?php if(isset($_SESSION['ses_admin_id']) && $_SESSION['ses_admin_id']!=""){?>
        <li><a href="<?=base_url('admin/user')?>">User</a></li>  
        <li><a href="<?=base_url('admin/aboutus')?>">About Us</a></li>  
        <li><a href="<?=base_url('admin/service')?>">Service</a></li>  
         <li><a href="<?=base_url('admin/logout')?>">Logout</a></li>  
         <?php } ?>
 
 
 
จะเห็นว่าการสร้างฟอร์มอัพเดทข้อมูลอย่างเดียว สามารถทำได้อย่างง่าย แต่จุดประสงค์หลักของเรา
คือต้องการจัดเก็บข้อมูล รายละเอียดในรุปแบบที่รองรับ HTML แท็กได้ และจะใช้ CKEditor CDN
 

การเรียกใช้งาน CKEditor CDN และการปรับแต่ง

 
ต่อไปเราจะประยุกต์ใช้งาน CKEditor CDN กับส่วนของ textarea ในไฟล์ admin_aboutus.php
ก่อนอื่นให้เราสร้างไฟล์ สำหรับการปรับแต่ง CKEditor CDN ดังนี้
ในโฟลเดอร์ js ตำแหน่งเดียวกับโฟลเดอร์ apps และ sys ให้เราสร้างโฟลเดอร์ ckeditor ต่อด้วย
สร้างไฟล์ config.js โครงสร้างโฟลเดอร์ และไฟล์
 
  • - apps
  • - sys
  • - js > cheditor > config.js
 
โดยการตั้งค่าต่างๆ ของ CKEditor สามารถดูได้ที่ http://docs.ckeditor.com/#!/guide/dev_configuration
สำหรับของเรา จะตั้งค่ารูปแบบแค่ 2 ส่วนคือ ภาษา และ สีพื้นหลัง ckeditor
จะได้ไฟล์ config.js ดังนี้
 
CKEDITOR.editorConfig = function( config ) {
    config.language = 'th';
    config.uiColor = '#F7F7F7';
};
 
จากนั้นเรากลับมาที่ไฟล์ admin_aboutus.php ในโฟลเดอร์ apps > views > admin
เราจะมาเรียกใช้งาน CKEditor CDN ดูวิธีการใช้งาน CKEditor เพิ่มเติม ได้ที่ http://cdn.ckeditor.com/
โดยให้เราเพิ่มโค้ดต่อไป เข้าไปในส่วนท้ายของไฟล์ admin_aboutus.php
 
<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>     
<script>
CKEDITOR.replace( 'aboutus_detail', {
    customConfig:'<?=base_url('js/ckeditor/config.js')?>'
});
</script>    
 

จะได้ไฟล์ admin_aboutus.php เป็นดังนี้

 
<div class="container">

About Us  
<br><br>
<?php
if($this->input->post('save_data')){ // เมื่อทำการกดปุ่ม sumit
    $newdata = array(
        'aboutus_title' => $this->input->post('aboutus_title'),
        'aboutus_detail' => $this->input->post('aboutus_detail'),
        'aboutus_update' => date("Y-m-d H:i:s")
    );
    $this->db->update('tbl_aboutus', $newdata,array('aboutus_id'=>1));
    redirect('admin/aboutus'); // ไปหน้าเดิม หรือก็ือให้รีโหลด
}
?>
<?php
$query = $this->db->get_where("tbl_aboutus",array("aboutus_id"=>1));
$row = $query->row_array();  //คิวรี่ข้อมูลมาแสดงแค่รายการเดียว  
if(isset($row))  // ถ้ามีข้อมูล   
{  
?>
<form action="<?=base_url('admin/aboutus')?>" method="post">
       
<table class="table">
    <tr>
    <th>หัวข้อ: </th>
    <tr>
    </tr>    
        <td>
         <input type="text" name="aboutus_title" class="form-control" value="<?=$row['aboutus_title']?>">   
        </td>
    </tr>    
    <tr>
        <th>รายละเอียด: </th>
    </tr>    
    <tr>
        <td>
        <textarea name="aboutus_detail" rows="10"  class="form-control"><?=$row['aboutus_detail']?></textarea>        
        </td>
    </tr>  
    <tr>
        <td><input type="submit" value="Update Data" name="save_data" class="btn btn-primary"></td>
    </tr>
</table>
              
</form>       

<?php } ?>     
<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>     
<script>
CKEDITOR.replace( 'aboutus_detail', {
    customConfig:'<?=base_url('js/ckeditor/config.js')?>'
});
</script>    
</div>
 
เท่านี้ เราก็สามารถบันทึกข้อมูล ในส่วนของรายละเอียดเนื้อหา "เกี่ยวกับเรา" ในรูปแบบของ HTML ได้แล้ว
สวนการปรับแต่งเพิ่มเติมสำหรับ ckeditor ก็สามารถทำได้ในไฟล์ config.js ในโฟลเดอร์ js > ckeditor 
 
ดูตัวอย่างหน้าตาของหน้าจัดการส่วนเนื้อหา Aboutus ที่มีการใช้งาน CKEditor CDN




 

Tags:: codeigniter ckeditor cdn ckeditor

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง