2010/01/30

[CodeIgniter] 引入CSS Template作為Master Page

我寫網站比較怪,要先把外觀弄好才開始寫功能,寫起來成就感比較大XDD
由於只有內容部分會做變動,其餘head, footer, sidebar之類的幾乎不會動,所以引入master page的方法最為簡單
在此又要來說故事了(泡茶)

沒有使用master page的做法
假設現在網頁切成四塊:

  1. head: HTML的Head, CSS, Title等部分
  2. sidebar: 連結導覽列
  3. content: 網頁主要內容
  4. footer: 網頁尾,大部分作版權宣告等
分別存在view資料夾下head.php, sidebar.php, footer.php,
Content是要顯示的內容而定
在controller內則需要這樣寫
$this->load->view('head');
$this->load->view('sidebar');
$this->load->view('content');
$this->load->view('footer');
這樣就會全部顯示,看起來不難,但是

  1. 每個controller 裡需要輸出內容的 function 都要來一次四行的引入= =
  2. 網頁要切四塊,要找很累,整體設計比較累
所以....

回到正題,因為我美術細胞早就死光了,所以只能依靠別人(握)

Get CSS Template
這裡介紹一 帖好藥 個好站 http://www.freecsstemplates.org/ 可以挑個喜歡的來用
解壓縮會得到

  • images目錄 => 放到www\ci\public\  ,public請自行建立
  • index.html => 另存至www\ci\system\application\views\index.php
  • styles.css   => 放到www\ci\public\
除HTML外,image, css, js etc...等建議放到public內,引入比較方便;
當然public可以隨你高興取,只要是靜態文件都可擺這。

使用Template
將index.php內裡的div content內容改為
<div id="content">
     <?php $this->load->view($content); ?>
</div>
此舉可讓Controller設定一變數來決定內容

修改signup.php 來引入檔案
function index(){
    ....
    $this->load->view('index');
}

解決靜態內容的路徑問題
開啟http://127.0.0.1/ci/signup/ 應可看到內容,
但是應該沒有任何CSS效果與圖片,還有PHP錯誤,打擊很大吧!哈
  
會這樣的原因有二:
  1. public目錄在htaccess會被轉成index.php/public,所以找不到CSS跟圖片
  2. HTML引入CSS與CSS內引入圖片的相對網址不正確,舉例來說:
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    會去找http://127.0.0.1/ci/style.css 來使用,導致找不到
CSS可以加上路徑就好,但是CSS內指定的image路徑也要一個一個改,這樣不好吧= =

解決方法:

  1. 修改.htaccess
    RewriteCond $1 !^(index\.php|public|images),往後有其他資料夾也比照辦理
  2. 在index.php內<head>...</head>中,引入檔案前加入
    <base href="<?php echo $this->config->item('base_url') ?>public/"/>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />


    修正:上兩行寫法會造成之後連結都會以public開頭,反而更麻煩,修正如下
    <base href="<?php echo $this->config->item('base_url') ?>"/>
    <link href="public/style.css" rel="stylesheet" type="text/css" media="screen" />

    注意要在加在引入檔案 (css, js) 前,不然還是掛= =


再次重新整理,畫面應該就正常了
但是事實是殘酷的,圖片的CSS是有出來,但是怎麼還是有ERROR


修正PHP錯誤
問題很簡單,還記得在view: index.php內中有這麼一行
<?php $this->load->view($content); ?>
因為在Controller沒有定義content內容,所以有錯誤
再次修改signup.php 內 index.php
$data['content'] = 'home';
$this->load->view('index',$data);
建立view: home.php,內容先隨便塞'123'
重新整理!你得到它了


每個需要輸出畫面的Funtion只要兩行
$data['content'] = 'home';
設定MASTER PAGE內容要呼叫哪個頁面,
此例是要在DIV Content內顯示home.php的內容
 $this->load->view('index',$data);
引入master page,並把變數傳過去

C 與 V 內容
controllers/signup.php
Class Signup extends Controller{
 function signup(){
  parent::Controller();
 }
 function index(){
  $data['content'] = 'home';
  $this->load->view('index',$data);
 }
}

views/index.php => 內容太多只貼修改的
<head>
...
<base href="<?php echo $this->config->item('base_url') ?>public/"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
...
<div id="content">
            <?php $this->load->view($content); ?>
</div>

views/home.php
123

語法說明
$this->load->view('index',$data);
index => 引入view的檔名 ( application\views\index.php )
$data => 變數傳到VIEW內,但會做轉換

舉例:
$data['content'] 到 view 後,view可以得到 $content的變數
如是陣列 $data['iamary'] = array( 1,2,3,4,5 );
view會得到 $iamary = array( 1,2,3,4,5 );

總結
透過master page,可以以最少的CODE來變更網頁內容
並且讓靜態部分的修改與以往無異;
透過baseurl的指定,讓引入檔案路徑可不做修改使用,也保留網站修改彈性
簡介view的變數與引入方法

目前為止,已經可以開始寫程式了(握拳)
但是好像沒用到Model...對,MODEL主要用在對資料庫的存取等,目前並不需要。

沒有留言:

張貼留言