Als Nächstes implementieren wir die Funktionen zum Erstellen von Ordnern und Aufgaben.

Liste der Artikel

Erstellen einer Todo-App mit Django ① Erstellen einer Umgebung mit Docker Todo-App mit Django erstellen ② Seite mit Ordnerliste erstellen Todo-App mit Django erstellen ③ Seite mit Aufgabenliste erstellen Todo-App mit Django erstellen ④ Ordner- und Aufgabenerstellungsfunktion implementieren Erstellen einer Todo-App mit Django ⑤ Erstellen einer Aufgabenbearbeitungsfunktion

Implementierung der Ordnererstellungsfunktion

URL-Einstellungen

Stellen Sie zunächst die URL basierend auf der folgenden Definition ein.

URL	wird bearbeitet
/folders/create	Einen neuen Ordner erstellen

Um dieses Design zu erhalten, fügen Sie den folgenden Satz zu "todo / urls.py" hinzu.

`todo/urls.py`


path('create', views.create_folder, name='folders.create')

Formularerstellung

Erstellen Sie zunächst eine Datei mit dem Namen forms.py im Verzeichnis todo. Diese Datei ist die Datei, die Sie zum Erstellen des Formulars benötigen.

Bearbeiten Sie forms.py wie folgt.

`forms.py`


from django import forms
from .models import Folder

class FolderForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(FolderForm, self).__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs = {
                'class': 'form-control'
            }
    class Meta:
        model = Folder
        fields = ('title',)
        labels = {'title' : 'Ordnernamen'}

Die zum Erstellen eines Formulars erforderlichen Modelle "Formulare" und "Ordner" werden in die Zeilen 1 und 2 importiert. Im Teil \ _ \ _ init \ _ \ _ ist der Klassenname von FolderForm formulargesteuert. Dies dient zum Anwenden von Bootstrap.

django hat eine Klasse namens django.forms.ModelForm, die automatisch ein Feld basierend auf der Model-Klasse generiert. Es erscheint zweckmäßig, die ModelForm-Klasse für die Registrierung und Aktualisierungsverarbeitung zu verwenden.

Die Bedeutungen der Meta-Klassenvariablen sind wie folgt.

Variablennamen	Bedeutung
model	Geben Sie die zu verknüpfende Modellklasse an
fields	Geben Sie das Zielfeld an, um das Eingabeformular aus Model im Tapple-Format zu generieren
labels	Ändern Sie den Anzeigenamen des Eingabefelds. (Wenn diesmal nicht angegeben, lautet der Anzeigename beispielsweise "title".)

Link zur Ordnererstellungsseite

Fügen Sie den Link wie folgt zu dem Teil von templates / index.html hinzu, in dem der Ordner hinzugefügt wird.

`index.html`


<a href="{% url 'folders.create' %}" class="btn btn-default btn-block">

Vorlage

Erstellen Sie "create_folders.html" im Verzeichnis "templates". Bearbeiten Sie create_folders.html wie folgt.

`templates/create_folders.html`


