Spring + Thymeleaf + My Batisで行うCRUD操作　～Create編～

<h1>・はじめに</h1>
　この記事ではCRUD操作のデータを登録するCreate操作についてのやり方について書いていきます。SQLとのやり取りを簡単にするためにMy Batisを使用します。また、データクラスの記述を省略するためにLombokを使用しています。
<br>　今回は読んだ本を登録するという機能のページを作っていきます。
<br><br>
<h2>～用意するクラス～</h2>
　<b>・Controllerクラス<br></b>
　　　VIEWとModelを扱うServiceクラスとやり取りして必要な情報を取り出す司令塔的役割のクラス。<br><br>

　<b>・データクラス</b>
　　　使いたいデータのクラス。ログイン処理を行いたいのならログインに必要なデータ、例えばIDやパスワードを設定する。 LomBokの@DataをつけることによってSetterとGetterの文を省略します。

　<b>・Serviceクラス</b>
　　　Modelとやり取りするクラス。SQLとやり取りしてデータの登録、取り出し、更新、削除を行わせるクラス。

　<b>・Mapperクラス</b>
　　　My Batisを導入すると使えるもの。@Mapperを付けたクラスではSQLの操作をすることができ、メソッドに@Select, @Insert, @Update, @Deleteをつけることによって簡単にデータの登録、取り出し、更新、削除がでできます。

　<b>・SQLの設定</b>
　　　Springでは`schema.sql`でSQLのテーブルを作ることができます。事前にデータを入れたい場合は`data.sql`で設定できます。

　<b>・HTMLファイル</b>
　　　見た目に当たるものです。今回は簡単に作ります。


<h1>・事前準備</h1>
　　　あらかじめ行わなければならないことはSQLの設定です。SQLのテーブルを作り、そこに本のデータを登録します。<br><br>　　　今回は<b>ID</b>、<b>本の名前</b>、<b>出版社</b>を設定します。IDはユーザーが決めるのでなく、自動的に登録されるようにします。そのため、自動的に数字を登録してくれる<b>AUTO_INCREMENT</b>を入れます。そして主キー設定である<b>PRIMARY KEY</b>も設定します。<br><br>

　　　テーブルは`schema.sql`にSQL文を書くことによって作ることができます。<br><br>

```SQL:schema.sql
    DROP TABLE IF EXISTS Book;

    CREATE TABLE Book (
        bookId INTEGER PRIMARY KEY AUTO_INCREMENT,
        book_name VARCHAR(255),
        publisher VARCHAR(255)
);
```

<h1>・コードを書いていく</h1>

<h2>・HTMLファイルの設定</h2>
　　　　今回のHTMLファイルは簡単なものにします。必要なページはアカウント登録の情報を入れてもらうフォーム形式にします。HTMLファイルの名前は`torokuHTML`にします。<br>
　　　　

Thymeleafの連携のために htmlタグの中に`xmlns:th="http://www.thymeleaf.org`を入れます。これでThymeleafとの連携が可能です。そしてThymeleafの機能を使うためには、前に<b>th</b>を付けることによって使うことができます。例えばリンクを貼りたい場合は<b>th:href</b>です。そしてリンク先をコントローラーで設定したリンクにしたい場合は<b>@{　}</b>の中にリンクを書くとそこに飛ぶようにできます。

```HTML:torokuHTML.html
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
        <head> ～省略～ </head>
        <body>
            <h3>会員登録ページ</h3>
            <form th:action="@{/toroku/create}" th:method="@{post}">
                  <label>本の名前：</label>
                  <input type="text" name="book_name" /><br>
                  <label>出版社：</label>
                  <input type="text" name="publisher" /><br>
                  <button type="submit">登録</button>
            </form>
        </body>
    </html>
```




<h2>・Controllerクラスの設定

　　　　次に、Controllerクラスの設定をします。今回は会員登録をするので`/toroku`というページに飛ぶと、登録フォームのページがででくる設定にします。さらに`/toroku/create`はサービスを呼び出し、入力された情報をSQLに登録するものにします。

```Java:Controller
    
    @Autowired
    BookService bookService;
    
    @RequestMapping("/toroku")
    public String torokuPage() {
        
        return "torokuHTML";
    }

    @PostMapping("/toroku/create")
    public String toroku(Book book) {
         //後で設定するサービスクラス
         bookService.insertBookService(book);

          return "redirect:/toroku";
    }
}
```

これで`/toroku`にいくと、torokuHTMLのページが表示されるようになります。

<h2>・データクラスの設定</h2>

　　　次に、データクラスの設定を行います。今回は`本のID`と`本の名前`と`出版社`を設定します。

```Java:Book.java
   @Data
    public class Book {
       private int bookId;
       private String book_name;
       private String publisher;
}
```

データクラスはこれで完成です。

<h2>・Mapperクラス</h2>
　　　次に、Mapperクラスの設定を行います。今回はCreate編なので@Insertをしていきます。My Batisの@Mapperはインターフェースにつけます。<br>
　　　そしてメソッドに使いたいSQL文(Select, Insert, Update, Delete)のアノテーションを入れて使っていきます。アノテーションのあとにかぎかっこを付けて、そこにSQL文を書きます。値を#{データ名}にするとパラメータになり、受け取った値を操作してくれるようになります。

```Java:Mapper
    @Mapper
    public interface BookMapper{
        @Insert("INSERT INTO Book(book_name, publisher) VALUES(#{book_name}, #{publisher})")
        void insertBookInfo(Book book);
}
```

<h2>・Serviceクラス</h2>
　　　　最後にServiceクラスを作っていきます。ここにはしてほしい処理を書いていきます。Controllerクラスが全体の司令塔なら、Serviceクラスは処理の司令塔兼実際に処理を行うクラスです。<br>
　　　　クラス宣言の前に@Serviceを入れます。クラス又はメソッドに@Transactionalを入れると、トランザクション処理をさせることもできます。@Autowiredは、Beanを呼び込むアノテーションです。簡単に言うとnewせずにインスタンスを呼ぶことができるものです。

```Java:Service
    @Service
    public class BookService {
    
    @Autowired
    BookMapper bookMapper;
    
    public void insertBookService(Book book) {
        bookMapper.insertBookInfo(book);
    }
}
```

これで完成です！

<h2>・確認</h2>
<h3>・ページに飛んでみる</h3>
　　それでは実際に起動して入力した値がきちんとSQLに登録されているかを見ていきましょう！

　　まずは、/torokuに接続すると、

![screenshot.2023-02-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/498e5935-2b1e-ab1b-14bb-1e01725bbbf7.jpeg)

このようなページが表示されます。(見やすいようにCSSを適用しています)

実際に入れて登録を押すと、入力した文字が消えます。こうなるともうすでに完了しています。試しに何個か入れてみましょう。

![screenshot.2023-02-04 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/b299c193-d1fb-1a27-c1b3-d7150d9205b1.jpeg)

<h3>・SQLの確認</h3>
　　このwebページ上では、実際にSQLにデータが登録されているかどうかがわかりません。今の状態ではWeb上で確認することができないので、今回は実際にコマンドプロンプトで確認してみます。

![screenshot.2023-02-04 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/605aafe5-d579-d47a-2fa4-fc3b3a26cd8c.jpeg)

すると、Web上で入力したデータがしっかりとSQLに登録されていることを確認できました！

これで完成です。お疲れさまでした！