今回も前回の続きで、くじ引きアプリを作成していきます。
【前回のまとめ】
・くじ引きの一覧サイト作成
・サンプルデータをサイトに表示
【今回の作業】
・共通テンプレートの作成
・新規登録画面と編集画面の作成
今回は、Bootstrapを使って共通テンプレートを作成しようと思います。
設定は今までの差分を利用しますので、初めから設定したい方は以下マガジンを参照してください。
・共通テンプレートの作成
【手順】
１．base.htmlを作成する
共通テンプレートのbase.htmlを作成します。
ファイル：myapptdl>tdl>templates>tdl>base.html
コード：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<style>body {padding-top:80px;}</style>
<title>くじ引き</title>
</head>
<body>
<nav class='navbar navbar-expand -sm navbar-dark bg-dark fixed-top'>
<a class='navbar-brand' href='{% url "tdl:index" %}'>くじ引き</a>
</nav>
<div class='container'>
{% block content %}
{% endblock %}
</div>
</body>
</html>
このコードでは、Bootstrapを使ってサイトの上部にナビゲーションバーを設置するようにしています。
ナビゲーションバーには、「くじ引き」というリンクを設置して、クリックすると前回作成した一覧ページに遷移させます。
「meta name=’viewport’」の部分は、レスポンシブWebデザインの設定になります。
レスポンシブとは、Web画面を小さくしくしたり大きくした場合に自動で最適な場所に配置してくれる機能のことです。
２．一覧用テンプレートを修正する
共通テンプレートを利用するため、一覧テンプレートを修正します。
ファイル：myapptdl>tdl>templates>tdl>tdl_list.html
コード：
{% extends './base.html' %}
{% block content %}
<h1>くじ引き内容</h1>
{% for tdl in object_list%}
<p> {{ tdl.item }}</p>
{% endfor %}
{% endblock %}
共通部分を削除して、以下のコードに変更します。
{% extends ‘./base.html’ %}
{% block content %}一覧ページで個別に表示する内容
{% endblock %}
以上で共通テンプレートの作成は終わりです。
問題なく動作している場合は以下のような画面になります。
続いて、新規作成画面と編集画面を作成していきます。
・新規登録画面と編集画面の作成
新規登録画面と編集画面も、クラスベース汎用ビューを利用してプログラムを作成していきます。
【手順】
１．urls.pyにルーティングを追加する
ファイル：myapptdl>tdl>urls.py
コード：
from django.urls import path
from . import views
app_name = 'lunchmap'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
path('create/', views.CreateView.as_view(), name='create'), #追加
path('<int:pk>/update/', views.UpdateView.as_view(), name='update'), #追加
]
このコードでは、pathに「create/」がある場合、views.pyのCreateViewクラスを呼び出し、pathに「id/update/」がある場合、UpdateViewクラスを呼び出すようにしています。
以上でルーティングの設定は終わりです。
続いてviews.pyにCreateViewとUpdateViewを記述します。
２．views.pyにCreateViewとUpdateViewを追加する
ファイル：myapptdl>tdl>views.py
コード：
from django.urls import reverse_lazy from django.views import generic from .models import Tdl class IndexView(generic.ListView): model = Tdl class CreateView(generic.edit.CreateView): model = Tdl fields = '__all__' class UpdateView(generic.edit.UpdateView): model = Tdl fields = '__all__'
このコードでは、クラスベース汎用ビューを使って、CreateViewクラスとUpdateViewクラスを追加しています。
この２つのクラスを設定した場合のテンプレートを呼び出すときのデフォルト名は「<app name>/<model name>_form.html 」共通になります。
今回のアプリだと「tdl/tdl_form.html」です。
fields = ‘__all__’とは、モデル内の全てのフィールドを使うための書き方になります。
クラスの登録が終わったので、次はテンプレートを作成します。
ちなみに2つとも同じ画面を利用します。
３．CreateViewとUpdateViewのテンプレートを作成
テンプレートを作成するため、以下のファイルを作成します。
ファイル：myapptdl>tdl>templates>tdl>tdl_form.html
コード：
{% extends './base.html' %}
{% block content %}
<h1>くじ引きの情報{{ object|yesno:'更新,作成' }}</h1>
<form action ='' method='post'>{% csrf_token %}
{{ form.as_p }}
<button type='submit' class='submit'>{{ object|yesno:'更新,作成'}}</button>
</form>
<div>
<a href='JavaScript:history.back()'>戻る</a>
</div>
{% endblock %}
このコードでは、 if文（object | yesno:’更新,作成’）を使って、objectに何かデータが入っている場合は更新を表示し、入っていない場合は作成を表示するようにしています。
その後、フォームで {{ form.as_p }}を呼び出し、またif文で更新と作成いずれかのボタンを表示させるようにしています。
{{ form.as_p }}とはformの内容をpタグで囲って表示するという意味だそうです。
これで設定は終わりなので、サーバを起動して確認します。
cd myapp python manage.py runserver
次のURLにブラウザでアクセスします。
一覧表示後、URLの後ろに「create」を入力します。
新規登録画面が表示されました。
続いては「1/update」を入力してみます。
情報の更新画面が表示されました。
以上で今回の目的である新規作成と編集画面を作成することができました。
本日はここまでです。
次回は一覧画面から新規作成と編集画面に遷移できるようにしたいと思います。
ありがとうございました。
【参考にしたサイトと本】
コメント