【Django】ホームページの新規ページ（URL）を追加する方法

前回、Djangoを構築してトップページをBootstrapのテンプレートを使用して表示させました。

関連記事【Django】Bootstrapのテンプレートを適用する方法

2020.06.10

今回は、Djangoで新たに新規のページをカテゴリで分け、追加する手順をまとめました。
それぞれのhtmlファイルは「simple-sidebar」のテンプレートを使用しています。

↓↓↓「エンジニア」無料のおすすめ学習・開発環境の詳細↓↓↓

【Django】新規ページの作成方法と設定手順

今回のDjangoでの新規ページの作成は、単純にテストというフォルダ配下にページを作成し、表示させるようにします。

作成するページはいかんおアプリケーションの構成を参考にしてください。

アプリケーションの構成

全体構成は以下となります。

$ ll
-rw-r--r--  1 root             root  147 Apr 28 16:17 Dockerfile
drwx------ 19 systemd-coredump root 4096 May 22 15:14 db-data
-rw-r--r--  1 root             root  955 May 18 16:43 docker-compose.yml
-rwxr-xr-x  1 root             root  626 May  8 15:54 manage.py
drwxr-xr-x  4 root             root 4096 May 30 12:02 myhp
drwxr-xr-x  3 root             root 4096 May 26 19:52 mysite
-rw-r--r--  1 root             root   42 May  7 18:39 requirements.txt
drwxr-xr-x  3 root             root 4096 May  9 12:57 ssl_certs
drwxr-xr-x  4 root             root 4096 May 23 14:57 static
drwxr-xr-x  3 root             root 4096 May 26 20:02 templates

前回記事同様、新規ページを作成する個所としてアプリ側を編集します。

$ tree myhp/
myhp/
|-- __init__.py
|-- __pycache__
|   |-- __init__.cpython-38.pyc
|   |-- admin.cpython-38.pyc
|   |-- models.cpython-38.pyc
|   |-- urls.cpython-38.pyc
|   `-- views.cpython-38.pyc
|-- admin.py
|-- apps.py
|-- migrations
|   |-- __init__.py
|   `-- __pycache__
|       `-- __init__.cpython-38.pyc
|-- models.py
|-- tests.py
|-- urls.py
`-- views.py

今回作成するページは「test」配下に「test1」と「test2」というページ、「app」配下に「app」というページを作成します。

$ tree templates/
templates/
|-- index.html
`-- test
    |-- app
    |   `-- app.html
    |-- test1.html
    `-- test2.html

$

すでにトップページは作成されて、「templates」配下のindex.htmlのページが表示されているものとします。
設定は上記のページを参考にしてください。

新規ページのフォルダを作成

今回は、「test」フォルダとその配下に「app」フォルダを作成します。

$ mkdir test
$ cd test
$ mkdir app

新規ページを作成

$ pwd
/docker/www/django/templates
$ cp -p index.html /test/test1.html
$ cp -p index.html /test/test2.html
$ cp -p index.html /test/app/app.html

コピーしたそれぞれのHTMLファイルを編集しますが、今回はどのページかわかりやすくするために以下の「h1」の記述を変更しておきます。

以下は「test1.html」の編集例となります。

$ vim test/test1.html

------中略------

      <div class="container-fluid">
        <h1 class="mt-4">Test1</h1>

------中略------

「urls.py」を編集

アプリ側のurls.pyを編集します。

$ vim myhp/urls.py
from django.urls import path
from . import views

app_name = 'myhp'
urlpatterns = [
    path('', views.index, name='index'),
    path('test1/', views.test1, name='test1'),
    path('test2/', views.test2, name='test2'),
    path('test/app/', views.app, name='app'),
]

それぞれ、「test1」、「test2」、「app」ページへのパスを作成します。
views.pyと紐づけるためそれぞれ「views.xxx」を指定します。

「view.py」ファイルを編集

Djangoの「view.py」はフレームワークの「Controller」と同等の働きをします。
以下では、それぞれのページに上記urls.pyのnameと紐づけて該当のファイルを指定します。

$ vim myhp/views.py
from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse
from django.template import Context, loader

def index(request):
    template = loader.get_template('index.html')
    context = {}
    return HttpResponse(template.render(context, request))

def test1(request):
    return render(request, 'test/test.html')

def test2(request):
    return render(request, 'test/test2.html')

def app(request):
    return render(request, 'test/app/app.html')

上記で、新規ページの追加は完了しました。
それぞれのページは以下となります。

http://xxxxxx/test1

http://xxxxxx/test2

http://xxxxxx/test/app

Djangoの新規ページ追加の手順は以上となります。

Python構築入門

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

「Udemy」で無料のPython講座を検索

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