Spring Bootで新規登録画面を開発する

uhablogではSpring Bootで簡単なWebアプリを開発する方法を発信しています。

今回の記事ではSpring Bootで画面のフォームから入力値を取得して、データベース（PostgreSQL）に登録する方法について解説していきます。

この記事を読むことで

• 画面から入力を送信する方法
• 入力されたデータをデータベースに登録する方法

を学ぶことができます！

「Spring Bootを使ってwebアプリの開発ができるようになりたい。」という方はぜひチェックしてください。

今回データを登録するテーブル定義

今回データを登録するbooksinfoテーブルはid, title, priceの3つのカラムを持っています。

論理名	物理名	データ型	説明
id	ID	serial	データのIDが自動で採番される
title	タイトル	varchar(50)	本のタイトルを保持する
price	値段	int	本の値段を保持する

バックエンド（サーバー側）のソースコード

まずはバックエンド側のソースコードから確認していきます。

最終的なフォルダ構成は次のようになります(一部この記事では作成しないファイルも含まれています)

Book.javaの作成

最初にmodelクラスを作成します。

このクラスではデータベースへ登録するデータを格納しておくためのクラスです。

modelパッケージの中にBook.javaを作成し、中身は次のとおりにします。

package com.uhablog.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;

import lombok.Data;

@Data
@Entity
@Table(name = "booksinfo")
public class Book {

    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column(name="id")
    // 本のidを保持するフィールド
    private Integer id;
	
    @Column(name="title")
    // 本のタイトルを保持するフィールド
    private String title;
	
	
    @Column(name="price")
    // 本の値段を保持するフィールド
    private Integer price;
}

アノテーションを使って、登録するテーブルをJavaのクラスで表現しています。

各アノテーションの簡単な説明は次のとおりです。

• @Tableは対応するテーブルを設定
• @Dataで各フィールドのsetterとgetterを自動で生成
• @GeneratedValueでidが自動で生成される値であることを明示
• @Columnでテーブルのどのカラムと対応しているか設定

データベースへ登録するためのデータを格納しておくためのクラス

BookForm.javaの作成

ユーザーが画面で入力した値を保持するためのクラスです。

画面では本のタイトルと値段の入力を受け付けます。

formパッケージにBookForm.javaを作成します。

package com.uhablog.form;

import lombok.Data;

@Data
public class BookForm {

    /**
     * 本のタイトルを保持する
     */
    private String title;
	
    /**
     * 本の値段を保持する
     */
    private Integer price;
}

ユーザーからの入力値を保持するためのクラス

BookRepository.javaの作成

BookRepository.javaはデータベースに登録するためのインターフェースです。

JpaRepositoryを継承することで、データベースにアクセスする簡単なメソッドをいくつか実行できるようになります。

repositoryパッケージに作成します。

package com.uhablog.repository;

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

import com.uhablog.model.Book;

public interface BookRepository extends JpaRepository<Book, Integer> {

}

データベースにデータを新規登録するためのクラス

BookService.java

サービスクラス内で画面からの入力値をデータベース登録用のクラスに変換して、データベースへ登録するメソッドを呼び出します。

insertメソッドでデータベースに値を登録しています。

処理の流れとしては次のとおりです。

• 引数として画面からの入力値を受け取る
• Bookクラスに変換する
• repositoryのsaveメソッドを使って、データベースに新規登録する

サービスクラスには次のようなメソッドがあります。

メソッド名	説明
findAll	データベースから本の一覧を取得する
insert	データベースに画面からの入力値を登録する

package com.uhablog.service;

import java.util.List;

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

import com.uhablog.form.BookForm;
import com.uhablog.model.Book;
import com.uhablog.repository.BookRepository;

@Service
@Transactional
public class BookService {
	
    @Autowired
    BookRepository repository;
	
    /**
     * データベースから本の一覧を取得する
     * @return
     */
    public List<Book> findAll() {
    return repository.findAll();
    }
	
    /**
     * データベースにデータを登録する
     * @return
     */
    public void insert(BookForm bookForm) {
        // データベースに登録する値を保持するインスタンス
        Book book = new Book();
		
        // 画面から受け取った値をデータベースに保存するインスタンスに渡す
        book.setTitle(bookForm.getTitle());
        book.setPrice(bookForm.getPrice());
		
        // データベースに登録する
        repository.save(book);
    }
}

