[DOCKER] Créer une application Todo avec Django ⑤ Créer une fonction d'édition de tâches

Ensuite, nous allons créer une 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éation de l'application Todo avec Django ④ Implémentation de 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

Paramètres d'URL

Tout d'abord, définissez l'URL. Ajoutez la phrase suivante à todo / urls.py.

todo/urls.py

path('<int:id>/tasks/<int:task_id>', views.edit_task, name='tasks.edit')

Insérer un lien

Insérez le lien dans la partie ʻedit de templates / index.html` comme indiqué ci-dessous.

templates/index.html

<a href="{% url 'tasks.edit' id=current_folder_id task_id=task.id %}}">Éditer</a>

modèle

Créez ʻedit.html dans le répertoire templates. Puis éditez ʻedit.html comme suit.

templates/edit.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">Modifier la 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 %}

Ensuite, j'écrirai une vue.

View Ajoutez la méthode ʻedit_task` suivante à la vue.

views.py

def edit_task(request, id, task_id):
    #Obtenez la tâche sélectionnée
    task = get_object_or_404(Task, id=task_id)
    if request.method == "POST":
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            task = form.save(commit=False)
            task.save()
            return redirect('tasks.index', id=task.folder_id.id)
    else:
        form = TaskForm(instance=task)
    return render(request, 'edit.html', {'form': form}, {'task':task})

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.

Achevée!

C'est la fin de ce chapitre et l'application Todo est terminée! Le code jusqu'à présent peut être trouvé dans la [branche chapitre5] du dépôt (https://github.com/takusugar0/django_todo/tree/chapter5).

À partir de là, je pense que vous pouvez également ajouter une fonction de suppression ou une fonction d'authentification, donc je pense que c'est une bonne idée de la personnaliser! Merci de vous référer à ce tutoriel!

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éation de l'application Todo avec Django ④ Implémentation de 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