データベースのSQL3とExpressをつかったアプリケーションの作成を開始しました
前回はまだデータベースにアクセスして全データを取得してEJSに組み込んでレンダリングするというところまででした
今回は名前で検索をして抽出する内容を絞り込む機能を実装したいと思います
フォームでクエリを送信する
まずはejsファイルを書き換えてinputのフォームを実装しました
MethodはGETです
実際に加えたのは10行目から14行目です
リクエストをGETにしたためメッセージはクエリで送ります
URLの末尾の？以下です
この場合だとサーバーには/alldata/search?name=〇〇
という形でname=〇〇というクエリパラメータが送信されています
POSTメソッドでbodyに入れて送ることもできますが、今回はGETで送ります
サーバーサイドの処理 検索のキーワードを受け取って検索検索！
では、alldata.jsにリクエストのクエリパラメータを受け取って検索処理をしましょう
22行目から37行目を付け加えました
getで’/search’にアクセスした場合にreq.queryでクエリにはいった文字列を受け取って検索処理をしています
db.serialize(()=>{ }の中にSQLの処理を書いて検索をします
db.all(`select * from customerData where name LIKE “%${name.name}%”`,(err,rows)=>｛処理｝
今回もselect *として検索条件に合うものをすべて抽出するため、db.allです
where name LIKE “%${name.name}%” whereで抽出するカラムと（この場合name）と条件をいれて検索をしています
今回クエリ全体をバッククォート「‘」（SHIFT+＠キー）でかこっていますがそれはここで””の中を、Javascriptとして扱うためです
その中で${変数}という形で、変数を扱うことができます
この場合変数に入っているのはブラウザ（フロントエンド）からgetで送られたクエリパラメータです
nameオブジェクトにはいっているnameというパラメータです
インプットフォームで入力された文字列を％％で囲むことで曖昧けんさくしています
このようにしてgetで送られてきたクエリパラメータをSQLに組み込んで検索をかけ、その結果をデータとしてうけとってレンダリング時にejsに受け渡して処理をしています
顧客管理のようなものはセキュリティ面など少し取り扱いに注意が必要な点が多いため、今回動画ではライトな題材に変更をしています
ただし、もともと学習しようとしていた内容は変えていませんので、ぜひ動画も参考になさってください
コメント