Webサイトに入力機能を追加する (1)
ということで、前回作った試合一覧に入力機能を追加しようと思います。
とりあえずは前回作ったJSPファイルをコピーして、edit_matches.jspという名前にします。
編集画面に入ったことをユーザーが認識できるようにタイトル文字列などを修正する必要がありますが、ここでは割愛します。
画面デザインは、試合一覧表の「節」、「日付」、「ホーム」、「得点」、「アウェイ」の後に「操作」というカラムを追加します。
次に、入力済みの行を編集できるようにボタンを追加します。
<tr>
<td style="text-align; end;"><%=rset.getInt("section") %></td>
<td><%=rset.getDate("date").toLocalDate().format(formatter) %></td><td style="text-align: end;"><%=rset.getString("home") %></td>
<td><%=rset.getInt("goals_for") + " - " + rset.getInt("goals_against") %>
<td><%=rset.getString("away") %></td>
<td>
<form action="edit_match" method="post">
<input type="hidden" name="match_no" value="<%=rset.getInt("match_no") %>" />
<input type="submit" value="変更" />
</form>
</td>
</tr>
最初の5個のカラム定義 (<td>から</td>) は前回と変えていませんが、最後に1個カラムを加し、入力用のフォームを入れています。
<form>から</form>が入力用のフォームになり、<form> 要素のaction属性には入力が行われた (ボタンがクリックされた) 際に呼ばれるURLを、method属性には呼び方 (getまたはpost) を設定します。
まだ、どのように実装するかを決めていないので、ここでは仮にaction属性にはedit_match、method属性にはpostを入れています。
ところで、変更ボタンがクリックされた際にどの試合情報を編集するかを編集ページに通知する必要があります。
そのために用意しているのが1個目の<input>要素です。
<input>要素のtype属性をhiddenに設定すると入力項目としては有効ですが、ブラウザ上には表示されません。ここにデータベース上で試合を特定できる情報として入れておいたmatch_noをvalue属性として設定しておくことでどの試合情報を編集したいかを編集ページに伝えられるようにしています。
2個目の<input>要素がボタンになります。type属性をsubmitとするとvalue属性で指定した文字列が表示されたボタンが画面に表示され、そのボタンをクリックすることで編集ページへの移動が発生し、その際に<form>から</form>までに含まれている<input>要素のname属性の値とvalue属性の値の組が通知されます。
この値をどのように使用するかは後程ということで。
データベースから取得した試合情報をすべて表示したのちに、新規試合情報を追加するための行を一つ追加します。
<tr>
<form action="add_match" method="post" >
<td><input type="number" name="section" /></td><td><input type="date" name="date" /></td>
<td>
<select name="home">
<option value="札幌">札幌</option>
<option value="鹿島">鹿島</option>
... 途中省略 ...
</select>
</td>
<td>
<input type="number" name="goals_for" /> - <input type="number" name="goals_against" />
</td>
<td>
<select name="away">
<option value="札幌">札幌</option>
<option value="鹿島">鹿島</option>
... 途中省略 ...
</select>
</td>
<td>
<input type="submit" value="追加" />
</td>
</form>
</tr>
こちらも基本は同じ<form>要素ですが、表の行全体を<form>から</form>で囲むことで表の行として入力項目を追加できるようにしています。
<input>要素でtype属性がnumberとなっているものは数値を入力する入力項目で、対応しているブラウザを使用した場合 (今はほとんどのブラウザが対応しています) には数値しか入力できないように強制を行います。
<input>要素でtype属性にdateを指定すると日付を入力する入力項目が指定できます。対応しているブラウザでは日付形式の入力が強制されるとともにカレンダー形式での入力も可能になります。
<select>要素はプルダウンメニューで入力値を選択する入力項目です。<select>と</select>の間に<option>要素を記述し、移動先のページに送信する値をvalue属性に設定、プルダウンメニューに表示する値を<select>と</select>の間に記述します。
画面上で「追加」ボタンをクリックすると、<form>内のsection, date, home, away, goals_for, goals_againstそれぞれに入力された値が設定されて移動先のページ、ここではadd_matchに送られます。
さて、ここで移動先のページについて考えます。
ユーザが節や得点を入れ忘れる、ホームとアウェイに同じチーム名を入れてしまう、重複して登録してしまうといったミスが発生する可能性があります。
また、設定情報は普通にhttpで送信されるので、不正なプログラム等が本来あってはいけない値を送ってくるかもしれません。
こういった事態に対応するため、入力を受け取る側のページでは送られた入力値のチェックを行う必要があることと、エラー内容によってページの構成が変わる場合があることを考えると、JSPはプログラムの見通しがあまりよくないことと、ページ構成が大きく変わるとHTMLとしての見通しも悪くなるということを考えるとあまり望ましいとは思えないため、今回はservletで実装することにしました。
試合情報追加のためのservletについては長くなるので次回とします。
0コメント