프로젝트에서 구현한 캠퍼 모집하는 기능으로 비동기식이다.(view.jsp는 body부분)
캠퍼 참여 버튼을 누르면 참여가 되고, 버튼이 참여취소로 바뀐다. 참여취소 버튼을 누르면 참여 취소가 된다.
테이블은 두가지
1) update +1 -1이 되는 기본 테이블
2) insert, delete 되는 참여 정보를 저장하는 테이블(기본 테이블 참조)이 있다.
view.jsp
// 이미 캠핑에 참여한 유저 구하기
$(function(){
if("${alreadyJoin}"!=''){
$("#gnewnoBtn1").addClass("separate");
$("#gnewnoBtn1").val("캠핑 취소");
}else{
$("#gnewnoBtn1").removeClass("separate");
$("#gnewnoBtn1").val("캠핑 참여");
}
});
</script>
<div class="col-6">
<div id="joinCamper">
<form method="get" id="joinCamperForm">
<input type="hidden" id="gatherno" name="gatherno" value="${view.gatherno}"/>
<span id="gnewno">현재 참여 신청 인원: <span>${view.gnewno}</span></span> /
<span id="gmemberno">
<input type="hidden" name="gmemberno" value="${view.gmemberno}"/>${view.gmemberno}
</span>
<c:if test="${nickname!=view.nickname}"><!-- 작성자가 로그인한 유저가 아닐 때만 -->
<c:if test="${view.gmemberno>view.gnewno}"><!-- 캠퍼모집 인원이 참여인원이 더 클 때만 -->
<span id="btnDiv">
<input type="submit" class="btn" id="gnewnoBtn1" value="캠핑 참여">
</span>
</c:if>
</c:if>
</form>
</div>
</div>view.js(Ajax로)
$(function(){
// 캠퍼 참여 인원 표시 함수
function gnewnoCount(){
$.ajax({
url:'/gather/gnewnoCount',
data:"gatherno="+$("#gatherno").val(),
success:function(result){
$("#gnewno").children().html(result)
}
});
}
// 참여하기 버튼을 클릭하면 버튼이 참여취소 버튼이 생기고 gathermember DB insert, gather DB gnewno +1
$("#gnewnoBtn1").click(function(event){
event.preventDefault();
if(!$("#gnewnoBtn1").hasClass("separate")){
$.ajax({
url:'/gather/plusGatherCamper',
data:$("#joinCamperForm").serialize(),
type:'GET',
success:function(){
alert("캠핑에 참여신청하였습니다.");
gnewnoCount();
$("#gnewnoBtn1").addClass("separate");
$("#gnewnoBtn1").val("캠핑 취소");
}
});
}else{// 참여 취소 버튼을 누르면 gathermemeber DB delete, gatherDB gnewno -1
if(confirm('캠핑 참여를 취소하시겠습니까?')){
$.ajax({
url:'/gather/minusGatherCamper',
data:"gatherno="+$("#gatherno").val(),
type:'GET',
success:function(){
alert("캠핑참여가 취소되었습니다.");
gnewnoCount();
$("#gnewnoBtn1").removeClass("separate");
$("#gnewnoBtn1").val("캠핑 참여");
}
});
}
}
});
});Controller
현재 로그인한 유저가 참여했는지 아닌지를 나타내기 위해 뷰페이지를 볼 때마다 유저가 참여했는지 아닌지를 확인하기 위해 뷰페이지 맵핑한 주소에 selectJoinCamper 메서드를 활용한다.
// 캠퍼 모임 상세페이지
@GetMapping("/gatherView")
public ModelAndView GatherView(int gatherno, HttpSession session) {
// 상세페이지 보이기
mav.addObject("view", service.gatherView(gatherno));
mav.setViewName("gather/gatherView");
// 캠퍼 참여한 유저 표시
mav.addObject("alreadyJoin", service.selectJoinCamper(gatherno,
(String)session.getAttribute("nickname")));
return mav;
}
// 캠퍼 참여
@GetMapping("/plusGatherCamper")
public GatherMemberVO PlusGatherCamper(int gmemberno, int gatherno, GatherMemberVO vo, HttpSession session) {
String nickname = (String)session.getAttribute("nickname");
vo.setNickname(nickname);
vo.setGender((String)session.getAttribute("gender"));
service.plusGatherCamper(gatherno);
service.gathermemberInsert(gmemberno, gatherno, vo.getNickname(), vo.getGender());
return service.selectJoinCamper(gatherno, nickname);
}
// 캠퍼 유저 수 표시
@GetMapping("/gnewnoCount")
public int gnewnoCount(int gatherno) {
return service.gnewnoCountSelect(gatherno);
}
// 캠퍼 참여 취소
@GetMapping("/minusGatherCamper")
public GatherMemberVO MinusGatherCamper(int gatherno, String nickname, HttpSession session) {
nickname = (String)session.getAttribute("nickname");
service.minusGatherCamper(gatherno);
service.gathermemberDel(gatherno, nickname);
return service.selectJoinCamper(gatherno, nickname);
}Mapper
주의해야 할 점은 gnewnoCountSelect => 참여 멤버를 표시해줄 때 count를 group by로 묶고 조건을 줘야 count가 잘 세진다. !! groub by로 묶지 않고 count로 그냥 해버리면 기본 테이블에서 컬럼의 데이터 값이 아니라 컬럼값이 구해진다.
<!-- 캠퍼 모집 -->
<update id="plusGatherCamper">
UPDATE gather SET gnewno=gnewno+1
WHERE gatherno=#{param1}
</update>
<insert id="gathermemberInsert">
INSERT INTO gathermember(gmemberno, gatherno, nickname, gender)
VALUES(#{param1}, #{param2}, #{param3}, #{param4})
</insert>
<select id="selectJoinCamper" resultType="GatherMemberVO">
SELECT gatherno, nickname FROM gathermember
WHERE gatherno=#{param1} AND nickname=#{param2}
</select>
<select id="gnewnoCountSelect" resultType="int">
SELECT gnewno FROM gather
GROUP BY gatherno
HAVING gatherno=#{param1}
</select>
<update id="minusGatherCamper">
UPDATE gather SET gnewno=gnewno-1
WHERE gatherno=#{param1}
</update>
<delete id="gathermemberDel">
DELETE FROM gathermember
WHERE gatherno=${param1} AND nickname=#{param2}
</delete>DAO
@Mapper
@Repository
public interface GatherDAO {
// 캠퍼 참여 (gatherDB, gathermemberDB)
public int plusGatherCamper(int gatherno);
public int gathermemberInsert(int gmemberno, int gatherno, String nickname, String gender);
// 이미 캠핑 참여한 유저
public GatherMemberVO selectJoinCamper(int gatherno, String nickname);
// 캠퍼 참여 유저 명수
public int gnewnoCountSelect(int gatherno);
// 켐퍼 참여 취소
public int minusGatherCamper(int gatherno);
public int gathermemberDel(int gatherno, String nickname);
}Service
public interface GatherService {
// 캠퍼 참여 (gatherDB, gathermemberDB)
public int plusGatherCamper(int gatherno);
public int gathermemberInsert(int gmemberno, int gatherno, String nickname, String gender);
// 이미 캠핑 참여한 유저
public GatherMemberVO selectJoinCamper(int gatherno, String nickname);
// 캠퍼 참여 유저 명수
public int gnewnoCountSelect(int gatherno);
// 켐퍼 참여 취소
public int minusGatherCamper(int gatherno);
public int gathermemberDel(int gatherno, String nickname);
}ServiceImpl
@Service
public class GatherServiceImpl implements GatherService {
@Inject
GatherDAO dao;
// 캠퍼 참여
// gatherDB
@Override
public int plusGatherCamper(int gatherno) {
return dao.plusGatherCamper(gatherno);
}
// gathermemberDB
@Override
public int gathermemberInsert(int gmemberno, int gatherno, String nickname, String gender) {
return dao.gathermemberInsert(gmemberno, gatherno, nickname, gender);
}
// 이미 캠핑 참여한 유저
@Override
public GatherMemberVO selectJoinCamper(int gatherno, String nickname) {
return dao.selectJoinCamper(gatherno, nickname);
}
// 캠퍼 참여한 유저 명수
@Override
public int gnewnoCountSelect(int gatherno) {
return dao.gnewnoCountSelect(gatherno);
}
// 캠퍼 참여 취소
//gatherDB
@Override
public int minusGatherCamper(int gatherno) {
return dao.minusGatherCamper(gatherno);
}
// gathermemberDB
@Override
public int gathermemberDel(int gatherno, String nickname) {
return dao.gathermemberDel(gatherno, nickname);
}
}