{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Todo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <header>
    <nav class="my-navbar">
      <a class="my-navbar-brand" href="/">Todo</a>
    </nav>
  </header>
  <main>
    <div class="container">
        <div class="row">
          <div class="col col-md-offset-3 col-md-6">
            <nav class="panel panel-default">
              <div class="panel-heading">Fügen Sie einen Ordner hinzu</div>
              <div class="panel-body">
                <form method="POST">
                  {% csrf_token %}
                  {{ form.as_p }}
                  <div class="text-right">
                      <button type="submit" class="btn btn-primary">Senden</button>
                  </div>
                </form>
              </div>
            </nav>
          </div>
        </div>
      </div>
  </main>
</body>
</html>

CSRF-Maßnahmen werden in den folgenden Teilen ergriffen.

`templates/create_folders.html`


{% csrf_token %}

Darüber hinaus wird das Formular zum Erstellen eines Ordners im folgenden Teil erweitert.

`create_folders.html`


{{ form.as_p }}

Was ist "as_p"?

<p>
Inhalt der Form
</p>

Es bedeutet, dass es in Form von entwickelt wird.

Als nächstes werde ich eine Ansicht schreiben.

View Fügen Sie der Ansicht die folgende Methode "create_folder" hinzu.

`views.py`


from django.shortcuts import render, get_object_or_404, redirect#Weiterleitungsfunktion hinzugefügt
from .forms import FolderForm


def create_folder(request):
    if request.method == "POST":
        form = FolderForm(request.POST)
        if form.is_valid():
            folder = form.save(commit=False)
            folder.created_at = timezone.now()
            folder.save()
            return redirect('tasks.index', id=folder.id)
    else:
        form = FolderForm()
    return render(request, 'create_folders.html', {'form': form})

Zunächst importieren wir die von uns erstellten FolderForm- und Redirect-Funktionen.

Danach wird die Funktion create_folder definiert. Wenn Daten zu request.POST hinzugefügt werden, wird die Verarbeitung der if-Anweisung so geschrieben, dass der im Formular eingegebene Inhalt in der Datenbank gespeichert wird.

Bestätigung

Die Ordnererstellungsfunktion ist jetzt implementiert! Versuchen Sie es mit http: // localhost: 8000 / folders / create. Wenn es wie folgt aussieht, ist es in Ordnung! フォルダー作成機能.png

Implementierung der Aufgabenerstellungsfunktion

URL-Einstellungen

Stellen Sie zunächst die URL basierend auf der folgenden Definition ein.

URL	wird bearbeitet
<int:id>/tasks/create	Erstellen Sie eine neue Aufgabe

Um dieses Design zu erhalten, fügen Sie den folgenden Satz zu "todo / urls.py" hinzu.

`todo/urls.py`


path('<int:id>/tasks/create', views.create_task, name='tasks.create')

Formularerstellung

Erstellen Sie ein Formular zum Erstellen einer Aufgabe in forms.py. Fügen Sie die folgende TaskForm-Klasse hinzu

`todo/forms.py`


from .models import Folder, Task#Aufgabenmodell importieren

class TaskForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(TaskForm, self).__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs = {
                'class': 'form-control'
            }
    class Meta:
        STATUS_CHOICES = [(1, 'Unvollständig'),(2, 'Arbeiten'),(3, 'Erledigt')]
        model = Task
        fields = ('title', 'status','due_date')
        labels = {
            'title': 'Aufgabennname',
            'status': 'Status',
            'due_date': 'Frist',
        }

Zunächst importieren wir das Task-Modell. Und wir fügen die TaskForm-Klasse hinzu.

Link zur Ordnererstellungsseite

Fügen Sie den Link wie folgt zum Teil "Aufgabe hinzufügen" von "templates / index.html" hinzu.

`index.html`


<a href="{% url 'tasks.create' id=current_folder
_id %}" class="btn btn-default btn-block">

Vorlage

Erstellen Sie "create_tasks.html" im Verzeichnis "templates". Bearbeiten Sie create_tasks.html wie folgt.

`templates/create_tasks.html`


