【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

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

【Django】「No URL to redirect to. Either provide a url or define a get_absolute_url method on the Model.」の対処

エラー内容

Djangoの CRUD ジェネリックビュー を使っていて、Createをした時に、次のようなエラーがでました!

対処法

リダイレクト先のURLがないとのこと。。。エラーメッセージそのままですが、 get_absolute_url メソッドをモデルに設定するのを忘れていました!
本家ドキュメント参照

myapp/models.py

これで、Createアクション後にdetailパスにリダイレクトするようになりました!
idのないindexなどに飛ばす場合は return reverse(‘blog:index’) でOKです。

その他関連ファイルです。

myapp/urls.py

myapp/views.py

以上です!どなたかの参考になれば、幸いです!😊

【Django入門】Hello Worldの表示と、Templateでhtmlページの表示

前回の 【 Django入門】venv(仮想環境)でプロジェクトを立ち上げて GitHubにpushするまでの続きとして、ビューでHello Worldの表示と、Templateを使って、htmlページを表示するまでのメモです。

バージョンはこちらです

前回まででは次のような構成になっています。

Hellow, World!するまで

d-projectに移動して、仮想環境をアクティブにします。 (ここではmyvenv)

d-project/配下に、myappという名前でアプリを作成します。

myapp/views.pyにHTTPレスポンスで”Hello, World!”を返すように記述します。

myapp/views.py

myapp/配下にurls.py を作成して、views.indexと紐づかせて、ルートurlで表示させます。

myapp/urls.py

mysite/urls.pyも以下のように、編集します。

mysite/urls.py

INSTALLED_APPSに’myapp’を追加します。

mysite/settings.py

これで http://127.0.0.1:8000 にアクセスして、”Hello, World!”が表示されたら成功です!

テンプレートでhtmlページの表示

これまでのファイルにいくつかの記述を追加していきます。myapp/urls.pyにはviews.indexでtemplateを呼ぶようにurlに記述します。

myapp/urls.py

mySite/settings.pyに以下の1行を追加して、templatesのpathを指定します。

mysite/settings.py

d-project/配下に、templatesディレクトリを作成して、その中に共通して使用する親テンプレートとなるmain.htmlを作成して、以下のように記述します。
「{% block ブロック名 %}」と「{% endblock %}」で囲まれた部分は子テンプレートを継承します。

templates/main.html

templates/index.htmlを以下のように作成します。「{% extends “親テンプレート名” %}」で継承します。

templates/index.html

myapp/views.pyの以下の箇所を追記します。

myapp/views.py

これで http://127.0.0.1:8000 にアクセスして、”welcome template!”が表示されたら成功です!

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

【 Django入門】venv(仮想環境)でプロジェクトを立ち上げて GitHubにpushするまで

Pythonのwebフレームワークである、Djangoを Mac + venv(仮想環境) で、ローカル環境に立ち上げて、GitHubにpushするまでをメモしました。

Pythonのバージョン

MacOSの場合、デフォルトでPython2系がインストールされているかと思います。バージョンを確認する場合、ターミナルで以下のコマンドを実行します。

最新のバージョンをインストールする場合は、Python公式サイトよりダウンロードして、インストールしてください。(2018.10.24現在はPython 3.7.1)

venv(仮想環境)の作成

適当なディレクトリ(ここではd-project)を作って、そこに移動します。

python3のバージョンを指定して、次のコマンドで、venv(仮想環境)を作成します。(ここではmyvenv)venvはPython3.3 から標準で取り込まれています。

仮想環境をアクティブにします。

アクティブモードから抜けるときは $ deactivate です。

Djangoのインストール

Djangoのインストールには、pip(ピップ)というPythonのパッケージを管理するツールを使用します。Macはデフォルトでpipが導入されていて、 $ pip -V コマンドで確認ができます。まずはpipを最新バージョンにします。venv内ではpythonのバージョン指定は不要です。

次のコマンドを実行すると、最新のバージョンのDjangoがインストールされます。Django公式サイトにてlatest official versionが確認できます。

次のコマンドはpipで管理しているパッケージの確認ができます。

Djangoプロジェクトを作成

それでは次のコマンドでプロジェクト(ここではmysite)を作成します。コマンドの最後にピリオド . を忘れないように。これは、現在の作業ディレクトリにDjangoをインストールするということを示しています。

