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

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

- 日報一覧ページ: /admin/reports/
- 日報新規登録ページ: /admin/reports/add
- 日報詳細ページ: /admin/reports/:id/
- 日報修正ページ: /admin/reports/:id/edit/
- 日報削除ページ: /admin/reports/:id/delete/

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

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

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

```app/views/reports/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: 8%') 番号
        th(style='width: 23%') 日時
        th(style='width: 30%') 案件
        th(style='width: 19%') 工程
        th(style='width: 20%') 操作
    tbody
      - for (var i = 1; i <= 20; i += 1)
        tr
          td #{i}
          td 2015年12月4日(金) <br> 13:00 - 14:00 (1時間)
          td #{i % 2 === 1 ? 'A社様向けシステム開発' : 'B社様向けホームページ制作'}
          td 見積
          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/reports/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/reports/admin-detail.jade
extends ../layouts/2-column/admin
include ./mixins/detail

block main
  h1.page-header 日報の詳細

  .panel.panel-default
    .panel-heading 日報
    .panel-body
      +detail

  .row
    .col-md-offset-3.col-md-6
      a.btn.btn-default.btn-block(href='../') 一覧ページへ戻る

```

```app/views/reports/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/reports/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/reports/mixins/detail.jade
mixin detail
  .form-horizontal
    .form-group
      label.control-label.col-sm-3 日付
      .col-sm-9
        p.form-control-static 2015年12月5日(土)
    .form-group
      label.control-label.col-sm-3 開始時刻
      .col-sm-9
        p.form-control-static 10:00
    .form-group
      label.control-label.col-sm-3 終了時刻
      .col-sm-9
        p.form-control-static 11:00
    .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
        p.form-control-static 見積
    .form-group
      label.control-label.col-sm-3 タイトル
      .col-sm-9
        p.form-control-static 提案書を作成した
    .form-group
      label.control-label.col-sm-3 備考
      .col-sm-9
        p.form-control-static もう少しで完成です

```

```app/views/reports/mixins/form.jade
mixin form
  .form-horizontal
    .form-group
      label.control-label.col-sm-3(for='date') 日付
      .col-sm-9
        input.form-control(type='text', date='date', id='date', placeholder='日付をYYYY/MM/DD形式で入力')
    .form-group
      label.control-label.col-sm-3(for='from') 開始時刻
      .col-sm-9
        input.form-control(type='text', name='from', id='from', placeholder='開始時刻をHH:MM形式で入力')
    .form-group
      label.control-label.col-sm-3(for='to') 終了時刻
      .col-sm-9
        input.form-control(type='text', name='to', id='to', placeholder='開始時刻をHH:MM形式で入力')
    .form-group
      label.control-label.col-sm-3(for='project-id') 案件
      .col-sm-9
        select.form-control(name='project-id', id='project-id')
          option - クリックして選択 -
    .form-group
      label.control-label.col-sm-3(for='category') 工程
      .col-sm-9
        select.form-control(name='category', id='category')
          option - クリックして選択 -
    .form-group
      label.control-label.col-sm-3(for='title') タイトル
      .col-sm-9
        input.form-control(type='text', name='title', id='title', placeholder='タイトルを簡潔に入力')
    .form-group
      label.control-label.col-sm-3(for='title') 備考
      .col-sm-9
        textarea.form-control(rows='5', name='title', id='title', placeholder='備考を必要に応じて入力')

```

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

```
cd app
npm start
```

別のシェルで

```
cd static
npm start
```

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

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

# おわりに
次回はAPIのルーティングを行います！