🔔 あなたへのおすすめ記事「For you（β）」をリリースしました
Zenn
Open13

Djangoハンズオンレクチャ覚書1

django
us-east-7us-east-7

Djangoを初心者の後輩に教えるときのメモ書きです

ディレクトリを作成します

macTerminal
$ mkdir django;cd django
$ mkdir tutorial;cd tutorial
windowsPowershell
> mkdir django;cd django
> mkdir tutorial;cd tutorial

Python仮想環境を作成し有効にします

macTerminal
$ python -m venv venv
(venv) $ source venv/bin/activate
windowsPowershell
> python -m venv venv
> cmd
> venv\Scripts\activate.bat
(venv) >

Djangoをインストールします

macTerminal
(venv) $ pip install django
windowsPowershell
(venv) > pip install django

webApp1という名前のプロジェクトを作成します

macTerminal
(venv) $ django-admin startproject webApp1
(venv) $ ls
venv	webApp1
windowsPowershell
(venv) > django-admin startproject webApp1
(venv) > dir
 c:\dev\django\tutorial のディレクトリ

2021/05/18  14:02    <DIR>          .
2021/05/18  14:02    <DIR>          ..
2021/05/18  09:36    <DIR>          venv
2021/05/18  14:01    <DIR>          webApp1

webApp1プロジェクトのサーバを開始します

macTerminal
(venv) $ cd webApp1
(venv) $ python manage.py runserver
windowsPowershell
(venv) > cd webApp1
(venv) > python manage.py runserver

ブラウザで動作を確認します

未適用のマイグレイションを適用します

  • ctrl+Cコマンドでサーバを停止させます
  • マイグレーションを適用します
macTerminal
(venv) $ python manage.py migrate
windowsPowershell
(venv) > python manage.py migrate

Djangoアプリbbsを作成します

macTerminal
(venv) $ python manage.py startapp bbs
windowsPowershell
(venv) >python manage.py startapp bbs

アプリbbsのディレクトリ構造を確認します

macTerminal
(venv) $ pwd
/Users/sharland/dev/django/tutorial/webApp1
(venv) $ tree
.
├── bbs
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── webApp1
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-37.pyc
    │   ├── settings.cpython-37.pyc
    │   ├── urls.cpython-37.pyc
    │   └── wsgi.cpython-37.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

4 directories, 18 files
windowsPowershell
・・・・・
us-east-7us-east-7

設定ファイルsettings.pyを編集します

  • 設定ファイルパス：django/tutorial/webApp1/settings.py

アプリbbsを登録します

  • 設定箇所：INSTALLED_APPS
  • 追加内容：'bbs.apps.BbsConfig',
settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bbs.apps.BbsConfig',

日本語対応を登録します

  • 設定ファイルパス：django/tutorial/webApp1/settings.py
  • 設定箇所：# Internationalization
  • 追加内容：
    • LANGUAGE_CODE:'ja'
    • TIME_ZONE:'Asia/Tokyo'
settings.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
us-east-7us-east-7

Postモデルを設計します

適用 項目1 項目2 項目3
項目名 タイトル 投稿内容 投稿日時
仕様 最大長150バイト 自動追加

Postモデルを実装します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/models.py
  • 実装コード
    • from django.db import modelsは最初から実装されています
models.py
from django.db import models

class Post(models.Model):
  title = models.CharField("タイトル", max_length=150,)
  body = models.TextField("投稿内容")
  posted_at = models.DateTimeField(("投稿日時"), auto_now_add=True,)
us-east-7us-east-7

マイグレーションします

macTerminal
(venv) $ python manage.py makemigrations
Migrations for 'bbs':
  bbs/migrations/0001_initial.py
    - Create model Post
windowsPowershell
(venv) >python manage.py makemigrations

Postモデルに必要な変更をデータベースに加えます

macTerminal
(venv) $ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, bbs, contenttypes, sessions
Running migrations:
  Applying bbs.0001_initial... OK
windowsPowershell
(venv) >python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, bbs, sessions
Running migrations:
  Applying folderAccess.0001_initial... OK
us-east-7us-east-7

Django Shellを起動します

