HOOPSII MOBILE

6冊目 express+pg+ejsでCRUD実装、C編

さて、前回は一覧表示をすることができました。
今度は「一覧表示」→「入力画面表示」→「データ登録」→「一覧表示」の流れを作ってみます。
ようするに、CRUDのCをつくろうというわけです。

[1] 実験環境

今回の環境は以下のとおりです。

名前	バージョン	補足
Ubuntu	14.04	OS
node.js	v0.10.28	サーバーサイドJavaScript
express	v4.2.0	Webフレームワーク
ejs	v0.8.8	テンプレートエンジン
pg	v3.1.0	データベース

ファイルの状態は以下のとおりです。太くなっているのはいじったファイルです。

express01
┣ app.js
┣ bin
┣ node_modules
┣ package.json
┣ public
┃ ┣ images
┃ ┣ javascripts
┃ ┗ styleshetts
┣ routes
┃ ┣ index.js
┃ ┣ setting.js
┃ ┣ userinsert.js ← 追加処理
┃ ┣ usernew.js ← 入力画面用の処理
┃ ┗ users.js
┣ views
┃ ┣ index.ejs
┃ ┣ usernew.ejs ← 入力画面のテンプレート
┗ ┗ error.ejs

[2] 完成イメージ

今回は先に完成したイメージを紹介します。

ユーザー情報一覧画面(データ追加前)

前回とほぼ同じですが
画面上の[new user]をクリックすると入力画面に遷移します。

ユーザー情報登録画面

[new user]をクリックしたときに表示される画面です。
データを入力して[insert]ボタンをクリックします。

ユーザー情報一覧画面(データ追加後)

新規入力されたデータ(id=102,name=yamada)が追加されて表示しています。

と今回はこんなことをやりました。

[3] ソースコード(メインスクリプトファイル)

app.js

まずはメインスクリプトファイル。長いので追加した部分だけ記載します。

// 新たに作成したjsファイルをつなぐ
var usernew = require('./routes/usernew');
var userinsert = require('./routes/userinsert');

// ルーティング処理を設定
app.use('/usernew',usernew);
app.use('/userinsert',userinsert);

app.jsに上記のような記載を追加していけば新しいファイルが連結していきます。

[4] ソースコード(一覧画面)

一覧から入力画面へ遷移するためのリンクを追加しました。

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <a href="/usernew">new User</a>
    <p>User Count <%= data %></p>
    <% for(var i = 0; i < result.rows.length; i++) { %>
     <li>id=<%= result.rows[i].id %> name=<%= result.rows[i].name %></li>
    <% } %>
  </body>
</html>

[5] ソースコード(入力画面)

新規入力画面を表示する機能です。

/routes/usernew.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res) {
  res.render('usernew', {
    title : "ユーザー新規登録"
  });
});
module.exports = router;

views/usernew.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <form method="post" action="/userinsert">
      id<input type="text" name="user_id">
      user_name<input type="text" name="user_name">
      <input type="submit" value="insert">
    </form>
  </body>
</html>

[6] ソースコード(追加機能)

/routes/userinsert.js

入力画面で[insert]ボタンが押されたときに実行される機能です。

var express = require('express');
var router = express.Router();

var pg = require('pg');
var settings = require('./settings');

var connectionString = settings.pgdb;

// postで受け取る(formのmethodがpostなので)
router.post('/', function(req, res) {
  // 入力したデータを受け取る
  var user_id = req.body.user_id;
  var name = req.body.user_name;
  pg.connect(connectionString, function(err, client){
    // INSERT処理 バインドも使える
    client.query("INSERT INTO test (id, name) VALUES($1,$2)",[user_id, name], function(err, result){
      // トップページにリダイレクト
      res.redirect('/');
    });
  });
});

module.exports = router;

このような形にして実装しました。今回はエラーが発生したときの処理が記入していないですが、
errオブジェクトが渡したものをみることにより確認ができるようです。

[7] 更新履歴

日付	詳細
2014/07/24	新規作成