D+54::스프링_쇼핑몰_회원가입/로그인

Am.Vinch·2022년 9월 14일

[자바국비학원] 수업내용정리

목록 보기

54/92

20220913_TUE

스프링_프로젝트명 : shop (이어서)

프로젝트 생성시, 추가기능 설명(porm.xml에 자동 추가)

spring web :웹개발 환경기능

devTools : 프로젝트만들고 자바내용 수정,새로고침시 즉각적으로 확인 가능

lombok + 다운로드 : getter,setter,toString,생성자 자동생성기능(단, 별도 다운로드 설치 필수)

thymeleaf + Fragment(layout): 스프링프로젝트 설치시, 스프링내 권고 사항(fragment 별도 porm.xml에 별도 붙여넣기 필요: 레이아웃기능 )

jdbcAPI :자바 데이터베이스 연결 기능 모듈(DB사용위해)

oracleDriver / H2 Database(테스트용 DB) :오라클 사용 위해

mybatis framework / Data jpa :mybais와 jpa 사용 위해

+) 외부에서 가져오는 기능

bootStrap :화면 개발 라이브러리(디자인)

주의사항

porm.xml 에서 추가된 기능 설명
연결되는 db 오라클 사용계정/비밀번호 확인

추가된 라이브러리 기능 설명

item_list

xmlns:th="http://www.thymeleaf.org" : 타임립프 기능 추가

xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout" : 레이아웃 기능 추가

layout:decorate="layout/base_layout" / layout:fragment="content" : template 폴더 기준 html파일에서 "content"부분을 현재 이 파일로 대체하여 열리도록 한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout" 
	layout:decorate="layout/base_layout"><!-- base_layout.html파일 처럼 레이아웃하겠다. 이페이지는 base_layout페이지랑 같이 열리는 것이다.-->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 같이열리는 base_layout페이지에서 content란 영역은 이 부분이 열린다. -->
<div layout:fragment="content">
	상품목록페이지
	
</div>
</body>
</html>

base_layout.html

th:replace="fragment/top::top"> : fragment폴더 안에 top html파일을 top이라는 이름으로, fragment를 불러와 대체하겠다

href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" :부트스트랩 사용위해 가져오기/ 레이아웃페이지에서 앞으로 모든 내용들이 나오기때문에 여기에 부트스트랩가져오면 모두 자동 적용된다

href="/css/common.css" rel="stylesheet" :css가져오기 단,static 경로설정은 /부터 넣고 시작한다!(template와의 차이)

src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous" : 화면에 나타나지는 내용은 없지만,
부트스크랩 자바스크랩은 바디태그 끝나기전 해야하기때문에 footer라는 html파일에 자바스크립트를 붙여넣어서 아래 div영역으로 표시한다.(footer.html 삭제)

th:replace="fragment/top::top" : fragment폴더 안에 top html파일을 top이라는 이름으로, fragment를 불러와 대체하겠다

<!-- 모든 페이지에 적용시키는 파일 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout"><!-- 타임리프,레이아웃 기능 사용하겠다 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 레이아웃페이지에서 앞으로 모든 내용들이 나오기때문에 여기에 부트스트랩가져오면 모두 자동 적용된다 -->
<!-- 외부의 부트스트랩 사용위해 가져오기 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- css가져오기  단,static 경로설정은 /부터 넣고 시작한다!(template와의 차이)-->
<link href="/css/common.css" rel="stylesheet">
</head>
<body>
<div class="container">
	<!-- 고정된 top.html 화면 -->
	<div class="row">
		<div class="col">
			<div th:replace="fragment/top::top"></div><!-- fragment폴더 안에 top html파일을 top이라는 이름으로, fragment를 불러와 대체하겠다 -->
		</div>
	</div>
	<!-- 계속바뀌는 베이스화면 -->
	<div class="row">
		<div class="col">
			<div layout:fragment="content"></div>
		</div>
	</div>
</div>

