قالب‌های فرم با قابلیت استفادۀ مجدد یا Reusable Forms Templates

سلام

اگر از مبحث قبلی به یاد داشته باشیم، منظور از این عنوان خلاصه سازی فرم ها و عدم تکرار یک سری کد در فایل های مختلف است. یعنی یک بار موارد ثابت را طراحی می کنیم و در فایل های جدید با اضافه‌کردن قسمت‌های قبلی و نوشتن قسمت‌های جدید به نتیجه‌ای که می‌خواهیم می‌رسیم.

خیلی خوب! در فولدر مربوط به تمپلیت یک فولدر جدید به نام includes می‌سازیم.

myproject/
 |-- myproject/
 |    |-- boards/
 |    |-- myproject/
 |    |-- templates/
 |    |    |-- includes/    <-- here!
 |    |    |-- base.html
 |    |    |-- home.html
 |    |    |-- new_topic.html
 |    |    +-- topics.html
 |    +-- manage.py
 +-- venv/

درون آن، یک فایل به نام form.html ایجاد می کنیم.

templates/includes/form.html

{% load widget_tweaks %}

{% for field in form %}
  <div class="form-group">
    {{ field.label_tag }}

    {% if form.is_bound %}
      {% if field.errors %}
        {% render_field field class="form-control is-invalid" %}
        {% for error in field.errors %}
          <div class="invalid-feedback">
            {{ error }}
          </div>
        {% endfor %}
      {% else %}
        {% render_field field class="form-control is-valid" %}
      {% endif %}
    {% else %}
      {% render_field field class="form-control" %}
    {% endif %}

    {% if field.help_text %}
      <small class="form-text text-muted">
        {{ field.help_text }}
      </small>
    {% endif %}
  </div>
{% endfor %}

حالا فایل قبلی با نام new_topic.html را ویرایش می کنیم.

templates/new_topic.html

{% extends 'base.html' %}

{% block title %}Start a New Topic{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
  <li class="breadcrumb-item"><a href="{% url 'board_topics' board.pk %}">{{ board.name }}</a></li>
  <li class="breadcrumb-item active">New topic</li>
{% endblock %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    {% include 'includes/form.html' %}
    <button type="submit" class="btn btn-success">Post</button>
  </form>
{% endblock %}

همانطور که از نام آن مشخص است؛ آمده ایم و کدهای HTML مربوط به فرم را درون فایل قبلی include کرده‌ایم.

این یک روش مرسوم بوده و به راحتی می توانیم از فایل های HTML مختلف درون یکدیگر استفاده کنیم.

مثل همیشه نوبت به نوشتن تست می رسد:

boards/tests.py

# ... other imports
from .forms import NewTopicForm

class NewTopicTests(TestCase):
    # ... other tests

    def test_contains_form(self):  # <- new test
        url = reverse('new_topic', kwargs={'pk': 1})
        response = self.client.get(url)
        form = response.context.get('form')
        self.assertIsInstance(form, NewTopicForm)

    def test_new_topic_invalid_post_data(self):  # <- updated this one
        '''
        Invalid post data should not redirect
        The expected behavior is to show the form again with validation errors
        '''
        url = reverse('new_topic', kwargs={'pk': 1})
        response = self.client.post(url, {})
        form = response.context.get('form')
        self.assertEquals(response.status_code, 200)
        self.assertTrue(form.errors)

در کد بالا برای اولین بار از تگ assertIsInstance  استفاده کرده ایم. با این کار یک ثابت فرم را در نظر گرفته و چک کرده ایم که یک NewTopicForm باشد. ضمناً در بخش آخر هم با استفاده از دستور   self.assertTrue(form.errors) مطمئن می شویم که فرمِ ما، در صورت نامعتبر بودن دیتا، خطاهای مربوطه را نشان دهد.

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی:فصل بعدی: شمای کلی از اعتبارسنجی برنامه در جنگو

مطلب قبلی: زیباسازی فرم ها با Bootstrap

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
پیکربندی گواهینامۀ https

سلام حالا می خواهیم برنامۀ خودمان را با گواهینامۀ https امن کنیم. ساده ترین کار برای انجام آن Let’s Encrypt است. قبل از Let’s Encrypt هرگز تنظیمات https به این راحتی نبوده و مهمتر اینکه اینکار کاملاً رایگان است. آن ها راه حلی به نام certbot را ارائه داده اند …

جنگو
پیکربندی سرویس ایمیل

سلام یکی از بهتر سرویس دهنده های ایمیل Mailgun با قابلیت ۱۲ هزار ایمیل رایگان در ماه است. به صورت رایگان ثبت نام کنید. برای اینکار باید آن را با سرویس دهندۀ دامین خود تنظیم کنید که در این آموزش از tamadon.org استفاده شده است. حالا اولین رکورد DNS را …

جنگو
پیکربندی NGINX

سلام کار بعدی که قرار است انجام شود؛ تنظیمان Nginx به شکلی است که پاسخگویی و سرویس دهی مربوط به فایل های استاتیک را خود انجام دهد و سایر درخواست ها را به Gunicorn بفرستد. یک فایل پیکربندی با نام boards را درون /etc/nginx/sites-available/ و با محتوای زیر اضافه می …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.