Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ScalaのWebアプリケーションフレームワーク「Play Framework」入門
~(3)CRUD操作を行うWebアプリケーションの作成 後編

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所 第14回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/06/20 14:00

 本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回も引き続き、Play2でデータベースにCRUD操作を行う簡単なWebアプリケーションを作る方法を取り上げます。

目次

 前回は「イベント管理アプリ」の登録機能を作成しました。Slickのコードジェネレータを使用して、DBアクセスに使用するオブジェクトを自動生成し、このオブジェクトを用いて作成しました。今回は、登録したイベント情報を参照するためのイベント検索一覧機能を作成し、さらに、更新機能・削除機能も追加していきます。

簡単アプリの開発(1)

(1)イベント検索一覧機能

 イベント検索一覧機能は、検索条件に「イベントID」と「イベント名」を指定し「検索」ボタンをクリックすると、条件に一致するデータをEVENTテーブルから検索し、一覧で表示するという機能とします。なお、「イベントID」は完全一致、「イベント名」は部分一致で検索できるようにします。

 まずはroutesに検索画面の初期表示URLと検索処理のURLを定義します。

routes(/conf)

GET     /event/                  controllers.event.EventSearch.index
POST    /event/search/           controllers.event.EventSearch.search

 次に画面を実装します。入力項目は「イベントID」「イベント名」とし、検索結果として一覧に表示する項目も同様とします。

[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>
            </tr>
          </thead>
          <tbody>
            @for((event) <- events){
              <tr>
                <td>@event.eventId</td>
                <td>@event.eventNm</td>
              </tr>
            }
          </tbody>
        </table>
      }
    </div>
  }
}

 検索条件入力用のテキストボックスはイベント登録画面と同様に「@helper.inputText」で作成し、検索結果は引数で受け取った「events:List[Tables.EventRow]」から表示します。Scalaテンプレートでは「@if」や「@for」のように「@」を利用してScalaのif文やfor文を記述することができます。Scalaテンプレートの詳しい記述方法はPlay公式ドキュメントの「The template engine」を参考にしてください。

 コントローラは画面入力情報のマッピングにはイベント登録同様「EventForm」ケースクラスを使用し、初期表示は「index」メソッドに検索処理は「search」メソッドに実装します。「index」は「eventSearch.scala.html」で初期画面を表示します。「search」は「eventForm.bindFromRequest.get」で受け取ったFormを検索条件として「Events」オブジェクトの「find」メソッドでEVENTテーブルを検索し、その結果を「eventSearch.scala.html」に渡します。

[Controller]EventSearch.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 }

object EventSearch extends Controller {

  /** イベントフォーム */
  val eventForm = Form(
    mapping(
      "eventId" -> text,
      "eventNm" -> text)(EventForm.apply)(EventForm.unapply))

  /** 初期表示 */
  def index = Action {
    Ok(views.html.event.eventSearch(eventForm, null))
  }

  /** 検索 */
  def search = Action { implicit request =>
    val form = eventForm.bindFromRequest
    val events = Events.find(form.get.eventId, form.get.eventNm)

    Ok(views.html.event.eventSearch(form, events))
  }
}

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 前出 祐吾(TIS株式会社)(マエデ ユウゴ)

    TIS株式会社 コーポレート本部 戦略技術センター所属。 これまで社内向けWebアプリケーションフレームワークの開発やJenkinsの活用を中心に様々な手段で開発の効率化を図ってきた。現在は、さらに革命的な効率化を目指し、Scalaを活用した次世代開発基盤の研究&開発に従事している。 システム開...

バックナンバー

連載:近未来の技術トレンドを先取り! 「Tech-Sketch」出張所

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5