<script type="text/javascript">
	$(()=>{
		let m = '${msgFl}';
		if (m!=""){
			alert(m);
		}
		let msg = '${msg}'
		if(msg!=""){
			Swal.fire({
				icon : "success",
				title : "게시글 작성이 완료되었습니다.",
				timer: 3000,
				timerProgressBar: true,
				//showConfirmButton: false,
			});
			msg=""
		}
	})
</script>

• 게시글 작성 완료를 리스트에서 한 이유는 완료 후 커스텀 얼럿창을 띄우니 띄워짐과 동시에 넘어가고 지연함수를 사용해도 세션 당 한 번만 제대로 지연이 되어버려서 바깥으로 뺄 수 밖에 없었다..( 꾸밈은 내쪽이 아니니까 라는 변명으로 넘어가기로 했다. )

<c:if test="${not empty loginId}">
    <button type="button" class="crudBtn" onclick="location.href='/board/boardWrite'"
			style="float: left;">글 작성</button>
</c:if>

• 게시글 목록 윗쪽에 글 작성을 할 수 있도록 만들었다.
• 회원만 작성할 수 있도록 했으므로 c:if를 통해 로그인 시에만 해당 버튼이 보이도록 했다. 

<script type="text/javascript">
	$(()=>{
		let id = '${loginId}'
		document.getElementById('bWriter').value=id;
	})
</script>

• 페이지가 로딩되면 실행하는 스크립트
• 세션에 저장되어있는 로그인 아이디를 밑의 hidden타입의 밸류에 입력해준다.

<jsp:include page="./header.jsp"></jsp:include>

<div class="allBigBox">
    <h3>Board Write</h3>

    <div id="bDetailBox">

        <form id="write_frm" method="get" onsubmit="return writeCheck()"
            action="/board/writeSub">
            <div id="bWrTitleDiv">
                <input type="text" id="bTitle" name="bTitle"
                    placeholder="제목은 최대 15글자까지 적을 수 있습니다.">
            </div>
            <br>
            <input type="hidden" id="bWriter" name="bWriter">

            <textarea id="summernote" name="bContents"></textarea>
            <br>

            <div class="btnDiv">
                <button type="button" onclick="location.href = document.referrer;">취소</button>
                <button type="submit" class="crudBtn">올리기</button>
            </div>
        </form>

    </div>
</div>

• 페이지가 로딩되면 실행되는 스크립트가 있기 때문에 hidden의 밸류는 굳이 정해주지 않았다. 

<script>
    function writeCheck() {
        let ok = false
        let title = $('#bTitle').val()
        var contents = $('#summernote').summernote('code')

        if (title == '') {
            Swal.fire({
                icon : "error",
                title : "Oops...",
                text : "제목은 비워둘 수 없습니다.",
            });
            return false
        } else if (title.length > 15) {
            Swal.fire({
                icon : "error",
                title : "Oops...",
                text : "제목은 15글자까지 작성할 수 있습니다.",
            });
            return false
        } else if (contents == '<p><br></p>') {
            Swal.fire({
                icon : "error",
                title : "Oops...",
                text : "내용은 비워둘 수 없습니다.",
            });
            return false
        }
        return true
    }

    $(document).ready(function() {
        $('#summernote').summernote({
            lang : 'ko-KR' // default: 'en-US'
        });
    });

    $('#summernote').summernote({
                placeholder : '게시글을 작성해주세요.',
                tabsize : 2,
                height : 400,
                toolbar : [ [ 'style', [ 'style' ] ],
                        [ 'font', [ 'bold', 'underline', 'clear' ] ],
                        [ 'color', [ 'color' ] ],
                        [ 'para', [ 'ul', 'ol', 'paragraph' ] ],
                        [ 'table', [ 'table' ] ],
                        [ 'insert', [ 'link', 'picture', 'video' ] ],
                        [ 'view', [ 'fullscreen', 'codeview', 'help' ] ] ]
            });
</script>

• 제목이 비어있거나 15글자를 초과한 경우, 게시글 내용이 비어있는 경우를 걸러주었다.
• 밑의 두 스크립트는 썸머노트와 관련된 스크립트이다.