プロジェクトを起動する前に、myite/settings.pyに言語とタイムゾーンを日本に設定しておきます。

mysite/settings.py

次のコマンドを実行して、データベースを作成します。

サーバーの起動

次のコマンドでローカルサーバーの起動をします。

http://127.0.0.1:8000/ にアクセスして、次のような画面が表示されたら、成功です!ちなみに、サーバーの停止はショートカットで Control + C です。

GitHubへpush

GitHubのアカウントを取得していない場合はGitHubページから、アカウント登録をします。

ルート・ディレクトリで次のコマンドを打ち、Gitリポジトリの新規作成、または既存のGitリポジトリの再初期化を行います。

Gitはすべてのファイルの変更履歴を管理しますが、管理対象に含めたくないファイルは .gitignore をルート・ディレクトリに作成して管理します。内容は以下の通りとしました。

.gitignore

次のコマンドで、カレントディレクトリ(自分の今いるディレクトリ)以下の全てのファイルをステージングエリアに追加します。「.」がカレントディレクトリを示します。

「-m」フラグで、コミットメッセージをつけて変更をコミット(保存)します。

※「git add .」 と 「git commit -m」 を 一度に行う場合は「git commit -a -m “コミットメッセージ”」です。

GitHubページで New repository を作成しておき、次のコマンドでリモートリポジトリを追加します。

そして、次のコマンドで、ローカルリポジトリを、リモートリポジトリにプッシュ(同期)します。

Username と Password を聞かれるのでGitHubのアカウント設定のものを入力します。

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

続編として、【Django入門】Hello Worldの表示と、Templateでhtmlページの表示も合わせて、ご覧ください!

PythonをAtomエディタのatom-runnerで実行する

本記事ではPythonの実行環境をAtomエディタとそのパッケージの「atom-runner」を使って簡単に構築する手順を載せております。

実行環境はこちらです。

MacOSの場合

MacOSの場合、デフォルトでPython2.7系がインストールされていて、直接実行することも可能です。実際にインストールされているかを確認するためには、「ターミナル」を使用すると簡単にできます。
ターミナルは、「アプリケーションフォルダ」内の「ユーティリティフォルダ」にインストールされています。
検索からターミナルを探す場合、ショートカットのCommand +スペースバーで、「Spotlight」を開いて、「terminal.app」と入力すると出てきますので、アプリを起動します。

ターミナルで以下のコマンドを実行すると、インストールされているバージョンが表示されます。

whichコマンドで、どこにインストールされているかパスがわかります。

最新版のPythonをインストール

デフォルトのバージョンではなく、最新版をインストールしたい場合の手順です。
※MacPortsやbrew等のパッケージ管理ソフトで、インストールしたい方は対象外です。

Python公式サイトより、Download Python 3.7.0(2018.10.5現在)をクリックして、インストーラーをダウンロードします。

インストーラーを開き、規約に同意してインストールします。

インストールを終えると、アプリケーションフォルダに「Python 3.7」が追加されます。フォルダ内の「Python Launcher」はPythonをファイルから実行するために必要なアプリで、「IDLE」はPythonの統合開発環境です。今回は使用しませんが、起動する場合、ターミナルから$ idle3コマンドでもIDLEが立ち上がります。

Atomのダウンロード

公式サイトからAtomをDownloadします。

atom-runnerのインストール

Welcome Guideの「Install a Package」をクリックしてから、「Open Installer」をクリックします。


出てきたSettingsの「Install Packages」のテキストボックスからatom-runnerを入力し、出てきた該当のパッケージを「Install」します。

また、Atomの言語を日本語に設定したい場合は、「japanese-menu」のパッケージをインストールしてください。

Pythonの実行

「untitle」のタブを選択し、Pythonでコードを記述し、拡張子が.pyのPythonファイルを作成します。atom-runnerの実行はMacOSの場合、Control + rです。すると、該当ファイルの実行結果が表示されます。

現状では、デフォルトのバージョンのPython2系が適用されているかと思いますので、上記でインストールしたPython3を適用する場合は、「Atom」 => 「Config」 と進み、「config.cson」というファイルに追記します。

Python3を指定した、以下の記述をconfig.csonに追記して保存します。

以下のコードを実行すると、変更されたバージョンの確認ができます。

ちなみにatom-runnerを閉じる時はescapeキーでできます。

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