はじめに

今回の記事では、TodoListの「タイトル」、「内容」、「期日」についてブラウザに表示させることを目標として進めていきます。

できれば前回までの記事を読むとわかりやすいです。前回までの記事
↓
↓
↓
PycharmでDjangoでアプリケーションを作成する手順~準備編~

Django~settings.py編~

Django~ブラウザに表示させてみよう~

'urls.py'の編集

まずはアプリケーションの'urls.py'に追記していきます。
アプリケーションの'urls.py'はデフォルトでは用意されていないため、まだ作ってない人は作っていきましょう。


# アプリケーションディレクトリに移動
$ cd アプリケーション名

# urls.pyファイルを作成
$ touch urls.py

作ることができたら開いてください。
'urls.py'はブラウザに表示する材料を集めるための指示書です。
中身は何も書かれていないと思うので、指示書として活用できるように、次のように書き込んでいきます。


from django.urls import path
from .views import TodoList   #views.pyからTodoListを持ってくる

urlpatterns = [
    path('list/', TodoList.as_view()),   #URlの末尾にに'list/'と追記すると'views.py'の'TodoList'が表示される。
]

'views.py'に存在するTodoList(これから作成していきます)を読み込んで、URLの末尾に'list/'とすることで、'TodoList'が実行されるようにする。
ちなみに'as_view()'というのは、クラス汎用ビューを使用する場合つけられるものなので、そういうものと思っておいてください。

views.pyの編集

次に'views.py'を編集していきます。
'urls.py'(指示書)に沿って必要な材料を揃えるために行動するのが、この'views.py'の役割です。
下のように追記してください。


from django.shortcuts import render
from django.views.generic import ListView   #modelオブジェクトの一覧を表示させる'ListView'をインポート
from .models import TodoModel               #'models.py'の'TodoModel'クラスをインポート


class TodoList(ListView):
    template_name = 'list.html'             #'list.html'を表示する
    model = TodoModel                       #'TodoModelを引っ張ってくる

HTMLファイルと'models.py'ファイルを指定して、'views.py'が呼び出された時に一緒に呼び出してくれます。

models.pyの編集

必要となる素材を用意するのがこの'models.py'の役割です。
'models.py'をしたのように書き換えてください。


from django.db import models
from django.utils import timezone             #時間を設定できるものをインんポート


class TodoModel(models.Model):                #'django.db.models.Model'クラスの継承
    title = models.CharField(max_length=50)   #タイトルの設定
    content = models.TextField()              #内容の設定
    deadline = models.DateTimeField(default=timezone.now)   #期限を２４時間後に設定

    def __str__(self):
        return self.title               #管理画面でタイトルを表示させる(言葉ではわかりづらいと思うので、次の章で詳しく説明します。)

追記したら、ターミナルに次のように入力してください。


$ python manage.py makemigrations   #マイグレーションファイルの作成

$ python manage.py migrate          #モデルをデータベースに反映

もっとフィールドの種類が知りたい人は、この方の記事を読んでみるとわかりやすいです。
Django: モデルフィールドリファレンスの一覧(nachashinさん)

admin.pyの編集

ここではモデルの登録をしていきます。
'admin.py'に次のように追記してください。


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

admin.site.register(TodoModel)

これで登録が完了しました。

管理者ユーザーの登録

ここから管理画面を利用できる管理者ユーザー(今回は自分)を登録をしていきます。
ターミナルに次のように入力してください


$ python manage.py createsuperuser

そうすると次のようなものが１行ずつ表示されるので、入力していきましょう。

# 管理者名登録
Username (leave blank to use 'user1'):　　　　　　#ここに自分の好き名前を入力してください

# Emailアドレスの登録
Email address:  　　　　#ここに自分のメアドを入力してください(今回は練習なので入力しないでも大丈夫です)

# 管理者のパスワード
Password: # 
Password (again): <img width="427" alt="スクリーンショット 2020-07-03 13.28.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570269/e196962e-8dde-b60e-07c6-8bcde6fa2e52.png">

This password is too common. 　#パスワードが単純過ぎる場合はエラー発生
Password:          　　　　　　　#ここに管理画面に入る時のパスワードを入力してください
Password (again): 　　　　　　 　#パスワードの確認です。

# もしかすると次のような警告が出るかもしれません

このパスワードは ユーザー名 と似すぎています。
このパスワードは短すぎます。最低 8 文字以上必要です。
このパスワードは一般的すぎます。

# 今回は練習なので無視して大丈夫ですが、本番の時はしっかり作り直しましょう。
# 無視する時は'y'を入力し、作り直す時は'N'を入力しましょう。

Bypass password validation and create user anyway? [y/N]: y

# これが出れば管理者ユーザーの登録ができてます。
superuser created successfully.

管理画面にログインし、モデルに追加する

早速管理画面にログインしていきたいと思うます。
ターミナルを開いてください。

$ python manage.py runserver

そうすると

Starting development server at http://127.0.0.1:8000/

と出るのでクリックするとブラウザに飛びます。

ブラウザのURLの末尾に「admin/」と入力してください。
そうすると下のような管理画面のログインフォームが現れます。

①この画面が表示されたら、先ほど登録した「ユーザー名」と「パスワード」を入力して、ログインしてください。
②ログインすると、「TODO」というところに「Todo models」と表示されていると思います。
そこをクリックしてください。
③右上に「TODO MODEL」を追加とあるでクリックします。
④「タイトル」、「内容」、「期日」を入力したら、「保存してもう一つ追加」をクリックして、もう一つ好きなものを追加して「保存」を押してください。
⑤そうするとタイトルが表示されているのを確認できるはずです。
ここでいったんPycharmに戻りましょう。

HTMLファイルを作成

ここからはHTMLファイルを作成していきます。
まずターミナルで「control」ボタンと「c」ボタンを同時に押して、サーバーを止めましょう。
HTMLの知識がない方もコピペで実装できるので、ひとまずは大丈夫です。
アプリケーションディレクトリの'templates'ディレクトリに移動します。
まだ作成しいない人は作成していきましょう。

# アプリケーションに移動
$ cd アプリケーション名

# tempaltesディレクトリの作成
$ mkdir templates

作成できたら次はHTMLファイルを作っていきます。

# templatesディレクトリに移動
$ cd templates

# HTMLファイル作成
$ touch list.html

これでHTMLファイルfが作成できたので、書き込んでいきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% for list in object_list %}  　#モデルのデータを一つずつ取り出す。
        <h1>{{ list.title }}</h1>　　#タイトルを表示
        <p>{{ list.content }}</p>　　#内容を表示
        <p>{{ list.deadline }}</p>  #期日を表示
    {% endfor %}
</body>
</html>

djangoの中身をHTMLで表示するには、「{{}}」や「{% %}」を使います。
これでHTMLファイルの編集は完了です。

ブラウザに一覧を表示

さて早速表示できる確認してみましょう。

$ python manage.py runserver

とターミナルに入力して、ブラウザに移動します。
URLの末尾に'list/'と追加すると、先ほど登録したものが一覧表示されているはずです。
無事教示できている子音が確認できたら目標達成です。
今回はここまでです！
お疲れ様でした。

終わりに

今回はTodoListに登録したものの一覧を表示させることをしてきました。
今後も記事を追加していくのでよかったらみていってください。