▶ nodejs 의 App 포스팅은 생활코딩에서 제공하는 강의를 기반으로 한 학습내용입니다.
▶ 출처 : 생활코딩 > WEB > WEB2 - Node.js > Node.js - MySQL (https://opentutorials.org/course/3347)
▷ 해당 학습 과정의 프로젝트를 저의 Github Repository 에도 게시하였습니다. (devdhjo/nodejs_opentutorials)

◇ MySQL 모듈을 이용해서 Node.js 홈페이지에 글을 수정하는 방법을 학습합니다.

1. main.js 파일의 ‘/update’ 처리 코드를 수정합니다.

1) 파일 목록을 가져오는 함수 readdir 를 삭제하고, 데이터베이스 목록을 조회하는 쿼리를 추가합니다.

  • 사용하지 않을 변수 filteredId 는 삭제합니다.
var app = http.createServer(function(request,response) {
  ...
  if(pathname == '/') {
    ...
  } else if (pathname == '/update') {
+   db.query('SELECT * FROM topic', function (error, topics) {
-   fs.readdir('./data', function(error, filelist) {
-     var filteredId = path.parse(queryData.id).base;
      fs.readFile(`data/${filteredId}`, 'utf8', function(err, description) {
        ...
      })
    })
  } else if (pathname == '/update_process') {
    ...

2) 파일 내용을 조회하는 함수 readFile 를 삭제하고, 데이터베이스 한 건을 조회하는 함수를 추가합니다.

  • 쿼리 실행에서 에러가 발생한 경우 처리를 위한 코드도 함께 추가합니다.

  • 변수 filelist 를 삭제하고, 쿼리 결과가 담긴 변수 topics 를 사용합니다.

var app = http.createServer(function(request,response) {
  ...
  if(pathname == '/') {
    ...
  } else if (pathname == '/update') {
    db.query('SELECT * FROM topic', function (error, topics) {
-     fs.readFile(`data/${filteredId}`, 'utf8', function(err, description) {
-       var title = queryData.id;
+     db.query(`SELECT * FROM topic WHERE id=?`, [queryData.id], function (error, topic) {
+       if(error) throw error;
-       var list = template.list(filelist);
+       var list = template.list(topics);
        var html = template.HTML(title, list,
          ...
        response.writeHead(200);
        response.end(html);
      })
    })
  } else if (pathname == '/update_process') {
    ...

3) template 모듈에서 사용했던 기존 변수값을 데이터베이스에서 가져온 값으로 변경합니다.

  • 변수 title 을 삭제하고, topic 객체의 id 값과 title 값으로 필요에 맞게 수정합니다.

  • 변수 description 을 삭제하고, topic 객체의 description 값으로 수정합니다.

var app = http.createServer(function(request,response) {
  ...
  if(pathname == '/') {
    ...
  } else if (pathname == '/update') {
    db.query('SELECT * FROM topic', function (error, topics) {
      db.query(`SELECT * FROM topic WHERE id=?`, [queryData.id], function (error, topic) {
        if(error) throw error;
        var list = template.list(topics);
-       var html = template.HTML(title, list,
+       var html = template.HTML(topic[0].title, list,
          `<form action="/update_process" method="post">
-            <input type="hidden" name="id" value="${title}">
+            <input type="hidden" name="id" value="${topic[0].id}">
-            <p><input type="text" name="title" placeholder="title" value="${title}"></p>
+            <p><input type="text" name="title" placeholder="title" value="${topic[0].title}"></p>
-            <p><textarea name="description" placeholder="description">${description}</textarea></p>
+            <p><textarea name="description" placeholder="description">${topic[0].description}</textarea></p>
             <p><input type="submit"></p>
           </form>
-         `, `<a href="/create">Create</a> <a href="/update?id=${title}">Update</a>`);
+         `, `<a href="/create">Create</a> <a href="/update?id=${topic[0].id}">Update</a>`);
        response.writeHead(200);
        response.end(html);
      })
    })
  } else if (pathname == '/update_process') {
    ...

2. main.js 파일의 ‘/update_process’ 처리 코드를 수정합니다.

1) 파일을 컨트롤하는 함수를 삭제하고, 데이터베이스를 수정하는 쿼리를 추가합니다.

  • 파일명을 변경하는 rename 함수와 파일을 생성하는 writeFile 함수를 삭제하고, UPDATE 쿼리를 실행하는 함수로 대체합니다.

  • 쿼리 실행에서 에러가 발생한 경우 처리를 위한 코드도 함께 추가합니다.

  • 쿼리 실행 콜백함수의 writeHead 에서 지정하는 Location 의 id 값을 수정한 데이터의 id 로 지정합니다.

var app = http.createServer(function(request,response) {
  ...
  if(pathname == '/') {
    ...
  } else if (pathname == '/update_process') {
    ...
    request.on('end', function() {
      var post = qs.parse(body);
-     var id = post.id;
-     var title = post.title;
-     var description = post.description;
-     fs.rename(`data/${id}`, `data/${title}`, function(error) {
-       fs.writeFile(`data/${title}`, description, 'utf8', function(err) {
+     db.query(`UPDATE topic SET title=?, description=? WHERE id=?`, [post.title, post.description, post.id], function(error, result) {
+         if(error) throw error;
-         response.writeHead(302, {Location: `/?id=${title}`});
+         response.writeHead(302, {Location: `/?id=${post.id}`});
          response.end();
-       })
      })
    })
  } else if (pathname == '/delete_process') {
    ...

3. 수정 된 main.js 를 실행합니다.

  • window + R → cmd 실행
D:\workspace\nodejs\webapp>node main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');
var path = require('path');
var sanitizeHtml = require('sanitize-html');
var mysql = require('mysql');
var db = mysql.createConnection({
  host     : 'localhost',
  user     : 'TESTUSER',
  password : '1234',
  database : 'TESTDB'
});
db.connect();

var app = http.createServer(function(request,response) {
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  var pathname = url.parse(_url, true).pathname;
  if(pathname == '/') {
    if(queryData.id == undefined) {
      db.query('SELECT * FROM topic', function(error, topics) {
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        var list = template.list(topics);
        var html = template.HTML(title, list,
          `<h2>${title}</h2><p>${description}</p>`,
          `<a href="/create">Create</a>`);
        response.writeHead(200);
        response.end(html);
      })
    } else {
      db.query('SELECT * FROM topic', function(error, topics) {
        db.query(`SELECT * FROM topic WHERE id=?`, [queryData.id], function(error2, topic) {
          var title = topic[0].title;
          var description = topic[0].description;
          var list = template.list(topics);
          var html = template.HTML(title, list,
            `<h2>${title}</h2><p>${description}</p>`,
            `<a href="/create">Create</a> <a href="/update?id=${queryData.id}">Update</a>
             <form action="delete_process" method="post">
               <input type="hidden" name="id" value="${queryData.id}">
               <input type="submit" value="Delete">
             </form>
            `);
          response.writeHead(200);
          response.end(html);
        })
      })
    }
  } else if (pathname == '/create') {
    db.query('SELECT * FROM topic', function(error, topics) {
      var title = 'Welcome - Create';
      var list = template.list(topics);
      var html = template.HTML(title, list,
        `<form action="/create_process" method="post">
           <p><input type="text" name="title" placeholder="title"></p>
           <p><textarea name="description" placeholder="description"></textarea></p>
           <p><input type="submit"></p>
         </form>
        `, ``);
      response.writeHead(200);
      response.end(html);
    })
  } else if (pathname == '/create_process') {
    var body = '';
    request.on('data', function(data) {
      body = body + data;
    })
    request.on('end', function() {
      var post = qs.parse(body);
      db.query(
        `INSERT INTO topic (title, description, created, author_id) VALUES (?, ?, NOW(), ?);`,
        [post.title, post.description, 1], function(error, result) {
        if(error) throw error;
        response.writeHead(302, {Location: `/?id=${result.insertId}`});
        response.end();
      })
    })
  } else if (pathname == '/update') {
    db.query('SELECT * FROM topic', function (error, topics) {
      db.query(`SELECT * FROM topic WHERE id=?`, [queryData.id], function (error, topic) {
        if(error) throw error;
        var list = template.list(topics);
        var html = template.HTML(topic[0].title, list,
          `<form action="/update_process" method="post">
             <input type="hidden" name="id" value="${topic[0].id}">
             <p><input type="text" name="title" placeholder="title" value="${topic[0].title}"></p>
             <p><textarea name="description" placeholder="description">${topic[0].description}</textarea></p>
             <p><input type="submit"></p>
           </form>
          `, `<a href="/create">Create</a> <a href="/update?id=${topic[0].id}">Update</a>`);
        response.writeHead(200);
        response.end(html);
      })
    })
  } else if (pathname == '/update_process') {
    var body = '';
    request.on('data', function(data) {
      body = body + data;
    })
    request.on('end', function() {
      var post = qs.parse(body);
      db.query(`UPDATE topic SET title=?, description=? WHERE id=?`, [post.title, post.description, post.id], function(error, result) {
        if(error) throw error;
        response.writeHead(302, {Location: `/?id=${post.id}`});
        response.end();
      })
    })
  } else if (pathname == '/delete_process') {
    var body = '';
    request.on('data', function(data) {
      body = body + data;
    })
    request.on('end', function() {
      var post = qs.parse(body);
      var id = post.id;
      var filteredId = path.parse(id).base;
      fs.unlink(`data/${filteredId}`, function(error){
        response.writeHead(302, {Location: `/`});
        response.end();
      })
    })
  } else {
    response.writeHead(404);
    response.end('Not found');
  }
});

app.listen(3000);

4. 브라우저를 열어 main.js 서버로 접속합니다.

1) 수정할 글을 조회합니다.

nodejs_mysql_026_002

2) ‘Update’ 버튼을 클릭하고, 수정할 내용을 입력합니다.

nodejs_mysql_027_001

3) ‘제출’ 버튼을 클릭하면 수정한 내용으로 조회되는 것을 확인할 수 있습니다.

nodejs_mysql_027_002