20230824 _[59일차]_01. admin-multiboard 정리 & 보드 정리

admin-notice 에서 글을 다 안보이게 만들어주면

공지게시판에서는 글이 안보인다.

---

오늘은 admin-multiboard 페이지를 만들어보자.

 

일단 AdminController 에서 하도 옛날옛적에 써봐서 까먹고 있었던 @RequestMapping 사용해서 로직 만들어보자.

@RequestMapping(value="/multiboard", method = RequestMethod.GET)

=> 요만큼을 축약해서 @GetMapping("/multiboard") 으로 사용해 왔던거다.

 

GET방식 쓰겠다고 해주면 import 필요.

리턴값에 admin 붙여준다. 

아래 캡쳐에서는 value가 multiboard 로 되어있는데 multiBoard로 해야한다.

(admin 페이지에서는 multiBoard로 해주고, 일반페이지는 multiboard로 해준다. )

admin폴더 아래에 multiBoard.jsp 생성

이제 아래 두개를 클릭하면

멀티보드 게시판으로 이동한다.

---

하이디에서 setupboard 테이블 생성해준다.

 

CREATE TABLE `setupboard` (
   `b_no` INT(11) NOT NULL AUTO_INCREMENT,
   `mb_cate` INT(11) NOT NULL,
   `b_catename` VARCHAR(10) NOT NULL COLLATE 'utf8mb4_general_ci',
   `b_url` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
   `b_comment` VARCHAR(500) NULL DEFAULT NULL COLLATE 'utf8mb4_general_ci',
   PRIMARY KEY (`b_no`) USING BTREE,
   UNIQUE INDEX `mb_cate` (`mb_cate`) USING BTREE
);

 

쿼리문으로 데이터 생성

INSERT INTO `setupboard` (`b_no`, `mb_cate`, `b_catename`, `b_url`, `b_comment`) VALUES
   (1, 1, '메인게시판', './multiBoard?board=1', '게시글 관리'),
   (2, 2, '자유게시판', './multiBoard?board=4', '자유게시판'),
   (3, 3, '공지사항', './multiBoard?board=2', '공지사항'),
   (4, 4, '문의사항', './multiBoard?board=3', '문의사항');

 

주소창 번호 차례대로 정리해주면 아래처럼 짜잔

db에서 가져온 결과값을 Map타입인 List에 담아서 Model에 붙여서 multiBoard.jsp로 불러와보자.

setupBoardList() 메소드 실행.

mapper에서는 새로만든 테이블인 setupboard의 데이터들을 불러오는 쿼리문 작성

 

쿼리문을 실행시켜서 가져온 값을 "boardlist"라는 이름으로 model 에 넣어주고

jsp에서 이 값을 잡아 출력할건데 table이 아니라 div로 테이블 형태를 만들어 구성해준다

jquery 사용할거라 그런듯 하다. table 내부에 들어있는 값은 잘 못잡왔었던 것 같다.

---

CSS display 속성 - ofcourse

CSS display 속성 - ofcourse

---

admin-multiBoard 페이지 div에 class이름 지정해주고 테이블 형태의 스타일을 줬다

그럼 요렇게 된다.

 

이제 아래의 multiboard 페이지에서 

아래의 board번호에 해당하는 url로 이동할 수 있도록 해줄거다.

---

일단 MultiBoardController에서

기존에 가져왔던 list와 함께 boardlist를 가져오는 로직도 추가해준다.

서비스-DAO 를 지나

mapper에서 쿼리문 작성

* setupboard에서 여러 게시판 데이터를 가지고 온다.*

multiboard.jsp (admin-multiBoard 아님***) 에서 출력해보면 

 

잘 뜬다.

각각에 해당하는 페이지로 이동하는 링크를 a태그로 넣어줬다.

 

메인게시판은 주소에 board=1이라고 표시되고 

자유게시판은 주소에 board=2라고 표시된다.

 

a링크 대신에 버튼으로 넣어주고 onclick 기능으로 해당 board번호의 주소로 이동하게 해준다.

---

만약에 2번 board(자유게시판)에서 글쓰기 버튼 누르면

주소창에는 계속 2번 board라고 표시가 된다.

글을쓰고 저장해보면

 2번 board 페이지에 글이 저장이 된다.

 

그런데 글번호는 13이다. 이걸 1로 만들어주자.

같은 db테이블에서 가져왔기 때문에 bno는 13이지만

2번 board에서는 첫번째 글이니까 페이지별 글번호를 따로 만들어 주면 된다. => ROWNUM 사용해본다.

 

이건 뷰를 다시 만들어야 해서 조금 있다가 다시 해볼예정

---

multiboard 의 글을 클릭했을때에도 board 번호를 같이 가져오도록 추가해줬다. (8/17에도 사용했었다.)

 

${param.파라미터명}  

