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

簡易ログインアプリケーション(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ファルダへの移動

`1`	`cd desktop\django_basic`

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

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

■ LoginFormプロジェクトの作成

`1`	`python manage.py startapp LoginForm`

図 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】

1<!DOCTYPE html>
2<html>
3    <head>
4    <meta charset="UTF-8">
5    <title>Login Form</title>
6    </head>
7    <body>
8        <form action="{% url 'success' %}" method="post">
9            {% csrf_token %}
10            ID: <input type="text" name="id"><br>
11            PASSWORD: <input type="password" name="pass"><br>
12            <input type="submit" value="Login">
13        </form>
14    </body>
15</html>

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

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

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

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>ログイン結果</title>
6    </head>
7    <body>
8        ログイン情報<br>
9        <span>{{id}}</span>
10        <span>{{pass}}</span>
11    </body>
12</html>

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

5.2.5 Viewの作成

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

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

1from django.shortcuts import render
2 
3def form(request):
4    #画面に出力するtemplateを指定し、templateを表示させる
5    return render(request,'form.html')
6 
7def success(request):
8 
9    #templateに渡す変数を用意
10    userId = request.POST["id"]
11    password = request.POST["pass"]
12 
13    params = {
14        'id':userId,
15        'pass':password,
16        }
17 
18    #画面に出力するtemplateを指定し、templateを表示させる
19    return render(request, 'success.html',params)

図 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】

1from django.urls import path
2from . import views
3 
4urlpatterns = [
5    path('form/', views.form),
6    path('success/', views.success,name="success"),
7]