1
0

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初心者]DjangoでTodoリストを作成する④(省略Ver)

Last updated at Posted at 2021-02-14

今回は「[Django初心者]DjangoでTodoリストを作成する」の第4回として、Todoの編集画面を作成していきます。

前回は、詳細画面の表示をしました。

まだそこまでやれていない人はぜひ前回までをみてください!

[Djnago初心者]DjnagoでTodoリストを作成する① (省略Ver)

[Django初心者]DjangoでTodoリストを作成する②(省略Ver)

[Djnago初心者]DjnagoでTodoリストを作成する③ (省略Ver)

また、この記事は手順の確認のため解説を省いています。
細かい説明しているバージョンもあるので、初学者のかたは下記を見てください。

[Django初心者]DjangoでTodoリストを作成する④

GitHubはこちらです。

https://github.com/cardene777

GitHubの使い方がわからない方はこちらを参考にしてください!

GitHubは難しくないよ!

それでは早速やっていきましょう!

構成の確認

まずは前回までの構成の確認からしていきましょう。

├── config
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
├── templates
│   └── base.html
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── __init__.py
    ├── models.py
    ├── static
    │   └── todo
    │       └── css
    │           └── list.css
    ├── templates
    │   └── todo
    │       ├── detail.html
    │       └── list.html
    ├── tests.py
    ├── urls.py
    └── views.py

urls.pyに追記

次にように追記してください。

urls.py
from django.urls import path
from .views import TodoList, TodoDetail, TodoUpdate

urlpatterns = [
    path('list/', TodoList.as_view(), name='list'),
    path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
    path('update/<int:pk>/', TodoUpdate.as_view(), name='update'),
]

vies.pyに追記

次のように追記してください。

view.py
from django.views import generic
from .models import TodoModel
from django.urls import reverse_lazy


class TodoList(generic.ListView):
    template_name = 'todo/list.html'
    model = TodoModel


class TodoDetail(generic.DetailView):
    template_name = 'todo/detail.html'
    model = TodoModel


class TodoUpdate(generic.UpdateView):
    template_name = 'todo/update.html'
    model = TodoModel
    fields = ('title', 'content', 'deadline')
    success_url = reverse_lazy('list')

update.htmlの編集

ターミナルで次のようなコマンドを実行してください。

touch todo/templates/todo/update.html 

再度構成を確認します。

├── config
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
├── templates
│   └── base.html
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── __init__.py
    ├── models.py
    ├── static
    │   └── todo
    │       └── css
    │           └── list.css
    ├── templates
    │   └── todo
    │       ├── detail.html
    │       └── list.html
    |       └── update.html
    ├── tests.py
    ├── urls.py
    └── views.py

update.htmlを次のように編集してください。

update.html
{% extends 'base.html' %}

{% block content %}
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">編集フォーム</h1>
        <p class="lead">Todoを編集しましょう</p>
      </div>
    </div>
    <div class="container">
        <form action="" method="POST">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="更新"></input>
        </form>
    </div>
    <div class="container">
        <p class="btn-content"><a href="{% url 'list' %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">一覧に戻る</a></p>
    </div>
{% endblock content %}

list.htmlに追記

次のように追記してください。

list.html
{% extends 'base.html' %}
{% load static %}

{% block header %}
<link rel="stylesheet" href="{% static 'todo/css/list.css' %}">
{% endblock header %}

{% block content %}
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">TodoList</h1>
        <p class="lead">やることを記入しましょう</p>
    </div>
</div>
<div class="container ">
    {% for list in object_list %}
        <div class="one_box">
            <h1>{{ list.title }}</h1>
            <h4>{{ list.deadline }}</h4>
            <div class="btns">
                <p class="btn-content"><a href="{% url 'detail' list.pk %}" class="btn btn-primary "tabindex="-1" role="button" aria-disabled="true">詳細</a></p>
                <!--ここの間に追記-->
                <p class="btn-content"><a href="{% url 'update' list.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a></p>
                <!--ここの間に追記-->
            </div>
        </div>
    <hr>
    {% endfor %}
</div>
{% endblock content %}

詳細画面の表示

次のURLにアクセスしてください。
http://127.0.0.1:8000/list/

一覧表示画面が表示されていると思うので、「編集」というボタンを押してください。
そうすると編集画面が表示されるので、好きな部分を編集して、「更新」ボタンをクリックしてください。
一覧画面に戻るので、先ほど編集したデータの「詳細」ボタンを押してください。
先ほど編集した内容が入っていれば完璧です!

最後に

今回は「DjnagoでTodoリストを作成する」の第4回として、Todoの編集画面の作成とデータの更新まで解説してきました。

続き...

[Django初心者]DjangoでTodoリストを作成する⑤

質問などがあればコメントするか、Twitter のDMまで送ってください!

それでは!

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?