코드로 배우는 스프링 웹 프로젝트 - 7

김상복·2022년 5월 20일
0

30번 영상 : 게시글 수정 삭제


게시글 수정 삭제는 버튼과 JavaScript을 통해서 이루어 진다

	<button class="btn btn-default" data-oper='modify'>Modify</button>
    <button class="btn btn-danger" data-oper='remove'>Remove</button>
    <button class="btn btn-info" data-oper='list'>List</button>

<script>
	$(document).ready(function(){
		
		var formObj = $("form");
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action","/board/remove")
				.attr("method","post");
				formObj.submit();
			}
			if(operation === 'modify'){
				formObj.attr("action","/board/modify")
				.attr("method","post");
				formObj.submit();
			}
			
		})
		
					
	})
</script>                           	

1. $(document).ready(function() : 간단하게 이야기하자면 모든 html을 불러오고 나서 실행하는 함수

[관련 포스팅]
https://tlatmsrud.tistory.com/16

2. e.preventDefault();
모든 기능을 정지시킨다는 의미 / 해당 jsp에서 사용한 이유는 버튼을 눌렀을 때 아무런 기능도 하지 않고 해당 value 값만을 가져와서 Javascipt을 통해서 이용할 계획이기 때문이다

[관련 포스팅]
https://programming119.tistory.com/100

3. self.location : 해당 URL로 이동

4. formObj.attr("action","/board/modify")
.attr("method","post");
formObj.submit();

해당 formObj 에는 form에 대한 데이터가 들어가 있고, 거기에 맞는 aciont 값과 method 값을 지정해줄 수 있다. 그리고 난 뒤 해당 데이터를 Submit 해준다는 의미


31번 영상 : 오카르의 실행계획과 인덱스


Index : 색인, 번호

오라클 힌트

https://devuna.tistory.com/35

간단히 이야기하자면 sql 구문에는 틀려도 영향을 주지않으면서 어떠한 데이터를 끌어오면 좋을지 참고하라고 힌트를 던져주는 구문 / 데이터 내용 / 형식으로 사요된다


32번 영상 : ROWNUM과 페이징 처리


ROWNUM

가상의 데이터로 출력이 되면서 붙는 가상의 번호

보면 알겠지만 가장 큰 번호에 1번 ROWNUM이 붙어있는 것을 볼 수 있다
ROWNUM은 도착하는 순서이기 때문이다

select from
(
select /
+ Index_desc (tbl_board pk_board) */ rownum rno, bno, title, writer from tbl_board
where bno > 0 and rownum >= 0 and rownum <= 20
) where rno > 10 and rno <= 20;

위의 코드로 입력해야만 해당 범위 안의 rownum 페이징 처리가 가능한 것을 알 수 있다

sql문의 문법은

select : 조회
( * ) : 모든 컬럼
from : 어떤
테이블 : 테이블명

원래 rownum은 가장 최신화된 데이터만 출력될 수 있다
그렇기에 rownum 1이 있는 상태에서 2 부터의 데이터만 출력하려고 하면 아무것도 출력되지 않는 모습을 볼 수 있다

그렇기에 위의 코드와 같이

테이블 부분에 인라인 코드를 사용해서 rownum의 출력 데이터를 넣는다 즉, 모든 rownum 데이터를 테이블화 시켜서 넣고 대신 rownum 자체만을 테이블에 넣을 수 없어서 rownum 에도 별칭을 넣어주고 해당 별칭에 조건문을 넣어서 데이터를 출력할 수 있도록 한다


33번 영상 : 마이바티스 이용해서 페이징 처리하기


[코드]

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO">
	<![CDATA[
		select * from
		(
		    select /*+ Index_desc (tbl_board pk_board) */ rownum rno, 
            bno, title, writer, regDate, updateDate from tbl_board 
		where bno > 0 and rownum >= 0  and rownum <= (#{pageNum} * #{amount})
		) where rno > (#{pageNum} - 1) * #{amount}
	]]>
</select>

중요한 것은

![CDATA[]]

이다

이것은 xml 파일에서는 > < 와 같은 연산자는 사용이 안되는데 CDATA 를 통해서 사용 할 수 있도록 해준다.

위와 같은 데이터로 DB에서 파일을 불러올 수 있도록 하자


34번 영상 : 페이징 처리용 DTO


	public PageDTO(Criteria cri, int total) {
	
	this.cri = cri;
	this.total = total;
	
	this.endPage = (int)(Math.ceil(cri.getPageNum() / 10.0)) * 10;
	this.startPage = endPage-9;

	
	int realEnd = (int)(Math.ceil((total * 1.0) / cri.getAmount()));
	this.endPage = (realEnd <= endPage)? realEnd : endPage;
	this.startPage = (startPage >= endPage)? endPage : startPage; 
			
	this.prev = this.startPage > 1;
	this.next = this.endPage < realEnd;
	
}

1. Math.ceil : 1이면 2로 2이면 3으로 하나 올려 주는 함수

전체 게시글이 256일때는 페이지당 10개씩 출력 하면 26개의 페이지 넘버가 출력되어야함으로 이런 형식을 띄게 된다


35번 영상 : 페이징 처리


    <c:if test="${pageMaker.prev }"> 
	    <li class="page-item">
	     	<a class="page-link" href="#" tabindex="-1">Previous</a>
	  	</li>
	</c:if>
    

위 코드에서 주목해야할 점은 부트스트랩으로 만들어진 코드를 그대로 가져와서 pageMaker.prev 즉 PageDTO = pageMaker 이기에 PageDTO의 prev 라는 데이터는 boolean형이고 1보다 클때 즉 첫번째 페이지가 아닐 때 이전 페이지 항목을 뛰운다는 것을 의미한다
JSTL의 사용법을 알아두도록 하자

  <li class="page-item ${pageMaker.cri.pageNum == num?"active":"" }"><a class="page-link" href="#">${num }</a></li>

해당 문자열로 볼 수 있는 점은 page-item이라는 css와 page-item active라는 css가 있는데 pageDTO에서는 Criteria 클래스를 매개변수로 가져오게 되고 그 안의 pageNum을 가져올 수 있고 그 값이 해당 url의 파라미터 페이지 번호와 일치 할 때 active css를 불러와서 적용시켜 준다는 점을 알 수 있다

부트스트램 이란?
https://ict-nroo.tistory.com/21

profile
초보 개발자

0개의 댓글