Практическое занятие по работе с формами

Сегодняшнее практическое задание поможет:

• Закрепить навыки создания форм и работы с ними в Django.
• Применить валидацию данных и взаимодействие с базой данных на реальном примере.
• Увидеть, как формы интегрируются в веб-интерфейс.
• Получить опыт построения функционального приложения с использованием форм.

Задача: Создать приложение для управления задачами

В этом задании мы разрабатываем простое, но функциональное приложение "To-Do List". Приложение позволит пользователям добавлять задачи, редактировать их и отмечать как выполненные. Всё это с использованием форм, которые вы уже изучили.

Шаг 1: подготовка проекта

Создадим новый Django проект и приложение. Команды ниже помогут вам быстро развернуть всё необходимое.

django-admin startproject taskmanager
cd taskmanager
python manage.py startapp todo

Зарегистрируйте приложение todo в INSTALLED_APPS файла settings.py:

INSTALLED_APPS = [
    ...
    'todo',
]

Теперь создадим модель для задачи. Откройте todo/models.py и добавьте следующий код:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200, verbose_name="Название задачи")
    description = models.TextField(blank=True, verbose_name="Описание задачи")
    is_completed = models.BooleanField(default=False, verbose_name="Завершено?")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="Дата создания")

    def __str__(self):
        return self.title

После этого, выполните миграции:

python manage.py makemigrations
python manage.py migrate

Теперь наша модель готова!

Шаг 2: создание формы для задачи

Создадим форму для модели Task, которая будет использоваться для добавления и редактирования задач. Создайте файл todo/forms.py:

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'is_completed']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Введите название задачи'}),
            'description': forms.Textarea(attrs={'class': 'form-control', 'placeholder': 'Введите описание'}),
            'is_completed': forms.CheckboxInput(attrs={'class': 'form-check-input'}),
        }
        labels = {
            'title': 'Название',
            'description': 'Описание',
            'is_completed': 'Завершено?',
        }

Здесь мы использовали ModelForm, чтобы упростить работу с моделью Task. Виджеты позволяют нам применить стили Bootstrap, а labels задают русскоязычные подписи для полей.

Шаг 3: создание представлений

Теперь мы напишем представления для отображения списка задач, добавления новых и редактирования существующих. Для начала, создайте в todo/views.py следующий код:

from django.shortcuts import render, redirect, get_object_or_404
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()
    return render(request, 'todo/task_list.html', {'tasks': tasks})

def task_create(request):
    if request.method == 'POST':
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')
    else:
        form = TaskForm()
    return render(request, 'todo/task_form.html', {'form': form})

def task_update(request, pk):
    task = get_object_or_404(Task, pk=pk)
    if request.method == 'POST':
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            form.save()
            return redirect('task_list')
    else:
        form = TaskForm(instance=task)
    return render(request, 'todo/task_form.html', {'form': form})

def task_delete(request, pk):
    task = get_object_or_404(Task, pk=pk)
    if request.method == 'POST':
        task.delete()
        return redirect('task_list')
    return render(request, 'todo/task_confirm_delete.html', {'task': task})

Здесь мы определили четыре представления:

1. task_list – отображает список всех задач.
2. task_create – позволяет создавать новую задачу.
3. task_update – редактирует существующую задачу.
4. task_delete – удаляет задачу.

Шаг 4: настройка маршрутов

Добавьте маршруты для представлений. В файле todo/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.task_list, name='task_list'),
    path('create/', views.task_create, name='task_create'),
    path('update/<int:pk>/', views.task_update, name='task_update'),
    path('delete/<int:pk>/', views.task_delete, name='task_delete'),
]

Не забудьте подключить todo/urls.py в основной urls.py проекта:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]

Шаг 5: шаблоны для приложения

Создайте папку todo/templates/todo и добавьте файлы шаблонов.

task_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список задач</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body class="container">
    <h1 class="my-4">Список задач</h1>
    <a href="{% url 'task_create' %}" class="btn btn-primary mb-3">Добавить задачу</a>
    <ul class="list-group">
        {% for task in tasks %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
            {{ task.title }}
            <span>
                <a href="{% url 'task_update' task.pk %}" class="btn btn-sm btn-warning">Редактировать</a>
                <a href="{% url 'task_delete' task.pk %}" class="btn btn-sm btn-danger">Удалить</a>
            </span>
        </li>
        {% endfor %}
    </ul>
</body>
</html>

task_form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Форма задачи</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body class="container">
    <h1 class="my-4">Форма задачи</h1>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit" class="btn btn-success">Сохранить</button>
    </form>
</body>
</html>

task_confirm_delete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Удаление задачи</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body class="container">
    <h1 class="my-4">Вы уверены, что хотите удалить "{{ task.title }}"?</h1>
    <form method="post">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger">Удалить</button>
        <a href="{% url 'task_list' %}" class="btn btn-secondary">Отмена</a>
    </form>
</body>
</html>

Результат

Запустите сервер:

python manage.py runserver

На http://127.0.0.1:8000/ вы увидите функциональное приложение для управления задачами. Теперь попробуйте добавить, редактировать и удалять задачи!

Теперь вы переплавили теорию в практику и создали полноценное приложение, используя Django Forms. Добро пожаловать в мир веб-разработки!