20230808 _[47일차]_01. 게시판 댓글 수정기능 & 스프링부트

detail.jsp에서 

댓글쓰기 몇 글자 썼는지 확인하는 코드만들자

keyup 사용하자

---

Document: keyup event - Web API | MDN (mozilla.org)

Document: keyup event - Web API | MDN

 

 

 

JQ - keydown() 메서드 - 키보드키 내려갈 때 이벤트 발생. (= keydown메서드 = 키다운 메서드) > JQuery | 홈짱닷컴 (homzzang.com)

홈짱닷컴

---

commenttextarea (댓글창) 에 keyup 시 함수 실행되도록 만들어준다.

댓글창에 입력한 글자의 수를 comment (댓글쓰기버튼) 에 text로 넣어준다. 

그러면 아래처럼 댓글 몇글자인지 보여준다.

 

text에 바로 / 600을 해버리면 나눠버리니 아래처럼 연결해준다.

 

---

600자 이상 제한 걸어주자 (일단 테스트용은 10자로 하자)

 

댓글을 10글자 이상 써보면 아래처럼 팝업이 뜬다.

---

댓글창에 입력한 글자에서 10글자만 뽑아서 다시 댓글창의 값으로 넣어준다. 

그러면 11글자까지는 써지고 팝업이 뜨는데

팝업에서 확인을 누르면 지정해준 길이만큼인 10글자만 남는다.

 

아래처럼 text를 value값으로 설정해주고 아래에서 .length 로 길이를 잡아줘도 잘 실행된다.

---

 

댓글 수정하기 만들자

 

수정하기 버튼 누르면 해당 댓글창만 다시 활성화되도록 할거다.

수정하기 버튼에 cedit 클래스이름 지정한다.

click했을때 잘 잡아오는지 alert로 테스트 해보면

수정버튼을 누르면 팝업창 잘 나온다.

 

 

일단 아래처럼 가져올 변수들 선언해두고

cdel에서 사용했던 것처럼 

cedit의 부모의 형제 클래스로 cno를 가져와서 cno라는 변수에 넣어준다. (const로 지정 => 변하지 않는 수_상수)

---

content에 입력한 댓글을 넣어줄건데

아래에서 부모 형제관계 잘 살펴보고 불러오기

bno / cno / content 를 잘 잡아와 팝업으로 띄운다.

 

 

아래처럼 댓글창 전체의 div (comment)를 잡아서 css로 색지정해주면

수정버튼을 눌렀을 때 해당 댓글창의 전체 글자색이 빨간색으로 변한다.

 

아래처럼 remove() 테스트 해보면 

수정버튼 눌렀더니 아래처럼 댓글이 안보인다. (삭제된것처럼 보이지만 그냥 숨겨진거, 새로고침하면 다시 나타난다.)

 

after로 p태그 문구를 추가해주면

.after () => html요소를 추가하는 기능

수정버튼을 누를때마다 아래처럼 추가가된다.

 

이렇게 새로 수정하는 댓글을 추가하고 

원래있던 댓글을 지워주면 댓글 수정기능 완성

 

일단 댓글창 구조를 좀 바꿔야겠다.

<c:choose>
				<c:when test="${fn:length(commentsList) gt 0}">
				
					<c:forEach items="${commentsList }" var="c">
					<div class="comment">
					
						<div class="cBox">
						
							<div class="cName"> 
								${c.m_name } (${c.m_id })
								<c:if test="${sessionScope.mid ne null && sessionScope.mid eq c.m_id}">
								<img alt="" src="./img/update.png" class="cedit" onclick="cedit()">&nbsp;
								<img alt="" src="./img/delete.png" class="cdel" onclick="cdel1(${c.c_no })">
							 	</c:if>
							</div>
							
							<div class="cid">${c.c_no } / ${c.c_date }</div>
						</div>
						
							<div class="cComment"> ${c.c_comment }</div>
					</div>
				</c:forEach>
				</c:when>
			</c:choose>

 

body부분이 아니라

jquery 부분에서 새로운 댓글창 div를 만들어준다.

(새로운 댓글창으로 대체할거라 기존의 댓글창과 똑같은 구조로 만든다)

 

recommenttextarea  => rcta

수정하기 버튼을 누르면 댓

댓글수정창 ( jquery 에서 만든 div ) 이 뜬다.

 

이렇게 새로 추가된 댓글창도 원래 댓글창의 css 스타일 적용시켜준다.

 

수정하기 버튼 누르면 아래처럼 창이 뜨는데 css가 엉망이다. 다시하자 

 

이제 수정버튼을 눌러서 나온 입력창에 원래의 댓글을 넣어준다. (수정하기 편하게 하기위해)

아래 댓글에서 수정버튼을 누르면

아래처럼 원래의 댓글(content)을 가져와서 띄워준다.

---

댓글수정만 할 수 있도록 나머지 필요없는 버튼들은 다 없애준다.

댓글 수정하기 버튼을 누르면

수정버튼, 삭제버튼, 댓글창열기 버튼이 사라짐

 

---

 

수정한 댓글을 db로 보내기 위해 

숨겨진 input 창을 생성해서 value값에 bno와 cno를 넣어준다. (bno도 변수로 사용해도 되지만 아래처럼 바로 사용 가능)

 

