【Django】ボタンクリックでPage遷移を行う方法ご紹介。〜サンプルアプリ作成〜

Django

2023.05.23

今回の記事はPythonのWebアプリ用フレームワーク、Djangoのプロジェクトでボタンクリックでページ遷移を行う方法をご紹介する初心者用の記事です。Django初心者の方でアプリ内のボタンでページを遷移する方法を探している方は是非参考にしてみてください。

Djangoプロジェクト作成
Djangoプロジェクト設定
Djangoプロジェクト内のボタンクリックでPage遷移

Djangoプロジェクト作成

まずは、DjangoをPythonにインストールします。すでにDjangoをインストール済みの方は飛ばしてください。

python venv -m env
cd env/Scripts
activate
cd ../..
pip install django

次にDjangoプロジェクトを展開するフォルダで下記のコマンドを実行します。

django-admin startproject sample
↓
cd sample
↓
python manage.py startapp app

Djangoプロジェクト設定

次に「settings.py」を書きのように修正します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ap',##ココ追加
]

.................

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',
            ],
        },
    },
]

.................

STATIC_URL = '/static/'##ここはもともとあるのでその下の一番したに下記を記述

##ココ追加
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
##

次に2つの「urls.py」（全体側とアプリ側両方）を書きのように修正します。

from django.contrib import admin
from django.urls import path,include ##includeの記述追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('app.urls')),##ココ追加
]

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index_show, name='index_show'),
    path('templates/', views.move_to_gamepage, name='move_to_gamepage'),
]##ここは適宜追加する都度uploadします。

ちなみにのappフォルダの「urls.py」はないため、自分でファイルを作成する必要があります。

templetasフォルダも自分で追加します。

Djangoプロジェクト内のボタンクリックでPage遷移

ボタンクリックでページ遷移した後に表示する遷移先ページをtemplatesフォルダに追加します。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>sampleゲーム</title>
</head>

<body>
    <table>
        <td>player1</td>
        <td>player2</td>
        <td>player3</td>
    </table>
    <br/>
    <form action="{% url 'move_to_gamepage' %}" method="post">
        {% csrf_token %}
        <input type="image" src="{% static "app/button/start_button.png" %}" name="start_button"> 
    </form>
</body>
</html>

<h2>遷移成功</h2>

そして最後にviews.pyにページの表示とクリック先のページの表示を行う関数を記述する。

from django.shortcuts import render

def index_show(request):
    return render(request,'index.html') 

def move_to_gamepage(request):
    return render(request, 'gamepage.html')

ここまで行えば一度localserverで起動させて確認！！
アクセス先は下記です。
http://127.0.0.1:8000　←スタート画面index.htmlに
http://127.0.0.1:8000/templates/　←まだ白紙のgamepage.htmlに

下記表示されるはずの画面

ボタンをクリックすると無事画面が切り替わると思います。

では今回の記事は以上です。ほかにも多数のDjango関連の記事を記載しています。興味がある方は是非参考にしてみてください。