プレイリストを登録できるようにする
リポジトリを作成する。
PlayListRepository.java
package jp.abc;
import org.springframework.data.jpa.repository.JpaRepository;
public interface PlayListRepository extends JpaRepository<PlayList, Long> {
}
コントローラが、GETとPOSTメソッドを受け取るように修正する。
package jp.abc;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.Errors;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class PlayListController {
@Autowired
private PlayListRepository repository;
@RequestMapping(value = "/playlist", method = RequestMethod.GET)
public ModelAndView list(ModelAndView mav) {
mav.setViewName("playlist");
PlayList pl = new PlayList();
mav.addObject("formModel", pl);
List<PlayList> list = repository.findAll();
mav.addObject("datalist", list);
return mav;
}
@RequestMapping(value = "playlist", method = RequestMethod.POST)
public ModelAndView post(
@ModelAttribute("formModel") @Validated PlayList playlist,
Errors result,
ModelAndView mav) {
if (result.hasErrors()) {
mav.addObject("msg", "エラーですよ");
return mav;
}
repository.saveAndFlush(playlist);
return new ModelAndView("redirect:/playlist");
}
}
HTMLテンプレートを修正する。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>プレイリスト</title>
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
tr {
margin: 5px;
}
th {
padding: 5px;
color: white;
background: darkgray;
}
td {
padding: 5px;
color: black;
background: #f0f0f0;
}
.err {
color: red;
}
</style>
</head>
<body>
<h1>プレイリスト</h1>
<p th:text="${msg}"></p>
<form method="post" action="/playlist" th:object="${formModel}">
<table>
<tr>
<td><label for="name">名前</label></td>
<td>
<input type="text" name="name" th:value="*{name}"
th:errorclass="err" />
<div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:errorclass="err"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
<hr />
<table>
<tr>
<th>ID</th><th>名前</th>
</tr>
<tr th:each="obj : ${datalist}">
<td th:text="${obj.id}"></td>
<td th:text="${obj.name}"></td>
</tr>
</table>
</body>
</html>
PlayListとMusicを連携する
MusicからPlayListへの関連性を追加する。
package jp.abc;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
@Entity
public class Music {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column
@NotNull
private long id;
@Column(length = 200, nullable = false)
@NotEmpty
private String title;
@Column(length = 200, nullable = false)
@NotEmpty
private String artist;
@ManyToOne
private PlayList playlist;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getArtist() {
return artist;
}
public void setArtist(String artist) {
this.artist = artist;
}
@Override
public String toString() {
return "Music [title=" + title + ", artist=" + artist + "]";
}
public PlayList getPlaylist() {
return playlist;
}
public void setPlaylist(PlayList playlist) {
this.playlist = playlist;
}
}
PlayListからMusicへの関連性を追加する。
package jp.abc;
import java.util.List;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
@Entity
public class PlayList {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column
@NotNull
private long id;
@Column(length = 200, nullable = false)
@NotEmpty
private String name;
@OneToMany
private List<Music> musics;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<Music> getMusics() {
return musics;
}
public void setMusics(List<Music> musics) {
this.musics = musics;
}
}
Music を登録するHTMLテンプレート index.html に、プレイリストを設定するフィールドを追加する。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ミュージックプレイヤー</title>
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
tr {
margin: 5px;
}
th {
padding: 5px;
color: white;
background: darkgray;
}
td {
padding: 5px;
color: black;
background: #f0f0f0;
}
.err {
color: red;
}
</style>
</head>
<body>
<h1>ミュージックプレイヤー</h1>
<p th:text="${msg}"></p>
<form method="post" action="/" th:object="${formModel}">
<table>
<tr>
<td><label for="title">タイトル</label></td>
<td>
<input type="text" name="title" th:value="*{title}"
th:errorclass="err" />
<div th:if="${#fields.hasErrors('title')}" th:errors="*{title}"
th:errorclass="err"></div>
</td>
</tr>
<tr>
<td><label for="artist">アーティスト</label></td>
<td>
<input type="text" name="artist" th:value="*{artist}"
th:errorclass="err"/>
<div th:if="${#fields.hasErrors('artist')}" th:errors="*{artist}"
th:errorclass="err"></div>
</td>
</tr>
<tr>
<td><label for="playlist">プレイリスト</label></td>
<td>
<input type="text" name="playlist" th:value="*{playlist}"
th:errorclass="err"/>
<div th:if="${#fields.hasErrors('playlist')}" th:errors="*{playlist}"
th:errorclass="err"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
<hr />
<table>
<tr>
<th>ID</th><th>タイトル</th><th>アーティスト</th><th>編集</th><th>削除</th>
</tr>
<tr th:each="obj : ${datalist}">
<td th:text="${obj.id}"></td>
<td th:text="${obj.title}"></td>
<td th:text="${obj.artist}"></td>
<td><a th:href="@{'/edit/' + ${obj.id}}">編集</a></td>
<td><a th:href="@{'/delete/' + ${obj.id}}">削除</a></td>
</tr>
</table>
</body>
</html>
入力フォームの下に、Musicのリストを表示しているが、そこにプレイリスト名を表示する。
プレイリストがnullの場合は「プレイリストなし」と表示する。
<hr />
<table>
<tr>
<th>ID</th><th>タイトル</th><th>アーティスト</th><th>プレイリスト</th><th>編集</th><th>削除</th>
</tr>
<tr th:each="obj : ${datalist}">
<td th:text="${obj.id}"></td>
<td th:text="${obj.title}"></td>
<td th:text="${obj.artist}"></td>
<td th:if="${obj.playlist != null}" th:text="${obj.playlist.name}"></td>
<td th:if="${obj.playlist == null}" th:text="プレイリストなし"></td>
<td><a th:href="@{'/edit/' + ${obj.id}}">編集</a></td>
<td><a th:href="@{'/delete/' + ${obj.id}}">削除</a></td>
</tr>
</table>
Musicを編集できるようにする。
コントローラで編集のURLを受け付けるようにする。
@RequestMapping(value = "/edit/{id}")
public ModelAndView edit(@ModelAttribute Music music,
@PathVariable long id,
ModelAndView mav) {
mav.setViewName("edit");
mav.addObject("title", "edit music");
Optional<Music> data = repository.findById(id);
mav.addObject("formModel", data.get());
return mav;
}
HTMLテンプレート edit.html を作成する。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>top page</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
tr {
margin: 5px;
}
th {
padding: 5px;
color: white;
background: darkgray;
}
td {
padding: 5px;
color: black;
background: #f0f0f0;
}
</style>
</head>
<body>
<h1>Music edit page</h1>
<form method="post" action="/edit" th:object="${formModel}">
<input type="hidden" name="id" th:value="*{id}" />
<table>
<tr>
<td><label for="title">タイトル</label></td>
<td><input type="text" name="title" th:value="*{title}" /></td>
</tr>
<tr>
<td><label for="artist">アーティスト</label></td>
<td><input type="text" name="artist" th:value="*{artist}" /></td>
</tr>
<tr>
<td><label for="playlist">プレイリスト</label></td>
<td th:if="*{playlist != null}">
<input type="text" name="playlist" th:value="*{playlist.id}" />
</td>
<td th:if="*{playlist == null}">
<input type="text" name="playlist" value="" />
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
MusicController で POSTを受け付ける。
@RequestMapping(value = "/edit", method = RequestMethod.POST)
public ModelAndView form(@ModelAttribute @Validated Music music,
Errors result,
ModelAndView mav) {
if (result.hasErrors()) {
return mav;
}
repository.saveAndFlush(music);
return new ModelAndView("redirect:/");
}
