20. 데이터베이스 - MySQL로 웹애플리테이션 구현

1. 만들어 볼 것.

• 글 목록 - topic/
• 글 상세 보기 구현 - topic/:id
• 글 추가 기능 구현 - topic/add
• 글 편집 기능 구현 - topic/:id/edit
• 글 삭제 구현 - topic/:id/delete
  

2. 글 목록

지난번에 생성했던, app_file.js를 복사해서, app_mysql.js을 생성한 후, 위의 코드를 템플릿엔진 사용하는 곳 밑에 추가해준다.

우리가 만들 것은 글 목록을 보는 것이므로, /topic의 라우터를 수정 할 것이다. fs를 이용한 부분은 삭제하고, sql을 이용한 쿼리를 추가해주고, 서버를 키고, http://localholst:3000/topic 로 들어가면, 지난번에 저장한 db의 테이블이 배열로 나온다. 배열안의 객체는 테이블의 rows를 가리킨다.

기존에 있던 views_file 폴더를 복사해서, views_mysql로 이름을 변경한다. view_mysql 폴더안에 템플릿 엔진을 이용하기 위해서, app.set 부분을 사진과 같이 변경해준다. 그리고 /topic의 라우터를 변경후, /topic으로 접속해보면 글목록이 Object로 표시되는것을 알 수 있다. 왜 Object로 표시 될 까? 이유는 res.render의 두번째 인자와 템플릿 파일 관계에 있다.

view.pug 템플릿파일 코드를 위와같이 수정 후, topic으로 접속하면, 정상적으로 화면이 렌더 된다.

3. 글 상세 보기 구현

사용자가 id값을 들고 들어왔는지 알기 위해서, 코드를 변경해야 한다.

id를 이용하기 위해서, req.params.id를 이용하여, 위와같이 코드를 바꾸어주자. 그리고 view.pug 템플릿코드 부분도 수정해주자.

id를 가진채로 /topic/:id로 접속을 하면, db에 있던 글의 상세보기가 가능하다.

4. 글 추가 기능 구현

우리는 /topic/add에 글 추가 기능을 구현 할 것이므로, /topic/new로 되있던 기존 코드를, /topic/add로 바꾸면서 sql문을 추가해서 수정해주자.

또한 views_mysql폴더에 new.pug를 add.pug로 바꾸고 위와같이 코드를 수정해준다. 그리고 view.pug에서 맨마지막줄 코드들을 new를 add로 바꾼다.

/topic/add로 접속하면, 잘 구현되지만 제출을 누르면 error가 날것이다. 왜냐하면 post 라우터가 구현되지 않았기 때문이다.

/topic/add에 대한 post 라우터를 구현 후, 글을 작성하고, 제출하면 우리가 새로추가하는 글의 id값을 찾을수 있다.

post 라우터에 query문에서 rows를 result로 바꾸고, else안에있는 send를 redirect를 이용한 코드로 위와같이 바꾸자. 

글을 추가하면, redirect로 인해 /topic/추가된글의id로 가게된다.

5. 글 편집 기능 구현

우리는 edit 버튼을 만들 것이다. 그런데 메인페이지에서는 edit버튼이없고, 글상세보기에서는 edit 버튼이 있어야 한다. 버튼을 만들어보자.

view.pug 파일 밑에 div 태그를 위와같이 수정해준다. 

우리는 edit에 대한 router가 없기 때문에, app_mysql.js로 가서 위와 같이 router를 추가 해준다.

라우터에대한 edit화면이 렌더되야하기 때문에, views_mysql폴더에서 view.pug를 복사한 후, edit.jade로 수정 해준다. 그다음에, 위와같이, 작성해주자.

edit화면으로 들어가면, 접속되는 것을 알 수 있다.

우리는 이제 글 편집에 대한 수정을 했을 떄, router를 만들어 주어야 한다.

app_mysql.js에 위와같이 추가해보자.

정말로 글이 수정이 된다.

6. 글 삭제 기능 구현

삭제를 구현하기 위해 우선 view.pug에 delete 버튼을 만든다.

그리고 app_mysql.js에서 delete에 대한 router를 위와 같이 만들어 준다.

이제 화면에 delete페이지를 렌더해야 하기 때문에, delete.pug를 만들어 준다.

delete할것인지 묻는 페이지이다. 근데 delete는 post방식으로 해주는것이 좋다.

delete.pug의 form에 대한 router를 app_mysql에 설정해주어야 한다. 그래서 위와같이 router를 설정해주면 된다.

정말 삭제가 잘된다.

출처 - 생활코딩