システムエンジニアになりたいし、なってほしいし

~ 若いエンジニア中心の小さなシステム会社データライズのブログ ~

Spring bootを使ってみます ~ラジオボタンの入力値を受け取る~

 こんにちは。データライズ株式会社のエンジニア、Nootsです!

 今回はThymeleafを絡めた入力値の処理に挑戦してみたいと思います。例の如く、初心者の備忘録なので内容に誤りがあるかもしれません。その時はご指摘願います。

 同じような初心者の方の、少しでも助けになれば嬉しいです。

データベースを使わないプログラムで、入力フォームの処理をしよう!

 Springスタータープロジェクトを作成したら、自分で作成するのは4つのプログラムです。

目次

LanguageForm.java

public class LanguageForm {

    // 選択されたラジオボタン
    private String selectedLanguage;

    public String getSelectedLanguage() {
          return selectedLanguage;
    }

    public void setSelectedLanguage(String selectedLanguage) {
          this.selectedLanguage = selectedLanguage;
    }
}

 先ずはラジオボタンの値を処理するgetter/setterを作ります。特に変わったことはしてないと思います。

 単一の値を扱うラジオボタンは、これが分かりやすくていいですね。

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
   <meta charset="UTF-8"/>
   <title>トップページ</title>
</head>

<body bgcolor="#BEF781">

    <form action="./confirm" th:object="${languageForm}">
        <div th:each="item : ${languageMapItems}">
            <input type="radio" name="languages"
                th:value="${item.key}" th:text="${item.value}" th:field="*{selectedLanguage}"/>
        </div>

        <input type="submit" value="決定"/>
    </form>

</body>
</html>

 次はトップ画面兼入力画面です。

 後で作成するコントローラがラジオボタンの値をMapで送ってくるので、それを利用したコーディングになってます。ついでにMapの扱いも覚えられるとか、参考サイト様々ですね。

 ポイントは三点。

<form action="./confirm" th:object="${languageForm}">

 「th:object=“${languageForm}」によって、このフォームと先程作成した「LanguageForm.java」を紐付ける。

<div th:each="item : ${languageMapItems}">
    <input type="radio" name="languages"
        th:value="${item.key}" th:text="${item.value}" th:field="*{selectedLanguage}"/>
</div>

 1行目は簡単で、Mapの中身を全部処理するまで繰り返すというやつ。

 2, 3行目にまたがったinputタグですが、大切なのは3行目ですね。

 送信する値はMapのキー→「th:value=“${item.key}"」。

 ラジオボタンの選択肢として表示するのはMapのValue→「th:text=“${item.value}"」。

 そして、「th:field=“*{selectedLanguage}"」ですが……。参考サイトがあまりなくてはっきりしないのですが、こいつを書いてあげると「LanguageForm.java」の「selectedLanguage」にラジオボタンの選択値を送ってあげられるようです。詳しく説明できる方求む。

 

confirm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8"/>
   <title>確認</title>
</head>

<body bgcolor="#BEF781">

    <div th:object="${languageForm}">
        <p th:text="*{selectedLanguage}"></p>が選択されました
    </div>

</body>
</html>

 結果を表示するhtmlです。

 th:object=“${languageForm}"でlanguageFormを使うことを教えてあげて、th:text=”*{selectedLanguage}“を書くことで、「languageForm」にセットされている「selectedLanguage」を取得するって感じですかね。

LanguageController.java

import java.util.LinkedHashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class LanguageController {

    // トップページ
    @RequestMapping(value = "/language")
    public String index(Model model) {

        // ラジオボタンの選択肢
        Map<String, String> languageMap = new LinkedHashMap<String, String>();
        languageMap.put("key_java", "Java");
        languageMap.put("key_python", "Python");
        languageMap.put("key_ruby", "Ruby");

        model.addAttribute("languageMapItems",languageMap);

        // ビューの表示時にインスタンスを渡さないとエラーが出るので、その対策
        model.addAttribute("languageForm", new LanguageForm());
        return "index";
    }

    // 確認ページ
    @RequestMapping(value = "/confirm", method = RequestMethod.GET)
    public String confirm(@ModelAttribute LanguageForm languageForm, Model model) {
        return "confirm";
    }
}

 2つのビューを処理するため、それぞれのメソッドを作ります。

 index用のメソッドはだいたい前回と同じですが、languageFormのインスタンスを渡してあげないと、ビューの生成時にここでを吐くので注意。

 confirm用のメソッドは、「@ModelAttribute」を使用してあげることでLanguageFormオブジェクトのインスタンスとしてフォームの値を取得出来るらしいです。

 

実行

トップ画面兼入力画面

f:id:noots_datalyze:20170805152129p:plain

確認画面

f:id:noots_datalyze:20170805152156p:plain

感想

 既に難しい。

 理解の怪しい部分が確認できるという点で、ブログの記事にするのはいいかもしれない。

 「th:field」の正確な用途とか、「使用するメソッドの判定の仕方」とか(なんでビュー毎に使い分けられてるの?)。

 分かる人いたら教えてほしいですね。

 同じように初心者でプログラミングに挑戦する人には申し訳ないけど……、頼りになる参考サイトさんたちを貼っておきますので、そちらも確認してください。

 挑戦しているうちに理解できるようにしないと!

 次はデータベースを使ってみるか、他の入力フォームに挑戦するかしてみたいと思います。

前回までの内容

datalyze.hatenablog.com

datalyze.hatenablog.com

参考サイト

パラメータを受け取りコントローラで処理する – Teaching Programming

Spring Boot フォーム関連のサンプルコード (Thymeleaf) - Qoosky

テンプレート・エンジンThymeleafのチュートリアルを読む(1) - M12i.

Spring Boot でフォームの値を取得して操作 - Qiita