[DOCKER] Créer une application Todo avec Django ③ Créer une page de liste de tâches

Dans ce chapitre, nous allons créer une page de liste 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

Effectuer la migration

Commencez par créer une table des tâches. La table des tâches est définie comme suit.

Nom logique de la colonne Nom physique de la colonne
ID id
folderID folder_id
Titre title
Statut status
Date de création created_at

Sur cette base, nous éditerons models.py. Ajoutez le modèle de tâche suivant.

todo/models.py


class Task(models.Model):
    STATUS_CHOICES = [(1, 'Incomplet'),(2, 'Travail'),(3, 'Terminé')]

    title = models.CharField(max_length=100)
    status = models.IntegerField(choices=STATUS_CHOICES, default=1)
    due_date =  models.DateField(default=timezone.now)
    created_at = models.DateTimeField(default=timezone.now)
    updated_at = models.DateTimeField(blank=True, null=True)
    folder_id = models.ForeignKey(Folder, on_delete = models.CASCADE)

    def publish(self):
        self.update_at = timezone.now()
        self.save()

    def __str__(self):
        return self.title

Il y a deux points ici.

La première est la partie «status».

todo/models.py


STATUS_CHOICES = [(1, 'Incomplet'),(2, 'Travail'),(3, 'Terminé')]

status = models.IntegerField(choices=STATUS_CHOICES, default=1)

J'ai défini le statut sur IntergerField, mais j'ai défini la valeur par défaut sur 1. L'état initial lors de la création d'une tâche est toujours "incomplet", donc si rien n'est spécifié, "1" est entré. De plus, l 'option de choix trie les entiers incomplets, fonctionnels et terminés.

La seconde est la partie folder_id.

todo/models.py


folder_id = models.ForeignKey(Folder, on_delete = models.CASCADE)

La ForeignKey relie le modèle Folder et le modèle Task. Dans la partie on_delete = ..., vous pouvez supprimer tous les objets associés à l'objet à supprimer en paramétrant CASCADE. Cet article est facile à comprendre avec des exemples concrets. (Au fait, "cascade" signifie "petites chutes d'eau avec de nombreuses étapes", et si vous vous en souvenez, il est facile de comprendre que les objets sont supprimés d'affilée)

À ce stade, créez un fichier de migration avec make migraions. Exécutez la commande suivante.

$ docker-compose run web python3 manage.py makemigrations

Une fois exécuté, ce sera comme suit, et un nouveau fichier de migration sera créé dans le répertoire todo / migrations.

$ docker-compose run web python3 manage.py makemigrations
Starting django_todo_db_1 ... done
Migrations for 'todo':
  todo/migrations/0002_task.py
    - Create model Task

Maintenant que vous avez créé le fichier de migration, exécutez la commande suivante pour le migrer.

$ docker-compose run web python3 manage.py migrate

Une fois exécuté, ce sera comme suit.

docker-compose run web python3 manage.py migrate       
Starting django_todo_db_1 ... done
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, todo
Running migrations:
  Applying todo.0002_task... OK

Afficher le site de gestion

Après la migration, vérifiez le site d'administration (http: // localhost: 8000 / admin /). Ensuite, même si j'aurais dû migrer le modèle de tâche, l'élément lié à la tâche n'apparaît pas.

Screenshot from 2020-04-17 10-48-48.png

Pour afficher le modèle de tâche, vous devez importer le modèle de tâche dans admin.py. Ajoutez-le à admin.py comme suit.

todo/aadmin.py


from django.contrib import admin
from .models import Folder, Task#ajouter à

admin.site.register(Folder)
admin.site.register(Task)#ajouter à

Si vous visitez à nouveau le site d'administration, vous verrez que l'élément Tâches a été ajouté sous Dossiers, comme indiqué dans l'image ci-dessous.

Screenshot from 2020-04-17 10-51-55.png

Encore une fois, ajoutons quelques tâches sur le site d'administration.

Afficher la vue

Modifiez views.py comme suit.

todo/views.py


from django.shortcuts import render, get_object_or_404#ajouter à
from django.utils import timezone
from .models import Folder, Task#ajouter à

def index(request, id):
    #Obtenez tous les dossiers
    folders = Folder.objects.filter(created_at__lte=timezone.now()).order_by('created_at')
    #Récupérez le dossier sélectionné
    current_folder = get_object_or_404(Folder, id=id)
    #Obtenir des tâches pour le dossier sélectionné
    tasks = Task.objects.filter(folder_id = current_folder.id)

    return render(request, 'index.html', {
        'folders':folders,
        'tasks':tasks,
        'current_folder_id': current_folder.id,
    })![Screenshot from 2020-04-17 11-03-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370196/2effc6d9-ccd6-3485-3eaa-4dceb2ae76da.png)

