1. cardene

    Posted

    cardene
Changes in title
+Django-TodoList①~一覧を表示してみよう~
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,228 @@
+#はじめに
+今回の記事では、TodoListの「タイトル」、「内容」、「期日」についてブラウザに表示させることを目標として進めていきます。
+
+できれば前回までの記事を読むとわかりやすいです。前回までの記事
+
+
+
+[PycharmでDjangoでアプリケーションを作成する手順~準備編~](https://qiita.com/heku_777/items/0951bb1da7b664affbfb)
+
+[Django~settings.py編~](https://qiita.com/heku_777/items/0962d426d967c4c0b016)
+
+[Django~ブラウザに表示させてみよう~](https://qiita.com/heku_777/items/302ba92db3e3a1d3cfef)
+
+#'urls.py'の編集
+まずはアプリケーションの'urls.py'に追記していきます。
+アプリケーションの'urls.py'はデフォルトでは用意されていないため、まだ作ってない人は作っていきましょう。
+
+```terminal
+
+#アプリケーションディレクトリに移動
+$ cd アプリケーション名
+
+#urls.pyファイルを作成
+$ touch urls.py
+```
+
+作ることができたら開いてください。
+'urls.py'はブラウザに表示する材料を集めるための指示書です。
+中身は何も書かれていないと思うので、指示書として活用できるように、次のように書き込んでいきます。
+
+```python
+
+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'の役割です。
+下のように追記してください。
+
+```python
+
+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'をしたのように書き換えてください。
+
+```python
+
+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) #期限を24時間後に設定
+
+ def __str__(self):
+ return self.title #管理画面でタイトルを表示させる(言葉ではわかりづらいと思うので、次の章で詳しく説明します。)
+```
+追記したら、ターミナルに次のように入力してください。
+
+```terminal
+
+$ python manage.py makemigrations #マイグレーションファイルの作成
+
+$ python manage.py migrate #モデルをデータベースに反映
+```
+もっとフィールドの種類が知りたい人は、この方の記事を読んでみるとわかりやすいです。
+[Django: モデルフィールドリファレンスの一覧(nachashinさん)](https://qiita.com/nachashin/items/f768f0d437e0042dd4b3)
+
+#admin.pyの編集
+
+ここではモデルの登録をしていきます。
+'admin.py'に次のように追記してください。
+
+```python
+
+from django.contrib import admin
+from todo.models import TodoModel
+
+admin.site.register(TodoModel)
+```
+これで登録が完了しました。
+
+
+#管理者ユーザーの登録
+ここから管理画面を利用できる管理者ユーザー(今回は自分)を登録をしていきます。
+ターミナルに次のように入力してください
+
+```terminal
+
+$ python manage.py createsuperuser
+```
+そうすると次のようなものが1行ずつ表示されるので、入力していきましょう。
+
+```terminal
+#管理者名登録
+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.
+```
+#管理画面にログインし、モデルに追加する
+早速管理画面にログインしていきたいと思うます。
+ターミナルを開いてください。
+
+```terminal
+$ python manage.py runserver
+```
+そうすると
+
+```terminal
+Starting development server at http://127.0.0.1:8000/
+```
+と出るのでクリックするとブラウザに飛びます。
+
+ブラウザのURLの末尾に「admin/」と入力してください。
+そうすると下のような管理画面のログインフォームが現れます。
+<img width="427" alt="スクリーンショット 2020-07-03 13.28.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570269/c776b4da-eb0c-2793-f657-67739d09bf13.png">
+
+①この画面が表示されたら、先ほど登録した「ユーザー名」と「パスワード」を入力して、ログインしてください。
+②ログインすると、「TODO」というところに「Todo models」と表示されていると思います。
+そこをクリックしてください。
+③右上に「TODO MODEL」を追加とあるでクリックします。
+④「タイトル」、「内容」、「期日」を入力したら、「保存してもう一つ追加」をクリックして、もう一つ好きなものを追加して「保存」を押してください。
+⑤そうするとタイトルが表示されているのを確認できるはずです。
+ここでいったんPycharmに戻りましょう。
+
+#HTMLファイルを作成
+ここからはHTMLファイルを作成していきます。
+まずターミナルで「control」ボタンと「c」ボタンを同時に押して、サーバーを止めましょう。
+HTMLの知識がない方もコピペで実装できるので、ひとまずは大丈夫です。
+アプリケーションディレクトリの'templates'ディレクトリに移動します。
+まだ作成しいない人は作成していきましょう。
+
+```terminal
+#アプリケーションに移動
+$ cd アプリケーション名
+
+#tempaltesディレクトリの作成
+$ mkdir templates
+```
+作成できたら次はHTMLファイルを作っていきます。
+
+```terminal
+#templatesディレクトリに移動
+$ cd templates
+
+#HTMLファイル作成
+$ touch list.html
+```
+
+これでHTMLファイルfが作成できたので、書き込んでいきます。
+
+```html
+<!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ファイルの編集は完了です。
+
+#ブラウザに一覧を表示
+さて早速表示できる確認してみましょう。
+
+```terminal
+$ python manage.py runserver
+```
+とターミナルに入力して、ブラウザに移動します。
+URLの末尾に'list/'と追加すると、先ほど登録したものが一覧表示されているはずです。
+無事教示できている子音が確認できたら目標達成です。
+今回はここまでです!
+お疲れ様でした。
+
+#終わりに
+今回はTodoListに登録したものの一覧を表示させることをしてきました。
+今後も記事を追加していくのでよかったらみていってください。