스프링 부트 팀플) 20240317_게시판 글 수정 / 글 삭제 / 추천 증감 / 카테고리 include

팀프로젝트/SpringBoot

스프링 부트 팀플) 20240317_게시판 글 수정 / 글 삭제 / 추천 증감 / 카테고리 include

일일일코_장민기 2024. 3. 17. 14:35

728x90

DryIcons.com — Icons and Vector Graphics

dryicons.com

https://velog.io/@jakeseo_me/%EC%8A%A4%ED%94%84%EB%A7%81%EA%B3%BC-JPA-%EA%B8%B0%EB%B0%98-%EC%9B%B9-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EA%B0%9C%EB%B0%9C-36-%EB%8B%89%EB%84%A4%EC%9E%84-%EC%88%98%EC%A0%95-%EC%8A%A4%ED%94%84%EB%A7%81-MVC%EC%9D%98-%ED%8F%BC%EC%B2%98%EB%A6%AC-%ED%8C%A8%ED%84%B4

스프링과 JPA 기반 웹 애플리케이션 개발 #36 닉네임 수정 (+ 스프링 MVC의 폼처리 패턴)

스프링과 JPA 기반 웹 애플리케이션 개발 해당 내용은 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발의 강의 내용을 바탕으로 작성된 내용입니다.강의를 학습하며 요약한 내용을 출처를 표기

velog.io

https://keeeeeepgoing.tistory.com/190

끝)리다이렉트(RedirectAttributes),PRG 패턴(Post/Redirect/Get)

상품 수정 폼 컨트롤러 BasicItemController에 추가 상품 수정폼 이동 메소드 @GetMapping("/{itemId}/edit") //상품수정 폼으로 이동 public String editForm(@PathVariable Long itemId, Model model) { //수정하는 화면에서 상품

keeeeeepgoing.tistory.com

참고자료

오늘은 피곤해서 많이 못했다.
어제 에디터 때문에 하루종일 코딩하고 빌어먹을 조회수는 고쳐지질 않아서 어질어질한 상태이다.

1. 게시판 글 수정

글 jsp에 폼 추가

<form action="<c:url value='/modifyPost'/>/${dto.boardNum}" method="post">

</form>

컨트롤러

- 후술할 이유 때문에 PRG 패턴을 활용했다...또 정보가 너무 안 넘어가서 세션에 넣어서 옮기도 바로 지우도록 코딩했다...왜인지 addFlash가 먹히질 않는다

//게시판 글 수정(PRG패턴)

@PostMapping("/modifyPost/{bNum}")

public String modifyPost(@PathVariable("bNum") int boardNum, HttpSession session) {

DebugBoardDTO dto = serv.viewDBoardContent(boardNum);

session.setAttribute("dto", dto);

return "redirect:/modifyPost";

}

@GetMapping("/modifyPost")

public ModelAndView vmodifyPost(HttpSession session) {

DebugBoardDTO dto = (DebugBoardDTO) session.getAttribute("dto");

ModelAndView mav = new ModelAndView();

mav.addObject("dto", dto);

session.removeAttribute("dto");

mav.setViewName("member/Test/modifyPost");

return mav;

}

수정하는 에디터 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>

<html>

<head>

function save(){

oEditors.getById["txtContent"].exec("UPDATE_CONTENTS_FIELD", []);

//스마트 에디터 값을 텍스트컨텐츠로 전달

var content = document.getElementById("smartEditor").value;

// 값을 불러올 땐 document.get으로 받아오기

$("#content").val( $("#txtContent").val());

return;

}

$(function(){

$("form").on("submit", function(){

save();

})

</script>

</head>

<body>

닉네임: <input type="text" name="nickname" value="${dto.nickname}">

비밀번호: <input type="text" name="password" value="${dto.password}">

제목: <input type="text" name="title" value="${dto.title}">

카테고리: <input type="text" name="category" value="${dto.category}">

${dto.content}

</textarea>

</form>

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "txtContent", //textarea ID 입력

sSkinURI: "/libs/smarteditor/SmartEditor2Skin.html", //martEditor2Skin.html 경로 입력

fCreator: "createSEditor2",

htParams : {

// 툴바 사용 여부 (true:사용/ false:사용하지 않음)

bUseToolbar : true,

// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

bUseVerticalResizer : true,

// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

bUseModeChanger : true

}

});

</script>

</body>

</html>

- 아마 코드를 잘 넣으면 글쓰기 jsp랑 같이 써도 될 것이다. 그런데 몸 상태가 안 좋아서 머리가 안 돌아간다...

컨트롤러

//게시판 글 수정하기

@PostMapping("/updateDBoard")

public ModelAndView updateDBoard(DebugBoardDTO dto) {

// 현재 날짜와 시간을 dto에 입력

Date now = new Date();

dto.setEdittedDate(now);

serv.updateDBoard(dto);

ModelAndView mav = new ModelAndView("member/Test/viewDBoardContent");

mav.addObject("dto", dto);

return mav;

}

- 글을 수정하고, 글 수정하기를 눌렀던 페이지로 돌아간다.

2. 글 삭제

글 jsp

