[Spring][쇼핑몰 프로젝트][46] 댓글 등록 - 3
프로젝트 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>
본격적으로 태그를 추가해보겠습니다. 먼저 <body> 태그 내부에 전체를 감싸는 <div>와 팝업창이 어떤 목적의 창인 지를 알 수 있는 제목 부분의 태그 코드를 추가했습니다.
<div class="wrapper_div">
<div class="subject_div">
리뷰 등록
</div>
</div>
리뷰와 평점을 입력할 수 있는 태그를 작성했습니다.
- 상단부에는 리뷰할 책 제목이 출력되도록 했습니다.
- 평점의 경우 <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>
팝업창이 닫히도록 하는 window.close() 메서드를 호출합니다.
window.close();
등록 버튼
등록 버튼을 눌렀을 때 회원이 작성한 리뷰 정보를 서버에 요청과 함께 데이터를 보내고, 서버가 성공적으로 요청을 처리할 경우 팝업창이 닫힌 도록 로직을 짤 것입니다.
등록 버튼을 눌렀을 때 동작하는 메서드를 추가합니다.
/* 등록 버튼 */
$(".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();
}
});
});
3. 테스트
서버를 구동시켜서 댓글이 정상적으로 DB에 등록되는지 확인합니다.
REFERENCE
DATE
- 2020.01.06