14강) Django 댓글기능 만들기 ( Ajax Create )

원래 13강으로 마무리 짓고 끝내려고 했는데

 

댓글 정도는 필요할 거 같아서 한번 해보겠다

 

일단 댓글 테이블이 필요할 것이다, 그러니 한번 만들어보자

 

 

이번에는 참조할게 두가지나 있어요!

content : 댓글 내용

 

member : 누군인가? 댓글적은 사람이 누구인가 말인가!

 

board : 어떤 게시글인가? 어떤 게시글에 적었냐 말이다!

 

이렇게 model를 생성하고,

 

terminal에서 코드를 입력하자 그래야 자동으로 적용이 되고 자동으로 테이블을 생성해 줄 것이다

 

python manage.py migrate

 

그리고 상세화면 HTML로 가서 코드를 작성해 준다

 

초간단 댓글 만들기

 

 

브라우저를 보면 아래 화면과 같이 폼이 생겨날 것이다

 

디자인은 신경 쓰지 말자 우리는 개발자이니깐 ㅠ

 

사실 css입히기 귀찮음,,ㅠ

 

그리고 해야 할 일이 어떤 방식으로 전송할 것인지 정해야 한다

 

나는 Ajax로 전송해서 비동기식으로 간지 나게 추가하려고 한다

 

그러면 Ajax를 사용하기 위해 JQuery 라이브러리를 추가해 주자! Ajax를 사용한 적이 없다면 여기를 보도록 하자 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 

그리고 차근차근 생각해보자

 

내용을 입력하고, 전송 버튼을 눌렀을 때 데이터가 이동되어야 한다. 그렇다면 우리가 그다음 해야 할 일은 뭘까? 

 

 

 

그래, 전송 버튼 눌렀을 때의 클릭이벤트가 발생해야 한다. 만들어주자

 

버튼 요소를 찾아주고~

 

 

 

그다음 클릭 Event를 추가한다

 

 

자 우리는 클릭했을 때 실행되는 함수까지 만들었다.

 

그다음 해야 할 일은 데이터를 전송한다. 그럼 무슨 데이터를 전송해야 할까?

 

그렇다 우리는 댓글을 입력한 내용과 누가 보냈는지, 어떤 게시글인지를 전송해야 한다

 

전송할 녀석들을 만들어 주자

 

보낼애들을 트럭에 실고 ★

 

입력한 내용의 값을 변수 content에 담아주기 ★

let content = document.querySelector('.replyContent').value;

 

누가 댓글은 적었는지, {{ board.member.id }}

어떤 게시글에 적었는지, {{ board.id }}

내용은 무엇인지 content

한 번에 JSON 객체로 만들어서 준비해놓자

let param = {
  'memberId' : '{{ board.member.id }}',
  'boardId' : '{{ board.id }}',
  'content' : content,
}

 

그리고 대망의 Ajax를 이용한다

 

어려워 보이지만 참고 보자

 

이렇게 하면 전송이 가능할 것이다

 

자 이제 해야 할 일은 Back단이다 

 

url부터 작성하자 

 

 

그리고 views에서 함수를 생성해보자!

 

 

아까 java Script에서 전송한 param은 request.body로 뽑아낼 수 있다

그것을 json.loads를 이용해서 읽어서 변수에 담도록 하자 그러면 객체처럼 되어 있어서 자유자재로 사용할 수 있다

jsonObject = json.loads(request.body)

 

create함수를 사용하고, 아까 만든 model에 따라 데이터를 넣어주자

그리고 save()를 하면 DB에 물리적으로 저장이 된다

reply = Reply.objects.create(
  board_id=jsonObject.get('boardId'),
  member_id=jsonObject.get('memberId'),
  content=jsonObject.get('content'))
reply.save()

 

DB에 저장한 내용을 다시 뽑아내서 브라우저로 보내기 위한 JSON 객체를 만들어 준다

 

그다음 JsonResponse를 사용해 JSON 객체를 보내준다

context = {
  'name': reply.member.name,
  'content': reply.content,
  'createDate': reply.createdDate,
  'updateDate': reply.updatedDate
}

return JsonResponse(context);

 

이제 다시 HTML로 돌아와서 console.log를 사용해 log를 찍어보자!

 

 

내용을 입력하고 전송 버튼 누르기

 

 

그다음 F12를 눌러 개발자 도구를 열고, consol를 확인한다 

 

JSON 객체를 잘 받아온 모습을 볼 수 있다

잘 왔네 친구

DB도 확인해보니, 잘 나와있다

 

오호호호 나는 코끼리에오

 

근데 여기서 문제점은 상세화면에 들어왔을 때, 댓글을 확인할 수가 없다

 

댓글 리스트들도 바로 보여줘야 하기 때문에 수정해야 한다

 

아래와 같이 추가해준다

 

이렇게 하는게 맞나?

이때는 filter라는 것을 사용했다 filter는 where 절과 같은 것이다 

 

상세화면으로 갔을 때 게시글의 ID로 댓글에 있는 게시글 ID와 같은 것을 찾아서 변수 reply에 담는다고 보면 되겠다

 

.order_by를 쓰면 정렬을 할 수 있고, 그 안에 컬럼명을 넣어주면 된다. 칼럼명 앞에 【-】가 붙었을 경우에는

 

내림차순으로 정렬한다

 

그다음 전송할 context에 reply를 추가한다

 

 

그리고 다시 HTML로 돌아와서 아래의 table를 추가한다

 

이 정도는 알 것이라고 보고 설명은 생략하겠다

 

모른다고 하지말아줘 ㅠ 힝

 

그리고 브라우저 화면을 보면 댓글 리스트가 출력되어 있는 것을 확인할 수 있다!

 

성공해서 다행이야

 

그리고 여기서 문제점은 댓글을 입력을 해도 바로 추가되지 않는다 

 

왜냐하면 추가되지 않기 때문이다 추가시키는 작업을 하지 않았기 때문이다

 

그렇기 때문에 Ajax부분으로 돌아가서 추가시키는 작업을 해보자

 

섹시하다 ES6는

 

일단 테이블 안에 tbody 요소가 있는데, 거기에 댓글 리스트가 있다 

우리가 댓글을 작성할 때마다 tbody안에다가 추가해야 하기 때문에 tbody요소를 찾아 변수에 담는다

let replyTable = document.querySelector('.replyTbody');

 

그리고 임의적으로 tr 요소를 생성한다

여기 안에다가 【작성자, 내용, 작성일, 수정일】 td요소들을 넣을 것이다

let newTr = document.createElement('tr');

 

아까 말한 td요소들이다

Ajax 통신을 해서 받은 데이터를 이런식으로 뽑아서 변수에 담아준다

let str =`
  <td>${data.name}</td>
  <td>${data.content}</td>
  <td>${data.createDate}</td>
  <td>${data.updateDate}</td>`;

 

변수에 담아준 str를 생성한 tr에 innerHTML로 넣어주고

그 tr를 다시 tbody안에 넣어준다

* prepend는 맨 위로 넣어주고 append는 맨 아래에 넣어준다

newTr.innerHTML = str;
replyTable.prepend(newTr);

 

자 이제 화면으로 돌아와서 글을 작성하고, 【전송】 버튼을 눌러보자!

 

두근두근 댓글 작성

 

 

이렇게 댓글이 추가된 것을 확인할 수 있다!

 

근데 뭔가 졸라 못생겼다

 

이렇게 Ajax통신을 이용한 댓글 기능을 구현하였다

 

다음 시간에는 댓글 수정을 한번 해보도록 해보겠다