สวัสดีครับ เพื่อนๆทุกท่าน วันนี้ผมมาแนะนำวิธีการทำ Template หรือ Layout ใน Codeigniter เวอร์ชั่น 3.0+ โดยวิธีนี้เป็นอีก 1 วิธีในการทำ Template ที่ง่ายต่อการเรียกใช้ โดยส่วนตัวผมคิดว่า วิธีการสร้าง Template ที่กำลังจะแนะนำนี้ผมว่าโอเคละ และตัวผมเองก็ใช้อยู่เหมือนกัน เดียวลองมาดูกันครับว่าสร้างกันอย่างไร
1. สร้างไฟล์ “MY_Controller.php” ไว้ใน โฟล์เดอร์ “application/core/” หลังจากนั้นให้นำโค๊ดด้านล่างไปวางไว้ในไฟล์
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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 นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้
|
1 |
<div style="height:200px; width:100%; border:2px solid #000;"> Header Area</div> |
left.php นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้
|
1 |
<div style="height:500px; width:200px; border:2px solid #000; float:left;"> Left Area</div> |
footer.php นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้
|
1 2 |
<div style="clear:both;"></div> <div style="height:200px; width:100%; border:2px solid #000;"> Footer Area</div> |
index.php นำโค๊ดด้านล่างไปวางไว้ในไฟล์นี้
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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/” แล้วนำโค๊ดด้านล่างนี้ไปวางไว้ในไฟล์
|
1 |
<div style="height:500px; width:70%; border:2px solid #000; float:left;"> Middle Area</div> |
4. สร้างไฟล์ Welcome.php ไว้ที โฟล์เดอร์ “application/controllers/” แล้วนำโค๊ดด้านล่างนี้ไปวางไว้ในไฟล์
|
1 2 3 4 5 6 7 |
<?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/
