สร้าง Template อย่างง่ายกันก่อน Codeigniter

13 กุมภาพันธ์ 2555


การสร้างหน้ารูปแบบหลักเพื่อใช้หน้านั้นได้กับหลายๆ หน้าไม่ต้องเขียนคำสั่งเดิมๆ ซ้ำหลายครั้ง ประหยัดเวลาในการแก้ไขรูปแบบ ช่วยให้การแก้ไขเนื้อหาส่วนเดียวกันที่มีอยู่หลายๆ หน้า ให้แก้ไขเพียงที่เดียวแล้วมีผลเปลี่ยนแปลงกับทุกหน้า ทั้งยังป้องกันการตกหล่นของข้อมูล หากต้องแก้เนื้อความเดียวกันที่หลายหน้า.....


วิธีการสร้าง template ต่อไปนี้เป็นวิธีการอย่างง่ายเท่านั้นนะครับ แต่สามารถนำไปใช้ได้จริง โดยการที่เราจะสร้าง
ไฟล์ template ขึ้นมาหนึ่งไฟล์ จากนั้นเราก็แบ่งไฟล์นี้ ออกเป็น 3ส่วน
ส่วนที่1 เป็น header
ส่วนที่2 เป็น sidebar
ส่วนที่3 เป็น footer
ในส่วนของเนื้อหา หรือ content นั้นคือส่วนที่เราเพิ่มเข้าไปในภายหลัง

เริ่ม



ให้ท่านสร้างโฟล์เดอร์ และไฟล์ต่างๆตามที่เห็นในรูปภาพด้านบน
จากนั้นสร้าง template ขึ้นมาก่อนหนึ่งไฟล์ (อันนี้สร้างขึ้นมาต่างหากไม่เกี่ยวกับ codeigniter นะครับ
แต่เราจะใช้โค้ดนี้ไปทำเป็น template) ตามตัวอย่าง
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="main-header">

<center>
        <div id="header">
            Header
        </div>
    
        <div id="main-menu">
            <div id="menu">
            Menu
            </div>
        </div>
</center>
            
        </div>

<center>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td  valign="top">
                    <div id="content">
                        Content
                    </div>
                </td>
                <td valign="top">
                    <div id="sidebar-r">
                        Sidebar
                    </div>
                </td>
            </tr>
        </table>
</center>
    
    <div id="main-footer">
        
<center>
    <div id="footer">
        Footer
    </div>
</center>
        
    </div>
    
    </body>
</html>
เราจะแบ่งไฟล์ด้านบนนี้ออกเป็น 3 ส่วนดังนี้
ส่วนที่1 ไฟล์ header.php 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="main-header">

<center>
        <div id="header">
            Header
        </div>
    
        <div id="main-menu">
            <div id="menu">
            Menu
            </div>
        </div>
</center>
            
        </div>

<center>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td  valign="top">
                    <div id="content">

ส่วนที่2 ไฟล์ sidebar_r.php
</div>
                </td>
                <td valign="top">
                    <div id="sidebar-r">
                        Sidebar
                    </div>
                </td>
            </tr>
        </table>
</center>

ส่วนที่3 ไฟล์ footer.php
<div id="main-footer">
        
<center>
    <div id="footer">
        Footer
    </div>
</center>
        
    </div>
    
    </body>
</html>
ให้ท่านก๊อปโค้ดตามส่วนต่างๆไปไว้ในไฟล์แต่ละไฟล์ ที่อยู่ในโฟล์เดอร์ template_u



จากนั้นให้ท่านสร้างโฟล์เดอร์ ชื่อว่า css และสร้างไฟล์ชื่อว่า mystyle.css ขึ้นมาตามรูปด้านบน
ไฟล์ mystyle.css
body{
background:#f2f2f2;
margin:0 auto;
font-family: "Tahoma", Georgia, Times, serif;
font-size: 14px;
color: #3F3F3F;
}

#main-header{
background:#8080FF;
width:100%;
}

#header{
background:#8080FF;
height:90px;
width:980px;
text-align:left;
overflow:hidden;
}

#main-menu{
background:#000000;
width:100%;
}

#menu{
background:#000000;
padding:9px;
height:20px;
width:962px;
text-align:left;
color:#ffffff;    
}

#content{
background:#ffffff;
text-align:left;
min-height:450px;
padding:10px;
width:660px;
overflow:hidden;
}

#sidebar-r{
background:#dddddd;
text-align:left;
min-height:450px;
width:280px;
padding:10px;
overflow:hidden;
}

#main-footer{
background:#000000;
width:100%;
}

#footer{
background:#000000;
min-height:60px;
width:980px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
color:#ffffff;
}

เราจะนำเข้าไฟล์นี้ที่ header.php แบบนี้
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet"
          href="<?php echo base_url()."css/mystyle.css";?>"></link>
</head>

ตอนนี้การนำเข้า css ของเรายังใช้งานไม่ได้เนื่องจากว่า codeigniter ของเรามันยังไม่รู้จัก base_url()
เพราะฉนั้นเราจะเข้าไปสั่งให้ codeigniter โหลด base_url(); แบบอัตโนมัติ
ให้เข้าไปที่ application/config/autoload.php ปรับแต่งบรรทัดนี้
$autoload['helper'] = array('url');

