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

Сьогоднішнє практичне завдання допоможе:

• Закріпити навички створення форм і роботи з ними в 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. Ласкаво просимо у світ веб-розробки!