スポンサーリンク

【Django】変数の受け渡し方法。〜 別ページへの値遷移 〜

Django
スポンサーリンク

今回の記事はDjangoプロジェクトで別ページに遷移したタイミングで変数を受け渡す方法をご紹介します。ページ遷移して値を次のページに表示するのはWebアプリではよくあります。Django初学者で変数の受け渡し方法がわからない方は是非参考にしてください。

スポンサーリンク

Djangoプロジェクト作成

まずは、Djangoモジュールを自身のPython環境にインストールします。すでにDjangoモジュールをインストール済みの方は飛ばしてください。(また、下記では仮想環境にインストールしていますが、ローカルPythonにインストールする方は仮想環境作成部分は飛ばしてください。)

python venv -m env
cd env/Scripts
activate
cd ../..

// djangoインストール
pip install django

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

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

Djangoプロジェクトで変数を遷移先ページに表示する流れ

  1. 入力欄に値入力
  2. ボタンによりページ遷移
  3. 遷移先ページに受け渡した値を表示

上記が今回のサンプルアプリの流れです。

Djangoプロジェクト内にHTMLで入力欄を作成

HTMLで入力欄を作ります。入力欄のイメージは下記のようなイメージです。

「index.html」を下記のように変更しましょう。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>サンプルアプリ</title>
</head>

<body>
    <form action="{% url 'move_to_gamepage' %}" method="GET">
        {% csrf_token %}
        <a>Player1:</a><input type="text" id="player1" name="player1">
        <br>
        <a>Player2:</a><input type="text" id="player2" name="player2">
        <br>
        <a>Player3:</a><input type="text" id="player3" name="player3">
        <br>
        <input type="image" src="{% static "ap/button/start_button.png" %}" name="start_button"> 
    </form>
</body>
</html>

下記のform部分が入力欄のメインになる箇所です。

<form action="{% url 'move_to_gamepage' %}" method="GET">
    {% csrf_token %}
    <a>Player1:</a><input type="text" id="player1" name="player1">
    <br>
    <a>Player2:</a><input type="text" id="player2" name="player2">
    <br>
    <a>Player3:</a><input type="text" id="player3" name="player3">
    <br>
    <input type="image" src="{% static "ap/button/start_button.png" %}" name="start_button"> 
</form>

inputタグのtypeがtextの部分が入力欄です。

inputタグのtypeがimageの部分がボタンで、ここをクリックするとformのactionに設定されている「move_to_gamepage」メソッドが動きます。

本当はGET通信ではなくPOST通信を使うべきなのですが、今回は変数をやりとりするのみなので上記でお許しを。今の状態では下記のような画面になっています。

Djangoプロジェクト内にHTMLで遷移先ページを作成

次に遷移先のページをHTMLで作成します。先ほど作成した入力欄で入力した値を表示します。

「gamepage.html」というページを作成しましょう。

<html>
<head>
    <meta charset="utf-8" />
    <title>遷移先</title>
</head>
<body>
    <table>
        <a>{{ player1 }}</a>
        <br>
        <br>
        <a>{{ player2 }}</a>
        <br>
        <br>
        <a>{{ player3 }}</a>       
    </table>
</body>
</html>

tableタグ内の「{{ player1 }}」の部分が受け渡される変数です。

Djangoでの変数の書き方は{{ 変数 }}といった具合です。

Djangoプロジェクトで変数の受け渡しを行う

「views.py」を下記のように変更します。

from django.shortcuts import render

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

def move_to_gamepage(request):
    players = {
        'player1': request.GET.get('player1'),
        'player2': request.GET.get('player2'),
        'player3': request.GET.get('player3'),
    }
    return render(request, 'gamepage.html', players)

GETで変数を取得し、受け渡されたリストを「gamepage.html」渡します。

Djangoプロジェクト起動で変数の受け渡し実行

「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します。

これで、プロジェクトを起動させて、ローカルサーバにアクセスします。

見辛いですが、下記のように取得した名前を下記のように表示できております。

遷移後は下記です。

無事、変数を受け渡し、遷移先のページで表示できています。

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

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Django
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

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