DeseoDeSeo

[Spring] SpringMVC03_회원가입 폼, 아이디 중복 여부, 비밀번호 일치여부 본문

spring

[Spring] SpringMVC03_회원가입 폼, 아이디 중복 여부, 비밀번호 일치여부

deseodeseo 2023. 9. 15. 17:37

 

header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib prefix ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<!-- context-path값(=controller)을 내장객체 변수로 저장 -->
	<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="${contextPath}/">사과바나나딸기</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="${contextPath}/"> 메인 </a></li>
        <li><a href="boardMain.do">게시판</a></li>  <!--앞에 /없으면 /controller가 생략되어있음. 이건 contextPath임.  -->
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
      	    <a class ="dropdown-toggle" data-toggle="dropdown" href="#">접속하기 <span class="caret"></span></a>
      		<ul class="dropdown-menu">
        		<li><a href="#"> 로그인 </a></li>
       			<li><a href="${contextPath}/joinForm.do"> 회원가입 </a></li>
        	</ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
 
</body>
</html>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>뇽뇽이</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


  
<div class="container">
  <jsp:include page="common/header.jsp"></jsp:include> <!-- include는 import랑 비슷한 것!  -->
  <h1><b>springMVC03 </b></h1>
  <p> 김볶
  <p style ="color: blue">저녁 뭐 드실거에욤</p>
  <p style ="color: blue;, font-size:300px;">오늘은 PIZZA</p>
</div>

</body>
</html>
BoardController.java
package kr.spring.controller;

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.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.spring.entity.Board;
import kr.spring.mapper.BoardMapper;

@Controller // 현재 클래스를 핸들러맵핑이 찾기 위해 컨트롤러로 등록하는 부분.
public class BoardController {

	@Autowired // 자동으로 연결하는 거.
	private BoardMapper mapper;// mybatis한테 JCBC를 실행하라고 요청하는 객체
	 
	@RequestMapping("/boardMain.do")// 요청url로 들어왔을 때 아래 기능을 수행하겠다.
	 public String home(){
		System.out.println("게시판 페이지 이동 기능 수행"); 
		return "board/main"; // 다시 접속할 주소를 리다이렉트 방식으로 리턴하는거임.  board폴더 들어가서 main 찾음.
	}
	

}
MemberController.java

 ○ Controller생성시, @Autowired 넣어야함.

package kr.spring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.spring.entity.Member;
import kr.spring.mapper.MemberMapper;

@Controller

public class MemberController {
//	mapper만드는 법 기억해야됨.
	@Autowired
	private MemberMapper mapper;
	

	@RequestMapping("/joinForm.do")
	public String joinForm() {
		return "member/joinForm";
	}
	@RequestMapping("/registerCheck.do")
	public @ResponseBody int registerCheck(@RequestParam("memID") String memID) {
		//registercheck로 memid넘어옴.
		Member m = mapper.registerCheck(memID);
		// 여기서 membermapper.java로 이동함.
		// m == null -> 아이디 중복 사용 가능함.
		// m != null -> 아이디 사용 불가능
		if(m != null || memID.equals("")) {
			return 0;
		}else {
			return 1;
		}
	}

}

 

MemberMapper.java
package kr.spring.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import kr.spring.entity.Board;
import kr.spring.entity.Member;

@Mapper // MyBatis가 interFace를 찾기 위해 달아주는 부분.
public interface MemberMapper {
	//sql session factory가 이걸 이용해서 사용함.
	public Member registerCheck(String memID);

}

 

MemberMApper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.spring.mapper.MemberMapper">
<!-- membermapper.java가 찾아오려면 namespace이름이랑 같아야한다. -->
	
	<select id="registerCheck" parameterType="String" resultType="kr.spring.entity.Member">
			SELECT * FROM MEMBER WHERE MEMID = #{memID}
	</select>

</mapper>

 

