생활코딩

Coding Everybody

MySQL join을 이용해서 상세보기 구현

토픽 생활코딩 > WEB > WEB2 - Node.js > Node.js - MySQL

수업소개

MySQL의 JOIN을 이용해서 Node.js 웹앱의 상세보기 기능을 구현하는 방법을 알아보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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:'root',
  password:'111111',
  database:'opentutorials'
});
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>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      } else {
        db.query(`SELECT * FROM topic`, function(error,topics){
         if(error){
           throw error;
         }
         db.query(`SELECT * FROM topic LEFT JOIN author ON topic.author_id=author.id WHERE topic.id=?`,[queryData.id], function(error2, topic){
           if(error2){
             throw error2;
           }
           console.log(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>
            ${description}
            <p>by ${topic[0].name}</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 = '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>
          `,
          `<a href="/create">create</a>`
        );
        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){
        if(error){
          throw error;
        }
        db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id], function(error2, topic){
          if(error2){
            throw error2;
          }
          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=?, author_id=1 WHERE id=?', [post.title, post.description, post.id], function(error, result){
            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);
          db.query('DELETE FROM topic WHERE id = ?', [post.id], function(error, result){
            if(error){
              throw error;
            }
            response.writeHead(302, {Location: `/`});
            response.end();
          });
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. 감자
    22.12.20
  2. 당당
    2022.11.09
  3. toonfac
    220715 오전 11시 47분 완료
  4. 화려하게간다
    나이스~~~ 이거 좋다~~~
  5. 화려하게간다
    zzzzzzzzzzzzz
    대화보기
    • 케굴
      2021-12-29
    • HyunseoLee
      진짜 완전 재밌네 8/11 완료
    • labis98
      20210801 good!!!
    • hanel_
      21.3.24
    • chimhyangmoo
      21.03.17
    • jeisyoon
      2021.03.11 MySQl join 상세보기 기능 - OK
    • 김지호
      21 01 03
    • 생활둘기
      2021 1 3
    • 콜라
      20201021 완료
    • Jonghwo Lee
      완료
    • 가톨릭대 컴공
      완료
    • 준바이
      감사합니다.
    • 강다리
      재밌습니다.
    • 굼뱅이
      완료
    • jwWorld
      이거 상세보기할때 내가 요구하는 저자로 출력이 잘 되나요?흠..
    • jerry
      SELECT * FROM topic t INNER JOIN author a ON t.author_id = a.id;
    • mando
      @ppuep
      쿼리를 변경하면 됩니다. 모든 컬럼을 출력하는 대신 선택한 컬럼은 출력하도록 말이죠!
      SELECT topic.id, title, description, created, name, profile FROM topic LEFT JOIN author ON topic.author_id = author.id WHERE topic.id = ?
    • ppuep
      4:42초 부근에 각 페이지를 누를 때 log를 보면 첫번째 id값이 topic의 id값이 아니라 author_id값으로 출력되고 있는데 topic의 id값을 출력하려면 어떻게 해야 하나요?
    • jo_onc
      좋은 강의입니다!
    • Johnbyeon
      우리의 웹브라우저는 키보드의 Ctrl버튼을 누른 상태에서 마우스 휠 버튼을 위로 굴리면 확대하는 기능을 가지고 있습니다.
      다시한번 Ctrl버튼을 누른상태에서 마우스 휠 버튼을 아래방향으로 굴리면 축소가 되는 것을 확인 하실 수 있습니다.
      시력이 안좋으신 분들은 활용하시길 바라요.
      대화보기
      • 연수아빠
        수강 완료!!
      • 폭스킴
        제가 눈이 많이 나빠서 그렇지만, 코드 글자 크기가 좀 작은 게 아쉽습니다~