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

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!

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

Recommended Posts

Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche
Créer une application Todo avec Django ③ Créer une page de liste de tâches
Créer une application Todo avec Django ⑤ Créer une fonction d'édition de tâches
Créer une application Todo avec Django REST Framework + Angular
Essayez de créer une application Todo avec le framework Django REST
Créer une application Todo avec Django ① Créer un environnement avec Docker
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Page de création de décalage)
Créez une application graphique native avec Py2app et Tkinter
Créer une page d'accueil avec django
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Ecrire un modèle de base)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Traitement d'authentification)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Expérience sur la page d'administration)
Implémenter l'application Django sur Hy
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Conception du modèle de base de données)
Créer un téléchargeur de fichiers avec Django
Créez un fichier temporaire avec django sous forme de zip et renvoyez-le
Création et déploiement d'applications Django (PTVS) à l'aide du stockage Azure Table
Créez une application de scraping avec Python + Django + AWS et modifiez les tâches
Créer une application graphique avec Tkinter de Python
Créez une application Web simple avec Flask
Création de la première application avec Django startproject
Implémenter un modèle avec état et comportement
Création de carte Ramen avec Scrapy et Django
Créer une pile avec une file d'attente et une file d'attente avec une pile (à partir de LetCode / Implémenter la pile à l'aide de files d'attente, Implémenter la file d'attente à l'aide de piles)
Comment développer une application de panier avec Django
Créez un tableau de bord pour les appareils réseau avec Django!
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Liste de tâches simple créée avec Python + Django
Jusqu'à ce que vous créiez une nouvelle application dans Django
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
[Go language] Vous pouvez créer une application TUI avec Elm Architecture Créez une application ToDo légèrement riche avec bubbletea
Qu'est-ce qu'un chien? Volume de démarrage de la création de l'application Django --startapp
Créez un lot d'images et gonflez avec ImageDataGenerator
Qu'est-ce qu'un chien? Volume de démarrage de la création de l'application Django - startproject
Créons une application Mac avec Tkinter et py2app
Créer une visionneuse de modèle 3D avec PyQt5 et PyQtGraph
Déployer l'application Django créée avec PTVS sur Azure
À moi-même en tant que débutant Django (4) --Créer une application mémo-
Créer un environnement django avec docker-compose (MariaDB + Nginx + uWSGI)
[Linux] Créez un auto-certificat avec Docker et apache
Créer une liste Django Todo
Lorsque je déploie une application Django sur Apache2 et qu'elle ne lit plus les fichiers statiques
Étapes pour configurer Pipenv, créer une application CRUD avec Flask et la conteneuriser avec Docker
Créez une application de gestion de partition shogi à l'aide de Django 4 ~ Créer une vue ~
[Python] Créez un écran de spécification de chemin de fichier et de dossier avec tkinter
Tutoriel Django (Créer une application de blog) ⑥ - Détails de l'article / Fonctions d'édition / suppression
Créez une caméra de surveillance WEB avec Raspberry Pi et OpenCV
Créez une application d'apprentissage automatique avec ABEJA Platform + LINE Bot
Créez des applications, enregistrez des données et partagez-les avec un seul e-mail
Créons un diagramme PRML avec Python, Numpy et matplotlib.
Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 2)
Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 3)
Créer une fonction d'authentification à l'aide de django-allauth et CustomUser dans Django
Créez un script de déploiement avec fabric et cuisine et réutilisez-le
Créez une API d'intégration sociale pour les applications smartphone avec Django
[Python] Créer un écran pour le code d'état HTTP 403/404/500 avec Django
Application Todo avec le plugin django-bootstrap-modal-forms
Créer une API avec Django
Création de liste de tâches [Python Django]
Créer une application Web avec Django