$$config title: [Django] 점프투장고 | 2-10 | 질문 등록 기능 구현 - 4 (수동 폼 작성) keywords: - IT - django - 점프투장고 $$ # 개요 `{{ form.as_p }}`를 사용하면 빠르게 템플릿을 만들 수 있지만 HTML 코드가 자동 생성되므로 디자인 측면에서 많은 제한이 발생 예시 - 특정 태그를 추가하거나 필요한 클래스를 추가하는 작업에 제한 발생 - 디자인 영역과 서버 프로그램 영역이 혼재되어 웹 디자이너와 개발자의 역할을 분리하기도 모호함. **목표** 1. 폼을 이용해 HTML 코드를 자동 생성하는 것이 아닌 직접 HTML 코드를 작성하는 방법을 사용 2. 질문 등록 화면에서 오류발생 시 오류 내용 표시 # 작업 단계 1. 질문 등록 0. 버튼 등록 - templates\pybo\question_list.html에 버튼등록 1. URL 매핑 - pybo\urls.py에 views.question_create 함수를 호출하도록 매핑 2. 폼(Form) - pybo\forms.py에 QuestionForm 작성 3. 뷰 함수 - pybo\views.py에 question_create 함수 추가 4. 템플릿 - pybo\question_form.html 템플릿 작성 5. GET과 POST - pybo\views.py의 question_create 함수에 데이터 저장 코드 추가 6. 폼 위젯 - 부트스트랩 적용 - pybo\forms.py의 QuestionForm 클래스에 widgets 속성 지정 7. 폼 레이블 - 폼 레이블을 영문에서 한글로 변경 - pybo\forms.py에 label 속성 지정 8. 수동 폼 작성 <- - pybo\forms.py 파일의 widget 항목을 제거 - pybo\question_form.html 템플릿 수동폼 작성 - 오류 내용 표시 2. 답변 등록 # pybo\forms.py 수정 우선 수작업에 불 필요한 forms.py 파일의 widget 항목을 제거 `[파일명: C:\projects\mysite\pybo\forms.py]` ``` from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question # 사용할 모델 fields = ['subject', 'content'] # QuestionForm에서 사용할 Question 모델의 속성 widgets = { # 위젯 코드 제거 'subject': forms.TextInput(attrs={'class': 'form-control'}), 'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 10}), } labels = { 'subject': '제목', 'content': '내용', } ``` # pybo\question_form.html 수정 질문 등록 템플릿을 다음과 같이 수정 `[파일명: C:\projects\mysite\templates\pybo\question_form.html]` ```html {% extends 'base.html' %} {% block content %}

질문등록

{% endblock %} ``` 1. `{{ form.as_p }}`로 자동생성되는 HTML 대신 제목과 내용에 해당되는 HTML코드를 직접 작성 2. question_create 함수에서 `form.is_valid()`가 실패할 경우를 위한 오류 표시 영역을 추가 1. 제목 항목의 value : `{{ form.subject.value|default_if_none:'' }}`처럼 값 대입 - 이것은 오류가 발생했을 경우 기존에 입력했던 값을 유지하기 위함 2. 템플릿 필터 : {{ form.subject.value`|default_if_none:''` }} - 폼 데이터(form.subject.value)에 값이 없을 경우 - None 이라는 문자열이 표시되는데, None 대신 공백으로 표시하라는 템플릿 필터 장고의 템플릿 필터는 `|default_if_none:''` 처럼 `|`기호와 함께 사용된다. ## 오류 테스트 "질문등록" 화면에서 제목에만 "TEST"라고 입력하고 "내용"은 비워둔 채 "저장하기" 버튼을 클릭 ![성공한 오류표시 테스트](https://wikidocs.net/images/page/70855/2-10_br3.png) # 답변 등록 ## `pybo/forms.py`에 `AnswerForm` 작성 답변 등록에도 장고 폼을 적용하자. 답변을 등록할 때 사용할 `AnswerForm`을 `pybo/forms.py` 파일에 다음과 같이 작성 `[파일명: C:\projects\mysite\pybo\forms.py]` ``` from django import forms from pybo.models import Question, Answer #Answer 추가 (... 생략 ...) # 아래 코드 추가 class AnswerForm(forms.ModelForm): class Meta: model = Answer fields = ['content'] labels = { 'content': '답변내용', } ``` ## pybo\views.py의 answer_create 함수 수정 answer_create 함수를 다음과 같이 수정 question_create와 같은 방법으로 AnswerForm을 이용하도록 변경했다. 사실 답변 등록은 `POST 방식`만 사용되기 때문에 if .. else 구문에서 else는 호출되지 않는다. 다만, 여기에서는 패턴의 통일성을 위해 남겨 두었다. `[파일명: C:\projects\mysite\pybo\views.py]` ```python (... 생략 ...) from .forms import QuestionForm, AnswerForm # AnswerForm 추가 (... 생략 ...) def answer_create(request, question_id): """ pybo 답변등록 """ question = get_object_or_404(Question, pk=question_id) # 아래 코드 추가 if request.method == "POST": form = AnswerForm(request.POST) if form.is_valid(): answer = form.save(commit=False) answer.create_date = timezone.now() answer.question = question answer.save() return redirect('pybo:detail', question_id=question.id) else: form = AnswerForm() context = {'question': question, 'form': form} return render(request, 'pybo/question_detail.html', context) ``` ## pybo\question_detail.html에 오류표시 영역 추가 질문 상세 템플릿도 오류를 표시하기 위한 영역을 다음처럼 추가 `[파일명: C:\projects\mysite\templates\pybo\question_detail.html]` ```html {% extends 'base.html' %} {% block content %}

(... 생략 ...)

{% endblock %} ``` # 질문 등록 오류표시 테스트 이렇게 수정하고 답변등록 테스트를 해 보자. 만약 답변 내용 없이 답변을 등록하려고 하면 다음과 같은 오류 메시지가 나타난다. ![질문 등록 창 오류테스트](https://wikidocs.net/images/page/70855/2-10_9.png)