생각하면 쉬울 것 같은데 설계하려니까 어려웠던 좋아요 기능
- like_table 생성(좋아요를 체크하는 테이블)
/ board_table에 like_count 컬럼 추가(좋아요 수를 저장하는 컬럼) - 게시글 상세 조회 시 로그인한 회원의 아이디값
(또는 고객번호)을 넘겨 like를 한 적이 있는 지 조회해야 한다.
: 이미 좋아요를 눌렀다면 채워진 좋아요
이미지를 출력해야 하기 때문에 - 좋아요를 클릭 했을 때 아이디(회원번호)가 db에 좋아요
이력이 없다면 insert를, 있다면 좋아요를 취소하기 위해
delete를 한다. - 좋아요 이미지 옆에 게시글의 좋아요 합계를 계산하여
좋아요를 누를때마다 새로고침을 해 정보를 받아온다.
data base
create table board_table(
b_number bigint auto_increment,
cate_number int,
m_id varchar(20),
b_title varchar(20) not null,
b_contents varchar(1000) not null,
b_date datetime not null,
b_hits int default 0,
b_filename varchar(100),
like_count int default 0,
constraint primary key (b_number),
constraint foreign key(m_id) references member_table(m_id) on delete cascade,
constraint foreign key(cate_number) references category_table(cate_number)
);
create table like_table (
like_number bigint auto_increment,
m_id varchar(20),
b_number bigint,
like_check int default 0,
constraint primary key (like_number),
constraint foreign key(m_id) references member_table(m_id) on delete cascade,
constraint foreign key(b_number) references board_table(b_number) on delete cascade
); jsp
로그인을 했는 지 세션값을 활용해 체크
<body>
<c:if test="${sessionScope.loginId == null || sessionScope.loginId eq 'guest'}">
<img src="/resources/img/좋아요전.png" id="likeimg" width="60px" height="60px"
class="rounded-circle mt-2">
${b.like_count} <br><br>
추천 기능은 <a href="/member/login" type="button" id="newLogin"
class="btn btn-outline-success">로그인</a> 후 사용 가능합니다.
</c:if>
<c:if test="${sessionScope.loginId != null}">
<div>
<input type="hidden" id="like_check" value="${like.like_check}">
<img class="rounded-circle likeimg" id="likeimg" src="/resources/img/좋아요전.png"
width="60px" height="60px"> ${b.like_count}
</div>
</c:if>
</body>게시글 상세 조회에 들어오자마자 아이디 체크!
$(document).ready(function ()
: 문서 구조가 만들어 지면 실행되는 이벤트
어떤 좋아요를 보여줄까?
<script>
$(document).ready(function () {
let like_count = document.getElementById('like_count')
let likeval = document.getElementById('like_check').value
const b_number = '${b.b_number}';
const m_id = "${sessionScope.loginId}";
const likeimg = document.getElementById("likeimg")
if (likeval > 0) {
likeimg.src = "/resources/img/좋아요후.png";
}
else {
likeimg.src = "/resources/img/좋아요전.png";
}
// 좋아요 버튼을 클릭 시 실행되는 코드
$(".likeimg").on("click", function () {
$.ajax({
url: '/board/like',
type: 'POST',
data: { 'b_number': b_number, 'm_id': m_id },
success: function (data) {
if (data == 1) {
$("#likeimg").attr("src", "/resources/img/좋아요후.png");
location.reload();
} else {
$("#likeimg").attr("src", "/resources/img/좋아요전.png");
location.reload();
}
}, error: function () {
$("#likeimg").attr("src", "/resources/img/좋아요후.png");
console.log('오타 찾으세요')
}
});
});
});
</script>매일 헷갈리는 것!
#ID명 (선언자 : #) .CLASS명 (선언자 : . )
<배운 것>
제이쿼리에서 id class name 값 가져오기
id 가져오기
let valueById = $('#inputId').val();
class 가져오기
let valueByClass = $('.inputClass').val();
name 가져오기
let valueByName = $('input[name=inputName]').val();
어떤 속성 값을 가져오기 & 제어하기
- id가 test인 value 속성 값을 가져옴
$('#test').attr('value')- id가 test인 속성의 src를 '/resources/img/img.png'로 바꾸기
$('#test').attr('src','/resources/img/img.png')- id가 test인 disabled 속성을 제거하기
$('#test').attr('disabled','')
location.reload(); - 새로고침
그리고 에러 났던 것!
success : funtion()에 ajax로 담아 온 값을
result로 적었더니 계속 오류가 났다.
data로 담으니 잘 되었다. 왜징??
검색해봐도 잘 안나와서 나중에 다시 찾아볼 것!
1일 1커밋 1일 1벨로그!