Node.js(Express)×PostgressSQLを使ったチャットアプリ 2 #Node.js

データベースからデータを取得する

routes/index.jsを書き換えます。

//　中略

router.get('/', async (req, res, next) => {
  try {
    const getQuery = 'SELECT *, TO_CHAR(created_at, \'YYYY年MM月DD日 HH24時MI分SS秒\') AS created_at FROM channel';
    const queryResult = await pool.query(getQuery)

    console.log(queryResult.rows)

  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

//　中略

http://localhost:3000/にアクセスしてターミナルにデータが表示されていればOKです

routes/index.jsを書き換えます。

router.get('/', async (req, res, next) => {
  try {
    const getQuery = 'SELECT *, TO_CHAR(created_at, \'YYYY年MM月DD日 HH24時MI分SS秒\') AS created_at FROM channel';
    const queryResult = await pool.query(getQuery)

    res.render('index', {
      title: 'Express',
      channelList: queryResult.rows
    })

  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

取得したデータを表示させる

views/index.ejsを書き換えます。

<!DOCTYPE html>
<html lang="ja">

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

 <body>
   <div>
     <form action="/" method="post">
       <input type="text" name="title" placeholder="タイトル" required>
       <button type="submit">作成</button>
     </form>

     <ul class="main_list">
       <% channelList.forEach(function(channelItem) { %>
         <li class="main_list_item">
           <div class="list">
             <p class="title">
               <%= channelItem.channel_title %>
             </p>
             <p class="date">
               <%= channelItem.created_at %>
             </p>
           </div>
         </li>
       <% }); %>
     </ul>
   </div>

 </body>
</html>

http://localhost:3000/にアクセスしてデータベースに登録したデータが表示されていればOKです

新規ページを作成

新規でページを作成するためにapp.jsを書き換えます。

const usersRouter = require('./routes/users');
const message = require('./routes/message'); //追加

const app = express();
//中略

app.use('/users', usersRouter);
app.use('/message', message); //追加

// catch 404 and forward to error handler
//中略

routes/message.jsを/messageというURLに紐づける処理をしています。

ファイルを作成

routes配下にmessage.jsを作成
views配下にmessage.ejsを作成

トークページの作成

routes/message.jsにコードを書きます。


const express = require('express');
const router = express.Router();
const pool = require('../dbConnection');

router.get('/:channel_id', async (req, res, next) => {
  try {
    const channelId = req.params.channel_id;
    const getQuery = "SELECT * FROM channel WHERE channel_id = $1"

    const getQueryResult = await pool.query(getQuery, [channelId])

    res.render('message', {
      title: getQueryResult.rows[0].channel_title,
      channel: getQueryResult.rows[0],
    });
  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

module.exports = router;

views/message.ejsにコードを書きます。

<!DOCTYPE html>
<html lang="ja">

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

  <body>
    <div class="wrapper">
      <p class="main-title">
        <%= title %>
      </p>
      <a href="/" class="btn">トップへもどる</a>
    </div>
  </body>

</html>

このように表示されていればOKです

トークページに投稿機能をつける

views/message.ejsにコードを追加します。

<form action="/message/<%= channel.channel_id %>" method="post">
  <input type="text" name="message"required>
  <button>投稿</button>
</form>

routes/message.jsにコードを追加します。

// 中略
const dayjs = require('dayjs'); //　追加
const pool = require('../dbConnection');

// 中略

router.post('/:channel_id', async (req, res, next) => {
  try {
    const messages = req.body.message;
    const channelId = req.params.channel_id;
    const createdAt = dayjs().format('YYYY-MM-DD HH:mm');
    const insertQuery = "INSERT INTO messages (message, channel_id, created_at) VALUES ($1, $2, $3)";

    await pool.query(insertQuery, [messages, channelId, createdAt]);

    res.redirect('/message/' + channelId);

  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

module.exports = router;

フォームに値を入力してデータベースを確認してみてください。
messagesのテーブルにデータが入っていればOKです。

トークページに表示させる

routes/message.jsを書き換えます。

router.get('/:channel_id', async (req, res, next) => {
  try {
    const channelId = req.params.channel_id;
    const getChannelQuery = "SELECT * FROM channel WHERE channel_id = $1"
    //　↓追加
    const getMessagesQuery =
      "SELECT *, TO_CHAR(created_at, \'YYYY年MM月DD日 HH24時MI分SS秒\') AS created_at FROM messages WHERE channel_id = $1"

    const channelQueryResult = await pool.query(getChannelQuery, [channelId])
    const messagesQueryResult = await pool.query(getMessagesQuery, [channelId]) //　追加

    res.render('message', {
      title: channelQueryResult.rows[0].channel_title,
      channel: channelQueryResult.rows[0],
      messageList: messagesQueryResult.rows, //　追加
    });
  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

views/message.ejsにコードを追加

// 中略
</form>

<% if (messageList.length) { %>
  <div>
      <ul class="main-list">
          <% messageList.forEach(function(messageItem) { %>
          <li class="main-list_item">
              <div class="list">
                  <p class="title"><%= messageItem.message %></p>
                  <p class="date"><%= messageItem.created_at %></p>
              </div>
          </li>
          <% }); %>
      </ul>
  </div>
<% } %>

// 中略

上記のように表示されていればOKです

トップページのチャンネルをリンクにする

views/index.ejsを書き換えます。

// 中略
<li class="main_list_item">
  <a href="/message/<%= channelItem.channel_id %>" class="list">
    <p class="title">
      <%= channelItem.channel_title %>
    </p>
    <p class="date">
      <%= channelItem.created_at %>
    </p>
  </a>
</li>
// 中略

トップページからトークページに飛べるようになればOKです

cssを書く

ここまで作成したものはデザインが全くできていないのでcssで装飾してください。

updateとdeleteを使って機能を追加する

自走課題です、難しければDiscordで質問してください。