การสร้าง Layout หรือ Template ใน Codeigniter

สวัสดีครับ เพื่อนๆทุกท่าน วันนี้ผมมาแนะนำวิธีการทำ Template หรือ Layout ใน Codeigniter เวอร์ชั่น 3.0+ โดยวิธีนี้เป็นอีก 1 วิธีในการทำ Template ที่ง่ายต่อการเรียกใช้ โดยส่วนตัวผมคิดว่า วิธีการสร้าง Template ที่กำลังจะแนะนำนี้ผมว่าโอเคละ และตัวผมเองก็ใช้อยู่เหมือนกัน เดียวลองมาดูกันครับว่าสร้างกันอย่างไร

1. สร้างไฟล์ "MY_Controller.php" ไว้ใน โฟล์เดอร์ "application/core/" หลังจากนั้นให้นำโค๊ดด้านล่างไปวางไว้ในไฟล์

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller 
 { 
   //set the class variable.
   var $template  = array();
   var $data      = array();
   //Load layout    
   public function layout() {
     // making temlate and send data to view.
     $this->template['header']   = $this->load->view('layout/header', $this->data, true);
     $this->template['left']   = $this->load->view('layout/left', $this->data, true);
     $this->template['middle'] = $this->load->view($this->middle, $this->data, true);
     $this->template['footer'] = $this->load->view('layout/footer', $this->data, true);
     $this->load->view('layout/index', $this->template);
   }
}

2. สร้างโฟล์เดอร์ไว้ใน "application/view/" โดยตั้งชื่อว่า "layout"

หลังจากนั้นให้สร้างไฟล์ดังต่อไปนี้ไว้ในโฟล์เดอร์ "layout"

header.php  นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้

<div style="height:200px; width:100%; border:2px solid #000;">  Header Area</div>

left.php  นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้

<div style="height:500px; width:200px; border:2px solid #000; float:left;">  Left Area</div>

footer.php นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้

<div style="clear:both;"></div>
<div style="height:200px; width:100%; border:2px solid #000;">  Footer Area</div>

index.php นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้

<!DOCTYPE html>
<html class="no-js">
<head>
<!-- my script and syles goes here -->
</head>
<body>
 <?php if($header) echo $header ;?>
 <?php if($left) echo $left ;?>
 <?php if($middle) echo $middle ;?>
 <?php if($footer) echo $footer ;?>
</body>
</html>

ทีนี้เราจะได้ส่วนประกอบที่เป็น layout ของ template แล้วละครับ ที่เหลือก็เรียกใช้งาน

3. สร้างไฟล์ home.php ไว้ที่ โฟล์เดอร์ "application/views/" แล้วนำโค๊ดด้านล่างนี้ไปวางไว้ในไฟล์

<div style="height:500px; width:70%; border:2px solid #000; float:left;"> Middle Area</div>

4. สร้างไฟล์ Welcome.php ไว้ที โฟล์เดอร์ "application/controllers/"  แล้วนำโค๊ดด้านล่างนี้ไปวางไว้ในไฟล์

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends MY_Controller {
  public function index() {
    $this->middle = 'home'; // passing middle to function. change this for different views.
    $this->layout();
  }
}

หมายเหตุ : Class ของไฟล์นี้สืบทอดจาก MY_Controller ที่เราสร้างไว้นั้นเองโดยทำการเรียกใช้งาน layout หรือ template มาใช้งานและ หน้าที่ของ Class ไฟล์นี้จะทำการส่งค่า (เนื้อหาส่วนกลาง) ไปให้กับ Layout นั้นเอง ตัวอย่างไฟล์นี้คือ middle ทำการส่งค่า home ไปให้ แล้ว Layout จะทำการเรียกไฟล์ home.php มานั้นเอง

เรียบร้อยแล้วครับ พอเรารันเว็บมา เช่น http://localhost/project/index.php/welcome เราจะได้หน้าตาเว็บแบบรูปภาพด้านล่างนี้

สามารถอ่านเพิ่มเติมที่ http://tutsnare.com/creating-a-layout-in-codeigniter/