분류 전체보기 (135)

프로그래밍/저장

sts4) 페이징

728x90

 

 

페이징(paging)

 

첫페이지
중간 페이지
마지막 페이지

 

slPro 7차 일지에서 페이징을 다뤘었는데 해당 코드에 오류가 있다는 것을 알게 되었다.

 

 

private int nowP;	// 현재 페이지
private int firstP = 1;	// 맨 첫번째 페이지
private int lastP;	// 맨 마지막 페이지
private int leftP;	// 현재 페이지의 첫번째 페이지	(중간페이지 기준 11)
private int rightP;	// 현재 페이지의 마지막 페이지	(중간페이지 기준 20)
private int beforeP;	// 이전 페이지의 첫번째 페이지	(중간페이지 기준 1)
private int nextP;	// 다음 페이지의 첫번째 페이지	(중간페이지 기준 31)
private int pageSize = 10;
public Paging(int nowP, int bCnt) {
	this.nowP = nowP;
	lastP = (int)Math.ceil((double)bCnt/(double)pageSize);
	leftP = ((((nowP-1)/pageSize))*pageSize) +1;
	rightP = leftP + pageSize -1;
	beforeP = leftP - pageSize;
	nextP = leftP + pageSize;
}

매개변수로 현재 페이지와 전체 글 갯수를 받아와서 계산해준다.

 

this.nowP = nowP;

현재 페이지는 그대로 현재 페이지에 넣어준다.

 

lastP = (int)Math.ceil((double)bCnt/(double)pageSize);

맨 마지막 페이지는 소수점이 나올 수 있도록 전체 글 갯수와 페이지 사이즈를 강제형변환으로 double 타입으로 변경해준 다음, 소수점올림을 하며 int 타입으로 다시 강제형변환해준다.

전체 글 갯수와 페이지 사이즈를 한번에 묶어서 double 타입으로 형변환하면 나눈 후에 형변환하게 되어서 소수점이 날아가게 된다.

 

leftP = ((((nowP-1)/pageSize))*pageSize) +1;
rightP = leftP + pageSize -1;
beforeP = leftP - pageSize;
nextP = leftP + pageSize;

현재 페이지의 첫번째 페이지만 구하면 현재 페이지의 마지막, 이전 페이지의 첫번째, 다음 페이지의 첫번째 페이지 수를 구할 수 있게 된다.

현재 페이지의 첫번째 페이지는 우선 현재 페이지에서 1을 뺀 다음, 전체 글 갯수로 나눠준다. 나눈 후 소수점 내림을 해줄건데 둘 다 int 타입이기 때문에 굳이 double로 바꿔서 소수점을 살린 다음 소수점을 날리고 int 타입으로 형변환하지 않아도 그냥 나누면 소수점이 날아가기 때문에 형변환을 해주지 않았다.

나눈 값에 페이지 사이즈를 곱해주고, 1을 더하면 첫번째 페이지 값이 된다.

현재 페이지의 마지막 페이지는 현재 페이지의 첫번째 페이지 값에서 페이지 사이즈에서 1을 뺀 값을 더하면 구해진다.

이전, 다음 페이지의 첫번째 페이지는 현재 페이지의 첫번째 페이지에서 페이지 사이즈를 빼거나 더하면 구해진다.

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 저장' 카테고리의 다른 글

sts4) 모달  (0) 2024.02.19
Post로 사용하여 값 전송하기  (0) 2024.02.06
STS4) 타임리프 편하게 사용하기  (0) 2024.02.02
타임리프 반복문 th:each  (0) 2024.02.02
프로그래밍/저장

sts4) 모달

728x90

 

 

모달(modal) 사용하기

 

 

1. html

<title>Modal Example</title>
<!-- jquery -->
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 부트스트랩 -->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
	crossorigin="anonymous"></script>
<!-- <script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

<!-- 내 css -->
<link rel="stylesheet" href="/css/modalEX.css">
</head>

<body>
	
	<button id="btn-modal">모달 test</button>

	<div id="modal" class="modal-overlay">
		<div class="modal-window">
			<div class="title">
				<h2>모달타이틀</h2>
			</div>
			<div class="close-area">X</div>
			<div class="content">
				모달에 넣을 내용
			</div>
		</div>
	</div>


	<!-- 내 js -->
	<script type="text/javascript" src="/js/modalEX.js"></script>

</body>

원래 주석처리한 부트스트랩을 사용했는데 새 프로젝트 만들어서 테스트할 때는 잘 작동이 되었는데 작업하던 곳에 모달을 추가했더니 자꾸 css가 아예 먹지 않거나 모달창이 안 먹혀서 부득이하게 부트스트랩 js만 따로 사용하게 되었다..

button의 id와 모달의 가장 큰 div의 id는 같아야 한다.

 

2. CSS

