8강 Form Template Custom Render

주제

• 각 Form 객체는 웹브라우저 유저 노출을 위해 HTML 포맷으로 표현되어야한다. 이를 Render라 한다.

• 그런데 장고의 기본 Renderer는 조금 어글리하여 커스텀하는 방법에 대해 알아보자.

노트

• myapp/models.py

class Post(models.Model):
    title = models.CharField(max_length=100, validators=[MinLengthValidator(3)],
                                help_text='글 제목입니다. 100자 이내로 입력해주세요.')
    content = models.TextField(help_text='글 내용입니다. 에디터를 이용하여 자유롭게 작성해주세요.')
    user_agent = models.CharField(max_length=200)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def get_absolute_url(self):
        return reverse("post_detail", args=[self.pk])

    def __str__(self):
        return self.title

• Post 모델 정의

 

• myapp/forms.py

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'user_agent': forms.HiddenInput,
        }

• PostForm 모델폼 정의

 

• 기본 스타일로 렌더링하는 방법들 (공식 문서 링크)

• Form 기본 제공 HTML Render

• {{ form.as_table }}

• {{ form.as_p }}

• {{ form.as_ul }}

 

• 필드를 수동으로 렌더링하기

• 각 필드는 {{ form.name_of_field }}와 같이 가져와서 속성처럼 사용할 수 있다.

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>
<div class="fieldWrapper">
    {{ form.sender.errors }}
    <label for="{{ form.sender.id_for_label }}">Your email address:</label>
    {{ form.sender }}
</div>
<div class="fieldWrapper">
    {{ form.cc_myself.errors }}
    <label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
    {{ form.cc_myself }}
</div>

• 첫번째 div 태그의 fieldWrapper class에 대해서 살펴 보면 form.subject로 subject 필드를 가져왔고 errors, id_for_label, subject로 해당 속성들을 렌더링했다.

 

• 에러 메세지 렌더링하기

{% for error in form.non_field_erros %}
	{{ error }}
{% endfor %}

{% for field in form.hidden_fields %}
	{{ field }}
{% endfor %}

{% for field in form.visible_fields %}
	{{ field.label_tag }}
    {{ field }}
    {{ field.help_text }}
    {% for error in field.errors %}
    	{{ error }}
    {% endfor %}
{% endfor %}

• non_field_error의 경우 최상단에 노출한다.

• 그 다음 hidden 필드와 visible 필드를 구분해서 렌더링한다.

 

• 조금 더 스타일링하기 django-bootstrap4(링크)

• pip install django-bootstrap4

• INSTALLED_APPS에 'bootstrap4' 추가

• 템플릿에서 사용 시 {% load bootstrap4 %}를 반드시 로드해야 함

• 나는 bower로 static 파일 관리하는게 나을 것 같다고 봄

• 그리고 프론트엔드와 백엔드를 나눠서 개발하는 추세인데 굳이 풀스택 프레임워크로 할 이유가 없는 것 같다.

• 그냥 장고 공부하면서 드는 생각...