【Django】Bootstrap4を使って リダイレクト先でメッセージを表示する

Djangoでデフォルトで用意されているmessages framework + Bootstrap4を使って、CRUD操作の際のリダイレクト先でメッセージを表示させる手順のメモです。

実行環境

環境はこちらです。

構成はこのようになります。今回、編集/追加するファイルのみ記載しています。

上記のディレクトリにダウンロードした、bootstrap.min.css と jquery-3.3.1.min.js を配置します。
https://getbootstrap.com/docs/4.1/getting-started/download/
https://jquery.com/download/

実装

次のコマンドでbootstrap4をインストールします。

Settings

settings.pyに’bootstrap4′, を追記します。’django.contrib.messages’はデフォルトで入っています。

mydir/myproject/settings.py

一時的なメッセージを保存するための、ストレージはデフォルトで’FallbackStorage’になっています。変更する場合は、以下のように、指定します。
本家ドキュメント参照

mydir/myproject/settings.py

Views

ビューにメソッド・メッセージを記述していきます。メッセージタグは’debug’, ‘info’, ‘success’, ‘warning’, ‘error’を指定できます。

mydir/blog/views.py

Templates

共通テンプレートで bootstrap4, css , js を読み込み、メッセージを表示する記述を加えます。

mydir/templates/base.html

jQueryで自動的に非表示にする

アラート・メッセージは表示し続けるより、さりげなく、フェードアウトさせる方がいい!という方は、jQueryのsetTimeout関数を使うと実現できます。今回はオプションをfadeOut(‘slow’)、タイミングは「3000」で3秒後としてみました。

CSSでスタイル調整

ブートストラップ感に飽きてきたら、CSSで上書きしましょう!大雑把ですが(汗)。

mydir/static/css/style.css

以上です!ご覧いただき、ありがとうございました!!😌


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。