前回までのおさらい

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

今回の流れ

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

modelの作成
modelの画面表示
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ファイル画面表示のhtmlファイル。view.pyから呼ばれる。
view.py　　　サーバ処理部分。url.pyから呼ばれる。
url.py　　　　 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が表示される。

3. formの作成

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

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

まずは、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/ 」にアクセスすると以下の登録画面が表示される。

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

4. bootstrapの導入

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

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

詳細は以下の公式ドキュメントを参照してください
　bootstrapドキュメント

まず、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です。

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

おわり

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

djangoでwebサービス開発２