Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

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.

@cardene(かるでね)

Django-TodoList①~一覧を表示してみよう~

Posted at

#はじめに
今回の記事では、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/」と入力してください。
そうすると下のような管理画面のログインフォームが現れます。
スクリーンショット 2020-07-03 13.28.24.png

①この画面が表示されたら、先ほど登録した「ユーザー名」と「パスワード」を入力して、ログインしてください。
②ログインすると、「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に登録したものの一覧を表示させることをしてきました。
今後も記事を追加していくのでよかったらみていってください。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?