djangoでwebサービス開発２

# 前回までのおさらい
本記事は、Djangoによるwebアプリを開発したときのメモです。
前回は、djangoの導入から起動まで実施。

## 今回の流れ
今回は、modelの作成とbootstrapの導入まで。

1. modelの作成
2. modelの画面表示
3. formの作成


## 1. modelの作成
djangoは、modelを作成するとDBにテーブルが作成される。
そのため、model=データとなる。
今回は、名前と詳細情報を持つデータを作成する。

```polls/models.py
from django.db import models

class Poll(models.Model):
    name = models.CharField('名前', max_length=255)
    description = models.TextField('詳細', max_length=1026, blank=True)

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

models.py作成後、以下コマンドを実行するこでDBにテーブルが作成される。

```
$python manage.py makemigrations
$python manage.py migrate
```

## 2. modelの画面表示
modelを作成したので、画面に表示してみる。
画面に表示するには、以下を作成する。

 - htmlファイル :arrow_right: 画面表示のhtmlファイル。view.pyから呼ばれる。
 - view.py　　　:arrow_right: サーバ処理部分。url.pyから呼ばれる。
 - url.py　　　　:arrow_right: urlで処理の振り分けを行う。

まずは、htmlの作成。表示だけ。pollsはviewから渡されるパラメータ。

```polls/templates/polls/poll_list.html
{% for poll in polls %}
   <li>{{ poll }}</li>
{% empty %}
  Data is Empty!!
{% endfor %}
```

次に、viewの作成。データをDBから取得して、htmlのパラメータとして渡す。

```mysite/polls/views.py
from django.shortcuts import render
from .models import Poll

def poll_list(request):
    polls = Poll.objects.filter().order_by('id')
    return render(request,
                  'polls/poll_list.html',
                  {'polls': polls}
                  )
```

最後に、viewを呼び出す、urlの作成。

```polls/urls.py
from django.urls import path
from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.poll_list, name='poll_list'),
]
```

 ここで、開発用サーバを起動して画面確認。

$ python manage.py runserver
ブラウザで「http://localhost:8000/polls/ 」にアクセスして、以下が表示すれば成功。今は、データがないのでEmptyが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662753/572eba85-e866-abfd-f494-e488c6576654.png)

## 3. formの作成
modelを表示する画面を作成したが、まだデータがないため登録画面を作成する。
登録画面の作成は、以下が必要となる。

 - htmlファイル :arrow_right: 登録用画面のhtmlファイル。
 - view.py　　　:arrow_right: サーバ処理部分。url.pyから呼ばれる。
 - url.py　　　　:arrow_right: urlで処理の振り分けを行う。
 - from.py　　　:arrow_right: 画面入力するフォームの項目を設定。

まずは、From。
modelにPollを指定します。

```polls/forms.py
from django.forms import ModelForm
from django import forms
from .models import Poll

class PollForm(ModelForm):

    class Meta:
        model = Poll
        fields = ('name', 'description')
        widgets = {
            'description': forms.Textarea(attrs={'cols': 25, 'rows': 4})
        }
```

次にview。
RequestがPOST(登録)かGET(表示)で処理を分ける。


```polls/views.py
def poll_add(request):

    if request.method == 'POST':
        # POST された request データからフォームを作成
        form = PollForm(request.POST, instance=Poll())
        if form.is_valid():  # フォームのバリデーション
            poll = form.save(commit=False)
            poll.user_id = request.user.id
            poll.save()

            return redirect('polls:poll_list')

    else:  # GET の時
        form = PollForm(instance=Poll())  # poll インスタンスからフォームを作成

    return render(request, 'polls/poll_add.html', {'form':form})
```

次にhtml。
formの表示とSubmitボタンを表示

```polls/templates/polls/poll_add.html
<html>
<body>
<h1>書き込みフォーム</h1>
<form action="" method="post">
  {% csrf_token %}
  <table>{{form.as_table}}</table>
  <tr><td colspan='2'><input type="submit" value="Submit"></td></tr>
</form>
</body>
</html>
```

最後のurl。
addをURLに追加。

```polls/urls.py
from django.urls import path
from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.poll_list, name='poll_list'),   
    path('add/', views.poll_add, name='poll_add'), # 追加
]
```

開発用サーバを起動して画面確認。

```
$ python manage.py runserver
```

ブラウザで「http://localhost:8000/polls/add/ 」にアクセスすると以下の登録画面が表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662753/e41d14e1-60bf-31b5-7d4c-82413df3bdeb.png)

名前にテストと入力して、Submitボタンを押すとDBに登録され、データが表示されれば成功。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662753/bce11888-1473-eea7-0004-3e59080dfe13.png)


## 4. bootstrapの導入
簡単な画面表示までできたので、bootstrapを導入し画面をきれいにします。

 - bootstrap :arrow_right: Webパーツや各レイアウトのデザインを整える機能をもったCSSフレームワーク。

詳細は以下の公式ドキュメントを参照してください
 　[bootstrapドキュメント](https://getbootstrap.jp/docs/4.5/getting-started/introduction/)

まず、pipコマンドでbootstrapをインストールします。

```
$ pip install django-bootstrap4
```

```
$ pip show django-bootstrap4
Name: django-bootstrap4
Version: 2.1.1
```

setting.pyにbootstrapを追加します。

```mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'polls',
    'bootstrap4',  # 追加
]
```

poll_list.htmlを修正して、bootstrapのcardコンポーネントというので表示してみます。


```polls/templates/polls/poll_list.html
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
    {% for poll in polls %}
    <div class="row mt-2">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    {{ poll.name }}
                </div>
                <div class="card-body">
                    <p class="card-text">{{ poll.description }}</p>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    Data is Empty!!
    {% endfor %}
</div>
</body>
</html>
```

修正後、開発用サーバを起動し、ブラウザで「http://localhost:8000/polls/ 」にアクセスするとデータがカード表示されればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662753/4f1d1aa8-0336-ade0-1406-021bb1706c09.png)

レスポンシブな画面も簡単に作成できるので、bootstrapは便利です。

## おわり
次は、モーダルダイアログを作成します。