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]버튼을 누릅니다.
버튼을 누르자마자 블로그 메인 화면으로 돌아갑니다.

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

댓글