Djangoのform機能を使ってBMI測定機を作成。我が体重への自戒を込めて。

どうも**jack**です。
８月からPythonをメインにエンジニア業務に従事することになりまして。
諸事情により12月までに7キロの減量を目標に生きてる駆け出しエンジニアです。
今回は表題の通りDjangoのform機能を使ってBMI測定を行います。

ちなみに私の開発環境は以下となっています。

- Python 3.6.7
- Django 2.2.3
- macOS

では、早速。

```console
django-admin startproject qiita
```

をターミナルにて実行してアプリを作成！

```console
cd qiita
```

作成したディレクトリへ移動。

```console
python3 manage.py startapp bmi
```

上記にてbmiアプリを作成。

qiitaディレクトリにあるsettings.pyのINSTALLED_APPSにbmiを追記。

```python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bmi',
```

qiitaディレクトリにあるurls.pyの編集を行います。

```python:urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('bmi/', include('bmi.urls')),
]
```

合わせてbmiディレクトリにurls.pyのファイルを作成しておきましょう。
urls.pyの編集は後ほど。

```:qiitaディレクトリ
├── qiita
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── bmi
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py ←これ
│   └── views.py
└── manage.py
```

今回のbmiの計算に必要な数値は身長と体重の２つ。
この2つの値をformで受け取る為にまずはbmiディレクトリにforms.pyを作成。

```:qiitaディレクトリ
├── qiita
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── bmi
│   ├── migrations  
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py ←これ
│   ├── models.py
│   ├── tests.py
│   ├── urls.py 
│   └── views.py
└── manage.py
```
んで持ってこのforms.pyを編集します。

```python:forms.py
from django import forms

class BmiForm(forms.Form):
    weight = forms.IntegerField(label='weight')
    height = forms.IntegerField(label = 'height')
```

ではこの作成したformをviewにて関数を定義していきます。

```python:views.py
from django.shortcuts import render
from .forms import BmiForm 
# Create your views here.
def bmi(request):
    params = {
    'title' :'BMI',
    'msg': 'enter your score',
    'form': BmiForm()
    }

    if (request.method=='POST'):
        msg = int(request.POST['weight']) / (int(request.POST['height'])/100 )**2
        params['msg'] = '{:.2f}'.format(msg)
        params['form'] = BmiForm(request.POST)

    return render(request, 'bmi/bmi.html', params)

```
paramsの部分は後ほど作成するhtmlに値を渡すための部分になります。

入力フォームを埋め込むhtmlを格納するtemplatesディレクトリを作成します。

```:qiitaディレクトリ
├── qiita
│   ├── __pycache__ 
│   ├── _init_.py
│   ├── setting.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── bmi
│   ├── migrations  
│   ├── templates
│   │      └── bmi
│   │           └── bmi.html ←ここ
│   ├── _init_.py  
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py 
│   ├── models.py
│   ├── tests.py
│   ├── urls.py 
│   └── views.py
└── manage.py
```

そしてbmi.htmlを書いていきます。

```html:bmi.html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
  </head>
  <body>
    <h1>{{title}}</h1>
    <p>{{msg}}</p>
    <table>
      <form action="{% url 'bmi' %}" method="post">
        {% csrf_token %}
        {{form}}
        <tr>
          <td></td><td><input type="submit" name="" value="send"></td>
        </tr>
      </form>
    </table>

  </body>
</html>
```

最後にurls.pyを編集して終了です。

```python:urls.py
from django.urls import path, include
from . import views

urlpatterns = [
   path('', views.bmi, name='bmi'),
   ]

```

ターミナルを起動させてローカルサーバーを立ち上げましょう。

```console
python3 manage.py runserver
```

<img width="462" alt="スクリーンショット 2019-08-20 13.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/4b8db3c3-56b4-afcd-06f1-0e0f897344e6.png">

こういった表示が出れば完成です！！

実際に入力すると、、、

<img width="432" alt="スクリーンショット 2019-08-20 13.27.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/a4f2bc17-6753-c7b3-962c-926974be011e.png">


でたーーーーー！！！！
ちなみに標準は22らしいです。泣

ではさよならさよならさよなら。