Go to Qiita Advent Calendar 2024 Top
LoginSignup
20
24

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 5 years have passed since last update.

@acecrc

Djangoで作るToDoリスト

Posted at

概要

Python3とDjango2.1を利用してToDoリストを作成します。
Djangoの汎用クラスビューを利用して、下記の基本的なCRUDの機能を実装します。

  • ToDoの一覧表示機能
  • ToDoの詳細表示機能
  • ToDoの作成機能
  • ToDoの編集機能
  • ToDoの削除機能

開発環境

開発環境は下記を利用しています。
Python 3.6.7
Django 2.1.8
SQLite 3.7.17

GitHub

サンプルのプログラムのリポジトリは下記のURLになります。
https://github.com/acecrc/django-todo

Djangoで作るToDoリスト

仮想環境の構築

下記のコマンドでpythonの仮想環境を構築してください。

$ virtualenv ~/eb-virt
$ source ~/eb-virt/bin/activate

Djangoのインストール

下記のコマンドで仮想環境にDjangoをインストールしてください。

(eb-virt)~$ pip3 install django==2.1.8
(eb-virt)~$ pip3 freeze

プロジェクトの作成

下記のコマンドでDjangoのプロジェクトを作成してください。

(eb-virt)~$ mkdir django-todo
(eb-virt)~$ cd django-todo
(eb-virt)~$ python3 -m django startproject mysite .

settings.pyの初期設定

Djangoを起動させるための初期設定を行います。
mysite/settings.py を下記のように編集してください。

mysite/settings.py
# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['*']

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja'

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo'

todoアプリケーションの作成

todoアプリケーションを作成するため、下記のコマンドを実行してください。

$ python3 manage.py startapp todo

todoアプリケーションの組み込み設定

mysite/settings.py を編集してtodoアプリケーションを組み込みます。

mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig', #todoアプリケーションの組み込み
]

todoアプリケーションのモデル作成

今回モデルは「ToDo」「作成日時」「更新日時」のシンプルな物を作成しました。

todo/models.py
from django.db import models 
 
 
class Todo(models.Model): 
    todo = models.CharField('ToDo', max_length=100, blank=False)
    created_at = models.DateTimeField('作成日時', auto_now_add=True)
    updated_at = models.DateTimeField('更新日時',auto_now=True)
    
    def __str__(self):
        return self.todo

todoアプリケーションのフォームクラス作成

todoアプリケーションのフォームクラスを作成します。今回は入力項目を「ToDo」のみにしたいので、「作成日時」と「更新日時」を入力項目から除外しています。

todo/forms.py
from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('created_at','updated_at',)  #入力項目から作成日時、更新日時を除外

todoアプリケーションのビュー作成

ToDoの各機能に対応するようにDjangoの汎用クラスビューを利用してtodoアプリケーションのビューを作成します。

todo/views.py
from django.views import generic
from django.urls import reverse_lazy
from .models import Todo
from .forms import TodoForm

# ToDoの一覧表示機能
class TodoListView(generic.ListView):
    model = Todo
    paginate_by = 5

# ToDoの詳細表示機能
class TodoDetailView(generic.DetailView):
    model = Todo

# ToDoの作成機能
class TodoCreateView(generic.CreateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

# ToDoの編集機能
class TodoUpdateView(generic.UpdateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

# ToDoの削除機能
class TodoDeleteView(generic.DeleteView):
    model = Todo
    success_url = reverse_lazy('todo:list')

todoアプリケーションのURLを設定

まず、todo/でブラウザから接続された際、mysiteのURL設定ではなく、todoアプリケーションのURL設定を参照するように記載を行います。

mysite/urls.py
from django.contrib import admin
from django.urls import include, path   # includeをimport

urlpatterns = [
    path('todo/', include('todo.urls')),    # todo/でアクセスした際はtodoのurl設定を参照させる
    path('admin/', admin.site.urls),
]

todoアプリケーションに関するURL設定を下記ののように設定します。

todo/urls.py
from django.urls import path
from . import views 
 
app_name = 'todo' 

urlpatterns = [
    path('list/', views.TodoListView.as_view(), name='list'), 
    path('detail/<int:pk>/', views.TodoDetailView.as_view(), name='detail'), 
    path('create/', views.TodoCreateView.as_view(), name='create'), 
    path('update/<int:pk>/', views.TodoUpdateView.as_view(), name='update'), 
    path('delete/<int:pk>/', views.TodoDeleteView.as_view(), name='delete'), 
]

todoアプリケーションのテンプレート作成

まずは、テンプレート用のディレクトリを下記のようなに作成してください。

(eb-virt) $mkdir -p todo/templates/todo

次に、htmlのベースとなるテンプレートを下記のように作成します。

todo/templates/base.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

ToDoの一覧表示機能のためのテンプレートを下記のように作成しました。

todo/templates/todo/todo_list.html
{% extends 'base.html' %}

{% block content %}
<h1>ToDoの一覧</h1>
<a href="{% url 'todo:create' %}">追加</a>
<table>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">ToDo</th>
      <th scope="col">作成日時</th>
      <th scope="col">更新日時</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    {% for item in object_list %}
    <tr>
      <td scope="row"><a href="{% url 'todo:detail' pk=item.id %}">{{ item.id }}</a></td>
      <td>{{ item.todo }}</td>
      <td>{{ item.created_at }}</td>
      <td>{{ item.updated_at }}</td>
      <td>
        <a href="{% url 'todo:update' pk=item.id %}">修正</a>
        <a href="{% url 'todo:delete' pk=item.id %}">削除</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{%endblock%}

ToDoの詳細表示機能のためのテンプレートを下記のように作成しました。

todo/templates/todo/todo_detail.html
{% extends 'base.html' %}

{% block content %}
<h1>ToDoの詳細</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>作成日時</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>更新日時</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<a href="{% url 'todo:list' %}">戻る</a>
{%endblock%}

ToDoの作成機能とToDoの編集機能のためのテンプレートを下記のように作成しました。

todo/templates/todo/todo_form.html
{% extends 'base.html' %}

{% block content %}

{% if object %}
<h1>ToDoの編集</h1>
{% else %}
<h1>ToDoの作成</h1>
{% endif %}

<form method="post">
    {% csrf_token %}
    {{ form }} 
    <button type="submit">送信</button>
</form>
<a href="{% url 'todo:list' %}">戻る</a>
{%endblock%}

ToDoの削除機能のためのテンプレートを下記のように作成しました。

todo/templates/todo/todo_confirm_delete.html
{% extends 'base.html' %}

{% block content %}
<h1>ToDoの削除</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>作成日時</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>更新日時</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<form action="" method="post">
    {% csrf_token %}
    <input type="submit"value="削除" />
</form>
<a href="{% url 'todo:list' %}">戻る</a>
{%endblock%}

todoアプリケーションのマイグレーション

データベースにtodoアプリケーション用のテーブルを作成するために、下記のコマンドを実行してください。

(eb-virt) $ python3 manage.py makemigrations
(eb-virt) $ python3 manage.py migrate

アプリケーションの動作確認

プログラムが完成しましたので、アプリケーションの動作確認を行ってみましょう。
下記のコマンドでDjangoサーバを起動させてください。

(eb-virt) $ python3 manage.py runserver 8080

ブラウザを起動し、下記のURLにアクセスする。
http://127.0.0.1:8080/todo/list/
成功すると下記のようなアプリケーションが表示されます。
django-todo_list.png

以上

20
24
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
Sign upLogin
20
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?