django(Python)　〜基礎編〜

テクノロジー
2023.05.22

当記事は以前書いた記事【django(Python)　〜準備編〜】の続きとなっております。
プロジェクトもその回のものを使用する為、先にそちらをご確認くださいませ。

django(Python)　〜準備編〜
PHPのLaravelやRuby on Railsのように使いやすいPythonのWebフレームワークdjango。 今回はそんなdjangoのインストール方法と、プロジェクト準備方法、そして管理画面の表示まで説明します。
www.milkblank.com
2023.05.21

それでは、引き続きToDoアプリの作成を行いましょう！
本日はフロント画面を作成します。
※量が多くなった為、データ追加の方法は次記事にします。

フロント用のディレクトリの準備

まずは、HTMLやCSSファイルを置いておくためのディレクトリを作成しましょう。

今回はルートディレクトリに[src]ディレクトリを作成し、その中にと[static]（さらにstaticの中で[css]や[js]など）ディレクトリを準備します。

現在、階層は以下のようになっております。
※ 【__pycache__】というのはキャッシュデータが入っているディレクトリです。
その為、階層表示では省いております。

【階層】 ※赤字追加
ToDo/
 ├ ToDo/ ※アプリディレクトリ
　　　　├ __init__.py
　　　　├ apps.py
　　　　├ models.py
　　　　├ views.py
　　　　├ admin.py
　　　　├ migrations/
　　　　　　　　├ __init__.py
　　　　　　　 └ 0001_initial.py
　　　　└ tests.py
　├ config/
　　　　├ __init__.py
　　　　├ asgi.py
　　　　├ settings.py
　　　　├ urls.py
　　　　└ wsgi.py
 ├ db.sqlite3
 ├ manage.py
　└ src/
　　　　├ html/
　　　　└ static/
　　　　　　　　├ css/
　　　　　　　 └ js/

パスの設定

ディレクトリを作成しただけでは、djangoがどこにファイルがあるのかわかりません。
その為、「HTMLやCSSといったファイルは 〇〇 にあります」ということを宣言しておく必要がございます。

config/settings.pyの60行目くらいに

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

とありますね？
そのDIRSの中身を【BASE_DIR / 'HTMLディレクトリ'】に変えてやってください。

今回の場合は、

'DIRS': [BASE_DIR / 'src/html'],

という感じです。
BASE_DIRとは、このプロジェクトの基となるディレクトリを指しており、
config/settings.pyの15行目くらいにある

BASE_DIR = Path(__file__).resolve().parent.parent

この部分で設定しております。
まあ、あまり深く考える必要はありませんね。

先ほど行ったのはhtmlファイルがどこに入っているの宣言だけなので、次はcssやjsがどこに入っているかを宣言します。
同じく、config/settings.pyの120行目くらいの

STATIC_URL = 'static/'

の下に【STATICFILES_DIRS = [BASE_DIR / 'Staticディレクトリ']】を追記します。
今回の場合、以下のようになります。

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'src/static']

これで、今後ページを作る際はこちらを読み込むようになります。

表示方法

index.htmlとstyle.cssを作成

src/htmlの中にindex.htmlを、
src/static/cssの中にstyle.cssを作ってみましょう。

中身は

{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>テスト</h1>
h1 {color: red; }

としましょう。
大体わかりますね？
index.htmlではh1タグで「テスト」という文字を表示し、
style.cssではh1タグの文字色を赤色にしています。

ちなみにindex.htmlの1行目の

{% load static %}

この部分ですが、
djangoを使用しているとhtml内でこんな感じの少し変わった処理を書くことができます。
他にどのようなことができるかは、後ほどご説明いたしますが、
ここでは、先ほど準備したstaticディレクトリを使用するための宣言をしています。

また2行目では

{% static "css/style.css" %}

ここではstaticディレクトリを呼び出し、その中のcss/style.cssのパスを取得しています。

viewsの設定

次にindex.htmlを読み込む関数を準備します。
アプリディレクトリのToDo/views.py の
# Create your views here. の下に追記

# Create your views here. の下に追記
def index(request):
    return render(request, 'index.html')

URLの設定

config/urls.pyの二箇所を修正します。
まずは、 from django.urls import path の下に追記（17行目）
from アプリ名.views import * 

from django.contrib import admin
from django.urls import path

# ↓追加
from ToDo.views import *
# ↑追加

先ほど追記したToDoのviews.pyをこっちのファイル（urls.py）でも使用するといった感じのやつですね。

そして、その下にある urlpatterns = [ リストの最後に
path('', index) と追記します。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index), # ←追加
]

