Ensuite, nous allons implémenter les fonctions de création de dossier et de tâche.

Liste des articles

Créer une application Todo avec Django ① Créer un environnement avec Docker Créer une application Todo avec Django ② Créer une page de liste de dossiers Créer une application Todo avec Django ③ Créer une page de liste de tâches Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche Création d'une application Todo avec Django ⑤ Création d'une fonction d'édition de tâches

Implémentation de la fonction de création de dossier

Paramètres d'URL

Tout d'abord, définissez l'URL en fonction de la définition suivante.

URL	En traitement
/folders/create	Créer un nouveau dossier

Pour obtenir ce design, ajoutez la phrase suivante à todo / urls.py.

`todo/urls.py`


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

Création de formulaire

Commencez par créer un fichier appelé forms.py dans le répertoire todo. Ce fichier est le fichier dont vous avez besoin pour créer le formulaire.

Modifiez forms.py comme suit.

`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' : 'Nom de dossier'}

Les modèles «formulaires» et «Dossier» nécessaires pour créer un formulaire sont importés aux lignes 1 et 2. Dans la partie \ _ \ _ init \ _ \ _, le nom de classe de FolderForm est form-control. Il s'agit d'appliquer le bootstrap.

django a une classe appelée django.forms.ModelForm qui génère automatiquement un Field basé sur la classe Model. Il semble pratique d'utiliser la classe ModelForm pour l'enregistrement et le traitement des mises à jour.

Les significations des variables de classe Meta sont les suivantes.

Nom de variable	sens
model	Spécifiez la classe Model à lier
fields	Spécifiez le champ cible pour générer le formulaire d'entrée à partir du modèle au format tapple
labels	Modifiez le nom d'affichage du champ de saisie. (Par exemple, s'il n'est pas spécifié cette fois, le nom d'affichage sera "titre")

Lien vers la page de création de dossier

Ajoutez le lien comme suit à la partie de templates / index.html où le dossier est ajouté.

`index.html`


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

modèle

Créez create_folders.html sous le répertoire templates. Modifiez create_folders.html comme suit.

`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">Ajouter un dossier</div>
              <div class="panel-body">
                <form method="POST">
                  {% csrf_token %}
                  {{ form.as_p }}
                  <div class="text-right">
                      <button type="submit" class="btn btn-primary">Envoyer</button>
                  </div>
                </form>
              </div>
            </nav>
          </div>
        </div>
      </div>
  </main>
</body>
</html>

Les mesures CSRF sont prises dans les parties suivantes.

`templates/create_folders.html`


{% csrf_token %}

De plus, le formulaire de création d'un dossier est développé dans la partie suivante.

`create_folders.html`


{{ form.as_p }}

Qu'est-ce que ʻas_p`?

<p>
contenu du formulaire
</p>

Cela signifie qu'il sera développé sous la forme de.

Ensuite, j'écrirai une vue.

View Ajoutez la méthode suivante create_folder à la vue.

`views.py`


from django.shortcuts import render, get_object_or_404, redirect#Ajout de la fonction de redirection
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})

Tout d'abord, nous importons le FolderForm et redirigeons les fonctions que nous avons créées.

Après cela, la fonction create_folder est définie. Lorsque des données sont ajoutées à request.POST, le traitement de l'instruction if est écrit afin que le contenu saisi dans le formulaire soit sauvegardé dans la base de données.

Vérification

La fonction de création de dossier est maintenant implémentée! Essayez http: // localhost: 8000 / folders / create, et si cela ressemble à ce qui suit, c'est OK! フォルダー作成機能.png

Implémentation de la fonction de création de tâches

Paramètres d'URL

Tout d'abord, définissez l'URL en fonction de la définition suivante.

URL	En traitement
<int:id>/tasks/create	Créer une nouvelle tâche

Pour obtenir ce design, ajoutez la phrase suivante à todo / urls.py.

`todo/urls.py`


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

Création de formulaire

Créez un formulaire pour créer une tâche dans forms.py. Ajoutez la classe TaskForm suivante

`todo/forms.py`


from .models import Folder, Task#Importer le modèle de tâche

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, 'Incomplet'),(2, 'Travail'),(3, 'Terminé')]
        model = Task
        fields = ('title', 'status','due_date')
        labels = {
            'title': 'Nom de la tâche',
            'status': 'Statut',
            'due_date': 'Date limite',
        }

Tout d'abord, nous importons le modèle de tâche. Et nous ajoutons la classe TaskForm.

Lien vers la page de création de dossier

Ajoutez le lien comme suit à la partie «Ajouter une tâche» de «templates / index.html».

`index.html`


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

modèle

Créez create_tasks.html sous le répertoire templates. Modifiez create_tasks.html comme suit.

`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">Ajouter une tâche</div>
              <div class="panel-body">
                <form method="POST">
                  {% csrf_token %}
                  {{ form.as_p }}
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary">Envoyer</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>

Ensuite, j'écrirai une vue.

View Ajoutez la méthode suivante create_task à la vue.

`views.py`


from .forms import FolderForm, TaskForm#Importer TaskForm

def create_task(request, id):
    #Récupérez le dossier sélectionné
    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})

Les parties suivantes doivent être notées.

task.folder_id = current_folder

folder_id est une clé externe, mais vous devez passer un objet lors de la définition de la clé externe (objet Folder dans ce cas).

Extension de modèle

Les modèles sont utiles lorsque vous souhaitez utiliser les mêmes informations et la même mise en page à plusieurs endroits. Il n'est pas nécessaire de répéter dans chaque fichier.

Pour créer le modèle d'origine, créez un fichier base.html sous le répertoire todo / templates.

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

Modifiez base.html comme suit.

`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>

La partie suivante, HTML sera insérée.

  {% block styles %}
  {% endblock %}

Vous pouvez étendre base.html en écrivant ce qui suit au début du fichier.

{% extends 'base.html' %}

Sur cette base, éditez create_folders.html, create_tasks et ʻindex.html` comme suit.

`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">Ajouter un dossier</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                  <button type="submit" class="btn btn-primary">Envoyer</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">Ajouter une tâche</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                <button type="submit" class="btn btn-primary">Envoyer</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">dossier</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">
Ajouter un dossier
            </a>
          </div>
        </nav>
      </div>
      <div class="column col-md-8">
        <div class="panel panel-default">
          <div class="panel-heading">tâche</div>
          <table class="table">
            <thead>
            <tr>
              <th>Titre</th>
              <th>Statut</th>
              <th>Date limite</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 %}">Éditer</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">
Ajouter une tâche
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

en conclusion

C'est la fin de ce chapitre! Le code jusqu'à présent peut être trouvé dans la [branche chapitre4] du dépôt (https://github.com/takusugar0/django_todo/tree/chapter4). Dans le chapitre suivant, nous allons implémenter la fonction d'édition de tâches!

[DOCKER] Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche

Liste des articles

Implémentation de la fonction de création de dossier

Paramètres d'URL

todo/urls.py

Création de formulaire

forms.py

Lien vers la page de création de dossier

index.html

modèle

templates/create_folders.html

templates/create_folders.html

create_folders.html

views.py

Vérification

Implémentation de la fonction de création de tâches

Paramètres d'URL

todo/urls.py

Création de formulaire

todo/forms.py

Lien vers la page de création de dossier

index.html

modèle

templates/create_tasks.html

views.py

Extension de modèle

base.html

create_folders.html

create_tasks.html

index.html

en conclusion

Liste des articles

`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`