LoginSignup
4
0

More than 1 year has passed since last update.

@cardene(かるでね)

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

Last updated at Posted at 2021-02-12

今回は「[Django初心者]DjangoでTodoリストを作成する②」の第２回として、Todoの一覧表示まで一気にやっていきたいと思います。

前回はプロイジェクトを立ち上げ、ロケットを飛ばし、settings,pyの編集まで行いました。

まだそこまでやれていない人はぜひ第１回をみてください。

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

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

[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

アプリケーションの作成

# todoディレクトリの配下で以下を実行してください。
python manage.py startapp todo

構成確認

├── config
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

アプリケーションのつなぎ込み

settings.pyに追記

settings.py

# 34行目あたりのINSTALLED_APPSに追記します。
INSTALLED_APPS = [
    'todo.apps.TodoConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

urls.pyの編集

urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todo/', include('todo.urls')),
]

models.pyの編集

models.py

from django.db import models
from django.utils import timezone


class TodoModel(models.Model):
    class Meta:
        verbose_name = "Todoリスト"
        verbose_name_plural = 'Todoリスト'

    title = models.CharField(
        verbose_name="タイトル",
        max_length=50,
    )
    content = models.TextField(
        verbose_name="内容"
    )
    deadline = models.DateTimeField(
        verbose_name="期日",
        default=timezone.now
    )

    def __str__(self):
        return self.title

アプリケーションのurls.pyの作成と編集

urls.pyの作成

touch urls.py

構成の確認

├── config
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py

urls.pyの編集

todo/urls.py

from django.urls import path
from .views import TodoList

urlpatterns = [
    path('list/', TodoList.as_view(), name='list'),
]

view.pyの編集

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


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

HTMLファイルの作成

base.htmlの作成

mkdir templates
cd templates
touch base.html
cd ../

構成の確認

├── 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
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py

list.htmlの作成

cd todo
mkdir templates
cd templates
mkdir todo
cd todo
touch list.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
    │   └── __init__.py
    ├── models.py
    ├── templates
    │   └── todo
    │       └── list.html
    ├── tests.py
    ├── urls.py
    └── views.py

base.htmlの編集

base.html

{% load static %}
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    {% block header %}
    {% endblock header %}
    <title>Todo App</title>
  </head>
  <body>
    {% block content %}
    {% endblock content %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

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>
    <hr>
    {% endfor %}
</div>
{% endblock content %}

CSSファイルの作成と編集

cd todo
mkdir static
cd static
mkdir todo
cd todo
mkdir css
cd css
touch list.css

構成の確認

├── 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
    │   └── __init__.py
    ├── models.py
    ├── static
    │   └── todo
    │       └── css
    │           └── list.css
    ├── templates
    │   └── todo
    │       └── list.html
    ├── tests.py
    ├── urls.py
    └── views.py

編集

list.css
.new-btn{
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.btn-content{
    margin: 1rem;
}

.btns{
    display: flex;

}

管理画面にログイン

python manage.py createsuperuser
ユーザー名 (leave blank to use '~'): test
メールアドレス: 何も入力せずにEnterキーを押してください。
Password: test
Password (again): test
このパスワードは ユーザー名 と似すぎています。
このパスワードは短すぎます。最低 8 文字以上必要です。
このパスワードは一般的すぎます。
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

admin.pyを編集

admin.py
from django.contrib import admin
from todo.models import TodoModel

admin.site.register(TodoModel)

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

http://127.0.0.1:8000/admin/
ここにアクセスして、データを２、３個作成してください。

一覧表示の確認

http://127.0.0.1:8000/list/
ここにアクセス。
しっかり表示されていることを確認してください。

最後に

今回は「DjnagoでTodoリストを作成する」の第2回として、Todoの一覧表示まで解説してきました。

続き...

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

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

それでは！

4
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
Sign upLogin
4
0