[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>
```
---
# 阶段成果
