SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回は「イベント管理アプリ」の登録機能を作成しました。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))
  }
}

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
簡単アプリの開発(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
近未来の技術トレンドを先取り! 「Tech-Sketch」出張所連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7817 2014/06/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング