Djangoでウェブアプリ - データベースにしまってみる

Djangoを使ってウェブアプリを作ります
データベースにデータをしまってみます

- このページで作成されたDjango環境は[ここ](https://github.com/eggplnt/northernlights30)からダウンロード可能です

#1. 表を用意します
- `penguin`フォルダの`models.py`に下記を記述します

```python:penguin/models.py
from django.db import models

class Shohin(models.Model):
    hinmoku = models.CharField(max_length=20)
    hinmei  = models.CharField(max_length=100)
    zaiko  = models.IntegerField(default=0)
```

- `makemigrations`コマンドでコマンドを用意し、`migrate`コマンドで表を作成します

```
python manage.py makemigrations 
```

```
python manage.py migrate
```

- 下記のような出力で表が作成されたことが確認されます

```
(ve18) MacBook:northernlights tohru$ python manage.py makemigrations
Migrations for 'penguin':
  penguin/migrations/0001_initial.py
    - Create model Shohin
(ve18) MacBook:northernlights tohru$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, penguin, sessions
Running migrations:
  Applying penguin.0001_initial... OK
```

#2. Adminコンソールからアクセス可能にします

- `python manage.py createsuperuser`コマンドでadminユーザーを作成します。

```
(ve18) MacBook:northernlights tohru$ python manage.py createsuperuser
Username (leave blank to use 'tohru'): admin
Email address: mail@mail.com 
Password: 
Password (again): 
Superuser created successfully.
```

- `penguin`フォルダの`admin.py`に以下を記述します

```python:penguin/models.py
from django.contrib import admin

from penguin.models import Shohin

admin.site.register(Shohin)
```

- `python manage.py runserver`でDjnagoを起動します

- Adminコンソールからアクセスしてみます。ブラウザで`localhost:8000/admin` にアクセスし、用意したsuperuserのユーザーID／パスワードでアクセスします

<img width="877" alt="スクリーンショット 2018-09-05 14.50.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/c50c177d-ee1a-c5d1-4fd4-c8157ffd12a0.png">

- adminコンソールが開き、追加した`Shohin`表が表示されることを確認します

<img width="960" alt="スクリーンショット 2018-09-05 14.51.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/2c95b947-f00e-bb2d-1bf8-a80cedccd243.png">

- `Shohin`表をクリックし、画面右側の「追加」ボタンからエントリーを追加してみます
<img width="810" alt="スクリーンショット 2018-09-05 14.51.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/fd0808a0-c4d8-208e-8f6b-2c7120abfba0.png">

- `models.py`で用意した表の項目：`hinmoku`、`hinmei`、`zaiko`を入力し、「保存」を押します

<img width="808" alt="スクリーンショット 2018-09-05 14.51.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/60d34b5d-2bf6-39a0-eda4-cef43e7a28b4.png">

- `Shohin`表に新たに項目が追加されました

<img width="806" alt="スクリーンショット 2018-09-05 14.51.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/08c6133b-cded-44d4-dcbf-5fe1ba25a3cf.png">

- `Shohin`表に追加された項目をクリックし、先程入力された情報が保存されていることを確認します

<img width="806" alt="スクリーンショット 2018-09-05 14.51.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/8d8fae07-3c80-e930-b05b-55f4c81941cb.png">

#3. htmlで表示してみます

- データベースに保存された情報をhtmlで表示してみます
- `penguin`フォルダの`views.py`に下記を記述します。`Shohin`のインポートを追加するのを忘れないようにします

```python:penguin/views.py
from django.shortcuts import render
from .models import Shohin

def index(request):
    return render(request, 'index.html')

def query(request):
    queryset = Shohin.objects.all()
    context = {  "queryset":queryset }
    return render(request, 'query.html', context)
```

- 同様に`penguin`フォルダの`urls.py`に以下を追加します

```python:penguin/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('query', views.query, name='query'),
    path('', views.index, name='index'),
]
```

- `penguin`フォルダの`templates`サブフォルダに下記のような`query.html`を追加します

```html:penguin/templates/query.html
<html>
<table border="1">
  <thead>
    <tr>
      <th>品目</th>
      <th>品名</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    {% for context in queryset %}
      <tr>
        <td>{{ context.hinmoku }}</td>
        <td>{{ context.hinmei }}</td>
        <td>{{ context.zaiko }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>
</html>
```

- ブラウザを開き、`localhost:8000/query`へアクセスしてデータベースからの情報が表示されることを確認します

<img width="316" alt="スクリーンショット 2018-09-05 15.00.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/29fc45e6-bb5a-95ca-89f8-fcbdaaca94d3.png">