Kim VamPa

[Spring][쇼핑몰 프로젝트][46] 댓글 등록 - 3 본문

스프링 프레임워크/쇼핑몰 프로젝트

[Spring][쇼핑몰 프로젝트][46] 댓글 등록 - 3

Kim VamPa 2022. 1. 6. 10:00
728x90
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

댓글 등록 기능 구현

 댓글 등록 기능 구현 마무리가 목표입니다. 

 

 

순서

1. 리뷰 등록 팝업창 태그 & css

2. 리뷰 등록 팝업창 Javascript

3. 테스트

 

 

1. 리뷰 등록 팝업창 태그 & css

 데이터가 넘어 오는 지 확인하기 위해 작성했던 표현식은 지워 줍니다.

 

 

 

 Jquery를 사용 할 것이기 때문에 연결 코드를 <head> 태그 내부에 추가합니다.

 

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

 

 

 

 리뷰 등록 관련 팝업창 css는 따로 파일을 만들어 주지 않고 html에 추가해주겠습니다. <head> 태그 내부 제일 하단에 아래의 css 설정 코드를 추가해줍니다.

 

  <style type="text/css">
  	/* 창 여분 없애기 */
  	body{
  		margin : 0;
  	}
  	/* 전체 배경화면 색상 */
  	.wrapper_div{
		background-color: #f5f5f5;
	    height: 100%;  	
  	}
 	/* 팝업창 제목 */
  	.subject_div{
	    width: 100%;
	    background-color: #7b8ed1;
	    color: white;
	    padding: 10px;
	    font-weight: bold;
  	}
  	
  	/* 컨텐츠, 버튼 영역 padding */
  	.input_wrap{
  		padding: 30px;
  	}
  	.btn_wrap{
  		padding: 5px 30px 30px 30px;
  		text-align: center;
  	}
  	
  	/* 버튼 영역 */
  	.cancel_btn{
  		margin-right:5px;
  	    display: inline-block;
	    width: 130px;
	    background-color: #5e6b9f;
	    padding-top: 10px;
	    height: 27px;
	    color: #fff;
	    font-size: 14px;
	    line-height: 18px;  	
  	}
  	.enroll_btn{
   	    display: inline-block;
	    width: 130px;
	    background-color: #7b8ed1;
	    padding-top: 10px;
	    height: 27px;
	    color: #fff;
	    font-size: 14px;
	    line-height: 18px;   	
  	}

	/* 책제목 영역 */
	.bookName_div h2{
		margin : 0;
	}
  	/* 평점 영역 */
  	.rating_div{
  		padding-top: 10px;
  	}
  	.rating_div h4{
  		margin : 0;
  	}
  	select{
  	margin: 15px;
    width: 100px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;  	
  	}
  	/* 리뷰 작성 영역 */
  	.content_div{
  		padding-top: 10px;
  	}
  	.content_div h4{
  		margin : 0;
  	}
  	textarea{
		width: 100%;
	    height: 100px;
	    border: 1px solid #dadada;
	    padding: 12px 8px 12px 8px;
	    font-size: 15px;
	    color: #a9a9a9;
	    resize: none;
	    margin-top: 10px;  	
  	}
  
  </style>

 

그림 1-3

 

 

 본격적으로 태그를 추가해보겠습니다. 먼저 <body> 태그 내부에 전체를 감싸는  <div>와 팝업창이 어떤 목적의 창인 지를 알 수 있는 제목 부분의 태그 코드를 추가했습니다.

 

	<div class="wrapper_div">
		<div class="subject_div">
			리뷰 등록
		</div>

	</div>

 

그림 1-4

 

 

 리뷰와 평점을 입력할 수 있는 태그를 작성했습니다. 

 

 - 상단부에는 리뷰할 책 제목이 출력되도록 했습니다.

 - 평점의 경우 <select> 태그를 통해 점수를 선택할 수 있도록 했고 0.5단위로 0.5 부터 4.0까지 선택 할 수 있도록 했습니다.

 - 하단엔 회원이 리뷰 평을 작성할 수 있도록 <textarea> 태그를 사용했습니다. 

 

		<div class="input_wrap">			
			<div class="bookName_div">
				<h2>${bookInfo.bookName}</h2>
			</div>
			<div class="rating_div">
				<h4>평점</h4>
				<select name="rating">
					<option value="0.5">0.5</option>
					<option value="1.0">1.0</option>
					<option value="1.5">1.5</option>
					<option value="2.0">2.0</option>
					<option value="2.5">2.5</option>
					<option value="3.0">3.0</option>
					<option value="3.5">3.5</option>
					<option value="4.0">4.0</option>
				</select>
			</div>
			<div class="content_div">
				<h4>리뷰</h4>
				<textarea name="content"></textarea>
			</div>
		</div>

 

 

 

 추가해 준 "input_wrap" <div> 태그 바로 아래 공간에 버튼 태그를 추가했습니다.

 

 - 버튼은 '취소' 버튼과 '등록' 버튼을 만들었습니다.

 - '취소 버튼의 경우 단순히 팝업창이 닫히도록 만들 것입니다.

 

		<div class="btn_wrap">
			<a class="cancel_btn">취소</a><a class="enroll_btn">등록</a>
		</div>

 

 

 

 

