サーバーサイドJavaScriptの図書室 7冊目 express+pg+ejsでCRUD実装、U編

サーバーサイドJavaScriptの図書室

7冊目 express+pg+ejsでCRUD実装、U編

前回は追加処理をすることができました。
そうしたら続いて更新(U)をできるようにしたいかと思います。
後、新規と更新で共有部分に関してはひとまとめにしたら便利かなと思ってやることにしました。

[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
┃ ┣ useredit.js ← 更新画面表示
┃ ┣ userinsert.js
┃ ┣ usernew.js ← 新規入力画面表示
┃ ┣ userupdate.js ← 更新処理
┃ ┗ users.js
┣ views
┃ ┣ footer.ejs ← 画面のフッター部
┃ ┣ header.ejs ← 画面のヘッダー部
┃ ┣ index.ejs ← 更新画面を表示する
┃ ┣ usernew.ejs ← 共有化のため変更
┗ ┗ error.ejs

[2] 完成イメージ

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

ユーザー情報一覧画面

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

ユーザー情報修正画面

[edit user]をクリックしたときに表示される画面です。
データを編集して[update]ボタンをクリックします。

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

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

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

// 新たに作成したjsファイルをつなぐ。今回は更新系処理
var useredit = require('./routes/useredit');
var userupdate = require('./routes/userupdate');

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

今回も一応書いておきます。

[4] ソースコード(共通部)

ejsファイルは分離しておいてつなぐことができるみたいですね。
とりあえず、ヘッダー部とフッター部にファイルを分割しておきます。

header.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

footer.ejs

  </body>
</html>

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

index.ejs

<% include header %>
    <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 %>
     <a href="/useredit/<%= result.rows[i].id %>">edit User</a>
     </li>
    <% } %>
<% include footer %>

includeを使うことによって別のファイルを読み込むことができます。
今回の修正で共有部分の読み込みと編集画面を表示するためのリンクを追加しました。

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

新規入力画面を表示する部分と更新入力部分を共有化するために新規入力側に変更を入れます。

/routes/usernew.js

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

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

views/usernew.ejs

<% include header %>
    <h1><%= title %></h1>
    <form method="post" action="/<%= action %>">
    id<input type="text" name="user_id" value="<%= user_id %>" <%= readonly %>>
    user_name<input type="text" name="user_name" value="<%= user_name %>">
    <input type="submit" value="<%= button_name %>">
    </form>
<% include footer %>

せっかくだから画面表示もheaderとfooterを使い共有化しちゃいます。
このejsファイルは更新入力画面を表示するときに使います。

[6] ソースコード(更新画面)

一覧画面で[edit user]ボタンが押されたときに実行される機能です。

/routes/useredit.js

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

var pg = require('pg');

var settings = require('./settings');
var connectionString = settings.pgdb;

// URLを/xxxx/100とかになる場合に以下のように書く
router.get('/:id', function(req, res) {

  // :idと書くことで、以下のようにしてパラメーターを受け取る
  var user_id = req.params.id;

  pg.connect(connectionString, function(err, client){
    client.query("SELECT name FROM test WHERE id = $1 ",[user_id], function(err, result){
      res.render('usernew', {
        title : "ユーザー情報更新",
        action : "userupdate",
        user_id : user_id,
        disabled : "readonly",
        user_name : result.rows[0].name,
        button_name : "update",
      });
    });
  });
});

module.exports = router;

ejsはusernewを使います。置き換える値をデータベースから取得した値に変えています。

[7] ソースコード(更新処理)

なんてことはない、更新処理です。

/routes/userupdate.js

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){
    // UPDATE処理
    client.query("UPDATE test SET name = $1 WHERE id = $2", [name, user_id], function(err, result){
      // トップページにリダイレクト
      res.redirect('/');
    });
  });
});

module.exports = router;