Node.js で小規模なアプリケーションを開発する方法 その9


# はじめに
第2回目は、第1回目に引き続き「ページ仮作成」の作業を進めます。今回は、下記のページの仮作成を行います。

- 案件一覧ページ: /admin/projects/
- 案件新規登録ページ: /admin/projects/add
- 案件詳細ページ: /admin/projects/:id/
- 案件修正ページ: /admin/projects/:id/edit/
- 案件削除ページ: /admin/projects/:id/delete/

仮作成前に下記のディレクトリとファイルを追加します。

```
mkdir app/views/projects/mixins
touch app/views/projects/mixins/detail.jade
touch app/views/projects/mixins/form.jade
```

# ビューの編集
上記5件のページと新規に追加した2点のミックスインについて、編集後の内容を下記に記載します。

```app/views/projects/admin-list.jade
extends ../layouts/2-column/admin

block main
  h1.page-header 案件一覧
  p.well 60件中1件目から20件目までの20件を表示しています

  .text-right
    a.btn.btn-primary(href='./add/') 新規登録

  .text-center
    ul.pagination
      li.previous
        a(href='#') &laquo;
      li.active
        a(href='#') 1
      li
        a(href='#') 2
      li
        a(href='#') 3
      li.next
        a(href='#') &raquo;

  table.table.table-bordered.table-striped
    thead
      tr
        th(style='width: 10%') 番号
        th(style='width: 50%') 案件
        th(style='width: 30%') 操作
    tbody
      - for (var i = 1; i <= 20; i += 1)
        tr
          td #{i}
          td #{i % 2 === 1 ? 'A社様向けシステム開発' : 'B社様向けホームページ制作'}
          td
            a.btn.btn-info.btn-xs(href='./1/') 詳細
            | 
            a.btn.btn-warning.btn-xs(href='./1/edit/') 修正
            | 
            a.btn.btn-danger.btn-xs(href='./1/delete/') 削除

  .text-center
    ul.pagination
      li.previous
        a(href='#') &laquo;
      li.active
        a(href='#') 1
      li
        a(href='#') 2
      li
        a(href='#') 3
      li.next
        a(href='#') &raquo;

```

```app/views/projects/admin-add.jade
extends ../layouts/2-column/admin
include ./mixins/form

block main
  h1.page-header 案件の新規登録

  form
    .panel.panel-default
      .panel-heading 案件フォーム
      .panel-body
        +form
    a.btn.btn-default(href='../') 一覧ページへ戻る
    a.btn.btn-primary.pull-right(href='../') この内容で登録する

```

```app/views/projects/admin-detail.jade
extends ../layouts/2-column/admin
include ./mixins/detail

block main
  h1.page-header 案件の詳細

  .panel.panel-default
    .panel-heading 案件
    .panel-body
      +detail

  .panel.panel-default
    .panel-heading 案件
    .panel-body
      p.text-right 単位: 人日
      table.table
        thead
          tr
            th 番号
            th 名称
            th 予定工数
            th 消費工数
            th 消費率
            th 残存工数
        tbody
          tr
            td 1
            td 概要提案書作成
            td 3.0
            td 0.0
            td 0.0%
            td 3.0

          tr
            td 2
            td 概要要件定義書作成
            td 3.0
            td 0.0
            td 0.0%
            td 3.0
          tr
            td 3
            td 見積
            td 2.0
            td 0.0
            td 0.0%
            td 2.0
          tr
            td 4
            td 契約
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 5
            td 詳細提案書作成
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 6
            td 詳細提案書点検補助
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 7
            td 詳細要件定義書作成
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 8
            td 詳細要件定義書点検補助
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 9
            td 計画
            td 2.0
            td 0.0
            td 0.0%
            td 2.0
          tr
            td 10
            td 画面作成
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 11
            td 画面点検補助
            td 8.0
            td 0.0
            td 0.0%
            td 8.0
          tr
            td 12
            td プロトタイプ作成
            td 12.0
            td 0.0
            td 0.0%
            td 2.0
          tr
            td 13
            td プロトタイプ点検補助
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 14
            td 設計仕様書作成
            td 14.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 15
            td 設計仕様書点検補助
            td 2.0
            td 0.0
            td 0.0%
            td 2.0
          tr
            td 16
            td ソースコード作成
            td 16.0
            td 0.0
            td 0.0%
            td 6.0
          tr
            td 17
            td テストコード作成
            td 16.0
            td 0.0
            td 0.0%
            td 6.0
          tr
            td 18
            td 操作手順書作成
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 19
            td 運用環境構築
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 20
            td 動作確認
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 21
            td 初期設定
            td 4.0
            td 0.0
            td 0.0%
            td 4.0
          tr
            td 22
            td 検収補助
            td 2.0
            td 0.0
            td 0.0%
            td 2.0
          tr
            td(colspan='2').text-right 合計
            td 144.0
            td 0.0
            td 0.0%
            td 144.0
  .row
    .col-md-offset-3.col-md-6
      a.btn.btn-default.btn-block(href='../') 一覧ページへ戻る

```

