概要
本日はWebアプリに機能追加する方法を解説する
追加する機能は
完了状態の追加完了ボタン、未実施ボタンの追加
行ごとのボタンを追加タブの追加
の４つだ
実装
Webアプリに機能追加をするにあたって次の５つのステップに分けて解説をしてゆく
- 行ごとの削除ボタンの追加
- 完了状態の追加、完了ボタンの追加
- 未実施ボタンの追加
- ACTIVEタブ、COMPLETEDタブの追加
- タブ内のボタン押下時の画面固定
の５つだ
行ごとの削除ボタンの追加
まずは「行ごとの削除ボタンの追加」についてだ
viewにおける変更部分は、tbodyのtrにtdを追加しその中にformを追加する
そして、formの中にtypeがhiddenのinputとtypeがsubmitのinputを作成する
hiddenのinputにはvalueにtodoのidxを設定する
submitのinputはformactionを/deleteとし、valueは削除、classはbtn、btn-dangerとする
これで削除ボタンが作成できる
hiddenのinputもsubmitボタンをクリックした際に、valueの値がサーバに送られる点では
普通のinputと変わりわない。違いはhidden項目は画面の表示されないということだ
続いて、checkboxのinputにform=all-bulk-delete属性を追加する
そして、削除ボタンのformにid=all-bulk-deleteを追加する
そうすることでformの中にsubmit属性のinputを配置しなくともformとsubmitを関連付けられる
もし、今までのやり方だとformの中にformができる形になってしまう
この場合、内側のformはうまく機能しない
それを回避するためにidで紐づけるやり方を採用した
完了状態の追加、完了ボタンの追加
続いて「完了状態の追加、完了ボタンの追加」についてだ
まず、完了済みのタスクであるかどうかを表すカラムをDBに追加する
alter table todos add column status INTEGER default 0;でカラム追加ができる
続いてviewを変更する。先ほどと同様ボタンを行ごとに追加するために
formaction=/complete、value=完了、
type=submit、class=btn btn-successのinputを追加する
同様の項目を下の方のformにも追加する
このボタンを押した際のサーバ側の動作を追加する
殆ど内容はdelete関数と同じだがSQL文はupdate文を使用する
update テーブル名 set カラム名 = 値 where 条件
とすることで条件に当てはまるテーブルのカラムの値を更新できる
続いて、完了状態となったタスクは取り消し線を引く処理を追加してゆく
todoのstatusが0の場合はそのまま表示し、statusが1の場合はdelタグで囲む
これで完了済みのタスクは取り消し線が引かれるようになった
未実施ボタンの追加
次は「未実施ボタンの追加」の追加だ
完了状態となったタスクを完了していない状態に戻すためのボタン「未実施」を追加する
先ほどと同様にclass=btn btn-primary
formaction=/undo、type=submit、value=未実施のボタンを追加する
このボタンを押した際のサーバ側の動作を追加する
complete関数とほぼ同じだが、update文の更新値が1でなく0となっている
さらに、完了状態のタスクは削除ボタンと未実施ボタンのみを
未完了のタスクは削除ボタンと完了ボタンのみを表示したいので
viewにてstatusの値を見て表示するボタンを変更するようにする
ACTIVEタブ、COMPLETEDタブの追加
次は「ACTIVEタブ、COMPLETEDタブの追加」についてだ
未完了のタスクや完了済みのタスクだけを表示するタブを作成する
１つのulの中に３つのliを作成する
また、todoリストの表示部分も３つ作成する
そして、ulのhrefトdivのidでタブと表示部分を紐づけることができる
表示部分について、ACTIVEは未完了のタスクのみを表示するので、ループにif文を追加し、
statusが0のタスクのみを表示するようにする
全て未完了のタスクなので必要ない未実施ボタンは削除する
COMPLETEDもほぼ同じだ
完了状態のタスクのみを表示するのでループにif文を追加し、
statusが1のタスクのみを表示するようにする
全て完了状態のタスクなので必要ない完了ボタンは削除する
タブ内のボタン押下時の画面固定
最後は「タブ内のボタン押下時の画面固定」についてだ
ACTIVEタブやCOMPLETEDタブでボタンをクリックすると毎回ALLタブに戻ってしまう
連続でボタンを押す場合にいちいちALLタブに戻るのは不便だ
そこで、ACTIVEタブでボタンをクリックした場合はACTIVEタブが
COMPLETEDタブでボタンをクリックした場合はCOMPLETEDタブが再度表示されるようにする
画面表示時にどのタブが初期表示となるかはliのactive、divのactive showで決まる
従ってボタンをクリックした際にどの画面でボタンを押したかの情報をサーバに送信する
画面が表示される際にその情報を使い、適切なli、divにactive、showを埋め込む
というやり方で期待通りの動作が実現できる
まず、ボタンクリック時の画面情報をformのhidden属性として持たせるようにする
サーバ側では各関数のreturnをこのように変更する
こうすることでURL部分にselected_tab=completed付きでリダイレクトされるようになる
そして、この情報を用いてviewの表示を行う
タブを作っているliの部分を、selected_tabの値によってactiveを付与するように変更する
また、todoタスク表示部分のdivをselected_tabの値によってactive showを付与するように変更する
