次にタスク編集機能を作成していきます。
##記事一覧
DjangoでTodoアプリを作る①Dockerで環境を構築する
DjangoでTodoアプリを作る②フォルダ一覧ページの作成
DjangoでTodoアプリを作る③タスク一覧ページの作成
DjangoでTodoアプリを作る④フォルダー、タスク作成機能の実装
DjangoでTodoアプリを作る⑤タスク編集機能の作成
##URLの設定
まず、URLを設定していきます。
todo/urls.py
に次の一文を加えてください。
path('<int:id>/tasks/<int:task_id>', views.edit_task, name='tasks.edit')
##リンクの挿入
templates/index.html
の編集
の部分に以下のようにリンクを挿入します。
<a href="{% url 'tasks.edit' id=current_folder_id task_id=task.id %}}">編集</a>
##テンプレート
templates
ディレクトリ下にedit.html
を作成します。
そして、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
メソッドを追加します。
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アプリを作る⑤タスク編集機能の作成