티스토리 뷰

SCIT/8월

8/17 [SpringBoot & JPA & Ajax Practice]家計簿(1) - 会員登録

Seraphim_ 2024. 8. 17. 19:57

Cashbook Home Screen

1. ホーム HTML

<!DOCTYPE html>
<html lang="ja"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>CASHBOOK HOME</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
<script>
$(document).ready(function () {

    // Click the submit button on the registration form to be executed
    $('#registrationForm').submit(function () {
        // ID and password must be entered to apply for registration
        if ($('#memberId').val() == '' || $('#memberPw').val() == '') {
            alert('Please input ID and Password');
            return false;
        }
        // Send Form to Server
        return true;
    });
});
</script>
</head>
<body>
<div class="container">
    <header>
        <h1>[ Cashbook ]</h1>
    </header>
    <section>
    <div sec:authorize="not isAuthenticated()">
        <h2><a th:href="@{/member/registration}">Registration</a></h2>
        <h2><a th:href="@{/member/login}">Login</a></h2>
    </div>
    <div sec:authorize="isAuthenticated()">
        <h2><a th:href="@{/member/logout}">Logout</a></h2>
        <h2><a th:href="@{/cashbook/view}">My Cashbook</a></h2>
        <h2><a th:href="@{/cashbook/stats}">Statistics</a></h2>
    </div>
    </section>
    <footer>
        <p>&copy; 2024.08.17 SpringBoot & JPA & Ajax Practice</p>
        <p>&copy; Private household services</p>
        <p>&copy; Register, view, and delete income and expenditure by date</p>
        <p>&copy; Statistics of income and expenditure by year</p>
    </footer>
</div>
</body>
</html>

2. ホーム Controller

package net.datasa.cashbook.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/*
    Cashbook Main Screen
 */
@Controller
public class HomeController {

    @GetMapping({"/", ""})
    public String home() {
        return "home";
    }
}

 

Cashbook Registration Screen

3. 加入 HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- ↑ 文書の種類をHTML5として指定 -->
    <meta charset="UTF-8">
    <!-- ↑ 文字エンコーディングをUTF-8に設定 -->
    <title>REGISTRATION</title>
    <!-- ↑ ブラウザタブに表示されるページのタイトル -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- ↑ スタイリングのための外部CSSファイルをリンク（Thymeleafの動的リンク構文） -->
    <script th:src="@{/jq/jquery-3.7.1.min.js}"></script>
    <!-- ↑ jQueryライブラリをインクルード（Thymeleaf構文を使用） -->
    <script th:src="@{/js/registration.js}"></script>
    <!-- ↑ 登録機能用のカスタムJavaScriptファイルをインクルード（Thymeleaf構文） -->
</head>
<body>
<div class="container">
    <header>
        <h1>[ Registration ]</h1>
    </header>
    <!-- ↑ 登録ページのメイン見出し -->

    <form id="registrationForm" th:action="@{/member/registration}" method="post">
        <!-- ↑ ユーザー登録用のフォーム、POSTメソッドを使用してデータをサーバーに送信（Thymeleafの動的アクションURL） -->

        <p>
            <label>ID</label>
            <!-- ↑ 会員ID入力フィールドのラベル -->
            <input type="text" name="memberId" id="memberId">
            <!-- ↑ ユーザーIDを入力するためのテキスト入力、nameとIDは'memberId' -->
        </p>

        <p>
            <label>Password</label>
            <!-- ↑ パスワード入力フィールドのラベル -->
            <input type="password" name="memberPw" id="memberPw">
            <!-- ↑ ユーザーパスワードを入力するためのパスワード入力、nameとIDは'memberPw' -->
        </p>

        <p>
            <input type="submit" value="Register">
            <!-- ↑ フォームデータを送信するための送信ボタン -->
        </p>
    </form>
    <footer>
        <p>&copy; 2024.08.17 SpringBoot & JPA & Ajax Practice</p>
    </footer>
</div>
</body>
</html>

