Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

第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='#') «
      li.active
        a(href='#') 1
      li
        a(href='#') 2
      li
        a(href='#') 3
      li.next
        a(href='#') »

  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='備考を必要に応じて入力')

動作確認

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

cd app
npm start

別のシェルで

cd static
npm start

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

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

おわりに

次回はAPIのルーティングを行います!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away