3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

DjangoでTodoアプリを作る⑤タスク編集機能の作成

Last updated at Posted at 2020-04-26

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

##記事一覧
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ブランチにあります。

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

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?