Djangoでくじ引きアプリを作ってみる_part6

前回の続きで、くじ引きアプリを作成していきます。

【前回のまとめ】

・削除ページを作成する

【今回の作業】

・くじ引き実行ページを作成する

今回は、くじ引きの内容の中から一つだけ表示するための実行ページを作成したいと思います。

設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。

Djangoでくじ引きアプリを作ってみる_part1

Djangoでくじ引きアプリを作ってみる_part2

Djangoでくじ引きアプリを作ってみる_part3

Djangoでくじ引きアプリを作ってみる_part4

Djangoでくじ引きアプリを作ってみる_part5

・くじ引き実行ページを作成する

【手順】

１．urls.pyを修正する

まずは実行ページ用のルーティングを作成します。

ファイル：myapptdl>tdl>url.py

コード：

from django.urls import path
from . import views

app_name = 'tdl'

urlpatterns = [
  path('', views.IndexView.as_view(), name='index'),
  path('execution/', views.ExecutionView.as_view(), name='execution'),　#追加
  path('create/', views.CreateView.as_view(), name='create'),
  path('<int:pk>/update/', views.UpdateView.as_view(), name='update'),
  path('<int:pk>/delete/', views.DeleteView.as_view(), name='delete'),
]

urlpatternsに実行用のpathを作成しました。
これは、URLに「execution」が指定された場合、views.pyの「ExecutionView」クラス呼び出します。

２．views.pyを修正する

続いて、ExecutionViewクラスを作成します。

ファイル：myapptdl>tdl>views.py

コード：

from django.urls import reverse_lazy
from django.views import generic
from .models import Tdl
import random　#追加

class IndexView(generic.ListView):
   model = Tdl

---ここから追加---
class ExecutionView(generic.ListView):
  model = Tdl
  template_name = 'tdl/tdl_execution.html'

  def get_queryset(self):
#    return Tdl.objects.order_by('?')[:1]
    pk = Tdl.objects.values_list('pk', flat=True)
    pk_list = list(pk)
    pk_random = random.choice(pk_list)
    queryset = Tdl.objects.filter(pk=pk_random)

    return queryset

---ここまで---
class CreateView(generic.edit.CreateView):
  model = Tdl
  fields = '__all__'

class UpdateView(generic.edit.UpdateView):
  model = Tdl
  fields = '__all__'

class DeleteView(generic.edit.DeleteView):
  model = Tdl
  success_url = reverse_lazy('tdl:index')

まずは、ランダムでデータを取り出すため、randomモジュールをインポートします。

そして新たに ExecutionViewクラスを追加しています。

クラスの中身は

‘tdl/tdl_execution.html’：テンプレート名
# return Tdl.objects.order_by(‘?’)[:1]：ランダムでデータを取り出す方法その１です。今回はこちらは使っていません。

pk = Tdl.objects.values_list(‘pk’, flat=True) ：Djangoのクエリーをリスト形式で取得します。
https://dot-blog.jp/news/django-queryset-values-list/

pk_list = list(pk)：取得したリストを変数へ保存しています。
pk_random = random.choice(pk_list) ：ランダム関数で1つ取り出しています。
queryset = Tdl.objects.filter(pk=pk_random) ：ランダムで取り出した値をオブジェクトとして取り出しています。

３．tdl_execution.htmlを作成する

まずは、テンプレートを新規作成します。

ファイル：myapptdl>tdl>templates>tdl>tdl_execution.html

コード：

{% extends './base.html' %}
{% block content %}
     <h1>くじ引き結果</h1>

    <table class='table table-striped table-hover'>
        <tr>
            <th>内容</th>
        </tr>
        {% for tdl in object_list%}
        <tr>
            <td> {{ tdl.item }}</td>
        </tr>
        {% endfor %}
    </table>

    <div>
      <a href='JavaScript:history.back()'>戻る</a>
    </div>

{% endblock %}

実行ページでは、データベースから取り出した内容を表示しているだけです。

４．tdl_list.htmlを修正する

最後に一覧画面に実行ボタンを作成します。

ファイル：myapptdl>tdl>templates>tdl>tdl_list.html

コード：

{% extends './base.html' %}
{% block content %}
       <h1>くじ引き内容</h1>

<table class='table table-striped table-hover'>
    <tr>
        <th>内容</th><th>編集</th><th>削除</th>
    </tr>
    {% for tdl in object_list%}
    <tr>
        <td> {{ tdl.item }}</td>
        <td> <a href='{% url "tdl:update" tdl.id %}'>編集</a> </td>
        <td> <a href='{% url "tdl:delete" tdl.id %}'>削除</a> </td>
    </tr>
    {% endfor %}
</table>

    <div>
        <a href='{% url "tdl:create" %}' class="btn btn-primary">新規作成</a>　#修正
        <a href='{% url "tdl:execution" %}' class="btn btn-secondary">実行</a>　#追加
    </div>
{% endblock %}

新規作成リンクだとちょっと寂しいので、ボタンに変更します。
その下に、実行ボタンを作成します。

以上で設定は終わりなので、サーバを起動して確認します。

cd myapp 
python manage.py runserver

次のURLにブラウザでアクセスします。

http://localhost:8000/

一覧表示画面を確認すると、新規作成ボタンの右側に実行ボタンが表示されています。

実行ボタンを押してみると、一つだけデータが表示されます。

今回は動画を作成しましたのでそちらをご覧ください。

以上で今回の目的である削除画面を作成することができました。

本日はここまでです。

ありがとうございました。