Djangoでくじ引きアプリを作ってみる_part4 | 30代未経験ネットワークエンジニアのblog

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

【前回のまとめ】

・共通テンプレートの作成
・新規登録画面と編集画面の作成

【今回の作業】

・一覧画面から新規作成画面へ遷移させる
・一覧画面から編集へ遷移させる

今回は、一覧画面から新規作成画面と編集画面に遷移できるようにしたいと思います。

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

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

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

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

・一覧画面から新規作成画面へ遷移させる

【手順】

１．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>
    </tr>
    {% for tdl in object_list%}
    <tr>
        <td> {{ tdl.item }}</td>
    </tr>
    {% endfor %}</table>

    <div>
        <a href='{% url "tdl:create" %}'>新規作成</a>
    </div>
{% endblock %}

このコードでは、新規作成のリンクを作成してリンク先をcreateページにしています。

修正は完了ですが、このまま新規作成を動作させると以下のような「No URL to redirect to・・・」エラーが発生します。

このエラーは処理を終わらせた後にどのURLに戻ればいいかが分からないと言っています。

エラーを解消するために、models.pyに新規作成画面を更新した後のリダイレクト先の設定をします。

２．models.pyを修正する

共通テンプレートを利用するため、一覧テンプレートを修正します。

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

コード：

from django.db import models
from django.urls import reverse　#追加

class Tdl(models.Model):
    item = models.CharField(max_length=200)
    author = models.ForeignKey(
        'auth.User',
        on_delete=models.CASCADE,
    )

    def __str__(self):
        return self.item

#以下を追加
    def get_absolute_url(self):
       return reverse('tdl:index')

このコードでは、reverse関数「 return reverse(‘tdl:index’)」を使うことによって、ビューの名前からリダイレクト先の名前を調べることができるようになります。

問題なく動作している場合は以下のような画面になります。

続いて、編集画面を作成していきます。

・一覧画面から編集画面へ遷移させる

【手順】

１．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>
    </tr>
    {% for tdl in object_list%}
    <tr>
        <td> {{ tdl.item }}</td>
        <td> <a href='{% url "tdl:update" tdl.id %}'>編集</a> </td>　#追加
    </tr>
    {% endfor %}
</table>

    <div>
        <a href='{% url "tdl:create" %}'>新規作成</a>
    </div>
{% endblock %}

編集リンクを作成して、クリックした場合「update」へ遷移します。

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