path('URL', ビュー) という構成です。
例えば、第一関数を 'test' とした場合、
接続先は http://127.0.0.1:8000/test となります。

また、第二関数では先ほど記載したToDo/views.pyのindex関数を呼び出しております。
今後ユーザーページを作りたい場合、
同じようにToDo/views.pyにuser関数を作成し、
urlpatternsにて path('user', user) を追記すればいいわけです。

それでは、http://127.0.0.1:8000にアクセスしてみましょう。

もっと派手なやつにすればよかった。。。。

変数データを使う

もちろん、Pythonで引数を渡しHTML内で表示することが可能です。

先ほど作った、ToDo/views.pyのindex関数の中身を少し修正します。

def index(request):
    datas = {'text': 'Hello!'} # 追記
    return render(request, 'index.html', context=datas) # ちょい修正

datas = {'text': 'Hello!'} ：datasという辞書の作成。
context=datas ：上で作った datas をフロントでも使用します。という宣言。

それでは、HTMLファイルの方も編集しましょう。
src/html/index.html です。
ここで少し複雑な部分があり、HTMLファイル内で使用する場合は
datas['text']とするのではありません。

では、実際にどのように使うのか見てみましょう！

<h1>テスト</h1> の部分を <h1>{{ text }}</h1> に変更するだけです！
この {{ text }} が上で作成した datas['text'] を使用する宣言となります。

{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>{{ text }}</h1>

やっぱり地味だなあ。。。。。

ちなみにHTMLで取得する引数を増やすには、
datas = {'text': 'Hello!'} の部分に
datas = {'text': 'Hello!', 'num' : 3} のように追加していきます。

その他

if文

{% if 条件 %}
処理
{% endif %}

例

{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>{{ text }}</h1>

{% if num == 3 %}
    <h3>Number：{{ num }}</h3>
{% endif %}

else if、elseは？

{% if 条件1 %}
処理1
{% elif 条件2 %}
処理2
{% else 条件3 %}
処理3
{% endif %}
例
{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>{{ text }}</h1>

<h3>Number：{{ num }}</h3>
{% if num == 1 %}
    <h4>この数値は1です</h4>
{% elif num == 2 %}
    <h4>この数値は2です</h4>
{% else %}
    <h4>この数値は1でも、2でもありません</h4>
{% endif %}

for文

リスト内ループ

{% for item in リスト %}
    <p>{{ item }}</p>
{% endfor %}
例
リストの準備
from django.shortcuts import render

# Create your views here.
def index(request):
    datas = {'text': 'Hello!', 'num' : 3}

    # ↓追記
    datas['list'] = ['奈良', '大阪', '京都', '滋賀', '三重', '和歌山', '兵庫']
    # ↑追記

    return render(request, 'index.html', context=datas)

※ 後からデータを追加しているだけで、
datas = {'text': 'Hello!', 'num' : 3, 'list' : ['奈良', '大阪', '京都', '滋賀', '三重', '和歌山', '兵庫']}
と同じです。（見づらいから分けました。）

ループ処理
{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>{{ text }}</h1>

<h3>Number：{{ num }}</h3>
{% if num == 1 %}
    <h4>この数値は1です</h4>
{% elif num == 2 %}
    <h4>この数値は2です</h4>
{% else %}
    <h4>この数値は1でも、2でもありません</h4>
{% endif %}

{% for item in list %}
    <p style="color: red;">{{ item }}</p>
{% endfor %}

数回ループ

{% with ''|center:ループ回数 as num %}
    {% for _ in num %}
        <p>{{ forloop.counter }}</p>
    {% endfor %}
{% endwith %}
例
{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/> 
<h1>{{ text }}</h1>

<h3>Number：{{ num }}</h3>
{% if num == 1 %}
    <h4>この数値は1です</h4>
{% elif num == 2 %}
    <h4>この数値は2です</h4>
{% else %}
    <h4>この数値は1でも、2でもありません</h4>
{% endif %}

{% for item in list %}
    <p style="color: red;">{{ item }}</p>
{% endfor %}

{% with ''|center:15 as num %}
    {% for _ in num %}
        {{ forloop.counter }},
    {% endfor %}
{% endwith %}

終わり

これにて、djangoでのHTMLの書き方を終了します。
お疲れ様でした。

次の記事はとうとうデータの追加を行います！

コメント

タイトルとURLをコピーしました