Springを使ったDBデータ登録画面の作成
公開日: 2022/10/19
今回は画面に入力した値をDBに登録する実装方法を紹介します。
またJavaScriptを使った入力チェックなども行います。
またJavaScriptを使った入力チェックなども行います。
1. 環境
Eclipse(Version: 2022-09 (4.25.0))
Java17
Spring2.7.4
PostgreSQL)14.5
Java17
Spring2.7.4
PostgreSQL)14.5
2. SQLの設定
テーブル作成などはPSQLの場合pgAdminなどを使うと簡単に行えます。
SQLCREATE文
CREATE TABLE IF NOT EXISTS public.syain
(
syainkbn integer,
age integer,
sex character varying(5) COLLATE pg_catalog."default",
name character varying(20) COLLATE pg_catalog."default",
id integer NOT NULL DEFAULT nextval('syain_id_seq'::regclass),
delete_flag boolean
)
3. SpringとPSQLの接続設定
.jpg)
DBの接続設定{}の中はそれぞれ設定してください。
spring.datasource.url=jdbc:postgresql://{IPアドレス:DBのPORT/データベース名}
spring.datasource.username={ユーザー名}
spring.datasource.password={パスワード}
spring.jpa.database=POSTGRESQL
pom.xmlに依存関係を記載します。
依存関係の追加
org.springframework.boot
spring-boot-starter-data-jpa
org.postgresql
postgresql
runtime 4. EntityとRepositoryの作成
SyainRepositoryの作成
package com.example.demo.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.example.demo.model.SyainEntity;
@Repository
public interface SyainRepository extends JpaRepository {
}
SyainEntityの作成
package com.example.demo.model;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name = "syain")
public class SyainEntity {
//ID
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
//社員区分
@Column(name = "syainkbn")
private Integer syainKbn;
//年齢
@Column(name = "age")
private Integer age;
//性別
@Column(name = "sex")
private String sex;
//社員名
@Column(name = "name")
private String name;
//削除フラグ
@Column(name = "delete_flag")
private boolean deleteFlag;
public boolean isDeleteFlag() {
return deleteFlag;
}
public void setDeleteFlag(boolean deleteFlag) {
this.deleteFlag = deleteFlag;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getSyainKbn() {
return syainKbn;
}
public void setSyainKbn(Integer syainKbn) {
this.syainKbn = syainKbn;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
5. 画面の作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>登録画面</title>
</head>
<body>
<p>
<span th:text="${syaindata}">Hello World!</span>
</p>
<form method="post" action="/user/syaintouroku" name="form"
th:object="${InputModel}" onsubmit="return inputCheck()">
<table>
<tr>
<td>登録フォーム</td>
</tr>
<tr>
<td><label>社員区分：<input type="number" name="syainKbn"size="20" /></label></td>
<td><label>年齢：<input type="number" name="age" size="20" /></label></td>
<td><label>性別：<select name="sex">
<option>man</option>
<option>girl</option>
</select></label></td>
<td><label>名前：<input type="text" name="name" size="20" maxlength="20" /></label></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" name="submit" value="登録" /></td>
<td><input type="reset" value="クリア" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
function inputCheck() {
//社員区分の入力チェック
if (form.syainKbn.value == "") {
alert("社員区分を入力してください");
return false;
} else if (form.syainKbn.value.length > 5) {
//社員区分の入力桁数チェック
alert("社員区分は5文字以内で入力してください");
return false;
}
//年齢の入力チェック
if (form.age.value == "") {
alert("年齢を入力してください");
return false;
} else if (form.age.value.length > 3) {
//年齢の桁数チェック
alert("年齢は3文字以内で入力してください");
return false;
}
//社員名の入力チェック
if (form.name.value == "") {
alert("社員名を入力してください");
return false;
}
//問題なければtrueを返す
alert("登録しました");
return6. 画面オブジェクトの作成
package com.example.demo.model;
public class InputModel {
//ID
private Integer id;
//社員区分
private Integer syainKbn;
//年齢
private Integer age;
//性別
private String sex;
//社員名
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getSyainKbn() {
return syainKbn;
}
public void setSyainKbn(Integer syainKbn) {
this.syainKbn = syainKbn;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
7. サービスの作成
package com.example.demo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.model.InputModel;
import com.example.demo.model.SyainEntity;
import com.example.demo.repository.SyainRepository;
@Service
public class RegisterService {
@Autowired
SyainRepository syainRepository;
//画面から入力された値でDBに登録する
public void createSyain(InputModel form) {
SyainEntity syain = new SyainEntity();
//DB登録データをセット
syain.setSyainKbn(form.getSyainKbn());
syain.setAge(form.getAge());
syain.setSex(form.getSex());
syain.setName(form.getName());
syain.setDeleteFlag(false);
//DB登録
syainRepository.save(syain);
}
}
受け取った画面オブジェクトの値を取り出してEntityにセットしていきDBに登録する。
8. コントローラーの作成
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
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;
import com.example.demo.model.InputModel;
import com.example.demo.model.SyainEntity;
import com.example.demo.service.RegisterService;
import com.example.demo.service.SerchService;
@Controller
@RequestMapping("user")
public class SyainController {
@Autowired
RegisterService registerService;
//画面から受け取った値でDBにデータを登録する
@RequestMapping(value = "/syaintouroku", method = RequestMethod.POST)
public String syainTouroku(@ModelAttribute("InputModel") InputModel form, Model model) {
//受け取った値をもとにDBにデータ登録する
registerService.createSyain(form);
return "syaintouroku";
}
@RequestMapping(value = "/syaintouroku", method = RequestMethod.GET)
public String syainTourokuView(Model model) {
//画面初期化用
model.addAttribute("InputModel",new InputModel());
return "syaintouroku";
}
}
画面で入力チェックされたデータを受け取りサービスへ受け取った値を投げてDBにデータを登録する。
9. まとめ
html内でのJavaScriptの入力チェックの実装が知見がなく苦労したが
やってみると意外と簡単ですんなりDB登録ができてよかった。