SpringBootを基づいての環境構築、及びユーザ登録機能実装（第一章）

#０　環境、IDE、DB Software
- Windows
- Eclipse　([download](https://mergedoc.osdn.jp/))
- DB Browser for SQLite　([download](https://sqlitebrowser.org/dl/))

#１　データベース、及びテーブルの作成
###１.１　ユーザテーブル項目
 - ID、名前、メールアドレス

###１.２　データベース、テーブル作成ステップ
  - DB Browserを起動する
    ![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/53074fa2-66d6-5944-850f-3e9106227943.png)
  - New Databaseをクリックする
    ![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/2e7400df-f77e-768f-04d0-c34df372b8fa.png)
  - データベース名前を入力し、保存する
    ![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/9ba35f41-d6e1-c7fb-b70a-8de08caead8e.png)
  - テーブル名と項目を入力する（項目はAdd fieldのクリック）
    ![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/83448450-0d7b-7aee-9bba-cd8306e50fb6.png)
  - OKボタンを押すとデータベースとテーブルが作成される
    ![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/56faeac9-ccb5-6ca9-aecf-4038591e3a81.png)


#３　プロジェクトの新規
- Spring Boot新規 
 - Eclipse → ファイル → 新規 → その他 → Spring Boot
  ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/8f50bd93-ab98-de96-9a24-47e0d90478bd.png)
 - 次へクリック
  ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/ff41d9a5-21bf-5efe-0b1e-dab3e2116937.png)
 -  Spring Web、Thymeleaf、MyBatis Frameworkを選択する
  ![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/ce2b54f9-29f4-f6c3-1a71-28e1c474804c.png)
 -  完了
  ![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/512cbe12-dc1d-5302-8ca2-6e4442d8cdfc.png)

#４　ユーザ登録機能実装
###４.１　Sqlite機能追加
#####※Projectが正常動くために、最初にやっている
 
- pom.xmlにSqliteのdependencyを追加する
 
```ruby:pom.xml
<dependency>
    <groupId>org.xerial</groupId>
    <artifactId>sqlite-jdbc</artifactId>
    <version>3.21.0.1</version>
</dependency>
```
- application.propertiesにデータベース情報を追加する

```ruby:application.properties
spring.datasource.driver-class-name=org.sqlite.JDBC
spring.datasource.url=jdbc:sqlite:E:\\database\\Test\\FORBLOG.db
spring.datasource.username=
spring.datasource.password=
```

- MyBatisConfigクラスを作成する（Sqliteを使用できる為）

```ruby:MyBatisConfig.java
package com.example.demo.config;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.jdbc.DataSourceProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.sqlite.SQLiteDataSource;

@Configuration
public class MyBatisConfig {
    @Autowired
    private DataSourceProperties dataSourceProperties;

    @Bean(name="dataSource")
    public DataSource dataSource() {
        SQLiteDataSource dataSource = new SQLiteDataSource();
        dataSource.setUrl(dataSourceProperties.getUrl());
        return dataSource;
    }
}
```
###４.２　ユーザ属性クラス作成
#####※ユーザテーブルと同じ

```ruby:UserModel.java
package com.example.demo.model;

public class UserModel {
    private String Id;
    private String Name;
    private String Email;

    public String getId() {
		return Id;
    }
    public void setId(String id) {
    	Id = id;
    }

    public String getName() {
        return Name;
    }
    public void setName(String name) {
        Name = name;
    }

    public String getEmail() {
        return Email;
	}
	public void setEmail(String email) {
		Email = email;
	}
}
```

###４.３　マッパーインターフェース作成
#####※SQLを書く箇所

```ruby:UserMapper.java
package com.example.demo.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Component;

import com.example.demo.model.UserModel;

@Mapper
@Component
public interface UserMapper {
    @Insert("INSERT INTO USER(Id, Name, Email)"
    		+ "VALUES(#{Id}, #{Name}, #{Email})")
    int insert(UserModel model);

    @Select("SELECT * FROM USER")
    List<UserModel> selectAll();
}
```

###４.４　スキャンクラスの作成
#####※サーバとデータベース接続に使用する

```ruby:MyBatisMapperScannerConfig.java
package com.example.demo.config;

import org.mybatis.spring.mapper.MapperScannerConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


@Configuration
public class MyBatisMapperScannerConfig {
    @Bean
    public MapperScannerConfigurer mapperScannerConfigurer() {
        MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();
        mapperScannerConfigurer.setSqlSessionFactoryBeanName("sqlSessionFactory");

        mapperScannerConfigurer.setBasePackage("com.example.demo.mapper");

        return mapperScannerConfigurer;
    }

}
```
#######※com.example.demo.mapperと４.３のパスと同じようになること

###４.５　アプリケーションクラスの修正
#######※@MapperScan("com.example.demo.mapper")を追加する

```ruby:DemoApplication.java
package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.example.demo.mapper")
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}
```

###４.６　サービスクラス作成
#######※クライアントとテーブルに使用しているデータを修正する箇所

```ruby:UserService.java
package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.mapper.UserMapper;
import com.example.demo.model.UserModel;

@Service
public class UserService {

    private final UserMapper dao;

    @Autowired
    public UserService(UserMapper dao) {
        this.dao = dao;
    }

    public boolean insert(UserModel user) {
        return dao.insert(user) > 0;
    }

    public List<UserModel> selectAll() {
        return dao.selectAll();
    }
}
```

###４.７　コントローラーの作成
#######※クライアントとサーバーを繋ぐ箇所

```ruby:UserController.java
package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.model.UserModel;
import com.example.demo.service.UserService;

@Controller
public class UserController {
	private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;

    }

    @RequestMapping("/new")
    public String addUser(Model model) {
    	model.addAttribute("User", new UserModel());
        return "NewUser.html";
    }

    @PostMapping("/new")
    public String create(@Validated @ModelAttribute UserModel user, Model model) {
    	userService.insert(user);
        return "redirect:userlist";
    }

    @GetMapping("/userlist")
    public String displayUsers(Model model) {
    	List<UserModel> users = userService.selectAll();
    	model.addAttribute("users", users);
        return "UserList.html";
    }
}
```


###４.８　画面作成
#####ユーザ新規画面
```ruby:NewUser.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>新規作成画面</title>
  </head>
  <body>
    <h1>新規登録</h1>
    <div><a th:href="@{/userlist}">一覧はこちら</a></div>
    <form action="#" th:action="@{/new}" th:object="${User}" method="post">
      <table>
        <tr>
          <th class="cell_title">ID</th>
          <td><input type="text" th:field="*{Id}"></td>
        </tr>
        <tr>
          <th class="cell_title">名前</th>
          <td><input type="text" th:field="*{Name}"></td>
        </tr>
        <tr>
          <th class="cell_title">メール</th>
          <td><input type="text" th:field="*{Email}"></td>
        </tr>
      </table>
      <button type="submit">新規</button>
      <input type="button" value="終了" onclick="window.open('about:blank', '_self').close()">
    </form>
  </body>
</html>
```
#####ユーザ一覧画面
```ruby:UserList.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>一覧画面</title>
  </head>
  <body>
    <h1>ユーザ一覧</h1>
    <div><a th:href="@{/new}">新規登録はこちら</a></div>
    <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>メール</th>
      </tr>
    </thead>
    <tbody>
        <tr th:each="user : ${users}" th:object="${user}">
            <td th:text="*{Id}"></td>
            <td th:text="*{Name}"></td>
            <td th:text="*{Email}"></td>
        </tr>
      </tbody>
  </table>
  <input type="button" value="終了" onclick="window.open('about:blank', '_self').close()">
  </body>
</html>
```

#５　ソース完成構造
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/1818511b-2c23-93f6-3ee9-1150c6e6b994.png)

#６　デモ
###６.１　プロジェクト起動
#####起動方法
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/d5f5a8fe-4144-a506-5367-0565c95565c0.png)

#####起動成功
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/175cbdfc-d8fa-a80c-7b59-86ddaf48d2bf.png)

###６.２　ユーザ新規登録
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/ce6fda5a-8b6d-6071-cd40-4e8c27725782.png)

###６.３　ユーザ新規登録
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/f6048f7d-6c7a-1253-65d5-aa922f8e8853.png)

###６.４　データベース確認
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663377/9f12aa29-79e2-3a2f-ab99-44001de0d227.png)


#７　終わり
ここまで実装が終わったら、ユーザ新規登録とユーザ一覧が表示できると思っています。
初めに、書いていますが、不十分な内容があると思うので、ご指摘お願いいたします。
SpringSecurityとBootstrap等について、未だ書いていませんが、後の章にて書くと思います。