DjangoでWebアプリ開発環境の構築（その②）

## はじめに
Webシステム開発をPythonでするために、新たにDjangoを学んでいる。
前回の記事では、インストールや起動の仕方など簡単なところをまとめたので、今回はその続きとして素材ファイルの配置やDB連携などについてまとめておく。

## 実行環境
【ローカルPC環境-OS】
　　・Windows 10 Pro　

【ソフト・パッケージ情報】
　　・Python3.9系 + Django3.2

## 手順

前提として、[**【DjangoでWebアプリ開発環境の構築（その①）】**](https://qiita.com/smiler5617/items/92564143097643751027)の記事より、以下を完了していること。

- 仮想環境を作成してDjangoをインストール
- Djangoの起動
- サンプルアプリの起動

本記事では、以下の使い方を整理する。
１．STATICファイルの配置
２．DB連携
３．管理者画面からのDB操作



### １．STATICファイルの配置
CSSやイメージファイルなどを配置しておく場所と、そのファイルなどの呼び出し方

#### 上位の【プロジェクト名】フォルダの直下に、以下の様にフォルダを作成し、適当なjpgファイルを格納

- manage.py
- 【プロジェクト名】フォルダ
- 【test_app】フォルダ 　※`python manage.py startapp` で作成した任意なアプリ名
- 【html_template】フォルダ
- 【static_files】 **← 今回作成したフォルダ**
    - 【images】 **← 今回作成したフォルダ**
        - sample_image.jpg　**← 今回適当に置いたファイル**

```py:[プロジェクト名]\settings.py
# 省略--------------------------

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMP_DIR = os.path.join(BASE_DIR, 'temp'))
STATIC_DIR = os.path.join(BASE_DIR, 'static_files'))     # 前回記事（その①）からの追記部分

# 省略---------------------------

STATIC_URL = '/static/'
STATICFILES_DIRS = [         # 前回記事（その①）からの追記部分
    STATIC_DIR,
]
```

#### アクセス確認
　python manage.py runserverでDjangoを起動後、ブラウザで以下のURLにアクセスして画像が表示されればOK。
　　・http://localhost:8000/static/images/sample_image.jpg

#### 試しにindex.htmlに埋め込み
`temp`フォルダの`index.html` に以下の様に追記。

```index.html
<!DOCTYPE html>
{% load static %}    <!-- 前回記事（その①）からの追記部分 -->
<html>
    <head>
        <meta charset="utf-8">
        <title>テストタイトル</title>
    </head>

    <body>
        <h1>見出し１</h1>
        {{ temp_str }}
        <br>
        <img src="{% static "images/sample_image.jpg" %}"  alt="イマージファイルが存在しません！">    <!-- 前回記事（その①）からの追記部分 -->

    </body>
</html>
```

#### アクセス確認
　python manage.py runserverでDjangoを起動後、ブラウザで以下のURLにアクセスして画像が表示されればOK。
　　・http://localhost:8000/
　　　※画像へのパスが間違っている場合、`alt`に設定の値が表示される。

CSSなどの場合も同様に、以下の流れでできる。
　・static_filesの直下にcssフォルダを作成
　・cssフォルダ内に適当なcssファイルを作成
　・`index.html` に以下の様な行を追記。
　　　`<link rel="stylesheet" href="{% static "css/【イメージファイル名】" %}">`


### ２．DB連携
DjangoでDBとの連携を試したい場合、デフォルトではPythonに標準で組み込まれているSQLiteが設定されている。
接続先DBを別のものに切り替える設定は後述するとして、SQLiteを使ったDB連携を試してみる。


#### `【アプリ名】/models.py`を編集する。
　※DBの設計を `models.py` で行っているイメージ。

```py:test_app/models.py
from django.db import models

# Create your models here.
class Member(models.Model):
    member_name = models.CharField(max_length=256, verbose_name="ユーザーリスト", unique=True)
    sex = models.CharField(max_length=1)

    def __str__(self):
        return self.member_name


class SiteAccessCount(models.Model):
    site = models.URLField(unique=True)
    count = models.IntegerField()
    date = models.DateField()

    def __str__(self):
        return str(self.date)    # DATE型なのでキャストしている。


class Bloginfo(models.Model):
    blog_id = models.IntegerField()
    blog_title = models.CharField(max_length=256)
    name = models.ForeignKey(Member, on_delete=models.CASCADE)
    url = models.ForeignKey(SiteAccessCount, on_delete=models.CASCADE)

    def __str__(self):
        return self.blog_title
```

SQLに置き換えて考えると、以下の様なイメージで良さそう。
　class　⇒　テーブル
　class内の変数　⇒　テーブル内のカラム定義
　class内のdef ＿str＿　⇒　テーブルを参照した時の返り値（別のテーブルから参照したい場合、分かりやすくなる）


Modelsの使い方はこちらの記事が参考になった。
　https://qiita.com/kotayanagi/items/3cfadae951c407ac044a


#### DBのマイグレーション

`python manage.py makemigrations temp_app` コマンドより、モデルの移行情報を作成する。　⇒　<【アプリ名】/migrations/> 内に作成される。

`python manage.py migrate` コマンドより、上記のモデル以降情報を元にDBモデルを構築する ⇒　初回の場合 `db.sqlite3` というファイルができる。ここにテーブル設定やデータが格納されていると想定。

　※djangoのマイグレーションについて補足
　　https://note.crohaco.net/2018/django-migration/
　　https://hodalog.com/how-to-reset-migrations/



#### adminサイトにDBモデルの登録

```py:test_app/admin.py
from django.contrib import admin

# 以下追記部分
from first_app.models import Member, SiteAccessCount, Bloginfo

# Register your models here.
admin.site.register(Member)
admin.site.register(SiteAccessCount)
admin.site.register(Bloginfo)
```


#### adminサイトに入るためのスーパーユーザー作成
`python manage.py createsuperuser`

その後、ユーザー名、Email、パスワードなどを対話式に設定する。


`python manage.py runserver` で再度起動した状態で、ブラウザで下記のURLに接続して認証を通過できればOK！
　・http://localhost:8000/admin 

![Qiita-no048_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/265d532e-5f7e-ec05-56ed-7415b6829c0a.jpeg)



### ３．管理者画面からのDB操作

管理者画面からテーブルをいじってみる。
試しに **Memberテーブル** にユーザーを追加してみる。
![Qiita-no048_img02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/8dc1165b-03ac-a507-0f12-ea881bd00bf3.jpeg)

![Qiita-no048_img03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/52b88e48-c399-2521-72af-cc83497e1bb4.jpeg)

![Qiita-no048_img04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/0cda1506-6e9c-1888-aab7-0bb486dd899e.jpeg)

上記の様な感じで、GUIベースで色々と操作ができる。

上の段の **Groups** と **Users** はDBのアカウントやグループ。
管理者画面に入れるアカウントを増やす場合などは、ここに追加する感じ。
![Qiita-no048_img05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/431d43a9-cfac-18ca-974f-a8c9a2f43689.jpeg)


## ＜おまけ＞ DB連携先の切り替え設定

今回の記事ではデフォルト設定のSQLiteを使ったが、連携先のDBを変える場合は、`setting.py`を以下の様に編集する。
　※下記の設定は、事前にローカルにPostgreSQLを入れてDBを作成している

```py:[プロジェクト名]\settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'DB_NAME',
        'USER': 'USER_NAME',
        'PASSWORD': 'PASSWORD',
        'HOST': 'localhost',
        'PORT': 'ポート番号',
    }
}
```

また、テストデータの作成に `Faker` というライブラリが便利そうなので、メモとして残しておく。
https://faker.readthedocs.io/en/master/