2. 리뷰 등록 팝업창 Javascript

 버튼이 동작하도록 Js 코드를 추가해주겠습니다. 

 

취소 버튼

 

 취소 버튼의 경우 단순히 팝업창이 닫히도록 만들어 줄 것입니다. 

 

<body> 태그 내부 제일 아래 공간에 <script> 태그를 추가해주고, "취소" 버튼을 클릭했을 때 동작하는 코드를 작성합니다.

 

	<script>
	
	/* 취소 버튼 */
	$(".cancel_btn").on("click", function(e){
		
	});	
	
	</script>

 

그림 2-1

 

 

 팝업창이 닫히도록 하는 window.close() 메서드를 호출합니다.

 

window.close();

 

그림 2-2

 

 

 

등록 버튼 

 

 등록 버튼을 눌렀을 때 회원이 작성한 리뷰 정보를 서버에  요청과 함께 데이터를 보내고, 서버가 성공적으로 요청을 처리할 경우 팝업창이 닫힌 도록 로직을 짤 것입니다.

 

 등록 버튼을 눌렀을 때 동작하는 메서드를 추가합니다.

 

	/* 등록 버튼 */
	$(".enroll_btn").on("click", function(e){

	});

 

 

 리뷰 등록 요청과 함께 서버에 전송할 데이터가 담긴 객체를 만듭니다. 

 

 - 서버로부터 전달받은 bookId, memberId 표현식으로부터 얻은 값을 변수에 저장하였습니다.

 

	/* 등록 버튼 */
	$(".enroll_btn").on("click", function(e){

		const bookId = '${bookInfo.bookId}';
		const memberId = '${memberId}';
		const rating = $("select").val();
		const content = $("textarea").val();

		const data = {
				bookId : bookId,
				memberId : memberId,
				rating : rating,
				content : content
		}		
		
	});

 

 

 ajax를 통해 댓글 등록 요청하는 코드를 작성합니다.

 

 - success 속성 값으로 작성한 함수의 구현부에는 팝업창이 닫히도록 코드를 작성했습니다. (ajax 요청을 서버가 성공적으로 수행할 경우 동작합니다.

 

	/* 등록 버튼 */
	$(".enroll_btn").on("click", function(e){

		const bookId = '${bookInfo.bookId}';
		const memberId = '${memberId}';
		const rating = $("select").val();
		const content = $("textarea").val();

		const data = {
				bookId : bookId,
				memberId : memberId,
				rating : rating,
				content : content
		}		
		
		$.ajax({
			data : data,
			type : 'POST',
			url : '/reply/enroll',
			success : function(result){
				window.close();
			}
			
		});		
		
	});

 

그림 2-3

 

 

3. 테스트

 서버를 구동시켜서 댓글이 정상적으로 DB에 등록되는지 확인합니다.

 

 

 

 

 

REFERENCE

  •  

 

 

DATE

  • 2020.01.06

 

728x90
반응형
저작자표시

'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글

[Spring][쇼핑몰 프로젝트][46] 댓글 체크 - 2  (0) 2022.01.10
[Spring][쇼핑몰 프로젝트][46] 댓글 체크 - 1  (5) 2022.01.07
[Spring][쇼핑몰 프로젝트][46] 댓글 등록 - 2  (0) 2022.01.05
[Spring][쇼핑몰 프로젝트][46] 댓글 등록 - 1  (0) 2022.01.03
[Spring][쇼핑몰 프로젝트][45] 댓글 구현 방향 & 댓글 테이블 설계  (0) 2021.12.31
donaricano-btn
'스프링 프레임워크/쇼핑몰 프로젝트' Related Articles more
Comments