ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 46일차 - 회원가입 유효성 검사
      백엔드(웹 서버, WAS)/Spring 2024. 3. 28. 15:17

      회원가입 유효성 검사

      <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/common.css" type ="text/css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
	input[name="id"]{
	width:70%
	}
</style>
</head>
<body>
	<h3>회원가입</h3>
	<hr/>
	<form action="join.do" method = "post">
		<table>
			<tr>
				<th>ID</th>
				<td>
					<input type="text" name="id"/>
					<input type="button" value="중복체크" onclick="overlay()"/>
				</td>
			</tr>
			<tr>
				<th>PW</th>
				<td><input type="password" name="pw"/></td>
			</tr>
			<tr>
				<th>PW 확인</th>
				<td>
					<input type="text" id="confirm"/><!-- 위에 입력한 비밀번호와 비밀번호 확인과 같은지 이벤트 keyup 으로 계속 확인한다 -->
					<span id="msg"></span><!-- 확인과 비밀번호가 같으면 알려준다 -->
				</td>
			</tr>
			<tr>
				<th>관리자</th>
				<td> <!--  1. member에 auth에 넣는다 [ 테이블을 손을 봐야되서 문제가 될 수 있다 ] --> <!--  관리자 여부 테이블을 만든다 [ 관리자 여부를 가져오는데 join해서 가져와야됨 -->
				<input type="checkbox" name="auth"/>
				관리자여부
				</td>
			</tr>
			<tr>
				<th>NAME</th>
				<td><input type="text" name="name"/></td>
			</tr>
			<tr>
				<th>AGE</th>
				<td><input type="text" name="age"/></td>
			</tr>
			<tr>
				<th>GENDER</th>
				<td>
					<input type="radio" name="gender" value="남"/>남자
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="gender" value="여"/>여자
				</td>
			</tr>
			<tr>
				<th>EMAIL</th>
				<td><input type="text" name="email"/></td>
			</tr>
			<tr>
				<!-- button 태그에 type="button" 을 넣으면 submit 기능이 사라진다 -->
				<th colspan="2"><button type="button" onclick="join()">회원가입</button></th>
			</tr>
		</table>
	</form>
</body>
<script>
	var msg = '${msg}'; // 쿼터 빠지면 넣은 문구가 변수로 인식됨.
	if(msg != ''){
		alert(msg);
	}
	
	var overChk = false;
	
	$('#confirm').on('keyup', function() {
		if ($('input[name="pw"]').val() == $(this).val()) {
			$("#msg").html('비밀번호가 일치합니다');
			$("#msg").css({'color':'green'});
		} else {
			$("#msg").html('비밀번호가 일치하지 않습니다');
			$("#msg").css({'color':'red'});
		}
	});
	
	function overlay() {
		console.log('click');
		var id = $('input[name="id"]').val();
		$.ajax({
			type:'post', 
			url:'overlay.do', 
			data:{'id':id}, 
			success:function(data){ 
				console.log(data);
				if(data.use > 0){
					alert('이미 사용중인 아이디 입니다.');
					$('input[name="id"]').val('');
				}else{
					alert('사용 가능한 아이디 입니다.');
					overChk = true; // 사용 가능한 아이디라는 유효성 검사가 이루어져야한다
				}
			}, 
			error:function(error){ // 통신 실패 시
				console.log(error);
			} 
		});
	}
	function join() {
		var $id = $('input[name="id"]');
		var $pw = $('input[name="pw"]');
		var $auth = $('input[name="auth"]:checked');
		var $name = $('input[name="name"]');
		var $age = $('input[name="age"]');
		var $gender = $('input[name="gender"]:checked');
		var $email = $('input[name="email"]');
		
		console.log($pw.val());
		
		// 1. 모든 입력이 들어왔는지?
		if(overChk == false) {
			alert("아이디 중복 체크를 해주세요");
			$id.focus();
			return false;
		} else if($id.val() == '') {
			alert("아이디 중복 체크를 해주세요");
			$id.focus();
		} else if($pw.val() == '') {
			alert("비밀번호를 입력해주세요");
			$pw.focus();
		} else if($name.val() == '') {
			alert("이름을 입력해주세요");
			$name.focus();
		} else if($age.val() == '') {
			alert("나이를 입력해주세요");
			$age.focus();
		} else if($gender.val() == null) {
			alert("성별을 체크해주세요");
		} else if($email.val() == '') {
			alert("이메일을 입력해주세요");
			$email.focus();
		} else {
			/*
				정규표현식의 패턴을 개발자가 마음대로 만들 수 있다
				그래서 문자열이 포함되어있는지 확인한다
			*/
			// 만악에 [abcdefg], a OR b OR c OR d OR e OR f OR g
			// [a-zA-Z] a 부터 z 까지 이거나 A 부터 Z 까지
			// [a-zA-Zㄱ-ㅎ가-힣] 
			// [0-9] 숫자
			// 나이 데이터를 넣기 전에 문자가 포함되어있는지 확인한다
			var regExp = new RegExp('[a-zA-Zㄱ-ㅎ가-힣]');
			var match = regExp.test($age.val()); // 위의 표현식 일치 여부 판단
			if (match) {
				alert("나이는 숫자만 입력해주세요");
				$age.val('');
				$age.focus();
				return false;
			} else {
				console.log("서버로 회원가입 요청");
				$('form').submit(); // submit 버튼 역할을 해준다				
			}
		} 
		// age 가 숫자인지 문자인지 구별하기 위해 정규표현식을 사용한다
		// 정규표현식은 객체를 사용해야한다
		

		
		
		
		// 2. 양식에 맞춰서 입력했는지?
		
	}
</script>
</html>

       

      1. 양식에 맞춰서 모두 입력했는지?

      2. 입력한 정보가 규칙에 맞는지?

      페이징

      너무 많은 게시글이 있어서 1~n 페이지를 만들어줘야한다 

      1. 전체 페이지의 수가 얼마이고 페이지가 전체 몇개 나오는가

      2. 게시글 갯수를 몇개로 나눌 것인가

      select * from bbs;
insert into bbs (user_name, subject, content) 
	select user_name, subject, content from bbs;
select count(idx) from bbs; -- 4096
select * from bbs 
-- 페이지당 5,10,15,20 개 씩 보여줄 때 몇 페이지가 나오는가?
select ceil(count(idx) / 5) as pages from bbs 
	union all
select ceil(count(idx) / 10) from bbs 
	union all
select ceil(count(idx) / 15) from bbs 
	union all
select ceil(count(idx) / 20) from bbs;

-- SELECT CEIL(COUNT(IDX) / #{PARAM1}) FROM BBS;

-- 5개씩 게시글을 어떻게 보여줄 수 있을까?
SELECT 
	(select count(new_filename) from photo p where p.idx= b.idx) as img_cnt,
	b.idx, 
	b.subject, 
	b.user_name, 
	b.bHit, 
	b.reg_date 
FROM bbs b ORDER BY idx DESC limit 0, 5; -- 몇번 부터 시작할건지, 몇개씩 보여줄지

       

      List.jsp

      페이지의 번호와 몇개의 게시글을 보고 싶다고 서버에 요청한다

      $.ajax({
   type:'get',
   url:'./list.ajax',
   data:{
       'page':page,
       'cnt':$("#pagePerNum").val()
   },
   dataType:'json',
   success:function(data){
      drawList(data.list);
   },
   error:function(error){
      console.log(error)
   }
});

      Controller

      전달받은 페이지의 번호와 게시글 갯수를 서비스에 전달하고 그 결과를 다시 AJAX 통신으로 VIEW에게 전달한다

      	// 비돟기 방식 : 일단 페이지 도착 한 다음
	@RequestMapping(value="/list.ajax")
	@ResponseBody // response 객체로 반환
	public Map<String, Object> listCall(String page, String cnt) {
		logger.info("listCall 요청");
		logger.info("페이지당 보여줄 갯수 : {} , 요청 페이지 : {}", cnt, page);
		Map<String, Object> map = new HashMap<String, Object>();
		int currPage = Integer.parseInt(page);
		int pagePerCnt = Integer.parseInt(cnt);
		List<BoardDTO> list = BoardSevice.list(currPage, pagePerCnt);
		map.put("list",list);
		
		return map; //json 과 가자 닮은 map으로 반환
	}

       

      Service

      게시글의 정보를 데이터베이스로부터 전달받는다

      public List<BoardDTO> list(int currPage, int pagePerCnt) {
    int start = 0;

    return BoardDAO.list(start, pagePerCnt);
}

      board_mapper.xml

      LIMIT [페이지에서], [몇개 가져올지]

      	<select id="list" resultType="kr.co.home.board.dto.BoardDTO">
	SELECT 
		(select count(new_filename) from photo p where p.idx= b.idx) as img_cnt,
		b.idx, 
		b.subject, 
		b.user_name, 
		b.bHit, 
		b.reg_date 
	FROM bbs b ORDER BY idx DESC LIMIT #{param1}, #{param2}
	</select>
	<select id="allCount" resultType="Integer">
		SELECT CEIL(COUNT(IDX) / #{PARAM1}) FROM BBS
	</select>

      페이징 처리를 도와주는 라이브러리

      https://drive.google.com/file/d/15JkKYbMPEQy_MinlpmJIT3wVmsLrwPgB/view?usp=drive_link

       

      jquery.twbsPagination.js

       

      drive.google.com

      실습

      회원가입, 유효성 검사

      로그인 후 게시판 리스트 페이징 처리

      보여주는 페이지 갯수 페이징 처리

       

      17:10 

      '백엔드(웹 서버, WAS) > Spring' 카테고리의 다른 글

      45일차 - ajax 기초 코드  (0) 2024.03.27
      44일차 - 관리자, 아이디 중복체크, 이미지 표시  (0) 2024.03.26
      43일차 - 파일 업로드 다운로드  (0) 2024.03.22
      42일차 - 파일 게시판  (0) 2024.03.21
      41일차 - 게시판 구현 & 문제  (0) 2024.03.20

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바