ロリポップサーバーにFlaskで検索システムを作ろう！

Step1: まずHelloワールドを出そう！
Step2: DBを導入しよう。
- インストールしていない場合はインストールする。
- ターミナルからDBの使用を可能にする。
Step3: 追加画面と検索結果画面を作る。
Step4. 検索処理を実装する。
Step5：管理画面を作成する。
Step6: 表示を整える。
- 参考

Step1: まずHelloワールドを出そう！

なんでこんな当た離前なことを書くのか？今回はロリポップサーバーで環境を作成するため、ファイル権限など通常のフラスクディレクトリ構成は以下のようにします

$ ll

-rw------- 1 <ユーザー名> LolipopUser 471  6月 25  2022 .htaccess
-rwx------ 1 <ユーザー名> LolipopUser 190  6月 25 19:56 index.cgi
-rw------- 1 <ユーザー名> LolipopUser 191  6月 25 20:53 views.py

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
# ロリポップサーバーで公開するフォルダーを設定した場合は↓を設定する必要がある
RewriteRule ^(.*)$ /index.cgi/$1 [QSA,L]

view.py

from flask import Flask, render_template,request, redirect

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello Test"


if __name__ == '__main__':
    app.run(debug=True)

index.cgi

#!/usr/local/bin/python3
from wsgiref.handlers import CGIHandler
#from helloFlask import app

from views import app

#from flaskr import create_app
#app = create_app()
CGIHandler().run(app)

Step2: DBを導入しよう。

Webサービスなのでデータベースはしようしたいところです。
今回はよく使われるSQL Alchemyをしようします。 step1とstep2の差分は以下をご覧ください。 https://github.com/Makisygen/MovieSearchExample/compare/step1%E2%80%A6step2

インストールしていない場合はインストールする。

pip install flask-sqlalchemy
pip install flask-migrate

ターミナルからDBの使用を可能にする。

export FLASK_APP=setup.py
flask db init

flask db migrate -m "initial"
flask db upgrade

Step3: 追加画面と検索結果画面を作る。

さて続いて映画の情報をDBに登録する処理と検索結果を表示する画面を追加します。
ステップ3では具体的な検索の処理はまだ作らず一覧表示のレベルにとどめます。

https://github.com/Makisygen/MovieSearchExample/compare/step2%E2%80%A6step3

register.html 登録ページです。
search_result.py 検索結果ページ
views.py 検索処理を追加しています。今回注目するのはregister.htmlとviews.pyで追加した後に/にリダイレクトし、リダイレクト先の処理ではDBを全検索した結果を返すようにします。
　SQL Archemyで全検索をする処理は以下のようにします。

datas = Movie.query.all()

上の「Movie」はstep2で定義したMovieクラスになります。

Step4. 検索処理を実装する。

検索処理を追加します。ここからは追加処理のみを書くようにします。 https://github.com/Makisygen/MovieSearchExample/compare/step3%E2%80%A6step4

検索処理を追加しています。上のsearch_result.htmlのフォームの送信先を/resultとし、アクセスされた時の処理を追加します。ポイントとなるのは絞り込みでFlaskでSQL Archemyを使って検索する場合は以下のようにします。
SQL Archemyは普通にSQL文を組むことができないので悩んだことがある方もいると思いますが、差分内の以下の部分のようにのようにquery.filte\を何回も使用することでANDをとることができます。

    if len( category_list ) > 0 :
        query = query.filter(Movie.category.in_(category_list))
    query = query.filter(Movie.name.contains(name_txt))
    if price_txt == "0_1000":
        query = query.filter(Movie.price < 1000)
    elif price_txt == "1000_2000": 
        query = query.filter(Movie.price >= 1000)
        query = query.filter(Movie.price < 2000)
    elif price_txt == "2000_3000": 
        query = query.filter(Movie.price >= 2000)
        query = query.filter(Movie.price < 3000)
    elif price_txt == "3000_": 
        query = query.filter(Movie.price >= 3000)

    datas = query.all()

Step5：管理画面を作成する。

https://github.com/Makisygen/MovieSearchExample/compare/step4%E2%80%A6step5 Step3で追加画面を作成しましたが、それを改造して削除も行える管理画面にします。また、一般用の検索画面を追加します。 register.htmlに検索窓を追加し、さらに検索結果のテーブルに一括削除用のチェックボックスを入れています。
view.pyの検索処理に変わりはありませんが、管理画面からの検索か一般用画面からの検索下で上記チェックボックスを表示するかを変更するためにfromと名付けた隠し要素をhtmlに追加し処理を分けています。

Step6: 表示を整える。

さて、このままでは見栄えが悪いので今回はBootStrap5を使って表示を成形します。 https://github.com/Makisygen/MovieSearchExample/compare/step5%E2%80%A6step6 bootstrapのページは以下です。 https://getbootstrap.jp

変更対象は以下です。 - templates/search_result.html - templates/register.html