7월 12일 project - 찜/찜 취소 기능 구현

DB에 찜 목록 추가, 찜 목록 삭제

 

DB - My SQL

CREATE TABLE IF NOT EXISTS Gymmark(
    membernum int,
    gymnum int
);
ALTER TABLE `Gymmark` ADD CONSTRAINT `FK_Member_TO_Gymmark_1` FOREIGN KEY (
	`membernum`
)
REFERENCES `Member` (
	`membernum`
);
ALTER TABLE `Gymmark` ADD CONSTRAINT `FK_Gym_TO_Gymmark_1` FOREIGN KEY (
	`gymnum`
)
REFERENCES `Gym` (
	`gymnum`
);

 

HTML - thymleaf 

<th:block th:if="${gymMark} == 1">
<div><img th:src="@{/images/heart_icon.svg.png}" id="like" class="gymmake"></div>
</th:block>
<th:block th:unless="${gymMark} == 1">
<div><img th:src="@{/images/heart.png}" id="unlike" class="gymmake"></div>
</th:block>

 

DB에서 값을 받아서와 값이 있으면 찜으로 표현 : 찜 목록이 있는지 검사

페이지 목록을 불러오는 메소드 Sevice에서 추가하여 같이 불러옴

int gymMark = gDao.getGymMark(gymnum, membernum);
 mv.addObject("gymMark", gymMark);

Xml - Mybatis 쿼리문

<select id="getGymMark" resultType="Integer" parameterType="Integer">
SELECT count(*) FROM gymmark WHERE gymnum=#{gymnum} and membernum=#{membernum}
</select>

 

같은 이미지를 변경시키는 것이 아니라 이미지를 두개를 사용하여 번갈아 가면서 보여줌

각 이미지마다 id를 주어서 눌렀을 때마다 입력과 삭제가 되도록 기능 구현

 

JavaScript - JQuery, AJAX 

// 찜 기능(입력)
    $('#unlike').click(function (event) {
        event.preventDefault();
        // 비로그인 상태시 찜하기 버튼을 누르면
        if (mid == "") {
            if (confirm("로그인 한 회원만 이용가능합니다. 로그인 하시겠습니까?")) {
                // 승낙하면 로그인 페이지로 이동
                location.href = "/";
            } else {
                // 거부하면 해당 페이지 새로고침location.reload();
            }
        } else {
            form = {"membernum": mnum, "gymnum": gnum};
            $.ajax({
                url: "inputMark",
                type: "POST",
                data: form,
                success: function (res) {
                    console.log(res);
                    if (res == "ok") {
                        ck = true;
                        console.log("찜 성공!")
                        if (confirm("해당 헬스장을 찜하셨습니다.")) {
                            location.reload();
                        } else {
                            // 거부하면 해당 페이지 새로고침하여 찜한거 반영되게하기(HTTP의 속성 때문...)
                            alert("찜 저장 실패");
                            ck = false;
                        }
                    }
                },
                error: function (err) {
                    console.log(err);
                    alert('찜할 수 없습니다.');
                    ck = false
                }
            });
        }
    });

// 찜 취소(삭제)
    $("#like").click(function (event){
        event.preventDefault();
        form = {"membernum": mnum, "gymnum": gnum};
        $.ajax({
            url :  "delMark",
            type : "POST",
            data: form,
            success: function(res) {
                console.log(res);
                if (res == "ok") {
                    ck = true;
                    console.log("찜 취소!")
                    alert('해당 헬스장을 찜 취소하셨습니다.');
                    location.reload();
                } else {
                    alert("찜 취소 실패");
                    ck = false;
                }
            },
            error : function(err) {
                console.log(err);
                alert('찜 취소 할 수 없습니다.');
                ck = false
            }
        })
    });

 

Controller

// 찜 입력
    @PostMapping("inputMark")
    @ResponseBody
    public String inputMark(Integer membernum, Integer gymnum){
        log.info("inputMark()");
        String res = gServ.inputMark(membernum, gymnum);
        return res;
    }

// 찜 삭제
    @PostMapping("delMark")
    @ResponseBody
    public String delMark(Integer membernum, Integer gymnum){
        log.info("delMark()");
        String res = gServ.delMark(membernum, gymnum);
        return res;
    }

 

Service

 // 찜 입력
 public String inputMark(Integer membernum, Integer gymnum) {
        log.info("inputMark()");
        String res = null;
        try {
            gDao.insertMark(membernum, gymnum);
            res = "ok";
        } catch (Exception e){
            e.printStackTrace();
            res = "fail";
        }
        return res;
    }

// 찜 삭제
    public String delMark(Integer membernum, Integer gymnum) {
        log.info("delMark()");
        String res = null;
        try {
            gDao.deleteMark(membernum, gymnum);
            res = "ok";
        } catch (Exception e){
            e.printStackTrace();
            res = "fail";
        }
        return res;
    }

 

Dao

// 찜 입력
    void insertMark(Integer membernum, Integer gymnum);
// 찜 삭제
    void deleteMark(Integer membernum, Integer gymnum);

Xml - Mybatis 쿼리문

// 찜 입력
<insert id="insertMark">
INSERT INTO gymmark VALUES (#{membernum}, #{gymnum})
</insert>
// 찜 삭제
<delete id="deleteMark">
DELETE FROM gymmark WHERE membernum=#{membernum} and gymnum=#{gymnum}
</delete>

 

 

참고사이트

[Spring] 상품 찜하기 기능

스프링 좋아요 구현 및 게시판 리스트에 댓글 수 표시(ajax,마이바티스)