簡単アプリの開発（3）
（2）イベント更新機能
イベント検索画面の検索結果一覧から更新したいデータを選択することでイベント更新画面を表示します。イベント更新画面には選択したイベントの「イベントID」と「イベント名」が表示され、値を編集し「更新」ボタンをクリックすると、その内容でEVENTテーブルを更新するという機能とします。
まずはroutesに更新画面の初期表示URLと更新処理のURLを定義します。更新対象データを特定するため、それぞれデータのキーにあたる「id」を引数とします。
routes（/conf）
GET /event/:id/update/ controllers.event.EventUpdate.index(id: Int) POST /event/:id/ controllers.event.EventUpdate.update(id: Int)
URLに「:id」のように変数名の前に「:」をつけて定義すると、「index(id: Int)」という形で、コントローラ呼び出し時の引数として指定することができます。例えば、上記「routes」ファイルの1行目のような定義をすると、「/event/100/update/」というURLにGETリクエストを受けた場合、「controllers.event.EventUpdate.index(100)」という形で「index」メソッドが呼び出されます。
次にイベント更新画面を作成します。入力項目は「イベントID」と「イベント名」です。
［View］eventUpdate.scala.html（/app/views/event）
@(eventForm: Form[EventForm], id: Int)
@import helper.twitterBootstrap._
@main("イベント情報変更") {
@helper.form(action = controllers.event.routes.EventUpdate.update(id)){
<div class="container">
<fieldset>
<legend>イベントの情報</legend>
@helper.inputText(eventForm("eventId"))
@helper.inputText(eventForm("eventNm"))
<input type="submit" value="更新" class="btn btn-primary">
</fieldset>
</div>
}
}
更新するためのキーとして「id」を引数として受け取り、「更新」ボタンをクリックすると、「EventUpdate」オブジェクトの「update」に「id」を引数としてSubmitします。
コントローラには初期表示の「index」メソッドとイベント更新の「update」メソッドを作成します。
［Controller］EventUpdate.scala（/app/controllers/event）
package controllers.event
import play.api._
import play.api.mvc._
import play.api.data.Form
import play.api.data.Forms._
import models.{ EventForm, Events }
import models.Tables.EventRow
object EventUpdate extends Controller {
/** イベントフォーム */
val eventForm = Form(
mapping(
"eventId" -> text,
"eventNm" -> text)(EventForm.apply)(EventForm.unapply))
/** 初期表示 */
def index(id: Int) = Action {
val event = Events.findById(id)
val form = EventForm(event.eventId, event.eventNm)
Ok(views.html.event.eventUpdate(eventForm.fill(form), id))
}
/** 更新 */
def update(id: Int) = Action { implicit request =>
val form = eventForm.bindFromRequest.get
val event = EventRow(id, form.eventId, form.eventNm)
Events.update(event)
Ok(views.html.event.eventUpdate(eventForm, id))
}
}
「index」は「id」を引数として受け取り、「Events」オブジェクトの「findById」で更新対象のイベントデータを取得、そのデータを「EventForm」に詰めて、「eventUpdate.scala.html」に渡します。「update」は「id」と更新対象データを画面から受け取り「Events」オブジェクトの「update」メソッドでイベントデータを更新し、元の画面を表示します。
「Events」オブジェクトに「findById」と「update」メソッドを実装します。「findById」はEVENTテーブルのキーである「id」を引数として受け取り、EVENTテーブルを検索し、得た結果を「EventRow」クラスで返します。「update」は「EventRow」クラスを引数で受け取り、その内容で「id」をキーとしてEVENTテーブルを更新します。
［Model］Events.scala（/app/models）
/** ID検索 */
def findById(id: Int): EventRow =
database.withTransaction { implicit session: Session =>
Event.filter(_.id === id).first
}
/** 更新 */
def update(e: EventRow) = database.withTransaction { implicit session: Session =>
Event.filter(_.id === e.id).update(e)
}
イベント検索画面から更新したいデータを選択し更新画面に遷移できるように、検索結果一覧の右端にリンク用のアイコンを作成しておきます。
［View］eventSearch.scala.html（/app/views/event）
@(eventForm: Form[EventForm], events: List[Tables.EventRow])
@import helper.twitterBootstrap._
@main("イベント検索") {
@helper.form(action = controllers.event.routes.EventSearch.search()){
<div class="container">
<fieldset>
<legend>検索条件</legend>
@helper.inputText(eventForm("eventId"))
@helper.inputText(eventForm("eventNm"))
<button type="submit" class="btn btn-primary">検索</button>
</fieldset>
@if(events) {
<legend>イベント一覧</legend>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>イベントID</th>
<th>イベント名</th>
<th></th>
</tr>
</thead>
<tbody>
@for((event) <- events){
<tr>
<td>@event.eventId</td>
<td>@event.eventNm</td>
<td>
<a href="@controllers.event.routes.EventUpdate.index(event.id)">
<i class="glyphicon glyphicon-edit"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
}
</div>
}
}
以上でイベント更新画面が実装できましたので、画面から確認してみましょう。まずはイベント検索画面を表示し検索を行います。
先ほど登録したデータが表示されましたので、検索結果一覧の一番右の列に表示された更新アイコンをクリックし更新画面を表示します。イベント更新画面が表示されたらデータを編集し更新してみましょう。
更新が終わったら、イベント検索画面で結果を確認してみましょう。