$("#delete").on("click", function(){

window.location.href = "<c:url value='/deletePost'/>/${dto.nickname}/${dto.boardNum}";

//아이디와 글의 아이디가 같으면 바로 삭제 확인화면

//아이디와 글의 아이디가 다르면 비밀번호 확인창

//삭제화면에서 경고 + 취소버튼 / 삭제버튼

//삭제된 게시물은 복구할 수 없습니다.

//게시물을 삭제하시겠습니까?

})

- 이후에 어떻게 수정할지 적어두었다. 오늘은 기능 구현만...

컨트롤러

//게시판 글 삭제하기

@GetMapping("/deletePost/{nn}/{bNum}")

public ModelAndView deletePost(@PathVariable("nn") String nickname, @PathVariable("bNum") int boardNum) {

serv.deleteDBoard(boardNum);

return viewDBoardList();

}

3. 추천 증감

글 jsp

<img src="<c:url value='/resources/images/member/like.svg'/>" width="50" height="50" id="recommendVal" data-val="like">

$("#recommendVal").on("click", function(){

var boardNum = $("#boardNum").val();

var recommendVal = $("#recommendVal").data("val");

if(recommendVal == "normal"){

$("#recommendVal").data("val", "like");

} else if(recommendVal == "like") {

$("#recommendVal").data("val", "dislike");

} else {

$("#recommendVal").data("val", "normal");

}

$.ajax({

type: "POST",

url: "<c:url value='/updateDBoardRecommendNum'/>",

data: {

boardNum: boardNum,

recommendVal: recommendVal,

success: function(response) {

$("#recommendNum").text(response)

if (recommendVal === "like") {

$("#recommendVal").attr("src", "<c:url value='/resources/images/member/like.svg'/>");

} else if (recommendVal === "dislike") {

$("#recommendVal").attr("src", "<c:url value='/resources/images/member/dislike.svg'/>");

}

if (recommendVal === "normal") {

$("#recommendVal").attr("src", "<c:url value='/resources/images/member/well.svg'/>");

}

error: function(error) {

console.error("추천 기능 에러:", error);

}

})

ajax를 사용해서 증감 시키고, 이미지를 변경할 것이다.

컨트롤러

//게시판 추천수 증감

@PostMapping("/updateDBoardRecommendNum")

public int updateDBoardRecommendNum(int boardNum, String recommendVal) {

DebugBoardDTO dto = dServ.viewDBoardContent(boardNum);

int recommendNum = dto.getRecommendNum();

int num = 0;

System.out.println(recommendVal);

if(recommendVal.equals("like")) {

num = 1;

} else if(recommendVal.equals("dislike")) {

num = -2;

} else {

num = 1;

}

recommendNum += num;

HashMap<String, Integer> map = new HashMap<>();

map.put("boardNum", boardNum);

map.put("recommendNum", recommendNum);

dServ.updateDBoardRecommendNum(map);

return recommendNum;

}

4. 카테고리 include

신규 글 작성일 경

닉네임: <input type="text" name="nickname" required="required">

비밀번호: <input type="text" name="password" required="required"><br>

제목: <input type="text" name="title" required="required">

카테고리: <jsp:include page="/WEB-INF/views/common/categoryForDBoard.jsp" flush="true"></jsp:include>

내용을 입력해주세요

</textarea>

</form>

글 수정할 경우

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>

<html>

<head>

//에디터 함수

function save(){

oEditors.getById["txtContent"].exec("UPDATE_CONTENTS_FIELD", []);

var content = document.getElementById("smartEditor").value;

$("#content").val( $("#txtContent").val());

return;

}

$(function(){

//카테고리 select DB 반영

$("#categorySelect").val($("#category").val());

//카테고리 변경 시 db에 저장할 카테고리 name의 value에 반영

$("#categorySelect").on("change", function(){

$("#category").val($("#categorySelect").val());

})

//제출 시 입력된 정보를 컨트롤러로 전송

$("form").on("submit", function(){

save();

})

</script>

</head>

<body>

닉네임: <input type="text" name="nickname" value="${dto.nickname}" required="required">

비밀번호: <input type="text" name="password" value="${dto.password}" required="required"><br>

제목: <input type="text" name="title" value="${dto.title}" required="required">

카테고리: <jsp:include page="/WEB-INF/views/common/categoryForDBoard.jsp" flush="true"></jsp:include>

${dto.content}

</textarea>

</form>

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "txtContent", //textarea ID 입력

sSkinURI: "/libs/smarteditor/SmartEditor2Skin.html", //martEditor2Skin.html 경로 입력

fCreator: "createSEditor2",

htParams : {

// 툴바 사용 여부 (true:사용/ false:사용하지 않음)

bUseToolbar : true,

// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

bUseVerticalResizer : true,

// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

bUseModeChanger : true

}

});

</script>

</body>

</html>

카테고리 include

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

</select>

앞으로 구현할 기능

부트스트랩을 이용한 글 목록 페이지네이션
게시판 + 세부 보기 꾸미기
세부 보기에서 이전글 / 다음글 보이기
게시판이랑 글목록 위에 헤드라인
글 쓸 때, 수정할 때, 삭제할 때 로그인 상태/비로그인 상태 때 다르게 출력

수정 / 삭제 시 비밀번호 대조

삭제 시 경고창 출력

게시판 입장 시 일정시간 유지되는 무작위 번호의 세션 생성 - 그 세션일 때 추천을 누르면 한동안 그 상태 저장

글 검색창