<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된 것으로 보이지 않아서 순서가 중요하다!

• 게시판 리스트

• 조회수 증가

• 리스트