Formの使用
商品ページの表示、管理インターフェイスによる商品の登録・更新・削除機能と作成してきましたが、次は商品名で商品を検索して一覧表示する機能を作成します。Djangoでは、HTMLフォームの値を受け取り、バリデーション、値の型変換機能を提供するForm機能(django.forms)を用意しています。Form機能の使用イメージを図9に示しました。

Formクラスの作成
Formクラスの記述はアプリケーションフォルダにforms.pyというファイルを作成し記述します(リスト10)。
# -*- coding: utf-8 -*-
from django import forms
class ItemSearchForm(forms.Form):
item_name = forms.CharField()
ビュー関数の記述
次に初期の入力フォームを表示する処理と、フォームに入力された値をもとに、商品を検索して一覧表示するためのitem_searchビュー関数をviews.pyに記述します。リスト11にソースを示しました。
def item_search(request):
if request.method == 'POST':
form = ItemSearchForm(request.POST)
if form.is_valid():
items = Item.objects.filter(item_name=form.cleaned_data['item_name'])
return direct_to_template(request,'page/item_search.html',
extra_context={
'form': form,
'items': items,
}
)
else:
#検索フォームの初期表示
form = ItemSearchForm()
return direct_to_template(request,'page/item_search.html',
extra_context={
'form': form,
})
ビュー関数の処理は、HTTPのmethodがGETの場合とPOSTの場合で分かれます。GETの場合は検索フォームを初期表示します。 ItemSearchFormの空のコンストラクタで生成したインスタンスをコンテキストに渡して、入力フィールドをレンダリングします。テキストフィールドのレンダリングなどはFormクラスの機能で実現されます。POSTの場合は、検索フォームで値が入力され、検索ボタンが押下された時の処理を実行します。入力された商品名を元に「Item.objects.filter(item_name=form.cleaned_data['item_name'])」とモデルでDBを検索し、Itemモデルのリストを取得します。取得したリストは、direct_to_templateに渡すことで、テンプレートにレンダリングします。
検索フォームのテンプレート作成
次に検索フォームと検索結果を表示するテンプレートを作成しましょう。リスト12にソースを示しました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品検索</title>
<head>
<body>
<center>
{{ error_message_no_item }}
<form action="/itemsearch" method="POST">
商品名を入力してください:{{ form.item_name }}<br><br>
<input type="submit" value="検索">
</form>
<br>
<table border="1">
<th>商品コード</th><th>商品名</th><th>価格</th>
{% for item in items %}
<tr><td>{{ item.item_code }}</td>
<td>{{ item.item_name }}</td>
<td>{{ item.price }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
URLマッピングの定義
最後に検索処理用のビュー関数と、URLをマッピングさせる処理をurls.pyに記述します(リスト13)。
urlpatterns = patterns('',
(r'^admin/', include(admin.site.urls)),
(r'^item/(?P<item_id>\d+)/$', 'ecsite.itempage.views.item_page_display'),
(r'^itemsearch', 'ecsite.itempage.views.item_search'),
)
実行
それでは商品検索処理を実行してみましょう。ブラウザで「http://localhost:8000/itemsearch」にアクセスし検索画面を表示します。
商品名入力欄に商品登録時に指定した商品名を入力して(本稿では「item1」)検索ボタンを押下します。図11のように一覧画面が表示されます。