4. 会員登録 Controller

package net.datasa.cashbook.controller;

// lombokのアノテーションを使用して、ログ出力と必要なコンストラクタを自動生成します
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.cashbook.domain.dto.MemberDTO;
import net.datasa.cashbook.service.MemberService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

// コントローラークラスを示すSpringのアノテーション
@Controller
@Slf4j
@RequestMapping("member")
@RequiredArgsConstructor
public class MemberController {

    // MemberService のインスタンスを注入するためのフィールド
    private final MemberService memberService;

    /**
     * 会員登録フォームに遷移します。
     * @return registration HTML
     */
    @GetMapping("registration")
    public String registration() {
        return "registrationForm"; // registrationForm.html ビューに遷移します
    }

    /**
     * ユーザーが入力した会員登録情報を受け取り、会員登録を行います。
     * 登録後、メインページにリダイレクトします。
     * @param registrationDTO ユーザーが入力した会員登録情報
     * @return メインページのリダイレクト URL
     */
    @PostMapping("registration")
    public String registration(@ModelAttribute MemberDTO registrationDTO) {
        memberService.register(registrationDTO); // 登録サービスを呼び出して会員登録を行います
        return "redirect:/"; // メインページにリダイレクトします
    }

}

5. 会員情報 Service

package net.datasa.cashbook.service;

import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;
import net.datasa.cashbook.domain.dto.MemberDTO;
import net.datasa.cashbook.domain.entity.MemberEntity;
import net.datasa.cashbook.repository.MemberRepository;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;

/**
 * 会員情報のサービスクラス
 * 会員情報の登録や管理を担当します。
 */
@Service
@Transactional
@RequiredArgsConstructor
public class MemberService {

    // 会員情報を保存するためのリポジトリ
    private final MemberRepository memberRepository;

    // パスワードの暗号化を行うエンコーダー
    private final BCryptPasswordEncoder bCryptPasswordEncoder;

    /**
     * 登録処理
     * @param dto 会員情報
     * このメソッドは、会員情報をDTOからエンティティに変換し、データベースに保存します。
     * パスワードは暗号化されて保存されます。
     */
    public void register(MemberDTO dto) {
        // MemberEntityビルダーを使用して、DTOからエンティティを作成します。
        MemberEntity memberEntity = MemberEntity.builder()
                .memberId(dto.getMemberId())  // 会員IDを設定
                .memberPw(bCryptPasswordEncoder.encode(dto.getMemberPw()))  // パスワードを暗号化して設定
                .build();  // エンティティを構築

        // エンティティをデータベースに保存
        memberRepository.save(memberEntity);
    }
}

6. 会員情報 DTO

package net.datasa.cashbook.domain.dto;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * Member info. DTO
 */
@Builder
@Data
@AllArgsConstructor
@NoArgsConstructor
public class MemberDTO {
    String memberId;
    String memberPw;
}

7. 会員情報 Entity

package net.datasa.cashbook.domain.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * Member info. Entity
 */
@Builder
@Data
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(name = "cashbook_member")
public class MemberEntity {

    @Id
    @Column(name = "member_id", length = 30)
    private String memberId;

    @Column(name = "member_pw", nullable = false, length = 100)
    private String memberPw;
}

 

8. cashbook_member Table

create table cashbook_member (
		member_id varchar(30)  primary key,
		member_pw varchar(100)  not null
);
저작자표시 비영리 변경금지

'SCIT > 8월' 카테고리의 다른 글

8/19 [SpringBoot & JPA & Ajax Practice]家計簿(3) - 家計簿  (0) 2024.08.19
8/19 [SpringBoot & JPA & Ajax Practice]家計簿(2) - ログイン  (0) 2024.08.19
8/14 [Ajax] Test5. 댓글 저장, 수정, 삭제  (0) 2024.08.14
8/13 [Ajax] Test3. 추천  (0) 2024.08.13
8/12 [Ajax] Test2. 서버로부터 객체 주고 받기  (0) 2024.08.12
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함