```app/views/projects/admin-edit.jade
extends ../layouts/2-column/admin
include ./mixins/form

block main
  h1.page-header 案件の修正

  form
    .panel.panel-default
      .panel-heading 案件フォーム
      .panel-body
        +form
    a.btn.btn-default(href='../../') 一覧ページへ戻る
    a.btn.btn-primary.pull-right(href='../../') この内容で修正する

```

```app/views/projects/admin-delete.jade
extends ../layouts/2-column/admin

block main
  h1.page-header 案件の削除
  p 案件を削除するには「削除を実行する」ボタンをクリックしてください

  a.btn.btn-default(href='../../') 一覧ページへ戻る
  a.btn.btn-danger.pull-right(href='../../') 削除を実行する

```

```app/views/projects/mixins/detail.jade
mixin detail
  .form-horizontal
    .form-group
      label.control-label.col-sm-3 番号
      .col-sm-9
        p.form-control-static 1
    .form-group
      label.control-label.col-sm-3 名称
      .col-sm-9
        p.form-control-static A社様向けシステム開発
    .form-group
      label.control-label.col-sm-3 カテゴリ
      .col-sm-9
        ul.form-control-static
          li 概要提案書作成(3.0人時)
          li 概要要件定義書作成(3.0人時)
          li 見積(2.0人時)
          li 契約(4.0人時)
          li 詳細提案書作成(8.0人時)
          li 詳細提案書点検補助(8.0人時)
          li 詳細要件定義書作成(8.0人時)
          li 詳細要件定義書点検補助(8.0人時)
          li 計画(2.0人時)
          li 画面作成(8.0人時)
          li 画面点検補助(8.0人時)
          li プロトタイプ作成(12.0人時)
          li プロトタイプ点検補助(4.0人時)
          li 設計仕様書作成(14.0人時)
          li 設計仕様書点検補助(2.0人時)
          li ソースコード作成(16.0人時)
          li テストコード作成(16.0人時)
          li 操作手順書作成(4.0人時)
          li 運用環境構築(4.0人時)
          li 動作確認(4.0人時)
          li 初期設定(4.0人時)
          li 検収補助(2.0人時)
    .form-group
      label.control-label.col-sm-3 工数
      .col-sm-9
        p.form-control-static 18.0 人日

```

```app/views/projects/mixins/form.jade
mixin form
  .form-horizontal
    .form-group
      label.control-label.col-sm-3(for='index') 番号
      .col-sm-9
        input.form-control(type='number', name='index', id='index', placeholder='案件の番号を入力')
    .form-group
      label.control-label.col-sm-3(for='name') 名称
      .col-sm-9
        input.form-control(type='text', name='name', id='name', placeholder='案件の名称を入力')
    .form-group
      label.control-label.col-sm-3(for='categories') カテゴリ
      .col-sm-9
        textarea.form-control(rows='10', name='categories', id='categories', placeholder='案件のカテゴリをJSON形式で入力')
    .form-group
      label.control-label.col-sm-3(for='day') 工数
      .col-sm-9
        input.form-control(type='number', name='day', id='day', placeholder='案件の工数を人日単位で入力')

```

# 動作確認
動作を確認するには、```app``` と ```static``` の両方のサーバを動作させた後、 http://localhost:3000/ にログインします。

```
cd app
npm start
```

別のシェルで

```
cd static
npm start
```

下記の順序でページ遷移を行い、表示内容を確認します。

1. トップページ
2. ログインページ
3. ダッシュボードページ
4. 案件一覧ページ
5. 案件新規登録ページ
6. 案件詳細ページ
7. 案件修正ページ
8. 案件削除ページ

# おわりに
次回は日報関連のページ仮作成を行います！