[생활코딩 Node.js+MySQL] 4. 글 생성 기능 만들기

새 게시물 입력 기능 만들기(Create)

Node.js 수업과 동일한 순서로, 조회가 잘 되니 이제 입력 차례이다.

수정할 부분은 당연히 /create와 /create_process 페이지이다.

/create 부분은 사실 위에 글 목록 띄워 주는 부분만 파일 읽기에서 db읽기로 바뀌는 거고 페이지 본문의 입력폼 부분은 동일하기 때문에 크게 수정할 일이 없다. 목록 불러오는 부분만 홈페이지와 동일하게 간단히 고쳐 준다.

else if(pathname === '/create'){
    db.query(`SELECT * FROM TOPIC`, function(err, 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);
    });
  }

좀 더 복잡한 것은 create 페이지에서 submit 버튼을 누르고 넘어가는 create_process 페이지이다. 기존에 파일을 생성하던 것을 테이블에 데이터를 추가하는 것으로 바꾸어야 한다. 당연히, INSERT 쿼리를 사용하게 된다. 또한 역시 여기서도 쿼리문 안에 변수가 들어가야 하기 때문에, 모두 물음표 처리하고 뒤에 따로 배열로 입력한다. TOPIC 테이블의 컬럼 네 개 중에 생성일시(CREATED) 컬럼은 따로 받아온 변수를 넣는 것이 아니라 MySQL 자체 함수인 NOW() 를 사용하여 INSERT 시점의 현재 시간을 넣어 줄 것이므로 이 부분 빼고 나머지 세 개의 값만 배열에 담아 주면 된다.

 

입력이 끝난 후 리다이렉션 하는 부분도 문제가 된다. 돌아갈 페이지의 ID값이 방금 입력한 데이터의 ID값이기 때문이다. ID는 따로 넣어주는 것이 아니라 테이블에 값이 들어갈 때 알아서 생성되는 것이기 때문에 이 값을 알아와야 방금 작성한 글을 보여주는 페이지로 넘어갈 수가 있다. 쿼리를 한 번 더 써야 하나? 라고 생각했는데, db.query에 따라오는 고유의 기능이 있었다. result.insertId 가 insert쿼리의 결과값에서 해당 row의 id를 가져오는 코드이다. 여기서 I만 대문자임에 주의… 실수로 ID 모두 대문자로 적었다가 계속 에러나서 5분 헤맸다. -_-;;

 

아무튼 모든 수정을 마친 create_process 코드는 아래와 같다.

else if(pathname === '/create'){
    db.query(`SELECT * FROM TOPIC`, function(err, 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);
    });
  }