Mixin 소개 및 Commentapp 구현

1. Mixin

1) 필요성 :

(서로 object가 없고 form이 없는 상황인데)

(Detailview를 사용하고 싶은데, FORM을 같이 사용하고 싶으면 문제가 생긴다.)

(위와 같이 구현할 DetailView 에서, 위 부분은 form 없이 아래 부분은 form을 이용해서 만들어야 하는데, DetailView에는 Form이 없어서 문제가 발생한다.)

=> Mixin을 이용하여 문제를 해결

(장고에서 기본 제공해주는 여러 가지 Mixin중 하나를 DetailView에 적용
다중 상속을 함으로서 아래와 같이 DetailView 안에서도 Form이 사용 가능하게 됨)

2. CommentApp의 요건

(1. 댓글을 생성하고 삭제하는 관련 view 생성
2. 댓글을 달았을때 그 게시글로 다시 돌아가도록 설정
3. 모델 구성정보 (어떤 게시글에 달린 정보인지, 댓글 글쓴이가 누구인지, 댓글의 내용은 무엇인지, 언제 만들어 졌는지)에대한 필드로 구성)

3. 실습 시작

1) Commentapp 생성

(터미널 창에 위와 같이 입력 후, settings.py에 app 등록)

2) comment로 향하는 url 설정

3) commentapp 하위에 urls.py 생성

4) models.py에 model 생성

5) forms.py 생성

(이후 모델을 만들었으므로, makemigrations와 makemigrate를 해줌)

5) views.py에 view 작성 (create)

+추가적으로 url 설정

6) 템플릿 생성 (create.html)

(모델에서 볼 수 있는 content는 입력을 받을것, created_at은 자동으로 생성될 것이고, writer는 서버단에서 확인할 것이지만, ariticle의 경우도 서버단에서 확인할 것이지만, 이것에 대해서는 hidden input을 하나 만들어 줄것이다.)

(설명 : hidden 타입의 input을 article_pk라는 이름으로 설정, 현재 article의 pk 값이 무엇인지를 value값을 통해서 넣는 것을 통해 넘겨줄 것이다. 그리고 그것을 서버에서 받아서 comment를 만들때 완성할 것이다.)

7) test

(하지만 우리는 comment만 따로 만들수 있는 페이지를 들어가는 것이 아닌 게시글의 밑에서 달 수 있는 형태를 원함)

8) include 구문을 이용하여 가져오기

(articleapp의 detail.html에 위와 같이 include 구문 추가, with 구문을 이용하여 원래 내부의 article을 현재 있는 target_article과 동기화 시켜준다.)

9)

(그러면 commentapp의 create 안에서 article이라는 변수를 사용 할 수 있게 되며, 우리가 숨겨서 보내는 article_pk의 value 값에 article.pk라는 정보를 담아서 보낸다.

이 때 article.pk의 article은 브라우저에서 조작이 가능 염두는 해두자

그리고 맨 윗줄에 있던 extends base.html은 두번 html을 가져오게 되므로 여기서는 지워준다.)

10) 문제 발생

(전에 말했던 form Mixin이 필요한 순간이다. 아래와 같이 articleapp 의 detailview에서 form이 지정되어 있지 않기 때문에 위와 같은 문제가 발생)

11) 수정하기

(FormMixin을 다중상속 하고 form_class 변수에 우리가 만들었던 form을 집어 넣어 구현 가능하다.)

12) 결과

(article 밑에 comment create가 생성된것을 확인 할 수 있다. 이대로 댓글이 달리지는 않는다.)

13) 댓글 달리도록 설정하기

(createview에 form_valid를 이용하여 구현

해당 pk를 가지고 있는 article을 지금 만들 comment의 article값으로 설정하는 구문 아까 hidden 타입으로 받았던 pk 값을 여기서 사용하는 것이다.

writer는 리퀘스트를 보내는 유저

그리고 저장을 한다.)

14) 로그인을 안하고 comment 생성 요청을 보내면 문제가 생기는데 이를 해결하기

(commentapp의 create.html에 조건문을 이용하여 구현한 코드

로그인이 되어 있으면 제출 버튼을 활성화 시킨다.

그렇지 않은 경우는 로그인 링크를 생성하고, 로그인 성공 시 요청받은 주소로 올 수 있도록 next 구문을 이용한다.)

15) 실행해보기

( comment 를 하고 제출을 눌러서 정상적으로 이 페이지로 돌아오기는 했지만, 변화된 것이 없다. => 다음시간에 댓글 구현)

+추가적으로 로그아웃 상태에서 이 페이지를 들어가는 경우에는

(이와 같이 Login 버튼으로 바뀌며, 이를 누르면)

(로그인 창으로 넘어가고 로그인 이후에는)

(다시 원래 있던 페이지로 돌아와 제출 버튼이 활성화 되는 것을 확인 할 수 있다.)