=> 주소창 url의 파라미터 값을 param 객체를 통해 가져올 수 있다. 

            request 객체에 설정되어 있는 파라미터에 접근 가능

글을 클릭하면 아래 주소창에 있는 board = 1 뒷부분 숫자를 잡아오는거다.

위의 board = 1 에서 숫자값을 가져와서 다시 url 에 넣어준다.

글쓰기를 완료했을 때도 주소창에 board번호가 뜨도록 추가해준다.

4번 게시판에 글을써보고

저장하면 아래처럼 주소창에 board 번호와 mbno를 같이 가져온다.

 

글을쓰고 멀티보드로 버튼을 누르면 해당 board 번호인 멀티보드 페이지로 넘어가게 해줬다.

 

---

 

전에 만들어놨던 multiview를 활용할건데 

select `b`.`mb_no` AS `mb_no`,`b`.`mb_title` AS `mb_title`,`b`.`mb_content` AS `mb_content`,

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

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

date_format(`b`.`mb_date`,'%H:%i'),

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

`b`.`mb_read` AS `mb_read`,`b`.`mb_del` AS `mb_del`,`b`.`mb_board` AS `mb_board`,

`b`.`m_no` AS `m_no`,`m`.`m_id` AS `m_id`,`m`.`m_name` AS `m_name`

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

where `b`.`mb_del` = 1

 

 

multiview 변경해줬다. 뭐가바뀐건지는 다시보자  => desc가 추가됐당 

 

select `b`.`mb_no` AS `mb_no`,`b`.`mb_title` AS `mb_title`,`b`.`mb_content` AS `mb_content`,

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

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

date_format(`b`.`mb_date`,'%H:%i'),

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

`b`.`mb_read` AS `mb_read`,`b`.`mb_del` AS `mb_del`,`b`.`mb_board` AS `mb_board`,

`b`.`m_no` AS `m_no`,`m`.`m_id` AS `m_id`,`m`.`m_name` AS `m_name`

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

where `b`.`mb_del` = 1

order by `b`.`mb_no` desc

 

---

아래 쿼리문으로

multiview에서 board번호가 1인 게시판의 글만 모두 가져와본다.

count도 같이 뽑아본다.

근데 한줄밖에 안나온다. 여러줄이 나오면서 count값도 같이 나오려면?!?!??

count는 서브쿼리문으로 뽑아내주면 글도 나오면서 count도 같이 나온다. 

이때 조건부분인 mb_board = 1 은 쿼리문과 서브쿼리문에 모두 넣어줘야한다 *******

---

신기술 ROWNUM을 사용해본다.

 

[MySQL/MariaDB]ROWNUM 사용하기 : 네이버 블로그 (naver.com)

[MySQL/MariaDB]ROWNUM 사용하기

---

SELECT @ROWNUM:=@ROWNUM+1 AS rowNum,
m.*, (SELECT COUNT(*) FROM multiview WHERE mb_board = 1) AS count
FROM multiview m, (SELECT @ROWNUM:=0) AS R
WHERE mb_board = 1
LIMIT 0, 10

 

아래처럼 행번호를 붙여주는 역할을 한다.

 

10부터 뽑아보면 아래처럼 나온다.

다시 1부터 나온다. rouNum 이 10부터 나와야 하니 변수처리 필요.

그래서 요부분도 변수처리 해야한다.

변수가 네개나 필요하다.

 

일단 multiboardMapper에서 list를 불러오는 쿼리문을 위의 쿼리문으로 수정해줄거다.

필요한 부분은 변수처리 해주고 * 대신에 데이터 하나하나 불러와준다. (m_id 빼도된다.)

 

multiboard.jsp에서 

mb_no 대신에 rowNum을 넣어준다.

그러면 번호가 실수타입으로 나온다. 우와

버튼을 여러번 누르니까 다시 정수로 보인다.

 

쿼리문수정

SELECT *, (SELECT COUNT(*) FROM multiview WHERE mb_board = 1) AS COUNT
    FROM (    
            SELECT @ROWNUM:=@ROWNUM+1 AS rowNum,
            m.*
        FROM multiview m, (SELECT @ROWNUM:= 0) AS R
        WHERE m.mb_board = 1
        ORDER BY m.mb_no ASC

        ) mm
    ORDER BY mm.mb_no DESC
LIMIT 0, 10

 

이렇게 해도 똑같이 작동 잘한다.

 

다시 정수표현으로 바꿔보면

 

