Everything you wanted to know
about the Django framework

Django и формы Bootstrap 4

Краткое руководство как начать использовать django-crispy-forms. Crispy-forms — это замечательное приложение, которое дает контроль над отображением форм Django не ломаю их обычную работу. Эта статья оринетирована на использование Bootstrap 4-ой версии, но также может быть применена и к старым версиям Bootstrap.

Основная причина использования Crispy-forms в своих проектах — это простое отображение форм Django без написания лишнего кода и с минимальными установками, что очень упрощает работу.

Установка

Устанавливаем с использованием pip:

pip install django-crispy-forms

Добавляем приложение в INSTALLED_APPS и выбираем, какой стиль будем использовать:

settings.py

INSTALLED_APPS = [
    ...

    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Установка Bootstrap

Можно загрузить последнюю версию Bootstrap 4 с сайта и использовать готовые скомпилированные CSS и JS файлы.

Или можно использовать CDN, без необходимости устанавливать библиотеку на свой сайт:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Базовый шаблон base.html, который мы будем использовать в этом руководстве:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Django People</title>
  </head>
  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-8">
          <h1 class="mt-2">Django People</h1>
          <hr class="mt-0 mb-4">
          {% block content %}
          {% endblock %}
        </div>
      </div>
    </div>
  </body>
</html>

(В этом примере указан только файл со стилями, т.к. для отображения здесь форм JavaScipt не нужен.)

Базовый пример

Предположим, есть следующая модель Person:

models.py

from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=130)
    email = models.EmailField(blank=True)
    job_title = models.CharField(max_length=30, blank=True)
    bio = models.TextField(blank=True)

 

Теперь создадим отображение для создания объекта Person. Будем использовать встроенный CreateView:

views.py

from django.views.generic import CreateView
from .models import Person

class PersonCreateView(CreateView):
    model = Person
    fields = ('name', 'email', 'job_title', 'bio')

 

В данном случае Django будет искать файл шаблона по пути people/person_form.html, т.к. наше приложение называется people.

people/person_form.html

{% extends 'base.html' %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit" class="btn btn-success">Save person</button>
  </form>
{% endblock %}

 

В этом простейшем варианте, Django отобразит форму следующим образом:

Для отображения этой формы с использованием возможностей Bootstrap 4 подключаем библиотеку django-crispy-forms:

people/person_form.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit" class="btn btn-success">Save person</button>
  </form>
{% endblock %}

 

Результат выглядит уже лучше:

В случае, если необходимо отображать поля "вручную", то можно использовать шаблонный фильтр as_crispy_field:

people/person_form.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    <div class="row">
      <div class="col-6">
        {{ form.name|as_crispy_field }}
      </div>
      <div class="col-6">
        {{ form.email|as_crispy_field }}
      </div>
    </div>
    {{ form.job_title|as_crispy_field }}
    {{ form.bio|as_crispy_field }}
    <button type="submit" class="btn btn-success">Save person</button>
  </form>
{% endblock %}

И в результате получим следующую картину:

Дополнительные возможности

django-crispy-forms имеет специальный класс FormHelper, который дает нам полный контроль над отображением своих форм.

Посмотрим на наш пример и функцию обновления объекта:

forms.py

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
from people.models import Person

class PersonForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = ('name', 'email', 'job_title', 'bio')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Save person'))

Вся работа происходит в методе __init__(). остальное — это обычная форма Django на основе модели. Здесь указано, что форма должна использовать для отправки метод POST, а также содержит кнопку отправки 'Save person'.

views.py

from django.views.generic import UpdateView
from people.models import Person
from people.forms import PersonForm

class PersonUpdateView(UpdateView):
    model = Person
    form_class = PersonForm
    template_name = 'people/person_update_form.html'

 

people/person_update_form.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  {% crispy form %}
{% endblock %}

 

Здесь мы просто вызываем шаблонный тег {% crispy %} и передаем экземпляр формы как аргумент.

Это все, что нужно для отображения следующей формы:

Это были самые простые примеры использования библиотеки django-crispy-forms. Если необходим полный контроль над работой с формой и ее отображением, то воспользуйтесь документацией на django-crispy-forms.readthedocs.io.

Поделитесь с другими:

Представления-классы
(Class-Based Views)

Детальное описание и структура классов Django.

Усовершенствованное отображение форм с помощью Django Crispy Forms

В этом уроке мы собираемся изучить некоторые функции Django Crispy Forms для обработки расширенных/пользовательских форм с использованием Bootstrap 4.

Запрос по сумме из связанной модели

Понадобилось тут найти несоответствие суммы платежа Payment с суммой связанных ним элементов PaymentItem. Решается это простой аннотацией.

Стала доступна версия Django 3.0 alpha 1

Стала доступна версия Django 3.0 alpha 1. Она представляет собой первый этап цикла выпуска 3.0 и дает вам возможность опробовать изменения, появившиеся в Django 3.0.

Исправления ошибок Django 2.2.5, 2.1.12 и 1.11.24

Сегодня команда разработчиков Django выпустила версии с исправлениями 2.2.5, 2.1.12 и 1.11.24. Пакет релиза и контрольные суммы доступны на странице загрузок, а также из индекса пакетов Python. Идентификатор ключа PGP, использованный в этом выпуске: Mariusz Felisiak: 2EF56372BA48CD1B.

Создание большой XML-карты сайта для Django

Предположим, что у вас так много страниц (тысячи), что вы не можете просто создать один файл /sitemap.xml, в котором перечислены все URL-адреса (он же <loc>). Поэтому вам нужно создать /sitemaps.xml, который указывает на другие файлы карты сайта. А если адресов в каждом тысячи, то нужно сжать эти файлы.

Добавление хранилища Amazon S3 в проект Джанго

В этом руководстве вы узнаете, как использовать сервис Amazon S3 для обработки статических ресурсов и загруженных пользователем файлов, то есть медиа-ресурсов.

Пользовательская модель User

Каждый новый проект Django должен использовать пользовательскую модель User. Официальная документация Django гласит, что это «настоятельно рекомендуется», но я сделаю еще один шаг и без колебаний скажу: вы просто с ума сошли, если не использовали пользовательскую модель раньше.

Создание погодного приложения на Python

Видео, в котором с нуля создаётся полноценное приложение на Python и Django, позволяющие получать информацию про погодные условия в различных городах мира.

Django 2.2.1 - исправления ошибок

Сегодня выпустили версию 2.2.1 с исправлениями ошибок.

Исправление ошибок, Django 2.1.8

Выпущена новая версия Django 2.1.8, в которой исправлена ошибка в админке, допущенная в версии 2.1.7: запрещено редактировать inline-элементы для ManyToManyField, если у пользователя есть только разрешение на просмотр.