Django--新規プロジェクト作成

PythonのDjango（ジャンゴ）の新規プロジェクト作成

【開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
コード エディター：VSCode
Webフレームワーク：Django
すでにDjangoをインストール済み

【Djangoのバージョン確認】
IDLE　shellで確認する
Python 3.8.9 (tags/v3.8.9:a743f81, Apr 2 2021, 11:10:41) [MSC v.1928 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license()" for more information.
>>> import django
>>> print(django.get_version())
3.2.3
>>>

【 VSCode で開発するまでの手順】
Microsoft Windows [Version 10.0.19042.1052]
(c) Microsoft Corporation. All rights reserved.
1）フォルダを作成する
C:\Users\shyok>cd/d D:\pg\Python38
D:\pg\Python38>django-admin startproject testPj

Djangoプロジェクトを実行
2）D:\pg\Python38>cd testPj
D:\pg\Python38\testPj>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
June 19, 2021 - 11:23:17
Django version 3.2.3, using settings 'testPj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[19/Jun/2021 11:26:33] "GET / HTTP/1.1" 200 10697
[19/Jun/2021 11:26:33] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
[19/Jun/2021 11:26:33] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 86184
[19/Jun/2021 11:26:33] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 85876
[19/Jun/2021 11:26:33] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 85692
Not Found: /favicon.ico
[19/Jun/2021 11:26:33] "GET /favicon.ico HTTP/1.1" 404 2110

3）ブラウザにURL：http://127.0.0.1:8000/を入れる。下記の様に表示されれば、成功！


4）プロジェクトフォルダに「templates」フォルダを作る。


5）設定ファイルの更新
testPj/testPjの下にある「settings.py」を開き、更新する
①インポートの追加
from pathlib import Path
from typing import Any
import os←追加

②templatesフォルダを、HTMLファイルを置く場所に指定する
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates'),←この様に書き換える。
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

③言語とタイムゾーンを変更する
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

6）新しいページの作成
「test.py」ファイルを作成し、以下のコードを記入

コード
from django.shortcuts import render

def test(request):
return render(request, 'test.html')
内容
「test.pyファイルが実行されたら、『test.html』を開いてください！」

7）URLを開いたときに実行される処理を管理している「urls.py」を更新する
from django.contrib import admin
from django.urls import path
from . import test←追加

urlpatterns = [
path('admin/', admin.site.urls),
path('test/', test.test, name='test'),←追加

8）templatesフォルダに「test.html」を作成する
コード
＜!DOCTYPE html＞
＜html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞はじめてのDjangoアプリ＜/title＞
＜/head＞
＜body＞
＜h1＞Djangoで新しいページ作成＜/h1＞
＜/body＞
＜/html＞

9）コマンドプロンプトを開いてコマンド実行する
D:\pg\Python38\testPj> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
June 20, 2021 - 11:14:55
Django version 3.2.3, using settings 'testPj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[20/Jun/2021 11:15:55] "GET /test/ HTTP/1.1" 200 212
Not Found: /favicon.ico
[20/Jun/2021 11:15:55] "GET /favicon.ico HTTP/1.1" 404 2228

10）ブラウザを開いてhttp://localhost:8000/test/を入れる

になれば、成功

FlaskでHTML・CSSを読み込むには

FlaskでHTML・CSSを読み込む

開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
コード エディター：VSCode
Webフレームワーク：Flask

【HTML・CSSを読み込む】
1）hello.pyファイルの作成
flask-todo-appフォルダの下にhello.pyファイルを作り、次のコードを書く

コード
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello():
html = render_template('h_index.html',a = '変数なう')
return html

if __name__ == "__main__":
app.run()

2）templatesフォルダにh_index.htmlファイルを作る。
下記のコード書く
＜!DOCTYPE html＞
＜html lang="en"＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞HELLO＜/title＞
＜/head＞
＜body＞
＜p　class="hello"＞Sayhello＜/p＞
＜/body＞
＜/html＞

3）実行し、ブラウザを立ち上げ、URL：http://127.0.0.1:5000/を代入すると下記の様になれば、OK

CSSで装飾してみよう

1）h_index.htmlファイルを書き換える
＜!DOCTYPE html＞
＜html lang="en"＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞HELLO＜/title＞
　 ＜linkrel="stylesheet" href="static/hello.css"＞
＜/head＞
＜body＞
＜p　class="hello"＞こんにちわ～＜/p＞
　＜p＞{{a}}＜/p＞
＜/body＞
＜/html＞

2）staticフォルダにhello.cssというファイルを作る
hello.cssファイルにコードを書く

.hello {
color: #f00;
}

3）実行する

なせか、CSSが反映されない！

Flask--共通テンプレートの作成

WebフレームワークFlaskで共通テンプレートを作る

【開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
コード エディター：VSCode
Webフレームワーク：Flask

【共通テンプレート】
Flaskでは基盤になるHTMLを準備して、そのファイルを他のHTMLに継承させることができる。
クラスの継承と同じだよ。

1）基盤になるテンプレートを作る
templateフォルダの下に基盤になるテンプレートのbase.htmlファイルを作る

コード
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="UTF-8"＞
＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
＜title＞Document＜/title＞
{% block head %}{% endblock %}
＜/head＞
＜body＞
{% block body %}{% endblock %}
＜/body＞
＜/html＞

2）index.htmlを書き換える
コード
{% extends 'base.html' %}

{% block body %}
＜h1＞共通テンプレートだよ。＜/h1＞
{% endblock %}
変更箇所
<head>部分に、{% block head %}{% endblock %}が増えた
<body>部分に、{% block body %}{% endblock %}が増えた

を削除した

実行してブラウザで見てみる

Pythonのフレームワーク・Flask---2

フレームワーク・Flaskの続編

【開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
Python の統合開発環境：IDLE
Webフレームワーク：Flask

【render_template関数を使ってHTMLを読み込む方法】
1）新規フォルダー「templates」を作る
VSCodeで以下の部分をクリックし、フォルダー名をtemplatesにする


2）新規ファイル「index.html」を作る
templatesフォルダーを選び、新しいファイルをクリックする

ファイル名をindex.htmlし、クリックする


3）index.htmlのコードを書く
「index.html」が作られると、右側にコードを書く

4）app.pyを変更
render_template 関数を使わないと、htmlを埋め込むことができない。

変更コード
from flask import Flask, render_template # 追加

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html') # 変更

if __name__ == "__main__":
app.run(debug=True)

5）実行する
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="UTF-8"＞
＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
＜title＞Document＜/title＞
＜/head＞
<body>
＜h1＞Hello World＜/h1＞
＜/body＞
＜/html＞



6）ブラウザ表示


7）index.htmlを変えて見る
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="UTF-8"＞
＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
＜title＞Document＜/title＞
＜/head＞
<body>
＜h1＞ようこそ！この世界に＜/h1＞
＜/body＞
＜/html＞
8）実行し、URL：http://127.0.0.1:5000/を入れてみる。


以上

Pythonのフレームワーク・Flask---1

Pythonのフレームワーク・Flask

【開発環境】
OS：Win10（64ビット）
言語：Python3.8.5（64bit）
Python の統合開発環境：IDLE
Webフレームワーク：Flask

【Flaskを使った簡単なプログラム】
「hello.py」ファイルに下記のコードを書く
from flask import Flask
app = Flask(__name__)

@app.route(‘/’)
def hello():
hello = “Hello world”
return hello

if __name__ == “__main__”:
app.run()

【hello.pyを起動させる】
Python 3.8.9 (tags/v3.8.9:a743f81, Apr 2 2021, 11:10:41) [MSC v.1928 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license()" for more information.
>>>
======================= RESTART: D:/pg/Python38/hello.py =======================
* Serving Flask app 'hello' (lazy loading)
* Environment: production
[31m WARNING: This is a development server. Do not use it in a production deployment.[0m
[2m Use a production WSGI server instead.[0m
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [03/Jun/2021 13:41:26] "[33mGET /hello.py HTTP/1.1[0m" 404 -
127.0.0.1 - - [03/Jun/2021 13:41:30] "[33mGET /hello.py HTTP/1.1[0m" 404 -
127.0.0.1 - - [03/Jun/2021 13:43:02] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [03/Jun/2021 13:43:02] "[33mGET /favicon.ico HTTP/1.1[0m" 404 -

【ブラウザで表示】
ブラウザを立ち上げてURLに「http://127.0.0.1:5000/」を入れると下記のように表示される。


【Flaskを使った簡単なプログラム2】
1）flask-todo-appフォルダを作成し、VSCodeを起動する。
2）エディター内のターミナルを開いて、現在地を確認しておきましょう。
PS D:\pg\Python38\flask-todo-app> cd
PS D:\pg\Python38\flask-todo-app>
3）仮想環境の作成
virtualenv env
ただし、virtualenvがインストールされていない場合は「pip install virtualenv」コマンドでインストールする。
4）envが作成されたか確かめる
PS D:\pg\Python38\flask-todo-app> dir env

ディレクトリ: D:\pg\Python38\flask-todo-app\env
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 03/06/06 11:27 include
d----- 03/06/06 11:20 Lib
d----- 03/06/06 11:27 Scripts
-a---- 03/06/06 11:20 42 .gitignore
-a---- 03/06/06 11:20 248 pyvenv.cfg
PS D:\pg\Python38\flask-todo-app>

5）仮想環境を有効化する
PS D:\pg\Python38\flask-todo-app> env\Scripts\activate
(env) PS D:\pg\Python38\flask-todo-app>

6）ライブラリ一覧の確認
(env) PS D:\pg\Python38\flask-todo-app> pip freeze
click==8.0.1
colorama==0.4.4
Flask==2.0.1
Flask-SQLAlchemy==2.5.1
greenlet==1.1.0
itsdangerous==2.0.1
Jinja2==3.0.1
MarkupSafe==2.0.1
SQLAlchemy==1.4.17
Werkzeug==2.0.1
(env) PS D:\pg\Python38\flask-todo-app>

7）表示されない場合は2つのライブラリをインストールする
(env) PS D:\pg\Python38\flask-todo-app> pip install flask flask-sqlalchemy

Requirement already satisfied: flask in d:\pg\python38\flask-todo-app\env\lib\site-packages (2.0.1)
Requirement already satisfied: flask-sqlalchemy in d:\pg\python38\flask-todo-app\env\lib\site-packages (2.5.1)
Requirement already satisfied: Jinja2>=3.0 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from flask) (3.0.1)
Requirement already satisfied: Werkzeug>=2.0 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from flask) (2.0.1)
Requirement already satisfied: itsdangerous>=2.0 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from flask) (2.0.1)
Requirement already satisfied: click>=7.1.2 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from flask) (8.0.1)
Requirement already satisfied: colorama in d:\pg\python38\flask-todo-app\env\lib\site-packages (from click>=7.1.2->flask) (0.4.4)
Requirement already satisfied: MarkupSafe>=2.0 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from Jinja2>=3.0->flask) (2.0.1)
Requirement already satisfied: SQLAlchemy>=0.8.0 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from flask-sqlalchemy) (1.4.17)
すでにインストール済みだと下記のように表示
Requirement already satisfied: greenlet!=0.4.17 in d:\pg\python38\flask-todo-app\env\lib\site-packages (from SQLAlchemy>=0.8.0->flask-sqlalchemy) (1.1.0)
(env) PS D:\pg\Python38\flask-todo-app>

【Flaskを使って、Hello Worldを表示する】
1)VSCode画面
「flask-todo-app」と仮想環境「env」が作成されている。

2）ファイル作成
flask-todo-appフォルダーにapp.pyファイルを作る

3）app.pyファイルが作成されたら、右画面にコードを書く

4）コード

5）実行


6）ブラウザを立ち上げ、URLにhttp://127.0.0.1:5000/を入れる

成功すると、上記のように表示される。

【見出しを付けて、Hello Worldを表示】
「app.py」を変更する
from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
return '

Hello World

' #変更

if __name__ == "__main__":
app.run(debug=True)

・実行する