データベース

エンティティクラス（テーブルに相当）を作成

Recipe.java

package com.example.demo;

import jakarta.persistence.Column; //追記
import jakarta.persistence.Entity; //追記
import jakarta.persistence.GeneratedValue; //追記
import jakarta.persistence.GenerationType; //追記
import jakarta.persistence.Id; //追記
import jakarta.persistence.Table; //追記

@Entity
@Table(name="recipes")
public class Recipe {
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column
	private long id;
	
	@Column(length=50,nullable=false)
	private String name; //レシピと料理名は一対一なのでリレーションなし
	
	
	
	@Column
	private String comment; //レシピとコメントの記述は一対多なのでdescriptionsテーブルにrecipe_id
	
	@Column
	private int cooking_time; //レシピと料理時間は一対一なのでリレーションなし
	
	@Column
	private int servings; //レシピと人数は一対一なのでリレーションなし
	
	@Column
	private int user_id; //レシピと投稿ユーザーは多対一なのでrecipesテーブルがuser_idをもつ
	
	@Column
	private String main_image; //レシピとメイン画像は一対一なのでリレーションなし
	
	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 String getComment() {
		return comment;
	}
	public void setComment(String comment) {
		this.comment = comment;
	}
	public int getCookingTime() {
		return cooking_time;
	}
	public void setCookingTime(int cooking_time) {
		this.cooking_time = cooking_time;
	}
	public int getServings() {
		return servings;
	}
	public void setServings(int servings) {
		this.servings = servings;
	}
	public int getUser() {
		return user_id;
	}
	public void setUser(int user_id) {
		this.user_id = user_id;
	}
	public String getMainImg() {
		return main_image;
	}
	public void setMainImg(String MainImg) {
		this.main_image = MainImg;
	}
}

対応するDBを作成

方法は二つ

MySQLなどで手動でSQLかいてテーブル作成
pring Boot に自動でテーブルを作らせる（推奨）
以下を追記

application.properties

spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/your_db_name?useSSL=false&serverTimezone=UTC
spring.datasource.username=your_user
spring.datasource.password=your_pass
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true

ただし

MySQLに接続できる状態になっていること（DBとユーザーが作られている）が前提
本番運用では ddl-auto=none か validate を推奨

リポジトリ階層でエラー

アプリ起動→エラーでた！
原因はリポジトリの階層

com.example.demo                      ← 起点（@SpringBootApplicationがある）
 ├── HelloController.java
 ├── Recipe.java
com.example.recipe_appRepository      ← リポジトリ（別階層）
 ├── CookingRepository.java

→これだとrecipe_appRepository が demo パッケージの外にあるので、Spring Boot はデフォルトのスキャンでは見つけてくれない
→CookingRepository を demo 配下に移動して解決

サービスクラス

コントローラにはリクエストやレスポンス対応、サービスクラスにはDB操作などビジネスロジックを集中させる

RecipeService.java

package com.example.demo.Services;
import java.util.Optional;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.example.demo.Recipe;
import com.example.demo.repository.CookingRepository;

@Service
public class RecipeService {
private final CookingRepository repository;
public RecipeService(CookingRepository repository) {
	this.repository = repository;
}
public Optional<Recipe> findById(long id) {
	//リポジトリの既存メソッドを引数渡して呼び出す
	return repository.findById(id);
}
@Transactional
public void deleteById(long id) {
	repository.deleteById(id);
}

}

Servicesパッケージの中にサービスクラス作成

コンストラクタインジェクション

Spring Boot はアプリ起動時に次のことをする

@Service や @Repository, @Controller(Beanとして登録されたって証) などが付いたクラスを見つける
それらを自動でインスタンス化（new みたいなこと）する（この作成されたインスタンスを「Bean（ビーン）」と呼ぶ）
それを使いたい場所に「注入（インジェクション）」する→RecipeService recipeService という引数を見て、Springは「あっ、RecipeService のインスタンス（Bean）なら持ってるから、ここに渡してあげよう」ってする

今までは@Autowiredを使って＠RepositoryがついたCookingRepositoryのインスタンスを自動的に注入してた
→コンストラクタインジェクションに変更
→final でプロパティ（フィールド）を宣言しておいて、コンストラクタで注入するのが今の主流の書き方
例：DeleteControllerとサービスクラスを分離したときのインジェクション

DeleteController.java

package com.example.demo;
import java.util.List;

import java.util.Optional;

import jakarta.transaction.Transactional;
import jakarta.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.Recipe;
import com.example.demo.repository.CookingRepository;
import org.springframework.web.bind.annotation.RequestParam;
import com.example.demo.Services.RecipeService;