{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Todo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header>
  <nav class="my-navbar">
    <a class="my-navbar-brand" href="/">Todo</a>
  </nav>
</header>
<main>
    <div class="container">
        <div class="row">
          <div class="col col-md-offset-3 col-md-6">
            <nav class="panel panel-default">
              <div class="panel-heading">Fügen Sie eine Aufgabe hinzu</div>
              <div class="panel-body">
                <form method="POST">
                  {% csrf_token %}
                  {{ form.as_p }}
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary">Senden</button>
                  </div>
                </form>
              </div>
            </nav>
          </div>
        </div>
      </div>
</main>

<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
<script>
  flatpickr(document.getElementsByName('due_date'), {
    locale: 'ja',
    minDate: new Date()
  });
</script>
</body>
</html>

Als nächstes werde ich eine Ansicht schreiben.

View Fügen Sie der Ansicht die folgende Methode "create_task" hinzu.

`views.py`


from .forms import FolderForm, TaskForm#TaskForm importieren

def create_task(request, id):
    #Holen Sie sich den ausgewählten Ordner
    current_folder = get_object_or_404(Folder, id=id)
    if request.method == "POST":
        form = TaskForm(request.POST)
        if form.is_valid():
            task = form.save(commit=False)
            task.created_at = timezone.now()
            task.folder_id = current_folder
            task.save()
            return redirect('tasks.index', id=current_folder.id)
    else:
        form = TaskForm()
    return render(request, 'create_tasks.html', {'form': form}, {'id':current_folder.id})

Die folgenden Teile sollten beachtet werden.

task.folder_id = current_folder

folder_id ist ein externer Schlüssel, aber Sie müssen beim Festlegen des externen Schlüssels ein Objekt übergeben (in diesem Fall Ordnerobjekt).

Vorlagenerweiterung

Vorlagen sind nützlich, wenn Sie dieselben Informationen und Layouts an mehreren Stellen verwenden möchten. Es ist nicht erforderlich, in jeder Datei zu wiederholen.

Um die ursprüngliche Vorlage zu erstellen, erstellen Sie eine Datei "base.html" im Verzeichnis "todo / templates".

templates
├── base.html
├── create_folders.html
├── create_tasks.html
└── index.html

Bearbeiten Sie base.html wie folgt.

`base.html`


{% load static %}
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Todo</title>
  {% block styles %}
  {% endblock %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<header>
  <nav class="my-navbar">
    <a class="my-navbar-brand" href="{% url 'tasks.index' id=1 %}">Todo</a>
  </nav>
</header>
<main>
    {% block content %}
    {% endblock %}
</main>
{% block scripts %}
{% endblock %}
</body>
</html>

Im folgenden Teil wird HTML eingefügt.

  {% block styles %}
  {% endblock %}

Sie können base.html erweitern, indem Sie am Anfang der Datei Folgendes schreiben.

{% extends 'base.html' %}

Bearbeiten Sie auf dieser Grundlage "create_folders.html", "create_tasks" und "index.html" wie folgt.

`create_folders.html`


{% extends 'base.html' %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="col col-md-offset-3 col-md-6">
        <nav class="panel panel-default">
          <div class="panel-heading">Fügen Sie einen Ordner hinzu</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                  <button type="submit" class="btn btn-primary">Senden</button>
              </div>
            </form>
          </div>
        </nav>
      </div>
    </div>
  </div>
{% endblock %}

`create_tasks.html`


{% extends 'base.html' %}

{% block styles %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
{% endblock %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="col col-md-offset-3 col-md-6">
        <nav class="panel panel-default">
          <div class="panel-heading">Fügen Sie eine Aufgabe hinzu</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                <button type="submit" class="btn btn-primary">Senden</button>
              </div>
            </form>
          </div>
        </nav>
      </div>
    </div>
  <div>
{% endblock %}

{% block scripts %}
  <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
  <script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
  <script>
    flatpickr(document.getElementsByName('due_date'), {
      locale: 'ja',
      minDate: new Date()
    });
  </script>
{% endblock %}

`index.html`


{% extends 'base.html' %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="col col-md-4">
        <nav class="panel panel-default">
          <div class="panel-heading">Ordner</div>
          <div class="list-group">
            {% for folder in folders %}
            <a 
            href="{% url 'tasks.index' id=folder.id %}",
            class="list-group-item {% if current_folder_id == folder.id %}active{% endif %}"
          　>
              {{ folder.title }}
            </a>
            {% endfor %}
          </div>
          <div class="panel-body">
            <a href="{% url 'folders.create' %}" class="btn btn-default btn-block">
Fügen Sie einen Ordner hinzu
            </a>
          </div>
        </nav>
      </div>
      <div class="column col-md-8">
        <div class="panel panel-default">
          <div class="panel-heading">Aufgabe</div>
          <table class="table">
            <thead>
            <tr>
              <th>Titel</th>
              <th>Status</th>
              <th>Frist</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
              {% for task in tasks %}
                <tr>
                  <td>{{ task.title }}</td>
                  <td>
                    <span 
                    class="label {% if task.status == 1 %}label-danger{% endif %}{% if task.status == 2 %}label-info{% endif %}"
                    >
                    {{ task.get_status_display }}
                    </span>
                  </td>
                  <td>{{ task.due_date }}</td>
                  <td><a href="{% url 'tasks.edit' id=current_folder_id task_id=task.id %}">Bearbeiten</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          <div class="panel-body">
            <div class="text-right">
              <a href="{% url 'tasks.create' id=current_folder_id  %}" class="btn btn-default btn-block">
Fügen Sie eine Aufgabe hinzu
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

abschließend

Dies ist das Ende dieses Kapitels! Der bisherige Code befindet sich im [Kapitel 4-Zweig] des Repositorys (https://github.com/takusugar0/django_todo/tree/chapter4). Im nächsten Kapitel werden wir die Aufgabenbearbeitungsfunktion implementieren!

[PYTHON] Todo-App mit Django erstellen ④ Ordner- und Aufgabenerstellungsfunktion implementieren

Liste der Artikel

Implementierung der Ordnererstellungsfunktion

URL-Einstellungen

todo/urls.py

Formularerstellung

forms.py

Link zur Ordnererstellungsseite

index.html

Vorlage

templates/create_folders.html

templates/create_folders.html

create_folders.html

views.py

Bestätigung

Implementierung der Aufgabenerstellungsfunktion

URL-Einstellungen

todo/urls.py

Formularerstellung

todo/forms.py

Link zur Ordnererstellungsseite

index.html

Vorlage

templates/create_tasks.html

views.py

Vorlagenerweiterung

base.html

create_folders.html

create_tasks.html

index.html

abschließend

Liste der Artikel

`todo/urls.py`

`forms.py`

`index.html`

`templates/create_folders.html`

`templates/create_folders.html`

`create_folders.html`

`views.py`

`todo/urls.py`

`todo/forms.py`

`index.html`

`templates/create_tasks.html`

`views.py`

`base.html`

`create_folders.html`

`create_tasks.html`

`index.html`