ในส่วนของ header.php ของเรามีส่วนที่เป็น menu ด้วย แต่เราได้สร้างไฟล์ menu.php แยกเอาไว้แล้วเราจึง
ต้องเรียกไฟล์ menu.php มาแสดงด้วยโค้ดนี้
ไฟล์ header.php
<div id="menu">
<?=$this->load->view('template/template_u/menu');?>
</div>

ต่อไปที่ไฟล์ menu.php ให้ท่านเขียนโค้ดนี้ลงไป
<ul>
    <li><a href="#">Menu1</a>&nbsp;&nbsp;|</li>
    <li><a href="#">Menu2</a>&nbsp;&nbsp;|</li>
    <li><a href="#">Menu3</a>&nbsp;&nbsp;|</li>
    <li><a href="#">Menu4</a></li>
</ul>

จากนั้นก็ไปเพิ่มเติม css ที่ไฟล์ mystyle.css ดังนี้
#menu ul{
    list-style:none;
    padding:0;
    margin:0;
}

#menu ul li{    
    float:left;
    margin-right:10px;
}

#menu ul li a{
    color:#dddddd;
    text-decoration:none;
    font-weight:bold;
}

#menu ul li a:hover{
    color:#ffffff;
    text-decoration:underline;
}

มาถึงตอนนี้ template ของเราก็ถูกสร้างขึ้นเรียบร้อยแล้ว ที่เหลือก็เพียงแต่หยิบไปใช้เท่านั้น

ใช้งาน template
ในบทความก่อนเราได้สร้างไฟล์ home_v.php ไว้แล้วให้เรานำไฟล์นี้ไปไว้ในโฟล์เดอร์ frontend จากนั้นก็เรียกใช้ template ของเราแบบนี้
ไฟล์ home_v.php
<?=$this->load->view('template/template_u/header');?>

<!------------------------CONTENT---------------------------->
<div id="post">
<h3>Hello World</h3>
<ul>
<?php
   foreach($mydata as $item){
       echo '<li>'.$item->title.' '.$item->author.' '.$item->year.'</li>';
   }

?>        
</ul>
<div>
<!----------------------END CONTENT-------------------------->

<?=$this->load->view('template/template_u/sidebar_r');?>

<?=$this->load->view('template/template_u/footer');?>

เพิ่มเติม css ให้กับ id="post" ที่ไฟล์ mystyle.css 
#post{
    width:660px;
    word-wrap:break-word;
}

ต่อไปให้ท่านไปที่ application/controllers/home.php ไฟล์นี้เราได้สร้างไว้แล้วในบทความก่อน ให้ปรับแก้
การโหลด views เสียใหม่แบบนี้
$this->load->view('frontend/home_v', $data);

ไฟล์ home.php
class Home extends CI_Controller{
     
    public function index()
    {
        $this->load->model('home_m');
        $data['mydata'] = $this->home_m->getAll();       
         
        $this->load->view('frontend/home_v', $data);
    }
     
}

แสร็จแล้วสำหรับการสร้าง template ของเรา ให้ท่านลองรันทดสอบดู ถ้าไม่ติดปัญหาอะไรท่านก็จะเห็นเหมือนรูป
ด้านล่างนี้



เพิ่มเติม
การใช้งาน base_url(); นั้นถ้าเราไม่เข้าไปปรับที่ config แบบนี้
$autoload['helper'] = array('url');
เราสามารถใช้งานได้อีกแบบหนึ่งคือให้เราสร้างฟังก์ชั่น __construct() เพิ่มที่ไฟล์ home.php
แล้วเรียกใช้ url แบบนี้
$this->load->helper('url');

ตัวอย่าง ไฟล์ home.php
class Home extends CI_Controller{

   public function __construct()
   {
        parent::__construct();
        $this->load->helper('url');// เรียกใช้งาน url
   }

   public function index()
   {
       $this->load->model('home_m');
       $data['mydata'] = $this->home_m->getAll();       

       $this->load->view('frontend/home_v', $data);
   }

}



ส่วนในโฟล์เดอร์ template_a นั้นก็ให้ท่านก๊อปเอาไฟล์ในโฟล์เดอร์ template_u ไปทั้งหมดตามรูปด้านบนไปเก็บไว้ก่อน
เพราะเดี๋ยวเราจะมาลุยกันต่อในส่วนของ admin
template_a หมายถึงเป็นส่วนของ admin
template_u หมายถึงเป็นส่วนของ user

ถึงตอนนี้ผมคิดว่าจะยาวไปสักหน่อยแล้วสำหรับบทความนี้ก็ขอจบเพียงเท่านี้ครับ.....



Post By admin
wutry  10 มีนาคม 2555
ขอบคุณมาก
BelOveD  27 มีนาคม 2555
ลืม สร้าง Model รึป่าวครับ
neowizard  28 มีนาคม 2555
ไม่น่าจะมี Model นะครับผมว่า เพราะมันไม่เกี่ยวกับฐานข้อมูลเลยครับ
ชอบ : คนอ่านจังเลย..อิอิ
  • กรุณา Login ก่อนโพส