次にタスク編集機能を作成していきます。

記事一覧

DjangoでTodoアプリを作る①Dockerで環境を構築する
 DjangoでTodoアプリを作る②フォルダ一覧ページの作成
 DjangoでTodoアプリを作る③タスク一覧ページの作成
 DjangoでTodoアプリを作る④フォルダー、タスク作成機能の実装
 DjangoでTodoアプリを作る⑤タスク編集機能の作成

URLの設定

まず、URLを設定していきます。
todo/urls.pyに次の一文を加えてください。

todo/urls.py

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

リンクの挿入

templates/index.htmlの編集の部分に以下のようにリンクを挿入します。

templates/index.html

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

テンプレート

templatesディレクトリ下にedit.htmlを作成します。
そして、edit.htmlを以下のように編集します。

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">タスクを編集する</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                <button type="submit" class="btn btn-primary">送信</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 %}

次に、viewを書いていきます。

View

viewに以下のedit_taskメソッドを追加します。

views.py

def edit_task(request, id, task_id):
    #選ばれたタスクを取得する
    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})

request.POST にデータが追加されているとき、formに入力された内容がデータベースに保存されるようにif文の処理を書いています。

完成！

これでこのチャプターは終わりで、Todoアプリの完成です！
ここまでのコードは、リポジトリのchapter5ブランチにあります。

ここからさらに、削除機能とか認証機能とかつけることもできると思うので、カスタマイズしながらやってみるのもいいと思います！
このチュートリアルを参考にしていただきありがとうございました！