Comment Form
- 카카오 API를 활용하기 전에 이번 토픽에서는 댓글 폼을 작성하도록 하도록 하겠습니다.
form 생성
- [blogapp]-[forms.py]에서 새로운 폼을 다음과 같이 생성합니다.
1 2 3 4 5 6 7 8 9 10 | from .models import Blog, Commentclass 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합니다.
1 | from .forms import BlogCommentForm |
- detail 함수는 전체적으로 다음과 같이 수정합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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'을 컨텍스트로 전달해주었으므로, 다음과 같이 수정하여 폼을 만들어 줍니다.
1 2 3 4 5 6 7 8 9 10 11 | <!-- 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]버튼을 누릅니다.
- 버튼을 누르자마자 블로그 메인 화면으로 돌아갑니다.
- 콘솔 창에 데이터가 출력되는 것을 보아 폼이 정상적으로 작동하는 것을 알 수 있습니다.
