Python、Djangoでオリジナルのシステム開発（４）
マテリアルデザイン続き
今日やること
FaviconがMDBになっているのが気になる・・・何もしないけど。
<link rel="icon" href="{% static 'img/mdb-favicon.ico' %}" type="image/x-icon">
以下を参考にメインメニューを装飾する。
Bootstrapとアイコンの使い方：
BootstrapのアイコンGlyphiconsとFontAwesomeの使い方 - CentOSinstall.com
レスポンシブデザイン： Bootstrapの使い方 導入方法と基本・レスポンシブデザインを徹底解説 | WEBST8
装飾後
レスポンシブにも対応
デザイン系の練習はこんなもんで。
次はGitHubとPycharmを連携できないか調べてみる。
GitHubとPycharmの連携
参考：PyCharmからGitHubへの連携 - Qiita
・・・と思ったらもともとGitHubを作ってあったものと連携できていた。
よくわからない。
1.git init
アプリケーションのあるフォルダと同じ階層で行う
2..ignoreファイルを作成。中身はvenv、DLしたstaticアイテム。
3.GitHubにレポジトリを作成、Commitとpushをする。
4.VCS→VCSレポジトリの参照→アカウント情報を入力→既にレポジトリがあると怒られる
5.VCS→コミットができるようになってた
VCS→Git→PushでリモートにPushできる。楽。
Python、Djangoでオリジナルのシステム開発（３）
マテリアルデザインの採用
- ログイン画面、メインメニューをマテリアルデザインで装飾する
- Material Design For Bootstrap を使う
参考：マテリアルデザインを簡単に実装「Material Design for Bootstrap」 | 創kenブログ
ダウンロード： https://mdbootstrap.com/docs/jquery/getting-started/download/
tether.min.jsを別途ダウンロードしておく必要がある。
ダウンロード： TETHER.MIN.JS: DOWNLOAD - CDNPKG
ヘッダ、スクリプトの設定をする。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"><script type="text/javascript" src="{% static 'js/tether.min.js' %}"></script><script type="text/javascript" src="{% static 'js/mdb.min.js' %}"></script>
ログイン画面はこんな感じにできた。
時間がかかったのでメインメニューは後日。
fontawesome,RobotoはDLもできる。ネットワーク回線が使えない場合もOK。
fontawesomeのダウンロード:Font Awesome
Robotoのダウンロード:https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap
作成時の参考HP
Bootstrap4に用意されているクラス
- サイドバーを追加
Python、Djangoでオリジナルのシステム開発（２）
オリジナルのシステム開発を通じてPython、Djangoを勉強する。
以降、ビジネスロジックなので記述を簡略する。
以下を実装した。
ログイン機能を実装する。
- views.py
loginメソッド定義。メインメニュー画面に遷移。 - forms.py
フォームバリデーション定義。 - biz.py
loginメソッドの内部処理定義。
参考：Django データベース操作 についてのまとめ - Qiita
formsに値が正しく設定されず、バリデーション処理がうまくいかない・・・
form = LoginForm(request.POST) で自動的にマッチされると思っていたんだけど。
とりあえず先に進むことにする。
メインメニュー画面を作成する。
メニューボタンを配置。
セッション管理を実装する。
参照：Djangoでセッションを使用する - ゾンビでもわかるPythonプログラミング
ログイン処理でセッション情報を保持する。
request.session['user_id'] = bean.user_id
各viewsのinit処理でセッション情報がなければ404を表示する。
if request.session.get('user_id') is None:
raise Http404
これがスマートなやり方かはわからない。
共通部を作成する。
- システムロゴを表示
- ログオフを実装
以下で実装する。 - ベースとなるアプリを作成。 - ベースとなるアプリのHTMLにシステムロゴ、ログオフボタンを作成。 - 各アプリでベースアプリのHTMLを継承。
Bootstrapの使い方がよくわからない・・・
別途勉強することにする。
参考：Bootstrapの使い方 導入方法と基本・レスポンシブデザインを徹底解説 | WEBST8
HTMLの継承
{% extends "SC0000base\SC0000base.html" %}
タイトルなどを動的に変えたい場合
ベース
<title>{% block title %}{% endblock %}</title>
継承先
{% block title %}メインメニュー{% endblock %}
コンテンツを埋め込む方法
ベース
{% block content %}{{ content }}{% endblock %}
継承先
{% block content %} ～ {% endblock %}
JS等も、基本的には同じ。
Djangoフォームを利用したマスタを作成する。
- Modelを定義する。
- フォームを定義する。
- HTMLを作成する。
- viewsを作成する。
setting.py
INSTALLED_APPSに
'bootstrap4'を追加。
form
html
{% bootstrap_form form layout='horizontal' %}
views
foodstock = FoodStock()return render(request, 'SC3010entry_foodstock/foodstock_edit.html', dict(form=form, foodstock_id=foodstock_id))
formで定義し、viewsでformをインスタンス化し、htmlにdictで渡す。
htmlで{% bootstrap_form ...を書くと、自動的にhtmlを生成してくれる。
食材を選択した時点で、デフォルトの賞味期限を入力するJavascriptを実装してみた。
一応、idとかは取得できるようだ。
Python、Djangoでオリジナルのシステム開発（１）
Python、Djangoで開発の練習のためにオリジナルのシステムを構築する。
システム要件
「自動献立システム」
- 好きな献立を入力する
- 今ある食材を入力する
- おすすめの献立を表示する
- 今ある食材を自動管理する
画面構成
- ログイン画面
- メニュー画面
- 献立入力画面
- 食材入力画面
- 献立表示画面
ログイン画面を開発する
さあ始めよう。
HTMLを作成しつつ、URLパスを通す。
プロジェクトのurls.py
from django.urls import path, include
path('RA/login', include('login.urls'))
loginアプリケーションの下にurls.pyを作成。
from django.urls import path
from . import views
urlpatterns = [
path('', views.login, name='login'),
]
templatesの下にlogin.htmlを作成。
<!DOCTYPE html>
{% load i18n static %}
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:'ja' }}">
<head>
<meta charset="UTF-8">
<title>ログイン</title>
</head>
<body>
<label for="user_id" >ユーザID</label>
<input type="text" id="user_id" maxlength="9" name="user_id">
<label for="password" >パスワード</label>
<input type="password" id="password" maxlength="20" name="password" >
</body>
</html>
ログインのview.py
from django.shortcuts import render
def login(request):
return render(request, 'SC1010login/SC1010login.html')
ログイン画面のベースが表示されるようになった。
Bootstrapを導入し、装飾する。
参考：Python Django入門 (4) - Qiita
インストール：Download · Bootstrap
インストール：Download jQuery | jQuery
参考：サインインページの実例～Bootstrap4移行ガイド
- 解凍したBootstrapをstaticフォルダの下に入れる。
- 以下をHTMLに追記
<link rel="stylesheet" href="{% static 'css\bootstrap.min.css' %}"><script src="{% static 'js\jquery-3.4.1.min.js' %}"></script><script src="{% static 'js\bootstrap.bundle.min.js' %}"></script>
データベースにログインテーブルを作成する。
データベースを集中管理するアプリケーションを作成。
python manage.py startapp database
settings.pyに追加。
'database.apps.DatabaseConfig',
データベースアプリケーションのmodels.pyに定義を記述。
class User(models.Model):
"""ユーザ"""
user_id = models.CharField('ユーザＩＤ', max_length=8)
password = models.CharField('パスワード', max_length=20)
def __str__(self):
return self.user_id
変更をDjangoに通達、DBに反映。
python manage.py makemigrations database
python manage.py migrate
Django管理画面でユーザを作成できるようにする。 database/admin.py
from django.contrib import admin
from . models import User
admin.site.register(User)
Python、Djangoの勉強（6）
公式チュートリアル5～7
公式チュートリアル5
URL:はじめての Django アプリ作成、その 5 | Django ドキュメント | Django
シェルの実行
python manage.py shell
テスト実行
python manage.py test polls
テスト中に以下のメッセージが出た。
Invalid HTTP_HOST header: 'testserver'. You may need to add 'testserver' to ALLOWED_HOSTS.
この場合、setting.pyに以下を記述したら治った。
公式チュートリアル6
URL:はじめての Django アプリ作成、その 6 | Django ドキュメント | Django
staticについて
Djangoはデフォルトでアプリフォルダの下のstaticに静的ファイルを探す
polls/static
読み込む場合
index.html{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">画像ファイルを表示することもできる
画像の保存先がこれだとする
polls/static/images/background.gif
呼び方
background: yellow url("images/background.gif") no-repeat;
公式チュートリアル7
URL:はじめての Django アプリ作成、その 7 | Django ドキュメント | Django
- Django管理画面での編集画面を変更する方法
基本
admin.site.register(Question, QuestionAdmin)#QuestionAdminは変更したいように定義したクラス
項目を入れ替える定義
class QuestionAdmin(admin.ModelAdmin): fields = ['pub_date', 'question_text']項目に見出しを付けて分ける定義
class QuestionAdmin(admin.ModelAdmin): fieldsets = [ (None, {'fields': ['question_text']}), ('Date information', {'fields': ['pub_date']}), ]
Python、Djangoの勉強（5）
開発経験者に教わる
以下の内容を教わった。
- Pycharmの日本語化をした方がよい
- envはプロジェクト毎に環境が異なるので、プロジェクトフォルダの下に作成した方がいい
- envはPycharmから作成すれば自動的に上記を満たす
- Pycharmでデバッグするために必要な設定
Pycharmの日本語化
参考URL:pycharmの日本語化 - Qiita
DLサイト
Eclipse 日本語化 | MergeDoc Project
日本語化するアプリケーションでpycharm64.exeを選択
日本語化するを選択
Pycharmでenvを作成する方法
ファイル→設定→プロジェクト→プロジェクト・インタープリター
画面右上の歯車を選択→追加
ベース・インタープリターにPythonのEXEを指定してOK
画面右側の＋ボタンを選択
検索エリアで以下を入力→パッケージのインストール
- Django
- django-bootstrap4
- psycopg2（PostgreSQLを扱う場合）
全て入れた状態
Pycharmのデバッグ方法
Pycharm右上の実行ボタンの横の～debugを選択→構成の編集
- スクリプト・パスに対象のmanaged.pyを選択
- パラメーターにrunserverを入力
- Pythonインタープリターに対象のvenvのpython.exeを選択
Python、Djangoの勉強（４）
Django公式チュートリアルを進める。学んだことのみ記述する。
チュートリアル１～３
urlの仕組み
mysite\urls.py path('polls/', include('polls.urls')),
polls\urls.py path('1/', views.index, name='index'),
pollsにアクセスするURLは"http://127.0.0.1:8000/polls/1/"migrate コマンドは settings.pyのINSTALLED_APPSを実装するために動作する。
- python manage.py shell Pythonのシェルを実行。
models.py のstr(self):関数はデータ自身を参照した時の返送値を定義する。
def str(self):
return self.question_text
→question_textフィールドを返送する。Djangoのテンプレート参照
polls\templates\polls\index.html
→polls\index.htmlのように動作する
polls\view.py
template = loader.get_template('polls/index.html')
view.pyで定義したcontextはhtmlで参照できる。
polls\view.py.index
context = { <br> 'latest_question_list': latest_question_list, <br> } <br>index.html {% if latest_question_list %}...
「templateにcontextを渡してHttpResponseを返送する」を省略した記述。 polls\view.py.index
# return HttpResponse(template.render(context, request)) <br> return render(request, 'polls/index.html', context)
データがなければ404を表示する。django.shortcusにある関数。
polls\view.py.detail
from django.shortcuts import get_object_or_404, render question = get_object_or_404(Question, pk=question_id)
urlはurl.pyの定義名を参照してハードコーディングを避けることができる。
polls\url.py
path('<int:question_id>/', views.detail, name='detail'),
チュートリアル４
-自サイト内を URL に指定した POST フォームには全て、 {% csrf_token %} テンプレートタグを使うべき
Djangoがクロスサイトリクエストフォージェリに自動で対応してくれる
path('archive/', views.archive, name='news-archive') のとき、reverse('news-archive') 又は reverse(views.archive)
どちらもURL 'archive/' を返すrenderはHTMLに値をバインドしたものをレスポンスとしてブラウザに表示する。
- redirectは別のURLに遷移する。何を表示するかは飛ばした先による。
汎用ビューというものが存在する。
- DetailView 汎用ビューは