[Fonction Get_object_or_404] sur la première ligne Importer (https://docs.djangoproject.com/ja/3.0/topics/http/shortcuts/#get-object-or-404). La troisième ligne importe le modèle de tâche défini dans models.py.

Dans la fonction get_object_or_404, si le pk (clé primaire) dans le modèle Folder, c'est-à-dire l''id qui correspond à l''id est reçu, l'objet correspondant à l''id est assigné au dossier_actuel`. Il renvoie une erreur 404 lorsqu'il reçoit un «id» qui n'existe pas dans l'«id» du modèle de dossier. Par exemple, si seulement 3 dossiers sont insérés, accéder à http: // localhost: 8000 / folders / 5 / tasks entraînera une erreur 404 comme indiqué ci-dessous. Screenshot from 2020-04-17 11-03-21.png

Ensuite, à propos de cette partie.

tasks = Task.objects.filter(folder_id = current_folder.id)

Ici, la fonction filter est utilisée pour obtenir toutes les tâches dont folder_id est égal à ʻid du dossier sélectionné et l'assigner à tâches`.

Modifier le modèle

Pour afficher la liste des tâches, insérez le code suivant dans templates / index.html où le commentaire <! - Les tâches sont affichées ici->.

templates/index.html


<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="#">Éditer</a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="panel-body">
    <div class="text-right">
      <a href="#" class="btn btn-default btn-block">
Ajouter une tâche
      </a>
    </div>
  </div>
</div>

Je pense que les parties suivantes doivent être notées.

<span 
class="label {% if task.status == 1 %}label-danger{% endif %}{% if task.status == 2 %}label-info{% endif %}"
>
{{ task.get_status_display }}
</span>

Pour obtenir le "nom" d'un champ dont la valeur est limitée par l'attribut choice, vous devez utiliser la méthode get_status_display. (La méthode get_status_display est définie de manière arbitraire. Pour plus de détails, voir Comment obtenir le "nom" d'un champ dont la valeur est limitée par l'attribut choice dans le modèle Django. / 37bf4f5f6b60ccccebe2))

De plus, en utilisant l'instruction if, quand task.status vaut 1, c'est-à-dire quand il est incomplet, label-danger est utilisé, et quand task.status vaut 2, c'est-à-dire quand il fonctionne, label-info est utilisé. L'allocation et le CSS sont appliqués pour chaque état de tâche.

Lorsque vous arrivez ici, allez sur http: // localhost: 8000 / folders / 1 / tasks pour le vérifier! Ce n'est pas grave si cela ressemble à ce qui suit!

Screenshot from 2020-04-17 11-11-36.png

en conclusion

Vous avez maintenant répertorié les tâches! Le code jusqu'à présent peut être trouvé dans la Branche du chapitre 3 du référentiel. Ensuite, nous allons implémenter la fonction de création de dossier!

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 ③ 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
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 un environnement avec Docker
Créer une liste Django Todo
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)
Liste de tâches simple créée avec Python + Django
Création de liste de tâches [Python Django]
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Introduction)
Créer une page d'accueil avec django
Créer un téléchargeur de fichiers 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)
Créer une application graphique avec Tkinter de Python
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éez une application Web simple avec Flask
Création de la première application avec Django startproject
Créer un bloc de page / Todo avec l'API Notion
Créer un fichier PDF avec une taille de page aléatoire
Créer une page qui se charge indéfiniment avec python
Créez un tableau de bord pour les appareils réseau avec Django!
Créer une nouvelle page en confluence avec Python
Procédure de création d'application multi-plateforme avec kivy
Créez une application Hello World avec un seul fichier avec django
Jusqu'à ce que vous créiez une nouvelle application dans Django
Créer un planning Django
Essayez de créer un site de gestion Todo en utilisant WebSocket avec Django (Swamp Dragon)
Créez une application graphique native avec Py2app et Tkinter
Déployer l'application Django créée avec PTVS sur Azure
À moi-même en tant que débutant Django (1) -Création d'un projet / application-
À 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)
[Go language] Vous pouvez créer une application TUI avec Elm Architecture Créez une application ToDo légèrement riche avec bubbletea
Application Todo avec le plugin django-bootstrap-modal-forms
Créer une API avec Django
Créer un écran de connexion Django
Créer et lister des modèles Django
Créer un répertoire avec python
Créez une application de gestion de partition shogi à l'aide de Django 4 ~ Créer une vue ~
Créez une application d'apprentissage automatique avec ABEJA Platform + LINE Bot
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éez une API Web capable de fournir des images avec Django
Flask-Créer une liste Todo avec des mesures CSRF avec WTF avec Flask
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
Étapes pour créer un projet Django
Créez une application de gestion de score shogi à l'aide de Django 2 ~ Paramètres de la base de données ~
Créez un fichier temporaire avec django sous forme de zip et renvoyez-le
Créez une application de gestion de partition shogi à l'aide de Django 6 ~ Split Template ~
Créez un environnement virtuel avec Python!
Les utilisateurs de Rails essaient de créer un moteur de blog simple avec Django
J'ai essayé de créer une liste de nombres premiers avec python
Création et déploiement d'applications Django (PTVS) à l'aide du stockage Azure Table
Django Tips-Créez un site de classement avec Django-
Implémenter l'application Django sur Hy