Django

Comment Form

Comment Form

  • 카카오 API를 활용하기 전에 이번 토픽에서는 댓글 폼을 작성하도록 하도록 하겠습니다.

 

 

 

form 생성

  • [blogapp]-[forms.py]에서 새로운 폼을 다음과 같이 생성합니다.
from .models import Blog, Comment

class BlogCommentForm(forms.ModelForm):
    class Meta:
        model = Comment

        fields = ['comment_textfield']
        widgets = {
            'comment_textfield': forms.Textarea(attrs={'class': 'form-control', 'rows': 4, 'cols': 40})
        }
  • Comment 모델을 가져옵니다.
  • 'BlogCommentForm'이라는 이름의 폼 클래스를 생성하였습니다.
  • 내용을 입력할 것이기 때문에 'comment_textfield' 필드만 가져옵니다.
  • 댓글 입력 내용 폼은 html에서 Textarea 형태의 폼이기 때문에 'rows'와 'cols'를 지정하였고, 부트스트랩의 css 클래스인 'form-control'를 활용하여 꾸미도록 하였습니다.

 

 

 

 

 

 

views.py 수정

  • [blogapp]-[views.py]에서 다음과 같이 수정합니다.
  • 위에서 만든 [BlogCommentForm]을 import합니다.
from .forms import BlogCommentForm

 

  • detail 함수는 전체적으로 다음과 같이 수정합니다.
def detail(request, blog_id):
    blog_detail = get_object_or_404(Blog, pk=blog_id)
    comments = Comment.objects.filter(blog_id=blog_id)

    if request.method == 'POST':
        comment_form = BlogCommentForm(request.POST)

        if comment_form.is_valid():
            content = comment_form.cleaned_data['comment_textfield']

            print(content)

            return redirect('blogMain')
        else:
            return redirect('blogMain')

    else:
        comment_form = BlogCommentForm()

        context = {
            'blog_detail': blog_detail,
            'comments': comments,
            'comment_form': comment_form
        }

        return render(request, 'detail.html', context)

 

 

  • 댓글 폼에서 데이터가 'POST'로 보낸다고 가정하고 시작하여 봅시다.
  • 그 데이터가 'POST'이면 사용자가 무언가 댓글을 작성하고 데이터를 보낸다는 의미입니다.
    그것이 아니라면 단지 블로그 세부 내용 확인을 위해 페이지를 연 것이 됩니다.
  • 먼저, 단지 블로그 세부 내용 혹인을 위해 페이지를 열었다면
    댓글 폼 객체의 형태만을 생성하여 사용자에게 보여주면 되기 때문에 'comment_form' 라는 이름의 객체로 받게 한 뒤 'context'에 추가하여 줍니다.
    그 후에 'context'를 보내면 'detail.html'은 댓글 폼이 추가된 상태로 보여지게 되는 것입니다.
  • 만약 'POST'로 보내졌다면
    사용자가 '제출'버튼을 눌러 데이터를 보냈다는 것이기 때문에 BlogCommentForm 객체의 인자에 'POST' 데이터를 받습니다.
    또한 댓글 폼의 입력 형식이 올바른지 확인하고 clean_data[] 형태를 통하여 실제 댓글 폼에 입력된 데이터('comment_textfield')에 해당되는 것을 받아옵니다.
  • 일련의 작업이 끝나면 터미널에서 내용이 정상적으로 전달되는지 확인하기 위해 print()하였습니다.
    또한 블로그 메인 화면으로 돌아가게 구성하였습니다.

 

 

 

  • 위에서 한 것을 보면 뭔가 데이터를 저장하는 작업들도 하지 않고, 단지 'blogMain'으로 돌려보내기만 하는 것을 볼 수 있습니다.
  • 이는 아직 수정할 부분이 남아 있기 때문입니다.
    댓글 내용이 있다고 한들 작성자가 누구인지와 프로필 이미지는 아직 없습니다.
    이러한 상태에서 데이터베이스에 저장하려고 한다면 모델 설계시 null 값을 따로 설정해주지는 않았기 때문에 오류가 날 것입니다.
  • 그래서 일단 댓글 폼에서 입력한 데이터가 제대로 전달되는지만 확인하는 것입니다.

 

 

 

 

detail.html 수정

  • 뷰를 작성하였고 단지 세부 내용만 확인할 때 'comment_form'을 컨텍스트로 전달해주었으므로, 다음과 같이 수정하여 폼을 만들어 줍니다.
<!-- Comments Form -->
<div class="card my-4">
    <h5 class="card-header">Leave a Comment:</h5>
    <div class="card-body">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">{{ comment_form }}</div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
  • form 태그를 'POST' 방식으로 데이터를 보냅니다.
  • 'csrf_token'을 사용합니다.
  • {{ comment_form }} 폼을 받습니다.

 

 

 

 

 

 

적용 확인

  • 서버를 구동하고 댓글 폼에 입력한 데이터가 제대로 전달되는지 확인합니다.

 

  • 댓글을 입력하고 [Submit]버튼을 누릅니다.
  • 버튼을 누르자마자 블로그 메인 화면으로 돌아갑니다.

 

 

  • 콘솔 창에 데이터가 출력되는 것을 보아 폼이 정상적으로 작동하는 것을 알 수 있습니다.

 

 

 

 

 

 

댓글

댓글 본문
작성자
비밀번호
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기