前回までのおさらい
本記事は、Djangoによるwebアプリを開発したときのメモです。
前回は、djangoの導入から起動まで実施。
今回の流れ
今回は、modelの作成とbootstrapの導入まで。
- modelの作成
- modelの画面表示
- formの作成
1. modelの作成
djangoは、modelを作成するとDBにテーブルが作成される。
そのため、model=データとなる。
今回は、名前と詳細情報を持つデータを作成する。
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から渡されるパラメータ。
{% for poll in polls %}
<li>{{ poll }}</li>
{% empty %}
Data is Empty!!
{% endfor %}
次に、viewの作成。データをDBから取得して、htmlのパラメータとして渡す。
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の作成。
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を指定します。
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(表示)で処理を分ける。
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ボタンを表示
<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に追加。
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を追加します。
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コンポーネントというので表示してみます。
<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は便利です。
おわり
次は、モーダルダイアログを作成します。