<!-- 화면에 나타나지는 내용은 없지만,
부트스크랩 자바스크랩은 바디태그 끝나기전 해야하기때문에 footer라는 html파일에 자바스크립트를 붙여넣어서 아래 div영역으로 표시한다.(footer.html 삭제) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>

로그인 클릭하면, 모듈 띄우기

top.html

부트스트랩 사이트 이용 (bootStrap > docs > components > modal > live demo)

data-bs-toggle="modal" data-bs-target="#login_modal" : date-(임의 속성명) 을 넣고 임의의 이름을 사용하면 사용자 지정 속성값을 사용할 수 있다.

id="login_modal" 로 되어있는 modal을 불러와서 사용하는 것

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 밑에 두개 추가하면, 앞으로는 다른 html에서 자동으로 부트스트랩 추가된다. -->
</head>
<body>
<div th:fragment="top">
<!-- 부트스트랩 사용위해 가져오기 -->
	<div class="row">
	<!-- 부트스트랩으로 글자 위치 조정 -->
	<!-- text-end : 오른쪽 text-start : 왼쪽 text-center :가운데 -->
		<div class="col text-end">
			JOIN
			<!-- 해석) 로그인 클릭시, modal 실행  어떤 id값으로 modal을 띄울지-->
			<span data-bs-toggle="modal" data-bs-target="#login_modal">LOGIN</span>
		</div>
	</div>
	<div class="row">
		<div class="col text-center"> 
			<h1>S H O P</h1>
		</div>
	</div>
	<!-- MENU -->
	<div class="row">
		<div class="col">
			<nav class="navbar navbar-expand-lg bg-light">
			  <div class="container-fluid">
			    <a class="navbar-brand" href="#">Naver</a>
			    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			      <span class="navbar-toggler-icon"></span>
			    </button>
			    <div class="collapse navbar-collapse" id="navbarNav">
			      <ul class="navbar-nav">
			        <li class="nav-item">
			          <a class="nav-link active" aria-current="page" href="#">Home</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link" href="#">Features</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link" href="#">Pricing</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link disabled">Disabled</a>
			        </li>
			      </ul>
			    </div>
			  </div>
			</nav>
		</div>
	</div>
	
<!--  //로그인 버튼 클릭시, 실행되는 modal //  -->
	
	<!-- Modal -->
	<div class="modal fade" id="login_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	  
	    <div class="modal-content">
	    
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold;">L O G I N</h5>
	        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	      </div>
	      
	      <!-- 로그인창  -->
	      <div class="modal-body">
			<form>
			  <div class="mb-3">
			    <label for="exampleInputEmail1" class="form-label">ID</label>
			    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Input your ID">
			  </div>
			  <div class="mb-3">
			    <label for="exampleInputPassword1" class="form-label">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Input your password">
			  </div>
			  <div class="mb-3 form-check">
			    <input type="checkbox" class="form-check-input" id="exampleCheck1">
			    <label class="form-check-label" for="exampleCheck1">Check me out</label>
			  </div>
			  <button type="submit" class="btn btn-primary">Submit</button>
			</form>
	      </div>
	      
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">login</button>
	      </div>
	      
	    </div>
	    
	  </div>
	</div>

</div>
</body>
</html>

주소검색 API(카카오)

https://postcode.map.daum.net/guide

member 패키지 생성

스프링_회원가입