@Controller
public class DeleteController {

    //コンストラクタインジェクションでRecipeServiceを扱えるようにする
	private final RecipeService recipeService;
	public DeleteController(RecipeService recipeService) {
		this.recipeService = recipeService;
	}
	
	//特定のIDのリソースを画面表示
	@RequestMapping(value="/delete/{id}",method= RequestMethod.GET)
	public ModelAndView delete(@PathVariable int id,ModelAndView mav) {
		mav.setViewName("delete");
		mav.addObject("msg","どのレシピを削除しますか？");
		Optional<Recipe> data = recipeService.findById((long)id);
		if(data.isPresent()) {
			mav.addObject("formModel",data.get());
		}else if(data.isEmpty()){
			mav.addObject("formModel",null);
			mav.addObject("message","データがみつかりません");
		}
		return mav;
	}
	
	@PostMapping("/delete_clicked")
	public ModelAndView remove(@RequestParam long id,ModelAndView mav) {
		recipeService.deleteById(id);
		return new ModelAndView("redirect:/");
	}
}

検索(リダイレクトなし)

フロー

[ユーザーのブラウザ]
        │
        ▼
  index.html（検索フォーム）
  ┌──────────────────────────────┐
  │ <form method="get" action="/search"> │
  │   <input name="dish-name">           │
  │   <button>検索</button>              │
  └──────────────────────────────┘
  
  ★★　クエリパラメータのしくみ　★★　
  inputタグのname属性＝クエリパラメータのキー名とすることで
  inputタグに入れられた検索キーワード＝クエリパラメータの値とすることができる
  
        │
        ▼
 GETリクエスト（/search?dish-name=〇〇）
        │
        ▼
[Spring Bootのコントローラー]
  SearchController#search()
  ┌─────────────────────────────────────────────┐
  │ @RequestParam("dish-name") → 値はkeywordに格納   
  │ mod.addAttribute("hoge", keyword)  hogeに値が渡る│
  │ return "index";  → index.htmlに戻る          │
  └─────────────────────────────────────────────┘
        │
        ▼
 Thymeleafテンプレートエンジンが index.html を処理
 ┌───────────────────────────────────────────────┐
 │ <p th:text="${hoge} + 'に関する検索結果を表示します'> │
 │   → 例:「カレーに関する検索結果を表示します」       │
 └───────────────────────────────────────────────┘
        │
        ▼
[ユーザーのブラウザに表示]
「カレーに関する検索結果を表示します」

Model

Modelとはコントローラとビューの間でデータをやり取りする役割を持つオブジェクト
コントローラで生成したデータをビューに渡せる
addAttributeメソッドでViewで使う変数とその変数に格納したいデータを定義

@RequestParam(クエリパラメータ)

クエリパラメータの役割を提供
ブラウザからサーバーに検索キーワード、ページ番号、並び順などの追加条件やオプションを渡すときに使用

コントローラーからの変数の受け取り

タイムリーフ構文のなかで${変数}とする

コード

index.html

<body>
 	<p>レシピを検索してください</p>
 	<form method="get" action="/search">
 		<input type="text" name="dish-name" placeholder="料理名をどうぞ">
 		<button type="submit">検索</button>
 	</form>
 	
 	<p th:text="${hoge}+'に関する検索結果を表示します'"></p>
 </body>

SearchControeller.java

package com.example.demo;
 
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod; //追記
import org.springframework.web.bind.annotation.RequestParam; ///追記
 
 
 @Controller
 public class SearchController {
 	@RequestMapping(value="/search",method=RequestMethod.GET)
 	//クエリパラメータ dish-name を keyword 変数に格納
 	public String search(@RequestParam("dish-name") String keyword,Model mod) {
 		mod.addAttribute("hoge",keyword);
 		return "index";
 	}
 }

Create

フロー

[ユーザーのブラウザ]
        │
        ▼
 GET /create リクエスト
        │
        ▼
