본문 바로가기
국비과정/Spring

20230728 _[40일차]_01. Spring 게시판 회원가입 페이지

phyho 2023. 7. 28. 18:29

오전 조별발표

1조_ 놀이공원 N차 => 비용N배   &  에어컨

2조_ 우리조

3조_ 강아지 공원산책

4조_ 레이스

5조_ 드래그 파일지우기 좌표 최소거리

이제 회원가입 페이지 ( join.jsp) 꾸며줬으면 전체를 form태그로 묶어주기

 

취소버튼은 type을 reset 로 설정

 

이제 form을 post 방식으로 보낼거니까

LoginController에 

@PostMapping 으로 join이랑 연결해주기

 

매개변수는 String 타입의 key, value를 가지는 map으로 채워줌

알아서 key, value 값을 채워줌

테스트용으로 return은 join으로 해서 출력값 확인해보자 

@PostMapping 으로 "/join" 으로 보내는데 슬래시 앞에 콤마가 있어서 405오류가 났었다....주의***

 

이제 가입하기 버튼 누르면 다시 join 페이지(현재페이지)로 돌아온다

잠시 기초로 돌아가자

 

windows 에 's' 가 붙는 이유는?

 

C:\Windows\Fonts  => 폰트 여기에 들어있음

암튼 회원가입 폼 작성하고 가입하기 버튼 누르면 콘솔창에 8가지 정보 뜨는거 확인가능

 

이제 이 값들을 db로 가져갈 JoinDTO 만들자

회원가입 창에 있는 정보들 변수로 선언해주고 getter/setter 생성

 

이제 컨트롤러에서는 dto에서 값을 가져오면 된다.

dto에서는 jsp에 있는 name에 해당하는 값을 알아서 가져온단다 대박

 

db까지 보내서 가져온 결과값을 int타입 result로 받을거야

if 조건문으로 만약  result 가 1이라면(로그인 성공)  =>  로그인 페이지로 이동

아니라면 다시 회원가입 페이지로 이동

 

밑줄 눌러서 서비스에 join() 메소드 생성

 

서비스에서도 밑줄 눌러서 DAO에  join() 메소드 생성

 

DAO 에서는 mapper한테 일시켜

 

mapper에서 쿼리문 작성

보내기만 할거니 parameterType 만 com.phyho.DTO.JoinDTO 로 써주고

요기 자꾸 joinDTO로 써서 오류가 났었다 *주의*

 

