[toc]
# 談談思路
我不打算將全部過程做好，然后將全部代碼貼出來，我喜歡做好階段性工作，就貼階段成果。
這章節，我會先從視覺上實現讀取文件夾，至于邏輯問題，后面深化解決。
首先，在Controller這個問題上，我只用 `Kanban` 一個Controller，作用是讀取文件夾，將值傳到View中，它的工作就完的了。
然后，在View這個問題上，我將 `header` 和 `footer` 都獨立出來放到 `inc` 文件夾中，方便日后。并且將看板的循環給寫出來。
暫時不用Model。
文件結構：
```
Controllers\
|--- Checks.php
|--- Home.php
|--- Kanban.php（本章節新建）
Views\
|--- errors\
|--- cli\
|--- html\
|--- inc\
|--- footer.php（本章節新建）
|--- header.php（本章節新建）
|--- form.php
|--- kanban.php（本章節新建）
|--- welcome_message.php
```
# Controller :: Kanban
`e:\xampp\htdocs\application\Controllers\Kanban.php`
```
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class Kanban extends Controller{
function __construct(){
helper('filesystem');
}
public function index(){
$data['floders'] = directory_map('./data');
echo view('inc/header');
echo view('kanban',$data);
echo view('inc/footer');
}
}//class
```
# View :: 使用看板
[zui.sexy](http://zui.sexy) 中有 [看板](http://zui.sexy/#view/board) ，直接拿來用吧。
---
## kanban.php
`e:\xampp\htdocs\application\Views\kanban.php`
```html
<?php
$board_column = array(
'1' => 'Note',
'2' => 'Sideway',
'3' => 'Loop',
'4' => 'Action',
'5' => 'Waitting',
'6' => 'Completed',
);
?>
<div class="page-header">
<h1>Floder Management</h1>
</div>
<!-- 使用 .boards 類來管理多個 .board -->
<div class="boards" id="myBoards">
<div class="row">
<?php foreach($board_column as $board_key => $board_title){ ?>
<!-- .board 為單個容器 -->
<div class="col-md-2">
<div class="board panel">
<div class="panel-heading">
<strong><?=$board_title?></strong>
</div>
<div class="panel-body">
<div class="board-list">
<?php foreach($floders as $floders_key => $floders_value){ ?>
<div class="board-item">
<?=$floders_key?>
</div>
<?php } ?>
</div><!-- .board-list -->
</div><!-- .panel-body -->
</div><!-- .board -->
</div><!-- .col-md-2 -->
<?php } ?>
</div><!-- .row -->
</div><!-- .boards -->
<script>
$('#myBoards').boards({
drop: function(e){
$.zui.messager.show(e.element.text() + " 拖放到 " + e.target.closest('.board').find('.panel-heading').text());
}
});
</script>
```
---
## header.php
`e:\xampp\htdocs\application\Views\inc\header.php`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Floder Management</title>
<!-- ZUI 標準版壓縮后的 CSS 文件 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css">
<!-- ZUI Javascript 依賴 jQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/jquery/jquery.js"></script>
<!-- ZUI 標準版壓縮后的 JavaScript 文件 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/js/zui.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/board/zui.board.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/board/zui.board.min.js"></script>
<style>
body{margin:3%;}
</style>
</head>
<body>
```
---
## footer.php
```html
</body>
</html>
```
---
# 階段成果