[NewController#create()]
  ┌─────────────────────────────────────────────┐
  │ ModelAndView:                               │
  │   - View指定: "create"                      │
  │   - 変数title: "新しいレシピを作ってください！"│
  │   - formModel: new Recipe()                 │
  └─────────────────────────────────────────────┘
  空のformModel変数にRecipeクラスのインスタンスを作成＆格納してビューに渡す
        │
        ▼
[create.html]（Thymeleafで表示）
  ┌──────────────────────────────────────┐
  │ <form th:object="${formModel}">      │
  │   <input th:field="*{name}">         │ ← Recipe.name
  │   <input th:field="*{comment}">      │ ← Recipe.comment
  └──────────────────────────────────────┘
        │
        ▼
[ユーザーがフォームに入力]（Recipeのプロパティを入力してもらう）
  例：name=カレー, comment=簡単に作れるよ
        │
        ▼
 POST /create リクエスト（form送信）
 FormModel.name=カレー,FormModel.comment=簡単に作れるよなどをformModel（Recipeオブジェクト）に格納してコントローラーに送信
        │
        ▼
[NewController#post()]
@ModelAttributeでFormModel→Recipeオブジェクトに変換して
recipe.name,recipe.commentにする
  ┌─────────────────────────────────────────────┐
  │ @ModelAttribute("formModel") Recipe recipe   │
  │ repository.saveAndFlush(recipe);             │ ← DB保存
  │ return redirect:/                            │ ← トップへリダイレクト
  └─────────────────────────────────────────────┘
        │
        ▼
[データベース]
  ┌────────────────────────────┐
  │ Recipeエンティティに保存     │
  │ id, name="カレー", comment=...│
  └────────────────────────────┘
        │
        ▼
[トップページへリダイレクト]

ModelAttribute(フォームをオブジェクトに)

リクエストパラメータ（フォームの値）をオブジェクトに変換し、Controllerの引数として受け取れるアノテーション
HTMLフォームを th:object="formModel"とすることで、そのフォームは formModel という名前のオブジェクトとつながる
→formModel.name, formModel.comment としてコントローラーにデータが送信される
→送信されたデータをRecipe型変数recipe の name, comment プロパティにマッピングしたいので@ModelAttribute("フォームのオブジェクト名") 型　受け取る変数とすることで
formModel.name(=カレー), formModel.comment(=簡単に作れるよ)が
recipe.name(=カレー), recipe.comment(=簡単に作れるよ)になる
あとはリポジトリを通じて（＝リポジトリのメソッドで）それを保存すればDB保存ができる

コード

リポジトリ

CookingRepository.java

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.example.demo.Recipe;

public interface CookingRepository extends JpaRepository<Recipe,Long>{
//リポジトリと接続したいエンティティクラスとその主キーの型を指定
}

ビュー

create.html

<!DOCTYPE html>
 
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
</head>
<body>
	<form name="new" action="/create" method="post" th:object="${formModel}">
		<label for="dish-name">料理名</label>
		<input type="text" name="name" id="dish-name" th:field="*{name}">
		
		
		<label for="dish-comment">コメント</label>
		<input type="text" name="comment" id="dish-comment" th:field="*{comment}">
		<input type="submit"  class="btn btn-primary"value="作成"/>
	</form>
</body>
</html>

inputタグのid属性とlabelのfor属性は基本的に一致させる
→ラベルをクリックしたときに対応する入力欄にフォーカスが当たるようになる
nullable = false＝「データベースでNULL禁止」似ているけどrequired = trueは画面（HTMLフォームなど）レベルで「この入力フィールドは必須」というバリデーションを意味する

コントローラー

NewController.java

package com.example.demo;
import jakarta.transaction.Transactional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.repository.CookingRepository;

@Controller


public class NewController {
	@Autowired
	CookingRepository repository;
//Createページを表示
	@RequestMapping(value="/create")
	public ModelAndView create(ModelAndView mav) {
		mav.setViewName("create");
		mav.addObject("title","新しいレシピを作ってください！");
		mav.addObject("formModel", new Recipe()); // ← これを追加
		return mav;
	}
//サーバーに新しいデータを送信
	
	@Transactional
	@PostMapping("/create")
	public ModelAndView post(@ModelAttribute("formModel") Recipe recipe, ModelAndView mav) {
		mav.setViewName("create");
		repository.saveAndFlush(recipe);
		return new ModelAndView("redirect:/");
	}
}

Update

フロー

【① 編集画面の表示（GET /edit/{id}）】

         [ ユーザーがURLにアクセス ]
                    |
                /edit/5
                    ↓
       ┌────────────────────────────┐
       │ UpdateController.edit(...) │ ← @PathVariable で id=5 を受け取る
       └────────────────────────────┘
                    ↓
      repository.findById(5) でデータ取得
                    ↓
      Optional<Recipe> data に格納
         ↓            ↓
 [あれば] data.get() で取り出す
 [なければ] null ＋ メッセージ表示
                    ↓
     formModel として View に渡す
                    ↓
          ┌────────────────┐
          │   edit.html    │
          └────────────────┘
                    ↓
      th:object="${formModel}" を使い
      th:field="*{name}", *{comment} で
      料理名・コメントを初期表示！

---------------------------------------------------

【② 編集内容を送信して更新（POST /edit）】

         [ ユーザーが編集して「更新」押下 ]
                    ↓
       フォームが POST /edit を送信
         name, comment, id を含む
                    ↓
     ┌────────────────────────────┐
     │ UpdateController.update(...)│
     └────────────────────────────┘
                    ↓
@ModelAttribute Recipe recipe に
フォームの内容がバインドされる
  recipe.id = 5, name = ..., comment = ...
                    ↓
repository.saveAndFlush(recipe) により
  → 既存IDのレコードが更新される！
                    ↓
     redirect:/ にリダイレクト（トップへ）

PathVariable

ユーザーIDや記事IDなど特定のリソースへのアクセス時に使用
URLの一部（＝パスパラメータ）をメソッド引数にバインドするためのアノテーション
リクエストマッピングのルート指定の部分で{}部分をパスパラメータとして取得→@PathVariableのついた変数に格納

ユーザーがアクセス：     /edit/5
                            ↓
URLマッピング：         /edit/{id}
                            ↓
@PathVariable で受け取る：  int id = 5

ModelAndView

データと画面の指定を同時に行えるクラス
データと画面を指定して最後にreturnすれば指定したテンプレートに指定したデータが渡る

コード

コントローラー

UpdateController.java

package com.example.demo;
import java.util.List;
import java.util.Optional;

import jakarta.transaction.Transactional;
import jakarta.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.bind.annotation.PostMapping;

import com.example.demo.Recipe;
import com.example.demo.repository.CookingRepository;

@Controller
public class UpdateController {
@Autowired
CookingRepository repository;
@RequestMapping("/edit/{id}")//パスパラメータ
public ModelAndView edit(ModelAndView mav,@PathVariable int id) {
	mav.setViewName("edit");
	Optional<Recipe> data = repository.findById((long)id);
	if(data.isPresent()) {
		mav.addObject("formModel",data.get());	
	}else if(data.isEmpty()){
		mav.addObject("formModel",null);
		mav.addObject("message","データが見つかりません");
	}
	
	return mav;
}
//保存
@PostMapping("/edit")
@Transactional
public ModelAndView update(@ModelAttribute Recipe recipe,ModelAndView mav) {
	repository.saveAndFlush(recipe);
	return new ModelAndView("redirect:/");
}
}

Optional は「値があるかもしれないし、ないかもしれない」ということを表すJavaのクラス
→レコードが見つかれば Optional に中身が入っていて、見つからなければ中身が「空（empty）」
data は Optional 型
→data.get() をすると、中にある Recipe インスタンスを取り出すことができる

ビュー

edit.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レシピの変更</title>
</head>
<body>
	<div th:if="${formModel==null}">
		<p th:text="${message}"></p>
	</div>
			<div th:if="${formModel != null}">
				<form name="update" action="/edit" method="post" th:object="${formModel}">
						<input type="hidden" name="id" th:field="*{id}"/>
						<label for="dish-name">料理名</label>
						<input type="text" name="name" id="dish-name" th:field="*{name}">
						
						
						<label for="dish-comment">コメント</label>
						<input type="text" name="comment" id="dish-comment" th:field="*{comment}">
						<input type="submit"  class="btn btn-primary"value="更新"/>
				</form>
			</div>
	
</body>
</html>

Delete

フロー

【① 削除画面の表示（GET /delete/{id}）】

         [ ユーザーがURLにアクセス ]
                    |
                /delete/3
                    ↓
       ┌────────────────────────────┐
       │ DeleteController.delete(...) │ ← @PathVariable で id=3 を受け取る
       └────────────────────────────┘
                    ↓
        recipeService.findById(3) でデータ取得
                    ↓
        Optional<Recipe> data に格納
           ↓            ↓
     [あれば] data.get() で取り出す
     [なければ] null ＋ エラーメッセージ
                    ↓
        formModel として View に渡す
                    ↓
          ┌────────────────┐
          │   delete.html   │
          └────────────────┘
                    ↓
     th:object="${formModel}" によりフォーム構成
     th:text="*{name}", *{comment} でレシピ情報を表示！


【② 削除実行（POST /delete_clicked）】

        [ ユーザーが「削除」ボタン押下 ]
                    ↓
     フォームが POST /delete_clicked を送信
         （hidden の id を含む）
                    ↓
     ┌────────────────────────────┐
     │ DeleteController.remove(...) │ ← @RequestParam long id で受け取る
     └────────────────────────────┘
                    ↓
        recipeService.deleteById(id)
           → IDに対応するレコードを削除！
                    ↓
        new ModelAndView("redirect:/")
           → トップページへリダイレクト！

コード

DeleteController.java

package com.example.demo;
import java.util.List;


import java.util.Optional;

import jakarta.transaction.Transactional;
import jakarta.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.Recipe;
import com.example.demo.repository.CookingRepository;
import org.springframework.web.bind.annotation.RequestParam;
import com.example.demo.Services.RecipeService;

@Controller
public class DeleteController {
	
	private final RecipeService recipeService;
	public DeleteController(RecipeService recipeService) {
		this.recipeService = recipeService;
	}
	
	//特定のIDのリソースを画面表示
	@RequestMapping(value="/delete/{id}",method= RequestMethod.GET)
	public ModelAndView delete(@PathVariable int id,ModelAndView mav) {
		mav.setViewName("delete");
		mav.addObject("msg","どのレシピを削除しますか？");
		Optional<Recipe> data = recipeService.findById((long)id);
		if(data.isPresent()) {
			mav.addObject("formModel",data.get());
		}else if(data.isEmpty()){
			mav.addObject("formModel",null);
			mav.addObject("message","データがみつかりません");
		}
		return mav;
	}
	
	@PostMapping("/delete_clicked")
	
	public ModelAndView remove(@RequestParam long id,ModelAndView mav) {
		recipeService.deleteById(id);
		return new ModelAndView("redirect:/");
	}
}

delete.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>削除画面</title>
</head>
<body>
<p th:text="${msg}"></p>
<div th:if="${formModel == null}">
	<p th:text="${message}"></p>
</div>
<div th:if="${formModel != null}">
<form name="eliminate" method="post" action="/delete_clicked" th:object="${formModel}">
	<input type="hidden" name="id" th:field="*{id}"/>
	<ul>
	      <li>料理名：  <span th:text="*{name}"></span></li>
	      <li>コメント： <span th:text="*{comment}"></span></li>

	 </ul>
	<input type="submit"  class="btn btn-primary"value="削除"/>
</form>
</div>
</body>
</html>

🔄 補足：もし @ModelAttribute を使ったら？
フォームで複数フィールド（nameやcomment）を送信する場合は、こういう形にもできる：

ex.java

@PostMapping("/delete_clicked")
public String remove(@ModelAttribute Recipe formModel) {
    repository.deleteById(formModel.getId());
    return "redirect:/";
}

フォームの各フィールド（idやnameなど）の値をRecipeクラスの該当するフィールドに自動でセットして、できあがったRecipeオブジェクトをformModelという変数名で使えるようにしている
（POST送信されたらようやく一人前のRecipeオブジェクトに進化して、formModelという変数に格納して使えるようになったイメージ）

変数の値がnullの場合はテキストを非表示にする

JSによる解決はどうか？
→th:text="${hoge}+'に関する検索結果を表示します'" はサーバーサイド（Thymeleaf）で処理されるため、JavaScriptで操作する前にHTMLとして出力されてしまう
→JavaScriptで非表示にするには、HTMLを一度出力してから非表示にすることになるため、不自然（SEO的にもよくない）
Thymeleafでは ${hoge} が null や空文字かどうかを条件分岐できる
→th:if 属性を使えば、条件を満たさないときはそのタグ自体が出力されない

ex.html

<p th:if="${hoge ! = null and !#strings.isEmpty(hoge)}"
	th:text="${hoge}+'に関する検索結果を表示します'"></p>

${...}：Thymeleafの式評価。Model に渡された値をここで参照
hoge ! = null→モデル変数 hoge が null でないことを確認
#strings は Thymeleaf のビルトインオブジェクト「文字列ユーティリティ」
isEmpty(...) は Javaの String.isEmpty() と同様で、文字列が ""（長さ0）かどうかを判定
!#strings.isEmpty(hoge) は「hogeが空文字じゃない」という意味
「かつ」は&&ではなくandなので書き間違い注意

コントローラー側でnullチェックして、必要なときだけ値を渡す方法もある

ex.html

<!-- 例: JSPの場合 -->
<c:if test="${showResult}">
  <p>${hoge}に関する検索結果を表示します</p>
</c:if>

Controller.java

@RequestMapping("/search")
public String search(@RequestParam(value = "dish-name", required = false) String keyword, Model model) {
    boolean showResult = keyword != null && !keyword.trim().isEmpty();
    model.addAttribute("showResult", showResult);
    model.addAttribute("hoge", keyword);
    return "index";
}

required = false→このパラメータが無くてもエラーにしないという意味
デフォルトでは @RequestParam は必須（required = true）なので、URLに ?dish-name= が無いと Spring はエラーを出す
例えばhttp://localhost:8080/searchというアクセスしたらdish-name が指定されていないため、required = false をつけておかないとエラーになる