macTerminal
(venv) $ python manage.py shell
Python 3.7.4 (default, Aug 13 2019, 15:17:50) 
[Clang 4.0.1 (tags/RELEASE_401/final)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>
windowsTerminal
(venv) c:\dev\django\tutorial\webApp1>python manage.py shell
Python 3.9.5 (tags/v3.9.5:0a7dcbd, May  3 2021, 17:27:52) [MSC v.1928 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>

POSTモデルを読み込んでデータを1件登録します

>>> from bbs.models import Post
>>> Post.objects.create(title="最初の投稿", body="これは最初の投稿です")
<Post: Post object (1)>

データベースに登録したデータの１レコード目を読み込みます

>>> post = Post.objects.first()
>>> post.title
'最初の投稿'
>>> post.body
'これは最初の投稿です'
>>>

Django Shellを終了します

>>> quit()
  • ctrl+Dを押下しても終了することができます
us-east-7us-east-7

管理者ユーザを作成します

macTerminal
(venv) $ python manage.py createsuperuser
ユーザー名 (leave blank to use 'sharland'): teruroom
メールアドレス: teruroom@mail.site.com
Password: 
Password (again): 
Superuser created successfully.
windowsPowershell
(venv) c:\dev\django\tutorial\webApp1>python manage.py createsuperuser
ユーザー名 (leave blank to use 'sharland'): teruroom
メールアドレス: teruroom@mail.site.com
Password: 
Password (again): 
Superuser created successfully.

管理者ユーザでDjango管理サイトにログインします

サーバを起動します

macTerminal
(venv) $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
May 10, 2021 - 23:03:00
Django version 3.2.2, using settings 'webApp1.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
windowsPowershell
(venv) c:\dev\django\tutorial\webApp1>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
May 18, 2021 - 20:15:07
Django version 3.2.3, using settings 'webSite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

ブラウザでDjango管理サイトにアクセスし、ログインします

Django管理サイトが表示されます

us-east-7us-east-7

Django管理サイトにbbs POSTモデルを登録します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/admin.py
  • 実装コード
    • from django.contrib import adminは最初から実装されています
admin.py
from django.contrib import admin
from bbs.models import Post

admin.site.register(Post)

Django管理サイトをリロードします

BBSアプリにPostモデルが追加されています

投稿内容を確認します

  1. BBSのPostsリンクアンカーをクリックします
  2. Post object (1) リンクアンカーをクリックすると投稿内容が表示されます

投稿の新規追加、削除、変更ができます

us-east-7us-east-7

モデルを参照します

Django Shellを起動します

macTerminal
(venv) $ python manage.py shell
Python 3.7.4 (default, Aug 13 2019, 15:17:50) 
[Clang 4.0.1 (tags/RELEASE_401/final)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>
windowsPowershell
(venv) c:\dev\django\tutorial\webApp1>python manage.py shell
Python 3.9.5 (tags/v3.9.5:0a7dcbd, May  3 2021, 17:27:52) [MSC v.1928 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>

bbsアプリからPostモデルをインポートします

>>> from bbs.models import Post

投稿一覧を取得します

>>> Post.objects.all()
<QuerySet [<Post: Post object (1)>, <Post: Post object (2)>]>

一つ目の投稿を取得します

>>> Post.objects.all()[0]
<Post: Post object (1)>

投稿内容を全て取得します

  • forループを使って全ての投稿を取得します
>>> for post in Post.objects.all():
...     print(post.id, post.title, post.body, post.posted_at)
... 
1 最初の投稿 これは最初の投稿です 2021-05-09 15:04:36.356171+00:00
2 二つ目の投稿 Django管理サイトから［POSTを追加］ボタンを押してこの投稿をしました 2021-05-10 14:37:16.195718+00:00
3 今日は暑いですね 気温が２５°C以上の夏日だそうです。汗をかきそうです。 2021-05-11 14:22:19.378899+00:00
  • post.id：ユニークキーとしてDjangoにより自動採番されます

特定のデータを１つ取り出します

  • 引数でid番号を指定します
  • id番号は1から始まります
>>> post = Post.object.get(id=2)
Traceback (most recent call last):
  File "<console>", line 1, in <module>
AttributeError: type object 'Post' has no attribute 'object'
>>> post.title
'二つ目の投稿'
us-east-7us-east-7

モデルを作成、更新します

投稿内容を作成します

  • create()メソッドを利用して新規作成します
>>> Post.objects.create(title="4つ目の投稿", body="4つ目の投稿の本文です。")

投稿内容を更新します

  • save()メソッドを利用して投稿内容を取り出します
  • 取り出した投稿内容のプロパティに値を設定し、save()メソッドを利用してモデルに保管します
>>> post = Post.objects.get(id=3)
>>> post.title = "3つ目の投稿です"
>>> post.save()

作成、更新した投稿のタイトルを確認します

>>> for post in Post.objects.all():
...     print(post.title)
... 
最初の投稿
二つ目の投稿
3つ目の投稿です
4つ目の投稿
us-east-7us-east-7

投稿一覧ビューを作成します

ビューにpost_item_list()メソッドを実装します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/views.py
  • 実装コード
    • 最初から実装されているfrom django.shortcuts import renderは削除します
    • bbsアプリのmodelsオブジェクトからPostモデルをimportして利用します
    • TemplateResponse()メソッドの引数に以下を与えます
      • ブラウザからのresponseオブジェクト
      • テンプレートHTMLファイル名：post_item_list.html
      • 投稿内容一覧オブジェクト：テンプレートに渡されます
views.py
from django.template.response import TemplateResponse
from bbs.models import Post

def post_item_list(request):
  return TemplateResponse(
    request,
    "post_item_list.html",
    {"postList": Post.objects.all()}
  )

URLリストに登録します

  • 実装ファイルパス：django/tutorial/webApp1/webApp1/url.py
  • 実装コード
    • bbsアプリのviewsオブジェクトからpost_item_list()メソッドをインポートします
      • from bbs.views import post_item_listを追加します
    • urlpatternsにベースURL''が指定されたらpost_item_list()メソッドを呼び出すように指定します
    • ベースURL''にname引数でpost_item_listという名前をつけます
      • path('', post_item_list),を追加します
urls.py
from django.contrib import admin
from django.urls import path
from bbs.views import post_item_list

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', post_item_list, name="post_item_list"),
]
us-east-7us-east-7

投稿一覧テンプレートを作成します

templatesディレクトリをbbsアプリディレクトリの直下に新規作成します

  • ディレクトリ名は必ずtemplatesとする必要があります
macTerminal
(venv) $ mkdir bbs/templates
windowsPowershell
(venv) c:\dev\django\tutorial\webApp1>mkdir bbs/templates

テンプレートpost_item_list.htmlを実装します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/template/post_item_list.html
macTerminal
(venv) $ touch bbs/templates/post_item_list.html
windowsPowershell
(venv) >powershell New-Item bbs/templates/post_item_list.html
  • 実装コード
    • このテンプレートにはpostという名前のオブジェクトがTemplateResponse()メソッドの引数で渡されます
      • postオブジェクトのid、title、posted_atの各プロパティの値を画面に表示するように指定します
    • リンクアンカー<a>のリンク先URLにはurl.pyの配列urlpatterns内のpath()メソッドのname引数で与えられたルートURL'postitem/<int:item_id>/'の名前post_item_contents を指定します。URL中のitem_idにはpostオブジェクトのidプロパティを指定します
      • これで投稿内容画面に進むことができます
post_item_list.html
<h1>掲示板</h1>
<table>
  <tr><th>ID</th><th>タイトル</th><th>投稿日時</th></tr>
  {% for post in postList %}
    <tr>
      <td>{{ post.id }}</td>
      <td><a href="{% url 'post_item_contents'  post.id %}">{{ post.title }}</a></td>
      <td>{{ post.posted_at }}</td>
    </tr>
  {% endfor %}
</table>

ブラウザで動作を確認します

us-east-7us-east-7

投稿内容画面を作ります

URLを設計します

  • URL：/postitem/item_id番号/

URLを登録します

  • 実装ファイルパス：django/tutorial/webApp1/webApp1/url.py
  • 実装コード
    • bbsアプリのviewsオブジェクトからpost_item_list()とpost_item_contents()メソッドをインポートします
      • from bbs.views import post_item_list, post_item_contentsを追加します
    • urlpatternsに投稿内容画面のURLpostitem/<int:item_id>/が指定されたらpost_item_contents()メソッドを呼び出すように指定します
    • パスpostitem/<int:item_id>/にname引数で"post_item_contents"という名前をつけます
      • path('postitem/<int:item_id>', post_item_list, name="post_item_contents"),を追加します
url.py
・・省略・・
from bbs.views import post_item_list, post_item_contents

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', post_item_list, name="post_item_list"),
    path('postitem/<int:item_id>/', post_item_contents, name="post_item_contents"),
]

ビューにpost_item_contents()メソッドを実装します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/views.py
  • 実装コード
    • 引数としてブラウザからのresponseの他にID番号item_idをとります
    • 投稿内容をPost.objects.get(id=item_id)で取得します
      • item_idをget()メソッドの引数とします
    • TemplateResponse()メソッドの引数に以下を与えます
      • ブラウザからのresponseオブジェクト
      • テンプレートHTMLファイル名：post_item_contents.html
      • 投稿内容一覧オブジェクト：テンプレートに渡されます
views.py
・・省略・・
def post_item_contents(request, item_id):
  post = Post.objects.get(id=item_id)
  return TemplateResponse(
    request,
    "post_item_contents.html",
    {"post":  post}
  )
us-east-7us-east-7

投稿内容テンプレートを作成します

テンプレートpost_item_contents.htmlを実装します

  • 実装ファイルパス：django/tutorial/webApp1/bbs/template/post_item_contents.html
macTerminal
(venv) $ touch bbs/templates/post_item_contents.html
windowsPowershell
(venv) >powershell New-Item bbs/templates/post_item_contents.html
  • 実装コード
    • このテンプレートにはpostという名前のオブジェクトがTemplateResponse()メソッドの引数で渡されます
      • postオブジェクトのtitle、body、posted_at各プロパティの値を画面に表示するように指定します
    • リンクアンカー<a>のリンク先URLにはurl.pyの配列urlpatterns内のpath()メソッドのname引数で与えられたルートURL''の名前post_item_listを指定します
      • これで投稿一覧画面に戻ることができます
post_item_contents.html
<h1>{{ post.title }}</h1>

投稿日：{{ post.posted_at }}
<hr/>

{{ post.body }}

<hr/>
<a href="{% url 'post_item_list' %}">＜＝投稿一覧に戻る</a>

ブラウザで動作を確認します