DreamerDreamのブログ

夢想家の夢です。〜揚げたてのモヤっとしたものをラフレシアと共に〜

Djangoの使い方⑦formの使い方とテンプレートで動的なページを作る方法

 前回記事

dreamerdream.hateblo.jp

 

 

formは動的なWebページでは書かせない要素です。

基本的にはGETかPOSTでサーバーにリクエストを飛ばします。

(PUTやDELETEリクエストもあるけど必要性を感じません。)

 

index.html

<form method="post" action="">
Hello!<br>
<p>
<textarea name="text" rows="5" cols="30">テキスト内容</textarea>
</p>

<input type="submit" value="送信"><input type="reset" value="リセット">
</form>

 

というフォームを書いた場合

f:id:DreamerDream:20181012132959p:plain

と表示されます。表示されるだけで何も起こりません。

何を書いても送信かリセットを押すと最初の文章が戻ります。

 

1つづつ見ていきます。

<form method="post" action="">

ここからPOSTリクエストされますよーという指定です。

リクエストを送信した後、action=で指定されたページに飛びます。何も指定が無ければページはそのままで更新されます。


Hello!<br>

単なる文字列です。説明の必用は無いでしょう。


<p>
<textarea name="text" rows="5" cols="30">テキスト内容</textarea>
</p>

テキスト入力が可能なテキストエリアです。

name=はリクエストを送信した時に「’text’の内容ですよー」という印です。

rowsは行、colsは幅です。

 

<input type="submit" value="送信"><input type="reset" value="リセット">

送信ボタンとリセットボタンです。

type='submit'とするとボタンを押すとform内容をPOST形式で飛ばします。

type='reset'とするとボタンを押すとformの内容が全てリセットされます。

</form>

 

とまあ、超単純なテキストの内容をリクエストするだけのフォームです。

ちなみに、GETリクエストは文字コードや文字数制限やらややこしいですが、POSTは文字コードや文字数は無制限で送信できますのでこのようなテキストエリアならPOSTが望ましいです。

 

で、このリクエストをDjangoではどのように受け取るのかといいますと、辞書形式でnameを指定するだけなのですごく簡単!

views.py

from . import forms

from django.shortcuts import render

def form(request):

  text = request.POST['test']

必用なのは、これだけ。

request.POSTで先ほどのフォームの中でname指定した値を辞書形式で取得出来ます。

これでtextにテキストエリアの内容が格納されます。

あとは煮るなり焼くなりプログラム次第でお好きにどうぞ!ってことです。

request.GETを指定するとGET形式で取得出来ます。

 

GETかPOSTかの判定は

if request.method == 'POST':

で判定できますので

同じアドレスでもGETとPOSTを混在させることが容易になります!面白い!

 

views.py(必用な部分だけ抜き出しているのでこのままじゃ動かないかも)

def form(request):
  if request.method == 'GET':
    d={
      'message': 'GET!',
      'text': 'テキスト内容',
    }
    return render(request, 'index.html',d)

  elif request.method == 'POST':

    text = request.POST['text']  

    result = 'text内容は'+text+'でした。'

    d={

      'message': 'POST!',

      'text':result,

    }

    return render(request, 'index.html',d)

 

こうすると、GETでのアクセスとPOSTでのアクセスの挙動を変えることができます。

結果の挙動を変えるため、最終的にrenderでテンプレートに貼付けています。

 

テンプレートの書き方はこんな感じです。

index.html

<form method="post" action="">
{% csrf_token %}
{{ message  }}<br>
<p>
<textarea name="text" rows="5" cols="30">{{ text }}</textarea>
</p>

<input type="submit" value="送信"><input type="reset" value="リセット">
</form>

※{% csrf_token %}の部分はDjangoが生成する不正アクセス予防の為の値になります。POSTリクエストを飛ばす際にはこれを書かないとエラーが出ます。

 

テンプレートは {{  }}で囲われた部分が、views.pyのd{}で指定していた値に置き換えられる便利な機能です。(ちなみに、軽量フレームワークのBottleでも同じような機能がありますが使いにくいです。)

これを利用すると、リストをそのままテンプレートに飛ばす事が出来ます!

フォームのselectを利用する場合、通常では

index.html

<select name="number">
 <option value='0'>0</option>

 <option value='1'>1</option>

 <option value='2'>2</option>

 <option value='3'>3</option>

 <option value='4'>4</option>
</select>

 

と書くと、このような選択ボタンが表示されます。

f:id:DreamerDream:20181012142056p:plain

Djangoのテンプレート利用では

index.html

<select name="number">
{% for num in nums %}
<option value='{{ num }}'>{{ num }}</option>
{% endfor %}
</select>

と書き、先ほどのtextへの代入と同様に

views.py

nums = ['0','1','2','3','4','100','200','300']

  d={

      'number': nums,

    }

    return render(request, 'index.html',d)

 

とnameを指定してリストを代入すれば、テンプレートのfor分で繰り返し処理して綺麗に並べてくれます。

ファイルの操作など、内容が変動するものを代入するにはうってつけの機能ですね。

f:id:DreamerDream:20181012155235p:plain

 

 

dreamerdream.hateblo.jp

 

<参考> 

https://eiry.bitbucket.io/tutorials/tutorial/forms.html

https://cdn.profile-image.st-hatena.com/users/DreamerDream/profile.png私、(PONさん (@o_n_pon) | Twitter)を応援してくださるお優しいかたは15円から投げ銭可能ですので↓よりカンパをお願いしますm(_ _)m

kampa.me