SELECT *, (SELECT COUNT(*) FROM multiview WHERE mb_board = #{board}) AS COUNT
    FROM (    
            SELECT 

            CAST(@ROWNUM:=@ROWNUM+1 UNSIGNED) AS rowNum, m.*
        FROM multiview m, (SELECT @ROWNUM:= 0) AS R
        WHERE m.mb_board = #{board}
        ORDER BY m.mb_no ASC

        ) mm
    ORDER BY mm.mb_no DESC
LIMIT 0, 10

 

이 ROWNUM을 Board에도 적용시켜보자.

 

SELECT ff.*, m.m_id , m.m_name
    FROM(
        SELECT @ROWNUM:=@ROWNUM+1 AS rowNum, bb.*, (SELECT COUNT(*) FROM board WHERE bdel=1) AS         COUNT
        FROM (SELECT b.bno, b.btitle, b.bdate, b.blike, b.bdel, b.m_no 
        FROM board b, (SELECT @ROWNUM:=0) AS R) bb
WHERE bdel=1
ORDER BY bb.bno ASC

) AS ff JOIN members m ON ff.m_no = m.m_no
ORDER BY bno DESC
LIMIT 0, 10

그리고 ROWNUM을 jsp에서 뽑아낸다.

그런데 board.jsp에서 뽑아낸 값들은 DTO 타입의 list로 가져왔었기 때문에

BoardDTO에 rowNum 변수를 추가해줬더니

역순으로 잘 불러온다.

---

 

다시 쿼리문 수정

여기에서 LIMIT 0. 10 은 맨 끝으로 빼줘야한다. 아래처럼

 

SELECT *
FROM (
SELECT @ROWNUM:=@ROWNUM+1 AS rowNum, bb.*,
(SELECT COUNT(*) FROM boardview) AS COUNT
FROM (SELECT b.* FROM boardview b, (SELECT @ROWNUM:=0) AS R ORDER BY b.bno ASC) bb
ORDER BY bb.bno ASC) AS ff
ORDER BY ff.bno DESC
LIMIT 0, 10

member 테이블하고 조인해서 해본다.

 

SELECT ff.*, m.m_id , m.m_name  
FROM(
   SELECT @ROWNUM:=@ROWNUM+1 AS rowNum, bb.*, 

       (SELECT COUNT(*) FROM board WHERE bdel=1) AS COUNT
   FROM (SELECT  b.* FROM board b, (SELECT @ROWNUM:=0) AS R) bb
   WHERE bdel=1
   ORDER BY bb.bno ASC
   ) AS ff JOIN members m ON ff.m_no = m.m_no 
 ORDER BY bno DESC
LIMIT 0, 10

 

이것두 잘된다.

 

board.jsp 에서 글을 눌렀을때 해당 글의 bno를 잡아서 글내용을 모달창으로 띄웠었는데

bno 대신에 rowNum 으로 넣어줬으니 jquery 문법도 수정을 해줘야 한다.

td의 내부에 hidden 타입의 input창을 만들어서 값으로 bno를 넣어주고

클릭했을때 위의 input창 내부의 value값이 bno를 잡도록 수정해줬다.

이제 글을 클릭하면 다시 글내용이 모달창으로 잘 뜬다.

---

아래처럼 tr에 클래스를 주면서 값을 같이 넣어줄수도 있다.

 

노란부분은 bno (db의 실제 글번호)

초록부분은 rowNum (글의 갯수대로 붙여준 번호)

아니면 tr에 class를 주고 onclick 기능으로 detail 함수를 넣어주는데, 매개변수로 bno를 EL태그로 넣어준다.

tr에 onclick 기능으로 넣어준 함수 detail을 스크립트에서 실행해본다.

매개변수로 가져온 bno를 팝업으로 띄워본다.

그럼 글을 클릭하면 bno값을 잡아서 팝업으로 띄운다.

 

 

위에서 썼던 ajax 로직(./detail)을 가져온다. 

detail2를 다시 만들러 컨트롤러로 가자

 

컨트롤러에서 detail2 를 잡아서 로직만들건데 사실상 detail이랑 비슷한 흐름이다.

 

@ResponseBody 를 아래 방식으로 붙여주기도 한다.

 

bno를 매개변수로 detail2() 메소드를 실행시키고 결과값을 json으로 받아서 jsp로 보낼거다.

bno를 매개변수로 가지고 가서 해당하는 정보들을 boardview에서 가지고 온다.

아래 캡쳐에서는 세개의 값만 가져왔지만 *로 다 가져온다.

 

그런데 컨트롤러에서 DTO를 json형태로 변환시키려면 ObjectMapper 를 사용해야 한다.

throws 도 해준다.

그냥 json객체에 put으로 넣어주면 한줄의 String형태로 들어가게 되어서

각각의 값들을 하나하나 빼줘야 해서 귀찮아진다.

 

*참고* GSON을 사용하면 DTO변수와 json객체(key/value)의 자동매핑을 지원해준다.

 

아래처럼 리턴값은 따옴표 없이 String 타입인 json을 그대로 반환해주면 된다.

jquery에서 잡아오는 값들에 data를 붙여줘야한다.

살짝 수정해주면

글을 클릭하면 이제 글내용이 잘뜬다.