top.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 밑에 두개 추가하면, 앞으로는 다른 html에서 자동으로 부트스트랩 추가된다. -->
</head>
<body>
<div th:fragment="top">
<!-- 부트스트랩 사용위해 가져오기 -->
	<div class="row">
	<!-- 부트스트랩으로 글자 위치 조정 -->
	<!-- text-end : 오른쪽 text-start : 왼쪽 text-center :가운데 -->
		<div class="col text-end">
			<!-- 해석) 로그인 클릭시, modal 실행// 어떤 id값으로 modal을 띄울지-->
			<span data-bs-toggle="modal" data-bs-target="#join_modal">JOIN</span>
			<span data-bs-toggle="modal" data-bs-target="#login_modal">LOGIN</span>
		</div>
	</div>
	<div class="row">
		<div class="col text-center"> 
			<h1>S H O P</h1>
		</div>
	</div>
	<!-- MENU -->
	<div class="row">
		<div class="col">
			<nav class="navbar navbar-expand-lg bg-light">
			  <div class="container-fluid">
			    <a class="navbar-brand" href="#">Naver</a>
			    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			      <span class="navbar-toggler-icon"></span>
			    </button>
			    <div class="collapse navbar-collapse" id="navbarNav">
			      <ul class="navbar-nav">
			        <li class="nav-item">
			          <a class="nav-link active" aria-current="page" href="#">Home</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link" href="#">Features</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link" href="#">Pricing</a>
			        </li>
			        <li class="nav-item">
			          <a class="nav-link disabled">Disabled</a>
			        </li>
			      </ul>
			    </div>
			  </div>
			</nav>
		</div>
	</div>
	
	
<!-- login 클릭시 실행 Modal  -->
<div class="modal fade" id="login_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  
    <div class="modal-content">
    
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold;">L O G I N</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- 로그인창  -->
      <div class="modal-body">
		<form>
		  <div class="mb-3">
		    <label for="exampleInputEmail1" class="form-label">ID</label>
		    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Input your ID">
		  </div>
		  <div class="mb-3">
		    <label for="exampleInputPassword1" class="form-label">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Input your password">
		  </div>
		  <div class="mb-3 form-check">
		    <input type="checkbox" class="form-check-input" id="exampleCheck1">
		    <label class="form-check-label" for="exampleCheck1">Check me out</label>
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">login</button>
      </div>
      
    </div>
    
  </div>
</div>

<!-- join 클릭시 실행 Modal -->
<div class="modal fade" id="join_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold;">J O I N</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <div class="modal-body">
      <!--  너비 조정-->
      <!-- col-12 / col-6 :  한 줄 너비 총 크기 12이기때문에 12분등 중 어느만큼 사용하는건지 -->
	  	<form class="row g-3" action="/member/join" method="post">
		  	<!-- class값은 고정 건드리면 안됨. 부트스트랩사용하기위한 의미 -->
		    <!-- for태그와 id태그 이름은 같게 하도록 -->
		  <div class="col-12">
		    <label for="memberId" class="form-label">ID</label>
		    <input type="text" class="form-control" id="memberId" placeholder="put your ID" name="memberId">
		  </div>
		  <div class="col-12">
		    <label for="memberPw" class="form-label">PASSWORD</label>
		    <input type="password" class="form-control" id="memberPw" name="memberPw" placeholder="put your Password">
		  </div>
		  <div class="col-12">
		    <label for="memberName" class="form-label">NAME</label>
		    <input type="text" class="form-control" id="memberName" name="memberName" placeholder="put your Name">
		  </div>

		 <!-- 주소(상세주소 + 검색버튼추가) -->
		 <!-- 줄을 맞추기위해 실제내용은 화면에 안보이도록 공백문자사용/ class에 form-control 붙여넣기 -->
		  <div class="col-9">
		    <label for="memberAddr" class="form-label"> ADDRESS </label>
		    <input type="text" class="form-control" id="memberAddr" name="memberAddr"  readonly onclick="searchAddr();"><!-- 값변경못하도록 읽기전용속성값부여하기 ( 데이터넘기기 가능) -->
		  </div>
		  <div class="col-3" >
		    <label for="" class="form-label">&nbsp;</label>
			<input type="button" class="btn btn-secondary form-control" onclick="searchAddr();" value="Search">
		  </div>
		  <div class="col-12" >
		    <input type="text" class="form-control" id="addrDetail" name="addrDetail">
		  </div>
		 
		  <div class="col-12">
		    <label for="memberEmail" class="form-label">EMAIL</label>
		    <input type="text" class="form-control" id="memberEmail" placeholder="put your Email" name="memberEmail">
		  </div>
		  
		  <div class="d-grid gap-2 col-12" >
		    <!-- 버튼클릭하나로 모든 데이터 가져가야하므로 무조건 submit!  -->
		    <button type="submit" class="btn btn-primary">JOIN</button>
		  </div>
		</form>
	  </div>      
    </div>
  </div>