INSERT INTO members(m_id, m_pw, m_name, m_addr, m_birth, m_mbti, m_gender)
VALUES(#{id}, #{pw1}, #{name}, #{addr}, #{birth}, #{mbti} #{gender})

위에 JoinDTO 로 수정필요

 

하이디에 birth, mbti, gender 필드값 추가

 

데이터 받을 필드를 추가해주고

이제 회원가입창에서 값들 전부 채워주고 가입하기 눌러주면 아래처럼 db에 데이터가 입력된다.

이제 회원가입이 가능!

 

join으로 돌아가는 부분도 컨트롤러 지나서 가도록 redirect 붙여주기 (좀더 확실하게 해주기)

요기에다가 전체회원정보 가져올거 _ 어려우니 주의****

 

LoginDTO에는 mbti 등 정보가 없으니 JoinDTO를 새로 만든건데

JoinDTO 에 변수 no를 추가해서 연결

일단 아래처럼 no 변수추가하고,  getter/setter 생성

 

LoginController 에서 get 방식으로 보내자

ModelAndView 사용

@GetMapping("/members")  

가져온 전체 회원정보를 "list"라는 이름으로 list에 담아 mv에 넣고 이 값을 리턴

members() 메소드 밑줄 클릭해서 서비스에 생성하자

서비스에서도 members() 메소드 밑줄 클릭해서 DAO에 생성

DAO에서도 members() 메소드로  mapper한테 일시켜

selectList 사용_ 한줄씩 여러데이터들을 가져올거니까!

 

 

mybatis – MyBatis 3 | Mapper XML Files

 

mybatis – MyBatis 3 | Mapper XML Files

Mapper XML Files The true power of MyBatis is in the Mapped Statements. This is where the magic happens. For all of their power, the Mapper XML files are relatively simple. Certainly if you were to compare them to the equivalent JDBC code, you would immedi

mybatis.org

 

mapper에 members 정보들을 가져오는 쿼리문 작성

 

 

parameterType 과 다르게 resultMap 은 mapping시켜서 쓰겠다는 뜻으로

위에 적어줄 resultMap 의  값들과 join이라는 이름으로 연결시켜 주는거

 

이제 가져올 데이터들 정보를 적어준다

column은 필드명, property 은 dto 변수명, jdbcType 은 db에서 설정한 데이터유형, javaType 은 java에서의 데이터타입 

                                                                 대문자로 적어줘야함

 

 

아래처럼 하나하나 적어줘야 한다......

 

암튼 위에 적어준 모든 정보들을 아래의 쿼리문으로 가져올거

 

members.jsp 생성

(새로 생성하기보다 board.jsp 파일을 복붙하고 살짝 수정해주기)

forEach문으로 list의 값들을 하나하나 출력

 

db에 저장된 모든 회원정보들을 아래처럼 회원리스트 페이지에 불러온다

오늘까지 한 회원가입 페이지 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JOIN</title>
<link rel="stylesheet" href="./css/join.css">
<link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<%@ include file = "menu.jsp" %>

	<form action="./join" method="post" >
		<div class="joinBox">
	

		<h1>회원가입</h1>
		
			<div class="idBox">
				<input type="text" name="id" id="id" placeholder="아이디" > 
			</div>
			<div class="pwBox1">
				<input type="text" name="pw1" id="pw1" placeholder="비밀번호" >
			</div>
			<div class="pwBox2">
				<input type="text" name="pw1" id="pw2" placeholder="비밀번호확인" >
			</div>
			<div class="nameBox">
			<input type="text" name="name" id="name" placeholder="이름" >
			</div>
			<div class="addrBox">
			<input type="text" name="addr" id="addr" placeholder="주소" >
			</div>
			
			<div class="selectBox"> 
				<div class="selectText">성별</div>
				<label for="male">남자</label>
	    		<input type="radio" name="gender" id="male" value="1" />
	    		<label for="female">여자</label>
	    		<input type="radio" name="gender" id="female" value="0"/>
			</div>
			
			<div class="birthBox"> 
				<div class="birthText">생년월일</div>
				<input type="date" name="birth" id="birth">
			</div>
			
			<div class="mbtiBox">
				<div class="mbtiText">MBTI</div>
				<select name="mbti" id="mbti">
					<option>선택</option>
					<optgroup label="대문자 E">
						<option value="ESTP">ESTP</option>
						<option value="ESTJ">ESTJ</option>
						<option value="ESFP">ESFP</option>
						<option value="ESFJ">ESFJ</option>
						<option value="ENFP">ENFP</option>
						<option value="ENFJ">ENFJ</option>
						<option value="ENTP">ENTP</option>
						<option value="ENTJ">ENTJ</option>
					</optgroup>
					<optgroup label="대문자 I">
						<option value="ISTJ">ISTJ</option>
						<option value="ISTP">ISTP</option>
						<option value="ISFJ">ISFJ</option>
						<option value="ISFP">ISFP</option>
						<option value="INTJ">INTJ</option>
						<option value="INTP">INTP</option>
						<option value="INFJ">INFJ</option>
						<option value="INFP">INFP</option>
					</optgroup>
				</select>
			</div>
			
			<div class="btnBox1">
				<button type="submit" class="Jbtn">가입하기</button>
			</div>
			<div class="btnBox2">
				<button type="reset" class="Cbtn">취소</button>
			</div>
		
		</div>
	</form>

</body>
</html>
@charset "UTF-8";
body{
	margin: 0;
	align-items: stretch;
}

input {
	width: 300px;
    height: 20px;
}

.joinBox, h1 {
	text-align: center;
}

.joinBox {
	width: 500px;
	height: 800px;
	border: 1px solid balck;
	
}

.idBox, .pwBox1, .pwBox2, .nameBox, .addrBox {
	border-bottom: 2px solid #adadad;
  	margin: 30px;
  	padding: 10px 10px;
}

.selectBox, .birthBox, .mbtiBox {
	margin: 30px;
  	padding: 10px 10px;
  	width: 50%px;
}


#id, #pw1, #pw2, #name, #addr {
	border:none;
  	outline:none;
  	width: 100%;
  	height: 25px;
  	font-size:16px;
}

#mbti {
	border: 1px solid beige;
}

#birth{
  	margin: 0 30px 0 30px;
  	width: 100%;
  	font-size:16px;
}

.selectText, .birthText, .mbtiText {
	text-align: left;
	font-size:16px;
}

.selectBox #male, #female {
	display: inline-block;
	cursor: pointer;
	width: 30px;
  	margin: 0 30px 30px 30px;
  	padding: 10px 10px;
  	
}
}
.selectBox input[type=radio]+label{
	/* width: calc(100%-70px); */
    display: inline-block;
}

.btnBox1, .btnBox2 {
	margin: 30px;
	text-align: center;
}
.btnBox2 {
	float: right;
}


.Jbtn {
	border-radius: 30px;
	border: 1px solid white;
	width: 80px;
	height: 40px;
	background-color: #FFDAB9;
	transition-duration: 0.4s;
}

.Jbtn:hover {
	background-color: salmon;
	color: white;
	box-shadow: 10px 10px 10px rgb(254, 187, 42);
	transform: translateY(-0.2em);
}

.Cbtn {
	border-radius: 30px;
	border: 1px solid white;
	width: 80px;
	height: 40px;
	background-color: white;
}

.Cbtn:hover {
	background-color: black;
	color: white;
	transform: translateY(-0.2em);
}

 

 

 

'국비과정 > Spring' 카테고리의 다른 글

20230731 _[41일차]_02. jquery 사용하기  (0) 2023.07.31
20230729 (보충) jquery 맛보기  (0) 2023.07.29
20230727 _[39일차]_01. Spring 게시판 패키지 나누기 & UUID  (0) 2023.07.27
20230726 _[38일차]_01. Spring 게시판 페이징  (0) 2023.07.26
20230725 _[37일차]_01. Spring 게시판 글수정제한 (로그인)  (0) 2023.07.26

'국비과정/Spring' Related Articles

티스토리툴바