20230811 _[50일차]_01. 스프링부트 모달창 띄우기 & 조회수

쌤이 주신 jsp파일들 추가하고 

각각에 대한 controller 파일들도 추가

 

BoardController       ///            

 

write.jsp 에 귀요미 버튼 추가

 

 

 

문제가 있어서 smartEditor 말고 다시 summernote로 돌아간다.

write.jsp에서 아래부분 삭제

\

 

 

그럼 아래처럼 뜬다.

아래쪽에서 smart~ 관련된거 다 지워준다.

아래부분도 삭제

 

---

summernote 추가해주자

 

textarea에 id 를 summernote 로 준다.

마지막에 script도 추가

---

버튼에 writeBtn이라는 이름의 클래스 추가, 제목에 title이라는 아이디 추가 , 내용창에 summernote이라는 아이디 추가

 

jquery로 저장 버튼을 눌렀을때 기능을 만들어주자

제목이나 내용이 없을때 입력하라는 팝업뜨게 만든다.

 

**오타주의 ** 

".writeBtn"  에서 콤마를 따옴표 밖에 찍었더니 오류남 

summernote == ""  에서 등호가 하나(=)여서 오류남

 

버튼 없이 id로 form을 잡아서 전송하는것도 가능

 

 

이제 이 입력값들을 dto에 담아서 db로 보내보자

 

근데 안된다. 

 

---

DTO 에서 bip, uuid 추가해주고

일단 Util 파일 넣어주고

BoardService에서 Util 연결하고 아이피랑 uuid 가져오기

mapper 에서 쿼리문도 수정

이제 게시판에 글을 써보면

db에도 게시판에도 잘 올라간다.

---

이게 들어있어서 

글을 쓰면 업데이트가 하나씩 밀려서 보였다. 신기하다.

---

이제 읽을때마다 like수(조회수를) 올려보자

서비스에서 bno를 매개변수로 작동하는 readUP 메소드 생성 

DAO에서도  bno를 매개변수로 readUP 실행

mapper 에서는 내가 클릭한 bno에 해당하는 글의 blike에 +1을 해주는 쿼리문 작성

board.jsp에서는

해당 글을 클릭했을때 board화면의 읽음 아래의 숫자도 +1 되도록 만들어준다.

게시글을 누르면 모달창에 조회수가 +1 된다.

여기 조회수는 모달창을 닫고 새로고침해야 올라간다

---

AboutController 

about.jsp 쌤이 주신 파일 추가

팀뽑기

---

타입을 String에서 BoardDTO 로 변경

 

 

mapper 에서도 BoardDTO 로 타입바꿔주고 uuid 추가로 가져오기

 

그런데 mapper에서 쿼리문 실행할때 값들을 boardview에서 가져왔는데 

boardview 에는 uuid가 없다.. 넣어준다.

 

select `b`.`bno` AS `bno`,`b`.`btitle` AS `btitle`,`b`.`bcontent` AS `bcontent`,

`m`.`m_name` AS `m_name`,`m`.`m_id` AS `m_id`,

if(date_format(current_timestamp(),'%Y-%m-%d') = 

date_format(`b`.`bdate`,'%Y-%m-%d'),date_format(`b`.`bdate`,'%H:%i:%s'),

date_format(`b`.`bdate`,'%Y-%m-%d')) AS `bdate`,

`b`.`blike` AS `blike`,`b`.`bip` AS `bip`,

select count(0) from `comments` where `comments`.`bno` = `b`.`bno` and `comments`.`c_del` = 1) AS `commentcount`,`b`.`uuid` AS `uuid`

from (`board` `b` join `members` `m` on(`b`.`m_no` = `m`.`m_no`))

where `b`.`bdel` = 1 order by `b`.`bno` desc

 

---

이제 출력해보면 콘솔창에 아래처럼 뜬다.

{"dto" : "BoardDTO(bno=0, blike=0, commentcount=0, btitle=null, bcontent=<p>잘 들어간다.</p>, m_name=null, m_id=null, bdate=null, bip=null, uuid=c2fd4f8b-b041-4699-8f4a-db0047cfa9a4)"}

---

아래처럼 입력해주면 콘솔창에 이렇게 뜬다.

{"result" : {"uuid":"c2fd4f8b-b041-4699-8f4a-db0047cfa9a4","content":"<p>잘 들어간다.</p>"}}

---

e에 안담고 뽑아내보면

{"uuid":"c2fd4f8b-b041-4699-8f4a-db0047cfa9a4","content":"<p>잘 들어간다.<\/p>"}

---

board에서 이름부분 뒤에다가 수정/삭제 아이콘 추가

png파일 두개 추가하고

이름 뒤에 img 추가해주면 된다.

이 때 name불러오는것도 html로 변경해준다. text로 넣으면 img태그가 text로만 나온다.

태그를 적용시키려면 html로!!

아래처럼 아이콘이 잘 뜬다.

 

---

 

 

uuid는 찍히는데 bno는 안찍힌다. dto에 bno가 없단다.아니 있단다.

 

bno도 바로 잡아오면 둘다 뜬다.

 

 

 

---

이제 삭제아이콘을 누르면 bno와 uuid 두개의 값을 가지고  서버로 가면된다.

삭제 아이콘에 del 이라는 클래스 이름 준다.

 

원래 html에 존재하는게 아니라 가상? (아래쪽에서 name에 추가해준 요소이기 때문인듯) 이여서

.click() 이 아니라 아래 형태로 기능을 줘야 한다.

아래 형식은 가상에만 쓸수있는건 아닌듯

 

따옴표 맨 겉에는 하나짜리, 안에는 두개짜리로 해야한다 

섞이면 오류가 난다.

 

글을 클릭하고 삭제 아이콘을 누르면 

alert 팝업으로 bno랑 uuid가 뜬다.

---

 

같은 방식으로 edit 버튼 눌렀을때도 적용시켜준다.

---

form을 만들어준다.

form을 먼저 만들고 .attr() 로 속성추가 / .append() 로 form내부요소 추가

input창을 넣어주고 type을 hidden으로 해서 숨겨주고

bno라는 이름으로 bno값을, uuid라는 이름으로 uuid 값을 보낼거다.

변수 안써도됨.

마지막에 모든 요소를 body에 추가해주면 된다.

 

이제 컨트롤러에서 잡아보자

아래처럼 해봤더니 값이 안잡힌다.

아래처럼 썼더니 

게시판 글 모달창으로 띄워서 삭제버튼을 눌렀더니 콘솔창에 잘 뜬다.

 

Map으로 가져오는 방식

 

HttpServletRequest request 로 가져오는 방식