Web画面の作り方
フレームワークの流れ
覚えたこと。 DjangoでのWebアプリ画面の作り方。
templatesディレクトリ配下にWeb画面の基礎部分となるhtmlファイルを作成する。htmlファイルに対するhttpリクエストの対応を
view.pyに記述する。対象のhtmlファイルが呼ばれる際のURLパターンを
urls.pyに記述する。
htmlファイル
記述としては↓のような感じ。(body部を抜粋）
<body> <form action="" method="POST" > {% csrf_token %} <p>記号<br> <select name="suit"> <option value="H">Heart</option> <option value="D">Dia</option> <option value="S">Spade</option> <option value="H">Clov</option> </select> </p> <p>数字<br> <select name="rank"> {% for i in rank_list %} <option value={{i}}>{{i}}</option> {% endfor %} </select> </p> <p> <input type="submit" value="送信"> </p> </form>
画面はこうなる。
通常のhtmlの記述に加えて、{% %}で囲まれた部分にDjangoが用意したpythonっぽいロジックを記述できたり、view.pyとの変数のやり取りができたりします。
なお、templatesディレクトリ自体をDjangoが認識するために、setting.pyに今回作成したアプリの情報を記載する必要がある。
INSTALLED_APPS = [
'firstApp', #←これ#
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
view.py
記述はこんな感じ。
def form_card(request): if request.method =='GET': rank_list=[] for i in range(1,14): rank_list.append(str(i)) dictionary = {'rank_list':rank_list} dictionary.update(csrf(request)) return render(request, 'select_card.html', dictionary) if request.method == 'POST': suit = request.POST['suit'] rank = request.POST['rank'].zfill(2) dictionary = {'suit':suit, 'rank':rank} print(suit,rank) return render(request, 'display_card2.html', dictionary)
form_card関数が呼ばれたら、この処理が動く。
最終的にはrender関数で遷移先のhtmlファイルを決定し、dictionaryの部分にhtml内で使用する変数などなどを格納して受け渡しする。
ちなみに、dictionary.update(csrf(request))はDjangoが用意してくれているセキュリティ対策で、CSRF（クロスサイトリクエストフォージェリ）という攻撃を防ぐ機能を準備してくれている！
フレームワークって…いいね…。
urls.py
正規表現を使って、URLのパターンと、呼び出す関数の紐づけを行う。
urlpatterns = [
url(r'^form_card/$',views.form_card),
]
ここで記述する関数名と、view.pyに定義した関数名が違って何度もDjango先生に怒られました…。そして削られていく時間。
ちなみに送信ボタン押すと
対応するトランプのカードが表示されます。
画面作成の基本的な流れはこんなところですかね。 次はDjangoでデータを保管したりする動作を覚えて、最後にブラックジャックを動かす！
…もうちょっと進めるペース上げたいけど、8月、9月は誘惑が多くて更に時間が削られることが想定されます。
- 8月～9月末までの誘惑
- 9月末～の誘惑
これらの壁をどう乗り切って行くかが鍵。 目標を見失わないようにせねば。
