5.2 簡易ログインアプリケーション(Template版)作成

[cjtoolbox name=’JavaC’]

簡易ログインアプリケーション(Template版)作成

5.2 簡易ログインアプリケーション(Template版)作成

1 アプリケーション作成の目的
4章で作成したプロジェクトをもとに、Templateを利用したアプリケーション作成を学習していきます。

14 簡易ログインアプリケーション(Template版)プロジェクト構成(完成状態)

5.2.2 プロジェクトの準備

プロジェクトを始めるにあたり、コマンドプロンプトを開きます。「Anaconda Navigater」の「Environments」の「django_environment」の「▶」をクリックし、「Open Terminal」を選択してください。

図 5.2 1：ターミナルの起動

ターミナルが起動したら、「desktop/django_basic」フォルダに移動します。

■ Desktopファルダへの移動

[text] cd desktop\django_basic [/text]

図 5.2 2：作業ディレクトリの移動

「django_basic」フォルダに移動したら、「LoginForm」プロジェクトを作成します。

■ LoginFormプロジェクトの作成

[text] python manage.py startapp LoginForm [/text]

図 5.2 3：アプリケーション用のプロジェクトの作成

5.2.4 テンプレートファイルの作成

1 プロジェクト直下「django_basic/LoginForm」に「templates」フォルダを作成する
Spyderのプロジェクトウィンドウにて以下の通りに「templates」フォルダを作成します。

図 5.2 4：templatesフォルダの作成

図 5.2 5：templatesフォルダの作成②

2 1で作成した「templates」フォルダ内に「form.html」を作成

図 5.2 6：「form.html」ファイルの作成

図 5.2 7：「form.html」ファイルの作成②

3 「templates」フォルダ内に「success.html」を作成

図 5.2 8：「success.html」ファイルの作成

図 5.2 9：「success.html」ファイルの作成②

4 2で作成した「form.html」ファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：form.html】

[html] <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Login Form</title> </head> <body> <form action=”{% url ‘success’ %}” method=”post”> {% csrf_token %} ID: <input type=”text” name=”id”><br> PASSWORD: <input type=”password” name=”pass”><br> <input type=”submit” value=”Login”> </form> </body> </html> [/html]

図 5.2 10：プロジェクト準備完了

5 2で作成した「success.html」ファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：success.html】

[html] <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>ログイン結果</title> </head> <body> ログイン情報<br> <span>{{id}}</span> <span>{{pass}}</span> </body> </html> [/html]

図 5.2 11：プロジェクト準備完了

5.2.5 Viewの作成

1 「LoginForm」プロジェクト直下、「views.py」に「form」関数、「success」関数を記述
「views.py」に以下に示すソースコードを記述する。

■ソースコード
【ファイル名：LoginForm/views.py】

[python] from django.shortcuts import render def form(request): #画面に出力するtemplateを指定し、templateを表示させる return render(request,’form.html’) def success(request): #templateに渡す変数を用意 userId = request.POST[“id”] password = request.POST[“pass”] params = { ‘id’:userId, ‘pass’:password, } #画面に出力するtemplateを指定し、templateを表示させる return render(request, ‘success.html’,params) [/python]

図 5.2 12：プロジェクト準備完了

5.2.6 Urls.pyの作成、編集

1 LoginFormプロジェクト直下に「urls.py」の作成

図 5.2 13：urls.pyの作成

図 5.2 14：「urls.py」ファイルの作成②

2 1で作成した「urls.py」ソースコードの記述
LoginFormプロジェクト直下に作成した「urls.py」に以下に示すソースコードを記述する。

■ソースコード
【ファイル名：LoginForm/urls.py】

[python] from django.urls import path from . import views urlpatterns = [ path(‘form/’, views.form), path(‘success/’, views.success,name=”success”), ] [/python]