2 flat logo on transparent 256
2018-06-20

Djangoでページを追加し表示する|初心者・独学者向け入門コンテンツ

Template031297

前回でDjangoのインストール方法を紹介しました。

今回は前回追加したDjangoのアプリケーション(mysite/polls)へhtmlを追加して、ページを表示します。

なお、本内容からチュートリアルの参照ではなく、当サイトのオリジナルの内容になります。

作成するページについて

今回はページで、DBからのデータ呼び出しは行いません。

共通のレイアウトページを作成して、そのページからhtml要素を呼び出す設定を行います。

今回のアプリケーション構成

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

※mysiteの名前は適時変更可能

polls/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

※pollsの名前は適時変更可能

フォルダを作成する

まずは以下2つのフォルダを作成します。

追加フォルダパス1: polls/templates

追加フォルダパス2: polls/templates/polls

polls/
 #中間省略
    migrations/
        __init__.py
    templates/
      polls
    models.py
    views.py

※templates配下のフォルダ名とアプリケーションのフォルダ名は 同様になる必要があります。 今回ですと pollsで設定しています。

ページを作成する

レイアウトページとカテゴリーページの2つを作成します。

完成形のパスイメージ

polls/
 #中間省略
    migrations/
        __init__.py
    templates/
      polls/
        layout.html
        category.html
    models.py
    views.py

※ページ名は適時変更頂いて問題ございません。

layout.htmlへ以下コードを貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{%block title%}{%endblock%}</title>
    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
<div class="contanier">
    <div>
        {%block content%}

        {%endblock%}
    </div>
</div>
</body>
</html>

categoryページを作成

追加するファイルのパス

polls/templates/polls/category.html

{% extends 'polls/layout.html'%}

{%block title%}
カテゴリーページです。
{%endblock%}

{%block content%}
カテゴリーページを表示しています。
{%endblock%}

{%block content%}などの内容は後ほど紹介します。

urlを編集する

チュートリアルで作成したurlを流用します。

mysite/urls.pyは編集しません

mysite/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
   #adminパスはなくても可
    path('admin/', admin.site.urls),
]

polls/urls.pyを以下の通り編集します。

polls/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    #以下追加分
    path('category/', views.category, name='category'),
    path('about/', views.about, name='about'),
]

Djangoのルート構成は、アプリケーションの管理ファイルでアプリケーションのURLを紐づけ、アプリケーションでURLとviewを紐づけます。

今回の場合、mysite/urls.pyの

path('polls/', include('polls.urls'))

でpolls/urls.pyを指定し、polls/urls.pyの

path('category/', views.category, name='category'),

でviewを指定します。

view.pyファイルを編集する

Djangoのview.pyファイルは他のプログラミング言語のフレームワークで言うとControllerに該当します。

その為、DjangoでControllerを編集するにはviewファイルを編集する必要があります。

編集ファイルパス: /Users/smt/mysite/polls/views.py

from django.shortcuts import render

#以下を追加
def category(request):
    return render(request, 'polls/category.html')

上記でlocalhost:8000/polls/category/へアクセスしてみましょう。

カテゴリーページのテキストが表示されているはずです。

ページの解説

レイアウトページで設定した内容をカテゴリーページで呼び出す設定の解説を行います。

※Ruby On Railsのpartialになります。

まずはlayout.htmlの以下をご覧ください

<!DOCTYPE html>
<html lang="ja">
<head>
     <!--中間省略-->
    <meta charset="utf-8">
    <title>{%block title%}{%endblock%}</title>
</head>
<div class="contanier">
    <div>
  <!--中間省略-->
        {%block content%}

        {%endblock%}
    </div>
</div>

layout.htmlのタイトル行で{%block title%} を、divタグで {%block content%}を設定されているかと思います。

{%block %}はDjangoのテンプレートタグで、このタグを設定することによって、layout.htmlの内容を、他のページで継承する事ができます。

なお、{%block %}タグの名称は変更可能なので、以下の様に 変更する事も可能です

    <div>
        {%block head-content%}

        {%endblock head-content%}
    </div>

category.htmlで継承したページを呼び出す場合は

以下ソースの1行目の通り、呼び出したいページのパスを設定し、{%block %}タグを設定すれば、layout.htmlの内容を呼び出す事ができます。

{% extends 'polls/layout.html'%}

{%block title%}
カテゴリーページです
{%endblock%}

{%block content%}
カテゴリーページを表示しています
{%endblock%}

以上になります。

モデルの生成は以下記事から

Djangoでマイグレーションを実行しDBテーブルを生成する|初心者・独学者向け入門コンテンツ

その他関連記事

Djangoで発生するエラー:TemplateDoesNotExist atの解説と解消方法

DjangoとPython3でMysqlを利用する|初心者・独学者向け入門コンテンツ

Python3初心者向け|無料で使えるIDE PyCharmの紹介

Python3で画像をスクレイピングしてローカルに保存する|BeautifulSoupを利用

初心者・独学者向け入門コンテンツ|対話モードでPythonを実行する

【初心者・独学者向け】データベースとは何かを解説します

前の記事
次の記事
人気記事
カテゴリーから記事を探す