joinForm.jsp
<form action="">
	<input type="hidden" name="memPassword" id="memPassword" value="">
		<table style ="text-align:center; border: 1px solid #dddddd " class="table table-borded">
			<tr>
				<td style="width:110px; vertical-align:middle;">아이디</td>
				<td><input type="text" name ="memID" id="memID" class="form-control" maxlength="20" placeholder="아이디를 입력하세요."></td>
				<td style="width:110px;"><button type="button" onclick="registerCheck()" class="btn btn-sm btn-primary" >중복확인</button></td>
							<!-- 버튼이 submit으로 작동못 하게 type="button"  -->
				</tr>
				<tr>
					<td style="width:110px; vertical-align:middle;">비밀번호</td>
				   <td colspan="2"><input type="password" onkeyup="passwordCheck()" name ="memPassword1" id="memPassword1" class="form-control" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
				</tr>
				<tr>
					<td style="width:110px; vertical-align:middle;">비밀번호 확인</td>
					<td colspan="2"><input type="password" onkeyup="passwordCheck()"  name ="memPassword2" id="memPassword2" class="form-control" maxlength="20" placeholder="비밀번호를 확인하세요."></td>
				</tr>
				<tr>
					<td style="width:110px; vertical-align:middle;">사용자 이름</td>
					<td colspan="2"><input type="text" id="memName" name ="memName" class="form-control" maxlength="20" placeholder="이름을 입력하세요."></td>
				</tr>
				<tr>
					<td style="width:110px; vertical-align:middle;">나이</td>
					<td colspan="2"><input type="number" name ="memAge" id="memAge" class="form-control" maxlength="20" placeholder="나이를 입력하세요."></td>
				</tr>
				<tr>
					<td style="width:110px; vertical-align:middle;">성별</td>
					<td colspan="2">
				<div class="form-group" style ="text-align:center; margin:0 auto;"> 
				<div class="btn-group" data-toggle="buttons">
				<!-- 라디오를 버튼식으로  -->
				<label class="btn btn-primary active ">
						<input type="radio" id="memGender" name="memGender" autocomplete="off" value="남자" checked="checked"> 남자
				</label>
				<label class="btn btn-primary">
							<input type="radio" id="memGender" name="memGender" autocomplete="off" value="여자" > 여자
				</label>
				</div>
				</div>
		
		</td>
		</tr> <!-- 성별 끝 -->
		<tr>
				<td style="width:110px; vertical-align:middle;">이메일</td>
				<td colspan="2"><input type="email" name ="memEmail" id="memEmail"class="form-control" maxlength="50" placeholder="이메일을 입력하세요."></td>
		</tr>
		<tr>
				<td colspan ="3">
				<span id="passMessage" style="color:red;"></span>
				<input type="submit" class="btn btn-primary btn-sm pull-right" value="등록">
				<input type="reset" class="btn btn-warning btn-sm pull-right" value="취소">
							
							</td>
						</tr>
						
					</table>
				</form>

 

 

모달 , Modal

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

 

Bootstrap Modals

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

여기서 가져옴.

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div id="checkType" class="modal-content">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> 메세지 확인 </h4>
        </div>
        <div class="modal-body">
          <p id="checkMessage"> </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
<script type="text/javascript">
		function registerCheck(){
			var memID = $("#memID").val();
			$.ajax({
				url:"${contextPath}/registerCheck.do",
				type:"get",
				data:{"memID":memID},
				success:function(data){
					// 중복여부 확인( data:1 -> 사용 가능, data:0 -> 사용 불가능)
					if(data==1){
						$("#checkMessage").text("사용할 수 있는 아이디 입니다.");
						$("#checkType").attr("class","modal-content panel-success");
						
					}else{
						$("#checkMessage").text("사용할 수 없는 아이디 입니다.");
						$("#checkType").attr("class","modal-content panel-warning");
					}
					$("#myModal").modal("show");
					
				},
				error: function(){
					alert("error");
				}
			});
		}
		
		function passwordCheck(){
			var memPassword1 = $("#memPassword1").val();
			var memPassword2 = $("#memPassword2").val();
			
			if(memPassword1 != memPassword2){
				$("#passMessage").html("비밀번호가 서로 일치하지 않습니다.");
			} else{
				/* pw1과 pw2의 값이 같을 때만 pw가 넘어감. */
				$("#memPassword").val(memPassword1);
				$("#passMessage").html(" ");
			}
			
		}
	</script>

 

저작자표시 비영리 변경금지

'spring' 카테고리의 다른 글

[Spring] 회원정보 수정 및 메인 페이지에 탭 추가  (2) 2023.09.19
[Spring] 회원 가입 기능 마무리 및 로그인 기능  (1) 2023.09.18
[Spring] springMVC03 실습  (0) 2023.09.15
[Spring] SpringMVC02_비동기방식_BoardRestController생성  (0) 2023.09.14
[Spring] SpringMVC02_비동기방식  (0) 2023.09.13
'spring' Related Articles more