Java Spring JSP웹페이지 만들기2 (회원가입 페이지)

🌙 회원가입 페이지 만들기(사용자, 데이터 DB저장)

🥙 작업 순서

css는 미리 작성해둔 상태 , MVC패턴 정리하기

1. 회원가입 페이지가 될 jsp 파일을 생성(joinForm.jsp)
2. controller에서 joinForm @Getmapping하기
3. DTO java class 만들기 - 데이터베이스 필드
4. DAO Interface 만들기(Mybatis) - SQL 명령문 연결
5. Service java class 만들기 - 아이디 중복체크, 비번 암호화 등 서비스 메소드 영역

🥙 회원가입 페이지 생성(JSP)

회원가입에 필요한 정보를 생성한 jsp 파일에 입력한다.
(아이디, 비밀번호, 이름, 생일 등등...)

💻 html 소스

<form action="joinProc" method="post" class="login-form" name="jForm" onsubmit="return check()">
    <h2 class="login-header">회원 가입</h2>
    <input type="text" class="login-input" id="mid" name="m_id" title="아이디" autofocus placeholder="아이디">
    <input type="button" class="idcheck-btn" value="중복확인" onclick="idcheck()">
    <input type="password" class="login-input" name="m_pwd" title="비밀번호" placeholder="비밀번호">
    <input type="text" class="login-input" name="m_name" title="이름" placeholder="이름">
    <input type="text" class="login-input" name="m_birth" title="생일" placeholder="생일">
    <input type="text" class="login-input" name="m_addr" title="주소" placeholder="주소">
    <input type="text" class="login-input" name="m_phone" title="연락처" placeholder="연락처">
    <input type="submit" class="login-btn" value="가입">
</form>

💻 javascript 소스 (아이디 중복 체크 기능)

//jquery import
<script src="js/jquery-3.7.0.min.js"></script>

//아이디 중복 체크
<script>
    let ck = false;//false일 경우 중복체크를 안했거나 중복된
                    //아이디를 입력한 상태.
    function idcheck() {
        let id = $("#mid").val();

        //id 값을 입력했는지 검사.
        if(id == ""){//입력을 안했을 경우
            alert("아이디를 입력하세요.");
            $("#mid").focus();
            return;
        }
        //전송할 데이터 작성.
        let sendId = {"mid": id};
        console.log(sendId);

        //서버로 id 전송.
        $.ajax({
            url: "idCheck",
            type: "get",
            data: sendId,
            success: function (res){
                if(res == "ok"){
                    alert("사용가능한 아이디입니다.");
                    ck = true;
                } else {
                    alert("사용할 수 없는 아이디입니다.");
                    $("#mid").val("");
                    $("#mid").focus();
                    ck = false;
                }
            },
            error: function (err) {
                console.log(err);
                ck = false;
            }
        });
    }//idcheck end

ajax를 활용한 아이디 중복 체크 기능은 ajax를 사용한 기능끼리 모아서 다시 한 번 정리를 할 예정 (여기서는 자세히 다루지 않는다.)

🥙 회원가입 페이지 Controller에서 조작하기

💻 Controller 소스

mServ 메소드는 서비스 기능 생성 후 추가한다.
서비스 만들기 전까지는 res = null;값으로 입력해두기

@GetMapping("joinForm")
public String joinForm(){
    log.info("joinForm()");
    return "joinForm";
}

//REST 방식(Ajax)으로 전송할 경우의 메소드
@GetMapping("idCheck")
@ResponseBody           //REST 방식일 때 꼭 넣을 것.
public String idCheck(String mid){
    log.info("idCheck()");
    String res = mServ.idCheck(mid);

    return res;
}

@PostMapping("joinProc")
public String joinProc(MemberDto member,
                       RedirectAttributes rttr){
    log.info("joinProc()");
    String view = mServ.memberJoin(member, rttr);

    return view;
}

🥙 Dto 생성

DTO(Data Transfer Object) : 계층간 데이터 교환을 위해 사용하는 객체

💻 Dto 소스

@Data
public class MemberDto {
    private String m_id; 
    private String m_pwd;
    private String m_name;
    private String m_birth;
    private String m_addr;
    private String m_phone;
    private int m_point;
    private String g_name;//회원 등급
}

🥙 Dao 생성 - Interface/Mappers

DAO(Data Access Object) : Service와 DB를 연결해주는 역할

💻 Dao 소스

@Mapper
public interface MemberDao {
    //아이디 체크 메소드
    int idCheck(String m_id);
    //회원 가입 메소드
    void memberInsert(MemberDto member);
    //회원의 비밀번호 검색 메소드
    String selectPass(String m_id);
    //회원 정보를 가져오는 메소드(from minfo 뷰)
    MemberDto selectMember(String m_id);
}

Dao 클래스에서 작성한 메소드를 Generate해서 dao.xml에 SQL 소스를 작성한다.

💻 xml 소스

<mapper namespace="com.raspberry.board.dao.MemberDao">
    <insert id="memberInsert" parameterType="MemberDto">
        INSERT INTO member
        VALUES (#{m_id},#{m_pwd},#{m_name},#{m_birth},
                #{m_addr},#{m_phone},DEFAULT)
    </insert>
    <select id="idCheck" resultType="java.lang.Integer"
        parameterType="String">
        SELECT count(*) FROM member WHERE m_id=#{m_id}
    </select>
    <select id="selectPass" resultType="java.lang.String"
        parameterType="String">
        SELECT m_pwd FROM member WHERE m_id=#{m_id}
    </select>
    <select id="selectMember" resultType="MemberDto"
        parameterType="String">
        SELECT * FROM minfo WHERE m_id=#{m_id}
    </select>
</mapper>

🥙 서비스 클래스 작성

💻 Service 소스 (회원가입 처리)

@Autowired
private MemberDao mDao;
private ModelAndView mv;

//회원 가입 처리용 메소드
public String memberJoin(MemberDto member,
                         RedirectAttributes rttr){
    log.info("memberJoin()");
    String view = null;
    String msg = null;
    //비밀번호 암호화 처리
    String encpwd = pEncoder.encode(member.getM_pwd());
    log.info(encpwd);
    //평문인 비밀번호를 암호문으로 덮어씀.
    member.setM_pwd(encpwd);
    try {
        mDao.memberInsert(member);
        view = "redirect:/";
        msg = "가입 성공";
    } catch (Exception e){
        e.printStackTrace();
        view = "redirect:joinForm";
        msg = "가입 실패";
    }
    rttr.addFlashAttribute("msg", msg);
    return view;
}

홈 컨트롤러에도 서비스 클래스를 @Autowired한다.

@Autowired
private MemberService mServ;

💻 Service 소스 (비밀번호 암호화)

//비밀번호 암호화를 위한 인코더 객체
    private BCryptPasswordEncoder pEncoder =
            new BCryptPasswordEncoder();

    //아이디 중복 확인 메소드
    public String idCheck(String m_id){
        //리턴 타입과 같은 변수를 먼저 선언할 것.
        String res = null;

        //아이디가 중복이면 1, 아니면 0
        int cnt = mDao.idCheck(m_id);

        if(cnt == 0){
            res = "ok";
        } else {
            res = "fail";
        }

🥙 회원가입 후 데이터베이스에 데이터가 들어오는지 확인

👀 회원가입 테스트

1. 아이디 입력 후 아이디 중복확인 테스트
   

2. 아이디 중복확인 후 비어있는 데이터도 모두 입력 > '가입' 버튼 클릭
   

3. 데이터베이스에서 확인
   정상적으로 저장된 모습
   

📅 DATE

2023.05.19 작성