</div>
<!-- 카카오API 사용위해 자바스크립트 사용 전, 미리 로드하기 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- js불러오는 방법_기본 (1) -->
<!-- 주의)html 파일 이외의 파일들은 static 폴더 기준이면서 맨앞은 '/'넣어줘야한다!!!(templates X) -->
<!-- src속성값을 넣어주면 해당 파일에 js찾아서 불러온다는 기능 -->
<!-- <script type="text/javascript" src="/js/layout/top.js"></script> -->

<!-- js불러오는 방법_타임리프 (2) -->
<!-- 기본방법과 비슷하지만 @{}사용해야한다! -->
<script type="text/javascript" th:src="@{/js/layout/top.js}"></script>

<!-- 위 방법의 차이점은? -->
<!-- 디자이너와 협업시 용이하다.
이클립스를 사용하지 않는 디자이너분들은 타임리프를 사용해서 타임리프로 된 html파일은 데이터 던져주면,
데이터값을 확인할 수 있다. 타임리프를 사용하지않으면 디자이너분들이 사용하기 불편하기때문에 사용하는 것이다. -->
</div>
</body>
</html>

top.js

//회원가입에서 search 버튼 클릭시, 진행 메소드
function searchAddr(){
	new daum.Postcode({
	    oncomplete: function(data) {
	        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	        // 예제를 참고하여 다양한 활용법을 확인해 보세요.
	    	
	        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
	    	 
            // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            const roadAddr = data.roadAddress; // 도로명 주소 변수
            document.querySelector('#memberAddr').value = roadAddr;
            
	    }
	}).open();
}

base_layout.html

<!-- 모든 페이지에 적용시키는 파일 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout"><!-- 타임리프,레이아웃 기능 사용하겠다 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 레이아웃페이지에서 앞으로 모든 내용들이 나오기때문에 여기에 부트스트랩가져오면 모두 자동 적용된다 -->
<!-- 외부의 부트스트랩 사용위해 가져오기 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- css가져오기  단,static 경로설정은 /부터 넣고 시작한다!(template와의 차이)-->
<link href="/css/common.css" rel="stylesheet">
</head>
<body>
<div class="container">
	<!-- 고정된 top.html 화면 -->
	<div class="row">
		<div class="col">
			<div th:replace="fragment/top::top"></div><!-- fragment폴더 안에 top html파일을 top이라는 이름으로, fragment를 불러와 대체하겠다 -->
		</div>
	</div>
	<!-- 계속바뀌는 베이스화면 -->
	<div class="row">
		<div class="col">
			<div layout:fragment="content"></div>
		</div>
	</div>
</div>

<!-- 화면에 나타나지는 내용은 없지만,
부트스크랩 자바스크랩은 바디태그 끝나기전 해야하기때문에 footer라는 html파일에 자바스크립트를 붙여넣어서 아래 div영역으로 표시한다.(footer.html 삭제) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>

Am.Vinch

Dev.Vinch

이전 포스트

D+53::스프링부트_쇼핑몰 만들기/부트스트랩

다음 포스트

D+54::스프링_쇼핑몰_회원가입/로그인

[자바국비학원] 수업내용정리

프로젝트 생성시, 추가기능 설명(porm.xml에 자동 추가)

추가된 라이브러리 기능 설명

로그인 클릭하면, 모듈 띄우기

주소검색 API(카카오)

스프링_회원가입

D+53::스프링부트_쇼핑몰 만들기/부트스트랩

D+55::스프링_회원가입/로그인(session이용/event(js) 이용)/부트스트랩

0개의 댓글