mapper에서 resultType 적어줄때 아래처럼 패키지 경로까지 적어줬었는데
스프링부트에서는 클래스명만 적어도 BoardDTO를 알아서 잘 찾아간다.
왜냐하면 아래에서 패키지 경로 적어줬기 때문이다.
* 로 설정할 필요도 없다.
아래처럼 db값을 잘 가져온다.
어제 하던 모달을 완성해보자. 글을 클릭하면 모달창이 뜨도록!
일단 모달열기 버튼 생성해주고
버튼 스타일도 준다. 부트스트랩으로
이제 클릭했을 때 기능을 jquery로 줘보자
모달열기 버튼을 눌렀을때 modal창이 열리는 기능을 줬다.
exampleModal 은 아래쪽에서 id를 잡아온거다.
그래서 모달열기 버튼을 클릭하면 아래처럼 모달창이 뜬다.
이제 잘 기능하는거 확인했으면 이 모달창이 뜨는 기능을 위로올려서
글을 클릭하면 모달창이 뜨도록 해준다.
이제 글을 클릭하면 해당 글의 bno가 팝업으로 뜨고 (alert실행)
그 뒤에 모달창이 뜬다. (show 실행)
아래 주석처리 해준 부분처럼 한줄로도 표시가능하다.
이제 모달창의 크기를 키워보자
일단 너비를 늘려보자
모달코드부분에서 아래부분(modal-footer) 삭제
아래처럼 본문내용을 바꿔준다.
그러면 아래처럼 뜬다.
bno 값은 span 태그로 정해주고 span의 클래스이름을 modal-bno로 지정해준다.
jquery 로 span 태그 내부에 bno값을 넣어줄건데 이 값은 td에서 가져온다.
$(.detail).children("td").eq(0).text() => 클릭한 글(tr)의 자식요소(td들)중 첫번째 td의 text값(bno값)
그러면 글을 눌렀을때 모달창이 bno를 잘 잡아온다
이제 모달 title에 글의 title을 넣어줄건데 아래처럼
부모자식관계 아래에서 어떻게 구성되어있는지 잘 생각해야한다.
모달의 title에다가 this(detail = tr의 클래스)의 자식들(td들)중에 인덱스가 1인 (두번째td) 요소의 텍스트를 넣어준다.
보기쉽게 변수 title을 만들어서 title의 text를 뽑아왔다.
이번에는 comment 변수를 만들어서
여기에는 commentcount를 text로 뽑아서 그거의 길이를 넣어준 듯 하다.
commentcount인 3의 길이는 1이라 1이 뜬다.
아래처럼 해주면
아래처럼 제목뒤에 댓글수는 잘라낸다.
대신 댓글수가 0일때는 제목을 아예 못불러온다. if조건문을 넣어준다.
글의 btitle을 불러와 모달title에 넣어줄건데
만약에 comment > 0이면 즉, 댓글수가 btitle 옆에 붙어있으면
slice로 사용해서 맨뒤에 붙어있는 댓글수를 잘라내준거다.
0부터 comment 만큼(댓글수의 길이만큼) 잘라준건데 -comment니까 뒤에서부터 잘라준거다.
게시글의 글쓴이, 날짜, 읽음까지 다 가져와서 띄워보자
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가
jQuery에서 지원되는 함수만으로 간단하게 태그값들을 확인 할수 있습니다.그리고 반대로 원하는 값을 태그값에 적용 또한 가능합니다. html()함수와 text() 함수 그리고 val() 함수에 대하여 포스팅
hellogk.tistory.com
이제 아래처럼 모달창도 div로 나눠주고 거기에 값을 넣어주자.
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="detail">
<div class="detail-name">이름</div>
<div class="detail-date-read">
<div class="detail-date">날짜</div>
<div class="detail-read">읽음</div>
</div>
<div class="detail-dontent">본문내용</div>
</div>
</div>
</div>
</div>
</div>** mapper에서 blike를 안적어줬었다. **
이제 ajax로 bno를 잡아 본문내용(content)를 가져와보자
이제 보드컨트롤러에서
위에서 써준대로 post방식으로, ajax 사용하려면 @ResponseBody 선언 필요
bno를 가져오는 방식들 중에서
public String detail(HttpServletRequest request) { } 방식이 있는데
메소드 내부에서 bno를 잡아오는 방식으로 아래처럼 string타입의 bno 변수에 저장해서 사용했었다.
String bno = request.getParameter("bno")
** getParameter는 반환타입이 스트링이다. **
다른 방법으로는 아래처럼 사용하는건데 위의 방법이 축약된 형태이다.
대신 int로 (하나만) 잡아올 수 있다.
잡아온 bno를 콘솔창에 출력해보자
클릭했더니 bno를 잘 잡아서 콘솔에 띄운다.
아래부분은 json을 사용하기 위해 넣어준건가보다
json객체 생성해주고 거기에 contents를 넣어줄거다
일단 아래처럼 테스트
근데 안된다...
컨트롤러에서 bno를 매개변수로 db에서 content(게시글)를 가져올예정
가져온 결과를 제이슨 객체에 담아서 리턴값으로 제이슨을 내보낸다.
해당 bno에 해당하는 bcontent를 가져오는 쿼리문 작성
아래처럼 이제 db에서 본문의 내용을 잘 불러온다.
menu.jsp 생성하고 여기에
board.jsp에 있던 Navigation 코드 가져와서 붙여주고
board.jsp에서는 menu.jsp와 연결
index.jsp 에서도 menu를 연결해주고 Navigation부분은 삭제
board.jsp에서 글쓰기버튼에 onclick으로 write.jsp 로 보내는기능 넣어준다.
write.jsp 생성하고 기본 뼈대만 남긴다.
form 태그로 글쓰기창 & 버튼 만들어준다.
div로 열심히 꾸며주면
아래처럼 만들어진다.
이제 summernote 집어넣자
아니면 Naver Smart Editor 적용해봐도 된다.
네이버 :: Smart Editor 2 ™ (naver.github.io)
네이버 :: Smart Editor 2 ™
naver.github.io
Getting started (summernote.org)
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
링크로 연결해주고
textarea에 id를 summernote 로 넣어줘야 사용가능하다.
잠깐 위치를 옮겨서
script 부분은 header 아래쪽으로
아래처럼 잘 나오는데 배경이 다 먹어버렸다.
css 스타일을 주면
아래처럼 된다.
다시 정리정돈 해줬다.
아래처럼 정리된다.
그냥 이 폴더자체를 쌤이 주신걸로 바꿨다.
write.jsp 도
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<script src="./js/jquery-3.7.0.min.js"></script>
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="./js/HuskyEZCreator.js" charset="utf-8"></script>
<style type="text/css">
.write-form {
background-color: white;
padding: 10px;
text-align: left;
color: black;
}
.write-form textarea {
z-index: -1;
}
}
</style>
</head>
<body>
<%@ include file="menu.jsp"%>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="rounded-3 write-form">
<form action="./write" method="post">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">제목</span>
</div>
<input type="text" class="form-control" name="title">
</div>
<textarea id="editorTxt" name="content"></textarea>
<button type="button" class="btn btn-primary">저장</button>
</form>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script type="text/javascript">
var oEditor = []
smartEditor = function(){
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditor,
elPlaceHolder : "editorTxt",
sSkinURI : "SmartEditor2Skin.html",
fCreator: "createSEditor2"
});
};
$(function(){
smartEditor();
});
</script>
</body>
</html>
'국비과정 > Spring' 카테고리의 다른 글
| 20230816 _[51일차]_01. 스프링부트 로그인구현 & 암호화 (0) | 2023.08.16 |
|---|---|
| 20230811 _[50일차]_01. 스프링부트 모달창 띄우기 & 조회수 (0) | 2023.08.12 |
| 20230809 _[48일차]_01. 스프링부트 DB연결 & 게시판구현 (0) | 2023.08.10 |
| 20230808 _[47일차]_01. 게시판 댓글 수정기능 & 스프링부트 (0) | 2023.08.08 |
| 20230807 _[46일차]_01. 게시판 댓글 삭제기능 (0) | 2023.08.07 |