form을 추가해서 버튼을 누르면 post방식으로 ./cedit으로 보내줄 예정

버튼타입도 submit으로 바꿔줌

input창 name도 cno와 bno로 달아줌

textarea(댓글수정창)에도 recomment라고 name을 달아준다

 

 

이제 보드컨트롤러에서 수정한 값(수정댓글)을 잡아보자

댓글을 수정해서 쓰고 수정하기 버튼을 눌러보면

아래처럼 콘솔창에 뜬다.

 

 

로그인검사 & bno, cno 검사 

로그인 실패하면 로그인화면으로, bno&cno 값이 없다면 보드화면으로 보낸다.

session에 있던 mid도 map에 넣어준다

이제 서비스에게 cedit() 메소드로 일을 시켜서 결과값을 result에 담는다. 

서비스에도  cedit() 메소드 만들고 DAO에 일을 시키자.

DAO에서도 cedit() 메소드를 실행해서 mapper의 값을 가져오자.

 

mapper에서는

댓글을 수정한댓글(recomment)로 update 하는 쿼리문을 작성한다. 

( bno, cno, m_no(mid로 비교)가 일치할때**)

 

이제 댓글 수정해보면 잘된다.

---

<div class="cid" > ${c.c_no} / ${c.c_date} </div> 요렇게 해줬었더니

cid를 잡을때 즉, cno를 잡을때 cdate까지 같이 잡아서 오류가 났었는데

아래처럼 ${c.c_date} 을 따로 div로 빼줬더니 된다.

---

스프링부트를 사용해보자

 

 

https://www.egovframe.go.kr/home/qainfo/qainfoRead.do?pagerOffset=0&searchKey=&searchValue=&menuNo=69&qaId=QA_00000000000022581 

 

 

묻고 답하기 | 표준프레임워크 포털 eGovFrame

 

 

이클립스에 한국형 몇몇개가 더 추가된 친구가 전자정부프레임워크

압축파일 풀어서 C드라이브에 넣기 

 

이걸 실행

경로설정해주고

파일 실행시켜서

jar : java 버전으로 압축 / war : 웹페이지 형식으로 압축

 

필요한것들 체크하면 옆으로 넘어간다

 

gradle 버전은 dependencies 들도 간단하다.

위에서는 패키지가 생성이 안되어서 프로젝트를 삭제하고 새로 다시 만들었다.

pdf에서 'build.gradle설정=의존성추가하기(jar)' 부분의 코드를 추가해준다. 

 

그냥 쌤이 주신거 복붙

 

dependencies {
   implementation 'org.springframework.boot:spring-boot-starter-web' //기본 starter web
   implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.3.0' // mybatis
   
   implementation 'javax.servlet:jstl:1.2'//jsp
   implementation "org.apache.tomcat.embed:tomcat-embed-jasper"//tomcat사용하기
   implementation 'org.mariadb.jdbc:mariadb-java-client:3.0.8'
   
   compileOnly 'org.projectlombok:lombok' //lombok //compileOnly= 컴파일 시점에만 참여
   developmentOnly 'org.springframework.boot:spring-boot-devtools' // 개발시만 사용
   annotationProcessor 'org.projectlombok:lombok' // 어노테이셔으로 사용하기 위해 
   implementation 'org.springframework.boot:spring-boot-starter-tomcat' //runtime시에만 필요, 실행환경에서 제공되는 dependency를 설정
   testImplementation 'org.springframework.boot:spring-boot-starter-test'//test코드 수행때만 사용
}

 

src 아래에 webapp 폴더 생성

그 아래에 WEB-INF 폴더 & views 폴더 & index.jsp 파일까지 생성

여기에서는 jsp 파일에 UTF-8 설정이 알아서 되어있다. 좋다.

 

indexController 생성

 

톰캣이 바로 연결이 안되니까 아래껄로 실행해준다.

마우스 우클릭으로 (Re)start 해준다.

콘솔창에 아래처럼 뜬다.

index.jsp파일 생성해서 테스트해보자

 

브라우저에 이렇게 jsp 파일이 뜬다.

암튼 톰캣 사용을 안하니 아랫부분은 주석처리 해준다. 

 

---

jstl 태그 선언해주고

forEach문으로 출력이 잘 되는지 테스트 해본다.

 

이제 컨트롤러에서 board로 값을 보내본다. (ModelAndView 에 값을 붙여서 jsp로 보낸다.)

 

전체글수를 int 타입인 toSize라는 변수에 넣고 이 값을 mv에 넣어준다.

서비스에 toSize() 메소드생성

DAO에 선언해주는데 @Mapper 선언 하나더 해준다.

mapper 폴더 생성

'

mapper 폴더 내부에 boardMapper.xml 파일 생성

mapper 파일에 BoardDAO 경로설정 해준다.

toSize() 메소드 연결해준다. mapper에는 전체글 수 가져오는 쿼리문 작성

DAO도 서비스와 연결해주고

board.jsp 생성해서 전체 글수를 출력해보자

---

아래쪽에 port 를 빼먹었다. 다시 추가

port가 없어도 잘되긴 했었다. 왜일까