入力値を受け取って、データを新規登録するメソッドを呼び出す

BookController.java

リクエストに対する処理を制御するためのクラスです。

コントローラークラスには次のようなメソッドが用意されています。

メソッド名	説明
bookList	「http://localhost:8080/book-list」にアクセスがあったときのメソッド。 本の情報をデータベースから取得して、画面に表示する。
createBook	「http://localhost:8080/book-create」にGetメソッドでリクエストがあった時のメソッド。 本の新規登録画面を画面に表示する。
saveBook	「http://localhost:8080/book-create」にPostメソッドでリクエストがあった時のメソッド。 画面で入力された情報をデータベースに登録する。 登録完了後は一覧画面にリダイレクトする。

package com.uhablog.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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import com.uhablog.form.BookForm;
import com.uhablog.model.Book;
import com.uhablog.service.BookService;

@Controller
public class BookController {
	
    @Autowired
    BookService service;
	
    @GetMapping("/book-list")
    public String bookList(Model model) {
		
        // serviceを使って、本の一覧をDBから取得する
        List<Book> bookList = service.findAll();
        // modelに本の一覧を設定して、画面に渡す
        model.addAttribute("bookList", bookList);
        // bookList.htmlの表示
        return "bookList";
    }
	
    /**
     * 新規登録画面を表示
     * @param model
     * @return 新規登録画面
     */
    @GetMapping("/book-create")
    public String createBook(Model model) {

        model.addAttribute("bookForm", new BookForm());
		
        return "add";
    }
	
    /**
     * データベースに本を登録する
     * @param bookForm
     * @param model
     * @return
     */
    @PostMapping("/book-create")
    public String saveBook(@ModelAttribute BookForm bookForm, Model model) {

        // 本を登録する
        service.insert(bookForm);
		
        // 本の一覧表示画面にリダイレクト
        return "redirect:/book-list";
    }
}

フロントエンド（画面側）のソースコード

book-list.html

現在データベースに登録されているデータを一覧で表示する画面のhtmlです。

新規登録画面を表示するためのリンクをaタグを使って設置しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本の一覧表示</title>
</head>
<body>
    <table>
        <tr th:each="book : ${bookList}" th:object="${book}">
            <td th:text="*{id}"></td>
            <td th:text="*{title}"></td>
            <td th:text="*{price}"></td>
        </tr>
    </table>
    <a th:href="@{/book-create}">新規登録</a>
</body>
</html>

add.html

本を新規で登録するための画面です。

th:objectにbookFormを設定します。これを設定することで、サーバー側にbookFormとして値を渡すことが可能です。

th:fieldに入力された値がBookFormのどの項目に対するのか、設定しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本を新規登録する</title>
</head>
<body>
    <h1>本を新規で登録する</h1>
    <form th:action="@{/book-create}" th:object="${bookForm}" method="POST">
    タイトル：<input type="text" th:field="*{title}"><br>
    値段　　：<input type="number" th:field="*{price}"><br>
    <input type="submit" value="新規登録">
    </form>
</body>
</html>

動作確認

実際にアプリを動かして、動作確認をしてみます。
「http://localhost:8080/book-list」にアクセスして、「新規登録」のリンクを押します。

フォームが表示されるので、値を入力して「新規登録」ボタンを押します。

一覧画面に遷移して、登録されていることが確認できました。

Spring Bootでバリデーションチェックを実装する

uhablog こんにちは、大学時代にプログラミングの勉強を始め現在はエンジニアをしているuhablogです。当ブログでは現役エンジニアがプログラミング初学者の方向けにプログラミングの学習法を発信して ...

独学が不安な人へ

独学で学んでいく意志がある方にはUdemyなどで学習するのがおすすめですが、プログラミングを独学するにはそれなりにハードルがあります。

• プログラミングで一度挫折した経験がある
• 一人で学習する自信がないので、サポートが欲しい

という方にはプログラミングスクールを検討してみるのがおすすめです。

Javaが学べるおすすめプログラミングスクール3選

uhablog こんにちは、大学時代にプログラミングの勉強を始め現在はエンジニアをしているuhablogです。当ブログでは現役エンジニアがプログラミング初学者の方向けにプログラミングの学習法を発信して ...