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

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

【前回のまとめ】

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

【今回の作業】

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

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

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

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」へ遷移します。

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

cd myapp 
python manage.py runserver

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

http://localhost:8000/

一覧表示画面を確認すると、新規作成リンクと編集リンクが表示されています。

新規作成リンクを押すと、「create」画面へ遷移します。
以下を入力して作成します。

Item:サンプル２
Author：admin

一覧画面へ遷移して、サンプル２が登録されました。
続いて、サンプル2の編集リンクをクリックします。

「update」画面へ遷移しました。
Itemをサンプル３変更して更新します。

また一覧画面へ遷移して内容も問題なく修正されています。

以上で今回の目的である新規作成リンクと編集リンクを作成することができました。

本日はここまでです。

次回はデータを削除できるようにしたいと思います。

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

【参考にしたサイトと本】

09:投稿フォームの保存機能を作ろう

Python Django3超入門 (日本語) 単行本 – 2020/6/13