:::

8. 上傳、區塊與BootStrapS3

一、 利用TadTools的TadUpFiles物件來加入上傳功能

  1. TadUpFiles物件提供完整的多檔案上傳界面、儲存、刪除及顯示功能,可外掛進任何模組,並提供模組的各種上傳需求。
  2. 請直接開啟/tadtools/TadUpFiles.php,裡面有完整用法範例。
  3. 務必先建立「模組名稱_files_center」資料表。
  4. 上傳的檔案會放在「uploads/模組名稱/」下,若一個模組有多種東西要上傳,那麼可設定$subdir,上傳檔則會置於「uploads/模組名稱/$subdir」下。
  5. $col_name及$col_sn用來綁定上傳的檔案和資料之間的關係。以電子校刊為例,若希望每期都有個封面圖,那麼可綁定每期的流水號欄位ebook_sn。$col_name的值就是「ebook_sn」,而$col_sn的值就是實際編號「$ebook_sn」。
  6. 若是使用XOOPS表單物件,記得在表單加入額外設定:
    $form->setExtra("enctype='multipart/form-data'");

二、 模組區塊(Blocks)設定

  1. 先在xoops_version.php中加入區塊設定,如$modversion['blocks'][1][xxx]。
  2. 在blocks目錄下依據file 的設定值來建立檔案,如:tad_ebook_list.php,裡面至少要有一個主函數。
  3. 主函數的名稱必須和xoops_version.php中的show_func 設定值一樣,例如:tad_ebook_list。
  4. 主函數的目的僅在於從資料庫抓出資料,送到區塊樣板中,故需在template項目設定樣板名稱,如:tad_ebook_list.html,樣板放在「templates/blocks」下。
  5. 編輯函數不一定要有,若想要在區塊中做設定值,可以設個edit_func
  6. 有編輯函數就一定要有options來設定預設值,請用「|」隔開預設值。
  7. 區塊中若有連結,需注意必須使用「絕對位置」,網址常數:XOOPS_URL,若是在樣板中則需用<{$xoops_url}>來做成絕對路徑
  8. 若執行錯誤,不建議用redirect_header轉向,直接die()或忽略之。
  9. 將最後內容結果return即可,可以是陣列,也可以是單一值,變數名稱不拘。

三、 建立區塊樣版檔

  1. 在templates/blocks依照xoops_version.php中 template 的值來建立樣板檔案,如:tad_ebook_list.html
  2. 區塊的樣版檔一律收到樣板標籤<{$block}>,不管顯示函數傳回的變數名稱為何。
  3. 樣板中完整連結,如:<{$xoops_url}>/modules/tad_ebook/index.php?ebook_sn=<{$ebook.honor_sn}>
  4. 接著更新一下模組,就可以開始使用區塊了!

四、 加入區塊編輯介面函數

  1. 我們在原先的區塊程式tad_ebook_list.php 加入一個區塊編輯介面函數。目的是產生區塊設定介面,名稱必須和edit_func 一致。
  2. 編輯介面函數其實就是一個網頁表單而已,只不過不需要<form></form>。
  3. 表單欄位的預設值即為xoops_version.php中的options 設定值。預設值的傳遞及使用均透過$options陣列。

五、 修改顯示函數

  1. 區塊若要使用區塊的設定值,可以直接引入$options參數,如:$options[0]
  2. xoops_version.php中的options 設定值,根據「|」拆開後,第一個值就是$options[0],第二個值就是$options[1]依此類推。
  3. 請將$options[0]、$options[1]套用到該用的地方。
  4. 更新模組,編輯區塊,即可看到效果。

六、 讓前台支援BootStrap3

  1. 請先安裝支援BootStrap3的school2015佈景
  2. 必須載入tad_function.php(在function.php中預設有載入)
  3. 給bootstrap3用的樣板一律在檔尾加上_b3如:「原樣板檔名_b3.html」
  4. 到xoops_version.php中加入新樣板設定,記得更新模組
  5. 前台套用樣板時,在員樣板名稱套入set_bootstrap()函數:
  6. $xoopsOption['template_main'] = set_bootstrap("bootstrap2樣板.html");
  7. 該函數會去判斷bootstrap3是否存在,並偵測目前設定,自動套用對應的樣板。

七、 讓後台支援BootStrap3

  1. 修改header.php即可,xoops_cp_header();前加入以下幾行,程式部份不需做任何變動。若使用範例包的已經有預先改好了,亦無須再修改。
    if(file_exists(XOOPS_ROOT_PATH."/modules/tadtools/include/beforeheader.php")){
      include_once XOOPS_ROOT_PATH."/modules/tadtools/include/beforeheader.php";
      $xoopsOption['template_main']=set_bootstrap() ;
    }
    xoops_cp_header();
  2. php部份不用動,但注意引入順序,$xoopsOption['template_main'] 要在引入header.php之前。
  3. 後台因為本身樣板沒有套BootStrap,所以,最外框得自己加:
    <div class="container-fluid">後台樣板</div>


八、 讓區塊支援BootStrap3

  1. 區塊的PHP程式需加上:
    $block['bootstrap_version']=$_SESSION['bootstrap'];
  2. 樣板部份不用做兩個檔,直接在樣板檔中分兩部份來做即可:
    <{if $block.bootstrap_version=='3'}>
      <!-- for bootstrap3-->  
    <{else}>
       <!-- for bootstrap2-->  
    <{/if}>

九、 BootStrap3與BootStrap2常見的差異部份

  1. BootStrap3與BootStrap2的語法大部分一樣,但不一樣的地方一樣不少:
    • row-fluid → row
    • span6 → col-md-6
    • radio inline → radio-inline
    • checkbox inline → checkbox-inline
    • hero-unit → jumbotron
    • btn-mini → btn-xs
    • btn-small → btn-sm
    • btn-large → btn-lg
    • alert-error → alert-danger
    • label → label label-default
  2. 完整升級請看:http://v3.bootcss.com/migration/

十、來調整界面吧!

後台界面:

前台界面:


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D37%26tbdsn%3D1171

書籍目錄

展開 | 闔起

線上使用者

37人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 37

更多…