Progateで作ったWebアプリをDjangoで作ってみる！ Part3 -データベース編-

ProgateのNode.jsコースではお買い物リストアプリを作るのですが、これと全く同じものをDjangoで作ってみます。

Djangoでのアプリ開発の一連の流れを整理するために記していきます。

**目標物**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/f75ec259-afa7-615a-2e96-01db943e50f9.png)

HTMLとCSS、PNG形式画像は使い回しで、一部をDjango用のタグに変えます。

# 前回のおさらい

[Part1](https://qiita.com/insilicomab/items/5268d49867b0c24d96e9)
[Part2](https://qiita.com/insilicomab/items/bab360f4d1503034ddf5)

Part1では初期設定、Part2ではトップページの表示をしました。

今回はデータベースの設定をしていきます。

#models.py

Djangoでデータベースを扱うときに使うファイルは**models.py**です。**models.py**ファイルはデータベースを作るための設計図のようなイメージ。

**models.py**は、データにどんな名前をつけるか、どんなデータを入れるか、データ型をどうするかという情報を定義付けるためのファイルです。

モデル（データベーステーブル）の名前をclassとして定義します（☆1）。

今回は、買い物アイテムだけなので、``item``変数を文字列型（CharField）として登録します。文字列の最大長（max_length）を100とします（☆2）。

``__str__``の特殊メソッドで、``item``の文字列データでオブジェクトを表現します。これでどのデータかわかりやすくなります（☆3）。

```python:listapp/list/models.py
from django.db import models

class ListModel(models.Model): # ☆1
   item = models.CharField(max_length=100)  # ☆2

   def __str__(self):
       return self.item # ☆3
```

**models.py**ファイルの中身をデータベースに反映させるためにマイグレーションという作業をしていきます。

#マイグレーション

**models.py**ファイルの中身をデータベースに反映させるために``makemigrations``と``migrate``というコマンドを実行します。

まずは、``makemigrations``です。

``makemigrations``は、**models.py**ファイルで定義した内容をもとにデータベースの設計図のようなファイルを作成するコマンドです。

さっそく、実行してみましょう！

```terminal
python manage.py makemigrations
```

すると、以下のような実行結果となりました。``Create model ListModel``とありますが、これは**migration**というファイルが作成されたということを示しています。実際に、<font color="Tomato">**list**</font>アプリの中に、**migrations**フォルダが作成されています。

```console:実行結果
Migrations for 'list':
  list\migrations\0001_initial.py
    - Create model ListModel
```

``migrate``コマンドは``makemigrations``コマンドによって作成されたファイル内容をデータベースに反映させるためのコマンドです。実行してみましょう！

```console
python manage.py migrate
```

すべて、OKとなっているので、データベースへの反映が完了しました！

```console:実行結果
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, list, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying list.0001_initial... OK
  Applying sessions.0001_initial... OK
```

#admin.py

アプリで作ったデータベーステーブルを、このあと説明する管理画面に表示させるために**admin.py**というファイルを設定してきます。

**admin.py**ファイルにモデルを追加することで、管理画面でそのデータベースを認識させることができます。

```python:listapp/list/admin.py
from django.contrib import admin
from .models import ListModel

admin.site.register(ListModel)
```

#管理ツールを使う

Djangoでは管理画面でデータベースを操作することができます。

まずは、管理画面にログインするためのユーザー名とパスワードを登録していきます。以下のコマンドをターミナルで実行！

```console
python manage.py createsuperuser
```

するとユーザー名、メールアドレス、パスワードの入力が求められます。メールアドレスは入れなくてもいいです。``Bypass password validation and create user anyway? [y/N]:``と聞かれたら**y**（yes）を入力、実行しましょう！これでログインすることができます。

```console
Username (leave blank to use 'a'): mi
Email address:   
Password: xxx
Password (again):xxx
This password is too short. It must contain at least 8 characters.
This password is too common.
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.
```

``python manage.py runserver``をターミナルで実行して、「127.0.0.1:8000/admin」にアクセスして管理画面を表示させます。
ログインしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/7d53ab52-ad2e-b452-fe2e-95f52ad326e9.png)

ログインすると、作成したデータベース（List models）が反映されていました。「Add」をクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/ceae711e-2c46-b792-b394-c648b8d708a2.png)

そうすると「item」を入れることができるのがわかります。ためしに、**とまと**を入れて「SAVE」すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/0283d35b-e1cb-c2d6-f8b2-0c172b155322.png)

データベースに**とまと**が反映されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/675fe9d5-133f-0845-1215-c084094dc626.png)

他にも追加していくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/b76bb895-f3c7-9baf-4256-6ac6abac5e37.png)

Part4に続きます！

[Part4](https://qiita.com/insilicomab/items/a86b8d508687dbd7f712)