더보기 
.modal-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 40, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.modal-window {
    background: rgba(9, 20, 40, 0.9);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(13.5px);
    -webkit-backdrop-filter: blur(13.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 680px;
    height: 500px;
    position: relative;
    top: -100px;
    padding: 10px;
}

.title {
    padding-left: 10px;
    display: inline;
    text-shadow: 1px 1px 2px gray;
    color: #C8AA6E;
}

.title h2 {
	display: inline;
}

.close-area {
    display: inline;
    float: right;
    padding-right: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px gray;
    color: #C89B3C;
}

.content {
    margin-top: 20px;
    padding: 0px 10px;
    text-shadow: 1px 1px 2px gray;
    color: white;
    text-align: left;
}
.contents{
    width : 300px;
    height : 200px;
    border: 1px solid black;
}


.btn-group button{
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}
.btn-group #duoBtn{
    margin-right: -4px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.btn-group #mentoBtn{
    margin-left: -4px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.btn-group #discodeOn{
    margin-right: -4px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.btn-group #discodeOff{
    margin-left: -4px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.btn-group .selectBtn{
    border: 1px solid #091428;
    background-color: #C89B3C;
    color: #1E282D;
}
.btn-group .noSelectBtn{
    border: 1px solid #C89B3C;
    background-color: #091428;
    color: #C89B3C;
}

길어서 더보기 안에 넣어두었다.

 

3. js

/* ========== 모달창 열기 ========== */
const modal = document.getElementById('modal')
const btn_modal = document.getElementById('btn-modal')
btn_modal.addEventListener('click', e => {
	modal.style.display = 'flex'
})

/* ========== 모달창 닫기 ========== */
const closeBtn = modal.querySelector('.close-area')
closeBtn.addEventListener('click', e => {
	modal.style.display = 'none'
})
/* 외부영역으로 닫기 */
$(document).mouseup(function (e){
	if($('#modal').has(e.target).length === 0){ $('#modal').hide(); }
});
/* ESC로 닫기 */
$(document).keydown(function(e){
    var code = e.keyCode || e.which;
    if (code == 27) {
        $('#modal').hide();
    }
});

외부영역 클릭이나 ESC로 닫는 방법은 블로그(링크)를 통해 알게 되었다.

 

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 저장' 카테고리의 다른 글

sts4) 페이징  (0) 2024.02.19
Post로 사용하여 값 전송하기  (0) 2024.02.06
STS4) 타임리프 편하게 사용하기  (0) 2024.02.02
타임리프 반복문 th:each  (0) 2024.02.02
프로그래밍/저장

Post로 사용하여 값 전송하기

728x90

 

PostMapping으로 값 전송하기

 

 

1. js에서 submit 하기

 

1-1) html에서 함수를 실행할 버튼 혹은 링크를 만든다.

<!-- html -->
<input type="password" id="unBPw" name="b_pw" class="input" placeholder="비밀번호 입력" maxlength="20"> <br>
<button type="button" class="crudBtn" th:onclick="unUD([[${bDto.b_num}]],'U')">수정</button>
<button type="button" class="crudBtn" th:onclick="unUD([[${bDto.b_num}]],'D')">삭제</button>

<a href="javascript:'함수명'('매개변수')">js링크</a> 이런 식으로 a 태그를 통해 js 함수 호출도 가능하다고 한다.

 

1-2) js에서 함수 생성

<!-- js -->
function unUD(num,UD){
    let form = document.createElement('form');	// form 태그 생성
    let input;
    input = document.createElement('input');	// input 태그 생성
    input.setAttribute('type', 'hidden');	// input 태그의 타입을 hidden으로 설정
    input.setAttribute('name', 'b_num');	// input 태그의 name 설정
    input.setAttribute('value', num);	// input 태그의 값 설정
    if(UD=="U"){
        form.setAttribute('action', '/board/boardUpdate');
    }else if(UD=="D"){
        form.setAttribute('action', '/board/boardDelete');
    }
    form.appendChild(input);	// input 태그를 form 태그 안에 종속
    form.setAttribute('method', 'post');	// PostMapping
    document.body.appendChild(form);	// body에 form 태그 종속
    form.submit();	// form submit
}

* 작업하던 것이라서 js 함수에서 비밀번호 확인하는 ajax도 있고 그랬는데 나중에 보면서 헷갈릴 것 같아서 제외했다.

 

 

2. html에서 submit 하기 (+ 버튼에 formaction 넣어서 url 다르게 보내기)

 

<form method="post">
	<input type="hidden" th:value="${bDto.b_num}">
	<button type="submit" class="crudBtn" formaction="/board/boardUpdate">수정</button>
	<button type="submit" class="crudBtn" formaction="/board/boardDelete">삭제</button>
</form>

 

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 저장' 카테고리의 다른 글

sts4) 페이징  (0) 2024.02.19
sts4) 모달  (0) 2024.02.19
STS4) 타임리프 편하게 사용하기  (0) 2024.02.02
타임리프 반복문 th:each  (0) 2024.02.02
1 2 3 4 ··· 45

티스토리툴바