Django開発~ブログ構築編7~検索フォーム

django

学習記録

Django開発~ブログ構築編6~django-tables2の続きです。

Blogもだんだんそれらしくなってきましたね。

本日は、投稿記事の「検索機能」をブログに搭載したいと思います。

postgresモジュールの追加

検索にPostgresの機能を使いたいので、settings.pyのINSTALLED_APPSに「django.contrib.postgres」を追加しましょう。

検索フォーム作成

まずは、blog/forms.pyに検索フォームクラスを設定します。

フリーテキスト入力ができる検索ボックスを一つ用意する予定なので、CharField要素を持ったクラス(SearchForm)を用意しました。

Viewの実装

作成したフォームをViewに搭載します。投稿リストを検索にかけたいので、post_list関数を修正します。

ちょっと難しかったでしょうか。

これから作成するsearch.htmlから「search_key」という文字列と共に検索キーワードをDjangoに送信します。

GETで送信するのでリクエストがGET送信されているかチェックし、GETの場合は、SearchFormクラスをインスタンス化します。

リクエストから送られたデータを持つFormクラスが作成されるので、「is_valid」関数でデータの正常性を確認し、正常の場合は、cleaned_dataで検査済みの検索キーを取得します。

最後にこの検索クエリでDBに検索をかけます。検索対象は、「title」と「body」にしておきました。

検索ボックスの作成

最後に検索ボックス(search.html)を作成しましょう。

list.htmlに直接、検索ボックスを実装してもよかったのですが、分離しておくと他のテンプレートファイル内でも使いまわせます。

form.as_pは、Djangoのフォームレンダリングオプションの一つです。フォームクラスから自動でHTMl要素を生成してくれます。
参考

後でブラウザのデベロッパーツールから確認いただくとわかると思いますが、formsが以下のように展開されます。

inputタグに注目していただきたいのですが、name属性に「search_key」が設定されています。フォームレンダリングオプションを使用して作成したformには、forms.pyに設定した変数名(search_key)がname属性に設定されます。

そして、このname属性がGETリクエスト内に存在するかチェックすることで、検索フォームから送られてきたデータであるか判定するわけです。

list.htmlに検索ボックスを読み込ませましょう。

「{% include “htmlファイル名” %}」と指定すれば、他のhtmlファイルを読み込むことが可能です。

動作確認

「localhost:8000/blog」にアクセスして、動作検証をしてみましょう。

検索ボックスに「Add」と入力して、Searchボタンを謳歌して見ます。

「Add」に関連する記事が検索されましたね。次は、検索ボックスを空にしてからSearchボタンを押してみましょう。

検索ボックスが空の場合は、投稿データが全件表示されます。

検索機能は問題なく実装されたようです。

次回

次回は、レビュー機能を実装してみようと思います^^

コメントを残す