@GetMapping("/board/writeSub")
public String writeSub(BoardDto bDto, RedirectAttributes ra) {
    log.info("==> GetMapping - writeSub 요청 <==");
    log.info("=======bDto{}",bDto);

    if(bSer.writeSub(bDto)) {
        ra.addFlashAttribute("msg","ok");
    }

    return "redirect:/board/list?page=1";
}

• 글 작성 완료 후에는 리스트 페이지 1로 돌아가도록 했다.

public boolean writeSub(BoardDto bDto) {
    System.out.println("==== bSer -> writeSub");
    return bDao.writeSub(bDto);
}

public boolean writeSub(BoardDto bDto);

<insert id="writeSub" parameterType="BoardDto">
    insert into board values(default,#{bTitle},#{bContents},#{bWriter},default,default)
</insert>

• 값을 #{변수명}으로 해야하는데 계속 ${변수명}으로 하면서 어디서 에러가 나는지 전혀 몰랐다.
• 바로 윗쪽에서 $를 사용했어서 똑같이 사용했던 것인데, 윗쪽에선 제대로 됐던 것이 어이가 없을 뿐이었다..이걸 고치면서 위 구문도 바꿔주었다.

• 글 작성 버튼

•  작성 화면

• 오류

• 게시글 작성에 성공했을 경우

• 썸머노트로 작성한 이유

<button type="button" class="crudBtn"
		onclick="location.href='/board/boardDelete?bNum=${bDto.bNum}'">삭제</button>

• button에 onclick을 통해 링크를 달아준다.
• 그냥 /board/boardDelete?bNum=${bDto.bNum} 이것만 작성했다가 검색해보니 버튼에 링크를 넣을거면 location.href를 넣어줘야한다는 것을 알았다. (이전에 사용했었는데 까먹었던 걸지두)

@GetMapping("/board/boardDelete")
public String bDelete(BoardDto bDto, RedirectAttributes ra) {
    log.info("==> GetMapping - bDelete 요청 <==");
    log.info("=======bDto{}",bDto);

    if(bSer.bDelete(bDto.getbNum())) {
        ra.addFlashAttribute("msg","bDelete");
    }

    return "redirect:/board/list?page=1";
}

public boolean bDelete(int bNum) {
    System.out.println("==== bSer -> bDelete");
    return bDao.bDelete(bNum);
}

public boolean bDelete(int bNum);

<delete id="bDelete">
    delete from board where bNum=#{bNum}
</delete>

• 게시글

•  삭제 완료 알림

spring.datasource.url=jdbc:log4jdbc:mysql://localhost:3306/mypro?allowMultiQueries=true

• 해당 파일(resources 폴더에 들어있다.)에 들어가서 sql 링크 뒤에 ?allowMultiQueries=true를 붙이면 설정이 바뀌게 되어 멀티쿼리를 작성할 수 있게 된다.
• 혹시 몰라 밑에 파일의 전문을 붙여넣었다.

server.port=80

# jsp,thymeleaf static resource 폴더 지정(기본값,생략)
spring.web.resources.static-locations=classpath:static/

# JSP뷰 설정- main/webapp/WEB-INF/views폴더 생성
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

# DB설정
spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
spring.datasource.url=jdbc:log4jdbc:mysql://localhost:3306/mypro?allowMultiQueries=true
spring.datasource.username=persP
spring.datasource.password=1234

# Mybatis 설정
mybatis.mapper-locations=classpath:mappers/**/*.xml
mybatis.type-aliases-package=com.myPro.persP.dto

<select id="bDetail">
    update board set bWatch=bWatch+1 where bNum=#{bNum};
    select * from board where bNum=#{bNum};
</select>

• select 후 update를 사용하면 update된 것으로 보이지 않아서 순서가 중요하다!

• 게시판 리스트

• 조회수 증가

• 리스트

private int nowP;	// 현재 페이지
private int firstP = 1;	// 맨 첫번째 페이지
private int lastP;	// 맨 마지막 페이지
private int leftP;	// 현재 페이지의 첫번째 페이지
private int rightP;	// 현재 페이지의 마지막 페이지
private int beforeP;	// leftP -p
private int nextP;	// leftP +p
private int pageSize = 10;

public Paging(int nowP, int bCnt) {
    this.nowP = nowP;
    lastP = (int)Math.ceil(bCnt/pageSize)+1;
    leftP = ((int)(Math.floor((nowP-1)/pageSize))*pageSize) +1;
    rightP = leftP +pageSize -1;
    beforeP = leftP -pageSize;
    nextP = leftP +pageSize;
}

• 이걸 직접 계산하느라 너무 힘들었다..

@GetMapping("/board/list")
public String boardList(@RequestParam(name="page")int page, Model model, RedirectAttributes ra) {
    log.info("==> GetMapping - boardList 요청 <==");

    int limit = (page-1)*10;
    ArrayList<BoardDto> bList = bSer.bList(limit);
    model.addAttribute("bList", bList);
    System.out.println("==> bList: {}"+bList);

    int bCnt = bSer.getBCnt();

    Paging paging = new Paging(page, bCnt);
    model.addAttribute("paging",paging);
    System.out.println("==> paging: {}"+paging);

    return "boardList";
}

• 페이징을 추가하느라 업데이트했다.
• 처음엔 생각없이 bList의 사이즈를 모든 게시글의 갯수라고 적었었는데 오류를 발견하고 다시 갯수를 세어오는 메소드를 생성했다.
• 해당 메소드로 얻어온 모든 게시글의 갯수와 현재 페이지를 매개변수로 페이징의 생성자를 통해 다른 값을 생성한다.

public int getBCnt() {
    System.out.println("==== bSer -> getBCnt");
    return bDao.getBCnt();
}

public BoardDto bDetail(int bNum) {
    System.out.println("==== bSer -> bDtail");
    return bDao.bDetail(bNum);
}

public int getBCnt();

public BoardDto bDetail(int bNum);

<select id="getBCnt">
    select count(*) from board
</select>

<select id="bDetail">
    select * from board where bNum=${bNum}
</select>

<table class="pagingT" style="width: 500px; max-width: 800px; text-align: center;">
    <tr>
        <c:if test="${paging.leftP!=1}">
            <td><a href="/board/list?page=1"><<</a></td>
            <td><a href="/board/list?page=${paging.beforeP}"><</a></td>
        </c:if>

            <c:forEach var="i" begin="${paging.leftP}" end="${paging.rightP}">
                <c:if test="${i <= paging.lastP}">
                    <td><a href="/board/list?page=${i}">${i}</a></td>
                </c:if>
            </c:forEach>

        <c:if test="${paging.rightP<paging.lastP}">
            <td><a href="/board/list?page=${paging.nextP}">></a></td>
            <td><a href="/board/list?page=${paging.lastP}">>></a></td>
        </c:if>
    </tr>
</table>

• 페이징을 하면서 c:forEach로 일반 for문 돌리는 것도 처음 사용해봤다.
• 기존에 for문에서 i=0; i<=10; i++을 사용했던 것처럼 var을 i로 사용하고, begin에 시작할 i의 수를 적고, begin을 i가 언제까지 돌 것인가(끝)를/을 적어 사용한다.

<table class="bListTable">
    <tr>
        <th>&ensp;글 번호&ensp;</th>
        <th>&ensp;제목&ensp;</th>
        <th>&ensp;작성자&ensp;</th>
        <th>&ensp;작성 날짜&ensp;</th>
        <th>&ensp;조회수&ensp;</th>
    </tr>
    <c:if test="${empty bList}">
        <tr>
            <td>글이 존재하지 않습니다.</td>
        </tr>
    </c:if>
    <c:if test="${!empty bList}">
        <c:forEach items="${bList}" var="b">
            <tr>
                <td>&ensp;${b.bNum}&ensp;</td>
                <td><a href="/board/boardDetail?bNum=${b.bNum}">&ensp;${b.bTitle}&ensp;</a></td>
                <td>&ensp;${b.bWriter}&ensp;</td>
                <td>&ensp;${b.bWDate}&ensp;</td>
                <td>&ensp;${b.bWatch}&ensp;</td>
            </tr>
        </c:forEach>
    </c:if>
</table>

• 글 제목에 a태그를 통해 디테일로 넘어갈 수 있도록 했다.

@GetMapping("/board/boardDetail")
public String boardDetail(BoardDto bDto, Model model) {
    bDto = bSer.bDetail(bDto.getbNum());

    model.addAttribute("bDto", bDto);
    return "boardDetail";
}

public BoardDto bDetail(int bNum) {
    System.out.println("==== bSer -> bDtail");
    return bDao.bDetail(bNum);
}

public BoardDto bDetail(int bNum);

<select id="bDetail">
    select * from board where bNum=${bNum}
</select>

<h3>Board Detail</h3>

<div class="allBigBox">

    <div id="bDetailBox">
        <p>글번호: ${bDto.bNum}</p>
        <p>제목: ${bDto.bTitle}</p>
        <p>내용: ${bDto.bContents}</p>
        <p>작성자: ${bDto.bWriter}</p>
        <p>작성날짜: ${bDto.bWDate}</p>
        <p>조회수: ${bDto.bWatch}</p>
        <c:if test="${loginId==bDto.bWriter}">
            <button type="button" class="crudBtn" onclick="history.back()">수정(만들예정)</button>
            <button type="button" class="crudBtn" onclick="history.back()">삭제(만들예정)</button>
        </c:if>
    </div>

    <button type="button" onclick="history.back()">리스트로 돌아가기</button>
</div>

<div class="headerBigBox" style="min-height: 180px; background-color: #2e2e34;">
	<nav class="top-right" style="">
    
		<div class="headerBox">
			<nav id="loginIdHeaderOn" style="padding: 15px 10px 0px 0px; float: right; display: none;">
				<p id="loginIdHeader" style="color: #fff; float: left;">test님</p>
				&ensp;<a href="/member/info" id="checkAM">내 정보 확인</a>
				&ensp;<a href="/member/logout">로그아웃</a>&ensp;
			</nav>
			<nav id="loginIdHeaderOff" style="padding: 15px 10px 0px 0px; float: right; display: block;">
				<p id="loginIdHeader" style="color: #fff; float: left;">현재 로그인 상태가 아닙니다.</p>
			</nav>
		</div>
		
		<ul class="top-menu" style="color: #d8d3cd">
			<li><a>menu1</a></li>
			<li><a href="/board/list?page=1">게시판</a></li>
			<li><a>menu3</a></li>
			<li><a>menu4</a></li>
		</ul>
        
	</nav>
</div>

• 메뉴 2번을 게시판으로 변경했다.
• 페이징을 넣을 것이기 때문에 링크를 넘어갈 때 페이지를 지정해서 넘겨줬다.

@Controller
@Slf4j
public class BoardController {
	@Autowired
	private BoardService bSer;
	
	@GetMapping("/board/list")
	public String boardList(@RequestParam(name="page")int page, Model model, RedirectAttributes ra) {
		log.info("==> GetMapping - boardList 요청 <==");
		
		ArrayList<BoardDto> bList = bSer.bList(page);
		model.addAttribute("bList", bList);
		log.info("==> bList: {}",bList);
		
		return "boardList";
	}
}

• 넘겨준 페이지는 @RequestParam으로 받아주고, 글을 받아오기 위해 BoardDto가 담긴 ArrayList를 생성했다.
• model에 받아온 ArrayList를 저장하고 리턴한다.

public ArrayList<BoardDto> bList(int page) {
    System.out.println("==== bSer -> bList");
    return bDao.bList(page);
}

public ArrayList<BoardDto> bList(int page);

<select id="bList">
    select bNum, bTitle, bWriter, bWDate, bWatch from board order by bNum limit 0,10
</select>

• 나중에 페이징을 넣을때 여기에서 limit에 적은 0에 받아온 값을 넣을 예정이다.

<jsp:include page="./header.jsp"></jsp:include>

<div class="allBigBox">
    <table class="bListTable">
        <tr>
            <th>&ensp;글 번호&ensp;</th>
            <th>&ensp;제목&ensp;</th>
            <th>&ensp;작성자&ensp;</th>
            <th>&ensp;작성 날짜&ensp;</th>
            <th>&ensp;조회수&ensp;</th>
        </tr>
        <c:if test="${empty bList}">
            <tr>
                <td>글이 존재하지 않습니다.</td>
            </tr>
        </c:if>
        <c:if test="${!empty bList}">
            <c:forEach items="${bList}" var="b">
                <tr>
                    <td>&ensp;${b.bNum}&ensp;</td>
                    <td>&ensp;${b.bTitle}&ensp;</td>
                    <td>&ensp;${b.bWriter}&ensp;</td>
                    <td>&ensp;${b.bWDate}&ensp;</td>
                    <td>&ensp;${b.bWatch}&ensp;</td>
                </tr>
            </c:forEach>
        </c:if>
    </table>

    <br>
    <button type="button" onclick="location.href='/'">메인화면</button>
</div>

• body
• 변수명을 두번째 글자에 대문자를 자주 썼는데 이번에 c:forEach를 사용하려니까 문제가 생겼었다. 이 문제를 해결하려고 많은 애를 썼는데, 아직 검색하는 법을 잘 몰라서 서칭도 오래 걸렸다.

//@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor

private int bNum;	// 글번호
private String bTitle;	// 글 제목
private String bContents;	// 글 내용
private String bWriter;	// 작성자
private String bWDate;	// 작성시간/날짜
private String bWatch;	// 조회수

public int getbNum() {
    return bNum;
}
public String getbTitle() {
    return bTitle;
}
public String getbContents() {
    return bContents;
}
public String getbWriter() {
    return bWriter;
}
public String getbWDate() {
    return bWDate;
}
public String getbWatch() {
    return bWatch;
}
public void setbNum(int bNum) {
    this.bNum = bNum;
}
public void setbTitle(String bTitle) {
    this.bTitle = bTitle;
}
public void setbContents(String bContents) {
    this.bContents = bContents;
}
public void setbWriter(String bWriter) {
    this.bWriter = bWriter;
}
public void setbWDate(String bWDate) {
    this.bWDate = bWDate;
}
public void setbWatch(String bWatch) {
    this.bWatch = bWatch;
}

• 위에서 말한 에러코드는 이랬다. -> c:forEach Property [bnum] not found on type [cohttp://m.myPro.persP.dto.BoardDto]
• @Data를 이용해서 간편하게 사용하려고 했는데 내가 지정한 변수명이 두번째 글자들이 대문자이다 보니 lombok의 Getter, Setter가 getBNum, getBTitle 이런 식으로 생성해서 컴퓨터가 이해할 수 없다? 고 했던 것 같다. 그래서 수동으로 sts에서 Getter, Setter를 만들어주는 것을 통해 추가해주었다.

• 아직 디테일은 만들지 않았다.

• 프로젝트를 우클릭하면 나오는 창에서 맨 밑의 Properties를 클릭한다.

• 왼쪽 박스에서 Java Build Path를 들어간 뒤, Libraries를 클릭한다.

• Classpath를 클릭 후, Add Library를 해준다.  (위의 Modulepath에 하면 내가 한 방식으로는 에러가 난다!)

• JUnit을 누른 후, Next>Finish를 차례로 눌러준다.  (Next 시 버전을 선택할 수 있다.)

• Apply and Close를 통해 추가해준다.

• 세번째 폴더의 src/test/java를 들어간다.

•  더미데이터를 추가할 패키지/파일을 만든다.

•  클래스에 @SpringBootTest를 추가하고, 더미데이터로 추가할 내용을 작성한다.

@SpringBootTest
class BoardDtoTest {

	@Autowired
	private BoardDao bDao;
	@Test
	//@Transactional
	void insertDummyDataTest() {
		BoardDto bDto=new BoardDto();
		for(int i=0;i<100;i++) {
			bDto.setbTitle("제목"+i);
			bDto.setbContents("내용"+i);
			bDto.setbWriter("aaa");
			bDao.insertDummyData(bDto);
		}
		
	}

}

• dao의 xml이나 java에서 insert 구문을 적는다. (나는 java 파일에 작성했다.)

// Test용 더미 데이터
@Insert("insert into board values(default,#{bTitle},#{bContents},#{bWriter},default,default)")
public void insertDummyData(BoardDto bDto);

• 다시 더미데이터로 추가할 내용을 작성해준 클래스로 돌아가서 우클릭을 통해 Run As > 2JUnit Test를 클릭한다.

• 왼쪽 네모박스에서 결과를 확인할 수 있다!